Merge version_2 into main

Merge version_2 into main

src/app/about/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="M-Pesa"
+          />
+        </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardEleven 
+            title="Our Mission"
+            description="Empowering communities through innovative fintech solutions."
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            metrics={[
+                { id: "1", title: "Global Community", value: "30M+", description: "Active users globally", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=3" },
+                { id: "2", title: "Daily Transactions", value: "100M+", description: "Processed daily", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=3" },
+                { id: "3", title: "Trust Rating", value: "99.9%", description: "Average satisfaction", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=3" }
+            ]}
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/blue-neon-lines-deep-shadow-cyberpunk-background_169016-71497.jpg"
+            logoText="M-Pesa"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Contact", href: "/contact" }] },
+              { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Privacy Policy", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/contact/page.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
+import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import FooterMedia from '@/components/sections/footer/FooterMedia';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="hover-magnetic" 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">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "/about" },
+              { name: "Contact", id: "/contact" },
+            ]}
+            brandName="M-Pesa"
+          />
+        </div>
+        <div id="contact" data-section="contact">
+          <ContactSplitForm
+            title="Get In Touch"
+            description="We're here to help you succeed. Fill out the form and our team will be in touch shortly."
+            useInvertedBackground={false}
+            inputs={[
+              { name: "fullName", type: "text", placeholder: "Full Name", required: true },
+              { name: "email", type: "email", placeholder: "Email", required: true }
+            ]}
+            textarea={{ name: "message", placeholder: "How can we assist you?", required: true }}
+            imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=3"
+          />
+        </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/blue-neon-lines-deep-shadow-cyberpunk-background_169016-71497.jpg"
+            logoText="M-Pesa"
+            columns={[
+              { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Contact", href: "/contact" }] },
+              { title: "Support", items: [{ label: "Help Center", href: "#" }, { label: "Privacy Policy", href: "#" }] },
+            ]}
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -23,24 +23,17 @@ export default function LandingPage() {
         cardStyle="glass-depth"
         primaryButtonStyle="flat"
         secondaryButtonStyle="solid"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Features",
-          id: "features",
-        },
-        {
-          name: "Support",
-          id: "faq",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Collections", id: "collections" },
+        { name: "About", id: "about" },
+        { name: "Blog", id: "blog" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="M-Pesa"
     />
@@ -49,35 +42,12 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardCarousel
       background={{
-        variant: "gradient-bars",
-      }}
+        variant: "gradient-bars"}}
       title="M-Pesa: Your Digital Financial Ecosystem"
       description="Send money, pay bills, and manage your finances securely with the M-Pesa app. Fast, reliable, and available everywhere."
       mediaItems={[
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/person-holding-phone-hands-dark-background_23-2148295843.jpg?_wi=1",
-          imageAlt: "Digital Transaction Dashboard",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-credit-card-smartphone-woman-s-hands_273609-15497.jpg",
-          imageAlt: "Mobile Payment Interface",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-crystal-globe_1150-17696.jpg",
-          imageAlt: "Data Flow Visualization",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461319.jpg?_wi=1",
-          imageAlt: "Fintech Analysis UI",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/banking-app-interface-concept_23-2148616879.jpg",
-          imageAlt: "Transaction History Screen",
-        },
-        {
-          imageSrc: "http://img.b2bpic.net/free-vector/double-sided-business-card-vertical_23-2148627644.jpg",
-          imageAlt: "App Splash Screen",
-        },
+        { imageSrc: "http://img.b2bpic.net/free-photo/person-holding-phone-hands-dark-background_23-2148295843.jpg?_wi=1", imageAlt: "Digital Transaction Dashboard" },
+        { imageSrc: "http://img.b2bpic.net/free-photo/closeup-credit-card-smartphone-woman-s-hands_273609-15497.jpg", imageAlt: "Mobile Payment Interface" },
       ]}
     />
   </div>
@@ -88,36 +58,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          title: "Instant Send Money",
-          description: "Transfer funds instantly to friends and family across the country.",
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg",
-          imageAlt: "Send Money Feature",
-        },
-        {
-          title: "Easy Bill Payments",
-          description: "Pay your utility bills and merchant invoices with just a tap.",
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=1",
-          imageAlt: "Bill Payment Feature",
-        },
-        {
-          title: "Secure Savings Wallet",
-          description: "Manage your savings and investments with high-level encryption.",
-          imageSrc: "http://img.b2bpic.net/free-photo/easy-wireless-yechnology-payment_23-2149105180.jpg",
-          imageAlt: "Savings Wallet Feature",
-        },
-        {
-          title: "Micro Loans",
-          description: "Access instant credit facilities for your small business needs.",
-          imageSrc: "http://img.b2bpic.net/free-photo/person-holding-phone-hands-dark-background_23-2148295843.jpg?_wi=2",
-          imageAlt: "Loans Feature",
-        },
-        {
-          title: "Global Remittance",
-          description: "Receive funds from around the world directly into your wallet.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-person-looking-finance-graphs_23-2150461319.jpg?_wi=2",
-          imageAlt: "Global Remittance",
-        },
+        { title: "Instant Send Money", description: "Transfer funds instantly to friends and family across the country.", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169854.jpg", imageAlt: "Send Money Feature" },
+        { title: "Easy Bill Payments", description: "Pay your utility bills and merchant invoices with just a tap.", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=1", imageAlt: "Bill Payment Feature" },
       ]}
       title="Features That Empower You"
       description="Experience a complete financial management suite designed for convenience and speed."
@@ -130,41 +72,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       metrics={[
-        {
-          id: "m1",
-          title: "Active Users",
-          value: "30M+",
-          description: "Trusted by millions of users daily.",
-          imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg",
-        },
-        {
-          id: "m2",
-          title: "Transactions",
-          value: "100M+",
-          description: "Processed daily with utmost security.",
-          imageSrc: "http://img.b2bpic.net/free-vector/crowdfunding-app-screens_23-2148632319.jpg?_wi=1",
-        },
-        {
-          id: "m3",
-          title: "Security Rating",
-          value: "99.9%",
-          description: "World-class encryption standards.",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-cybersecurity-concept-design_23-2151841695.jpg",
-        },
-        {
-          id: "m4",
-          title: "Merchant Partners",
-          value: "500K+",
-          description: "Widely accepted at local retailers.",
-          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=2",
-        },
-        {
-          id: "m5",
-          title: "Avg. Speed",
-          value: "<2s",
-          description: "Lightning fast processing time.",
-          imageSrc: "http://img.b2bpic.net/free-vector/crowdfunding-app-screens_23-2148632319.jpg?_wi=2",
-        },
+        { id: "m1", title: "Active Users", value: "30M+", description: "Trusted by millions of users daily.", imageSrc: "http://img.b2bpic.net/free-photo/customer-relationship-management-concept_23-2150038414.jpg" },
+        { id: "m2", title: "Transactions", value: "100M+", description: "Processed daily with utmost security.", imageSrc: "http://img.b2bpic.net/free-vector/crowdfunding-app-screens_23-2148632319.jpg?_wi=1" },
       ]}
       title="Trusted by Millions"
       description="Our performance speaks for itself in serving the community."
@@ -177,28 +86,7 @@ export default function LandingPage() {
       testimonial="M-Pesa has completely transformed how I handle my daily finances. It is fast, secure, and incredibly easy to use."
       rating={5}
       author="Sarah Johnson"
-      avatars={[
-        {
-          src: "http://img.b2bpic.net/free-photo/confident-businessman-working-desk_273609-12803.jpg",
-          alt: "User Sarah",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/technician-optimizing-data-center-equipment-maximum-efficiency_482257-117650.jpg",
-          alt: "User Michael",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/group-friends-reading-cell-phone-messages_23-2150409991.jpg",
-          alt: "User Emily",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/easy-wireless-yechnology-payment_23-2149105186.jpg",
-          alt: "User David",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/medium-shot-woman-holding-credit-card_23-2149476760.jpg",
-          alt: "User Linda",
-        },
-      ]}
+      avatars={[{ src: "http://img.b2bpic.net/free-photo/confident-businessman-working-desk_273609-12803.jpg", alt: "User Sarah" }]}
       ratingAnimation="blur-reveal"
       avatarsAnimation="blur-reveal"
     />
@@ -209,31 +97,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       faqs={[
-        {
-          id: "q1",
-          title: "Is M-Pesa secure?",
-          content: "Yes, M-Pesa uses high-level encryption to ensure all transactions are secure.",
-        },
-        {
-          id: "q2",
-          title: "How do I register?",
-          content: "Download the app and follow the simple on-screen registration prompts.",
-        },
-        {
-          id: "q3",
-          title: "What fees are involved?",
-          content: "Transaction fees are minimal and transparently displayed during transfer.",
-        },
-        {
-          id: "q4",
-          title: "Can I use it offline?",
-          content: "Yes, USSD functionality ensures you can access services without an internet connection.",
-        },
-        {
-          id: "q5",
-          title: "Is there a daily limit?",
-          content: "Limits apply based on your verification tier; check the app settings for details.",
-        },
+        { id: "q1", title: "Is M-Pesa secure?", content: "Yes, M-Pesa uses high-level encryption to ensure all transactions are secure." },
+        { id: "q2", title: "How do I register?", content: "Download the app and follow the simple on-screen registration prompts." },
       ]}
       title="Frequently Asked Questions"
       description="Get quick answers to common questions about using the M-Pesa app."
@@ -246,26 +111,8 @@ export default function LandingPage() {
       useInvertedBackground={false}
       title="Contact Us"
       description="Have questions? Our support team is here to assist you anytime."
-      inputs={[
-        {
-          name: "name",
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
-        },
-        {
-          name: "email",
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
-        },
-      ]}
-      textarea={{
-        name: "message",
-        placeholder: "How can we help?",
-        rows: 4,
-        required: true,
-      }}
+      inputs={[{ name: "name", type: "text", placeholder: "Your Name", required: true }, { name: "email", type: "email", placeholder: "Email Address", required: true }]}
+      textarea={{ name: "message", placeholder: "How can we help?", rows: 4, required: true }}
       imageSrc="http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=3"
     />
   </div>
@@ -275,36 +122,14 @@ export default function LandingPage() {
       imageSrc="http://img.b2bpic.net/free-photo/blue-neon-lines-deep-shadow-cyberpunk-background_169016-71497.jpg"
       logoText="M-Pesa"
       columns={[
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Support",
-          items: [
-            {
-              label: "Help Center",
-              href: "#",
-            },
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-          ],
-        },
+        { title: "Shop", items: [{ label: "New Arrivals", href: "/collections" }, { label: "Best Sellers", href: "/collections" }] },
+        { title: "Company", items: [{ label: "About Us", href: "/about" }, { label: "Careers", href: "#" }] },
+        { title: "Connect", items: [{ label: "Blog", href: "/blog" }, { label: "Support", href: "/contact" }] }
       ]}
+      copyrightText="© 2025 M-Pesa | 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-roboto), sans-serif;
+  font-family: var(--font-montserrat), 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-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
-  --card: #1a1a1a;
-  --foreground: #f0f8ffe6;
-  --primary-cta: #cee7ff;
+  --background: #f5f4f0;
+  --card: #ffffff;
+  --foreground: #1a1a1a;
+  --primary-cta: #2c2c2c;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #f5f4f0;
   --secondary-cta-text: #f0f8ffe6;
-  --accent: #737373;
-  --background-accent: #737373;
+  --accent: #8a8a8a;
+  --background-accent: #e8e6e1;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);