Testimonials

<section className="py-12 md:py-24 max-w-6xl mx-auto px-4">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Loved by developers</h2>
  </div>
  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center space-x-4 mb-4">
        <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=a" alt="User" / width="150" height="150">
        </span>
        <div>
          <p className="text-sm font-semibold">Sarah Jenkins</p>
          <p className="text-xs text-muted-foreground">Frontend Lead</p>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">"ToolMate UI has completely transformed how our team builds interfaces. The components are gorgeous and incredibly easy to customize."</p>
    </div>
    {/* Add more cards as needed */}
    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center space-x-4 mb-4">
        <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=b" alt="User" / width="150" height="150">
        </span>
        <div>
          <p className="text-sm font-semibold">David Chen</p>
          <p className="text-xs text-muted-foreground">Indie Hacker</p>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">"I launched my SaaS in record time thanks to these templates. The code quality is top-notch."</p>
    </div>
  </div>
</section>

"use client";

import React, { useState } from "react";

interface TestimonialsProps {
  className?: string;
  children?: React.ReactNode;
}

export default function Testimonials({
  className = "",
  children,
}: TestimonialsProps) {
  const [isActive, setIsActive] = useState(false);

  return (
    <div
      onClick={() => setIsActive(!isActive)}
      className={`transition-all ${isActive ? "ring-2 ring-primary/30 rounded-xl" : ""} ${className}`}
    >
      <section className="py-12 md:py-24 max-w-6xl mx-auto px-4">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Loved by developers</h2>
  </div>
  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center space-x-4 mb-4">
        <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=a" alt="User" / width="150" height="150">
        </span>
        <div>
          <p className="text-sm font-semibold">Sarah Jenkins</p>
          <p className="text-xs text-muted-foreground">Frontend Lead</p>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">"ToolMate UI has completely transformed how our team builds interfaces. The components are gorgeous and incredibly easy to customize."</p>
    </div>
    {/* Add more cards as needed */}
    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center space-x-4 mb-4">
        <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=b" alt="User" / width="150" height="150">
        </span>
        <div>
          <p className="text-sm font-semibold">David Chen</p>
          <p className="text-xs text-muted-foreground">Indie Hacker</p>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">"I launched my SaaS in record time thanks to these templates. The code quality is top-notch."</p>
    </div>
  </div>
</section>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";

export default function AnimatedTestimonials() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.96 }}
      animate={{ opacity: 1, scale: 1 }}
      whileHover={{ scale: 1.02 }}
      whileTap={{ scale: 0.98 }}
      transition={{ type: "spring", stiffness: 350, damping: 25 }}
      className="cursor-pointer"
    >
      <section className="py-12 md:py-24 max-w-6xl mx-auto px-4">
  <div className="text-center mb-12">
    <h2 className="text-3xl font-bold tracking-tighter sm:text-4xl">Loved by developers</h2>
  </div>
  <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center space-x-4 mb-4">
        <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=a" alt="User" / width="150" height="150">
        </span>
        <div>
          <p className="text-sm font-semibold">Sarah Jenkins</p>
          <p className="text-xs text-muted-foreground">Frontend Lead</p>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">"ToolMate UI has completely transformed how our team builds interfaces. The components are gorgeous and incredibly easy to customize."</p>
    </div>
    {/* Add more cards as needed */}
    <div className="rounded-xl border border-border bg-card p-6 shadow-sm">
      <div className="flex items-center space-x-4 mb-4">
        <span className="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full">
          <img className="aspect-square h-full w-full" src="https://i.pravatar.cc/150?u=b" alt="User" / width="150" height="150">
        </span>
        <div>
          <p className="text-sm font-semibold">David Chen</p>
          <p className="text-xs text-muted-foreground">Indie Hacker</p>
        </div>
      </div>
      <p className="text-sm text-muted-foreground">"I launched my SaaS in record time thanks to these templates. The code quality is top-notch."</p>
    </div>
  </div>
</section>
    </motion.div>
  );
}