87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { Zap, Search, Target } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const features = [
|
|
{
|
|
title: "AI Analysis",
|
|
description:
|
|
"We scrape your website and use GPT-4 to extract features, pain points, and keywords automatically.",
|
|
icon: Zap,
|
|
className: "md:col-span-2",
|
|
},
|
|
{
|
|
title: "Smart Dorking",
|
|
description:
|
|
"Our system generates targeted Google dork queries to find high-intent posts across Reddit, HN, and more.",
|
|
icon: Search,
|
|
className: "md:col-span-1",
|
|
},
|
|
{
|
|
title: "Scored Leads",
|
|
description:
|
|
"Each opportunity is scored by relevance and comes with suggested engagement approaches.",
|
|
icon: Target,
|
|
className: "md:col-span-3",
|
|
},
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: {
|
|
staggerChildren: 0.2,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.5,
|
|
ease: [0.16, 1, 0.3, 1] as [number, number, number, number],
|
|
},
|
|
},
|
|
};
|
|
|
|
export function FeaturesSection() {
|
|
return (
|
|
<section className="border-t border-border/40 bg-muted/20 backdrop-blur-sm relative z-10">
|
|
<div className="container mx-auto max-w-7xl px-4 py-24">
|
|
<motion.div
|
|
className="grid md:grid-cols-3 gap-6"
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
>
|
|
{features.map((feature, i) => (
|
|
<motion.div
|
|
key={i}
|
|
variants={itemVariants}
|
|
className={cn(
|
|
"bg-card text-card-foreground p-8 rounded-2xl border h-full flex flex-col items-start text-left transition-all hover:border-primary/50 hover:shadow-lg",
|
|
feature.className
|
|
)}
|
|
>
|
|
<div className="flex h-12 w-12 items-center justify-center rounded-xl bg-primary/10 mb-6">
|
|
<feature.icon className="h-6 w-6 text-primary" />
|
|
</div>
|
|
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
|
<p className="text-muted-foreground leading-relaxed">
|
|
{feature.description}
|
|
</p>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|