Merge version_14 into main

Merge version_14 into main

src/app/page.tsx

@@ -15,39 +15,72 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-magnetic"
+        defaultButtonVariant="expand-hover"
         defaultTextAnimation="entrance-slide"
-        borderRadius="rounded"
-        contentWidth="medium"
-        sizing="medium"
-        background="none"
-        cardStyle="solid"
-        primaryButtonStyle="flat"
+        borderRadius="pill"
+        contentWidth="smallMedium"
+        sizing="largeSizeMediumTitles"
+        background="circleGradient"
+        cardStyle="gradient-radial"
+        primaryButtonStyle="primary-glow"
         secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        headingFontWeight="medium"
     >
       <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" },
+        {
+          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" }}
+      button={{
+        text: "Book Now",        href: "#contact"}}
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroSplit
+      background={{
+        variant: "gradient-bars"}}
       title="Color Me Beautiful"
       description="Experience unparalleled luxury in beauty care. Your transformation starts in the heart of Splendora."
-      background={{ variant: "plain" }}
-      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"
+      buttons={[
+        {
+          text: "Book Your Appointment",          href: "#contact"},
+      ]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMv5A1hLreQ2HOQXjmZon0f2CG/uploaded-1776899864196-n8ecn36a.jpg"
+      mediaAnimation="slide-up"
+      avatars={[
+        {
+          src: "http://img.b2bpic.net/free-photo/mirror-hairdressing-salon_23-2147670185.jpg",          alt: "Mirror in hairdressing salon"},
+        {
+          src: "http://img.b2bpic.net/free-photo/lounge-lobby-area-library-sales-center_105762-1780.jpg",          alt: "lounge lobby area and library in sales center"},
+        {
+          src: "http://img.b2bpic.net/free-photo/blurred-reception_1203-754.jpg",          alt: "Blurred reception"},
+        {
+          src: "http://img.b2bpic.net/free-photo/winter-sports-equipment-complex_482257-76748.jpg",          alt: "Winter sports equipment at complex"},
+        {
+          src: "http://img.b2bpic.net/free-photo/front-view-smiling-bride-young-woman-with-wedding-hairstyle-silk-robe-drinking-looking-bridesmaids-gray-style-robes-standing-spacious-room-near-window_8353-12010.jpg",          alt: "Front view smiling bride"},
+      ]}
+      marqueeItems={[
+        {
+          type: "text",          text: "Expert Styling"},
+        {
+          type: "text",          text: "Premium Facials"},
+        {
+          type: "text",          text: "Luxury Experience"},
+        {
+          type: "text",          text: "Bridal Packages"},
+        {
+          type: "text",          text: "Personalized Care"},
+      ]}
     />
   </div>
 
@@ -55,22 +88,40 @@ export default function LandingPage() {
       <InlineImageSplitTextAbout
       useInvertedBackground={false}
       heading={[
-        { type: "text", content: "Our Philosophy" },
+        {
+          type: "text",          content: "Our Philosophy"},
+        {
+          type: "image",          src: "http://img.b2bpic.net/free-photo/woman-having-consultation-with-hairdresser_23-2147769876.jpg",          alt: "salon founder portrait"},
       ]}
     />
   </div>
 
   <div id="features" data-section="features">
       <FeatureCardNine
-      animationType="none"
-      showStepNumbers={false}
-      useInvertedBackground={false}
+      animationType="slide-up"
       textboxLayout="default"
+      useInvertedBackground={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: "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"},
+        },
       ]}
+      showStepNumbers={true}
       title="Our Signature Services"
       description="From precision styling to rejuvenating skin treatments, we tailor every detail to you."
     />
@@ -78,62 +129,88 @@ export default function LandingPage() {
 
   <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"
+      useInvertedBackground={false}
+      names={[
+        "Local Business Award",        "Splendora Top Choice",        "Community Favorite",        "Beauty Excellence",        "Wellness Experts",        "Modern Salon Daily",        "Style Leader"]}
+      title="Trusted by our Splendora Community"
+      description="Recognized for excellence in beauty and customer care."
     />
   </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"
       textboxLayout="default"
       useInvertedBackground={false}
+      faqs={[
+        {
+          id: "1",          title: "How do I book an appointment?",          content: "You can reach us at (281) 593-5128 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."},
+        {
+          id: "3",          title: "What are your operating hours?",          content: "We open at 9:00 AM daily, closing at 6:00 PM."},
+      ]}
+      title="Frequently Asked Questions"
+      description="Get answers to common inquiries about our salon experience."
+      faqsAnimation="slide-up"
     />
   </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}
+      animationType="slide-up"
       textboxLayout="default"
+      gridVariant="uniform-all-items-equal"
+      useInvertedBackground={false}
+      testimonials={[
+        {
+          id: "1",          name: "Sarah J.",          role: "Client",          company: "Local",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/two-smiling-women-with-brushes-taking-selfie-makeup-mirror_23-2148113380.jpg"},
+        {
+          id: "2",          name: "Michael K.",          role: "Client",          company: "Local",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/gorgeous-smiling-blonde-fashion-model-sits-white-suit-soft-armchair_8353-5476.jpg"},
+        {
+          id: "3",          name: "Emily R.",          role: "Client",          company: "Local",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/close-beauty-portrait-topless-woman-with-perfect-skin-natural-makeup-plump-nude-lips-white-backgroundx9_343596-8012.jpg"},
+        {
+          id: "4",          name: "David L.",          role: "Client",          company: "Local",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/smiling-portrait-blonde-african-young-women-holding-wooden-frame-front-their-face_23-2148178772.jpg"},
+        {
+          id: "5",          name: "Jessica B.",          role: "Client",          company: "Local",          rating: 5,
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-shopping-mall_23-2150585900.jpg"},
+      ]}
+      title="Color Me Beautiful   "
+      description="Real experiences from guests who trusted us with their beauty journey."
     />
   </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}
+      title="Book Your Visit"
+      description="Visit us at 14352 US-59 BUS, Splendora, TX 77372. Contact us at 281-593-5128. We look forward to seeing you."
+      inputs={[
+        {
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
+        },
+        {
+          name: "email",          type: "email",          placeholder: "Your Email",          required: true,
+        },
+        {
+          name: "phone",          type: "tel",          placeholder: "Phone Number",          required: true,
+        },
+      ]}
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMv5A1hLreQ2HOQXjmZon0f2CG/tmp/a-girl-with-pretty-hair-that-just-got-he-1776815568462-d4bd74f3.png"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterCard
       logoText="Color Me Beautiful"
-      copyrightText="© 2025 Color Me Beautiful"
+      copyrightText="© 2025 Color Me Beautiful | Splendora, TX"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}