updated hero section and added google auth

components/features-section.tsx

@@ -0,0 +1,86 @@
+"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: "easeOut",
+        },
+    },
+};
+
+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>
+    );
+}