Merge version_2 into main #1
294
src/app/page.tsx
294
src/app/page.tsx
@@ -9,7 +9,7 @@ import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
|
||||
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
|
||||
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
||||
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
|
||||
import ProductCardOne from '@/components/sections/product/ProductCardOne';
|
||||
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
||||
import TeamCardOne from '@/components/sections/team/TeamCardOne';
|
||||
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
||||
import { Award, CheckCircle, Heart } from "lucide-react";
|
||||
@@ -32,26 +32,13 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "testimonials",
|
||||
},
|
||||
{
|
||||
name: "Book Now",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Gallery", id: "gallery" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Team", id: "team" },
|
||||
{ name: "Testimonials", id: "testimonials" },
|
||||
{ name: "Book Now", id: "contact" },
|
||||
]}
|
||||
brandName="Diamonds & Pearls"
|
||||
/>
|
||||
@@ -59,21 +46,10 @@ export default function LandingPage() {
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardScroll
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Where Luxury Meets Confidence"
|
||||
description="Expert colour, flawless extensions, and a salon experience that makes you feel truly seen."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Your Appointment",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "View Transformations",
|
||||
href: "#gallery",
|
||||
},
|
||||
]}
|
||||
buttons={[{ text: "Book Your Appointment", href: "#contact" }, { text: "View Transformations", href: "#gallery" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/view-child-hair-salon_23-2150462479.jpg"
|
||||
imageAlt="Luxury salon transformation"
|
||||
/>
|
||||
@@ -85,41 +61,9 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah J.",
|
||||
role: "Client",
|
||||
testimonial: "Matched my extensions perfectly — I was so happy.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-posing-studio-photo_1301-6999.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael C.",
|
||||
role: "Client",
|
||||
testimonial: "The staff went above and beyond — so friendly and supportive.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trendy-hairstyle_23-2149478912.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily R.",
|
||||
role: "Client",
|
||||
testimonial: "My hair looked absolutely stunning — thank you!",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstyling-smiling-young-woman-demonstrating-hairstyling-tips_259150-60121.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "David K.",
|
||||
role: "Client",
|
||||
testimonial: "After everything I’ve been through, they made me feel like me again.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-female-hairdresser-apron-with-brush-comb-stuck-her-hair-light_141793-58786.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jane D.",
|
||||
role: "Client",
|
||||
testimonial: "An incredible experience. Felt so cared for.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-girl-dark-sweater-standing-near-lamps_114579-81884.jpg",
|
||||
},
|
||||
{ id: "1", name: "Sarah J.", role: "Client", testimonial: "Matched my extensions perfectly — I was so happy.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-pretty-young-woman-posing-studio-photo_1301-6999.jpg" },
|
||||
{ id: "2", name: "Michael C.", role: "Client", testimonial: "The staff went above and beyond — so friendly and supportive.", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-wearing-trendy-hairstyle_23-2149478912.jpg" },
|
||||
{ id: "3", name: "Emily R.", role: "Client", testimonial: "My hair looked absolutely stunning — thank you!", imageSrc: "http://img.b2bpic.net/free-photo/hairstyling-smiling-young-woman-demonstrating-hairstyling-tips_259150-60121.jpg" },
|
||||
]}
|
||||
title="Client Stories"
|
||||
description="Hear how we've helped restore confidence and create stunning looks."
|
||||
@@ -131,21 +75,9 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
title="More Than Hair — It’s How You Feel When You Leave"
|
||||
metrics={[
|
||||
{
|
||||
icon: Award,
|
||||
label: "Transformation Stories",
|
||||
value: "500+",
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
label: "Personal Consultations",
|
||||
value: "100%",
|
||||
},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Client Retention",
|
||||
value: "95%",
|
||||
},
|
||||
{ icon: Award, label: "Transformation Stories", value: "500+" },
|
||||
{ icon: Heart, label: "Personal Consultations", value: "100%" },
|
||||
{ icon: CheckCircle, label: "Client Retention", value: "95%" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -157,125 +89,43 @@ export default function LandingPage() {
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "Colour & Correction",
|
||||
author: "Expert Precision",
|
||||
description: "Expert tone matching and custom colour transformations to suit your style.",
|
||||
tags: [
|
||||
"Balayage",
|
||||
"Highlights",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-calm-happy-pretty-woman-with-bright-evening-makeup-wearing-summer-yellow-dress-sea-shell-necklace_343596-3827.jpg",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "Hair Extensions",
|
||||
author: "Seamless Blending",
|
||||
description: "Premium quality extensions for volume, length, and flawless blending.",
|
||||
tags: [
|
||||
"Extensions",
|
||||
"Volume",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/view-textured-fur-fabric_23-2149600309.jpg",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "Restorative Care",
|
||||
author: "Regrowth Experts",
|
||||
description: "Confidence-building treatments focused on hair health and wellness.",
|
||||
tags: [
|
||||
"Restore",
|
||||
"Confidence",
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-doing-client-s-make-up_23-2149190635.jpg",
|
||||
},
|
||||
{ id: "s1", title: "Colour & Correction", author: "Expert Precision", description: "Expert tone matching and custom colour transformations to suit your style.", tags: ["Balayage", "Highlights"], imageSrc: "http://img.b2bpic.net/free-photo/young-caucasian-calm-happy-pretty-woman-with-bright-evening-makeup-wearing-summer-yellow-dress-sea-shell-necklace_343596-3827.jpg" },
|
||||
{ id: "s2", title: "Hair Extensions", author: "Seamless Blending", description: "Premium quality extensions for volume, length, and flawless blending.", tags: ["Extensions", "Volume"], imageSrc: "http://img.b2bpic.net/free-photo/view-textured-fur-fabric_23-2149600309.jpg" },
|
||||
]}
|
||||
title="Signature Services"
|
||||
description="Premium treatments tailored to your unique hair journey."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "Expert",
|
||||
title: "Precision Matching",
|
||||
description: "Consistency you can trust.",
|
||||
icon: CheckCircle,
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "Caring",
|
||||
title: "Supportive Team",
|
||||
description: "Welcoming and attentive.",
|
||||
icon: Heart,
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "Real",
|
||||
title: "Transformational Results",
|
||||
description: "Confidence in every service.",
|
||||
icon: Award,
|
||||
},
|
||||
]}
|
||||
title="Why Choose Us?"
|
||||
description="Our differentiators in the hair studio industry."
|
||||
/>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingCardFive
|
||||
title="Our Services & Pricing"
|
||||
description="Clear, transparent pricing for all our premium salon transformations."
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{ id: "p1", tag: "Colour", price: "$150+", period: "from", description: "Full colour, balayage, or custom correction services.", button: { text: "Book Now" }, featuresTitle: "Includes", features: ["Consultation", "Precision Tone", "Gloss Treatment"] },
|
||||
{ id: "p2", tag: "Extensions", price: "$300+", period: "from", description: "Seamless, high-quality hair extensions.", button: { text: "Book Now" }, featuresTitle: "Includes", features: ["Custom Colour Matching", "Application", "Blending Cut"] },
|
||||
{ id: "p3", tag: "Styling", price: "$80+", period: "from", description: "Signature styling for your everyday look.", button: { text: "Book Now" }, featuresTitle: "Includes", features: ["Wash & Treatment", "Styling", "Finish"] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="gallery" data-section="gallery">
|
||||
<ProductCardOne
|
||||
<ProductCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
gridVariant="four-items-2x2-equal-grid"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Transformation 1",
|
||||
price: "Styling",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7274.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Transformation 2",
|
||||
price: "Colour",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Transformation 3",
|
||||
price: "Style",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/panoramic-view-young-women-touching-their-head_23-2147890650.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Transformation 4",
|
||||
price: "Correction",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Transformation 5",
|
||||
price: "Event",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/girl-africa-woman-making-eyebrows-girls-beauty-salon_1157-48328.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Transformation 6",
|
||||
price: "Complete",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-womwn-wearing-trendy-hairstyle_23-2149478913.jpg",
|
||||
},
|
||||
{ id: "t1", brand: "Transformation", name: "Before & After 01", price: "Luxury Blonde", rating: 5, reviewCount: "100", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-blonde-female-friends-posing_273609-7274.jpg" },
|
||||
{ id: "t2", brand: "Transformation", name: "Before & After 02", price: "Colour Correction", rating: 5, reviewCount: "85", imageSrc: "http://img.b2bpic.net/free-photo/female-model-sport-bra-blowing-her-hairs-two-sides_114579-21763.jpg" },
|
||||
{ id: "t3", brand: "Transformation", name: "Before & After 03", price: "Seamless Volume", rating: 5, reviewCount: "120", imageSrc: "http://img.b2bpic.net/free-photo/panoramic-view-young-women-touching-their-head_23-2147890650.jpg" },
|
||||
{ id: "t4", brand: "Transformation", name: "Before & After 04", price: "Signature Style", rating: 5, reviewCount: "90", imageSrc: "http://img.b2bpic.net/free-photo/young-woman-looking-photo-tape-red-background-high-quality-photo_114579-60934.jpg" },
|
||||
]}
|
||||
title="Transformation Gallery"
|
||||
description="Browse our latest transformations and signature looks."
|
||||
title="Hair Transformation Gallery"
|
||||
description="Real results from our happy clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -286,24 +136,9 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Masie",
|
||||
role: "Colour Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Chloe",
|
||||
role: "Extensions Expert",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Sarah",
|
||||
role: "Styling Pro",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-playing-with-her-hair-while-talking-phone_114579-14175.jpg",
|
||||
},
|
||||
{ id: "t1", name: "Masie", role: "Colour Specialist", imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-woman-hairdresser-apron-holding-hair-comb-spray-bottle-looking-front-with-serious-face-standing-green-wall_141793-71788.jpg" },
|
||||
{ id: "t2", name: "Chloe", role: "Extensions Expert", imageSrc: "http://img.b2bpic.net/free-photo/merry-young-adult-enjoying-christmas-conversation-video-call-room-decorated-festivity-celebration-talking-woman-preparing-drink-wine-kitchen-with-joyful-ornaments_482257-28400.jpg" },
|
||||
{ id: "t3", name: "Sarah", role: "Styling Pro", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-black-suit-playing-with-her-hair-while-talking-phone_114579-14175.jpg" },
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="The dedicated team behind your new look."
|
||||
@@ -313,9 +148,7 @@ export default function LandingPage() {
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Ready to Transform?"
|
||||
title="Book Your Appointment"
|
||||
description="Love your hair again. Limited spots available this week."
|
||||
@@ -327,45 +160,8 @@ export default function LandingPage() {
|
||||
<FooterBaseReveal
|
||||
logoText="Diamonds & Pearls"
|
||||
columns={[
|
||||
{
|
||||
title: "Studio",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Team",
|
||||
href: "#team",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Connect",
|
||||
items: [
|
||||
{
|
||||
label: "Instagram",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Facebook",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Booking Policy",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Studio", items: [{ label: "Services", href: "#services" }, { label: "Team", href: "#team" }] },
|
||||
{ title: "Connect", items: [{ label: "Instagram", href: "#" }, { label: "Facebook", href: "#" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user