87 lines
3.7 KiB
TypeScript
87 lines
3.7 KiB
TypeScript
"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>
|
|
);
|
|
}
|