Upload src/components/FeaturedVendors.tsx

src/components/FeaturedVendors.tsx

@@ -0,0 +1,43 @@
+const vendors = [
+  { id: '1', name: 'The Grand Atrium', category: 'Venue', district: 'Colombo 7', price: '₨ 350K', rating: 4.9, reviews: 127, image: '🏛️', tag: 'Premium' },
+  { id: '2', name: 'Lens & Light Studio', category: 'Photography', district: 'Colombo 3', price: '₨ 150K', rating: 4.8, reviews: 94, image: '📸', tag: 'Top Rated' },
+  { id: '3', name: 'Bloom & Petal', category: 'Florist', district: 'Colombo 5', price: '₨ 80K', rating: 4.9, reviews: 68, image: '💐', tag: 'Popular' },
+  { id: '4', name: 'Silver Spoon Catering', category: 'Catering', district: 'Colombo 4', price: '₨ 250K', rating: 4.7, reviews: 112, image: '🍽️', tag: 'Best Value' },
+]
+
+export default function FeaturedVendors() {
+  return (
+    <section className="py-20 bg-ivory-50">
+      <div className="wedding-section">
+        <div className="text-center mb-12">
+          <p className="text-gold-400 font-heading text-sm tracking-[0.2em] uppercase mb-3">Curated for you</p>
+          <h2 className="font-heading text-3xl md:text-4xl font-semibold text-charcoal-700">Featured vendors</h2>
+          <div className="wedding-divider mt-6" />
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+          {vendors.map((v) => (
+            <a key={v.id} href={"/vendor/" + v.id} className="wedding-card-hover overflow-hidden group">
+              <div className="h-48 bg-gradient-to-br from-ivory-200 to-rose-100 flex items-center justify-center text-6xl">{v.image}</div>
+              <div className="p-5">
+                <div className="flex items-center justify-between mb-2">
+                  <span className="wedding-badge bg-gold-50 text-gold-500">{v.tag}</span>
+                  <span className="wedding-badge bg-ivory-100 text-charcoal-400">{v.category}</span>
+                </div>
+                <h3 className="font-heading text-lg font-semibold text-charcoal-700 mb-1">{v.name}</h3>
+                <p className="text-sm text-charcoal-400 mb-3">{v.district}</p>
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-1">
+                    <span className="text-gold-400">★</span>
+                    <span className="text-sm font-medium text-charcoal-600">{v.rating}</span>
+                    <span className="text-xs text-charcoal-300">({v.reviews})</span>
+                  </div>
+                  <span className="text-sm font-semibold text-charcoal-700">{v.price}</span>
+                </div>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}