diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 9666972..326d685 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -85,8 +85,8 @@ export default function IndexPage() {
           </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
             {featuredCourses.map((c, i) => (
-              <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.08}s` }}>
-                <div className={`h-40 bg-gradient-to-br \${c.gradient} flex items-center justify-center`}>
+              <Card key={i} className="group bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl overflow-hidden hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `${i * 0.08}s` }}>
+                <div className={`h-40 bg-gradient-to-br ${c.gradient} flex items-center justify-center`}>
                   <BookOpen className="h-12 w-12 text-white/80" />
                 </div>
                 <CardContent className="p-5">
@@ -133,7 +133,7 @@ export default function IndexPage() {
           </div>
           <div className="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
             {steps.map((s, i) => (
-              <div key={i} className="text-center animate-fade-up" style={{ animationDelay: `\${i * 0.15}s` }}>
+              <div key={i} className="text-center animate-fade-up" style={{ animationDelay: `${i * 0.15}s` }}>
                 <div className="mx-auto w-16 h-16 rounded-2xl bg-indigo-100 dark:bg-indigo-900/40 flex items-center justify-center mb-4">
                   <s.icon className="h-7 w-7 text-indigo-600 dark:text-indigo-400" />
                 </div>
@@ -155,8 +155,8 @@ export default function IndexPage() {
           </div>
           <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
             {instructors.map((inst, i) => (
-              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl text-center p-6 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
-                <div className={`mx-auto w-20 h-20 rounded-full bg-gradient-to-br \${inst.gradient} flex items-center justify-center mb-4`}>
+              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl text-center p-6 hover:-translate-y-1 hover:shadow-xl transition-all duration-300 animate-fade-up" style={{ animationDelay: `${i * 0.1}s` }}>
+                <div className={`mx-auto w-20 h-20 rounded-full bg-gradient-to-br ${inst.gradient} flex items-center justify-center mb-4`}>
                   <span className="text-2xl font-bold text-white">{inst.name.split(" ").map(n => n[0]).join("")}</span>
                 </div>
                 <h3 className="font-semibold text-lg">{inst.name}</h3>
@@ -179,7 +179,7 @@ export default function IndexPage() {
           </div>
           <div className="grid md:grid-cols-3 gap-6">
             {testimonials.map((t, i) => (
-              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `\${i * 0.1}s` }}>
+              <Card key={i} className="bg-white/70 dark:bg-slate-900/70 backdrop-blur border-slate-200/60 dark:border-slate-800/60 rounded-2xl p-6 animate-fade-up" style={{ animationDelay: `${i * 0.1}s` }}>
                 <Quote className="h-8 w-8 text-indigo-200 dark:text-indigo-800 mb-3" />
                 <p className="text-muted-foreground mb-4 leading-relaxed">{t.text}</p>
                 <div className="flex items-center gap-1 mb-2">