Merge version_1 into main #1
304
src/app/page.tsx
304
src/app/page.tsx
@@ -8,8 +8,8 @@ import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
|
||||
import FooterCard from '@/components/sections/footer/FooterCard';
|
||||
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
import { Award, Instagram, Star, Users } from "lucide-react";
|
||||
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -17,215 +17,115 @@ export default function LandingPage() {
|
||||
defaultButtonVariant="expand-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "services",
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Reviews",
|
||||
id: "reviews",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "contact",
|
||||
},
|
||||
]}
|
||||
brandName="The Rustic Hue"
|
||||
button={{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Services", id: "services" },
|
||||
{ name: "About", id: "about" },
|
||||
{ name: "Reviews", id: "reviews" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="The Rustic Hue"
|
||||
button={{ text: "Book Now", href: "#contact" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="The Rustic Hue"
|
||||
description="Where Texas charm meets expert hair artistry. Experience a boutique salon atmosphere designed to make you look and feel your absolute best."
|
||||
buttons={[
|
||||
{
|
||||
text: "Book Now",
|
||||
href: "#contact",
|
||||
},
|
||||
]}
|
||||
slides={[
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_344912-2975.jpg",
|
||||
imageAlt: "The Rustic Hue Salon Interior",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-his-hair-washed_23-2149220571.jpg",
|
||||
imageAlt: "Medium shot man getting his hair washed",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/mid-century-modern-decorated-loft-style-apartment_53876-144963.jpg",
|
||||
imageAlt: "Mid century modern decorated loft style apartment",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-low-view-man-getting-haircut_23-2148224308.jpg",
|
||||
imageAlt: "Close up low view man getting a haircut",
|
||||
},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668433.jpg",
|
||||
imageAlt: "High angle woman at hair salon",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroCarouselLogo
|
||||
logoText="The Rustic Hue"
|
||||
description="Where Texas charm meets expert hair artistry. Experience a boutique salon atmosphere designed to make you look and feel your absolute best."
|
||||
buttons={[{ text: "Book Now", href: "#contact" }]}
|
||||
slides={[
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/expressive-young-woman-posing_344912-2975.jpg", imageAlt: "The Rustic Hue Salon Interior" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-getting-his-hair-washed_23-2149220571.jpg", imageAlt: "Medium shot man getting his hair washed" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/mid-century-modern-decorated-loft-style-apartment_53876-144963.jpg", imageAlt: "Mid century modern decorated loft style apartment" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/close-up-low-view-man-getting-haircut_23-2148224308.jpg", imageAlt: "Close up low view man getting a haircut" },
|
||||
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668433.jpg", imageAlt: "High angle woman at hair salon" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Signature Haircut",
|
||||
description: "Customized precision haircut tailored to your face shape and personal style.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anonymous-stylist-trimming-hair-ends_23-2147769833.jpg",
|
||||
},
|
||||
{
|
||||
title: "Bespoke Color",
|
||||
description: "Expert balayage, highlights, and full color services for a radiant look.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-process-hair-coloring_23-2147769774.jpg",
|
||||
},
|
||||
{
|
||||
title: "Professional Styling",
|
||||
description: "Blowouts, updos, and professional styling for your next event.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108815.jpg",
|
||||
},
|
||||
{
|
||||
title: "Boutique Experience",
|
||||
description: "Curated salon goods and accessories hand-selected by our stylists.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500984.jpg",
|
||||
},
|
||||
]}
|
||||
title="Services Offered"
|
||||
description="From precision cuts to bespoke color transformations, we provide high-end care in a relaxed environment."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardOne
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ title: "Signature Haircut", description: "Customized precision haircut tailored to your face shape and personal style.", imageSrc: "http://img.b2bpic.net/free-photo/anonymous-stylist-trimming-hair-ends_23-2147769833.jpg" },
|
||||
{ title: "Bespoke Color", description: "Expert balayage, highlights, and full color services for a radiant look.", imageSrc: "http://img.b2bpic.net/free-photo/cheerful-girl-process-hair-coloring_23-2147769774.jpg" },
|
||||
{ title: "Professional Styling", description: "Blowouts, updos, and professional styling for your next event.", imageSrc: "http://img.b2bpic.net/free-photo/blonde-girl-getting-her-hair-done_23-2148108815.jpg" },
|
||||
{ title: "Boutique Experience", description: "Curated salon goods and accessories hand-selected by our stylists.", imageSrc: "http://img.b2bpic.net/free-photo/anime-style-beauty-salon-with-cosmetology-equipment_23-2151500984.jpg" },
|
||||
]}
|
||||
title="Services Offered"
|
||||
description="From precision cuts to bespoke color transformations, we provide high-end care in a relaxed environment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Texas Trusts The Rustic Hue"
|
||||
metrics={[
|
||||
{
|
||||
label: "Years in Business",
|
||||
value: "7+",
|
||||
icon: Award,
|
||||
},
|
||||
{
|
||||
label: "Happy Clients",
|
||||
value: "200+",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
label: "Google Rating",
|
||||
value: "5.0★",
|
||||
icon: Star,
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<AboutMetric
|
||||
useInvertedBackground={false}
|
||||
title="Why Texas Trusts The Rustic Hue"
|
||||
metrics={[
|
||||
{ label: "Years in Business", value: "7+", icon: Award },
|
||||
{ label: "Happy Clients", value: "200+", icon: Users },
|
||||
{ label: "Google Rating", value: "5.0★", icon: Star },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
title: "Amazing Atmosphere",
|
||||
quote: "Love this boutique and Blaine! Always a good time, whether your shopping, getting your hair done or just stopping by to visit!",
|
||||
name: "Melissa Wise",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332457.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
title: "Hair Magician",
|
||||
quote: "Blaine is a Stellar Hair Magician! Let alone the business skills and peoples skills! Absolutely beautiful inside out.",
|
||||
name: "Kristin Dever",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5886.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
title: "Perfect Color",
|
||||
quote: "The best balayage I've ever had. Truly professional and the salon is just gorgeous.",
|
||||
name: "Sarah Jenkins",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167372.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
title: "So Welcoming",
|
||||
quote: "Such a charming spot. Everyone is so friendly and talented.",
|
||||
name: "Emily R.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205890.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
title: "Best Blowout",
|
||||
quote: "Came in for an event and left feeling like a superstar. Highly recommend!",
|
||||
name: "Jessica T.",
|
||||
role: "Client",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668434.jpg",
|
||||
},
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="See why our clients trust us with their hair and love visiting our boutique."
|
||||
/>
|
||||
</div>
|
||||
<div id="reviews" data-section="reviews">
|
||||
<TestimonialCardTen
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", title: "Amazing Atmosphere", quote: "Love this boutique and Blaine! Always a good time, whether your shopping, getting your hair done or just stopping by to visit!", name: "Melissa Wise", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-hair-process-keratin-treatment_23-2149332457.jpg" },
|
||||
{ id: "2", title: "Hair Magician", quote: "Blaine is a Stellar Hair Magician! Let alone the business skills and peoples skills! Absolutely beautiful inside out.", name: "Kristin Dever", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-women-s-haircut_1150-5886.jpg" },
|
||||
{ id: "3", title: "Perfect Color", quote: "The best balayage I've ever had. Truly professional and the salon is just gorgeous.", name: "Sarah Jenkins", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/woman-getting-her-hair-dyed-beauty-salon_23-2149167372.jpg" },
|
||||
{ id: "4", title: "So Welcoming", quote: "Such a charming spot. Everyone is so friendly and talented.", name: "Emily R.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/hairdresser-grooming-their-client_23-2149205890.jpg" },
|
||||
{ id: "5", title: "Best Blowout", quote: "Came in for an event and left feeling like a superstar. Highly recommend!", name: "Jessica T.", role: "Client", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-woman-hair-salon_23-2150668434.jpg" },
|
||||
]}
|
||||
title="What Our Clients Say"
|
||||
description="See why our clients trust us with their hair and love visiting our boutique."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Visit Us"
|
||||
title="Get In Touch"
|
||||
description="Ready for a transformation? Call us today or fill out the form to request an appointment."
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Enter your phone number"
|
||||
buttonText="Request Appointment"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
|
||||
imageAlt="Professional salon service in progress"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Visit Us"
|
||||
title="Get In Touch"
|
||||
description="Ready for a transformation? Call us today or fill out the form to request an appointment."
|
||||
mediaAnimation="slide-up"
|
||||
inputPlaceholder="Enter your phone number"
|
||||
buttonText="Request Appointment"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/barber-doing-haircut-bearded-aged-client-hair-salon_23-2148182013.jpg"
|
||||
imageAlt="Professional salon service in progress"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="The Rustic Hue"
|
||||
copyrightText="© 2025 The Rustic Hue. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="The Rustic Hue"
|
||||
copyrightText="© 2025 The Rustic Hue. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user