11import { AnimatedGroup } from "@/components/ui/animated-group" ;
2- import BgAngels from "@/components/brand-assets/bg-angels" ;
3- import { WaitlistForm } from "@/components/home/waitlist" ;
42import HeroLight from "@/public/images/hero-light.png" ;
53import HeroDark from "@/public/images/hero-dark.png" ;
6- import { useIsMobile } from "@/hooks/use-mobile" ;
74import Header from "@/components/home/header" ;
85import { type Variants } from "motion/react" ;
6+ import { Button } from "../ui/button" ;
97import Image from "next/image" ;
108import Footer from "./footer" ;
9+ import Link from "next/link" ;
1110
1211const transitionVariants : { item : Variants } = {
1312 item : {
@@ -29,30 +28,16 @@ const transitionVariants: { item: Variants } = {
2928} ;
3029
3130export default function Hero ( ) {
32- const isMobile = useIsMobile ( ) ;
33-
3431 return (
3532 < div className = "font-manrope flex w-full flex-1 flex-col items-center justify-center gap-12 overflow-hidden px-4 py-40 md:gap-16" >
3633 < Header />
3734 < AnimatedGroup variants = { transitionVariants } className = "w-full" >
3835 < div className = "relative flex w-full flex-col gap-12 px-4 md:px-6" >
39- { isMobile && (
40- < BgAngels className = "pointer-events-none absolute -top-40 left-40 z-0 h-auto rotate-12 opacity-50" />
41- ) }
42-
4336 < div className = "relative mx-auto w-full max-w-3xl sm:max-w-4xl md:max-w-5xl lg:max-w-6xl" >
4437 < div className = "pointer-events-none absolute top-1/2 left-1/2 z-0 block h-[60vw] w-[120vw] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse_at_center,rgba(255,255,255,0.7)_60%,rgba(255,255,255,0.2)_100%)] blur-[100px] sm:h-[80%] sm:w-[120%] dark:hidden" />
4538
4639 < div className = "pointer-events-none absolute top-1/2 left-1/2 z-0 hidden h-[60vw] w-[120vw] -translate-x-1/2 -translate-y-1/2 bg-[radial-gradient(ellipse_at_center,rgba(10,10,20,0.7)_60%,rgba(10,10,20,0.2)_100%)] blur-[100px] sm:h-[80%] sm:w-[120%] dark:block" />
4740
48- < div className = "absolute bottom-[-100%] left-[-100px] z-0 hidden sm:block" >
49- < BgAngels className = "scale-x-[-1] -rotate-12 opacity-40" alt = "angel right" />
50- </ div >
51-
52- < div className = "absolute right-[-100px] bottom-[-100%] z-0 hidden sm:block" >
53- < BgAngels className = "rotate-12 opacity-40" alt = "angel left" />
54- </ div >
55-
5641 < div className = "relative z-10 flex flex-col items-center justify-center gap-8 text-center md:gap-12 lg:gap-12" >
5742 < h1 className = "text-4xl leading-[1.1] font-bold tracking-[-0.02em] sm:flex-row md:text-6xl lg:text-7xl" >
5843 Cloud you < br /> can actually{ " " }
@@ -65,7 +50,18 @@ export default function Hero() {
6550 </ p >
6651 </ div >
6752 </ div >
68- < WaitlistForm />
53+ < div className = "mx-auto flex gap-2" >
54+ < Button variant = { "ghost" } asChild className = "hover:!bg-accent !bg-transparent transition-all duration-300" >
55+ < Link href = "https://github.com/nimbusdotstorage/Nimbus" className = "font-semibold" >
56+ Source Code
57+ </ Link >
58+ </ Button >
59+ < Button variant = { "default" } asChild className = "" >
60+ < Link href = "/signin" className = "font-semibold" >
61+ Sign In
62+ </ Link >
63+ </ Button >
64+ </ div >
6965 </ div >
7066 </ AnimatedGroup >
7167
0 commit comments