From 5385b4f4b58000e985311d59a5fc513b2db05ca6 Mon Sep 17 00:00:00 2001
From: vickytechkey <vichunice@gmail.com>
Date: Thu, 20 Aug 2026 18:53:13 +0530
Subject: [PATCH] feat: enhance responsive design, configure tailwind v4 vite
 plugin, and update company name to Tradhox in footer/config

---
 package-lock.json | 16 ++++++++++++++++
 package.json      |  1 +
 src/App.tsx       | 28 ++++++++++++++--------------
 src/config.ts     |  4 ++--
 src/index.css     | 34 ++++++++++++++++++++++++++++++++++
 vite.config.ts    |  6 +++++-
 6 files changed, 72 insertions(+), 17 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 99587d9..d7528a8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
       "devDependencies": {
         "@playwright/test": "^1.49.0",
         "@tailwindcss/postcss": "^4.3.3",
+        "@tailwindcss/vite": "^4.3.3",
         "@testing-library/dom": "^10.4.1",
         "@testing-library/jest-dom": "^7.0.0",
         "@testing-library/react": "^16.3.2",
@@ -1565,6 +1566,21 @@
         "tailwindcss": "4.3.3"
       }
     },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.3.3.tgz",
+      "integrity": "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.3.3",
+        "@tailwindcss/oxide": "4.3.3",
+        "tailwindcss": "4.3.3"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "10.4.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
diff --git a/package.json b/package.json
index 5393c11..b5251c2 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
   "devDependencies": {
     "@playwright/test": "^1.49.0",
     "@tailwindcss/postcss": "^4.3.3",
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
diff --git a/src/App.tsx b/src/App.tsx
index 1032844..38ece77 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -850,20 +850,20 @@ export default function App() {
           {currentPage === 'home' && (
             <div className="animate-fadeIn">
               {/* Hero Section */}
-              <section className="relative w-full h-[600px] flex items-center justify-center overflow-hidden">
+              <section className="relative w-full min-h-[450px] sm:min-h-[550px] md:h-[600px] flex items-center justify-center overflow-hidden py-12 sm:py-0">
                 <div className="absolute inset-0 z-0">
                   <img src="/artisan_weaving.jpg" className="w-full h-full object-cover" />
-                  <div className="absolute inset-0 bg-black/50"></div>
+                  <div className="absolute inset-0 bg-black/55"></div>
                 </div>
-                <div className="relative z-10 text-center max-w-3xl px-8 mx-auto text-white space-y-6">
-                  <h1 className="font-caslon text-5xl md:text-6xl font-bold leading-tight">Sell Globally. Celebrate Craft.</h1>
-                  <p className="text-lg md:text-xl max-w-2xl mx-auto opacity-90">Discover authentic Indian craftsmanship, preserved for generations and handcrafted for you.</p>
-                  <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
-                    <button className="bg-primary text-white px-8 py-3 rounded font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2 cursor-pointer" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
+                <div className="relative z-10 text-center max-w-3xl px-4 sm:px-8 mx-auto text-white space-y-4 sm:space-y-6">
+                  <h1 className="font-caslon text-3xl sm:text-5xl md:text-6xl font-bold leading-tight">Sell Globally. Celebrate Craft.</h1>
+                  <p className="text-sm sm:text-lg md:text-xl max-w-2xl mx-auto opacity-90 leading-relaxed">Discover authentic Indian craftsmanship, preserved for generations and handcrafted for you.</p>
+                  <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center pt-2 sm:pt-4 max-w-md mx-auto sm:max-w-none">
+                    <button className="bg-primary text-white px-6 py-2.5 sm:px-8 sm:py-3 rounded font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2 cursor-pointer text-sm sm:text-base" onClick={() => { setActiveTab('register'); navigateTo('signup'); }}>
                       Shop the Collection
                       <span className="material-symbols-outlined text-lg">arrow_forward</span>
                     </button>
-                    <button className="bg-transparent border border-white text-white px-8 py-3 rounded font-semibold hover:bg-white/10 transition-colors cursor-pointer" onClick={() => navigateTo('about')}>
+                    <button className="bg-transparent border border-white text-white px-6 py-2.5 sm:px-8 sm:py-3 rounded font-semibold hover:bg-white/10 transition-colors cursor-pointer text-sm sm:text-base" onClick={() => navigateTo('about')}>
                       Meet our Artisans
                     </button>
                   </div>
@@ -871,9 +871,9 @@ export default function App() {
               </section>
 
               {/* Discover Heritage Cards */}
-              <section className="max-w-7xl mx-auto px-8 py-16">
-                <h2 className="font-caslon text-3xl font-bold text-center text-primary mb-12">Discover Heritage</h2>
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
+              <section className="max-w-7xl mx-auto px-4 sm:px-8 py-12 sm:py-16">
+                <h2 className="font-caslon text-2xl sm:text-3xl font-bold text-center text-primary mb-8 sm:mb-12">Discover Heritage</h2>
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
                   {/* Category 1 */}
                   <div className="group relative overflow-hidden rounded border border-[#D9C5B2] bg-white hover:border-primary transition-colors block aspect-[4/5] cursor-pointer">
                     <img className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" src="/terracotta_vases.jpg" />
@@ -914,9 +914,9 @@ export default function App() {
               </section>
 
               {/* The Tradhox Promise */}
-              <section className="bg-surface-container-low py-16 border-y border-outline-variant/30">
-                <div className="max-w-7xl mx-auto px-8">
-                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
+              <section className="bg-surface-container-low py-12 sm:py-16 border-y border-outline-variant/30">
+                <div className="max-w-7xl mx-auto px-4 sm:px-8">
+                  <div className="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8 text-center">
                     <div className="flex flex-col items-center p-4">
                       <span className="material-symbols-outlined text-primary text-4xl mb-2">verified</span>
                       <h3 className="font-caslon text-xl font-bold text-primary mb-2">Expand Your Reach</h3>
diff --git a/src/config.ts b/src/config.ts
index 7b38290..3d942b7 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -4,9 +4,9 @@ const getApiBaseUrl = () => {
 
 export const CONFIG = {
   apiBaseUrl: getApiBaseUrl(),
-  companyName: 'Global Artisans Hub',
+  companyName: 'Tradhox',
   logoLetter: 'A',
-  supportEmail: 'support@globalartisanshub.com',
+  supportEmail: 'support@tradhox.com',
   supportPhone: '+1 (800) 555-0199',
   address: '1775 Artisan Ridge Rd, Craftsville, CA 90210',
 
diff --git a/src/index.css b/src/index.css
index 45d5541..ecdda15 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,39 @@
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
 @import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Work+Sans:wght@300;400;500;600;700&display=swap');
 @import "tailwindcss";
+@source "./**/*.{js,ts,jsx,tsx,html}";
+
+@theme {
+  --color-primary: #4d0218;
+  --color-primary-container: #6b1a2c;
+  --color-accent: #4d0218;
+  --color-background: #fbf9f8;
+  --color-on-background: #1b1c1c;
+  --color-secondary: #5f5e5b;
+  --color-outline-variant: #dac0c2;
+  --color-outline: #887274;
+  --color-success: #2A9D8F;
+  --color-error: #ba1a1a;
+  --color-surface: #fbf9f8;
+  --color-surface-dim: #dbd9d9;
+  --color-surface-bright: #fbf9f8;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f5f3f3;
+  --color-surface-container: #efeded;
+  --color-surface-container-high: #eae8e7;
+  --color-surface-container-highest: #e4e2e2;
+
+  --font-caslon: "Libre Caslon Text", serif;
+  --font-sans: "Work Sans", sans-serif;
+  
+  --spacing-stack-sm: 8px;
+  --spacing-stack-md: 16px;
+  --spacing-stack-lg: 32px;
+  --spacing-margin-edge: 32px;
+  --spacing-section-gap: 64px;
+  --spacing-gutter: 24px;
+}
+
 
 :root {
   /* Colors - Artisanal Heritage */
diff --git a/vite.config.ts b/vite.config.ts
index 8b0f57b..3d15f68 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
 })