Update src/app/page.tsx
This commit is contained in:
284
src/app/page.tsx
284
src/app/page.tsx
@@ -31,26 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "Team",
|
||||
id: "team",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="Hairchef"
|
||||
/>
|
||||
@@ -59,38 +43,12 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="Hairchef"
|
||||
description="Exceptional Hair Trusted by Your Neighborhood. Expert styling and care from experienced professionals. Browse our services, see what clients say, and book your appointment today."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
description="Professional styling and care in the heart of your neighborhood. Elevating your look with premium service."
|
||||
buttons={[{ text: "Book Now", href: "#contact" }]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-washed-salon_23-2150462452.jpg",
|
||||
imageAlt: "hair salon interior professional styling",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hair-equipment_23-2148352843.jpg",
|
||||
imageAlt: "barbershop interior modern decor",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-cutting-customer-hair-helped-by-scissors_23-2148256966.jpg",
|
||||
imageAlt: "professional haircut in progress",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blurred-reception_1203-754.jpg",
|
||||
imageAlt: "hair salon chairs and mirrors",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-mixing-hair-dye-bowl_23-2149167363.jpg",
|
||||
imageAlt: "hair color treatment process",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beauty-skincare-products-bathroom_53876-133303.jpg",
|
||||
imageAlt: "happy client with new haircut",
|
||||
},
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/child-getting-their-hair-washed-salon_23-2150462452.jpg", imageAlt: "Hair care" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/hairstylist-cutting-customer-hair-helped-by-scissors_23-2148256966.jpg", imageAlt: "Precision cut" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/woman-mixing-hair-dye-bowl_23-2149167363.jpg", imageAlt: "Color services" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
@@ -102,81 +60,12 @@ export default function LandingPage() {
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Precision Cutting",
|
||||
description: "Expert techniques tailored to your unique hair type and face shape.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg",
|
||||
},
|
||||
{
|
||||
title: "Custom Color",
|
||||
description: "From vibrant transformations to subtle balayage, we use premium dyes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668429.jpg",
|
||||
},
|
||||
{
|
||||
title: "Revitalizing Treatments",
|
||||
description: "Deep conditioning and therapeutic treatments for healthy, glossy hair.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167391.jpg",
|
||||
},
|
||||
{ title: "Haircut & Styling", description: "Modern and classic cuts tailored to your personality.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668429.jpg" },
|
||||
{ title: "Professional Coloring", description: "High-quality color treatments that keep hair healthy and vibrant.", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-done-beauty-salon_23-2149167391.jpg" },
|
||||
{ title: "Hair Treatments", description: "Deep nourishment for strong, glossy hair.", imageSrc: "http://img.b2bpic.net/free-photo/young-bearded-man-getting-haircut-by-hairdresser-while-sitting-chair-barbershop-barber-soul_627829-6328.jpg" }
|
||||
]}
|
||||
title="Our Professional Services"
|
||||
description="Transform your style with our specialized hair care offerings."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Salon Accomplishments"
|
||||
tag="Excellence"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "15+",
|
||||
description: "Years of experience",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "5000+",
|
||||
description: "Happy clients served",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "10",
|
||||
description: "Expert stylists onsite",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="team" data-section="team">
|
||||
<TeamCardSix
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
gridVariant="three-columns-all-equal-width"
|
||||
useInvertedBackground={false}
|
||||
members={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Sarah Miller",
|
||||
role: "Senior Stylist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/unpleased-young-beautiful-female-barber-uniform-holding-hair-clipper-with-comb-isolated-green-background_141793-119384.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "David Chen",
|
||||
role: "Master Barber",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-hairdresser-with-razor_23-2147839800.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Elena Rodriguez",
|
||||
role: "Color Specialist",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-young-beautiful-female-barber-uniform-grabbed-hair-isolated-green-wall_141793-105669.jpg",
|
||||
},
|
||||
]}
|
||||
title="Meet Our Stylists"
|
||||
description="Dedicated professionals committed to your style journey."
|
||||
title="Our Services"
|
||||
description="Expert hair care solutions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -186,123 +75,34 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "t1",
|
||||
name: "Alice Wong",
|
||||
handle: "@awong",
|
||||
testimonial: "Best haircut I've had in years! Truly professional.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-home-getting-ready-haircut_23-2148817221.jpg",
|
||||
},
|
||||
{
|
||||
id: "t2",
|
||||
name: "Mark Stevens",
|
||||
handle: "@mstevens",
|
||||
testimonial: "Quick, efficient, and great conversation. Highly recommend.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg",
|
||||
},
|
||||
{
|
||||
id: "t3",
|
||||
name: "Julia Roberts",
|
||||
handle: "@jroberts",
|
||||
testimonial: "The color treatment was exactly what I wanted. So healthy!",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-women-getting-married_23-2150753670.jpg",
|
||||
},
|
||||
{
|
||||
id: "t4",
|
||||
name: "Peter King",
|
||||
handle: "@pking",
|
||||
testimonial: "Consistently great quality work. My regular spot.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/waitress-taking-order_23-2147984991.jpg",
|
||||
},
|
||||
{
|
||||
id: "t5",
|
||||
name: "Maria Garcia",
|
||||
handle: "@mgarcia",
|
||||
testimonial: "Fantastic environment and welcoming staff. Five stars.",
|
||||
rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-woman-smiling-looking-mirror-beauty-salon_176420-4487.jpg",
|
||||
},
|
||||
{ id: "r1", name: "Jane D.", handle: "@janed", testimonial: "The best haircut experience ever!", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-woman-smiling-looking-mirror-beauty-salon_176420-4487.jpg" },
|
||||
{ id: "r2", name: "Mike R.", handle: "@miker", testimonial: "Quick, professional, and friendly. Love this place.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-barber-shop-concept_23-2148506342.jpg" }
|
||||
]}
|
||||
showRating={true}
|
||||
title="Client Feedback"
|
||||
description="Read what our neighborhood says about us."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqSplitText
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "f1",
|
||||
title: "Do you accept walk-ins?",
|
||||
content: "Yes, walk-ins are welcome, though appointments are recommended for guaranteed spots.",
|
||||
},
|
||||
{
|
||||
id: "f2",
|
||||
title: "What products do you use?",
|
||||
content: "We use premium, eco-friendly hair care products focused on long-term hair health.",
|
||||
},
|
||||
{
|
||||
id: "f3",
|
||||
title: "How do I book?",
|
||||
content: "You can book directly through our online booking link or call our salon office.",
|
||||
},
|
||||
]}
|
||||
sideTitle="Frequently Asked Questions"
|
||||
sideDescription="Everything you need to know about our salon."
|
||||
faqsAnimation="slide-up"
|
||||
title="Customer Reviews"
|
||||
description="Hear from our happy clients."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="social-proof" data-section="social-proof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
names={["L'Oreal", "Wella", "Schwarzkopf", "GHD", "Dyson"]}
|
||||
title="Premium Products"
|
||||
description="We partner with top-tier brands."
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"Salon Association",
|
||||
"Top Hair Product Co",
|
||||
"Style Magazine Feature",
|
||||
"Community Partners",
|
||||
"Cosmetology School",
|
||||
"Beauty Blogger Network",
|
||||
"Salon Supply Experts",
|
||||
]}
|
||||
title="Trusted & Recognized"
|
||||
description="Proudly partnering with industry leaders to provide the best service."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplitForm
|
||||
useInvertedBackground={false}
|
||||
title="Book Your Appointment"
|
||||
description="Ready for your next style? Fill out the form and we'll be in touch."
|
||||
description="Send us your details and we'll reach out to schedule your session."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Full Name", required: true },
|
||||
{ name: "phone", type: "tel", placeholder: "Phone Number", required: true }
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your hair needs...",
|
||||
rows: 4,
|
||||
}}
|
||||
textarea={{ name: "message", placeholder: "Desired service/Time preference" }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/front-desk-hotel-reception-lobby_482257-76228.jpg"
|
||||
buttonText="Book Now"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -311,40 +111,12 @@ export default function LandingPage() {
|
||||
imageSrc="http://img.b2bpic.net/free-photo/person-holding-scissors-close-microphone-asmr_23-2149378111.jpg"
|
||||
logoText="Hairchef"
|
||||
columns={[
|
||||
{
|
||||
title: "Quick Links",
|
||||
items: [
|
||||
{
|
||||
label: "Services",
|
||||
href: "#services",
|
||||
},
|
||||
{
|
||||
label: "Reviews",
|
||||
href: "#reviews",
|
||||
},
|
||||
{
|
||||
label: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal",
|
||||
items: [
|
||||
{
|
||||
label: "Privacy Policy",
|
||||
href: "#",
|
||||
},
|
||||
{
|
||||
label: "Terms of Service",
|
||||
href: "#",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ title: "Visit Us", items: [{ label: "123 Main St, City", href: "#" }] },
|
||||
{ title: "Links", items: [{ label: "Contact", href: "#contact" }, { label: "Reviews", href: "#reviews" }] }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user