Merge pull request #103 from Lalitya31/feat/ui-design-system-refactor

Refactor: Enterprise-grade UI system overhaul across PDP, About, Contact, Auth & Collection pages

Author: akshay0611

frontend/src/App.css

@@ -1,21 +1,60 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+/* Premium Commerce Typography System */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@300;400;500;600;700;800&display=swap');
+
+:root {
+  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-secondary: 'Poppins', sans-serif;
+  
+  /* 4-Level Type Scale */
+  --text-hero: 48px;
+  --text-heading: 36px;
+  --text-subheading: 24px;
+  --text-body: 16px;
+  
+  /* Commerce Color Palette */
+  --color-primary: #2563EB;
+  --color-primary-hover: #1d4ed8;
+  --color-primary-active: #1e40af;
 }
 
-body{
+body {
+  font-family: var(--font-primary);
+  font-size: var(--text-body);
   background-color: black;
 }
+
+h1 {
+  font-size: var(--text-hero);
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+h2 {
+  font-size: var(--text-heading);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+h3 {
+  font-size: var(--text-subheading);
+  font-weight: 600;
+  line-height: 1.4;
+}
+
+#root {
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 .logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em #2563EB80);
 }
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);

frontend/src/App.jsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom';
+import './App.css';
 import Registration from './pages/Registration';
 import Home from './pages/Home';
 import Login from './pages/Login';
@@ -177,18 +178,14 @@ function App() {
             )
           }
         />
+
+        {/* Public routes - Legal pages should be accessible without login */}
         <Route
           path="/privicypolicy"
           element={
-            userData ? (
-              <PrivicyPolicy />
-            ) : (
-              <Navigate to="/login" state={{ from: location.pathname }} />
-            )
+            <PrivicyPolicy />
           }
         />
-
-        {/* public routes */}
         <Route
           path="/termsandservices"
           element={

frontend/src/components/Ai.jsx

@@ -135,34 +135,34 @@ function Ai() {
   ];
 
   return (
-    <div className="fixed bottom-6 left-6 z-50">
+    <div className="fixed bottom-6 right-6 z-40">
       {/* AI Assistant Robot */}
       <div 
         className="relative cursor-pointer group"
         onClick={handleRobotClick}
       >
-        <div className="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center text-xs animate-pulse">
+        <div className="absolute -top-2 -right-2 bg-[#EF4444] text-white rounded-full w-5 h-5 flex items-center justify-center text-xs animate-pulse">
           <MessageCircle size={12} />
         </div>
         <img
           src={robot}
           alt="AI Assistant Robot"
-          className={`w-20 h-20 transition-all duration-300 ${activeAi ? 'scale-110' : 'scale-100'} group-hover:scale-110`}
-          style={{ filter: activeAi ? "drop-shadow(0 0 10px #00d2fc)" : "drop-shadow(0 4px 8px rgba(0,0,0,0.2))" }}
+          className="w-20 h-20 transition-all duration-300"
+          style={{ filter: activeAi ? "drop-shadow(0 4px 6px rgba(37, 99, 235, 0.4))" : "drop-shadow(0 4px 8px rgba(0,0,0,0.2))" }}
         />
-        <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+        <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-70 text-white text-xs px-2 py-1 rounded-full whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity duration-300" style={{ fontFamily: 'Inter, sans-serif' }}>
           AI Assistant
         </div>
       </div>
 
       {/* Chat Interface */}
       {showChat && (
-        <div className="absolute bottom-24 left-0 w-80 h-96 bg-white rounded-xl shadow-xl overflow-hidden border border-gray-200">
+        <div className="absolute bottom-24 right-0 w-80 h-96 bg-white dark:bg-[#121826] rounded-xl shadow-xl overflow-hidden border border-gray-200 dark:border-gray-700">
           {/* Chat Header */}
-          <div className="bg-gradient-to-r from-blue-600 to-indigo-700 text-white p-4 flex justify-between items-center">
+          <div className="bg-[#2563EB] text-white p-4 flex justify-between items-center">
             <div className="flex items-center space-x-2">
               <div className="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
-              <h3 className="font-semibold">RIVETO AI Assistant</h3>
+              <h3 className="font-semibold" style={{ fontFamily: 'Inter, sans-serif' }}>RIVETO AI Assistant</h3>
             </div>
             <button 
               onClick={closeChat}
@@ -175,7 +175,7 @@ function Ai() {
           {/* Chat Messages */}
           <div 
             ref={chatContainerRef}
-            className="h-64 overflow-y-auto p-4 bg-gray-50"
+            className="h-64 overflow-y-auto p-4 bg-gray-50 dark:bg-gray-800"
           >
             {chatMessages.length === 0 ? (
               <div className="text-center text-gray-500 my-8">
@@ -221,14 +221,15 @@ function Ai() {
           </div>
 
           {/* Voice Control */}
-          <div className="p-3 border-t border-gray-200 bg-white flex justify-center">
+          <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-white dark:bg-[#121826] flex justify-center">
             <button 
               onClick={handleVoiceCommand}
               disabled={isListening}
               className={`flex items-center justify-center space-x-2 px-4 py-2 rounded-full text-white ${isListening 
-                ? 'bg-red-500 hover:bg-red-600' 
-                : 'bg-blue-500 hover:bg-blue-600'
-              } transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300`}
+                ? 'bg-[#EF4444] hover:bg-red-600' 
+                : 'bg-[#2563EB] hover:bg-[#1d4ed8]'
+              } transition-all focus:outline-none focus:ring-2 focus:ring-[#2563EB]/30`}
+              style={{ fontFamily: 'Inter, sans-serif' }}
             >
               {isListening ? (
                 <>

frontend/src/components/Background.jsx

@@ -113,9 +113,9 @@ function Background({ heroCount }) {
         }}
       />
 
-      {/* Dark gradient for contrast */}
-      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-black/40" />
-      <div className="absolute inset-0 bg-gradient-to-r from-black/30 via-transparent to-black/30" />
+      {/* Dark gradient for contrast - Reduced opacity for better visibility */}
+      <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-black/10 to-black/20" />
+      <div className="absolute inset-0 bg-gradient-to-r from-black/15 via-transparent to-black/15" />
 
       {/* Floating Particles */}
       <div ref={particleContainerRef} className="absolute inset-0 pointer-events-none">
@@ -169,8 +169,8 @@ function Background({ heroCount }) {
         }}
       />
 
-      {/* Vignette effect */}
-      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)]" />
+      {/* Vignette effect - Reduced for better visibility */}
+      <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_center,transparent_0%,rgba(0,0,0,0.2)_100%)]" />
     </div>
   );
 }