www/src/components/Hero.astro
mr. M f45c7b10e4
Worked on the new rebranding!
Co-authored-by: taroj1205 <taroj1205@users.noreply.github.com>
2024-11-24 23:52:26 +01:00

32 lines
No EOL
1.2 KiB
Text

---
import Title from '../components/Title.astro'
import Description from '../components/Description.astro'
import Button from '../components/Button.astro'
import Circles from '../components/Circles.astro'
import { Image } from 'astro:assets'
import myImage from '../assets/browser.png'
import { ArrowRight } from 'lucide-astro'
---
<header
id="header"
class="flex h-screen w-full flex-col items-center gap-24 pt-24 text-center md:gap-[15%] md:pt-[30%]"
>
<Circles />
<div class="flex flex-col items-center">
<Title class='text-center leading-[108px]'>Welcome to<br class="hidden md:block" /> a calmer internet</Title>
<Description class='text-center'
>Beautifully designed, privacy-focused, and packed with features.<br
/>We care about your experience, not your data.</Description
>
<div class="mt-6 gap-3 sm:gap-6 flex flex-col sm:flex-row">
<Button isPrimary>
Download
<ArrowRight class="size-4" />
</Button>
<Button>Start Exploring</Button>
</div>
</div>
<Image src={myImage} alt="Zen browser" class="mt-10" />
<!-- <img src="/browser.webp" id="header-browser-image" alt="Zen browser" /> -->
</header>