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 Features from "@/components/features";
import Footer from "@/components/footer"; import Footer from "@/components/footer";
import Header from "@/components/header"; import Header from "@/components/header";

126
src/components/header.tsx
View file

@ -1,5 +1,6 @@
"use client";
import { ny } from "@/lib/utils"; import { ny } from "@/lib/utils";
import AnimatedGridPattern from "./ui/animated-grid-pattern";
import AnimatedGradientText from "./ui/animated-gradient-text"; import AnimatedGradientText from "./ui/animated-gradient-text";
import { ChevronDown, ChevronRight } from "lucide-react"; import { ChevronDown, ChevronRight } from "lucide-react";
import WordPullUp from "./ui/word-pull-up"; import WordPullUp from "./ui/word-pull-up";
@ -10,66 +11,69 @@ import { FadeText } from "./ui/fade-text";
export default function Header() { export default function Header() {
return ( return (
<div className="w-full relative flex h-screen justify-center flex-col align-center"> <>
<GridPattern <div className="w-full relative flex h-screen justify-center flex-col align-center">
numSquares={30} <GridPattern
maxOpacity={0.5} numSquares={30}
height={50} maxOpacity={0.5}
width={50} height={50}
duration={3} width={50}
repeatDelay={1} duration={3}
x={-1} repeatDelay={1}
y={-1} x={-1}
strokeDasharray="4 2" y={-1}
className={ny( strokeDasharray="4 2"
'[mask-image:radial-gradient(350px_circle_at_center,white,transparent)]', className={ny(
'w-full z-0', '[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"> <div className="z-10 flex mb-10 items-center justify-center">
<AnimatedGradientText> <a href="/download">
🎉 <AnimatedGradientText>
{' '} 🎉
<hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" /> {' '}
{' '} <hr className="mx-2 h-4 w-[1px] shrink-0 bg-gray-300" />
<span {' '}
className={ny( <span
`inline animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`, 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> Introducing Zen Beta
<ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" /> </span>
</AnimatedGradientText> <ChevronRight className="ml-1 size-3 transition-transform duration-300 ease-in-out group-hover:translate-x-0.5" />
</a> </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> </div>
<WordPullUp <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')} />
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>
) )
} }