Merge version_4 into main #3
223
src/app/page.tsx
223
src/app/page.tsx
@@ -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 TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
||||
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,7 +20,7 @@ export default function LandingPage() {
|
||||
contentWidth="small"
|
||||
sizing="mediumLargeSizeMediumTitles"
|
||||
background="grid"
|
||||
cardStyle="solid"
|
||||
cardStyle="glass-depth"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="semibold"
|
||||
@@ -28,96 +29,28 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingInline
|
||||
navItems={[
|
||||
{
|
||||
name: "Gallery",
|
||||
id: "/gallery",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "/services",
|
||||
},
|
||||
{
|
||||
name: "Book Online",
|
||||
id: "/book",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "/contact",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "/about",
|
||||
},
|
||||
{ name: "Gallery", id: "/gallery" },
|
||||
{ name: "Services", id: "/services" },
|
||||
{ name: "Book Online", id: "/book" },
|
||||
{ name: "Contact", id: "/contact" },
|
||||
{ name: "About", id: "/about" },
|
||||
]}
|
||||
brandName="Flamingo Hair & Beauty"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "/book",
|
||||
}}
|
||||
button={{ text: "Book Now", href: "/book" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCentered
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Feel amazing, every single visit."
|
||||
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: "Book your appointment",
|
||||
href: "/book",
|
||||
},
|
||||
{
|
||||
text: "See our work",
|
||||
href: "/gallery",
|
||||
},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text",
|
||||
text: "Expert Stylists",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Premium Products",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Friendly Atmosphere",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Locally Owned",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
text: "Results Driven",
|
||||
},
|
||||
{ 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" },
|
||||
]}
|
||||
buttons={[{ text: "Book your appointment", href: "/book" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -127,82 +60,38 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: Scissors,
|
||||
title: "Hair colour & highlights",
|
||||
description: "Balayage, full colour, ombre and everything in between. From R450.",
|
||||
},
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: "Cut & blowdry",
|
||||
description: "A classic done really well. From R220.",
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: "Gel nails & nail art",
|
||||
description: "Gel, acrylic or natural nails. Custom art. From R180.",
|
||||
},
|
||||
{
|
||||
icon: Sun,
|
||||
title: "Facials & skin care",
|
||||
description: "Relaxing, results-driven facials tailored to you. From R280.",
|
||||
},
|
||||
{ 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">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
<TestimonialCardTwo
|
||||
animationType="blur-reveal"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Tania Dos Santos",
|
||||
role: "Client",
|
||||
company: "Flamingo Beauty",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-business-woman-smiling_23-2148352574.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Dorothea Claassen",
|
||||
role: "Client",
|
||||
company: "Flamingo Beauty",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-posing-with-photo-tape-red-background_114579-60942.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Fiona Brown",
|
||||
role: "Client",
|
||||
company: "Flamingo Beauty",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-outdoor_624325-770.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Sarah Miller",
|
||||
role: "Client",
|
||||
company: "Flamingo Beauty",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/happy-successful-agent-satisfied-customer-showing-thumb-up-while-sitting-table-using-tablet-together_74855-10029.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane Doe",
|
||||
role: "Client",
|
||||
company: "Flamingo Beauty",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiling-man-sitting-cafe-table-gesturing_1262-1141.jpg",
|
||||
},
|
||||
]}
|
||||
useInvertedBackground={true}
|
||||
cardClassName="border border-white/20 bg-white/10 backdrop-blur-xl"
|
||||
title="What our clients say"
|
||||
description="Real feedback from our wonderful Malvern East community."
|
||||
description="Real feedback from our wonderful community."
|
||||
testimonials={[
|
||||
{ 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" }}
|
||||
className="border-t border-accent/30 bg-black/5"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -210,41 +99,25 @@ export default function LandingPage() {
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
title="Frequently Asked Questions"
|
||||
description="Everything you need to know about your next appointment."
|
||||
title="Questions?"
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "How do I book an appointment?",
|
||||
content: "You can book directly through our online booking link or call us during business hours.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What are your operating hours?",
|
||||
content: "We are open Monday to Saturday from 09:00 to 18:00.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "Do you offer gift cards?",
|
||||
content: "Yes, digital and physical gift cards are available in-store.",
|
||||
},
|
||||
{
|
||||
id: "f4",
|
||||
title: "Can I bring a friend?",
|
||||
content: "We have a comfortable lounge area for guests to wait 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 · All rights reserved."
|
||||
columns={[
|
||||
{ title: "Links", items: [{ label: "Home", href: "/" }, { label: "Gallery", href: "/gallery" }] },
|
||||
{ title: "Support", items: [{ label: "Contact", href: "/contact" }, { label: "FAQ", href: "/faq" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #FBEAF0;
|
||||
--card: #ffffff;
|
||||
--foreground: #2b180a;
|
||||
--primary-cta: #D4537E;
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #993556;
|
||||
--secondary-cta: #141414;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #ED93B1;
|
||||
--background-accent: #f9f1f4;
|
||||
--accent: #FFD700;
|
||||
--background-accent: #C0C0C0;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user