Initial commit

components/Testimonials.tsx

@@ -0,0 +1,80 @@
+const items = [
+  { quote: "The webinar on revocable living trusts was incredibly informative. I finally understand how to protect my assets and avoid probate.", name: "James Wilson", title: "Small Business Owner", role: "👨‍💼" },
+  { quote: "As a senior citizen, I was confused about healthcare directives. The instructor explained everything clearly and answered all my questions.", name: "Margaret Foster", title: "Retiree", role: "👵" },
+  { quote: "The tax planning webinar saved me thousands. I learned strategies I never knew existed. Worth every penny and more!", name: "Carlos Rodriguez", title: "Real Estate Investor", role: "🏢" },
+];
+
+export default function Testimonials() {
+  return (
+    <section className="py-28 bg-gradient-to-br from-white via-white to-blue-50 dark:from-darkbg dark:via-darkbg dark:to-slate-900">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="text-center space-y-3 mb-16">
+          <h2 className="text-5xl font-black text-gray-900 dark:text-white">
+            ⭐ Trusted by <span className="text-primary">Thousands</span>
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
+            Real feedback from people who transformed their financial future with us
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-3 gap-6 mt-12">
+          {items.map((t) => (
+            <div
+              key={t.name}
+              className="group relative"
+            >
+              {/* Gradient border effect */}
+              <div className="absolute -inset-0.5 bg-primary rounded-2xl opacity-0 group-hover:opacity-100 blur transition duration-300 group-hover:blur-lg"></div>
+
+              <div className="relative bg-white dark:bg-slate-800/80 rounded-2xl shadow-soft group-hover:shadow-elevation-3 p-8 transition-all duration-300 group-hover:-translate-y-2 backdrop-blur-sm border border-gray-100 dark:border-slate-700">
+                {/* Top accent */}
+                <div className="absolute top-0 left-0 w-1 h-12 bg-primary rounded-bl-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+
+                {/* Star rating */}
+                <div className="flex gap-1 text-xl">
+                  {[...Array(5)].map((_, i) => (
+                    <span key={i} className="group-hover:scale-110 transition-transform duration-300" style={{ transitionDelay: `${i * 50}ms` }}>
+                      ⭐
+                    </span>
+                  ))}
+                </div>
+
+                {/* Quote */}
+                <p className="text-gray-700 dark:text-gray-300 mt-5 leading-relaxed font-medium text-sm md:text-base">
+                  "{t.quote}"
+                </p>
+
+                {/* Author */}
+                <div className="mt-6 flex items-center gap-4 pt-6 border-t border-gray-100 dark:border-slate-700">
+                  <div className="h-12 w-12 rounded-full bg-primary flex items-center justify-center text-xl font-bold text-white shadow-glow group-hover:shadow-lg transition-all duration-300">
+                    {t.role}
+                  </div>
+                  <div>
+                    <div className="font-bold text-gray-900 dark:text-white text-sm md:text-base">{t.name}</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 font-semibold">{t.title}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Trust metrics */}
+        <div className="grid md:grid-cols-3 gap-6 mt-20 pt-12 border-t border-gray-200 dark:border-gray-700">
+          <div className="text-center hover-lift">
+            <div className="text-4xl font-black text-primary">15,000+</div>
+            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Students Graduated</div>
+          </div>
+          <div className="text-center hover-lift">
+            <div className="text-4xl font-black text-secondary">4.9⭐</div>
+            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Average Rating</div>
+          </div>
+          <div className="text-center hover-lift">
+            <div className="text-4xl font-black text-accent">500+</div>
+            <div className="text-gray-600 dark:text-gray-400 font-semibold mt-2">Expert-Led Courses</div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}