Seed: ecommerce template (24 files)

src/pages/Index.tsx

@@ -49,7 +49,7 @@ export default function IndexPage() {
 
   const renderStars = (count: number) =>
     Array.from({ length: 5 }, (_, i) => (
-      <Star key={i} className={`h-3.5 w-3.5 \${i < count ? "fill-amber-400 text-amber-400" : "text-stone-300"}`} />
+      <Star key={i} className={`h-3.5 w-3.5 ${i < count ? "fill-amber-400 text-amber-400" : "text-stone-300"}`} />
     ));
 
   return (
@@ -102,7 +102,7 @@ export default function IndexPage() {
               </div>
               <CardContent className="p-4">
                 <h3 className="font-semibold text-stone-900">{featuredProducts[0].name}</h3>
-                <p className="text-lg font-bold mt-1 text-stone-900">\${featuredProducts[0].price}</p>
+                <p className="text-lg font-bold mt-1 text-stone-900">${featuredProducts[0].price}</p>
               </CardContent>
             </Card>
           </div>
@@ -125,7 +125,7 @@ export default function IndexPage() {
             {featuredProducts.map((product, i) => (
               <Link to="/product" key={product.id} className="group">
                 <Card className="overflow-hidden border-0 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
-                  <div className={`relative aspect-[3/4] bg-gradient-to-br \${product.gradient} animate-scale-in overflow-hidden`}>
+                  <div className={`relative aspect-[3/4] bg-gradient-to-br ${product.gradient} animate-scale-in overflow-hidden`}>
                     <div className="absolute inset-0 transition-transform duration-300 group-hover:scale-110 group-hover:brightness-110" style={{ backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px)", backgroundSize: "16px 16px" }} />
                     <div className="absolute top-1/4 -left-8 h-24 w-24 rounded-full bg-white/30 blur-2xl" />
                     <div className="absolute bottom-1/4 -right-8 h-20 w-20 rounded-full bg-white/20 blur-2xl" />
@@ -145,9 +145,9 @@ export default function IndexPage() {
                     <div className="flex gap-1 mt-1 opacity-0 group-hover:opacity-100 transition-opacity"><span className="w-3 h-3 rounded-full bg-stone-900" /><span className="w-3 h-3 rounded-full bg-rose-400" /><span className="w-3 h-3 rounded-full bg-amber-200" /></div>
                     <div className="flex items-center gap-1 mt-1">{renderStars(product.rating)}</div>
                     <div className="mt-2 flex items-center gap-2">
-                      <span className="font-semibold text-stone-900">\${product.price}</span>
+                      <span className="font-semibold text-stone-900">${product.price}</span>
                       {product.originalPrice && (
-                        <span className="text-sm text-stone-400 line-through">\${product.originalPrice}</span>
+                        <span className="text-sm text-stone-400 line-through">${product.originalPrice}</span>
                       )}
                     </div>
                     <div className="flex items-center gap-1 mt-1"><div className="flex">{[...Array(5)].map((_, j) => <Star key={j} className="h-3 w-3 fill-amber-400 text-amber-400" />)}</div><span className="text-xs text-muted-foreground">(128)</span></div>
@@ -172,7 +172,7 @@ export default function IndexPage() {
           <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 stagger">
             {categories.map((cat) => (
               <Link to="/products" key={cat.name} className="group relative overflow-hidden rounded-2xl aspect-[4/5] hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
-                <div className={`absolute inset-0 bg-gradient-to-br \${cat.gradient}`} />
+                <div className={`absolute inset-0 bg-gradient-to-br ${cat.gradient}`} />
                 <div className="absolute inset-0 bg-black/20 group-hover:bg-black/40 transition-colors" />
                 <div className="relative h-full flex flex-col justify-end p-6 text-white">
                   <h3 className="text-xl font-bold">{cat.name}</h3>
@@ -302,7 +302,7 @@ export default function IndexPage() {
             {["from-rose-100 to-rose-200", "from-stone-100 to-stone-200", "from-amber-100 to-amber-200",
               "from-rose-200 to-stone-100", "from-stone-200 to-amber-100", "from-amber-200 to-rose-100"
             ].map((grad, i) => (
-              <div key={i} className={`aspect-square rounded-lg bg-gradient-to-br \${grad} group cursor-pointer relative overflow-hidden`}>
+              <div key={i} className={`aspect-square rounded-lg bg-gradient-to-br ${grad} group cursor-pointer relative overflow-hidden`}>
                 <div className="absolute inset-0 bg-black/0 group-hover:bg-black/30 transition-colors flex items-center justify-center">
                   <Heart className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
                 </div>