vignesh/supplier_central_frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: enhance responsive design, configure tailwind v4 vite plugin, and update company name to Tradhox in footer/config

Browse source
This commit is contained in:
vickytechkey 2026-08-20 18:53:13 +05:30
parent f054a3ed3e
commit 5385b4f4b5
6 changed files with 72 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
package-lock.json generated
View file

@ -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",

1
package.json
View file

@ -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",

28
src/App.tsx
View file

@ -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>

4
src/config.ts
View file

@ -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',

34
src/index.css
View file

@ -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 */

6
vite.config.ts
View file

@ -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(),
],
})