88 lines
3.3 KiB
TypeScript
88 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import Link from "next/link";
|
|
import { ArrowRight, Sparkles } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
delayChildren: 0.3,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8,
|
|
ease: [0.22, 1, 0.36, 1], // Custom easing (approx. easeOutQuint/Expo) for a premium feel
|
|
},
|
|
},
|
|
};
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<div className="container mx-auto max-w-7xl px-4 min-h-[75vh] flex items-center relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center w-full">
|
|
<motion.div
|
|
className="flex flex-col items-start text-left space-y-8"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
animate="visible"
|
|
>
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
|
|
>
|
|
<Sparkles className="mr-1 h-3 w-3" />
|
|
AI-Powered Research
|
|
</motion.div>
|
|
|
|
<motion.h1
|
|
variants={itemVariants}
|
|
className="text-4xl font-bold tracking-tight sm:text-5xl lg:text-6xl text-foreground"
|
|
>
|
|
Find Your Next Customers
|
|
<br />
|
|
<span className="text-muted-foreground">
|
|
Before They Know They Need You
|
|
</span>
|
|
</motion.h1>
|
|
|
|
<motion.p
|
|
variants={itemVariants}
|
|
className="max-w-xl text-lg text-muted-foreground font-light leading-relaxed"
|
|
>
|
|
Sanati analyzes your product and finds people on Reddit, Hacker News,
|
|
and forums who are actively expressing needs that your solution
|
|
solves.
|
|
</motion.p>
|
|
|
|
<motion.div
|
|
variants={itemVariants}
|
|
className="flex flex-col sm:flex-row gap-4 pt-2"
|
|
>
|
|
<Link href="/auth">
|
|
<Button size="lg" className="gap-2 px-8 text-base">
|
|
Start Finding Opportunities
|
|
<ArrowRight className="h-4 w-4" />
|
|
</Button>
|
|
</Link>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right side is reserved for the shader visualization */}
|
|
<div className="hidden lg:block h-full min-h-[400px]"></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|