Seed: landing-page template (12 files)

src/pages/Index.tsx

@@ -63,7 +63,7 @@ export default function LandingPage() {
     <div className="min-h-screen bg-background text-foreground antialiased">
       {/* ── HEADER ── */}
       <header
-        className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 \${
+        className={`fixed top-0 inset-x-0 z-50 transition-all duration-300 ${
           scrolled
             ? "bg-background/95 backdrop-blur-lg border-b shadow-sm"
             : "bg-transparent"
@@ -148,7 +148,7 @@ export default function LandingPage() {
             <div className="flex -space-x-3">
               {["A", "B", "C", "D"].map((letter, i) => (
                 <Avatar key={i} className="h-9 w-9 border-2 border-violet-900 ring-2 ring-violet-900">
-                  <AvatarFallback className={`text-xs font-medium text-white \${
+                  <AvatarFallback className={`text-xs font-medium text-white ${
                     ["bg-pink-500", "bg-indigo-500", "bg-emerald-500", "bg-amber-500"][i]
                   }`}>{letter}</AvatarFallback>
                 </Avatar>
@@ -202,13 +202,13 @@ export default function LandingPage() {
           ].map((feature, i) => (
             <div
               key={i}
-              className={`flex flex-col lg:flex-row gap-12 lg:gap-16 items-center mb-24 last:mb-0 \${
+              className={`flex flex-col lg:flex-row gap-12 lg:gap-16 items-center mb-24 last:mb-0 ${
                 i % 2 === 1 ? "lg:flex-row-reverse" : ""
               }`}
             >
               {/* Image placeholder */}
               <div className="flex-1 w-full animate-scale-in">
-                <div className={`aspect-video w-full rounded-2xl bg-gradient-to-br \${feature.gradient} opacity-90 shadow-2xl relative overflow-hidden`}>
+                <div className={`aspect-video w-full rounded-2xl bg-gradient-to-br ${feature.gradient} opacity-90 shadow-2xl relative overflow-hidden`}>
                   <div className="absolute inset-0" style={{ backgroundImage: "radial-gradient(circle at 25% 25%, rgba(255,255,255,0.15) 1px, transparent 1px)", backgroundSize: "20px 20px" }} />
                   <div className="absolute inset-0 flex items-center justify-center">
                     <div className="w-24 h-24 rounded-2xl bg-white/10 backdrop-blur-sm flex items-center justify-center text-white/60 text-4xl font-bold shadow-lg">{i + 1}</div>
@@ -299,7 +299,7 @@ export default function LandingPage() {
                   <button
                     key={i}
                     onClick={() => setActiveTestimonial(i)}
-                    className={`h-2.5 rounded-full transition-all duration-300 \${
+                    className={`h-2.5 rounded-full transition-all duration-300 ${
                       i === activeTestimonial ? "w-8 bg-primary" : "w-2.5 bg-muted-foreground/30 hover:bg-muted-foreground/50"
                     }`}
                   />
@@ -353,7 +353,7 @@ export default function LandingPage() {
                 cta: "Contact Sales", popular: false,
               },
             ].map((plan, i) => (
-              <Card key={i} className={`relative border animate-fade-up hover:scale-[1.02] transition-all duration-300 \${plan.popular ? "border-primary shadow-2xl shadow-primary/20 scale-105" : "border-border hover:border-primary/30 hover:shadow-lg hover:-translate-y-1"}`}>
+              <Card key={i} className={`relative border animate-fade-up hover:scale-[1.02] transition-all duration-300 ${plan.popular ? "border-primary shadow-2xl shadow-primary/20 scale-105" : "border-border hover:border-primary/30 hover:shadow-lg hover:-translate-y-1"}`}>
                 {plan.popular && (
                   <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                     <Badge className="bg-primary text-primary-foreground shadow-md">Most Popular</Badge>
@@ -380,7 +380,7 @@ export default function LandingPage() {
                       </li>
                     ))}
                   </ul>
-                  <Button className={`w-full rounded-full \${plan.popular ? "" : "variant-outline"}`} variant={plan.popular ? "default" : "outline"}>
+                  <Button className={`w-full rounded-full ${plan.popular ? "" : "variant-outline"}`} variant={plan.popular ? "default" : "outline"}>
                     {plan.cta} <ArrowRight className="ml-2 h-4 w-4" />
                   </Button>
                 </CardContent>
@@ -408,7 +408,7 @@ export default function LandingPage() {
                   { q: "Do you offer a trial period?", a: "Yes, all paid plans come with a 14-day free trial. You can explore all features before committing." },
                   { q: "How do I get support?", a: "Free plans get community support. Pro plans include priority email support with 4-hour response times. Enterprise gets dedicated account management and phone support." },
                 ].map((faq, i) => (
-                  <AccordionItem key={i} value={`faq-\${i}`}>
+                  <AccordionItem key={i} value={`faq-${i}`}>
                     <AccordionTrigger className="text-left">{faq.q}</AccordionTrigger>
                     <AccordionContent className="text-muted-foreground">{faq.a}</AccordionContent>
                   </AccordionItem>