Deploy

src/components/sections/PremiumTeeShowcaseSection.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import Image from 'next/image'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/Card'
+import Button from '@/components/ui/Button'
+
+export default function PremiumTeeShowcaseSection() {
+  const tees = [
+    { name: 'Classic Black Tee', price: "R350", image: "https://images.pexels.com/photos/2294342/pexels-photo-2294342.jpeg?auto=compress&cs=tinysrgb&h=350", tag: 'Best Seller' },
+    { name: 'White Canvas Tee', price: "R320", image: "https://images.pexels.com/photos/2294342/pexels-photo-2294342.jpeg?auto=compress&cs=tinysrgb&h=350", tag: 'New Drop' },
+    { name: 'Charcoal Grey Tee', price: "R340", image: "https://images.pexels.com/photos/2294342/pexels-photo-2294342.jpeg?auto=compress&cs=tinysrgb&h=350", tag: 'Featured' },
+  ]
+
+  return (
+    <section data-vula-section="premiumteeshowcase" id="tees" className="bg-white py-24 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center mb-16">
+          <h2 className="text-4xl md:text-5xl font-black uppercase tracking-tight text-[#18181b]">
+            Premium Tee Showcase
+          </h2>
+          <p className="text-xl text-gray-600 mt-4 max-w-2xl mx-auto">
+            Three shades. One fit. Designed for the streets, built to last.
+          </p>
+          <p className="text-sm text-gray-400 mt-2">No CMS, static shots only.</p>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {tees.map((tee, idx) => (
+            <Card key={idx} className="rounded-xl border border-gray-200 overflow-hidden hover:shadow-[var(--shadow-lifted)] hover:-translate-y-1 transition-all duration-200 ease-out">
+              <div className="aspect-[4/3] overflow-hidden">
+                <Image
+                  src={tee.image}
+                  alt={`S.A.W ${tee.name}`}
+                  width={400}
+                  height={300}
+                  className="w-full h-full object-cover hover:scale-105 transition-transform duration-500 ease-out"
+                />
+              </div>
+              <CardHeader>
+                <CardTitle className="text-lg font-bold text-[#18181b]">{tee.name}</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <p className="text-lg font-semibold text-[#36454F]">{tee.price}</p>
+                <span className="inline-block mt-1 bg-[#e5e7eb] text-xs uppercase tracking-wide px-2 py-0.5 rounded">{tee.tag}</span>
+              </CardContent>
+              <CardFooter>
+                <Button variant="outline" size="sm" className="w-full border-[#18181b] text-[#18181b] hover:bg-[#18181b] hover:text-white">
+                  Cop Now
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}