vula-projects/vula-9ad325dd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deploy

Browse Source
This commit is contained in:
Vula Builder
2026-08-03 11:42:07 +00:00
parent b0c282c8c7
commit 1976552868
1 changed files with 610 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
vula-index.json
+610
View File
@@ -0,0 +1,610 @@
{
"projectName": "Zama Salon",
"businessType": "salon",
"industry": "salon",
"tone": "",
"tier": 2,
"serviceType": "services",
"generatedAt": "2026-08-03T10:12:20.137Z",
"sections": [
{
"name": "HeroSection",
"importPath": "@/components/sections/HeroSection",
"position": 0,
"role": "hero",
"hasImage": true,
"hasForm": false,
"itemCount": 7,
"layout": "flex-row",
"headings": [],
"buttonLabels": [],
"people": [
"Zama Salon"
],
"allText": [
"next/image",
"next/link",
"hero",
"relative",
"#0077BE",
"hidden md:block min-h-[82vh] relative text-white",
"absolute inset-0",
"polygon(0 0, 85% 0, 65% 100%, 0 100%)",
"Zama Salon",
"object-cover",
"100vw",
"absolute right-0 top-0 h-full w-[45%] flex flex-col justify-center px-10 lg:px-16",
"uppercase tracking-[0.12em] text-[12px] text-white/70 mb-4",
"text-4xl lg:text-5xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl",
"A full-service Johannesburg salon that combines modern colouring, keratin",
"text-[#FFD700]",
"and perm.",
"text-base lg:text-lg text-white/75 mb-8 max-w-sm",
"Professional hair salon in South Africa.",
"w-fit",
"#contact",
"inline-block bg-[#0077BE] text-white px-9 py-4 text-[15px] font-semibold rounded-full shadow-xl hover:-translate-y-0.5 transition-all duration-200",
"Book an appointment",
"flex flex-col md:hidden text-white",
"relative h-72 w-full",
"px-8 py-10",
"text-3xl font-semibold tracking-[-0.02em] leading-[1.12] mb-6 max-w-4xl",
"text-base text-white/75 mb-6"
]
},
{
"name": "SignatureServicesSection",
"importPath": "@/components/sections/SignatureServicesSection",
"position": 1,
"role": "services",
"hasImage": true,
"hasForm": false,
"itemCount": 13,
"layout": "grid",
"headings": [
"{service.title}",
"Find your exact service, see the price, book in minutes."
],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"next/image",
"next/link",
"lucide-react",
"@/components/ui/Card",
"@/components/ui/Badge",
"@/hooks/useProducts",
"KSh",
"zar",
"signatureservices",
"flex flex-col overflow-hidden rounded-xl bg-white shadow-md md:flex-row",
"relative h-44 w-full flex-shrink-0 md:min-h-full md:w-1/3",
"(max-width: 768px) 100vw, 33vw",
"object-cover",
"flex h-full w-full items-center justify-center bg-[#E8F4FD]",
"h-8 w-8 text-[#0077BE]",
"flex flex-1 flex-col justify-between gap-3 p-5",
"flex items-start justify-between gap-2",
"text-lg font-semibold text-[#1A2B3C]",
"secondary",
"whitespace-nowrap bg-[#FFD700]/20 text-[#1A2B3C]",
"On request",
"mt-2 line-clamp-2 text-sm text-[#1A2B3C]/70",
"flex items-center justify-between",
"text-xs text-[#1A2B3C]/50",
"From",
"Price on request",
"inline-flex items-center gap-1 text-sm font-semibold text-[#0077BE] transition-colors duration-200 hover:text-[#00A8CC]",
"Book this service",
"h-4 w-4",
"signature-services",
"bg-[#F0F8FF] py-20 lg:py-24",
"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8",
"mb-12 max-w-2xl",
"mb-2 text-sm font-semibold uppercase tracking-widest text-[#00A8CC]",
"Signature services",
"text-3xl font-bold text-[#1A2B3C] lg:text-4xl",
"Find your exact service, see the price, book in minutes.",
"mt-4 max-w-[44ch] text-[#1A2B3C]/70",
"Cuts, colour, keratin, perms, braids and nails — each service priced transparently, each bookable in under a minute.",
"grid grid-cols-1 gap-6 md:grid-cols-2",
"h-48 animate-pulse rounded-xl bg-white shadow-sm",
"rounded-xl bg-white p-8 text-center text-[#1A2B3C]/60 shadow-sm",
"Our full service menu is being updated. Please check back soon."
]
},
{
"name": "SalonStorySection",
"importPath": "@/components/sections/SalonStorySection",
"position": 2,
"role": "about",
"hasImage": true,
"hasForm": false,
"itemCount": 7,
"layout": "grid",
"headings": [
"From international training to a homecoming in Fourways."
],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"next/image",
"@/components/ui/Badge",
"salonstory",
"salon-story",
"bg-white py-20 lg:py-24",
"mx-auto grid max-w-7xl grid-cols-1 items-center gap-12 px-4 sm:px-6 lg:grid-cols-2 lg:px-8",
"relative mx-auto w-full max-w-lg",
"relative h-[420px] w-full overflow-hidden sm:h-[480px]",
"999px 999px 24px 24px",
"Zama Salon stylist team in Fourways",
"(max-width: 768px) 100vw, 50vw",
"object-cover",
"absolute -bottom-6 -right-4 rounded-2xl bg-[#0077BE] px-6 py-4 text-white shadow-lg",
"text-2xl font-bold text-[#FFD700]",
"8+",
"text-sm text-white/80",
"years in Fourways",
"mb-4 bg-[#00A8CC]/10 text-[#0077BE]",
"Est. 2016 · Fourways",
"text-3xl font-bold leading-tight text-[#1A2B3C] lg:text-4xl",
"From international training to a homecoming in Fourways.",
"mt-6 space-y-4 text-[#1A2B3C]/75 max-w-[52ch]",
"Founder Zama Nkosi spent eight years refining colour and keratin techniques in London and Milan before returning to Johannesburg to open a salon that treats African hair as the specialty it is.",
"Today Zama Salon blends Olaplex-backed colour work with hand-tied braiding and precision nail art — no more choosing between science and heritage.",
"mt-8 flex flex-wrap gap-3",
"African hair specialists",
"International colour",
"Nail studio",
"rounded-full bg-[#F0F8FF] px-4 py-2 text-sm font-medium text-[#1A2B3C]/80"
]
},
{
"name": "SalonDifferenceSection",
"importPath": "@/components/sections/SalonDifferenceSection",
"position": 3,
"role": "unknown",
"hasImage": false,
"hasForm": false,
"itemCount": 3,
"layout": "grid",
"headings": [
"Why natural hair and colour live happily under one roof.",
"{item.title}"
],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"lucide-react",
"@/components/ui/Card",
"Every service, one address",
"Cuts, colour, keratin, braids, perms and nails happen under one Fourways roof — no more driving across Joburg on a Saturday.",
"Chemistry meets heritage",
"Olaplex and Wella colour systems work alongside hand-tied braiding and natural-hair care, so your texture sets the rules.",
"Trained in both worlds",
"Our stylists study international chemical techniques and African hair traditions — not just one trade.",
"salondifference",
"salon-difference",
"bg-[#F0F8FF] py-20 lg:py-24",
"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8",
"mx-auto mb-14 max-w-2xl text-center",
"mb-2 text-sm font-semibold uppercase tracking-widest text-[#00A8CC]",
"What sets us apart",
"text-3xl font-bold text-[#1A2B3C] lg:text-4xl",
"Why natural hair and colour live happily under one roof.",
"mx-auto mt-4 h-1 w-16 rounded-full bg-[#FFD700]",
"grid grid-cols-1 gap-6 lg:grid-cols-3",
"flex flex-col overflow-hidden rounded-xl bg-white shadow-md md:flex-row",
"flex h-24 w-full flex-shrink-0 items-center justify-center bg-[#F0F8FF] md:h-auto md:w-1/3",
"h-8 w-8 text-[#0077BE]",
"flex-1 p-5",
"text-lg font-semibold text-[#1A2B3C]",
"mt-2 text-sm leading-relaxed text-[#1A2B3C]/70"
]
},
{
"name": "CurrentOffersSection",
"importPath": "@/components/sections/CurrentOffersSection",
"position": 4,
"role": "cms-offers",
"hasImage": true,
"hasForm": false,
"itemCount": -1,
"layout": "grid",
"headings": [
"Fresh offers for hair, braids and nails",
"{d.title}"
],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"next/image",
"next/link",
"@/components/ui/Card",
"@/hooks/useVulaContent",
"lucide-react",
"number",
"string",
"offers",
"flex justify-center py-16",
"w-8 h-8 rounded-full border-2 border-[#0077BE] border-t-transparent animate-spin",
"current-offers",
"py-20 bg-[#F0F8FF]",
"mx-auto max-w-7xl px-4",
"max-w-2xl mb-10",
"text-sm font-medium text-[#00A8CC] mb-2",
"Fourways seasonal specials",
"text-3xl font-bold text-[#1A2B3C]",
"Fresh offers for hair, braids and nails",
"mt-3 text-[#1A2B3C]/70",
"Current promotions change with the season — book soon while spaces last.",
"grid gap-6 md:grid-cols-2",
"rounded-xl overflow-hidden bg-white shadow-md flex flex-col md:flex-row",
"relative h-48 w-full md:w-1/3 md:min-h-full flex-shrink-0 overflow-hidden",
"Salon offer",
"(max-width: 768px) 100vw, 33vw",
"object-cover",
"h-full w-full bg-[#00A8CC]/20",
"flex-1 p-5",
"text-xl font-bold text-[#1A2B3C]",
"mt-2 text-sm text-[#1A2B3C]/70",
"mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-sm",
"font-semibold text-[#0077BE]",
"inline-flex items-center gap-1 text-[#1A2B3C]/60",
"w-4 h-4",
"text-[#1A2B3C]/60",
"Valid until",
"mt-4 inline-flex items-center gap-1 rounded-full bg-[#FFD700] px-5 py-2.5 text-sm font-semibold text-black transition-all duration-200 ease-out hover:bg-[#FFD700]/90",
"Book this offer"
],
"cmsCollection": "offers"
},
{
"name": "SalonGallerySection",
"importPath": "@/components/sections/SalonGallerySection",
"position": 5,
"role": "gallery",
"hasImage": true,
"hasForm": false,
"itemCount": -1,
"layout": "grid",
"headings": [
"Recent braids, colour and nail artistry",
"{d.title}"
],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"next/image",
"react",
"@/hooks/useVulaContent",
"@/components/ui/Badge",
"@/components/ui/Card",
"braid",
"Braids",
"colour",
"color",
"balayage",
"highlight",
"Colour",
"nail",
"mani",
"pedi",
"Nails",
"keratin",
"treatment",
"Treatments",
"cut",
"trim",
"Cuts",
"More",
"gallery",
"All",
"flex justify-center py-16",
"w-8 h-8 rounded-full border-2 border-[#0077BE] border-t-transparent animate-spin",
"salon-gallery",
"py-20 bg-white",
"mx-auto max-w-7xl px-4",
"max-w-2xl mb-10",
"text-sm font-medium text-[#00A8CC] mb-2",
"From the Fourways studio floor",
"text-3xl font-bold text-[#1A2B3C]",
"Recent braids, colour and nail artistry",
"mt-3 text-[#1A2B3C]/70",
"A quick look at transformations our clients took home this season.",
"flex flex-wrap gap-2 mb-8",
"bg-[#0077BE] border-[#0077BE] text-white",
"bg-white border-[#d4dadd] text-[#1A2B3C] hover:border-[#0077BE] hover:text-[#0077BE]",
"grid gap-6 md:grid-cols-2 lg:grid-cols-3",
"rounded-xl overflow-hidden bg-white shadow-md flex flex-col md:flex-row",
"relative h-48 w-full md:w-1/3 md:min-h-full flex-shrink-0 overflow-hidden",
"Salon result",
"(max-width: 768px) 100vw, 33vw",
"object-cover",
"h-full w-full bg-[#00A8CC]/20",
"flex-1 p-5",
"outline"
],
"cmsCollection": "gallery"
},
{
"name": "ClientStoriesSection",
"importPath": "@/components/sections/ClientStoriesSection",
"position": 6,
"role": "testimonials",
"hasImage": false,
"hasForm": false,
"itemCount": 3,
"layout": "grid",
"headings": [
"Cared for by hands that listen"
],
"buttonLabels": [],
"people": [],
"allText": [
"Thandi M.",
"Knotless braids + copper colour",
"My knotless braids lasted eight weeks with zero frizz. The colour was exactly the copper shade I brought in.",
"Naledi K.",
"Keratin smoothing treatment",
"My 4C hair has never been easier to manage. Wash days went from two hours to thirty minutes.",
"Aisha P.",
"Bridal updo + gel nails",
"Zama did my bridal updo and nails — every guest asked where I had them done.",
"clientstories",
"client-stories",
"py-20 bg-[#F0F8FF]",
"mx-auto max-w-7xl px-4",
"max-w-2xl mb-10",
"text-sm font-medium text-[#00A8CC] mb-2",
"Client stories from Fourways",
"text-3xl font-bold text-[#1A2B3C]",
"Cared for by hands that listen",
"grid gap-6 md:grid-cols-3",
"rounded-xl bg-white shadow-md p-6",
"text-[#FFD700] text-lg",
"★★★★★",
"mt-3 text-[#1A2B3C]/80",
"mt-4 font-semibold text-[#1A2B3C]",
"text-sm text-[#00A8CC]"
]
},
{
"name": "SalonInsightsSection",
"importPath": "@/components/sections/SalonInsightsSection",
"position": 7,
"role": "blog",
"hasImage": true,
"hasForm": false,
"itemCount": -1,
"layout": "grid",
"headings": [
"Advice for braids, colour and treated hair",
"{d.title}"
],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"next/image",
"next/link",
"@/components/ui/Badge",
"@/components/ui/Card",
"@/hooks/useVulaContent",
"lucide-react",
"posts",
"flex justify-center py-16",
"w-8 h-8 rounded-full border-2 border-[#0077BE] border-t-transparent animate-spin",
"salon-insights",
"py-20 bg-white",
"mx-auto max-w-7xl px-4",
"max-w-2xl mb-10",
"text-sm font-medium text-[#00A8CC] mb-2",
"Hair care notes from our team",
"text-3xl font-bold text-[#1A2B3C]",
"Advice for braids, colour and treated hair",
"mt-3 text-[#1A2B3C]/70",
"Practical maintenance tips, seasonal trends and honest product guidance.",
"grid gap-6 md:grid-cols-2 lg:grid-cols-3",
"rounded-xl overflow-hidden bg-white shadow-md flex flex-col md:flex-row",
"relative h-48 w-full md:w-1/3 md:min-h-full flex-shrink-0 overflow-hidden",
"Salon insight",
"(max-width: 768px) 100vw, 33vw",
"object-cover",
"h-full w-full bg-[#00A8CC]/20",
"flex-1 p-5",
"secondary",
"mt-2 font-bold text-[#1A2B3C]",
"mt-2 text-sm text-[#1A2B3C]/70",
"mt-4 flex items-center justify-between",
"text-xs text-[#1A2B3C]/50",
"By",
"inline-flex items-center gap-1 text-sm font-medium text-[#0077BE] hover:underline",
"Read more",
"w-4 h-4"
],
"cmsCollection": "posts"
},
{
"name": "BookNowSection",
"importPath": "@/components/sections/BookNowSection",
"position": 8,
"role": "booking",
"hasImage": true,
"hasForm": false,
"itemCount": 5,
"layout": "flex-row",
"headings": [
"Ready for your transformation?"
],
"buttonLabels": [],
"people": [],
"allText": [
"next/image",
"next/link",
"@/components/ui/Card",
"booknow",
"book-now",
"bg-[#F0F8FF] py-20",
"mx-auto max-w-7xl px-4",
"flex flex-col overflow-hidden rounded-xl bg-white shadow-md md:flex-row",
"relative h-72 w-full md:h-auto md:w-1/3 md:min-h-full",
"Stylist at work at Zama Salon in Fourways",
"(max-width: 768px) 100vw, 33vw",
"object-cover",
"flex flex-1 flex-col justify-center p-5 md:p-10",
"mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[#00A8CC]",
"Fourways, Johannesburg",
"font-sora text-3xl font-bold text-[#1A2B3C] md:text-4xl",
"Ready for your transformation?",
"mt-4 max-w-[44ch] text-[#1A2B3C]/70",
"Precision cuts, colour, keratin treatments, braids and nail artistry - book your chair and let our stylists handle the rest.",
"mt-8 flex flex-wrap items-center gap-4",
"inline-flex items-center justify-center rounded-full bg-[#FFD700] px-8 py-4 text-base font-semibold text-black transition-all duration-200 ease-out hover:bg-[#FFD700]/90",
"Book your appointment",
"text-sm text-[#1A2B3C]/60",
"or call",
"tel:+27825550199",
"font-semibold text-[#0077BE] hover:text-[#00A8CC]",
"+27 82 555 0199"
]
},
{
"name": "LocationContactSection",
"importPath": "@/components/sections/LocationContactSection",
"position": 9,
"role": "contact",
"hasImage": true,
"hasForm": true,
"itemCount": 16,
"layout": "grid",
"headings": [
"We're right here in Fourways - pull in and say hello.",
"Send us a message",
"Zama Salon location in Fourways, Johannesburg"
],
"buttonLabels": [
"Send message"
],
"people": [],
"allText": [
"use client",
"react",
"lucide-react",
"@/components/ui/Button",
"@/components/ui/Input",
"@/components/ui/Card",
"Shop 12, Fourways Crossing, Witkoppen Road, Fourways, Johannesburg, 2191",
"+27 82 555 0199",
"tel:+27825550199",
"bookings@zamasalon.co.za",
"locationcontact",
"location-contact",
"bg-white py-20",
"mx-auto max-w-7xl px-4",
"mb-12 max-w-2xl",
"mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[#00A8CC]",
"Visit the salon",
"font-sora text-3xl font-bold text-[#1A2B3C] md:text-4xl",
"We're right here in Fourways - pull in and say hello.",
"grid grid-cols-1 gap-8 lg:grid-cols-2",
"overflow-hidden rounded-xl shadow-md",
"h-64 w-full sm:h-72",
"Zama Salon location in Fourways, Johannesburg",
"h-full w-full border-0",
"lazy",
"no-referrer-when-downgrade",
"space-y-4 p-5",
"flex items-start gap-3",
"mt-1 flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-[#00A8CC]/10 text-[#0077BE]",
"h-5 w-5",
"text-sm font-semibold text-[#1A2B3C]/60",
"Address",
"text-[#1A2B3C]",
"Call or WhatsApp",
"text-[#1A2B3C] hover:text-[#0077BE]",
"Email",
"rounded-xl shadow-md",
"p-5 md:p-8",
"text-xl font-bold text-[#1A2B3C]",
"Send us a message",
"mt-1 text-sm text-[#1A2B3C]/60",
"Tell us what you need - we'll confirm your appointment.",
"mt-6 rounded-xl bg-[#F0F8FF] p-6 text-center",
"font-semibold text-[#0077BE]",
"Thank you! Your message has been received.",
"mt-1 text-sm text-[#1A2B3C]/70",
"We'll get back to you within one business day.",
"mt-6 space-y-4",
"name",
"Your name"
]
},
{
"name": "BusinessHoursSection",
"importPath": "@/components/sections/BusinessHoursSection",
"position": 10,
"role": "unknown",
"hasImage": false,
"hasForm": false,
"itemCount": -1,
"layout": "flex-row",
"headings": [],
"buttonLabels": [],
"people": [],
"allText": [
"use client",
"@/hooks/useVulaContent",
"@/components/ui/Badge",
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
"true",
"business_hours",
"flex justify-center py-16",
"w-8 h-8 rounded-full border-2 border-current border-t-transparent animate-spin",
"business-hours",
"bg-[#F0F8FF] py-20",
"mx-auto max-w-4xl px-4",
"mb-10 text-center",
"mb-2 text-sm font-semibold uppercase tracking-[0.2em] text-[#00A8CC]",
"Fourways, Johannesburg",
"font-sora text-3xl font-bold text-[#1A2B3C]",
"Our week at",
"text-[#00A8CC]",
"Zama Salon",
"mx-auto mt-3 max-w-[44ch] text-[#1A2B3C]/70",
"Walk-ins welcome, but booking ahead saves your chair.",
"overflow-hidden rounded-xl bg-white shadow-md",
"Closed",
"bg-[#0077BE] text-white",
"flex items-center gap-3",
"w-28 font-semibold",
"text-white/80",
"text-[#1A2B3C]/60",
"bg-[#00A8CC] text-white",
"Open now"
],
"cmsCollection": "business_hours"
}
],
"navigationLinks": [
"Zama Salon",
"Home",
"About",
"Offers",
"Gallery",
"Blog",
"Contact",
"Services"
]
}