Initial commit

components/WhyWithUs.tsx

@@ -0,0 +1,60 @@
+const items = [
+  { title: "Expert Instructors", desc: "Learn from licensed attorneys and certified estate planners", icon: "🧑‍🏫" },
+  { title: "Live & On-Demand", desc: "Join live sessions or watch recordings at your convenience", icon: "🎥" },
+  { title: "Certificates", desc: "Earn completion certificates for premium courses", icon: "🏅" },
+  { title: "Secure Platform", desc: "Your data and payments are protected with enterprise security", icon: "🔒" },
+];
+
+export default function WhyWithUs() {
+  return (
+    <section className="py-28 bg-gradient-to-br from-gray-50 via-white to-blue-50 dark:from-darkbg dark:via-slate-900 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">
+            🌟 Why Learn With <span className="text-primary">Us?</span>
+          </h2>
+          <p className="text-lg text-gray-600 dark:text-gray-300 font-medium max-w-2xl mx-auto">
+            Expert guidance, practical knowledge, and actionable insights to protect your legacy
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-4 gap-6 mt-12">
+          {items.map((it, idx) => (
+            <div
+              key={it.title}
+              className="group relative"
+            >
+              {/* Subtle background gradient */}
+              <div className="absolute -inset-0.5 bg-primary/10 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"></div>
+
+              <div className="relative bg-white dark:bg-slate-800/60 rounded-2xl p-8 border border-gray-200 dark:border-slate-700 transition-all duration-300 group-hover:shadow-elevation-2 group-hover:-translate-y-1 backdrop-blur-sm h-full flex flex-col">
+                {/* Top border accent */}
+                <div className="absolute top-0 left-0 right-0 h-1 bg-primary opacity-0 group-hover:opacity-100 rounded-t-2xl transition-opacity duration-300"></div>
+
+                {/* Icon */}
+                <div className="h-16 w-16 rounded-2xl bg-primary/20 flex items-center justify-center text-4xl group-hover:scale-110 group-hover:shadow-glow transition-all duration-300 mx-auto">
+                  {it.icon}
+                </div>
+
+                {/* Title */}
+                <h3 className="font-bold text-lg text-gray-900 dark:text-white mt-5 text-center group-hover:text-primary transition-colors duration-300">
+                  {it.title}
+                </h3>
+
+                {/* Description */}
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center leading-relaxed flex-grow font-medium">
+                  {it.desc}
+                </p>
+
+                {/* Bottom accent bar */}
+                <div className="mt-5 pt-5 border-t border-gray-200 dark:border-slate-700 text-xs font-bold text-primary dark:text-secondary opacity-0 group-hover:opacity-100 transition-opacity duration-300 text-center">
+                  Learn More →
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}