mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
101 lines
3.5 KiB
Text
101 lines
3.5 KiB
Text
---
|
|
import Title from '../components/Title.astro'
|
|
import Description from '../components/Description.astro'
|
|
import { Image } from 'astro:assets'
|
|
import { motion } from 'motion/react'
|
|
|
|
import browserCollapsed from '../assets/collapsed.png'
|
|
import browseMultiToolbar from '../assets/multiple-toolbar.png'
|
|
import browserSingleToolbar from '../assets/single-toolbar.png'
|
|
import tutaLogo from '../assets/tuta-logo.png'
|
|
import Button from './Button.astro'
|
|
import { ArrowRight } from 'lucide-astro'
|
|
|
|
import { getTitleAnimation, getZoomInAnimation } from '../animations'
|
|
---
|
|
|
|
<section id="sponsors" class="px-4 lg:flex-row lg:px-12 lg:py-32 xl:px-24">
|
|
<div class="mx-auto flex flex-col px-6 lg:w-1/2 lg:px-0 lg:text-center">
|
|
<motion.span client:load {...getTitleAnimation(0.2)}>
|
|
<Title class="font-bold">Our Sponsors</Title>
|
|
</motion.span>
|
|
<motion.span client:load {...getTitleAnimation(0.4)}>
|
|
<Description>
|
|
We are grateful to our sponsors for their support. They help us to keep
|
|
the project alive.<br />You can also be part of this journey by donating <a
|
|
href="/donate"
|
|
class="text-coral">here</a
|
|
>!
|
|
</Description>
|
|
</motion.span>
|
|
<div class="relative mt-8 flex items-center justify-center">
|
|
<motion.span client:load {...getTitleAnimation(0.6)}>
|
|
<a href="https://tuta.com/" target="_blank" class="w-fit">
|
|
<Image src={tutaLogo} alt="Tuta" class="h-16 w-fit object-contain" />
|
|
</a>
|
|
</motion.span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section
|
|
id="customization"
|
|
class="relative flex w-full flex-col overflow-y-hidden px-10 py-36 pt-24 md:px-12 lg:flex-row lg:gap-12 xl:px-52"
|
|
>
|
|
<div>
|
|
<motion.span client:load {...getTitleAnimation(0.2)}>
|
|
<Title
|
|
>Customizable<br class="md:hidden" /> to <br
|
|
class="hidden md:block"
|
|
/>the last pixel</Title
|
|
>
|
|
</motion.span>
|
|
<motion.span client:load {...getTitleAnimation(0.4)}>
|
|
<Description class="lg:w-1/2 lg:px-0">
|
|
Experience a new standard in web browsing with Zen Browser. Designed from the ground up for complete customization, Zen allows you to tailor every aspect of your browsing experience to meet your specific needs. Your imagination is the limit, literally.
|
|
</Description>
|
|
</motion.span>
|
|
<div class="mt-4 flex gap-4">
|
|
<motion.span client:load {...getTitleAnimation(0.6)}>
|
|
<Button isPrimary href="/mods">
|
|
Explore Zen Mods
|
|
<ArrowRight className="size-4" />
|
|
</Button>
|
|
</motion.span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="relative ml-16 mt-32 flex h-32 md:mt-52 lg:mx-0 lg:mt-0 lg:w-1/2"
|
|
id="browser-images"
|
|
>
|
|
<Image
|
|
src={browserCollapsed}
|
|
alt="Zen browser"
|
|
class="absolute left-[65%] top-[5%] w-2/3 -translate-x-1/2 rounded-md shadow-md"
|
|
/>
|
|
<Image
|
|
src={browseMultiToolbar}
|
|
alt="Zen browser"
|
|
class="absolute left-1/2 top-1/2 mx-auto w-2/3 -translate-x-1/2 transform rounded-md"
|
|
/>
|
|
<Image
|
|
src={browserSingleToolbar}
|
|
alt="Zen browser"
|
|
class="absolute left-[10%] top-[15%] z-10 w-2/3 -translate-x-1/2 rounded-md shadow-md"
|
|
/>
|
|
</div>
|
|
</section>
|
|
<style>
|
|
#browser-images {
|
|
& img:nth-child(1) {
|
|
transform: rotate(5deg) scale(1.05) translateX(-52%) translateY(-10%);
|
|
}
|
|
|
|
& img:nth-child(2) {
|
|
transform: rotate(2deg) scale(1.05) translateX(-50%) translateY(10%);
|
|
}
|
|
|
|
& img:nth-child(3) {
|
|
transform: rotate(-5deg) scale(1.05) translateX(-50%) translateY(-10%);
|
|
}
|
|
}
|
|
</style>
|