139 lines
6.0 KiB
TypeScript
139 lines
6.0 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterCard from '@/components/sections/footer/FooterCard';
|
|
import HeroSplit from '@/components/sections/hero/HeroSplit';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-magnetic"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="none"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="flat"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "About", id: "about" },
|
|
{ name: "Services", id: "features" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" },
|
|
]}
|
|
brandName="Color Me Beautiful"
|
|
button={{ text: "Book Now", href: "#contact" }}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplit
|
|
title="Color Me Beautiful"
|
|
description="Experience unparalleled luxury in beauty care. Your transformation starts in the heart of Splendora."
|
|
buttons={[{ text: "Book Your Appointment", href: "#contact" }]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/luxury-modern-hair-salon-interior-design_23-2148866504.jpg"
|
|
mediaAnimation="none"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{ type: "text", content: "Our Philosophy" },
|
|
]}
|
|
description="We believe in enhancing your natural beauty with expert care and precision styling in a serene, luxurious environment."
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="none"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
showStepNumbers={false}
|
|
features={[
|
|
{ title: "Precision Styling", description: "Expert cuts designed to enhance your unique features.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/professional-hairdressing-supplies-flat-lay_23-2148352954.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-frame-with-facial-beauty-products-copy-space_23-2148299561.jpg" } },
|
|
{ title: "Skin Rejuvenation", description: "Custom facials for a radiant, healthy glow.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-using-nail-oil_23-2149171324.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/young-woman-lying-cosmetologist-s-table-rejuvenation-procedure-cosmetologist-take-care-about-neck-face-skin-youthfull-wellness-hardware-face-cleaning-procedure_343596-7877.jpg" } },
|
|
{ title: "Color Artistry", description: "Luminous hair coloring with high-end, nourishing products.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-wearing-protective-face-mask-hair-wash-hairdresser-s_637285-8974.jpg" }, phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/side-view-woman-hair-salon_23-2150668432.jpg" } },
|
|
]}
|
|
title="Our Signature Services"
|
|
description="From precision styling to rejuvenating skin treatments, we tailor every detail to you."
|
|
/>
|
|
</div>
|
|
|
|
<div id="social-proof" data-section="social-proof">
|
|
<SocialProofOne
|
|
names={["Local Business Award", "Splendora Top Choice", "Community Favorite"]}
|
|
title="Trusted by our Community"
|
|
description="Proudly serving the Splendora community for years."
|
|
useInvertedBackground={false}
|
|
textboxLayout="default"
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
faqs={[
|
|
{ id: "1", title: "How do I book an appointment?", content: "You can reach us at (281) 689-8160 or visit our website to secure your time." },
|
|
{ id: "2", title: "Are walk-ins welcome?", content: "We recommend appointments to ensure we can dedicate the necessary time to your transformation." },
|
|
]}
|
|
title="Frequently Asked Questions"
|
|
description="Find answers to common questions about our salon services."
|
|
faqsAnimation="none"
|
|
useInvertedBackground={false}
|
|
textboxLayout="default"
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="none"
|
|
gridVariant="three-columns-all-equal-width"
|
|
testimonials={[
|
|
{ id: "1", name: "Sarah J.", role: "Client", company: "Local", rating: 5 },
|
|
{ id: "2", name: "Michael K.", role: "Client", company: "Local", rating: 5 },
|
|
]}
|
|
title="What Our Clients Say"
|
|
description="Real feedback from our happy clients in Splendora."
|
|
useInvertedBackground={false}
|
|
textboxLayout="default"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
title="Book Your Visit"
|
|
description="Visit us at 14352 US-59 BUS, Splendora, TX 77372. Contact us at +12816898160."
|
|
inputs={[
|
|
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
|
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterCard
|
|
logoText="Color Me Beautiful"
|
|
copyrightText="© 2025 Color Me Beautiful"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |