ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-08 01:10:02 +02:00
Code Issues Projects Releases Packages Wiki Activity

Added browser screnshot image

Browse source
This commit is contained in:
Mauro Balades 2024-07-07 14:20:46 +02:00
parent 88d9b0e60b
commit 917403a7fb
3 changed files with 67 additions and 61 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
public/browser.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 300 KiB

2
src/app/page.tsx
View file

@ -1,3 +1,5 @@
"use client";
import Features from "@/components/features";
import Footer from "@/components/footer";
import Header from "@/components/header";

126
src/components/header.tsx
View file

@ -1,5 +1,6 @@
"use client";
import { ny } from "@/lib/utils";
import AnimatedGridPattern from "./ui/animated-grid-pattern";
import AnimatedGradientText from "./ui/animated-gradient-text";
import { ChevronDown, ChevronRight } from "lucide-react";
import WordPullUp from "./ui/word-pull-up";
@ -10,66 +11,69 @@ import { FadeText } from "./ui/fade-text";
export default function Header() {
return (
<div className="w-full relative flex h-screen justify-center flex-col align-center">
<GridPattern
numSquares={30}
maxOpacity={0.5}
height={50}
width={50}
duration={3}
repeatDelay={1}
x={-1}
y={-1}
strokeDasharray="4 2"
className={ny(
'[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]',
'w-full z-0',
)}
/>
<div className="z-10 flex mb-10 items-center justify-center">
<a href="/download">
<AnimatedGradientText>
🎉
{' '}
<hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />
{' '}
<span
className={ny(
`inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
)}
>
Introducing Zen Beta
</span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedGradientText>
</a>
<>
<div className="w-full relative flex h-screen justify-center flex-col align-center">
<GridPattern
numSquares={30}
maxOpacity={0.5}
height={50}
width={50}
duration={3}
repeatDelay={1}
x={-1}
y={-1}
strokeDasharray="4 2"
className={ny(
'[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]',
'w-full z-0',
)}
/>
<div className="z-10 flex mb-10 items-center justify-center">
<a href="/download">
<AnimatedGradientText>
🎉
{' '}
<hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />
{' '}
<span
className={ny(
`inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
)}
>
Introducing Zen Beta
</span>
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</AnimatedGradientText>
</a>
</div>
<WordPullUp
className="text-3xl font-bold tracking-[-0.02em] text-black dark:text-white md:text-7xl md:leading-[5rem]"
words="Make It Yours"
/>
<BlurIn
word="Firefox based browser with a focus on privacy and customization."
className="!text-xl text-muted-foreground !font-medium"
/>
<div className="max-w-1/4 mt-10 flex items-center justify-center">
<a href="/docs" className="mr-5">
<FadeText
className="text-md font-medium text-black dark:text-white"
direction="up"
framerProps={{
show: { transition: { delay: 0.2 } },
}}
text="Documentation"
/>
</a>
<a href="/download">
<ShinyButton text="Download now" />
</a>
</div>
<ChevronDown className="absolute bottom-5 left-1/2 size-7 mb-10 animate-bounce" style={{
transform: 'translateX(-50%)',
}} />
</div>
<WordPullUp
className="text-3xl font-bold tracking-[-0.02em] text-black dark:text-white md:text-7xl md:leading-[5rem]"
words="Make It Yours"
/>
<BlurIn
word="Firefox based browser with a focus on privacy and customization."
className="!text-xl text-muted-foreground !font-medium"
/>
<div className="max-w-1/4 mt-10 flex items-center justify-center">
<a href="/docs" className="mr-5">
<FadeText
className="text-md font-medium text-black dark:text-white"
direction="up"
framerProps={{
show: { transition: { delay: 0.2 } },
}}
text="Documentation"
/>
</a>
<a href="/download">
<ShinyButton text="Download now" />
</a>
</div>
<ChevronDown className="absolute bottom-5 left-1/2 size-7 mb-10 animate-bounce" style={{
transform: 'translateX(-50%)',
}} />
</div>
<img src="/browser.png" className={ny('mx-auto shadow mt-24 z-0 w-3/4 rounded-xl overflow-hidden border-2 border-blue-500')} />
</>
)
}