Update src/app/page.tsx
This commit is contained in:
369
src/app/page.tsx
369
src/app/page.tsx
@@ -28,255 +28,142 @@ export default function LandingPage() {
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "About",
|
||||
id: "#about",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "#team",
|
||||
},
|
||||
{
|
||||
name: "Testimonials",
|
||||
id: "#testimonials",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="Liza's Locks Studio"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "About", id: "#about" },
|
||||
{ name: "Team", id: "#team" },
|
||||
{ name: "Testimonials", id: "#testimonials" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="Liza's Locks Studio"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{
|
||||
variant: "gradient-bars",
|
||||
}}
|
||||
title="Welcome to Liza's Locks Studio"
|
||||
description="Home of 'The Low Maintenance Method'. A texture-inclusive haircuttery dedicated to gorgeous, effortless style."
|
||||
tag="Toronto Based Hair Experts"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-2gz0i1q7.jpg?_wi=1",
|
||||
imageAlt: "Salon Interior 1",
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-1u2m4b3r.jpg?_wi=1",
|
||||
imageAlt: "Salon Interior 2",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/attractive-brunette-woman-smiling-looking-camera_197531-33823.jpg",
|
||||
imageAlt: "Professional hairstylist at work",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-portrait-magnificent-young-sensual-model-with-long-brown-hairs-shy-cute-smile-natural-pure-beauty-soft-make-up_291049-1735.jpg",
|
||||
imageAlt: "Natural hair texture portrait",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-portrait-looking-eyes-person_1301-839.jpg",
|
||||
imageAlt: "Beautiful healthy hair",
|
||||
},
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Based on 5-star customer reviews"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitDualMedia
|
||||
background={{ variant: "gradient-bars" }}
|
||||
title="Welcome to Liza's Locks Studio"
|
||||
description="Home of 'The Low Maintenance Method'. A texture-inclusive haircuttery dedicated to gorgeous, effortless style."
|
||||
tag="Toronto Based Hair Experts"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-2gz0i1q7.jpg", imageAlt: "Salon Interior 1"
|
||||
},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-1u2m4b3r.jpg", imageAlt: "Salon Interior 2"
|
||||
}
|
||||
]}
|
||||
mediaAnimation="blur-reveal"
|
||||
rating={5}
|
||||
ratingText="Based on 5-star customer reviews"
|
||||
tagIcon={Sparkles}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Our Philosophy"
|
||||
description="At Liza's Locks, we believe your hair should be effortless and beautiful. We specialize in texture-inclusive cuts that work with your hair's natural growth pattern and curl."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Texture Inclusive",
|
||||
description: "Expertise in all hair types and curl patterns.",
|
||||
},
|
||||
{
|
||||
title: "Low Maintenance Method",
|
||||
description: "Styling solutions designed for your busy life.",
|
||||
},
|
||||
{
|
||||
title: "Inclusive Environment",
|
||||
description: "A welcoming, safe space for every client.",
|
||||
},
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-ym7a6xpf.jpg"
|
||||
imageAlt="Liza's Locks Studio Interior"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
title="Our Philosophy"
|
||||
description="At Liza's Locks, we believe your hair should be effortless and beautiful. We specialize in texture-inclusive cuts that work with your hair's natural growth pattern and curl."
|
||||
bulletPoints={[
|
||||
{ title: "Texture Inclusive", description: "Expertise in all hair types and curl patterns." },
|
||||
{ title: "Low Maintenance Method", description: "Styling solutions designed for your busy life." },
|
||||
{ title: "Inclusive Environment", description: "A welcoming, safe space for every client." },
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-ym7a6xpf.jpg"
|
||||
imageAlt="Liza's Locks Studio Interior"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: MapPin,
|
||||
title: "Location",
|
||||
description: "430 St Clarens Ave, Toronto, ON M6H 3W3, Canada",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-pretty-woman-studio-fashion-portrait_1301-4486.jpg",
|
||||
imageAlt: "Young pretty woman. Studio fashion portrait.",
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Clock,
|
||||
title: "Hours",
|
||||
description: "Tue-Fri: 10AM-5PM, Sat: 10AM-5PM, Sun-Mon: Closed",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-2gz0i1q7.jpg?_wi=2",
|
||||
imageAlt: "Young pretty woman. Studio fashion portrait.",
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Scissors,
|
||||
title: "Specialty",
|
||||
description: "Curly hair styling and professional maintenance.",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-1u2m4b3r.jpg?_wi=2",
|
||||
imageAlt: "Young pretty woman. Studio fashion portrait.",
|
||||
},
|
||||
]}
|
||||
title="Visit Us"
|
||||
description="Find us near Jfferin Mall, Toronto."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureBento
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
bentoComponent: "reveal-icon", icon: MapPin,
|
||||
title: "Location", description: "430 St Clarens Ave, Toronto, ON M6H 3W3, Canada"
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon", icon: Clock,
|
||||
title: "Hours", description: "Tue-Fri: 10AM-5PM, Sat: 10AM-5PM, Sun-Mon: Closed"
|
||||
},
|
||||
{
|
||||
bentoComponent: "reveal-icon", icon: Scissors,
|
||||
title: "Specialty", description: "Curly hair styling and professional maintenance."
|
||||
},
|
||||
]}
|
||||
title="Visit Us"
|
||||
description="Find us near Jfferin Mall, Toronto."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "liza",
|
||||
name: "Liza",
|
||||
role: "Lead Stylist & Founder",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-pkss7xmr.jpg",
|
||||
},
|
||||
{
|
||||
id: "ally",
|
||||
name: "Ally",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-x4jupudw.jpg",
|
||||
},
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="Our experts are here to give you the haircut of your life."
|
||||
/>
|
||||
</div>
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{ id: "liza", name: "Liza", role: "Lead Stylist & Founder", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-pkss7xmr.jpg" },
|
||||
{ id: "ally", name: "Ally", role: "Senior Stylist", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DUVuO5IjGdsFpOuUuVXIjKnZgJ/uploaded-1778336931749-x4jupudw.jpg" },
|
||||
]}
|
||||
title="Meet Your Stylists"
|
||||
description="Our experts are here to give you the haircut of your life."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Bec Whitby",
|
||||
role: "Client",
|
||||
company: "Local Guide",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiliing-woman-with-curly-hair-looking-camera_633478-703.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Katelyn Duval",
|
||||
role: "Client",
|
||||
company: "Curly Hair",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Sarah J.",
|
||||
role: "Client",
|
||||
company: "Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4455.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Emily D.",
|
||||
role: "Client",
|
||||
company: "New Client",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230931.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica R.",
|
||||
role: "Client",
|
||||
company: "Regular",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317377.jpg",
|
||||
},
|
||||
]}
|
||||
title="Client Love"
|
||||
description="Here is what our beautiful clients are saying about their experience."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Bec Whitby", role: "Client", company: "Local Guide", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/pretty-smiliing-woman-with-curly-hair-looking-camera_633478-703.jpg" },
|
||||
{ id: "2", name: "Katelyn Duval", role: "Client", company: "Curly Hair", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-curlyhaired-beautiful-girl-high-quality-photo_114579-92162.jpg" },
|
||||
{ id: "3", name: "Sarah J.", role: "Client", company: "Regular", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/professional-girl-hairdresser-makes-client-haircut-girl-is-sitting-mask-beauty-salon_343596-4455.jpg" },
|
||||
{ id: "4", name: "Emily D.", role: "Client", company: "New Client", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-treatment-hairdresser-shop_23-2149230931.jpg" },
|
||||
{ id: "5", name: "Jessica R.", role: "Client", company: "Regular", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-young-woman-with-curly-hair_23-2151317377.jpg" },
|
||||
]}
|
||||
title="Client Love"
|
||||
description="Here is what our beautiful clients are saying about their experience."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq-1",
|
||||
title: "Where are you located?",
|
||||
content: "We are at 430 St Clarens Ave, Toronto, near Jfferin Mall.",
|
||||
},
|
||||
{
|
||||
id: "faq-2",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "We recommend booking an appointment ahead of time.",
|
||||
},
|
||||
{
|
||||
id: "faq-3",
|
||||
title: "Do you specialize in curly hair?",
|
||||
content: "Yes, curly hair is our primary specialty.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "faq-1", title: "Where are you located?", content: "We are at 430 St Clarens Ave, Toronto, near Jfferin Mall." },
|
||||
{ id: "faq-2", title: "Do you accept walk-ins?", content: "We recommend booking an appointment ahead of time." },
|
||||
{ id: "faq-3", title: "Do you specialize in curly hair?", content: "Yes, curly hair is our primary specialty." },
|
||||
]}
|
||||
sideTitle="Common Questions"
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "radial-gradient",
|
||||
}}
|
||||
tag="Get in touch"
|
||||
title="Ready for your best haircut?"
|
||||
description="Contact us to book an appointment."
|
||||
buttons={[
|
||||
{
|
||||
text: "Call Us",
|
||||
href: "tel:+1",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "radial-gradient" }}
|
||||
tag="Get in touch"
|
||||
title="Ready for your best haircut?"
|
||||
description="Contact us to book an appointment."
|
||||
buttons={[{ text: "Call Us", href: "tel:+1" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Liza's Locks Studio"
|
||||
copyrightText="© 2025 Liza's Locks Studio."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="Liza's Locks Studio"
|
||||
copyrightText="© 2025 Liza's Locks Studio."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user