Update src/app/contact/page.tsx

Merge version_3 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,22 +30,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleCentered
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "Products", id: "products" },
-          id: "hero",
+        { name: "About Us", id: "/about" },
-        },
+        { name: "Contact", id: "/contact" },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Niffer Cosmetics"
     />
@@ -53,241 +41,16 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroCentered
-      background={{
+      background={{ variant: "gradient-bars" }}
-        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/beautiful-young-woman-looking-camera-home_1301-5383.jpg",
+        { src: "http://img.b2bpic.net/free-photo/front-view-curious-woman-trench-coat_197531-19730.jpg", alt: "Customer" },
-          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/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",
-        },
       ]}
       avatarText="Loved by thousands of women across Tanzania"
-      buttons={[
+      buttons={[{ text: "Shop Our Collection", href: "#products" }]}
-        {
-          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: "Luxury Radiance Serum",
-          price: "TZS 45,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-lipsticks-assortment_23-2149096664.jpg",
-        },
-        {
-          id: "p2",
-          name: "Matte Finish Foundation",
-          price: "TZS 35,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/dirty-makeup-brushes_23-2147710659.jpg",
-        },
-        {
-          id: "p3",
-          name: "Velvet Touch Eyeshadow",
-          price: "TZS 28,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/red-lip-gloss-with-sky-background_23-2149681517.jpg",
-        },
-        {
-          id: "p4",
-          name: "Midnight Bloom Perfume",
-          price: "TZS 65,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/gua-sha-small-flowers-arrangement-flat-lay_23-2149322600.jpg",
-        },
-        {
-          id: "p5",
-          name: "Hydrating Body Lotion",
-          price: "TZS 22,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-woman-s-face-with-wet-skin-with-drops-water-it-mousturizing-skin-concept_633478-1164.jpg",
-        },
-        {
-          id: "p6",
-          name: "Organic Night Cream",
-          price: "TZS 40,000",
-          imageSrc: "http://img.b2bpic.net/free-photo/foundation-advertising-with-containers_23-2149511275.jpg",
-        },
-      ]}
-      title="Our Signature Collection"
-      description="Discover high-performance beauty essentials crafted for every skin type."
-    />
-  </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: "Makeup Artist",
-          testimonial: "The quality is unmatched. My clients love the glow!",
-          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 foundation that stays on 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 Cream 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",
-        },
-      ]}
     />
   </div>
 
@@ -295,45 +58,9 @@ export default function LandingPage() {
       <FooterBaseReveal
       logoText="Niffer Cosmetics"
       columns={[
-        {
+        { title: "Shop", items: [{ label: "All Products", href: "#products" }] },
-          title: "Shop",
+        { title: "Support", items: [{ label: "FAQ", href: "#faq" }, { label: "Contact", href: "/contact" }] },
-          items: [
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] },
-            {
-              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: "#",
-            },
-          ],
-        },
       ]}
       copyrightText="© 2024 Niffer Cosmetics. Built for Tanzania."
     />

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-roboto), 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-roboto), sans-serif;
+  font-family: var(--font-poppins), sans-serif;
 }

src/app/styles/variables.css

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