Merge version_4 into main

Merge version_4 into main

src/app/about/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            heading={[{ type: 'text', content: "Our Mission: Redefining Beauty in Tanzania" }]}
+            buttons={[{ text: "Back Home", href: "/" }]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterBaseReveal logoText="Niffer Cosmetics" columns={[]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import ContactCTA from '@/components/sections/contact/ContactCTA';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import FooterBaseReveal from '@/components/sections/footer/FooterBaseReveal';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered navItems={[{ name: "Home", id: "/" }, { name: "About Us", id: "/about" }, { name: "Contact", id: "/contact" }]} />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactCTA
+            tag="Contact Us"
+            title="Let's Connect!"
+            description="Reach out via WhatsApp, Instagram, or Email. Find us on the map for your next store visit."
+            background={{ variant: "gradient-bars" }}
+            buttons={[
+                { text: "WhatsApp", href: "https://wa.me/255..." },
+                { text: "Instagram", href: "https://instagram.com/niffer" },
+                { text: "Email Us", href: "mailto:hello@niffercosmetics.co.tz" }
+            ]}
+            useInvertedBackground={false}
+          />
+        </div>
+        <FooterBaseReveal logoText="Niffer Cosmetics" columns={[]} />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -30,14 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Products",          id: "products"},
-        {
-          name: "About",          id: "about"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "Products", id: "products" },
+        { name: "About Us", id: "/about" },
+        { name: "Contact", id: "/contact" },
       ]}
       brandName="Niffer Cosmetics"
     />
@@ -45,151 +41,16 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroCentered
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
       title="Unveil Your Natural Glow"
       description="Niffer Cosmetics brings you the finest selection of premium beauty products, tailored for your skin in Tanzania."
       avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-5383.jpg",          alt: "Customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/front-view-curious-woman-trench-coat_197531-19730.jpg",          alt: "Customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/photo-fashionable-girl-with-bright-ginger-hairstyle-bandage-neck-light-modern-clothes-looking-front-outdoor_197531-24727.jpg",          alt: "Customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/smiley-woman-face-massaging-with-gua-sha-medium-shot_23-2149349087.jpg",          alt: "Customer"},
-        {
-          src: "http://img.b2bpic.net/free-photo/young-cute-woman-outdoors_624325-1706.jpg",          alt: "Customer"},
+        { src: "http://img.b2bpic.net/free-photo/beautiful-young-woman-looking-camera-home_1301-5383.jpg", alt: "Customer" },
+        { src: "http://img.b2bpic.net/free-photo/front-view-curious-woman-trench-coat_197531-19730.jpg", alt: "Customer" },
+        { src: "http://img.b2bpic.net/free-photo/photo-fashionable-girl-with-bright-ginger-hairstyle-bandage-neck-light-modern-clothes-looking-front-outdoor_197531-24727.jpg", alt: "Customer" },
       ]}
       avatarText="Loved by thousands of women across Tanzania"
-      buttons={[
-        {
-          text: "Shop Our Collection",          href: "#products"},
-      ]}
-      marqueeItems={[
-        {
-          type: "text",          text: "Cruelty-Free"},
-        {
-          type: "text",          text: "Organic Ingredients"},
-        {
-          type: "text",          text: "Tanzanian Owned"},
-        {
-          type: "text",          text: "Dermatologist Tested"},
-        {
-          type: "text",          text: "Premium Quality"},
-      ]}
-    />
-  </div>
-
-  <div id="about" data-section="about">
-      <TextAbout
-      useInvertedBackground={false}
-      title="Beauty Rooted in Quality & Care"
-      buttons={[
-        {
-          text: "Learn More About Us",          href: "#"},
-      ]}
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardThree
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",          name: "Botanical Glow Serum",          price: "TZS 45,000",          imageSrc: "http://img.b2bpic.net/free-photo/serum-bottle-with-dropper_1301-4965.jpg"},
-        {
-          id: "p2",          name: "Deep Hydration Cream",          price: "TZS 35,000",          imageSrc: "http://img.b2bpic.net/free-photo/moisturizer-jar-cream_1301-5231.jpg"},
-        {
-          id: "p3",          name: "Gentle Cleansing Wash",          price: "TZS 28,000",          imageSrc: "http://img.b2bpic.net/free-photo/cleansing-foam-bottle_1301-5421.jpg"},
-        {
-          id: "p4",          name: "Sun Protection Gel",          price: "TZS 32,000",          imageSrc: "http://img.b2bpic.net/free-photo/sunscreen-tube_1301-5489.jpg"},
-        {
-          id: "p5",          name: "Nourishing Night Balm",          price: "TZS 42,000",          imageSrc: "http://img.b2bpic.net/free-photo/night-cream-jar_1301-5678.jpg"},
-        {
-          id: "p6",          name: "Exfoliating Scrub",          price: "TZS 25,000",          imageSrc: "http://img.b2bpic.net/free-photo/facial-scrub-texture_1301-5999.jpg"},
-      ]}
-      title="Signature Skincare Essentials"
-      description="Pure, effective botanical formulas crafted to revitalize and protect your skin with authentic Tanzanian ingredients."
-      buttons={[
-        {
-          text: "Shop All Skincare",          href: "#"
-        }
-      ]}
-    />
-  </div>
-
-  <div id="features" data-section="features">
-      <FeatureCardTwentyOne
-      useInvertedBackground={false}
-      title="Why Choose Niffer?"
-      description="We are dedicated to providing safe, effective, and ethically sourced beauty products."
-      accordionItems={[
-        {
-          id: "a1",          title: "Ethically Sourced",          content: "Our ingredients are harvested with respect for the environment."},
-        {
-          id: "a2",          title: "Dermatologically Tested",          content: "Every product undergoes rigorous safety checks for your skin."},
-        {
-          id: "a3",          title: "Local Expertise",          content: "Specially formulated for the Tanzanian climate and skin needs."},
-      ]}
-      mediaAnimation="slide-up"
-      imageSrc="http://img.b2bpic.net/free-photo/cleaning-disks-cosmetics-products_23-2148574921.jpg"
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",          name: "Sarah A.",          role: "Skincare Enthusiast",          testimonial: "My skin has never felt more vibrant. The glow is real!",          imageSrc: "http://img.b2bpic.net/free-photo/charming-browneyed-woman-headband-kigurumi-smiles-poses-with-eyepatches-pink-background_197531-28325.jpg"},
-        {
-          id: "t2",          name: "Grace M.",          role: "Student",          testimonial: "Finally found a routine that works perfectly in our heat.",          imageSrc: "http://img.b2bpic.net/free-photo/inside-portrait-smiling-happy-european-woman-with-wine-lips-wearing-white-jacket-posing-camera_291650-432.jpg"},
-        {
-          id: "t3",          name: "Fatuma J.",          role: "Professional",          testimonial: "The night balm changed my skin tone completely. Highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/young-happy-woman-outdoor_624325-131.jpg"},
-        {
-          id: "t4",          name: "Amina S.",          role: "Business Owner",          testimonial: "Excellent service and fast delivery across Tanzania.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-lifestyle-blogger-girl-records-beauty-vlog-her-room-using-professional_1258-255198.jpg"},
-        {
-          id: "t5",          name: "Brenda L.",          role: "Teacher",          testimonial: "My go-to brand for natural and clean skincare.",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-young-beautiful-female-barber-uniform-showing-okay-gesture-isolated-pink-background_141793-118849.jpg"},
-      ]}
-      title="Hear From Our Community"
-      description="Join thousands of satisfied customers who have transformed their routine."
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqDouble
-      textboxLayout="split"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",          title: "Do you offer nationwide delivery?",          content: "Yes, we ship across all regions in Tanzania."},
-        {
-          id: "f2",          title: "Are your products cruelty-free?",          content: "Absolutely, we never test our products on animals."},
-        {
-          id: "f3",          title: "How can I join the Niffer loyalty program?",          content: "Sign up online or at any of our retail stores."},
-      ]}
-      title="Common Questions"
-      description="Get quick answers about our shipping, ingredients, and store locations."
-      faqsAnimation="slide-up"
-    />
-  </div>
-
-  <div id="contact" data-section="contact">
-      <ContactText
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars"}}
-      text="Ready to enhance your beauty routine? Let's connect."
-      buttons={[
-        {
-          text: "Contact Us Now",          href: "mailto:hello@niffercosmetics.co.tz"},
-      ]}
+      buttons={[{ text: "Shop Our Collection", href: "#products" }]}
     />
   </div>
 
@@ -197,30 +58,9 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Niffer Cosmetics"
       columns={[
-        {
-          title: "Shop",          items: [
-            {
-              label: "All Products",              href: "#products"},
-            {
-              label: "Best Sellers",              href: "#products"},
-          ],
-        },
-        {
-          title: "Support",          items: [
-            {
-              label: "FAQ",              href: "#faq"},
-            {
-              label: "Contact",              href: "mailto:hello@niffercosmetics.co.tz"},
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            {
-              label: "Privacy Policy",              href: "#"},
-            {
-              label: "Terms of Service",              href: "#"},
-          ],
-        },
+        { title: "Shop", items: [{ label: "All Products", href: "#products" }] },
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "/contact" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
       ]}
       copyrightText="© 2024 Niffer Cosmetics. Built for Tanzania."
     />
@@ -228,4 +68,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

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

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdfbf7;
-  --card: #f4efe9;
-  --foreground: #2d241d;
-  --primary-cta: #a67c52;
+  --background: #fffafb;
+  --card: #ffffff;
+  --foreground: #5d4037;
+  --primary-cta: #d81b60;
   --primary-cta-text: #f5f5f5;
-  --secondary-cta: #e4dcd3;
+  --secondary-cta: #fce4ec;
   --secondary-cta-text: #1c1c1c;
-  --accent: #c69c6d;
-  --background-accent: #efe6dd;
+  --accent: #ffc107;
+  --background-accent: #f8bbd0;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);