Update src/app/page.tsx

Merge version_2 into main

src/app/page.tsx

@@ -2,17 +2,16 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
-import FaqDouble from '@/components/sections/faq/FaqDouble';
+import FaqSplitText from '@/components/sections/faq/FaqSplitText';
-import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
+import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
-import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
-import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
-import ProductCardThree from '@/components/sections/product/ProductCardThree';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
-import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
+import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import TextAbout from '@/components/sections/about/TextAbout';
-import { Droplets, Sun, ThumbsUp } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,14 +31,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "Benefits", id: "features" },
-        {
+        { name: "Shop", id: "products" },
-          name: "Benefits",          id: "features"},
+        { name: "About", id: "about" },
-        {
-          name: "Shop",          id: "products"},
-        {
-          name: "About",          id: "about"},
       ]}
       brandName="Charab USA"
     />
@@ -47,47 +42,17 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitTestimonial
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars"}}
       title="A Timeless Rose Tradition, Reimagined."
       description="Charab is a refreshing carbonated rose drink with zero alcohol, zero sugar, and zero calories. Experience delicate floral notes in a light, modern, ready-to-drink format."
       testimonials={[
-        {
+        { name: "Elena R.", handle: "@elena_wellness", testimonial: "The floral notes are subtle and the carbonation is just right.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-300506.jpg?_wi=1" },
-          name: "Elena R.",          handle: "@elena_wellness",          testimonial: "The floral notes are subtle and the carbonation is just right.",          rating: 5,
+        { name: "Julian B.", handle: "@julian_lifestyle", testimonial: "Zero calories, zero sugar - it's the perfect wellness companion.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mockup-cosmetics-hydrogel-eyes-patches-woman-home-with-glass-water_197531-32429.jpg?_wi=1" },
-          imageSrc: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-300506.jpg?_wi=1"},
-        {
-          name: "Julian B.",          handle: "@julian_lifestyle",          testimonial: "Zero calories, zero sugar - it's the perfect wellness companion.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/mockup-cosmetics-hydrogel-eyes-patches-woman-home-with-glass-water_197531-32429.jpg?_wi=1"},
-        {
-          name: "Sophie C.",          handle: "@sophie_chic",          testimonial: "A beautiful blend of French elegance and botanical tradition.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-stylish-blond-girl-knitted-sweater-sensually-looking-camera-outdoor_574295-741.jpg?_wi=1"},
-        {
-          name: "Marc L.",          handle: "@marcl_health",          testimonial: "Refreshing, pure, and light. Exactly what a wellness drink should be.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/selfie-portrait-cute-brunette-girl-with-short-hair-sitting-table-gray-plaid-terrace-restaurant-she-wears-blue-shirt-looks-happy_197531-971.jpg"},
-        {
-          name: "Claire D.",          handle: "@claire_botanics",          testimonial: "I love the delicate rose essence. It feels like a little moment of luxury.",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg"},
       ]}
-      buttons={[
+      buttons={[{ text: "Shop Now", href: "#products" }]}
-        {
+      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=1"
-          text: "Shop Now",          href: "#products"},
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/healthy-smoothie-jars-gypsophila-white-background_23-2148028532.jpg?_wi=1"
       imageAlt="Charab Rose Drink"
       mediaAnimation="slide-up"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/middle-age-curly-hair-woman-drinking-healthy-glass-orange-juice-white-background-doing-ok-sign-with-fingers-excellent-symbol_839833-34407.jpg",          alt: "Customer portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful_1258-119956.jpg",          alt: "Customer portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-301295.jpg",          alt: "Customer portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-122496.jpg",          alt: "Customer portrait"},
-        {
-          src: "http://img.b2bpic.net/free-photo/happy-asian-fitness-girl-takes-selfie-with-rubber-yoga-mat-park-healthy-young-sportswoman-makes-p_1258-123765.jpg",          alt: "Customer portrait"},
-      ]}
-      avatarText="Loved by 10,000+ wellness seekers"
     />
   </div>
 
@@ -95,50 +60,33 @@ export default function LandingPage() {
       <TextAbout
       useInvertedBackground={false}
       title="Inspired by Tradition, Crafted for Modern Wellness."
-      buttons={[
+      buttons={[{ text: "Learn More" }]}
-        {
-          text: "Learn More"},
-      ]}
     />
   </div>
 
   <div id="features" data-section="features">
-      <FeatureCardSixteen
+      <FeatureCardNine
-      animationType="slide-up"
+      showStepNumbers={true}
+      animationType="blur-reveal"
       textboxLayout="default"
       useInvertedBackground={false}
-      negativeCard={{
+      features={[
-        items: [
+        { title: "Pure Rose", description: "Natural floral essence.", phoneOne: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=1" }, phoneTwo: { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=1" } }
-          "No Artificial Flavors",          "No Preservatives",          "No Preparation Needed"],
+      ]}
-      }}
-      positiveCard={{
-        items: [
-          "0% Alcohol",          "0% Sugar",          "0% Calories"],
-      }}
       title="Why You'll Love Charab"
       description="0 alcohol, 0 sugar, 0 calories. Pure rose floral refreshment."
     />
   </div>
 
   <div id="products" data-section="products">
-      <ProductCardThree
+      <ProductCardOne
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "s1", name: "Rose Classic", price: "$5.99", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=2" },
-          id: "sku-001-1",          name: "Charab Rose Drink (Single)",          price: "$5.99",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353780592-jexxvsbp.png"},
+        { id: "s2", name: "Rose Pack of 4", price: "$22.00", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3CMYGCdDHbBQUINsu6UpsgyKFBj/uploaded-1778353933965-knzmyft7.png?_wi=3" }
-        {
-          id: "sku-001-2",          name: "Charab Rose Drink (Pack of 4)",          price: "$22.00",          imageSrc: "http://img.b2bpic.net/free-photo/healthy-smoothie-jars-gypsophila-white-background_23-2148028532.jpg?_wi=2"},
-        {
-          id: "sku-001-3",          name: "Charab Rose Drink (Pack of 6)",          price: "$32.00",          imageSrc: "http://img.b2bpic.net/free-photo/red-soda-drink-macro-shot_53876-71460.jpg"},
-        {
-          id: "sku-001-4",          name: "Charab Rose Drink (Pack of 12)",          price: "$60.00",          imageSrc: "http://img.b2bpic.net/free-photo/healthy-lifestyle-happy-smiling-woman-holding-water-bottle-with-lemon-vitamin-c-drink-looking-joyful-camera-posing-against-pink-background_1258-300506.jpg?_wi=2"},
-        {
-          id: "sku-001-5",          name: "Charab Rose Drink (Pack of 24)",          price: "$115.00",          imageSrc: "http://img.b2bpic.net/free-photo/mockup-cosmetics-hydrogel-eyes-patches-woman-home-with-glass-water_197531-32429.jpg?_wi=2"},
-        {
-          id: "sku-001-6",          name: "Charab Rose Drink (Monthly Sub)",          price: "$100.00",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-attractive-stylish-blond-girl-knitted-sweater-sensually-looking-camera-outdoor_574295-741.jpg?_wi=2"},
       ]}
       title="Shop Charab"
       description="Ready to experience the refreshing floral essence? Order your bottles below."
@@ -146,105 +94,67 @@ export default function LandingPage() {
   </div>
 
   <div id="metrics" data-section="metrics">
-      <MetricCardThree
+      <MetricCardSeven
-      animationType="slide-up"
+      animationType="blur-reveal"
-      textboxLayout="default"
+      textboxLayout="split"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
+      title="Wellness by the Numbers"
       description="Charab nutrition overview."
       metrics={[
-        {
+        { id: "m1", title: "Rose Essence", value: "100%", items: ["Pure Botanical Extracts"] },
-          id: "m1",          icon: Droplets,
+        { id: "m2", title: "Calories", value: "0", items: ["Zero Sugar Added"] },
-          title: "Rose Essence",          value: "100%"},
+        { id: "m3", title: "Satisfaction", value: "99%", items: ["Customer Approved"] }
-        {
-          id: "m2",          icon: Sun,
-          title: "Calories",          value: "0"},
-        {
-          id: "m3",          icon: ThumbsUp,
-          title: "Satisfaction",          value: "99%"},
       ]}
-      title="Wellness by the Numbers"
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
+      <TestimonialCardTen
-      animationType="slide-up"
+      textboxLayout="split"
-      textboxLayout="default"
       useInvertedBackground={false}
+      title="Loved by Our Community"
       description="See what our customers have to say about Charab."
       testimonials={[
-        {
+        { id: "1", title: "Perfection", quote: "Refreshing floral essence, perfection.", name: "Elena R.", role: "Wellness Advocate" }
-          id: "1",          name: "Elena R.",          handle: "@elena_wellness",          testimonial: "Refreshing floral essence, perfection.",          imageSrc: "http://img.b2bpic.net/free-photo/smiley-women-doing-yoga-medium-shot_23-2148935674.jpg"},
-        {
-          id: "2",          name: "Julian B.",          handle: "@julian_lifestyle",          testimonial: "Zero calories never tasted so good.",          imageSrc: "http://img.b2bpic.net/free-photo/indoor-shot-smiling-beautiful-woman-having-cup-coffee-kitchen-looking-camera-with-happy-facial-expression-female-wearing-white-casual-style-shirt_176532-15763.jpg"},
-        {
-          id: "3",          name: "Sophie C.",          handle: "@sophie_chic",          testimonial: "My new favorite daily treat.",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-woman-drinking-water_23-2148774239.jpg"},
-        {
-          id: "4",          name: "Marc L.",          handle: "@marcl_health",          testimonial: "The best sugar-free drink I've had.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-drinking-tea-outdoors_23-2149967014.jpg"},
-        {
-          id: "5",          name: "Claire D.",          handle: "@claire_botanics",          testimonial: "Luxury in a bottle, really impressed.",          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-holding-book-close-up_23-2148396302.jpg"},
       ]}
-      title="Loved by Our Community"
     />
   </div>
 
   <div id="faq" data-section="faq">
-      <FaqDouble
+      <FaqSplitText
-      textboxLayout="default"
+      faqsAnimation="blur-reveal"
-      useInvertedBackground={false}
+      sideTitle="Frequently Asked Questions"
-      description="Find answers to common questions about Charab."
+      sideDescription="Find answers to common questions about Charab."
+      useInvertedBackground={true}
       faqs={[
-        {
+        { id: "f1", title: "Is Charab really zero sugar?", content: "Yes, Charab is formulated with zero sugar using natural processes." },
-          id: "f1",          title: "Is Charab really zero sugar?",          content: "Yes, Charab is formulated with zero sugar using natural processes."},
+        { id: "f2", title: "Where is the rose sourced?", content: "Our rose essence is sourced from high-quality traditional botanical growers." }
-        {
-          id: "f2",          title: "Where is the rose sourced?",          content: "Our rose essence is sourced from high-quality traditional botanical growers."},
-        {
-          id: "f3",          title: "Can I order in bulk?",          content: "Yes, we offer bulk packs and subscription services through our online shop."},
       ]}
-      title="Frequently Asked Questions"
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars"}}
       tag="Stay Informed"
       title="Join the Wellness Movement"
       description="Sign up for exclusive offers and news from Charab USA."
+      buttons={[{ text: "Sign Up" }]}
+      useInvertedBackground={true}
+      background={{ variant: "plain" }}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
+      <FooterSimple
       columns={[
-        {
+        { title: "Shop", items: [{ label: "Catalog", href: "#products" }] },
-          items: [
+        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Contact", href: "#contact" }] }
-            {
-              label: "Shop",              href: "#products"},
-            {
-              label: "About",              href: "#about"},
-            {
-              label: "FAQ",              href: "#faq"},
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy",              href: "#"},
-            {
-              label: "Terms",              href: "#"},
-            {
-              label: "Contact",              href: "#contact"},
-          ],
-        },
       ]}
-      logoText="Charab USA"
+      bottomLeftText="Charab USA"
+      bottomRightText="© 2024"
     />
   </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-inter), sans-serif;
+  font-family: var(--font-figtree), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-public-sans), sans-serif;
+  font-family: var(--font-figtree), sans-serif;
 }