|
|
|
|
@@ -4,10 +4,11 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
|
|
|
import ReactLenis from "lenis/react";
|
|
|
|
|
import FaqDouble from '@/components/sections/faq/FaqDouble';
|
|
|
|
|
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
|
|
|
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
|
|
|
import FooterBase from '@/components/sections/footer/FooterBase';
|
|
|
|
|
import HeroCentered from '@/components/sections/hero/HeroCentered';
|
|
|
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
|
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
|
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
|
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
|
|
|
import { Palette, Scissors, Sparkles, Sun } from "lucide-react";
|
|
|
|
|
|
|
|
|
|
export default function LandingPage() {
|
|
|
|
|
@@ -19,10 +20,10 @@ export default function LandingPage() {
|
|
|
|
|
contentWidth="small"
|
|
|
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
|
|
|
background="grid"
|
|
|
|
|
cardStyle="glass-elevated"
|
|
|
|
|
primaryButtonStyle="primary-glow"
|
|
|
|
|
secondaryButtonStyle="glass"
|
|
|
|
|
headingFontWeight="bold"
|
|
|
|
|
cardStyle="glass-depth"
|
|
|
|
|
primaryButtonStyle="flat"
|
|
|
|
|
secondaryButtonStyle="solid"
|
|
|
|
|
headingFontWeight="semibold"
|
|
|
|
|
>
|
|
|
|
|
<ReactLenis root>
|
|
|
|
|
<div id="nav" data-section="nav">
|
|
|
|
|
@@ -43,18 +44,13 @@ export default function LandingPage() {
|
|
|
|
|
<HeroCentered
|
|
|
|
|
background={{ variant: "gradient-bars" }}
|
|
|
|
|
title="Feel amazing, every single visit."
|
|
|
|
|
description="Premium hair & beauty treatments right here in Malvern East, Germiston. Experience futuristic luxury and AI-driven precision."
|
|
|
|
|
description="Premium hair & beauty treatments right here in Malvern East, Germiston. We're all about making you look stunning — and feel right at home."
|
|
|
|
|
avatars={[
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/team-bride-celebrating-before-wedding_23-2149329119.jpg", alt: "Client" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/gardening-tools_23-2148013407.jpg", alt: "Client" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/young-woman-talking-phone-with-big-smile_1153-10.jpg", alt: "Client" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-attractive-young-woman-smiling_273609-12421.jpg", alt: "Client" },
|
|
|
|
|
{ src: "http://img.b2bpic.net/free-photo/portrait-smiling-young-woman-hair-stylist_23-2148113070.jpg", alt: "Happy client portrait" },
|
|
|
|
|
]}
|
|
|
|
|
buttons={[
|
|
|
|
|
{ text: "Generate Your Style", onClick: () => console.log("AI Image generation trigger") },
|
|
|
|
|
{ text: "Book Appointment", href: "/book" },
|
|
|
|
|
]}
|
|
|
|
|
buttons={[{ text: "Book your appointment", href: "/book" }]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@@ -62,53 +58,65 @@ export default function LandingPage() {
|
|
|
|
|
<FeatureHoverPattern
|
|
|
|
|
animationType="slide-up"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
features={[
|
|
|
|
|
{ icon: Scissors, title: "Hair Colour & Highlights", description: "High-precision balayage, full colour, and ombre styling.", button: { text: "Book", href: "/book" } },
|
|
|
|
|
{ icon: Sparkles, title: "Precision Cut & Blowdry", description: "Iconic styles designed for your unique features.", button: { text: "Book", href: "/book" } },
|
|
|
|
|
{ icon: Palette, title: "Luxury Nails & Art", description: "High-fashion gel and acrylic artistry.", button: { text: "Book", href: "/book" } },
|
|
|
|
|
{ icon: Sun, title: "Signature Facials", description: "Revitalizing, results-driven skin care luxury.", button: { text: "Book", href: "/book" } },
|
|
|
|
|
{ icon: Scissors, title: "Hair colour & highlights", description: "Balayage, full colour, ombre and everything in between." },
|
|
|
|
|
{ icon: Sparkles, title: "Cut & blowdry", description: "A classic done really well." },
|
|
|
|
|
{ icon: Palette, title: "Gel nails & nail art", description: "Gel, acrylic or natural nails." },
|
|
|
|
|
{ icon: Sun, title: "Facials & skin care", description: "Relaxing, results-driven facials." },
|
|
|
|
|
]}
|
|
|
|
|
title="Premium Beauty Services"
|
|
|
|
|
description="Explore our top-tier treatments, from precision haircuts to revitalizing skin care."
|
|
|
|
|
description="Explore our top-tier treatments."
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
|
|
|
<TestimonialCardSix
|
|
|
|
|
<TestimonialCardTwo
|
|
|
|
|
animationType="blur-reveal"
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
title="Client Testimonials"
|
|
|
|
|
description="Real luxury experiences from our Malvern East community."
|
|
|
|
|
cardClassName="border border-white/20 bg-white/10 backdrop-blur-xl"
|
|
|
|
|
title="What our clients say"
|
|
|
|
|
description="Real feedback from our wonderful community."
|
|
|
|
|
testimonials={[
|
|
|
|
|
{ id: "1", name: "Tania Dos Santos", handle: "@tania.style", testimonial: "The ultimate premium experience. Absolutely stunning results!" },
|
|
|
|
|
{ id: "2", name: "Dorothea Claassen", handle: "@dorothea.c", testimonial: "Futuristic service, timeless style. So happy with my look!" },
|
|
|
|
|
{ id: "3", name: "Fiona Brown", handle: "@fiona.beauty", testimonial: "Professional, chic, and always welcoming. My go-to luxury spot." },
|
|
|
|
|
{ id: "1", name: "Tania Dos Santos", role: "Client", testimonial: "Absolutely stunning results every single time!" },
|
|
|
|
|
{ id: "2", name: "Fiona Brown", role: "Client", testimonial: "The atmosphere is so relaxing and professional." },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="contact" data-section="contact">
|
|
|
|
|
<ContactSplit
|
|
|
|
|
tag="Book Now"
|
|
|
|
|
title="Ready to glow?"
|
|
|
|
|
description="Visit us in Malvern East or book your slot online for a glowing experience. We use premium products for premium results."
|
|
|
|
|
background={{ variant: "sparkles-gradient" }}
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
className="border-t border-accent/30 bg-black/5"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="faq" data-section="faq">
|
|
|
|
|
<FaqDouble
|
|
|
|
|
textboxLayout="split"
|
|
|
|
|
useInvertedBackground={true}
|
|
|
|
|
title="Frequently Asked Questions"
|
|
|
|
|
description="Everything you need to know about your luxury salon experience."
|
|
|
|
|
textboxLayout="default"
|
|
|
|
|
useInvertedBackground={false}
|
|
|
|
|
title="Questions?"
|
|
|
|
|
description="We're happy to answer anything you might be wondering about."
|
|
|
|
|
faqsAnimation="slide-up"
|
|
|
|
|
faqs={[
|
|
|
|
|
{ id: "f1", title: "How do I book an appointment?", content: "Book instantly via our online luxury booking platform." },
|
|
|
|
|
{ id: "f2", title: "Operating Hours", content: "Monday - Saturday: 09:00 - 18:00. By appointment only." },
|
|
|
|
|
{ id: "f3", title: "Gift Cards", content: "Digital and physical luxury gift cards are available in-store." },
|
|
|
|
|
{ id: "f4", title: "Guest Policy", content: "Relax in our dedicated lounge area during your treatment." },
|
|
|
|
|
{ id: "f1", title: "How do I book?", content: "Use our online link." },
|
|
|
|
|
{ id: "f2", title: "Hours?", content: "Mon-Sat, 09:00-18:00." },
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="footer" data-section="footer">
|
|
|
|
|
<FooterCard
|
|
|
|
|
<FooterBase
|
|
|
|
|
logoText="Flamingo Hair & Beauty"
|
|
|
|
|
copyrightText="© 2026 Flamingo Hair & Beauty. Futuristic Beauty Redefined."
|
|
|
|
|
columns={[
|
|
|
|
|
{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Gallery", href: "/gallery" }] },
|
|
|
|
|
{ title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "FAQ", href: "/faq" }] }
|
|
|
|
|
]}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</ReactLenis>
|
|
|
|
|
|
