Update src/app/page.tsx

Merge version_1 into main

src/app/dashboard/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
+import MetricCardOne from "@/components/sections/metrics/MetricCardOne";
+import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
+import { Package, TrendingUp, BarChart3, ShieldCheck } from "lucide-react";
+
+export default function DashboardPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <ReactLenis root>
+        <div id="nav" data-section="nav">
+          <NavbarLayoutFloatingInline
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "Dashboard", id: "/dashboard" },
+              { name: "Inventory", id: "#inventory" },
+            ]}
+            brandName="Afya Fresh"
+            button={{ text: "Logout", href: "/" }}
+          />
+        </div>
+
+        <div id="metrics" data-section="metrics" className="pt-24">
+          <MetricCardOne
+            title="Dashboard Overview"
+            description="Real-time metrics for your trading business."
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="bento-grid"
+            useInvertedBackground={false}
+            metrics={[
+              { id: "1", value: "84%", title: "Stock Efficiency", description: "Optimized inventory turnover", icon: BarChart3 },
+              { id: "2", value: "12", title: "Low Stock Alerts", description: "Items needing restock", icon: Package },
+              { id: "3", value: "KSh 45k", title: "Monthly Revenue", description: "Total sales this month", icon: TrendingUp },
+              { id: "4", value: "98%", title: "Delivery Success", description: "On-time completion rate", icon: ShieldCheck }
+            ]}
+          />
+        </div>
+
+        <div id="inventory" data-section="inventory" className="pb-24">
+          <FeatureCardOne
+            title="Inventory Management"
+            description="Manage your stock levels, track arrivals, and monitor expiration dates."
+            animationType="slide-up"
+            textboxLayout="split"
+            gridVariant="uniform-all-items-equal"
+            useInvertedBackground={false}
+            features={[
+              { title: "Bulk Inbound", description: "Record large shipments from farms.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cr8juk&_wi=1" },
+              { title: "Stock Adjustment", description: "Update quantities for sales and waste.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvhq9y&_wi=1" },
+              { title: "Reporting", description: "Download monthly inventory performance.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jj2pyo&_wi=1" }
+            ]}
+          />
+        </div>
+
+        <div id="footer" data-section="footer">
+          <FooterSimple
+            columns={[{ title: "System", items: [{ label: "Back to Home", href: "/" }] }]}
+            bottomLeftText="© 2024 Afya Fresh Fruits. Internal Dashboard."
+            bottomRightText=""
+          />
+        </div>
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+
+export default function LoginPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="directional-hover"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="medium"
+      background="noiseDiagonalGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="medium"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Inventory", id: "/#dashboard" },
+            { name: "Sales", id: "/#products" },
+            { name: "Login", id: "/login" },
+            { name: "Contact", id: "/#contact" },
+          ]}
+          brandName="Afya Fresh"
+          button={{ text: "Get Started", href: "/#contact" }}
+        />
+      </div>
+      <main className="min-h-screen flex items-center justify-center p-8">
+        <div className="max-w-md w-full bg-card p-8 rounded-lg shadow-lg">
+          <h1 className="text-3xl font-bold mb-6">Login</h1>
+          <form className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Email/Phone</label>
+              <input type="text" className="w-full p-2 border rounded" placeholder="Enter your details" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium mb-1">Password</label>
+              <input type="password" className="w-full p-2 border rounded" placeholder="Enter password" />
+            </div>
+            <button type="submit" className="w-full p-3 bg-primary-cta text-primary-cta-text rounded font-semibold">Login</button>
+          </form>
+        </div>
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -6,13 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
 import FooterSimple from '@/components/sections/footer/FooterSimple';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
-import MediaAbout from '@/components/sections/about/MediaAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
-import { Package, TrendingUp, Users } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -32,14 +26,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingInline
       navItems={[
-        {
-          name: "Home",          id: "hero"},
-        {
-          name: "Inventory",          id: "dashboard"},
-        {
-          name: "Sales",          id: "products"},
-        {
-          name: "Contact",          id: "contact"},
+        { name: "Home", id: "hero" },
+        { name: "Inventory", id: "dashboard" },
+        { name: "Sales", id: "products" },
+        { name: "Modules", id: "modules" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Afya Fresh"
       button={{ text: "Get Started", href: "#contact" }}
@@ -48,52 +39,36 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
-        variant: "gradient-bars"}}
+      background={{ variant: "gradient-bars" }}
       title="Afya Fresh Fruits Distributors"
       description="Secure, efficient, and digital fruit trading for Marsabit County. Replacing manual records with technology for better harvests."
       leftCarouselItems={[
         { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hilwqr&_wi=1", imageAlt: "Fresh fruits distribution" },
         { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=22mhzu&_wi=1", imageAlt: "Modern market setting" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=swu1sa&_wi=1", imageAlt: "Agricultural fresh produce" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cr8juk&_wi=1", imageAlt: "Ripe tropical fruits" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvhq9y&_wi=1", imageAlt: "Fresh oranges crate" }
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=swu1sa&_wi=1", imageAlt: "Agricultural fresh produce" }
       ]}
       rightCarouselItems={[
         { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=22mhzu&_wi=2", imageAlt: "Trading management dashboard" },
         { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hilwqr&_wi=2", imageAlt: "Digital inventory tracking" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=swu1sa&_wi=2", imageAlt: "Agricultural logistics" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jj2pyo&_wi=1", imageAlt: "Fresh mangoes in crate" },
-        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ke8pvq&_wi=1", imageAlt: "Citrus fruits harvest" }
-      ]}
-      buttons={[
-        {
-          text: "Get Started",          href: "#contact"},
-      ]}
-      avatars={[
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jw6ost", alt: "Trader 1" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=55bwkj", alt: "Trader 2" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tkqka0", alt: "Trader 3" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hr9e5y", alt: "Trader 4" },
-        { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xa3yzd", alt: "Trader 5" }
-      ]}
-      avatarText="Join 500+ successful traders"
-      marqueeItems={[
-        { type: "text", text: "Quality Assured" },
-        { type: "text", text: "Direct from Farms" },
-        { type: "text", text: "Low Latency Ready" },
-        { type: "text", text: "Sustainable Trading" },
-        { type: "text", text: "Community Focused" }
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=swu1sa&_wi=2", imageAlt: "Agricultural logistics" }
       ]}
+      buttons={[{ text: "Get Started", href: "#contact" }]}
     />
   </div>
 
-  <div id="about" data-section="about">
-      <MediaAbout
+  <div id="modules" data-section="modules">
+      <FeatureCardOne
+      animationType="slide-up"
+      textboxLayout="split"
+      gridVariant="three-columns-all-equal-width"
       useInvertedBackground={true}
-      title="Modernizing Fruit Distribution"
-      description="Afya Fresh is designed to empower small-scale traders in Marsabit. We provide the tools to manage inventory, track logistics, and record sales in a simple, mobile-first interface optimized for low-bandwidth areas."
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=swu1sa&_wi=3"
+      title="Integrated Financial & Logistics Modules"
+      description="Boost efficiency with real-time financial oversight and smart delivery tracking."
+      features={[
+        { title: "Profit & Loss Report", description: "Get deep financial analytics on your daily, weekly, and monthly margins.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m1" },
+        { title: "Logistics Tracking", description: "End-to-end delivery monitoring from farm pick-up to market destination.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m2" },
+        { title: "M-Pesa Integration", description: "Automated, seamless mobile payments with real-time transaction reconciliation.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m3" }
+      ]}
     />
   </div>
 
@@ -105,82 +80,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         { title: "Inventory Tracking", description: "Digital record-keeping for stock accuracy.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cr8juk&_wi=2" },
-        { title: "Real-time Sales", description: "Log transactions instantly with auto-totals.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvhq9y&_wi=2" },
-        { title: "Logistic Tracking", description: "Monitor order delivery status from farm to market.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jj2pyo&_wi=2" }
+        { title: "Real-time Sales", description: "Log transactions instantly with auto-totals.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvhq9y&_wi=2" }
       ]}
       title="Core Management Features"
       description="Comprehensive tools for daily trading operations."
     />
   </div>
 
-  <div id="metrics" data-section="metrics">
-      <MetricCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="uniform-all-items-equal"
-      useInvertedBackground={true}
-      metrics={[
-        { id: "m1", value: "150+", title: "Inventory Items", description: "Active fruits tracked", icon: Package },
-        { id: "m2", value: "24/7", title: "System Uptime", description: "Always accessible platform", icon: TrendingUp },
-        { id: "m3", value: "45", title: "Suppliers", description: "Active in Marsabit", icon: Users }
-      ]}
-      title="Trading Analytics"
-      description="Performance insights at your fingertips."
-    />
-  </div>
-
-  <div id="products" data-section="products">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="one-large-left-three-stacked-right"
-      useInvertedBackground={false}
-      products={[
-        { id: "p1", name: "Mangoes", price: "KSh 50/unit", variant: "Fresh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=cr8juk&_wi=3" },
-        { id: "p2", name: "Oranges", price: "KSh 20/unit", variant: "Citrus", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=gvhq9y&_wi=3" },
-        { id: "p3", name: "Bananas", price: "KSh 10/unit", variant: "Standard", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jj2pyo&_wi=3" },
-        { id: "p4", name: "Watermelon", price: "KSh 150/unit", variant: "Seasonal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ke8pvq&_wi=2" },
-        { id: "p5", name: "Pawpaw", price: "KSh 80/unit", variant: "Fresh", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=b76as0" },
-        { id: "p6", name: "Avocado", price: "KSh 40/unit", variant: "Seasonal", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=revyoo" }
-      ]}
-      title="Product Overview"
-      description="Common inventory items in our distribution network."
-    />
-  </div>
-
-  <div id="pricing" data-section="pricing">
-      <PricingCardNine
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      plans={[
-        { id: "free", title: "Basic Trader", price: "Free", period: "/mo", features: ["Inventory basics", "Daily sales log", "Offline caching"], button: { text: "Register" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xwgvri", imageAlt: "fruit stock warehouse icon" },
-        { id: "pro", title: "Market Pro", price: "KSh 500", period: "/mo", features: ["Advanced reports", "Supplier management", "Priority support"], button: { text: "Subscribe" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hilwqr&_wi=3", imageAlt: "fruit stock warehouse icon" },
-        { id: "enterprise", title: "Distributor", price: "KSh 2000", period: "/mo", features: ["All market features", "Logistics tracking", "Team management"], button: { text: "Get Access" }, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=t4h894", imageAlt: "fruit stock warehouse icon" }
-      ]}
-      title="Accessible Plans"
-      description="Choose a plan designed for small-scale agricultural growth."
-    />
-  </div>
-
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardOne
-      animationType="slide-up"
-      textboxLayout="split"
-      gridVariant="one-large-left-three-stacked-right"
-      useInvertedBackground={false}
-      testimonials={[
-        { id: "1", name: "John Ouma", role: "Trader", company: "Marsabit Market", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=jw6ost" },
-        { id: "2", name: "Sarah Ahmed", role: "Supplier", company: "Marsabit Fruits", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=55bwkj" },
-        { id: "3", name: "Peter Kiptoo", role: "Trader", company: "North Traders", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=tkqka0" },
-        { id: "4", name: "Fatuma Yusuf", role: "Supplier", company: "Desert Harvest", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hr9e5y" },
-        { id: "5", name: "David Mwaniki", role: "Trader", company: "Local Trade", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xa3yzd" }
-      ]}
-      title="Trader Success Stories"
-      description="Hear how our platform helped traders grow."
-    />
-  </div>
-
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={true}
@@ -188,31 +94,18 @@ export default function LandingPage() {
       tag="Get Started"
       title="Ready to Digitize Your Trade?"
       description="Contact our team to get your account setup in Marsabit County today."
-      buttons={[
-        {
-          text: "Contact Us",          href: "mailto:support@afyafresh.ke"},
-      ]}
+      buttons={[{ text: "Contact Us", href: "mailto:support@afyafresh.ke" }]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterSimple
       columns={[
-        {
-          title: "Links",          items: [
-            { label: "Login", href: "#" },
-            { label: "About", href: "#" },
-          ],
-        },
-        {
-          title: "Legal",          items: [
-            { label: "Privacy Policy", href: "#" },
-            { label: "Terms of Service", href: "#" },
-          ],
-        },
+        { title: "Links", items: [{ label: "Login", href: "#" }, { label: "About", href: "#" }] },
+        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
       ]}
       bottomLeftText="© 2024 Afya Fresh Fruits. Built for Marsabit Traders."
-      bottomRightText="Bilingual Support: English & Swahili"
+      bottomRightText="All rights reserved."
     />
   </div>
       </ReactLenis>

src/app/styles/variables.css

@@ -15,9 +15,9 @@
   --foreground: #001a0a;
   --primary-cta: #0a7039;
   --primary-cta-text: #fafffb;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #f9f9f9;
   --secondary-cta-text: #001a0a;
-  --accent: #a8d9be;
+  --accent: #e2e2e2;
   --background-accent: #6bbf8e;
 
   /* text sizing - set by ThemeProvider */