From efa3c61d2553b3b714188b63d8fbf3a4c8d8e1f5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:35:56 +0000
Subject: [PATCH 1/6] Initial plan


From 91eb41a063ad37c84bfe0f38a567f64ea7e7a0ec Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:42:58 +0000
Subject: [PATCH 2/6] Add NEXLYN v2 design system with Tailwind CSS v4 and
 component library

Co-authored-by: vishnu-madhavan-git <237662584+vishnu-madhavan-git@users.noreply.github.com>
---
 components/icons/EmailIcon.tsx    |   7 +
 components/icons/LocationIcon.tsx |   7 +
 components/icons/PhoneIcon.tsx    |   6 +
 components/icons/WhatsAppIcon.tsx |   6 +
 components/icons/index.ts         |   5 +
 components/layout/Footer.tsx      | 157 +++++++
 components/layout/Header.tsx      |  87 ++++
 components/layout/index.ts        |   3 +
 components/ui/GlassCard.tsx       |  41 ++
 components/ui/StatusBadge.tsx     |  21 +
 components/ui/index.ts            |   3 +
 index.html                        |  86 +---
 index.tsx                         |   1 +
 package-lock.json                 | 679 ++++++++++++++++++++++++++++++
 package.json                      |  12 +-
 postcss.config.cjs                |   6 +
 services/cloudinaryService.ts     |   6 +-
 services/geminiService.ts         |   2 +-
 styles/globals.css                | 197 +++++++++
 vite-env.d.ts                     |  12 +
 vite.config.ts                    |   3 +
 21 files changed, 1258 insertions(+), 89 deletions(-)
 create mode 100644 components/icons/EmailIcon.tsx
 create mode 100644 components/icons/LocationIcon.tsx
 create mode 100644 components/icons/PhoneIcon.tsx
 create mode 100644 components/icons/WhatsAppIcon.tsx
 create mode 100644 components/icons/index.ts
 create mode 100644 components/layout/Footer.tsx
 create mode 100644 components/layout/Header.tsx
 create mode 100644 components/layout/index.ts
 create mode 100644 components/ui/GlassCard.tsx
 create mode 100644 components/ui/StatusBadge.tsx
 create mode 100644 components/ui/index.ts
 create mode 100644 postcss.config.cjs
 create mode 100644 styles/globals.css
 create mode 100644 vite-env.d.ts

diff --git a/components/icons/EmailIcon.tsx b/components/icons/EmailIcon.tsx
new file mode 100644
index 0000000..3129eaa
--- /dev/null
+++ b/components/icons/EmailIcon.tsx
@@ -0,0 +1,7 @@
+// components/icons/EmailIcon.tsx
+export const EmailIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <rect x="2" y="4" width="20" height="16" rx="2"/>
+    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
+  </svg>
+);
diff --git a/components/icons/LocationIcon.tsx b/components/icons/LocationIcon.tsx
new file mode 100644
index 0000000..b441475
--- /dev/null
+++ b/components/icons/LocationIcon.tsx
@@ -0,0 +1,7 @@
+// components/icons/LocationIcon.tsx
+export const LocationIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
+    <circle cx="12" cy="10" r="3"></circle>
+  </svg>
+);
diff --git a/components/icons/PhoneIcon.tsx b/components/icons/PhoneIcon.tsx
new file mode 100644
index 0000000..1b47087
--- /dev/null
+++ b/components/icons/PhoneIcon.tsx
@@ -0,0 +1,6 @@
+// components/icons/PhoneIcon.tsx
+export const PhoneIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
+  </svg>
+);
diff --git a/components/icons/WhatsAppIcon.tsx b/components/icons/WhatsAppIcon.tsx
new file mode 100644
index 0000000..3fb0301
--- /dev/null
+++ b/components/icons/WhatsAppIcon.tsx
@@ -0,0 +1,6 @@
+// components/icons/WhatsAppIcon.tsx
+export const WhatsAppIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
+  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
+    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.076 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
+  </svg>
+);
diff --git a/components/icons/index.ts b/components/icons/index.ts
new file mode 100644
index 0000000..0d56722
--- /dev/null
+++ b/components/icons/index.ts
@@ -0,0 +1,5 @@
+// components/icons/index.ts
+export { WhatsAppIcon } from './WhatsAppIcon';
+export { PhoneIcon } from './PhoneIcon';
+export { EmailIcon } from './EmailIcon';
+export { LocationIcon } from './LocationIcon';
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
new file mode 100644
index 0000000..36eae01
--- /dev/null
+++ b/components/layout/Footer.tsx
@@ -0,0 +1,157 @@
+// components/layout/Footer.tsx
+import { WhatsAppIcon, PhoneIcon, EmailIcon, LocationIcon } from '@/components/icons';
+
+export const Footer = () => {
+  return (
+    <footer 
+      className="border-t border-white/5 backdrop-blur-xl mt-24"
+      style={{ background: 'oklch(15% 0.05 260 / 0.9)' }}
+    >
+      <div className="max-w-7xl mx-auto px-6 py-16">
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12">
+          
+          {/* Company Info */}
+          <div>
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-[oklch(65%_0.18_190)] to-[oklch(65%_0.15_240)] 
+                              flex items-center justify-center">
+                <svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                  <circle cx="12" cy="12" r="10"/>
+                  <line x1="2" y1="12" x2="22" y2="12"/>
+                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+                </svg>
+              </div>
+              <h3 className="text-2xl font-bold" style={{ color: 'oklch(95% 0.02 260)' }}>NEXLYN</h3>
+            </div>
+            <p className="text-sm mb-6" style={{ color: 'oklch(60% 0.01 260)' }}>
+              Authorized MikroTik distributor serving UAE, GCC, and MENA regions with enterprise networking solutions.
+            </p>
+          </div>
+
+          {/* Quick Links */}
+          <div>
+            <h4 className="text-sm font-semibold mb-4 uppercase tracking-wider" 
+                style={{ color: 'oklch(80% 0.02 260)' }}>
+              Quick Links
+            </h4>
+            <ul className="space-y-3">
+              {['Products', 'Solutions', 'Partners', 'Support', 'About Us'].map(link => (
+                <li key={link}>
+                  <a href={`#${link.toLowerCase().replace(' ', '-')}`} 
+                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+                     style={{ color: 'oklch(60% 0.01 260)' }}>
+                    {link}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Products */}
+          <div>
+            <h4 className="text-sm font-semibold mb-4 uppercase tracking-wider" 
+                style={{ color: 'oklch(80% 0.02 260)' }}>
+              Products
+            </h4>
+            <ul className="space-y-3">
+              {['Routers', 'Switches', 'Wireless', 'LTE/5G', 'Accessories'].map(product => (
+                <li key={product}>
+                  <a href={`#${product.toLowerCase()}`} 
+                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+                     style={{ color: 'oklch(60% 0.01 260)' }}>
+                    {product}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          {/* Contact Info */}
+          <div>
+            <h4 className="text-sm font-semibold mb-4 uppercase tracking-wider" 
+                style={{ color: 'oklch(80% 0.02 260)' }}>
+              Contact Us
+            </h4>
+            <ul className="space-y-4">
+              <li className="flex items-start gap-3">
+                <WhatsAppIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
+                              style={{ color: 'oklch(65% 0.18 190)' }} />
+                <div>
+                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
+                    WhatsApp
+                  </p>
+                  <a href="https://wa.me/971502474482" 
+                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+                     style={{ color: 'oklch(60% 0.01 260)' }}>
+                    +971 50 247 4482
+                  </a>
+                </div>
+              </li>
+              
+              <li className="flex items-start gap-3">
+                <PhoneIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
+                           style={{ color: 'oklch(65% 0.18 190)' }} />
+                <div>
+                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
+                    Phone
+                  </p>
+                  <a href="tel:+971502474482" 
+                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+                     style={{ color: 'oklch(60% 0.01 260)' }}>
+                    +971 50 247 4482
+                  </a>
+                </div>
+              </li>
+              
+              <li className="flex items-start gap-3">
+                <EmailIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
+                           style={{ color: 'oklch(65% 0.18 190)' }} />
+                <div>
+                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
+                    Email
+                  </p>
+                  <a href="mailto:info@nexlyn.ae" 
+                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+                     style={{ color: 'oklch(60% 0.01 260)' }}>
+                    info@nexlyn.ae
+                  </a>
+                </div>
+              </li>
+              
+              <li className="flex items-start gap-3">
+                <LocationIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
+                              style={{ color: 'oklch(65% 0.18 190)' }} />
+                <div>
+                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
+                    Address
+                  </p>
+                  <p className="text-sm" style={{ color: 'oklch(60% 0.01 260)' }}>
+                    Dubai Silicon Oasis<br />
+                    Dubai, UAE
+                  </p>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        {/* Bottom Bar */}
+        <div className="mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
+          <p className="text-sm" style={{ color: 'oklch(60% 0.01 260)' }}>
+            © 2026 NEXLYN. All rights reserved.
+          </p>
+          <div className="flex items-center gap-6">
+            <a href="#privacy" className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+               style={{ color: 'oklch(60% 0.01 260)' }}>
+              Privacy Policy
+            </a>
+            <a href="#terms" className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
+               style={{ color: 'oklch(60% 0.01 260)' }}>
+              Terms of Service
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
new file mode 100644
index 0000000..dde2005
--- /dev/null
+++ b/components/layout/Header.tsx
@@ -0,0 +1,87 @@
+// components/layout/Header.tsx
+'use client';
+import { useState } from 'react';
+import { WhatsAppIcon, PhoneIcon, EmailIcon } from '@/components/icons';
+
+export const Header = () => {
+  const [activeTab, setActiveTab] = useState('overview');
+  
+  const navItems = ['Overview', 'Products', 'Solutions', 'Partners', 'Support'];
+  
+  return (
+    <header 
+      className="sticky top-0 z-50 border-b border-white/5 backdrop-blur-xl"
+      style={{ background: 'oklch(15% 0.05 260 / 0.8)' }}
+    >
+      <div className="max-w-7xl mx-auto px-6 py-4">
+        <div className="flex items-center justify-between gap-8">
+          
+          {/* Logo */}
+          <div className="flex items-center gap-3 flex-shrink-0">
+            <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-[oklch(65%_0.18_190)] to-[oklch(65%_0.15_240)] 
+                            flex items-center justify-center shadow-lg">
+              {/* Network/Globe Icon SVG */}
+              <svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                <circle cx="12" cy="12" r="10"/>
+                <line x1="2" y1="12" x2="22" y2="12"/>
+                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold tracking-tight" style={{ color: 'oklch(95% 0.02 260)' }}>NEXLYN</h1>
+              <p className="text-xs" style={{ color: 'oklch(60% 0.01 260)' }}>
+                MikroTik Distribution UAE
+              </p>
+            </div>
+          </div>
+
+          {/* Navigation */}
+          <nav className="hidden lg:flex items-center gap-2">
+            {navItems.map(tab => (
+              <button
+                key={tab}
+                onClick={() => setActiveTab(tab.toLowerCase())}
+                className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
+                  activeTab === tab.toLowerCase()
+                    ? 'bg-white/10 text-[oklch(95%_0.02_260)]'
+                    : 'text-[oklch(60%_0.01_260)] hover:text-[oklch(95%_0.02_260)] hover:bg-white/5'
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </nav>
+
+          {/* Contact Actions */}
+          <div className="flex items-center gap-3">
+            <a 
+              href="https://wa.me/971502474482" 
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-2 px-4 py-2 rounded-xl border transition-all
+                         bg-[oklch(65%_0.18_190/0.1)] border-[oklch(65%_0.18_190/0.2)]
+                         hover:bg-[oklch(65%_0.18_190/0.2)] text-[oklch(65%_0.18_190)]"
+            >
+              <WhatsAppIcon className="w-4 h-4" />
+              <span className="text-sm font-medium hidden sm:inline">WhatsApp</span>
+            </a>
+            
+            <a 
+              href="tel:+971502474482"
+              className="p-2 hover:bg-white/5 rounded-lg transition-colors"
+            >
+              <PhoneIcon className="w-5 h-5" style={{ color: 'oklch(60% 0.01 260)' }} />
+            </a>
+            
+            <a 
+              href="mailto:info@nexlyn.ae"
+              className="p-2 hover:bg-white/5 rounded-lg transition-colors"
+            >
+              <EmailIcon className="w-5 h-5" style={{ color: 'oklch(60% 0.01 260)' }} />
+            </a>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/components/layout/index.ts b/components/layout/index.ts
new file mode 100644
index 0000000..4fa30e4
--- /dev/null
+++ b/components/layout/index.ts
@@ -0,0 +1,3 @@
+// components/layout/index.ts
+export { Header } from './Header';
+export { Footer } from './Footer';
diff --git a/components/ui/GlassCard.tsx b/components/ui/GlassCard.tsx
new file mode 100644
index 0000000..f9bec6a
--- /dev/null
+++ b/components/ui/GlassCard.tsx
@@ -0,0 +1,41 @@
+// components/ui/GlassCard.tsx
+import { ReactNode } from 'react';
+
+interface GlassCardProps {
+  children: ReactNode;
+  className?: string;
+}
+
+export const GlassCard = ({ children, className = '' }: GlassCardProps) => {
+  return (
+    <div 
+      className={`relative rounded-3xl border border-white/10 p-6 backdrop-blur-xl ${className}`}
+      style={{
+        background: 'oklch(20% 0.08 260 / 0.65)',
+        boxShadow: `
+          0 8px 32px -4px oklch(0% 0 0 / 0.4),
+          inset 0 1px 0 0 oklch(100% 0 0 / 0.1)
+        `,
+        borderTopColor: 'oklch(100% 0 0 / 0.15)',
+        borderLeftColor: 'oklch(100% 0 0 / 0.08)',
+        borderBottomColor: 'oklch(0% 0 0 / 0.2)',
+        borderRightColor: 'oklch(0% 0 0 / 0.2)',
+      }}
+    >
+      {/* Noise Texture Overlay */}
+      <div 
+        className="absolute inset-0 rounded-3xl opacity-[0.035] pointer-events-none"
+        style={{
+          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E")`,
+          backgroundSize: '128px',
+          mixBlendMode: 'overlay',
+        }}
+      />
+      
+      {/* Content */}
+      <div className="relative z-10">
+        {children}
+      </div>
+    </div>
+  );
+};
diff --git a/components/ui/StatusBadge.tsx b/components/ui/StatusBadge.tsx
new file mode 100644
index 0000000..5ea2e13
--- /dev/null
+++ b/components/ui/StatusBadge.tsx
@@ -0,0 +1,21 @@
+// components/ui/StatusBadge.tsx
+type StatusType = 'delivered' | 'pending' | 'in-transit' | 'delayed';
+
+interface StatusBadgeProps {
+  status: StatusType;
+  label: string;
+}
+
+const statusStyles = {
+  delivered: 'bg-[oklch(70%_0.18_140/0.1)] text-[oklch(70%_0.18_140)] border-[oklch(70%_0.18_140/0.2)]',
+  pending: 'bg-[oklch(65%_0.15_240/0.1)] text-[oklch(65%_0.15_240)] border-[oklch(65%_0.15_240/0.2)]',
+  'in-transit': 'bg-[oklch(65%_0.18_190/0.1)] text-[oklch(65%_0.18_190)] border-[oklch(65%_0.18_190/0.2)]',
+  delayed: 'bg-[oklch(60%_0.2_25/0.1)] text-[oklch(60%_0.2_25)] border-[oklch(60%_0.2_25/0.2)]',
+};
+
+export const StatusBadge = ({ status, label }: StatusBadgeProps) => (
+  <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border ${statusStyles[status]}`}>
+    <span className="w-1.5 h-1.5 rounded-full bg-current" />
+    {label}
+  </span>
+);
diff --git a/components/ui/index.ts b/components/ui/index.ts
new file mode 100644
index 0000000..855dc50
--- /dev/null
+++ b/components/ui/index.ts
@@ -0,0 +1,3 @@
+// components/ui/index.ts
+export { GlassCard } from './GlassCard';
+export { StatusBadge } from './StatusBadge';
diff --git a/index.html b/index.html
index c7b9406..6ea14d7 100644
--- a/index.html
+++ b/index.html
@@ -3,46 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Nexlyn | MikroTik® Master Distribution</title>
-    <script src="https://cdn.tailwindcss.com"></script>
+    <title>NEXLYN | MikroTik® Master Distribution UAE</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
-    <script>
-      tailwind.config = {
-        darkMode: 'class',
-        theme: {
-          extend: {
-            colors: {
-              nexlyn: {
-                DEFAULT: '#E60026',
-                glow: '#FF1A3D',
-                dark: '#1A0005',
-              },
-            },
-            fontFamily: {
-              sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
-            },
-            animation: {
-              'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
-              'data-flow': 'data-flow 20s linear infinite',
-              'sonar': 'sonar 2s cubic-bezier(0, 0, 0.2, 1) infinite',
-            },
-            keyframes: {
-              'data-flow': {
-                '0%': { transform: 'translateY(-100%)' },
-                '100%': { transform: 'translateY(100%)' },
-              },
-              'sonar': {
-                '0%': { transform: 'scale(0.95)', opacity: '0.8' },
-                '70%': { transform: 'scale(1.3)', opacity: '0' },
-                '100%': { transform: 'scale(0.95)', opacity: '0' },
-              }
-            }
-          },
-        },
-      }
-    </script>
     <style>
         :root {
             --bg-grid: rgba(230, 0, 38, 0.04);
@@ -65,24 +29,6 @@
             transition: background-color 0.5s ease;
         }
         
-        .bg-grid {
-            position: fixed;
-            inset: 0;
-            z-index: -1;
-            background-image: 
-                linear-gradient(var(--bg-grid) 1px, transparent 1px),
-                linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
-            background-size: 80px 80px;
-        }
-
-        .bg-dots {
-            position: fixed;
-            inset: 0;
-            z-index: -1;
-            background-image: radial-gradient(var(--bg-dots) 1.5px, transparent 1.5px);
-            background-size: 20px 20px;
-        }
-
         .streamer {
             position: fixed;
             top: 0;
@@ -93,23 +39,11 @@
             z-index: -1;
         }
 
-        .glass-panel {
-            background: rgba(255, 255, 255, 0.02);
-            backdrop-filter: blur(20px);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-        }
-        
-        .dark .glass-panel {
-            background: rgba(10, 10, 10, 0.7);
-            border: 1px solid rgba(255, 255, 255, 0.05);
-        }
-
-        .text-glow {
-            text-shadow: 0 0 15px rgba(230, 0, 38, 0.3);
+        @keyframes data-flow {
+            0% { transform: translateY(-100%); }
+            100% { transform: translateY(100%); }
         }
 
-        .no-scrollbar::-webkit-scrollbar { display: none; }
-
         @keyframes heroIn {
             0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
             100% { opacity: 1; transform: translateY(0); filter: blur(0); }
@@ -126,17 +60,6 @@
             animation: heroOut 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
         }
     </style>
-<script type="importmap">
-{
-  "imports": {
-    "react": "https://esm.sh/react@^19.2.3",
-    "react/": "https://esm.sh/react@^19.2.3/",
-    "@google/genai": "https://esm.sh/@google/genai@^1.37.0",
-    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
-    "recharts": "https://esm.sh/recharts@^3.6.0"
-  }
-}
-</script>
 </head>
 <body>
     <div class="bg-grid"></div>
@@ -145,5 +68,6 @@
     <div class="streamer" style="left: 50%; animation-delay: 5s;"></div>
     <div class="streamer" style="left: 80%; animation-delay: 10s;"></div>
     <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.tsx b/index.tsx
index aaa0c6e..6d97dce 100644
--- a/index.tsx
+++ b/index.tsx
@@ -2,6 +2,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import './styles/globals.css';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
diff --git a/package-lock.json b/package-lock.json
index d11406c..9e6b258 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,29 @@
         "recharts": "^3.6.0"
       },
       "devDependencies": {
+        "@tailwindcss/postcss": "^4.1.18",
         "@types/node": "^22.14.0",
         "@vitejs/plugin-react": "^5.0.0",
+        "autoprefixer": "^10.4.23",
+        "postcss": "^8.5.6",
+        "tailwindcss": "^4.1.18",
         "typescript": "~5.8.2",
         "vite": "^6.2.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.28.6",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.28.6.tgz",
@@ -1379,6 +1396,277 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
+      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.18"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1587,6 +1875,43 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -1903,6 +2228,16 @@
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -1931,6 +2266,20 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.4",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
+      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/es-toolkit": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
@@ -2074,6 +2423,20 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2175,6 +2538,13 @@
         "node": ">=14"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/gtoken": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-8.0.0.tgz",
@@ -2250,6 +2620,16 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2313,6 +2693,267 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -2341,6 +2982,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -2521,6 +3172,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/protobufjs": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
@@ -2892,6 +3550,27 @@
         "node": ">=8"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
diff --git a/package.json b/package.json
index 873fcee..9a535e6 100644
--- a/package.json
+++ b/package.json
@@ -9,16 +9,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "react": "^19.2.3",
+    "@cloudinary/react": "^1.13.0",
+    "@cloudinary/url-gen": "^1.19.0",
     "@google/genai": "^1.37.0",
+    "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "recharts": "^3.6.0",
-    "@cloudinary/react": "^1.13.0",
-    "@cloudinary/url-gen": "^1.19.0"
+    "recharts": "^3.6.0"
   },
   "devDependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
+    "autoprefixer": "^10.4.23",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   }
diff --git a/postcss.config.cjs b/postcss.config.cjs
new file mode 100644
index 0000000..b4bee66
--- /dev/null
+++ b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+    autoprefixer: {},
+  },
+};
diff --git a/services/cloudinaryService.ts b/services/cloudinaryService.ts
index e292f97..398af09 100644
--- a/services/cloudinaryService.ts
+++ b/services/cloudinaryService.ts
@@ -1,10 +1,10 @@
 // services/cloudinaryService.ts
 import { Cloudinary } from '@cloudinary/url-gen';
 
-// These will be set via environment variables
+// These will be set via environment variables - using import.meta.env for Vite
 export const CLOUDINARY_CONFIG = {
-  cloudName: process.env.VITE_CLOUDINARY_CLOUD_NAME || 'demo',
-  uploadPreset: process.env.VITE_CLOUDINARY_UPLOAD_PRESET || 'unsigned_upload'
+  cloudName: import.meta.env.VITE_CLOUDINARY_CLOUD_NAME || 'demo',
+  uploadPreset: import.meta.env.VITE_CLOUDINARY_UPLOAD_PRESET || 'unsigned_upload'
 };
 
 // Warn if using default values
diff --git a/services/geminiService.ts b/services/geminiService.ts
index 2848bc8..3d4edca 100644
--- a/services/geminiService.ts
+++ b/services/geminiService.ts
@@ -24,7 +24,7 @@ If a user asks about pricing, direct them to use the "B2B Quote" or WhatsApp but
 
 export class GeminiService {
   private getAI() {
-    return new GoogleGenAI({ apiKey: process.env.API_KEY });
+    return new GoogleGenAI({ apiKey: import.meta.env.VITE_API_KEY || import.meta.env.API_KEY || '' });
   }
 
   async *streamTech(prompt: string) {
diff --git a/styles/globals.css b/styles/globals.css
new file mode 100644
index 0000000..da17fdf
--- /dev/null
+++ b/styles/globals.css
@@ -0,0 +1,197 @@
+/* styles/globals.css - Design System Foundation */
+
+@import "tailwindcss";
+
+/* Custom Theme Configuration for Tailwind v4 */
+@theme {
+  /* Navy Scale - Authority & Trust (Hue 260) */
+  --color-navy-950: oklch(15% 0.05 260);
+  --color-navy-900: oklch(20% 0.08 260);
+  --color-navy-800: oklch(30% 0.1 260);
+  --color-navy-700: oklch(40% 0.12 260);
+
+  /* Teal Scale - Action & Growth (Hue 190) */
+  --color-teal-500: oklch(65% 0.18 190);
+  --color-teal-400: oklch(72% 0.15 190);
+  --color-teal-300: oklch(80% 0.12 190);
+
+  /* NEXLYN Brand Color */
+  --color-nexlyn: #E60026;
+  --color-nexlyn-glow: #FF1A3D;
+  --color-nexlyn-dark: #1A0005;
+}
+
+/* OKLCH Color Variables (CSS Custom Properties) */
+:root {
+  /* Text Colors */
+  --color-text-primary: oklch(95% 0.02 260);
+  --color-text-secondary: oklch(80% 0.02 260);
+  --color-text-tertiary: oklch(60% 0.01 260);
+  --color-text-muted: oklch(50% 0.01 260);
+
+  /* Status Colors */
+  --color-success: oklch(70% 0.18 140);
+  --color-warning: oklch(65% 0.18 70);
+  --color-error: oklch(60% 0.2 25);
+  --color-info: oklch(65% 0.15 240);
+
+  /* Spacing (8pt Grid) */
+  --space-0: 0px;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --space-16: 64px;
+  --space-24: 96px;
+  --space-32: 128px;
+}
+
+/* Base layer styles */
+@layer base {
+  html {
+    font-family: var(--font-geist-sans), 'Plus Jakarta Sans', 'Inter', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  body {
+    background-color: var(--color-navy-950);
+    color: var(--color-text-primary);
+  }
+
+  /* Tabular numerals for prices and numbers */
+  .tabular-nums {
+    font-variant-numeric: tabular-nums;
+  }
+}
+
+/* Typography Scale */
+@layer components {
+  /* Display (Headings - Tight tracking) */
+  .text-display-xl {
+    font-size: 48px;
+    line-height: 56px;
+    letter-spacing: -0.03em;
+    font-weight: 700;
+  }
+
+  .text-display-lg {
+    font-size: 32px;
+    line-height: 40px;
+    letter-spacing: -0.02em;
+    font-weight: 600;
+  }
+
+  .text-display-md {
+    font-size: 28px;
+    line-height: 36px;
+    letter-spacing: -0.02em;
+    font-weight: 600;
+  }
+
+  .text-display-sm {
+    font-size: 24px;
+    line-height: 32px;
+    letter-spacing: -0.015em;
+    font-weight: 600;
+  }
+
+  /* Body (Reading content) */
+  .text-body-lg {
+    font-size: 18px;
+    line-height: 28px;
+    letter-spacing: 0;
+    font-weight: 400;
+  }
+
+  .text-body-base {
+    font-size: 16px;
+    line-height: 24px;
+    letter-spacing: 0;
+    font-weight: 400;
+  }
+
+  .text-body-sm {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0;
+    font-weight: 400;
+  }
+
+  /* UI/Labels (Looser tracking for small sizes) */
+  .text-ui-sm {
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.01em;
+    font-weight: 500;
+  }
+
+  .text-ui-xs {
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.02em;
+    font-weight: 500;
+  }
+
+  /* Monospace (Technical data - SKUs, IDs) */
+  .text-mono-sm {
+    font-family: var(--font-geist-mono), monospace;
+    font-size: 13px;
+    line-height: 20px;
+    letter-spacing: 0;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .text-mono-xs {
+    font-family: var(--font-geist-mono), monospace;
+    font-size: 11px;
+    line-height: 16px;
+    letter-spacing: 0;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Deep Glass Panel */
+  .glass-panel {
+    background: oklch(20% 0.08 260 / 0.65);
+    backdrop-filter: blur(20px);
+    border: 1px solid oklch(100% 0 0 / 0.1);
+  }
+
+  /* Background patterns */
+  .bg-grid {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background-image: 
+      linear-gradient(oklch(65% 0.18 190 / 0.04) 1px, transparent 1px),
+      linear-gradient(90deg, oklch(65% 0.18 190 / 0.04) 1px, transparent 1px);
+    background-size: 80px 80px;
+  }
+
+  .bg-dots {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    background-image: radial-gradient(oklch(65% 0.18 190 / 0.08) 1.5px, transparent 1.5px);
+    background-size: 20px 20px;
+  }
+}
+
+/* Utility classes */
+@layer utilities {
+  .text-glow {
+    text-shadow: 0 0 15px oklch(65% 0.18 190 / 0.3);
+  }
+
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+}
diff --git a/vite-env.d.ts b/vite-env.d.ts
new file mode 100644
index 0000000..e695336
--- /dev/null
+++ b/vite-env.d.ts
@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_CLOUDINARY_CLOUD_NAME: string;
+  readonly VITE_CLOUDINARY_UPLOAD_PRESET: string;
+  readonly VITE_API_KEY: string;
+  readonly API_KEY: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 8912669..00e6a7c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,9 @@ export default defineConfig(({ mode }) => {
       port: 3000,
       host: '0.0.0.0',
     },
+    css: {
+      postcss: './postcss.config.js',
+    },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, '.'),

From a860ee7a50448cd2b10b60f6a8d5cdbb54600200 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:45:13 +0000
Subject: [PATCH 3/6] Fix code review issues: correct postcss config path and
 remove Next.js directive

Co-authored-by: vishnu-madhavan-git <237662584+vishnu-madhavan-git@users.noreply.github.com>
---
 components/layout/Header.tsx | 1 -
 vite.config.ts               | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index dde2005..2d2c741 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -1,5 +1,4 @@
 // components/layout/Header.tsx
-'use client';
 import { useState } from 'react';
 import { WhatsAppIcon, PhoneIcon, EmailIcon } from '@/components/icons';
 
diff --git a/vite.config.ts b/vite.config.ts
index 00e6a7c..12dd6f9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -13,7 +13,7 @@ export default defineConfig(({ mode }) => {
       host: '0.0.0.0',
     },
     css: {
-      postcss: './postcss.config.js',
+      postcss: './postcss.config.cjs',
     },
     resolve: {
       alias: {

From 633607f92dc68d358de0951e91c159edf8f67c46 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 07:51:40 +0000
Subject: [PATCH 4/6] Add Vercel deployment configuration

Co-authored-by: vishnu-madhavan-git <237662584+vishnu-madhavan-git@users.noreply.github.com>
---
 vercel.json | 12 ++++++++++++
 1 file changed, 12 insertions(+)
 create mode 100644 vercel.json

diff --git a/vercel.json b/vercel.json
new file mode 100644
index 0000000..0dfe8e8
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "buildCommand": "npm run build",
+  "outputDirectory": "dist",
+  "framework": "vite",
+  "rewrites": [
+    {
+      "source": "/(.*)",
+      "destination": "/index.html"
+    }
+  ]
+}

From 0997cf8893303dec3afd2ab07509d52ef2c1d0d8 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 08:53:28 +0000
Subject: [PATCH 5/6] Add Node.js version requirements for Vercel deployment

Co-authored-by: vishnu-madhavan-git <237662584+vishnu-madhavan-git@users.noreply.github.com>
---
 .nvmrc       | 1 +
 package.json | 3 +++
 2 files changed, 4 insertions(+)
 create mode 100644 .nvmrc

diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 0000000..209e3ef
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+20
diff --git a/package.json b/package.json
index 9a535e6..45ad48f 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "dev": "vite",
     "build": "vite build",

From 7c6d7d803b10b3a5c945119b5670bf748d068093 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sat, 24 Jan 2026 09:00:41 +0000
Subject: [PATCH 6/6] Rollback design changes, keep deployment config and Vite
 bug fixes

Co-authored-by: vishnu-madhavan-git <237662584+vishnu-madhavan-git@users.noreply.github.com>
---
 components/icons/EmailIcon.tsx    |   7 -
 components/icons/LocationIcon.tsx |   7 -
 components/icons/PhoneIcon.tsx    |   6 -
 components/icons/WhatsAppIcon.tsx |   6 -
 components/icons/index.ts         |   5 -
 components/layout/Footer.tsx      | 157 -------
 components/layout/Header.tsx      |  86 ----
 components/layout/index.ts        |   3 -
 components/ui/GlassCard.tsx       |  41 --
 components/ui/StatusBadge.tsx     |  21 -
 components/ui/index.ts            |   3 -
 index.html                        |  86 +++-
 index.tsx                         |   1 -
 package-lock.json                 | 692 +-----------------------------
 package.json                      |   4 -
 postcss.config.cjs                |   6 -
 styles/globals.css                | 197 ---------
 vite.config.ts                    |   3 -
 18 files changed, 89 insertions(+), 1242 deletions(-)
 delete mode 100644 components/icons/EmailIcon.tsx
 delete mode 100644 components/icons/LocationIcon.tsx
 delete mode 100644 components/icons/PhoneIcon.tsx
 delete mode 100644 components/icons/WhatsAppIcon.tsx
 delete mode 100644 components/icons/index.ts
 delete mode 100644 components/layout/Footer.tsx
 delete mode 100644 components/layout/Header.tsx
 delete mode 100644 components/layout/index.ts
 delete mode 100644 components/ui/GlassCard.tsx
 delete mode 100644 components/ui/StatusBadge.tsx
 delete mode 100644 components/ui/index.ts
 delete mode 100644 postcss.config.cjs
 delete mode 100644 styles/globals.css

diff --git a/components/icons/EmailIcon.tsx b/components/icons/EmailIcon.tsx
deleted file mode 100644
index 3129eaa..0000000
--- a/components/icons/EmailIcon.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// components/icons/EmailIcon.tsx
-export const EmailIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <rect x="2" y="4" width="20" height="16" rx="2"/>
-    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
-  </svg>
-);
diff --git a/components/icons/LocationIcon.tsx b/components/icons/LocationIcon.tsx
deleted file mode 100644
index b441475..0000000
--- a/components/icons/LocationIcon.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// components/icons/LocationIcon.tsx
-export const LocationIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
-    <circle cx="12" cy="10" r="3"></circle>
-  </svg>
-);
diff --git a/components/icons/PhoneIcon.tsx b/components/icons/PhoneIcon.tsx
deleted file mode 100644
index 1b47087..0000000
--- a/components/icons/PhoneIcon.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// components/icons/PhoneIcon.tsx
-export const PhoneIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
-  </svg>
-);
diff --git a/components/icons/WhatsAppIcon.tsx b/components/icons/WhatsAppIcon.tsx
deleted file mode 100644
index 3fb0301..0000000
--- a/components/icons/WhatsAppIcon.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// components/icons/WhatsAppIcon.tsx
-export const WhatsAppIcon = ({ className = "w-5 h-5" }: { className?: string }) => (
-  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
-    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.67-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.076 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
-  </svg>
-);
diff --git a/components/icons/index.ts b/components/icons/index.ts
deleted file mode 100644
index 0d56722..0000000
--- a/components/icons/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-// components/icons/index.ts
-export { WhatsAppIcon } from './WhatsAppIcon';
-export { PhoneIcon } from './PhoneIcon';
-export { EmailIcon } from './EmailIcon';
-export { LocationIcon } from './LocationIcon';
diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx
deleted file mode 100644
index 36eae01..0000000
--- a/components/layout/Footer.tsx
+++ /dev/null
@@ -1,157 +0,0 @@
-// components/layout/Footer.tsx
-import { WhatsAppIcon, PhoneIcon, EmailIcon, LocationIcon } from '@/components/icons';
-
-export const Footer = () => {
-  return (
-    <footer 
-      className="border-t border-white/5 backdrop-blur-xl mt-24"
-      style={{ background: 'oklch(15% 0.05 260 / 0.9)' }}
-    >
-      <div className="max-w-7xl mx-auto px-6 py-16">
-        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12">
-          
-          {/* Company Info */}
-          <div>
-            <div className="flex items-center gap-3 mb-6">
-              <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-[oklch(65%_0.18_190)] to-[oklch(65%_0.15_240)] 
-                              flex items-center justify-center">
-                <svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                  <circle cx="12" cy="12" r="10"/>
-                  <line x1="2" y1="12" x2="22" y2="12"/>
-                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-                </svg>
-              </div>
-              <h3 className="text-2xl font-bold" style={{ color: 'oklch(95% 0.02 260)' }}>NEXLYN</h3>
-            </div>
-            <p className="text-sm mb-6" style={{ color: 'oklch(60% 0.01 260)' }}>
-              Authorized MikroTik distributor serving UAE, GCC, and MENA regions with enterprise networking solutions.
-            </p>
-          </div>
-
-          {/* Quick Links */}
-          <div>
-            <h4 className="text-sm font-semibold mb-4 uppercase tracking-wider" 
-                style={{ color: 'oklch(80% 0.02 260)' }}>
-              Quick Links
-            </h4>
-            <ul className="space-y-3">
-              {['Products', 'Solutions', 'Partners', 'Support', 'About Us'].map(link => (
-                <li key={link}>
-                  <a href={`#${link.toLowerCase().replace(' ', '-')}`} 
-                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-                     style={{ color: 'oklch(60% 0.01 260)' }}>
-                    {link}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Products */}
-          <div>
-            <h4 className="text-sm font-semibold mb-4 uppercase tracking-wider" 
-                style={{ color: 'oklch(80% 0.02 260)' }}>
-              Products
-            </h4>
-            <ul className="space-y-3">
-              {['Routers', 'Switches', 'Wireless', 'LTE/5G', 'Accessories'].map(product => (
-                <li key={product}>
-                  <a href={`#${product.toLowerCase()}`} 
-                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-                     style={{ color: 'oklch(60% 0.01 260)' }}>
-                    {product}
-                  </a>
-                </li>
-              ))}
-            </ul>
-          </div>
-
-          {/* Contact Info */}
-          <div>
-            <h4 className="text-sm font-semibold mb-4 uppercase tracking-wider" 
-                style={{ color: 'oklch(80% 0.02 260)' }}>
-              Contact Us
-            </h4>
-            <ul className="space-y-4">
-              <li className="flex items-start gap-3">
-                <WhatsAppIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
-                              style={{ color: 'oklch(65% 0.18 190)' }} />
-                <div>
-                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
-                    WhatsApp
-                  </p>
-                  <a href="https://wa.me/971502474482" 
-                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-                     style={{ color: 'oklch(60% 0.01 260)' }}>
-                    +971 50 247 4482
-                  </a>
-                </div>
-              </li>
-              
-              <li className="flex items-start gap-3">
-                <PhoneIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
-                           style={{ color: 'oklch(65% 0.18 190)' }} />
-                <div>
-                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
-                    Phone
-                  </p>
-                  <a href="tel:+971502474482" 
-                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-                     style={{ color: 'oklch(60% 0.01 260)' }}>
-                    +971 50 247 4482
-                  </a>
-                </div>
-              </li>
-              
-              <li className="flex items-start gap-3">
-                <EmailIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
-                           style={{ color: 'oklch(65% 0.18 190)' }} />
-                <div>
-                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
-                    Email
-                  </p>
-                  <a href="mailto:info@nexlyn.ae" 
-                     className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-                     style={{ color: 'oklch(60% 0.01 260)' }}>
-                    info@nexlyn.ae
-                  </a>
-                </div>
-              </li>
-              
-              <li className="flex items-start gap-3">
-                <LocationIcon className="w-5 h-5 flex-shrink-0 mt-0.5" 
-                              style={{ color: 'oklch(65% 0.18 190)' }} />
-                <div>
-                  <p className="text-sm" style={{ color: 'oklch(80% 0.02 260)' }}>
-                    Address
-                  </p>
-                  <p className="text-sm" style={{ color: 'oklch(60% 0.01 260)' }}>
-                    Dubai Silicon Oasis<br />
-                    Dubai, UAE
-                  </p>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="mt-12 pt-8 border-t border-white/5 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-sm" style={{ color: 'oklch(60% 0.01 260)' }}>
-            © 2026 NEXLYN. All rights reserved.
-          </p>
-          <div className="flex items-center gap-6">
-            <a href="#privacy" className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-               style={{ color: 'oklch(60% 0.01 260)' }}>
-              Privacy Policy
-            </a>
-            <a href="#terms" className="text-sm hover:text-[oklch(65%_0.18_190)] transition-colors"
-               style={{ color: 'oklch(60% 0.01 260)' }}>
-              Terms of Service
-            </a>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
-};
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
deleted file mode 100644
index 2d2c741..0000000
--- a/components/layout/Header.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-// components/layout/Header.tsx
-import { useState } from 'react';
-import { WhatsAppIcon, PhoneIcon, EmailIcon } from '@/components/icons';
-
-export const Header = () => {
-  const [activeTab, setActiveTab] = useState('overview');
-  
-  const navItems = ['Overview', 'Products', 'Solutions', 'Partners', 'Support'];
-  
-  return (
-    <header 
-      className="sticky top-0 z-50 border-b border-white/5 backdrop-blur-xl"
-      style={{ background: 'oklch(15% 0.05 260 / 0.8)' }}
-    >
-      <div className="max-w-7xl mx-auto px-6 py-4">
-        <div className="flex items-center justify-between gap-8">
-          
-          {/* Logo */}
-          <div className="flex items-center gap-3 flex-shrink-0">
-            <div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-[oklch(65%_0.18_190)] to-[oklch(65%_0.15_240)] 
-                            flex items-center justify-center shadow-lg">
-              {/* Network/Globe Icon SVG */}
-              <svg className="w-6 h-6 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <circle cx="12" cy="12" r="10"/>
-                <line x1="2" y1="12" x2="22" y2="12"/>
-                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
-              </svg>
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold tracking-tight" style={{ color: 'oklch(95% 0.02 260)' }}>NEXLYN</h1>
-              <p className="text-xs" style={{ color: 'oklch(60% 0.01 260)' }}>
-                MikroTik Distribution UAE
-              </p>
-            </div>
-          </div>
-
-          {/* Navigation */}
-          <nav className="hidden lg:flex items-center gap-2">
-            {navItems.map(tab => (
-              <button
-                key={tab}
-                onClick={() => setActiveTab(tab.toLowerCase())}
-                className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
-                  activeTab === tab.toLowerCase()
-                    ? 'bg-white/10 text-[oklch(95%_0.02_260)]'
-                    : 'text-[oklch(60%_0.01_260)] hover:text-[oklch(95%_0.02_260)] hover:bg-white/5'
-                }`}
-              >
-                {tab}
-              </button>
-            ))}
-          </nav>
-
-          {/* Contact Actions */}
-          <div className="flex items-center gap-3">
-            <a 
-              href="https://wa.me/971502474482" 
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-2 px-4 py-2 rounded-xl border transition-all
-                         bg-[oklch(65%_0.18_190/0.1)] border-[oklch(65%_0.18_190/0.2)]
-                         hover:bg-[oklch(65%_0.18_190/0.2)] text-[oklch(65%_0.18_190)]"
-            >
-              <WhatsAppIcon className="w-4 h-4" />
-              <span className="text-sm font-medium hidden sm:inline">WhatsApp</span>
-            </a>
-            
-            <a 
-              href="tel:+971502474482"
-              className="p-2 hover:bg-white/5 rounded-lg transition-colors"
-            >
-              <PhoneIcon className="w-5 h-5" style={{ color: 'oklch(60% 0.01 260)' }} />
-            </a>
-            
-            <a 
-              href="mailto:info@nexlyn.ae"
-              className="p-2 hover:bg-white/5 rounded-lg transition-colors"
-            >
-              <EmailIcon className="w-5 h-5" style={{ color: 'oklch(60% 0.01 260)' }} />
-            </a>
-          </div>
-        </div>
-      </div>
-    </header>
-  );
-};
diff --git a/components/layout/index.ts b/components/layout/index.ts
deleted file mode 100644
index 4fa30e4..0000000
--- a/components/layout/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// components/layout/index.ts
-export { Header } from './Header';
-export { Footer } from './Footer';
diff --git a/components/ui/GlassCard.tsx b/components/ui/GlassCard.tsx
deleted file mode 100644
index f9bec6a..0000000
--- a/components/ui/GlassCard.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-// components/ui/GlassCard.tsx
-import { ReactNode } from 'react';
-
-interface GlassCardProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export const GlassCard = ({ children, className = '' }: GlassCardProps) => {
-  return (
-    <div 
-      className={`relative rounded-3xl border border-white/10 p-6 backdrop-blur-xl ${className}`}
-      style={{
-        background: 'oklch(20% 0.08 260 / 0.65)',
-        boxShadow: `
-          0 8px 32px -4px oklch(0% 0 0 / 0.4),
-          inset 0 1px 0 0 oklch(100% 0 0 / 0.1)
-        `,
-        borderTopColor: 'oklch(100% 0 0 / 0.15)',
-        borderLeftColor: 'oklch(100% 0 0 / 0.08)',
-        borderBottomColor: 'oklch(0% 0 0 / 0.2)',
-        borderRightColor: 'oklch(0% 0 0 / 0.2)',
-      }}
-    >
-      {/* Noise Texture Overlay */}
-      <div 
-        className="absolute inset-0 rounded-3xl opacity-[0.035] pointer-events-none"
-        style={{
-          backgroundImage: `url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' /%3E%3C/svg%3E")`,
-          backgroundSize: '128px',
-          mixBlendMode: 'overlay',
-        }}
-      />
-      
-      {/* Content */}
-      <div className="relative z-10">
-        {children}
-      </div>
-    </div>
-  );
-};
diff --git a/components/ui/StatusBadge.tsx b/components/ui/StatusBadge.tsx
deleted file mode 100644
index 5ea2e13..0000000
--- a/components/ui/StatusBadge.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-// components/ui/StatusBadge.tsx
-type StatusType = 'delivered' | 'pending' | 'in-transit' | 'delayed';
-
-interface StatusBadgeProps {
-  status: StatusType;
-  label: string;
-}
-
-const statusStyles = {
-  delivered: 'bg-[oklch(70%_0.18_140/0.1)] text-[oklch(70%_0.18_140)] border-[oklch(70%_0.18_140/0.2)]',
-  pending: 'bg-[oklch(65%_0.15_240/0.1)] text-[oklch(65%_0.15_240)] border-[oklch(65%_0.15_240/0.2)]',
-  'in-transit': 'bg-[oklch(65%_0.18_190/0.1)] text-[oklch(65%_0.18_190)] border-[oklch(65%_0.18_190/0.2)]',
-  delayed: 'bg-[oklch(60%_0.2_25/0.1)] text-[oklch(60%_0.2_25)] border-[oklch(60%_0.2_25/0.2)]',
-};
-
-export const StatusBadge = ({ status, label }: StatusBadgeProps) => (
-  <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium border ${statusStyles[status]}`}>
-    <span className="w-1.5 h-1.5 rounded-full bg-current" />
-    {label}
-  </span>
-);
diff --git a/components/ui/index.ts b/components/ui/index.ts
deleted file mode 100644
index 855dc50..0000000
--- a/components/ui/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-// components/ui/index.ts
-export { GlassCard } from './GlassCard';
-export { StatusBadge } from './StatusBadge';
diff --git a/index.html b/index.html
index 6ea14d7..c7b9406 100644
--- a/index.html
+++ b/index.html
@@ -3,10 +3,46 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>NEXLYN | MikroTik® Master Distribution UAE</title>
+    <title>Nexlyn | MikroTik® Master Distribution</title>
+    <script src="https://cdn.tailwindcss.com"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
+    <script>
+      tailwind.config = {
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              nexlyn: {
+                DEFAULT: '#E60026',
+                glow: '#FF1A3D',
+                dark: '#1A0005',
+              },
+            },
+            fontFamily: {
+              sans: ['Plus Jakarta Sans', 'Inter', 'sans-serif'],
+            },
+            animation: {
+              'pulse-slow': 'pulse 8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+              'data-flow': 'data-flow 20s linear infinite',
+              'sonar': 'sonar 2s cubic-bezier(0, 0, 0.2, 1) infinite',
+            },
+            keyframes: {
+              'data-flow': {
+                '0%': { transform: 'translateY(-100%)' },
+                '100%': { transform: 'translateY(100%)' },
+              },
+              'sonar': {
+                '0%': { transform: 'scale(0.95)', opacity: '0.8' },
+                '70%': { transform: 'scale(1.3)', opacity: '0' },
+                '100%': { transform: 'scale(0.95)', opacity: '0' },
+              }
+            }
+          },
+        },
+      }
+    </script>
     <style>
         :root {
             --bg-grid: rgba(230, 0, 38, 0.04);
@@ -29,6 +65,24 @@
             transition: background-color 0.5s ease;
         }
         
+        .bg-grid {
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            background-image: 
+                linear-gradient(var(--bg-grid) 1px, transparent 1px),
+                linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
+            background-size: 80px 80px;
+        }
+
+        .bg-dots {
+            position: fixed;
+            inset: 0;
+            z-index: -1;
+            background-image: radial-gradient(var(--bg-dots) 1.5px, transparent 1.5px);
+            background-size: 20px 20px;
+        }
+
         .streamer {
             position: fixed;
             top: 0;
@@ -39,11 +93,23 @@
             z-index: -1;
         }
 
-        @keyframes data-flow {
-            0% { transform: translateY(-100%); }
-            100% { transform: translateY(100%); }
+        .glass-panel {
+            background: rgba(255, 255, 255, 0.02);
+            backdrop-filter: blur(20px);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+        
+        .dark .glass-panel {
+            background: rgba(10, 10, 10, 0.7);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+        }
+
+        .text-glow {
+            text-shadow: 0 0 15px rgba(230, 0, 38, 0.3);
         }
 
+        .no-scrollbar::-webkit-scrollbar { display: none; }
+
         @keyframes heroIn {
             0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
             100% { opacity: 1; transform: translateY(0); filter: blur(0); }
@@ -60,6 +126,17 @@
             animation: heroOut 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
         }
     </style>
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.2.3",
+    "react/": "https://esm.sh/react@^19.2.3/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.37.0",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
+    "recharts": "https://esm.sh/recharts@^3.6.0"
+  }
+}
+</script>
 </head>
 <body>
     <div class="bg-grid"></div>
@@ -68,6 +145,5 @@
     <div class="streamer" style="left: 50%; animation-delay: 5s;"></div>
     <div class="streamer" style="left: 80%; animation-delay: 10s;"></div>
     <div id="root"></div>
-    <script type="module" src="/index.tsx"></script>
 </body>
 </html>
\ No newline at end of file
diff --git a/index.tsx b/index.tsx
index 6d97dce..aaa0c6e 100644
--- a/index.tsx
+++ b/index.tsx
@@ -2,7 +2,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
-import './styles/globals.css';
 
 const rootElement = document.getElementById('root');
 if (!rootElement) {
diff --git a/package-lock.json b/package-lock.json
index 9e6b258..0d6e660 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,27 +16,13 @@
         "recharts": "^3.6.0"
       },
       "devDependencies": {
-        "@tailwindcss/postcss": "^4.1.18",
         "@types/node": "^22.14.0",
         "@vitejs/plugin-react": "^5.0.0",
-        "autoprefixer": "^10.4.23",
-        "postcss": "^8.5.6",
-        "tailwindcss": "^4.1.18",
         "typescript": "~5.8.2",
         "vite": "^6.2.0"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
       },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "engines": {
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1396,277 +1382,6 @@
       "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
       "license": "MIT"
     },
-    "node_modules/@tailwindcss/node": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
-      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/remapping": "^2.3.4",
-        "enhanced-resolve": "^5.18.3",
-        "jiti": "^2.6.1",
-        "lightningcss": "1.30.2",
-        "magic-string": "^0.30.21",
-        "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
-      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 10"
-      },
-      "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.18",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
-        "@tailwindcss/oxide-darwin-x64": "4.1.18",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
-      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
-      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
-      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
-      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
-      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
-      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
-      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
-      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
-      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
-      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
-      "bundleDependencies": [
-        "@napi-rs/wasm-runtime",
-        "@emnapi/core",
-        "@emnapi/runtime",
-        "@tybys/wasm-util",
-        "@emnapi/wasi-threads",
-        "tslib"
-      ],
-      "cpu": [
-        "wasm32"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "dependencies": {
-        "@emnapi/core": "^1.7.1",
-        "@emnapi/runtime": "^1.7.1",
-        "@emnapi/wasi-threads": "^1.1.0",
-        "@napi-rs/wasm-runtime": "^1.1.0",
-        "@tybys/wasm-util": "^0.10.1",
-        "tslib": "^2.4.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
-      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
-      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@tailwindcss/postcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.18.tgz",
-      "integrity": "sha512-Ce0GFnzAOuPyfV5SxjXGn0CubwGcuDB0zcdaPuCSzAa/2vII24JTkH+I6jcbXLb1ctjZMZZI6OjDaLPJQL1S0g==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "@tailwindcss/node": "4.1.18",
-        "@tailwindcss/oxide": "4.1.18",
-        "postcss": "^8.4.41",
-        "tailwindcss": "4.1.18"
-      }
-    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1875,43 +1590,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.23",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
-      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.28.1",
-        "caniuse-lite": "^1.0.30001760",
-        "fraction.js": "^5.3.4",
-        "picocolors": "^1.1.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2007,9 +1685,9 @@
       "license": "BSD-3-Clause"
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001765",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001765.tgz",
-      "integrity": "sha512-LWcNtSyZrakjECqmpP4qdg0MMGdN368D7X8XvvAqOcqMv0RxnlqVKZl2V6/mBR68oYMxOZPLw/gO7DuisMHUvQ==",
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
       "dev": true,
       "funding": [
         {
@@ -2228,16 +1906,6 @@
       "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
       "license": "MIT"
     },
-    "node_modules/detect-libc": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
-      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2254,9 +1922,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.277",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.277.tgz",
-      "integrity": "sha512-wKXFZw4erWmmOz5N/grBoJ2XrNJGDFMu2+W5ACHza5rHtvsqrK4gb6rnLC7XxKB9WlJ+RmyQatuEXmtm86xbnw==",
+      "version": "1.5.278",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.278.tgz",
+      "integrity": "sha512-dQ0tM1svDRQOwxnXxm+twlGTjr9Upvt8UFWAgmLsxEzFQxhbti4VwxmMjsDxVC51Zo84swW7FVCXEV+VAkhuPw==",
       "dev": true,
       "license": "ISC"
     },
@@ -2266,20 +1934,6 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "license": "MIT"
     },
-    "node_modules/enhanced-resolve": {
-      "version": "5.18.4",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.4.tgz",
-      "integrity": "sha512-LgQMM4WXU3QI+SYgEc2liRgznaD5ojbmY3sb8LxyguVkIg5FxdpTkvk72te2R38/TGKxH634oLxXRGY6d7AP+Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
     "node_modules/es-toolkit": {
       "version": "1.44.0",
       "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
@@ -2423,20 +2077,6 @@
         "node": ">=12.20.0"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "5.3.4",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
-      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2538,13 +2178,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/graceful-fs": {
-      "version": "4.2.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
-      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
-      "dev": true,
-      "license": "ISC"
-    },
     "node_modules/gtoken": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/gtoken/-/gtoken-8.0.0.tgz",
@@ -2620,16 +2253,6 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
-    "node_modules/jiti": {
-      "version": "2.6.1",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
-      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
-      "dev": true,
-      "license": "MIT",
-      "bin": {
-        "jiti": "lib/jiti-cli.mjs"
-      }
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -2693,267 +2316,6 @@
         "safe-buffer": "^5.0.1"
       }
     },
-    "node_modules/lightningcss": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
-      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
-      "dev": true,
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^2.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-android-arm64": "1.30.2",
-        "lightningcss-darwin-arm64": "1.30.2",
-        "lightningcss-darwin-x64": "1.30.2",
-        "lightningcss-freebsd-x64": "1.30.2",
-        "lightningcss-linux-arm-gnueabihf": "1.30.2",
-        "lightningcss-linux-arm64-gnu": "1.30.2",
-        "lightningcss-linux-arm64-musl": "1.30.2",
-        "lightningcss-linux-x64-gnu": "1.30.2",
-        "lightningcss-linux-x64-musl": "1.30.2",
-        "lightningcss-win32-arm64-msvc": "1.30.2",
-        "lightningcss-win32-x64-msvc": "1.30.2"
-      }
-    },
-    "node_modules/lightningcss-android-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
-      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-arm64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
-      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-darwin-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
-      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-freebsd-x64": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
-      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
-      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
-      "cpu": [
-        "arm"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
-      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
-      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
-      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
-      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
-      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.30.2",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
-      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
-      "cpu": [
-        "x64"
-      ],
-      "dev": true,
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -2982,16 +2344,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/magic-string": {
-      "version": "0.30.21",
-      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
-      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/sourcemap-codec": "^1.5.5"
-      }
-    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -3172,13 +2524,6 @@
         "node": "^10 || ^12 || >=14"
       }
     },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/protobufjs": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
@@ -3550,27 +2895,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/tailwindcss": {
-      "version": "4.1.18",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
-      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/tapable": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
-      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      }
-    },
     "node_modules/tiny-invariant": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
diff --git a/package.json b/package.json
index 45ad48f..f8a6574 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,8 @@
     "recharts": "^3.6.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.18",
     "@types/node": "^22.14.0",
     "@vitejs/plugin-react": "^5.0.0",
-    "autoprefixer": "^10.4.23",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
     "typescript": "~5.8.2",
     "vite": "^6.2.0"
   }
diff --git a/postcss.config.cjs b/postcss.config.cjs
deleted file mode 100644
index b4bee66..0000000
--- a/postcss.config.cjs
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};
diff --git a/styles/globals.css b/styles/globals.css
deleted file mode 100644
index da17fdf..0000000
--- a/styles/globals.css
+++ /dev/null
@@ -1,197 +0,0 @@
-/* styles/globals.css - Design System Foundation */
-
-@import "tailwindcss";
-
-/* Custom Theme Configuration for Tailwind v4 */
-@theme {
-  /* Navy Scale - Authority & Trust (Hue 260) */
-  --color-navy-950: oklch(15% 0.05 260);
-  --color-navy-900: oklch(20% 0.08 260);
-  --color-navy-800: oklch(30% 0.1 260);
-  --color-navy-700: oklch(40% 0.12 260);
-
-  /* Teal Scale - Action & Growth (Hue 190) */
-  --color-teal-500: oklch(65% 0.18 190);
-  --color-teal-400: oklch(72% 0.15 190);
-  --color-teal-300: oklch(80% 0.12 190);
-
-  /* NEXLYN Brand Color */
-  --color-nexlyn: #E60026;
-  --color-nexlyn-glow: #FF1A3D;
-  --color-nexlyn-dark: #1A0005;
-}
-
-/* OKLCH Color Variables (CSS Custom Properties) */
-:root {
-  /* Text Colors */
-  --color-text-primary: oklch(95% 0.02 260);
-  --color-text-secondary: oklch(80% 0.02 260);
-  --color-text-tertiary: oklch(60% 0.01 260);
-  --color-text-muted: oklch(50% 0.01 260);
-
-  /* Status Colors */
-  --color-success: oklch(70% 0.18 140);
-  --color-warning: oklch(65% 0.18 70);
-  --color-error: oklch(60% 0.2 25);
-  --color-info: oklch(65% 0.15 240);
-
-  /* Spacing (8pt Grid) */
-  --space-0: 0px;
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-6: 24px;
-  --space-8: 32px;
-  --space-12: 48px;
-  --space-16: 64px;
-  --space-24: 96px;
-  --space-32: 128px;
-}
-
-/* Base layer styles */
-@layer base {
-  html {
-    font-family: var(--font-geist-sans), 'Plus Jakarta Sans', 'Inter', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  body {
-    background-color: var(--color-navy-950);
-    color: var(--color-text-primary);
-  }
-
-  /* Tabular numerals for prices and numbers */
-  .tabular-nums {
-    font-variant-numeric: tabular-nums;
-  }
-}
-
-/* Typography Scale */
-@layer components {
-  /* Display (Headings - Tight tracking) */
-  .text-display-xl {
-    font-size: 48px;
-    line-height: 56px;
-    letter-spacing: -0.03em;
-    font-weight: 700;
-  }
-
-  .text-display-lg {
-    font-size: 32px;
-    line-height: 40px;
-    letter-spacing: -0.02em;
-    font-weight: 600;
-  }
-
-  .text-display-md {
-    font-size: 28px;
-    line-height: 36px;
-    letter-spacing: -0.02em;
-    font-weight: 600;
-  }
-
-  .text-display-sm {
-    font-size: 24px;
-    line-height: 32px;
-    letter-spacing: -0.015em;
-    font-weight: 600;
-  }
-
-  /* Body (Reading content) */
-  .text-body-lg {
-    font-size: 18px;
-    line-height: 28px;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-
-  .text-body-base {
-    font-size: 16px;
-    line-height: 24px;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-
-  .text-body-sm {
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: 0;
-    font-weight: 400;
-  }
-
-  /* UI/Labels (Looser tracking for small sizes) */
-  .text-ui-sm {
-    font-size: 14px;
-    line-height: 20px;
-    letter-spacing: 0.01em;
-    font-weight: 500;
-  }
-
-  .text-ui-xs {
-    font-size: 12px;
-    line-height: 16px;
-    letter-spacing: 0.02em;
-    font-weight: 500;
-  }
-
-  /* Monospace (Technical data - SKUs, IDs) */
-  .text-mono-sm {
-    font-family: var(--font-geist-mono), monospace;
-    font-size: 13px;
-    line-height: 20px;
-    letter-spacing: 0;
-    font-variant-numeric: tabular-nums;
-  }
-
-  .text-mono-xs {
-    font-family: var(--font-geist-mono), monospace;
-    font-size: 11px;
-    line-height: 16px;
-    letter-spacing: 0;
-    font-variant-numeric: tabular-nums;
-  }
-
-  /* Deep Glass Panel */
-  .glass-panel {
-    background: oklch(20% 0.08 260 / 0.65);
-    backdrop-filter: blur(20px);
-    border: 1px solid oklch(100% 0 0 / 0.1);
-  }
-
-  /* Background patterns */
-  .bg-grid {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background-image: 
-      linear-gradient(oklch(65% 0.18 190 / 0.04) 1px, transparent 1px),
-      linear-gradient(90deg, oklch(65% 0.18 190 / 0.04) 1px, transparent 1px);
-    background-size: 80px 80px;
-  }
-
-  .bg-dots {
-    position: fixed;
-    inset: 0;
-    z-index: -1;
-    background-image: radial-gradient(oklch(65% 0.18 190 / 0.08) 1.5px, transparent 1.5px);
-    background-size: 20px 20px;
-  }
-}
-
-/* Utility classes */
-@layer utilities {
-  .text-glow {
-    text-shadow: 0 0 15px oklch(65% 0.18 190 / 0.3);
-  }
-
-  .no-scrollbar::-webkit-scrollbar {
-    display: none;
-  }
-
-  .no-scrollbar {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-  }
-}
diff --git a/vite.config.ts b/vite.config.ts
index 12dd6f9..8912669 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,9 +12,6 @@ export default defineConfig(({ mode }) => {
       port: 3000,
       host: '0.0.0.0',
     },
-    css: {
-      postcss: './postcss.config.cjs',
-    },
     resolve: {
       alias: {
         '@': path.resolve(__dirname, '.'),