joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Started working on new site

Browse Source
This commit is contained in:
mauro-balades
2024-08-29 19:12:18 +02:00
parent 7259462073
commit 47e0fe8075
7 changed files with 147 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/header.tsx
View File

@@ -7,7 +7,7 @@ import AnimatedGradientText from "./ui/animated-gradient-text";
import { Button } from "./ui/button";
import { BorderBeam } from "./ui/border-beam";
import { ny } from "@/lib/utils";
import { ChevronRight } from "lucide-react";
import { ChevronDown, ChevronRight } from "lucide-react";
import Particles from "./ui/particles";
import Image from "next/image";
import Link from "next/link";
@@ -18,7 +18,7 @@ export default function Header() {
<>
<section
id="hero"
className="relative mx-auto mt-40 max-w-7xl px-6 text-center md:px-8"
className="relative mx-auto min-h-screen flex justify-center flex-col max-w-7xl px-6 text-center md:px-8"
>
<a href="/download">
<AnimatedGradientText>
@@ -42,64 +42,22 @@ export default function Header() {
<br className="hidden md:block" /> We care about your experience, not
your data.
</p>
<a href="/download">
<Button
className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
>
<span>Download Zen Now </span>
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</Button>
</a>
<div
ref={ref}
className="animate-fade-up relative mt-32 opacity-0 [--animation-delay:400ms] [perspective:2000px] after:absolute after:inset-0 after:z-50 after:[background:linear-gradient(to_top,hsl(var(--background))_10%,transparent)]"
>
<div
className={`rounded-xl border border-white/10 bg-white bg-opacity-[0.01] before:absolute before:bottom-1/2 before:left-0 before:top-0 before:size-full before:opacity-0 before:[background-image:linear-gradient(to_bottom,var(--color-one),var(--color-one),transparent_40%)] before:[filter:blur(180px)] ${
inView ? "before:animate-image-glow" : ""
}`}
<div className="flex justify-center w-full">
<a href="/download">
<Button
className="animate-fade-in -translate-y-4 gap-1 rounded-lg text-white opacity-0 ease-in-out [--animation-delay:600ms] dark:text-black"
>
<BorderBeam
size={200}
duration={12}
delay={11}
colorFrom="var(--color-one)"
colorTo="var(--color-two)"
/>
<img
width={1500}
height={700}
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-dark.png"
alt="browser Image"
className="relative hidden rounded-[inherit] border object-contain dark:block"
/>
<img
width={1500}
height={700}
src="https://cdn.jsdelivr.net/gh/zen-browser/www/public/browser-light.png"
alt="browser Image"
className="relative block rounded-[inherit] border object-contain dark:hidden"
/>
</div>
<span>Download Zen Now </span>
<ArrowRightIcon className="ml-1 size-4 transition-transform duration-300 ease-in-out group-hover:translate-x-1" />
</Button>
</a>
<a href="#features" className="animate-fade-up -translate-y-4 opacity-0 [--animation-delay:800ms]">
<Button variant="ghost" className="ml-4">
Start Exploring <ChevronDown className="ml-1 size-4" />
</Button>
</a>
</div>
</section>
<Particles
className="absolute inset-0 -z-10 hidden dark:block"
quantity={50}
ease={70}
size={0.05}
staticity={40}
color="#ffffff"
/>
<Particles
className="absolute inset-0 -z-10 block dark:hidden"
quantity={50}
ease={70}
size={0.05}
staticity={40}
color="#000000"
/>
</>
);
}