Update src/app/page.tsx

Merge version_2 into main

src/app/layout.tsx

@@ -11,8 +11,8 @@ import { Source_Sans_3 } from "next/font/google";
 
 
 export const metadata: Metadata = {
-  title: 'Elegance Salon | Premium Hair, Nail & Spa Services',
+  title: 'Exotic African Hair & Beauty | Premium Hair, Nail & Spa Services',
-  description: 'Indulge in luxurious hair, nail, and spa treatments at Elegance Salon. Experience expert styling, premium products, and a relaxing atmosphere. Book your appointment today!',
+  description: 'Indulge in luxurious hair, nail, and spa treatments at Exotic African Hair & Beauty. Experience expert styling, premium products, and a relaxing atmosphere. Book your appointment today!',
   keywords: ["salon, hair salon, nail salon, spa, beauty, haircuts, styling, coloring, manicures, pedicures, facials, beauty treatments"],
   openGraph: {
     "title": "Elegance Salon | Premium Hair, Nail & Spa Services",

src/app/page.tsx

@@ -2,8 +2,8 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCTA from '@/components/sections/contact/ContactCTA';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
-import FaqSplitText from '@/components/sections/faq/FaqSplitText';
+import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
 import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
@@ -52,13 +52,13 @@ export default function LandingPage() {
         {
           name: "Contact",          id: "#contact"},
       ]}
-      brandName="Elegance Salon"
+      brandName="Exotic African Hair & Beauty"
     />
   </div>
 
   <div id="hero" data-section="hero">
       <HeroLogo
-      logoText="Elegance Salon"
+      logoText="Exotic African Hair & Beauty"
       description="Where beauty meets serenity. Indulge in luxurious hair, nail, and spa treatments tailored just for you."
       buttons={[
         {
@@ -67,8 +67,8 @@ export default function LandingPage() {
           text: "Explore Services",          href: "#services"},
       ]}
       buttonAnimation="opacity"
-      imageSrc="http://img.b2bpic.net/free-photo/lodge-wintertime-with-ski-gear_482257-76632.jpg"
+      imageSrc="http://img.b2bpic.net/free-photo/afro-woman-cutting-hair-little-child_176420-5627.jpg"
-      imageAlt="Luxurious salon interior with styling chairs and elegant decor"
+      imageAlt="Professional hairstylist attending to a client in a salon"
       showDimOverlay={true}
     />
   </div>
@@ -263,7 +263,7 @@ export default function LandingPage() {
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqSplitText
+      <FaqDouble
       useInvertedBackground={false}
       faqs={[
         {
@@ -275,34 +275,31 @@ export default function LandingPage() {
         {
           id: "q4",          title: "Do you offer gift cards?",          content: "Absolutely! Gift cards are available for purchase at our salon and can be used for any service or product."},
       ]}
-      sideTitle="Frequently Asked Questions"
+      title="Frequently Asked Questions"
-      sideDescription="Have questions about our services, booking, or anything else? Find quick answers here."
+      description="Have questions about our services, booking, or anything else? Find quick answers here."
       faqsAnimation="slide-up"
-      textPosition="left"
+      textboxLayout="default"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCTA
+      <ContactCenter
       useInvertedBackground={false}
       background={{
         variant: "radial-gradient"}}
       tag="Ready to Transform?"
       title="Book Your Appointment Today"
       description="Experience the Elegance difference. Our team is excited to welcome you and help you achieve your beauty goals."
-      buttons={[
+      inputPlaceholder="Enter your email"
-        {
+      buttonText="Sign Up for Updates"
-          text: "Call Us Now",          href: "tel:+1234567890"},
+      termsText="By clicking Sign Up you're confirming that you agree with our Terms and Conditions."
-        {
+      onSubmit={(email) => console.log("Email submitted:", email)}
-          text: "Email Us",          href: "mailto:info@elegancesalon.com"},
-      ]}
-      buttonAnimation="opacity"
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterBaseReveal
-      logoText="Elegance Salon"
+      logoText="Exotic African Hair & Beauty"
       columns={[
         {
           title: "Services",          items: [
@@ -335,10 +332,10 @@ export default function LandingPage() {
           ],
         },
       ]}
-      copyrightText="© 2024 Elegance Salon. All rights reserved."
+      copyrightText="© 2024 Exotic African Hair & Beauty. All rights reserved."
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-public-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fbfaff;
+  --background: #ffffff;
-  --card: #f7f5ff;
+  --card: #f9f9f9;
-  --foreground: #0f0022;
+  --foreground: #000612e6;
-  --primary-cta: #8b5cf6;
+  --primary-cta: #106EFB;
-  --primary-cta-text: #fbfaff;
+  --primary-cta-text: #ffffff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
-  --secondary-cta-text: #0f0022;
+  --secondary-cta-text: #000612e6;
-  --accent: #d8cef5;
+  --accent: #e2e2e2;
-  --background-accent: #c4a8f9;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);