80 lines
2.9 KiB
TypeScript
80 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
import { useIsMobile } from "@/hooks/use-mobile";
|
|
|
|
import { LineShadowText } from "@/components/ui/line-shadow-text";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface Hero233Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Hero233 = ({ className }: Hero233Props) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"relative h-screen w-screen overflow-hidden bg-background py-32",
|
|
className,
|
|
)}
|
|
>
|
|
<div className="relative z-20 container flex flex-col items-center justify-center gap-4 py-10 text-center md:mt-22">
|
|
<div className="absolute -z-1 size-full max-w-3xl bg-background blur-xl" />
|
|
<Button variant="outline" className="my-16 w-fit gap-2 md:my-5">
|
|
<span className="size-2 rounded-full bg-current" />
|
|
<span>Flexible Plan customized for you</span>
|
|
</Button>
|
|
<div className="relative flex max-w-4xl items-center justify-center text-center">
|
|
<h1 className="text-heading-1 relative z-10 font-bold tracking-tight">
|
|
<span className="mr-3 text-muted-foreground/50">
|
|
The only app you Need to Stay
|
|
</span>
|
|
<LineShadowText> Productive </LineShadowText>
|
|
<span className="text-muted-foreground/50"> ever</span>
|
|
<span>.</span>
|
|
</h1>
|
|
</div>
|
|
|
|
<p className="text-body mt-5 max-w-xl bg-background leading-relaxed text-muted-foreground/80">
|
|
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ipsum animi,
|
|
ipsam provident optio delectus neque aliquid cumque. Beatae, odio!
|
|
</p>
|
|
<div className="my-5 flex flex-wrap justify-center gap-4">
|
|
<Button variant="secondary" className="w-fit gap-2">
|
|
<span>Documentation</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ml-3 group-hover:rotate-0" />
|
|
</Button>
|
|
<Button variant="primary" className="w-fit gap-2">
|
|
<span>Get Started</span>
|
|
<ArrowRight className="size-4 -rotate-45 transition-all ease-out group-hover:ml-3 group-hover:rotate-0" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute top-0 flex size-full justify-center">
|
|
{Array.from({ length: isMobile ? 7 : 18 }).map((_, i) => (
|
|
<motion.div
|
|
key={i}
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: "100%" }}
|
|
transition={{
|
|
duration: 0.8,
|
|
delay: i * 0.05,
|
|
ease: "easeOut",
|
|
}}
|
|
className="w-24 border-l bg-gradient-to-b to-transparent transition-all ease-in-out hover:scale-110 hover:from-black/2"
|
|
/>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Hero233 };
|