www/src/components/Hero.astro at 78fbbfa52bf05f89d421a3754908be9f15d2efe0 · zen-browser/www · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browsers.png'
import myImageLight from '../assets/browsers-light.png'
import { ArrowRight } from 'lucide-astro'
import { motion } from 'motion/react'
import { getTitleAnimation } from '../animations'

let titleAnimationCounter = 0
function getNewAnimationDelay() {
  titleAnimationCounter++
  return titleAnimationCounter * 0.15
}

function getHeroTitleAnimation() {
  return getTitleAnimation(getNewAnimationDelay())
}
---

<header
  id="header"
  class="flex w-full flex-col items-center gap-[20%] py-32 pb-16 text-center md:pb-32 lg:gap-[15%] lg:pb-16"
>
  <div class="flex h-full flex-col items-center justify-center">
    <motion.a
      href="/download"
      className="mb-10 flex items-center gap-2 rounded-full border-2 border-dark bg-dark px-2 py-1 text-sm text-paper shadow-sm transition-all duration-200 ease-in-out hover:bg-paper hover:text-dark hover:duration-200 md:px-4"
      client:load
      {...getTitleAnimation(1.8)}
    >
      <span>Beta is now available!</span>
      <ArrowRight class="size-4" />
    </motion.a>
    <Title
      class="relative px-12 text-left !font-normal leading-[108px] md:text-center md:!text-7xl lg:px-0 lg:!text-9xl"
    >
      <motion.span client:load {...getHeroTitleAnimation()}>
        welcome
      </motion.span>
      <motion.span client:load {...getHeroTitleAnimation()}> to </motion.span>
      <br class="hidden md:block" />
      <motion.span client:load {...getHeroTitleAnimation()}> a </motion.span>
      <motion.span
        client:load
        {...getHeroTitleAnimation()}
        className="italic text-coral"
      >
        calmer
      </motion.span>
      <motion.span client:load {...getHeroTitleAnimation()}>
        internet
      </motion.span>
    </Title>
    <motion.span client:load {...getHeroTitleAnimation()}>
      <Description class="px-12 text-left md:text-center lg:px-0"
        >Beautifully designed, privacy-focused, and packed with features.<br
        />We care about your experience, not your data.</Description
      >
    </motion.span>
    <div class="mt-6 flex w-2/3 flex-col gap-3 sm:gap-6 md:w-fit md:flex-row">
      <motion.span client:load {...getHeroTitleAnimation()}>
        <Button class="w-full" href="/download" isPrimary>
          Download
          <ArrowRight class="size-4" />
        </Button>
      </motion.span>
      <motion.span client:load {...getHeroTitleAnimation()}>
        <Button href="#features">Start Exploring</Button>
      </motion.span>
    </div>
  </div>
</header>
<motion.span client:load {...getHeroTitleAnimation()}>
  <Image
    src={myImage}
    alt="Zen browser"
    class="mx-auto mb-24 hidden dark:block"
    loading="eager"
  />
  <Image
    src={myImageLight}
    alt="Zen browser"
    class="mx-auto mb-24 block dark:hidden"
    loading="eager"
  />
</motion.span>