From 698bfffa03025b96acabc0d3091c85a87b763187 Mon Sep 17 00:00:00 2001 From: Vula Builder Date: Wed, 29 Jul 2026 18:15:17 +0000 Subject: [PATCH] Deploy --- vula-index.json | 650 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 650 insertions(+) create mode 100644 vula-index.json diff --git a/vula-index.json b/vula-index.json new file mode 100644 index 0000000..8de6f32 --- /dev/null +++ b/vula-index.json @@ -0,0 +1,650 @@ +{ + "projectName": "Mzansi", + "businessType": "", + "industry": "", + "tone": "", + "tier": 3, + "generatedAt": "2026-07-29T17:21:25.959Z", + "sections": [ + { + "name": "HeroSection", + "importPath": "@/components/sections/HeroSection", + "position": 0, + "role": "hero", + "hasImage": false, + "hasForm": false, + "itemCount": 0, + "layout": "flex-row", + "headings": [], + "buttonLabels": [], + "people": [], + "allText": [ + "next/link", + "hero", + "relative min-h-[72vh] flex flex-col items-center justify-center px-6 py-24 text-center", + "#ffffff", + "#101418", + "uppercase tracking-[0.24em] text-[12px] font-bold mb-4", + "Mzansi", + "text-6xl lg:text-7xl font-black uppercase tracking-[-0.01em] leading-[0.95] mb-7 max-w-4xl", + "Authentic South African streetwear and casual fashion that fuses global trends", + "text-transparent", + "2px currentColor", + "with local.", + "text-lg lg:text-xl max-w-xl mb-10", + "#5b6470", + "Professional streetwear store in South Africa.", + "inline-block border-[3px] border-current px-7 py-3.5 text-[14px] font-bold uppercase tracking-[0.06em] hover:-translate-x-0.5 hover:-translate-y-0.5 hover:shadow-[4px_4px_0_0_#d4af37] transition-all duration-150", + "Shop now" + ] + }, + { + "name": "MzansiStorySection", + "importPath": "@/components/sections/MzansiStorySection", + "position": 1, + "role": "about", + "hasImage": true, + "hasForm": false, + "itemCount": 5, + "layout": "grid", + "headings": [], + "buttonLabels": [], + "people": [], + "allText": [ + "next/image", + "mzansistory", + "our-story", + "py-20 bg-[#101418] border-y-2 border-[#ea580c]", + "container mx-auto px-4 grid grid-cols-1 lg:grid-cols-2 gap-0", + "relative h-[400px] lg:h-auto", + "Mzansi street culture", + "object-cover grayscale contrast-150 border-2 border-[#d4af37] shadow-[8px_8px_0_0_#ea580c]", + "50vw", + "flex flex-col justify-center p-8 bg-[#ea580c] text-white", + "text-4xl font-['Archivo_Black'] uppercase leading-tight", + "Born on the streets of", + "bg-[#16a34a] text-white px-2", + "South Africa", + "mt-6 text-lg leading-relaxed", + "Mzansi isn't just a label — it's a movement. From Soweto to Sandton, we fuse global streetwear with local pride. Every stitch carries the energy of the township, the swagger of the city, and the soul of ubuntu.", + "mt-4 text-lg", + "Our drops drop hard because we know the streets that raised us.", + "text-[#d4af37]", + "Built for the bold, worn by the real.", + "mt-8 flex items-center gap-4", + "w-12 h-1 bg-[#d4af37]", + "uppercase text-sm tracking-widest", + "#MzansiFit" + ] + }, + { + "name": "FeaturedProductsSection", + "importPath": "@/components/sections/FeaturedProductsSection", + "position": 2, + "role": "services", + "hasImage": false, + "hasForm": false, + "itemCount": 11, + "layout": "grid", + "headings": [ + "Featured Products" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "@/hooks/useFeaturedProducts", + "next/link", + "lucide-react", + "@/hooks/useVulaCart", + "KSh", + "py-20", + "container mx-auto px-4", + "grid grid-cols-2 md:grid-cols-4 gap-6", + "aspect-square rounded-xl bg-muted animate-pulse", + "featuredproducts", + "flex items-center justify-between mb-10", + "text-xs uppercase tracking-widest text-primary font-semibold mb-1", + "Curated for You", + "text-3xl font-bold text-foreground", + "Featured Products", + "text-sm font-semibold text-primary hover:underline underline-offset-4", + "View all →", + "group bg-card rounded-xl overflow-hidden border border-border hover:shadow-md transition-all", + "block", + "relative aspect-square bg-muted", + "w-full h-full object-cover group-hover:scale-105 transition-transform duration-500", + "w-full h-full flex items-center justify-center", + "h-8 w-8 text-muted-foreground/30", + "p-4", + "text-sm font-semibold text-foreground line-clamp-2 mb-1 hover:text-primary transition-colors", + "text-sm font-bold text-primary mb-3", + "cart-drawer-open", + "w-full text-xs bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground py-2 rounded-lg transition-colors font-medium disabled:opacity-40", + "Add to Cart" + ] + }, + { + "name": "FreshKicksSection", + "importPath": "@/components/sections/FreshKicksSection", + "position": 3, + "role": "unknown", + "hasImage": true, + "hasForm": false, + "itemCount": -1, + "layout": "flex-row", + "headings": [ + "{d.title}" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "@/hooks/useVulaContent", + "@/components/ui/Button", + "next/image", + "next/link", + "product_carousels", + "flex justify-center py-16", + "w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin", + "fresh-kicks", + "py-20 bg-[#101418] border-y-2 border-[#d4af37]", + "container mx-auto px-4", + "text-4xl font-['Archivo_Black'] uppercase text-white mb-8", + "Drops That", + "text-[#ea580c]", + "Hit Different", + "flex gap-6 overflow-x-auto pb-4 [-webkit-overflow-scrolling:touch]", + "flex-shrink-0 w-80 border-2 border-[#ea580c] shadow-[6px_6px_0_0_#16a34a]", + "relative h-60 overflow-hidden", + "object-cover grayscale contrast-125", + "320px", + "p-4 bg-white", + "font-['Archivo_Black'] uppercase text-lg text-[#101418]", + "text-sm mt-1 text-gray-600", + "outline", + "sm", + "mt-2 border-[#ea580c] text-[#ea580c]", + "Browse" + ], + "cmsCollection": "product_carousels" + }, + { + "name": "MostPopularSection", + "importPath": "@/components/sections/MostPopularSection", + "position": 4, + "role": "unknown", + "hasImage": false, + "hasForm": false, + "itemCount": 12, + "layout": "grid", + "headings": [ + "Most Popular" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "react", + "@/hooks/useVulaCart", + "@/hooks/useProducts", + "next/link", + "lucide-react", + "KSh", + "py-20", + "container mx-auto px-4", + "grid grid-cols-2 md:grid-cols-4 gap-6", + "aspect-square rounded-xl bg-muted animate-pulse", + "mostpopular", + "flex items-center justify-between mb-10", + "flex items-center gap-3", + "h-6 w-6 text-primary", + "text-xs uppercase tracking-widest text-primary font-semibold mb-1", + "Best Sellers", + "text-3xl font-bold text-foreground", + "Most Popular", + "text-sm font-semibold text-primary hover:underline underline-offset-4 hidden md:inline-flex items-center gap-1", + "View all →", + "grid grid-cols-2 lg:grid-cols-4 gap-6", + "group bg-card rounded-xl overflow-hidden border border-border hover:shadow-md transition-all relative", + "absolute top-2 left-2 z-10 bg-primary text-primary-foreground text-xs font-semibold px-2 py-0.5 rounded-full", + "Best Seller", + "block overflow-hidden", + "relative aspect-square bg-muted", + "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300", + "w-full h-full flex items-center justify-center", + "h-8 w-8 text-muted-foreground/30", + "p-4", + "text-sm font-semibold text-foreground line-clamp-2 mb-1 hover:text-primary transition-colors", + "text-sm font-bold text-primary mb-3", + "cart-drawer-open", + "w-full text-xs bg-primary/10 text-primary hover:bg-primary hover:text-primary-foreground py-2 rounded-lg transition-colors font-medium disabled:opacity-40", + "Add to Cart" + ] + }, + { + "name": "ProductCarouselSection", + "importPath": "@/components/sections/ProductCarouselSection", + "position": 5, + "role": "services", + "hasImage": true, + "hasForm": false, + "itemCount": 4, + "layout": "flex-row", + "headings": [ + "{section.title}" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "next/image", + "next/link", + "@/lib/cms", + "KSh", + "py-8 px-4", + "max-w-7xl mx-auto", + "text-xl font-bold mb-5", + "flex gap-4 overflow-x-auto pb-3 scrollbar-hide snap-x snap-mandatory", + "flex-none snap-start w-44 group", + "relative h-44 w-44 rounded-xl overflow-hidden bg-muted mb-2 group-hover:shadow-md transition-shadow", + "object-cover group-hover:scale-105 transition-transform duration-300", + "w-full h-full flex items-center justify-center text-muted-foreground text-xs", + "No image", + "text-xs font-medium line-clamp-2 group-hover:text-primary transition-colors mb-1", + "text-xs font-bold text-primary" + ] + }, + { + "name": "BrandCarouselSection", + "importPath": "@/components/sections/BrandCarouselSection", + "position": 6, + "role": "partners", + "hasImage": false, + "hasForm": false, + "itemCount": 3, + "layout": "flex-row", + "headings": [ + "Shop by Category" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "next/link", + "py-10 px-4", + "max-w-7xl mx-auto", + "text-xl font-bold mb-5", + "Shop by Category", + "flex gap-4 overflow-x-auto pb-3 scrollbar-hide snap-x snap-mandatory", + "flex-none snap-start w-36 group", + "relative h-36 w-36 rounded-2xl overflow-hidden bg-muted mb-2 group-hover:shadow-md transition-shadow flex items-center justify-center", + "text-3xl font-bold text-primary/30 uppercase", + "text-xs font-medium text-center line-clamp-2 group-hover:text-primary transition-colors" + ] + }, + { + "name": "HypeCampaignsSection", + "importPath": "@/components/sections/HypeCampaignsSection", + "position": 7, + "role": "cms-campaigns", + "hasImage": true, + "hasForm": false, + "itemCount": -1, + "layout": "grid", + "headings": [ + "Hype Campaigns", + "{d.headline}", + "{d.title}" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "@/hooks/useVulaContent", + "next/image", + "next/link", + "@/components/ui/Button", + "@/components/ui/Badge", + "campaigns", + "bg-white py-20", + "flex justify-center", + "w-8 h-8 rounded-full border-2 border-[#ea580c] border-t-transparent animate-spin", + "hypecampaigns", + "bg-white py-16 lg:py-24 border-t-[3px] border-b-[3px] border-[#16a34a]", + "container mx-auto px-4", + "text-3xl lg:text-5xl font-bold uppercase text-[#101418] tracking-tight mb-8 text-center", + "Hype Campaigns", + "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", + "relative bg-[#101418] border-[3px] border-[#ea580c] shadow-[6px_6px_0_0_#16a34a] group hover:shadow-[3px_3px_0_0_#16a34a] transition-all duration-200", + "aspect-video overflow-hidden relative", + "Campaign", + "(max-width: 768px) 100vw, 33vw", + "object-cover grayscale contrast-125 group-hover:scale-105 transition-transform duration-500", + "p-6 border-t-[3px] border-[#ea580c]", + "text-2xl font-bold uppercase text-white tracking-tight mb-2", + "text-xl font-bold uppercase text-white", + "text-gray-300 mt-2 text-sm", + "flex items-center gap-4 mt-4", + "outline", + "sm", + "border-white text-white hover:bg-white hover:text-black transition-all duration-200" + ], + "cmsCollection": "campaigns" + }, + { + "name": "StreetStyleGallerySection", + "importPath": "@/components/sections/StreetStyleGallerySection", + "position": 8, + "role": "gallery", + "hasImage": true, + "hasForm": false, + "itemCount": -1, + "layout": "grid", + "headings": [ + "Street Style Gallery", + "{d.title}" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "@/hooks/useVulaContent", + "next/image", + "gallery", + "bg-[#101418] py-20", + "flex justify-center", + "w-8 h-8 rounded-full border-2 border-[#d4af37] border-t-transparent animate-spin", + "streetstylegallery", + "bg-[#101418] py-16 lg:py-24 border-t-[3px] border-[#d4af37]", + "container mx-auto px-4", + "text-3xl lg:text-5xl font-bold uppercase text-white tracking-tight mb-8 text-center", + "Street Style Gallery", + "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6", + "relative group bg-white border-[3px] border-[#101418] shadow-[6px_6px_0_0_#16a34a] hover:shadow-[3px_3px_0_0_#16a34a] transition-all duration-200 overflow-hidden", + "aspect-square overflow-hidden relative", + "Street style", + "(max-width: 768px) 100vw, 33vw", + "object-cover grayscale contrast-150 group-hover:scale-105 transition-transform duration-500", + "absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-end p-4", + "text-white font-bold uppercase text-lg", + "text-white/80 text-sm mt-1", + "mt-10 text-center", + "text-white/60 text-sm uppercase tracking-widest", + "Tag #MzansiStyle for a chance to be featured." + ], + "cmsCollection": "gallery" + }, + { + "name": "ShopTheVibeSection", + "importPath": "@/components/sections/ShopTheVibeSection", + "position": 9, + "role": "unknown", + "hasImage": true, + "hasForm": false, + "itemCount": 4, + "layout": "flex-row", + "headings": [], + "buttonLabels": [ + "Shop the drop" + ], + "people": [], + "allText": [ + "use client", + "next/image", + "next/link", + "@/components/ui/Button", + "shopthevibe", + "shop-cta", + "relative h-[70vh] min-h-[500px] overflow-hidden", + "Mzansi streetwear lifestyle — young crew owning the vibe", + "object-cover brightness-[0.65] grayscale contrast-125", + "100vw", + "absolute inset-0 flex items-center", + "container mx-auto px-4 sm:px-6 lg:px-8", + "max-w-2xl", + "text-4xl md:text-5xl lg:text-6xl font-black uppercase tracking-tight text-white", + "1px #ea580c", + "Own your", + "bg-[#ea580c] text-white px-2 ml-2", + "vibe", + "mt-4 text-lg md:text-xl text-white/90 max-w-md font-medium", + "Real street style from Joburg to Cape Town. Drop culture that speaks your language.", + "mt-8 flex flex-wrap gap-4", + "default", + "lg", + "bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold uppercase tracking-wider shadow-[6px_6px_0_0_#101418]", + "Shop the drop" + ] + }, + { + "name": "DealBannerSection", + "importPath": "@/components/sections/DealBannerSection", + "position": 10, + "role": "hero", + "hasImage": true, + "hasForm": false, + "itemCount": -1, + "layout": "flex-row", + "headings": [ + "{d.title}" + ], + "buttonLabels": [ + "Shop Now" + ], + "people": [], + "allText": [ + "use client", + "@/hooks/useVulaContent", + "next/image", + "next/link", + "@/components/ui/Button", + "advert_banners", + "bg-white py-20", + "flex justify-center", + "w-8 h-8 rounded-full border-2 border-[#ea580c] border-t-transparent animate-spin", + "promo-banner", + "dealbanner", + "bg-white border-t-[3px] border-b-[3px] border-[#ea580c]", + "container mx-auto px-4 py-10 lg:py-12", + "relative overflow-hidden border-[3px] border-[#101418] shadow-[8px_8px_0_0_#16a34a] bg-[#101418] lg:flex lg:items-center", + "lg:w-1/2 relative h-64 lg:h-80", + "Deal", + "(max-width: 768px) 100vw, 50vw", + "object-cover grayscale contrast-150", + "lg:w-1/2", + "w-full", + "text-3xl lg:text-5xl font-bold uppercase text-white tracking-tight mb-4", + "text-[#d4af37] text-lg lg:text-xl font-medium mb-6", + "flex flex-wrap gap-4", + "default", + "lg", + "bg-[#ea580c] text-black font-bold border-[2px] border-white shadow-[4px_4px_0_0_#d4af37] hover:shadow-[2px_2px_0_0_#d4af37] transition-all duration-200 uppercase tracking-wide", + "outline", + "border-white text-white hover:bg-white hover:text-black transition-all duration-200", + "Shop Now" + ], + "cmsCollection": "advert_banners" + }, + { + "name": "AdvertBannerSection", + "importPath": "@/components/sections/AdvertBannerSection", + "position": 11, + "role": "hero", + "hasImage": true, + "hasForm": false, + "itemCount": 4, + "layout": "flex-row", + "headings": [ + "{headline}" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "next/image", + "next/link", + "@/lib/cms", + "relative w-full overflow-hidden rounded-2xl my-8 mx-auto max-w-7xl px-4", + "relative h-64 md:h-80 w-full", + "object-cover rounded-2xl", + "absolute inset-0 bg-black/45 rounded-2xl", + "absolute inset-0 flex flex-col items-center justify-center text-center px-6 gap-3", + "text-2xl md:text-4xl font-bold text-white drop-shadow", + "text-sm md:text-base text-white/90", + "mt-2 inline-block bg-white text-black font-semibold px-6 py-2 rounded-full hover:bg-primary hover:text-white transition-colors text-sm", + "flex flex-col items-center justify-center gap-3 py-16 px-6 text-center bg-primary/10 rounded-2xl", + "text-2xl md:text-3xl font-bold", + "text-muted-foreground", + "inline-block bg-primary text-white font-semibold px-6 py-2 rounded-full hover:bg-primary/80 transition-colors text-sm" + ] + }, + { + "name": "KeepMzansiConnectedSection", + "importPath": "@/components/sections/KeepMzansiConnectedSection", + "position": 12, + "role": "unknown", + "hasImage": false, + "hasForm": true, + "itemCount": 3, + "layout": "grid", + "headings": [], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "react", + "lucide-react", + "@/components/ui/Button", + "@/components/ui/Input", + "@/components/ui/Card", + "Call us", + "+27 11 234 5678", + "Email", + "hello@mzansi.co.za", + "Visit", + "42 Bree Street, Cape Town, 8001", + "keepmzansiconnected", + "contact", + "py-20 bg-[#ffffff]", + "container mx-auto px-4", + "text-center mb-12", + "text-4xl font-black uppercase tracking-tight text-[#101418]", + "Keep", + "bg-[#d4af37] text-[#101418] px-2", + "Mzansi", + "connected", + "mt-4 text-lg text-[#101418]/70 max-w-xl mx-auto", + "Hit us up — sizing questions, collab ideas, or just to say "Awe!" We reply fast.", + "grid md:grid-cols-2 gap-8 max-w-5xl mx-auto", + "text-xl font-bold text-[#101418]", + "Send a message", + "text-[#16a34a] font-medium", + "Thanks yini! We'll get back to you sharp.", + "space-y-4", + "text", + "name", + "Your name", + "email", + "Your email", + "message", + "What's on your mind?", + "w-full border-2 border-[#e7eaef] rounded-lg px-4 py-3 text-sm focus:outline-none focus:border-[#ea580c]", + "submit", + "default", + "bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold w-full", + "w-4 h-4 mr-2", + "Send", + "space-y-6", + "pt-6 space-y-4", + "flex items-start gap-3", + "w-5 h-5 mt-0.5 text-[#ea580c]", + "text-sm text-[#101418]/60 font-medium", + "text-[#101418] font-semibold", + "_blank" + ] + }, + { + "name": "JoinTheCrewSection", + "importPath": "@/components/sections/JoinTheCrewSection", + "position": 13, + "role": "unknown", + "hasImage": false, + "hasForm": true, + "itemCount": 1, + "layout": "flex-row", + "headings": [], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "react", + "lucide-react", + "@/components/ui/Button", + "@/components/ui/Input", + "jointhecrew", + "newsletter", + "py-20 bg-[#101418] border-t-4 border-[#d4af37]", + "container mx-auto px-4 text-center", + "text-4xl font-black uppercase tracking-tight text-white", + "Join the", + "bg-[#d4af37] text-[#101418] px-2", + "crew", + "mt-4 text-lg text-white/70 max-w-lg mx-auto", + "Be the first to know about fresh drops, members-only prices, and style inspo straight from the kasi.", + "mt-8 text-[#16a34a] font-bold text-xl", + "✌️ Yebo! You're in the crew now. Check your inbox for the welcome hookup.", + "mt-8 max-w-md mx-auto flex flex-col sm:flex-row gap-3", + "email", + "your@email.co.za", + "flex-1 border-2 border-[#e7eaef] bg-white text-[#101418] placeholder:text-[#101418]/50 px-4 py-3 text-sm", + "submit", + "default", + "lg", + "bg-[#ea580c] hover:bg-[#d4500a] text-white font-bold uppercase tracking-wide shadow-[6px_6px_0_0_#d4af37] shrink-0", + "Sign up", + "w-4 h-4 ml-2", + "mt-6 text-sm text-white/40", + "No spam, just the good stuff. Unsubscribe anytime." + ] + }, + { + "name": "MzansiHeroSection", + "importPath": "@/components/sections/MzansiHeroSection", + "position": 99, + "role": "hero", + "hasImage": true, + "hasForm": false, + "itemCount": -1, + "layout": "flex-row", + "headings": [ + "{d.title}" + ], + "buttonLabels": [], + "people": [], + "allText": [ + "use client", + "next/image", + "@/hooks/useVulaContent", + "hero_banners", + "flex justify-center py-16", + "w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin", + "mzansihero", + "relative overflow-hidden bg-gray-900 text-white", + "relative min-h-[480px] flex items-center", + "object-cover opacity-40", + "relative z-10 max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-24", + "text-4xl sm:text-5xl font-bold mb-4 max-w-2xl", + "text-xl text-gray-200 mb-8 max-w-xl", + "inline-flex items-center px-8 py-3 bg-white text-gray-900 font-bold rounded-full hover:bg-gray-100 transition-colors" + ], + "cmsCollection": "hero_banners" + } + ], + "navigationLinks": [ + "Mzansi", + "Home", + "Mzansi Story", + "Hype Campaigns", + "Street Style Gallery", + "Keep Mzansi Connected", + "Products" + ] +} \ No newline at end of file