diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 46e5601..6332e3a 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -85,13 +85,13 @@ export default function IndexPage() {
           <div className="relative">
             <div className="absolute left-1/2 -translate-x-px top-0 bottom-0 w-px bg-rose-200 dark:bg-stone-700 hidden md:block" />
             {storyTimeline.map((item, i) => (
-              <div key={i} className={`relative flex flex-col md:flex-row items-center gap-6 mb-16 last:mb-0 animate-fade-up \${i % 2 === 1 ? "md:flex-row-reverse" : ""}`} style={{ animationDelay: `\${i * 150}ms` }}>
-                <div className={`flex-1 backdrop-blur-sm bg-card/80 border border-border/50 rounded-xl p-5 \${i % 2 === 1 ? "md:text-left" : "md:text-right"}`}>
+              <div key={i} className={`relative flex flex-col md:flex-row items-center gap-6 mb-16 last:mb-0 animate-fade-up ${i % 2 === 1 ? "md:flex-row-reverse" : ""}`} style={{ animationDelay: `${i * 150}ms` }}>
+                <div className={`flex-1 backdrop-blur-sm bg-card/80 border border-border/50 rounded-xl p-5 ${i % 2 === 1 ? "md:text-left" : "md:text-right"}`}>
                   <span className="text-sm text-rose-400 font-medium">{item.year}</span>
                   <h3 className="font-serif text-xl text-stone-800 dark:text-white mt-1 mb-2">{item.title}</h3>
                   <p className="text-stone-600 dark:text-stone-400 text-sm leading-relaxed">{item.desc}</p>
                 </div>
-                <div className={`w-12 h-12 rounded-full bg-gradient-to-br \${item.gradient} flex items-center justify-center shadow-lg z-10 shrink-0`}>
+                <div className={`w-12 h-12 rounded-full bg-gradient-to-br ${item.gradient} flex items-center justify-center shadow-lg z-10 shrink-0`}>
                   <Heart className="h-5 w-5 text-white fill-white" />
                 </div>
                 <div className="flex-1 hidden md:block" />
@@ -113,7 +113,7 @@ export default function IndexPage() {
                 {bridesmaids.map((p, i) => (
                   <Card key={i} className="border-border/50 backdrop-blur-sm bg-card/80 text-center overflow-hidden hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
                     <CardContent className="pt-6 pb-4">
-                      <div className={`w-16 h-16 rounded-full bg-gradient-to-br \${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
+                      <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
                       <div className="font-medium text-stone-800 dark:text-white text-sm">{p.name}</div>
                       <div className="text-xs text-rose-400 mt-1">{p.role}</div>
                     </CardContent>
@@ -127,7 +127,7 @@ export default function IndexPage() {
                 {groomsmen.map((p, i) => (
                   <Card key={i} className="border-border/50 backdrop-blur-sm bg-card/80 text-center overflow-hidden hover:-translate-y-1 hover:shadow-lg transition-all duration-300">
                     <CardContent className="pt-6 pb-4">
-                      <div className={`w-16 h-16 rounded-full bg-gradient-to-br \${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
+                      <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${p.gradient} flex items-center justify-center mx-auto mb-3 text-white font-serif text-lg`}>{p.initials}</div>
                       <div className="font-medium text-stone-800 dark:text-white text-sm">{p.name}</div>
                       <div className="text-xs text-stone-400 mt-1">{p.role}</div>
                     </CardContent>
@@ -153,7 +153,7 @@ export default function IndexPage() {
               { h: "h-64", gradient: "from-pink-300 to-amber-200" },
               { h: "h-80", gradient: "from-rose-300 to-amber-100" },
             ].map((item, i) => (
-              <div key={i} className={`\${item.h} rounded-xl bg-gradient-to-br \${item.gradient} overflow-hidden group cursor-pointer relative hover:-translate-y-1 hover:shadow-lg transition-all duration-300`}>
+              <div key={i} className={`${item.h} rounded-xl bg-gradient-to-br ${item.gradient} overflow-hidden group cursor-pointer relative hover:-translate-y-1 hover:shadow-lg transition-all duration-300`}>
                 <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
                   <Camera className="h-8 w-8 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                 </div>