61 lines
3.1 KiB
TypeScript
61 lines
3.1 KiB
TypeScript
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>
|
|
);
|
|
}
|