Update components/testimonials.tsx

components/testimonials.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { Container } from "@/components/container";
+import { Heading } from "@/components/heading";
+import { Subheading } from "@/components/subheading";
+import { Card, CardContent } from "@/components/ui/card";
+import { Quote, Star } from "lucide-react";
+import { motion } from "framer-motion";
+
+const testimonials = [
+  {
+    quote: "Alex transformed our growth strategy. We saw a 40% increase in MQLs within the first 3 months of working together.",
+    author: "Sarah Chen",
+    role: "CEO at TechFlow",
+    result: "+40% MQLs"
+  },
+  {
+    quote: "The growth audit was eye-opening. We were wasting thousands on inefficient channels. Now our CAC is down by 25%.",
+    author: "Marcus Thorne",
+    role: "Founder of SaaSly",
+    result: "-25% CAC"
+  },
+  {
+    quote: "Having Alex as a fractional partner is like having a secret weapon. The ROI has been incredible.",
+    author: "Elena Rodriguez",
+    role: "VP Marketing at ScaleUp",
+    result: "3.5x Revenue Growth"
+  }
+];
+
+export function Testimonials() {
+  return (
+    <section id="results" className="py-32 bg-neutral-50/50 relative overflow-hidden">
+      <div className="absolute top-0 left-0 w-full h-full bg-[radial-gradient(circle_at_center,rgba(59,130,246,0.03),transparent)] pointer-events-none" />
+      
+      <Container>
+        <div className="text-center max-w-3xl mx-auto mb-20">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <Heading className="text-4xl md:text-5xl">Proven Results</Heading>
+            <Subheading className="mt-6 text-lg text-neutral-600">
+              Don't just take my word for it. Here's how I've helped other founders achieve their growth goals.
+            </Subheading>
+          </motion.div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {testimonials.map((t, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, scale: 0.95 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.5, delay: i * 0.1 }}
+            >
+              <Card className="bg-white border-none shadow-xl shadow-neutral-200/50 h-full flex flex-col relative overflow-hidden group hover:-translate-y-2 transition-all duration-300">
+                <div className="absolute top-0 left-0 w-1 h-full bg-blue-600 opacity-0 group-hover:opacity-100 transition-opacity" />
+                <CardContent className="pt-10 pb-8 px-8 flex flex-col h-full">
+                  <div className="flex gap-1 mb-6">
+                    {[...Array(5)].map((_, i) => (
+                      <Star key={i} className="w-4 h-4 fill-blue-600 text-blue-600" />
+                    ))}
+                  </div>
+                  <Quote className="h-10 w-10 text-blue-600 mb-6 opacity-10 absolute top-8 right-8" />
+                  <p className="text-xl text-neutral-800 font-medium leading-relaxed mb-10 flex-grow">"{t.quote}"</p>
+                  <div className="flex justify-between items-center pt-6 border-t border-neutral-100">
+                    <div>
+                      <p className="font-bold text-neutral-900 text-lg">{t.author}</p>
+                      <p className="text-sm text-neutral-500 font-medium">{t.role}</p>
+                    </div>
+                    <div className="bg-blue-50 text-blue-700 px-4 py-2 rounded-full text-sm font-black shadow-sm">
+                      {t.result}
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </Container>
+    </section>
+  );
+}