src/app/page.tsx

@@ -32,6 +32,7 @@ export default function LandingPage() {
             { name: "Features", id: "features" },
             { name: "How It Works", id: "how-it-works" },
             { name: "Impact", id: "metrics" },
+            { name: "Stock Dashboard", id: "/stock-dashboard" },
             { name: "Contact", id: "contact" }
           ]}
           button={{ text: "Report Issue", href: "#contact" }}

src/app/stock-dashboard/page.tsx

@@ -0,0 +1,301 @@
+"use client"
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
+import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Package, TrendingUp, DollarSign, Building2, Plus, Minus } from 'lucide-react';
+import { useState } from 'react';
+
+export default function StockDashboard() {
+  const [stocks, setStocks] = useState([
+    { id: '1', symbol: 'ACME', quantity: 150, price: '$2,450.00' },
+    { id: '2', symbol: 'TECH', quantity: 280, price: '$1,890.50' },
+    { id: '3', symbol: 'GREEN', quantity: 95, price: '$3,250.00' }
+  ]);
+
+  const handleAddStock = (id: string) => {
+    setStocks(stocks.map(stock =>
+      stock.id === id ? { ...stock, quantity: stock.quantity + 1 } : stock
+    ));
+  };
+
+  const handleReduceStock = (id: string) => {
+    setStocks(stocks.map(stock =>
+      stock.id === id && stock.quantity > 0 ? { ...stock, quantity: stock.quantity - 1 } : stock
+    ));
+  };
+
+  const companyInfo = {
+    name: 'TechFlow Solutions',
+    sector: 'Technology & Innovation',
+    established: '2015',
+    employees: '2,500+',
+    headquarters: 'San Francisco, CA'
+  };
+
+  const totalValue = stocks.reduce((sum, stock) => {
+    const price = parseFloat(stock.price.replace('$', '').replace(',', ''));
+    return sum + (price * stock.quantity);
+  }, 0);
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="background-highlight"
+      borderRadius="rounded"
+      contentWidth="smallMedium"
+      sizing="largeSmallSizeMediumTitles"
+      background="fluid"
+      cardStyle="glass-depth"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="light"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarLayoutFloatingInline
+          brandName="StockManager"
+          navItems={[
+            { name: "Dashboard", id: "dashboard" },
+            { name: "Stock Items", id: "stock-items" },
+            { name: "Company Info", id: "company-info" }
+          ]}
+          button={{ text: "Export Report", href: "#" }}
+          animateOnLoad={true}
+        />
+      </div>
+
+      <div id="dashboard" data-section="dashboard">
+        <HeroLogoBillboard
+          logoText="Stock Dashboard"
+          description="Manage your inventory with real-time stock quantity display, pricing information, and streamlined add/reduce functionality."
+          buttons={[
+            { text: "View Full Report", href: "#stock-items" },
+            { text: "Export Data", href: "#" }
+          ]}
+          background={{ variant: "sparkles-gradient" }}
+          imageSrc="http://img.b2bpic.net/free-photo/close-up-woman-s-hands-reviewing-report_1139-249.jpg"
+          imageAlt="Stock management dashboard overview"
+          frameStyle="card"
+          mediaAnimation="slide-up"
+          buttonAnimation="opacity"
+        />
+      </div>
+
+      <div id="stock-items" data-section="stock-items">
+        <div className="py-20">
+          <div className="mx-auto w-content-width">
+            <div className="mb-12">
+              <h2 className="text-5xl font-light mb-4">Stock Inventory</h2>
+              <p className="text-xl text-foreground/70">Manage quantities and monitor pricing for all items</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
+              {stocks.map((stock) => {
+                const price = parseFloat(stock.price.replace('$', '').replace(',', ''));
+                const itemTotal = price * stock.quantity;
+                return (
+                  <div
+                    key={stock.id}
+                    className="rounded-theme-capped bg-card p-6 border border-foreground/10"
+                  >
+                    <div className="mb-4">
+                      <div className="flex items-center gap-2 mb-2">
+                        <Package className="w-5 h-5 text-primary-cta" />
+                        <span className="text-sm font-medium text-foreground/60">Stock Item</span>
+                      </div>
+                      <h3 className="text-2xl font-medium text-foreground">{stock.symbol}</h3>
+                    </div>
+
+                    <div className="space-y-3 mb-6">
+                      <div className="flex justify-between items-center">
+                        <span className="text-foreground/70">Quantity:</span>
+                        <span className="text-xl font-semibold text-foreground">{stock.quantity} units</span>
+                      </div>
+                      <div className="flex justify-between items-center">
+                        <span className="text-foreground/70">Unit Price:</span>
+                        <span className="text-lg font-semibold text-primary-cta">{stock.price}</span>
+                      </div>
+                      <div className="flex justify-between items-center pt-2 border-t border-foreground/10">
+                        <span className="text-foreground/70">Total Value:</span>
+                        <span className="text-lg font-bold text-primary-cta">${itemTotal.toFixed(2)}</span>
+                      </div>
+                    </div>
+
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleReduceStock(stock.id)}
+                        className="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-theme-capped bg-secondary-cta hover:opacity-80 transition-opacity text-foreground text-sm font-medium"
+                      >
+                        <Minus className="w-4 h-4" />
+                        Reduce
+                      </button>
+                      <button
+                        onClick={() => handleAddStock(stock.id)}
+                        className="flex-1 flex items-center justify-center gap-2 px-3 py-2 rounded-theme-capped bg-primary-cta hover:opacity-80 transition-opacity text-foreground text-sm font-medium"
+                      >
+                        <Plus className="w-4 h-4" />
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="rounded-theme-capped bg-gradient-to-br from-primary-cta/10 to-accent/10 p-8 border border-primary-cta/20">
+              <div className="flex items-center gap-3 mb-4">
+                <DollarSign className="w-6 h-6 text-primary-cta" />
+                <h3 className="text-2xl font-medium text-foreground">Portfolio Summary</h3>
+              </div>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+                <div>
+                  <p className="text-foreground/60 text-sm mb-1">Total Items</p>
+                  <p className="text-3xl font-bold text-foreground">{stocks.length}</p>
+                </div>
+                <div>
+                  <p className="text-foreground/60 text-sm mb-1">Total Units</p>
+                  <p className="text-3xl font-bold text-foreground">{stocks.reduce((sum, s) => sum + s.quantity, 0)}</p>
+                </div>
+                <div>
+                  <p className="text-foreground/60 text-sm mb-1">Avg Price</p>
+                  <p className="text-3xl font-bold text-primary-cta">${(stocks.reduce((sum, s) => sum + parseFloat(s.price.replace('$', '').replace(',', '')), 0) / stocks.length).toFixed(2)}</p>
+                </div>
+                <div>
+                  <p className="text-foreground/60 text-sm mb-1">Portfolio Value</p>
+                  <p className="text-3xl font-bold text-primary-cta">${totalValue.toFixed(2)}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="metrics" data-section="metrics">
+        <MetricCardFourteen
+          title="Stock Performance Overview"
+          tag="Analytics"
+          tagAnimation="slide-up"
+          metrics={[
+            {
+              id: "1",              value: stocks.reduce((sum, s) => sum + s.quantity, 0).toString(),
+              description: "Total Units in Stock"
+            },
+            {
+              id: "2",              value: `$${totalValue.toFixed(0)}`,
+              description: "Total Portfolio Value"
+            },
+            {
+              id: "3",              value: stocks.length.toString(),
+              description: "Distinct Stock Items"
+            }
+          ]}
+          metricsAnimation="slide-up"
+          useInvertedBackground={false}
+        />
+      </div>
+
+      <div id="company-info" data-section="company-info">
+        <div className="py-20">
+          <div className="mx-auto w-content-width">
+            <div className="mb-12">
+              <h2 className="text-5xl font-light mb-4">Company Information</h2>
+              <p className="text-xl text-foreground/70">Overview of our organization and operations</p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              <div className="rounded-theme-capped bg-card p-8 border border-foreground/10">
+                <div className="flex items-center gap-3 mb-6">
+                  <Building2 className="w-6 h-6 text-primary-cta" />
+                  <h3 className="text-2xl font-medium text-foreground">Company Details</h3>
+                </div>
+                <div className="space-y-4">
+                  <div>
+                    <p className="text-foreground/60 text-sm mb-1">Company Name</p>
+                    <p className="text-lg font-semibold text-foreground">{companyInfo.name}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/60 text-sm mb-1">Sector</p>
+                    <p className="text-lg font-semibold text-foreground">{companyInfo.sector}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/60 text-sm mb-1">Established</p>
+                    <p className="text-lg font-semibold text-foreground">{companyInfo.established}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/60 text-sm mb-1">Headquarters</p>
+                    <p className="text-lg font-semibold text-foreground">{companyInfo.headquarters}</p>
+                  </div>
+                  <div>
+                    <p className="text-foreground/60 text-sm mb-1">Employees</p>
+                    <p className="text-lg font-semibold text-foreground">{companyInfo.employees}</p>
+                  </div>
+                </div>
+              </div>
+
+              <div className="rounded-theme-capped bg-gradient-to-br from-accent/10 to-background-accent/10 p-8 border border-accent/20">
+                <div className="flex items-center gap-3 mb-6">
+                  <TrendingUp className="w-6 h-6 text-accent" />
+                  <h3 className="text-2xl font-medium text-foreground">Operations</h3>
+                </div>
+                <ul className="space-y-3">
+                  <li className="flex items-start gap-3">
+                    <span className="text-primary-cta font-bold">•</span>
+                    <span className="text-foreground">Real-time inventory tracking and management</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="text-primary-cta font-bold">•</span>
+                    <span className="text-foreground">Advanced pricing and valuation analytics</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="text-primary-cta font-bold">•</span>
+                    <span className="text-foreground">Seamless add and reduce stock functionality</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="text-primary-cta font-bold">•</span>
+                    <span className="text-foreground">Comprehensive portfolio reporting</span>
+                  </li>
+                  <li className="flex items-start gap-3">
+                    <span className="text-primary-cta font-bold">•</span>
+                    <span className="text-foreground">Data export and integration capabilities</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: "Dashboard",              items: [
+                { label: "Stock Items", href: "#stock-items" },
+                { label: "Analytics", href: "#metrics" },
+                { label: "Company Info", href: "#company-info" }
+              ]
+            },
+            {
+              title: "Resources",              items: [
+                { label: "Documentation", href: "#" },
+                { label: "API Guide", href: "#" },
+                { label: "Support", href: "#" }
+              ]
+            },
+            {
+              title: "Company",              items: [
+                { label: "About", href: "#" },
+                { label: "Contact", href: "#" },
+                { label: "Privacy", href: "#" }
+              ]
+            }
+          ]}
+          bottomLeftText="© 2025 StockManager. All rights reserved."
+          bottomRightText="Professional inventory management solutions"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -11,14 +11,14 @@
   --background-accent: #ffffff; */
 
   --background: #ffffff;
-  --card: #f9f9f9;
-  --foreground: #120a00e6;
-  --primary-cta: #ff8c42;
+  --card: #f0f7ff;
+  --foreground: #001f5c;
+  --primary-cta: #106EFB;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #120a00e6;
-  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --accent: #5ba3ff;
+  --background-accent: #106EFB;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);