Upload 20 files

README.md

@@ -1,10 +1 @@
----
-title: Hyzo
-emoji: 👀
-colorFrom: blue
-colorTo: purple
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Here are your Instructions

backend/.env

@@ -0,0 +1,2 @@
+MONGO_URL="mongodb://localhost:27017"
+DB_NAME="test_database"

backend/requirements.txt

@@ -0,0 +1,25 @@
+fastapi==0.110.1
+uvicorn==0.25.0
+boto3>=1.34.129
+requests-oauthlib>=2.0.0
+cryptography>=42.0.8
+python-dotenv>=1.0.1
+pymongo==4.5.0
+pydantic>=2.6.4
+email-validator>=2.2.0
+pyjwt>=2.10.1
+passlib>=1.7.4
+tzdata>=2024.2
+motor==3.3.1
+pytest>=8.0.0
+black>=24.1.1
+isort>=5.13.2
+flake8>=7.0.0
+mypy>=1.8.0
+python-jose>=3.3.0
+requests>=2.31.0
+pandas>=2.2.0
+numpy>=1.26.0
+python-multipart>=0.0.9
+jq>=1.6.0
+typer>=0.9.0

backend/server.py

@@ -0,0 +1,75 @@
+from fastapi import FastAPI, APIRouter
+from dotenv import load_dotenv
+from starlette.middleware.cors import CORSMiddleware
+from motor.motor_asyncio import AsyncIOMotorClient
+import os
+import logging
+from pathlib import Path
+from pydantic import BaseModel, Field
+from typing import List
+import uuid
+from datetime import datetime
+
+
+ROOT_DIR = Path(__file__).parent
+load_dotenv(ROOT_DIR / '.env')
+
+# MongoDB connection
+mongo_url = os.environ['MONGO_URL']
+client = AsyncIOMotorClient(mongo_url)
+db = client[os.environ['DB_NAME']]
+
+# Create the main app without a prefix
+app = FastAPI()
+
+# Create a router with the /api prefix
+api_router = APIRouter(prefix="/api")
+
+
+# Define Models
+class StatusCheck(BaseModel):
+    id: str = Field(default_factory=lambda: str(uuid.uuid4()))
+    client_name: str
+    timestamp: datetime = Field(default_factory=datetime.utcnow)
+
+class StatusCheckCreate(BaseModel):
+    client_name: str
+
+# Add your routes to the router instead of directly to app
+@api_router.get("/")
+async def root():
+    return {"message": "Hello World"}
+
+@api_router.post("/status", response_model=StatusCheck)
+async def create_status_check(input: StatusCheckCreate):
+    status_dict = input.dict()
+    status_obj = StatusCheck(**status_dict)
+    _ = await db.status_checks.insert_one(status_obj.dict())
+    return status_obj
+
+@api_router.get("/status", response_model=List[StatusCheck])
+async def get_status_checks():
+    status_checks = await db.status_checks.find().to_list(1000)
+    return [StatusCheck(**status_check) for status_check in status_checks]
+
+# Include the router in the main app
+app.include_router(api_router)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_credentials=True,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,
+    format='%(asctime)s - %(name)s - %(levelname)s - %(message)s'
+)
+logger = logging.getLogger(__name__)
+
+@app.on_event("shutdown")
+async def shutdown_db_client():
+    client.close()

frontend/.env

@@ -0,0 +1,2 @@
+WDS_SOCKET_PORT=443
+REACT_APP_BACKEND_URL=https://01d9c805-948a-4b7f-8d6e-6f2ab32fb0ac.preview.emergentagent.com

frontend/README.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

frontend/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "axios": "^1.8.4",
+    "cra-template": "1.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.5.1",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@eslint/js": "9.23.0",
+    "autoprefixer": "^10.4.20",
+    "eslint": "9.23.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.4",
+    "globals": "15.15.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/public/index.html

@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Hyzo - Custom Printing & Promotional Products" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+        <title>Hyzo | Custom Printing & Promotional Products</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+
+        <script>
+            !(function (t, e) {
+                var o, n, p, r;
+                e.__SV ||
+                    ((window.posthog = e),
+                    (e._i = []),
+                    (e.init = function (i, s, a) {
+                        function g(t, e) {
+                            var o = e.split(".");
+                            2 == o.length && ((t = t[o[0]]), (e = o[1])),
+                                (t[e] = function () {
+                                    t.push(
+                                        [e].concat(
+                                            Array.prototype.slice.call(
+                                                arguments,
+                                                0,
+                                            ),
+                                        ),
+                                    );
+                                });
+                        }
+                        ((p = t.createElement("script")).type =
+                            "text/javascript"),
+                            (p.crossOrigin = "anonymous"),
+                            (p.async = !0),
+                            (p.src =
+                                s.api_host.replace(
+                                    ".i.posthog.com",
+                                    "-assets.i.posthog.com",
+                                ) + "/static/array.js"),
+                            (r =
+                                t.getElementsByTagName(
+                                    "script",
+                                )[0]).parentNode.insertBefore(p, r);
+                        var u = e;
+                        for (
+                            void 0 !== a ? (u = e[a] = []) : (a = "posthog"),
+                                u.people = u.people || [],
+                                u.toString = function (t) {
+                                    var e = "posthog";
+                                    return (
+                                        "posthog" !== a && (e += "." + a),
+                                        t || (e += " (stub)"),
+                                        e
+                                    );
+                                },
+                                u.people.toString = function () {
+                                    return u.toString(1) + ".people (stub)";
+                                },
+                                o =
+                                    "init me ws ys ps bs capture je Di ks register register_once register_for_session unregister unregister_for_session Ps getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Es $s createPersonProfile Is opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Ss debug xs getPageViewId captureTraceFeedback captureTraceMetric".split(
+                                        " ",
+                                    ),
+                                n = 0;
+                            n < o.length;
+                            n++
+                        )
+                            g(u, o[n]);
+                        e._i.push([i, s, a]);
+                    }),
+                    (e.__SV = 1));
+            })(document, window.posthog || []);
+            posthog.init("phc_yJW1VjHGGwmCbbrtczfqqNxgBDbhlhOWcdzcIJEOTFE", {
+                api_host: "https://us.i.posthog.com",
+                person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+            });
+        </script>
+    </body>
+</html>

frontend/public/index.html.new

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Hyzo - Custom Printing & Promotional Products" />
+        <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+        <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+        <title>Hyzo | Custom Printing & Promotional Products</title>
+    </head>
+    <body>
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+        <script>
+            !(function (t, e) {
+                var o, n, p, r;
+                e.__SV ||
+                    ((window.posthog = e),
+                    (e._i = []),
+                    (e.init = function (i, s, a) {
+                        function g(t, e) {
+                            var o = e.split(".");
+                            2 == o.length && ((t = t[o[0]]), (e = o[1])),
+                                (t[e] = function () {
+                                    t.push(
+                                        [e].concat(
+                                            Array.prototype.slice.call(
+                                                arguments,
+                                                0,
+                                            ),
+                                        ),
+                                    );
+                                });
+                        }
+                        ((p = t.createElement("script")).type =
+                            "text/javascript"),
+                            (p.crossOrigin = "anonymous"),
+                            (p.async = !0),
+                            (p.src =
+                                s.api_host.replace(
+                                    ".i.posthog.com",
+                                    "-assets.i.posthog.com",
+                                ) + "/static/array.js"),
+                            (r =
+                                t.getElementsByTagName(
+                                    "script",
+                                )[0]).parentNode.insertBefore(p, r);
+                        var u = e;
+                        for (
+                            void 0 !== a ? (u = e[a] = []) : (a = "posthog"),
+                                u.people = u.people || [],
+                                u.toString = function (t) {
+                                    var e = "posthog";
+                                    return (
+                                        "posthog" !== a && (e += "." + a),
+                                        t || (e += " (stub)"),
+                                        e
+                                    );
+                                },
+                                u.people.toString = function () {
+                                    return u.toString(1) + ".people (stub)";
+                                },
+                                o =
+                                    "init me ws ys ps bs capture je Di ks register register_once register_for_session unregister unregister_for_session Ps getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSurveysLoaded onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey canRenderSurveyAsync identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty Es $s createPersonProfile Is opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing Ss debug xs getPageViewId captureTraceFeedback captureTraceMetric".split(
+                                        " ",
+                                    ),
+                                n = 0;
+                            n < o.length;
+                            n++
+                        )
+                            g(u, o[n]);
+                        e._i.push([i, s, a]);
+                    }),
+                    (e.__SV = 1));
+            })(document, window.posthog || []);
+            posthog.init("phc_yJW1VjHGGwmCbbrtczfqqNxgBDbhlhOWcdzcIJEOTFE", {
+                api_host: "https://us.i.posthog.com",
+                person_profiles: "identified_only", // or 'always' to create profiles for anonymous users as well
+            });
+        </script>
+    </body>
+</html>

frontend/src/App.css

@@ -0,0 +1,233 @@
+/* PrintStop India - Enhanced Styles */
+.App {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
+  line-height: 1.6;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #f97316;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #ea580c;
+}
+
+/* Smooth transitions */
+* {
+  transition: all 0.2s ease-in-out;
+}
+
+/* Button hover effects */
+button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(249, 115, 22, 0.2);
+}
+
+/* Card hover effects */
+.product-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+}
+
+/* Enhanced gradients for PrintStop style */
+.hero-gradient {
+  background: linear-gradient(135deg, #f97316 0%, #dc2626 25%, #7c3aed 50%, #fbbf24 100%);
+}
+
+.design-studio-gradient {
+  background: linear-gradient(135deg, #f97316 0%, #dc2626 100%);
+}
+
+/* Typography matching PrintStop */
+h1, h2, h3, h4, h5, h6 {
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.hero-title {
+  font-size: 4rem;
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: -0.05em;
+}
+
+/* Product image hover effect */
+.product-image {
+  transition: transform 0.3s ease;
+}
+
+.product-image:hover {
+  transform: scale(1.05);
+}
+
+/* PrintStop specific color scheme */
+.text-orange-400 {
+  color: #fb923c;
+}
+
+.text-orange-500 {
+  color: #f97316;
+}
+
+.text-orange-600 {
+  color: #ea580c;
+}
+
+.bg-orange-400 {
+  background-color: #fb923c;
+}
+
+.bg-orange-500 {
+  background-color: #f97316;
+}
+
+.bg-orange-600 {
+  background-color: #ea580c;
+}
+
+.border-orange-500 {
+  border-color: #f97316;
+}
+
+/* Loading animation */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+/* Colorful background pattern for hero */
+@keyframes colorShift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+}
+
+.colorful-bg {
+  background: linear-gradient(-45deg, #ee7724, #d8363a, #dd3675, #b44593);
+  background-size: 400% 400%;
+  animation: colorShift 15s ease infinite;
+}
+
+/* Responsive grid improvements */
+@media (max-width: 1024px) {
+  .grid-cols-4 {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  
+  .hero-title {
+    font-size: 3rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .grid-cols-4,
+  .grid-cols-3 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+  
+  .hero-title {
+    font-size: 2.5rem;
+  }
+  
+  .text-6xl {
+    font-size: 2.5rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .grid-cols-4,
+  .grid-cols-3,
+  .grid-cols-2 {
+    grid-template-columns: 1fr;
+  }
+  
+  .flex {
+    flex-direction: column;
+  }
+  
+  .w-1\/2 {
+    width: 100%;
+  }
+  
+  .hero-title {
+    font-size: 2rem;
+  }
+}
+
+/* Special effects for Indian market */
+.rupee-symbol {
+  font-weight: bold;
+  color: #f97316;
+}
+
+.discount-badge {
+  background: linear-gradient(45deg, #10b981, #059669);
+  color: white;
+  font-weight: bold;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+}
+
+/* Enhanced shadows */
+.shadow-custom {
+  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.1);
+}
+
+.shadow-custom-hover:hover {
+  box-shadow: 0 20px 40px rgba(249, 115, 22, 0.15);
+}
+
+/* PrintStop logo styling */
+.printstop-logo {
+  font-family: 'Arial Black', sans-serif;
+  font-weight: 900;
+  letter-spacing: 0.05em;
+}
+
+/* Navigation hover effects */
+.nav-item:hover {
+  color: #f97316;
+  border-bottom: 2px solid #f97316;
+}
+
+/* Featured product cards */
+.featured-card {
+  border: 2px solid transparent;
+  transition: all 0.3s ease;
+}
+
+.featured-card:hover {
+  border-color: #f97316;
+  box-shadow: 0 10px 30px rgba(249, 115, 22, 0.2);
+}

frontend/src/App.js

@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Components from './components';
+
+const {
+  Header,
+  Hero,
+  KeyFeatures,
+  ProductGrid,
+  DesignStudio,
+  B2BSection,
+  SustainabilitySection,
+  TestimonialsSection,
+  Footer,
+  AuthModal
+} = Components;
+
+const Home = () => {
+  const [currentView, setCurrentView] = useState('home');
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [cartItems, setCartItems] = useState([]);
+  const [user, setUser] = useState(null);
+  const [showAuthModal, setShowAuthModal] = useState(false);
+  const [authMode, setAuthMode] = useState('login'); // 'login' or 'signup'
+
+  // Check for saved user session
+  useEffect(() => {
+    const savedUser = localStorage.getItem('hyzoUser');
+    if (savedUser) {
+      setUser(JSON.parse(savedUser));
+    }
+  }, []);
+
+  const addToCart = (product) => {
+    if (!user) {
+      setAuthMode('login');
+      setShowAuthModal(true);
+      return;
+    }
+    setCartItems(prev => [...prev, product]);
+  };
+
+  const navigateTo = (view) => {
+    setCurrentView(view);
+  };
+
+  const selectCategory = (category) => {
+    setSelectedCategory(category);
+    setCurrentView('products');
+  };
+
+  const handleLogin = (userData) => {
+    setUser(userData);
+    localStorage.setItem('hyzoUser', JSON.stringify(userData));
+    setShowAuthModal(false);
+  };
+
+  const handleLogout = () => {
+    setUser(null);
+    localStorage.removeItem('hyzoUser');
+    setCartItems([]);
+  };
+
+  const openAuth = (mode) => {
+    setAuthMode(mode);
+    setShowAuthModal(true);
+  };
+
+  return (
+    <div className="App">
+      <Header 
+        cartItems={cartItems} 
+        navigateTo={navigateTo}
+        selectCategory={selectCategory}
+        user={user}
+        onLogin={() => openAuth('login')}
+        onLogout={handleLogout}
+      />
+      
+      {currentView === 'home' && (
+        <>
+          <Hero navigateTo={navigateTo} selectCategory={selectCategory} />
+          <KeyFeatures />
+          <ProductGrid category="featured" addToCart={addToCart} />
+          <DesignStudio navigateTo={navigateTo} />
+          <B2BSection navigateTo={navigateTo} />
+          <SustainabilitySection />
+          <TestimonialsSection />
+        </>
+      )}
+
+      {currentView === 'products' && (
+        <ProductGrid 
+          category={selectedCategory}
+          addToCart={addToCart}
+          fullPage={true}
+        />
+      )}
+
+      {currentView === 'design-studio' && (
+        <DesignStudio fullPage={true} user={user} openAuth={() => openAuth('login')} />
+      )}
+
+      {currentView === 'b2b' && (
+        <B2BSection fullPage={true} />
+      )}
+
+      {currentView === 'visiting-cards' && (
+        <ProductGrid category="visiting-cards" addToCart={addToCart} fullPage={true} />
+      )}
+
+      {currentView === 'stationery' && (
+        <ProductGrid category="stationery" addToCart={addToCart} fullPage={true} />
+      )}
+
+      {currentView === 'apparel' && (
+        <ProductGrid category="apparel" addToCart={addToCart} fullPage={true} />
+      )}
+
+      {currentView === 'marketing' && (
+        <ProductGrid category="marketing" addToCart={addToCart} fullPage={true} />
+      )}
+
+      {currentView === 'drinkware' && (
+        <ProductGrid category="drinkware" addToCart={addToCart} fullPage={true} />
+      )}
+
+      {currentView === 'gadgets' && (
+        <ProductGrid category="gadgets" addToCart={addToCart} fullPage={true} />
+      )}
+
+      {currentView === 'bags' && (
+        <ProductGrid category="bags" addToCart={addToCart} fullPage={true} />
+      )}
+
+      <Footer navigateTo={navigateTo} />
+
+      {showAuthModal && (
+        <AuthModal 
+          mode={authMode}
+          onClose={() => setShowAuthModal(false)}
+          onLogin={handleLogin}
+          onSwitchMode={(mode) => setAuthMode(mode)}
+        />
+      )}
+    </div>
+  );
+};
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+
+export default App;

frontend/src/components.js

@@ -0,0 +1,1121 @@
+import React, { useState } from 'react';
+
+// Enhanced Mock Data for Indian Market
+const mockProducts = {
+  'featured': [
+    {
+      id: 1,
+      name: 'Premium Business Cards',
+      description: 'High-quality 350 GSM cards with matte finish. Perfect for professionals.',
+      image: 'https://images.unsplash.com/photo-1626148750586-df6e1b0bebf2?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2MzR8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGNhcmRzfGVufDB8fHxibHVlfDE3NTA3MDI0NTl8MA&ixlib=rb-4.1.0&q=85',
+      price: 499,
+      originalPrice: 699,
+      category: 'Popular'
+    },
+    {
+      id: 2,
+      name: 'Custom T-Shirts',
+      description: 'Premium cotton t-shirts with custom printing. Available in multiple colors.',
+      image: 'https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg',
+      price: 399,
+      originalPrice: 499,
+      category: 'Apparel'
+    },
+    {
+      id: 3,
+      name: 'Promotional Flyers',
+      description: 'A4 size flyers on 130 GSM paper. Perfect for marketing campaigns.',
+      image: 'https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg',
+      price: 299,
+      originalPrice: 399,
+      category: 'Marketing'
+    },
+    {
+      id: 4,
+      name: 'Corporate Mugs',
+      description: 'Ceramic mugs with company logo. Dishwasher safe and durable.',
+      image: 'https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg',
+      price: 199,
+      originalPrice: 299,
+      category: 'Drinkware'
+    }
+  ],
+  'visiting-cards': [
+    {
+      id: 5,
+      name: 'Standard Visiting Cards',
+      description: '350 GSM art paper with glossy finish. 500 cards per pack.',
+      image: 'https://images.unsplash.com/photo-1626148750586-df6e1b0bebf2?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2MzR8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMGNhcmRzfGVufDB8fHxibHVlfDE3NTA3MDI0NTl8MA&ixlib=rb-4.1.0&q=85',
+      price: 299,
+      originalPrice: 399,
+      category: 'Standard'
+    },
+    {
+      id: 6,
+      name: 'Premium Visiting Cards',
+      description: '400 GSM cardstock with matte lamination. Luxury feel.',
+      image: 'https://images.unsplash.com/photo-1626148749751-1aada0bca59a?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NDQ2MzR8MHwxfHNlYXJjaHwzfHxidXNpbmVzcyUyMGNhcmRzfGVufDB8fHxibHVlfDE3NTA3MDI0NTl8MA&ixlib=rb-4.1.0&q=85',
+      price: 599,
+      originalPrice: 799,
+      category: 'Premium'
+    },
+    {
+      id: 7,
+      name: 'Eco-Friendly Cards',
+      description: 'Made from recycled paper. Environment-friendly option.',
+      image: 'https://images.unsplash.com/photo-1588829608152-e7accc3c7eef?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwyfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 399,
+      originalPrice: 499,
+      category: 'Eco'
+    },
+    {
+      id: 8,
+      name: 'Metallic Foil Cards',
+      description: 'Premium cards with gold/silver foil printing. Luxury finish.',
+      image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwzfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 899,
+      originalPrice: 1199,
+      category: 'Luxury'
+    }
+  ],
+  'apparel': [
+    {
+      id: 9,
+      name: 'Custom Polo T-Shirts',
+      description: '100% cotton polo shirts with embroidered logo. Corporate wear.',
+      image: 'https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg',
+      price: 549,
+      originalPrice: 699,
+      category: 'Corporate'
+    },
+    {
+      id: 10,
+      name: 'Event T-Shirts',
+      description: 'Lightweight cotton t-shirts perfect for events and promotions.',
+      image: 'https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg',
+      price: 299,
+      originalPrice: 399,
+      category: 'Events'
+    },
+    {
+      id: 11,
+      name: 'Hoodies & Sweatshirts',
+      description: 'Premium hoodies with custom printing. Perfect for corporate gifts.',
+      image: 'https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg',
+      price: 799,
+      originalPrice: 999,
+      category: 'Winter'
+    },
+    {
+      id: 12,
+      name: 'Corporate Shirts',
+      description: 'Formal shirts with company logo. Available in multiple colors.',
+      image: 'https://images.unsplash.com/photo-1617695744007-68ef55752789?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwxfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 899,
+      originalPrice: 1199,
+      category: 'Formal'
+    }
+  ],
+  'stationery': [
+    {
+      id: 13,
+      name: 'Custom Notebooks',
+      description: 'A5 size notebooks with company branding. 200 pages.',
+      image: 'https://images.unsplash.com/photo-1588829608152-e7accc3c7eef?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwyfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 149,
+      originalPrice: 199,
+      category: 'Office'
+    },
+    {
+      id: 14,
+      name: 'Letterheads',
+      description: 'A4 letterheads on premium paper. Professional look.',
+      image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwzfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 199,
+      originalPrice: 299,
+      category: 'Corporate'
+    },
+    {
+      id: 15,
+      name: 'File Folders',
+      description: 'Custom printed file folders for office organization.',
+      image: 'https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg',
+      price: 99,
+      originalPrice: 149,
+      category: 'Office'
+    },
+    {
+      id: 16,
+      name: 'Desk Calendars',
+      description: '12-month desk calendars with custom design and branding.',
+      image: 'https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg',
+      price: 299,
+      originalPrice: 399,
+      category: 'Promotional'
+    }
+  ],
+  'marketing': [
+    {
+      id: 17,
+      name: 'Promotional Banners',
+      description: 'Vinyl banners for outdoor advertising. Weather resistant.',
+      image: 'https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg',
+      price: 899,
+      originalPrice: 1199,
+      category: 'Outdoor'
+    },
+    {
+      id: 18,
+      name: 'Brochures',
+      description: 'Tri-fold brochures on glossy paper. Perfect for marketing.',
+      image: 'https://images.unsplash.com/photo-1617695744007-68ef55752789?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwxfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 399,
+      originalPrice: 499,
+      category: 'Print'
+    },
+    {
+      id: 19,
+      name: 'Standees',
+      description: 'Roll-up standees for exhibitions and events. Portable design.',
+      image: 'https://images.unsplash.com/photo-1588829608152-e7accc3c7eef?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwyfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 1299,
+      originalPrice: 1599,
+      category: 'Exhibition'
+    },
+    {
+      id: 20,
+      name: 'Poster Printing',
+      description: 'A3 and A2 size posters on premium paper. High resolution.',
+      image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwzfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 199,
+      originalPrice: 299,
+      category: 'Print'
+    }
+  ],
+  'drinkware': [
+    {
+      id: 21,
+      name: 'Ceramic Mugs',
+      description: 'White ceramic mugs with custom printing. 11 oz capacity.',
+      image: 'https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg',
+      price: 149,
+      originalPrice: 199,
+      category: 'Office'
+    },
+    {
+      id: 22,
+      name: 'Stainless Steel Bottles',
+      description: 'Insulated steel bottles with laser engraving. 500ml capacity.',
+      image: 'https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg',
+      price: 399,
+      originalPrice: 499,
+      category: 'Premium'
+    },
+    {
+      id: 23,
+      name: 'Glass Bottles',
+      description: 'Eco-friendly glass bottles with custom branding.',
+      image: 'https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg',
+      price: 299,
+      originalPrice: 399,
+      category: 'Eco'
+    },
+    {
+      id: 24,
+      name: 'Travel Mugs',
+      description: 'Insulated travel mugs with spill-proof lid. Perfect for commuters.',
+      image: 'https://images.unsplash.com/photo-1617695744007-68ef55752789?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwxfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 449,
+      originalPrice: 599,
+      category: 'Travel'
+    }
+  ],
+  'gadgets': [
+    {
+      id: 25,
+      name: 'Power Banks',
+      description: '10000mAh power banks with custom branding. Dual USB output.',
+      image: 'https://images.unsplash.com/photo-1588829608152-e7accc3c7eef?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwyfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 799,
+      originalPrice: 999,
+      category: 'Electronics'
+    },
+    {
+      id: 26,
+      name: 'USB Drives',
+      description: 'Custom USB drives with company logo. 16GB capacity.',
+      image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwzfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 399,
+      originalPrice: 499,
+      category: 'Storage'
+    },
+    {
+      id: 27,
+      name: 'Bluetooth Speakers',
+      description: 'Portable speakers with custom branding. Excellent sound quality.',
+      image: 'https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg',
+      price: 1299,
+      originalPrice: 1599,
+      category: 'Audio'
+    },
+    {
+      id: 28,
+      name: 'Mobile Stands',
+      description: 'Adjustable mobile phone stands with company logo.',
+      image: 'https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg',
+      price: 199,
+      originalPrice: 299,
+      category: 'Accessories'
+    }
+  ],
+  'bags': [
+    {
+      id: 29,
+      name: 'Canvas Tote Bags',
+      description: 'Eco-friendly canvas bags with custom printing. Reusable and durable.',
+      image: 'https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg',
+      price: 199,
+      originalPrice: 299,
+      category: 'Eco'
+    },
+    {
+      id: 30,
+      name: 'Laptop Bags',
+      description: 'Professional laptop bags with company branding. 15.6 inch compatible.',
+      image: 'https://images.unsplash.com/photo-1617695744007-68ef55752789?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwxfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 899,
+      originalPrice: 1199,
+      category: 'Professional'
+    },
+    {
+      id: 31,
+      name: 'Backpacks',
+      description: 'Custom backpacks for corporate events and employee gifts.',
+      image: 'https://images.unsplash.com/photo-1588829608152-e7accc3c7eef?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwyfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 699,
+      originalPrice: 899,
+      category: 'Corporate'
+    },
+    {
+      id: 32,
+      name: 'Jute Bags',
+      description: 'Natural jute bags with custom printing. Environment-friendly option.',
+      image: 'https://images.unsplash.com/photo-1504711434969-e33886168f5c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwzfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85',
+      price: 149,
+      originalPrice: 199,
+      category: 'Eco'
+    }
+  ]
+};
+
+// Header Component with modern Hyzo branding
+const Header = ({ cartItems, navigateTo, selectCategory, user, onLogin, onLogout }) => {
+  return (
+    <header className="bg-white shadow-lg border-b border-purple-100">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between py-4">
+          <div 
+            className="text-3xl font-bold cursor-pointer hyzo-logo"
+            onClick={() => navigateTo('home')}
+          >
+            <span className="bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent">
+              Hyzo
+            </span>
+          </div>
+          
+          <div className="flex items-center space-x-6">
+            <button className="flex items-center text-gray-700 hover:text-purple-600 transition-colors">
+              <span className="mr-1">📞</span>
+              Support
+            </button>
+            <button className="relative flex items-center text-gray-700 hover:text-purple-600 transition-colors">
+              <span className="mr-1">🛒</span>
+              Cart
+              {cartItems.length > 0 && (
+                <span className="absolute -top-2 -right-2 bg-gradient-to-r from-purple-500 to-teal-500 text-white rounded-full w-5 h-5 text-xs flex items-center justify-center">
+                  {cartItems.length}
+                </span>
+              )}
+            </button>
+            {user ? (
+              <div className="flex items-center space-x-4">
+                <span className="text-gray-700">Hi, {user.name}!</span>
+                <button 
+                  className="bg-gradient-to-r from-purple-500 to-teal-500 text-white px-4 py-2 rounded-lg hover:from-purple-600 hover:to-teal-600 transition-all"
+                  onClick={onLogout}
+                >
+                  Logout
+                </button>
+              </div>
+            ) : (
+              <button 
+                className="bg-gradient-to-r from-purple-500 to-teal-500 text-white px-6 py-2 rounded-lg hover:from-purple-600 hover:to-teal-600 transition-all"
+                onClick={onLogin}
+              >
+                Login
+              </button>
+            )}
+          </div>
+        </div>
+        
+        <nav className="border-t border-gray-200">
+          <div className="flex space-x-8 py-3 text-sm">
+            <button className="text-gray-700 hover:text-purple-600 transition-colors">
+              Umbrellas & Raincoats
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('visiting-cards')}
+            >
+              Visiting Cards & ID Cards
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('stationery')}
+            >
+              Stationery & Office Supplies
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('apparel')}
+            >
+              Apparel
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('marketing')}
+            >
+              Marketing
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('drinkware')}
+            >
+              Drinkware & Lunchboxes
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('gadgets')}
+            >
+              Gadgets and Accessories
+            </button>
+            <button 
+              className="text-gray-700 hover:text-purple-600 transition-colors"
+              onClick={() => selectCategory('bags')}
+            >
+              Bags
+            </button>
+            <button className="text-gray-700 hover:text-purple-600 transition-colors">
+              Kits & Hampers
+            </button>
+            <button className="text-gray-700 hover:text-purple-600 transition-colors">
+              More
+            </button>
+          </div>
+        </nav>
+      </div>
+    </header>
+  );
+};
+
+// Hero Component with modern gradient design
+const Hero = ({ navigateTo, selectCategory }) => {
+  return (
+    <section className="relative bg-gradient-to-br from-purple-600 via-teal-500 to-blue-600 py-20 overflow-hidden modern-hero">
+      {/* Animated background elements */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute top-20 left-20 w-32 h-32 bg-white rounded-full floating-slow"></div>
+        <div className="absolute top-40 right-32 w-24 h-24 bg-yellow-300 rounded-full floating-medium"></div>
+        <div className="absolute bottom-32 left-1/4 w-40 h-40 bg-pink-300 rounded-full floating-fast"></div>
+        <div className="absolute bottom-20 right-20 w-28 h-28 bg-green-300 rounded-full floating-slow"></div>
+      </div>
+      
+      <div className="container mx-auto px-4 text-center relative z-10">
+        <div className="bg-white/90 backdrop-blur-lg rounded-3xl shadow-2xl p-12 max-w-3xl mx-auto border border-white/20">
+          <h2 className="text-xl text-gray-700 mb-4 font-medium">Premium Printing Solutions</h2>
+          <h1 className="text-7xl font-black text-transparent bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text mb-8 tracking-tight">
+            Hyzo
+          </h1>
+          <p className="text-lg text-gray-600 mb-8 max-w-2xl mx-auto">
+            Transform your ideas into stunning printed materials with our cutting-edge technology and premium quality services.
+          </p>
+          <button 
+            className="bg-gradient-to-r from-purple-600 to-teal-500 text-white px-12 py-4 rounded-xl font-semibold hover:from-purple-700 hover:to-teal-600 transition-all transform hover:scale-105 shadow-lg text-lg"
+            onClick={() => selectCategory('featured')}
+          >
+            Explore Products
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Key Features Component with modern icons
+const KeyFeatures = () => {
+  const features = [
+    {
+      icon: '🎨',
+      title: 'AI-Powered Design',
+      description: 'Smart design tools with AI assistance'
+    },
+    {
+      icon: '⚡',
+      title: 'Lightning Fast',
+      description: '24-hour express delivery available'
+    },
+    {
+      icon: '🌍',
+      title: 'Global Quality',
+      description: 'International printing standards'
+    },
+    {
+      icon: '💎',
+      title: 'Premium Materials',
+      description: 'Luxury finishes and materials'
+    }
+  ];
+
+  return (
+    <section className="py-16 bg-gradient-to-br from-gray-50 to-purple-50">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="text-center group hover:transform hover:scale-105 transition-all duration-300">
+              <div className="text-5xl mb-6 group-hover:animate-bounce">{feature.icon}</div>
+              <h3 className="font-bold text-gray-800 mb-3 text-lg">{feature.title}</h3>
+              <p className="text-gray-600">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Product Grid Component
+const ProductGrid = ({ category, addToCart, fullPage = false }) => {
+  const getProducts = () => {
+    if (category === 'all' || category === 'featured') {
+      return Object.values(mockProducts).flat();
+    }
+    return mockProducts[category] || [];
+  };
+
+  const products = getProducts();
+  const categoryNames = {
+    'featured': 'Featured Products',
+    'visiting-cards': 'Visiting Cards & ID Cards',
+    'stationery': 'Stationery & Office Supplies',
+    'apparel': 'Apparel & Clothing',
+    'marketing': 'Marketing Materials',
+    'drinkware': 'Drinkware & Lunchboxes',
+    'gadgets': 'Gadgets & Accessories',
+    'bags': 'Bags & Carry Items',
+    'all': 'All Products'
+  };
+
+  return (
+    <section className={`py-12 ${fullPage ? 'min-h-screen bg-gradient-to-br from-purple-50 to-teal-50' : ''}`}>
+      <div className="container mx-auto px-4">
+        {fullPage && (
+          <div className="mb-12 text-center">
+            <h1 className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent mb-4">
+              {categoryNames[category] || 'Products'}
+            </h1>
+            <p className="text-gray-600 text-lg max-w-2xl mx-auto">
+              Discover our premium collection of printing solutions designed to elevate your brand and business presence.
+            </p>
+          </div>
+        )}
+
+        {!fullPage && (
+          <div className="mb-12 text-center">
+            <h2 className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent mb-4">
+              Featured Products
+            </h2>
+            <p className="text-gray-600 text-lg max-w-2xl mx-auto">
+              High-quality printing solutions at the best prices in India. Free delivery across major cities.
+            </p>
+          </div>
+        )}
+
+        <div className="grid grid-cols-4 gap-8">
+          {products.map((product) => (
+            <div key={product.id} className="bg-white rounded-2xl shadow-lg overflow-hidden hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 product-card-modern">
+              <div className="relative overflow-hidden">
+                <img
+                  src={product.image}
+                  alt={product.name}
+                  className="w-full h-56 object-cover transition-transform duration-300 hover:scale-110"
+                />
+                <div className="absolute top-4 right-4">
+                  {product.originalPrice && (
+                    <span className="bg-gradient-to-r from-green-500 to-emerald-500 text-white text-sm px-3 py-1 rounded-full font-bold shadow-lg">
+                      {Math.round(((product.originalPrice - product.price) / product.originalPrice) * 100)}% OFF
+                    </span>
+                  )}
+                </div>
+              </div>
+              <div className="p-6">
+                <h3 className="font-bold text-gray-800 mb-3 text-lg">{product.name}</h3>
+                <p className="text-gray-600 text-sm mb-4 line-clamp-2">{product.description}</p>
+                <div className="flex justify-between items-center mb-4">
+                  <div>
+                    <span className="text-2xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent">
+                      ₹{product.price}
+                    </span>
+                    {product.originalPrice && (
+                      <span className="text-sm text-gray-500 line-through ml-2">₹{product.originalPrice}</span>
+                    )}
+                  </div>
+                </div>
+                <button 
+                  className="w-full bg-gradient-to-r from-purple-600 to-teal-500 text-white px-6 py-3 rounded-xl hover:from-purple-700 hover:to-teal-600 transition-all transform hover:scale-105 font-semibold shadow-lg"
+                  onClick={() => addToCart(product)}
+                >
+                  Add to Cart
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Design Studio Component
+const DesignStudio = ({ navigateTo, fullPage = false, user, openAuth }) => {
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  
+  const templates = [
+    { id: 1, name: 'Modern Gradient', category: 'Business', preview: 'https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg' },
+    { id: 2, name: 'Professional Teal', category: 'Corporate', preview: 'https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg' },
+    { id: 3, name: 'Creative Purple', category: 'Creative', preview: 'https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg' },
+    { id: 4, name: 'Elegant Design', category: 'Premium', preview: 'https://images.unsplash.com/photo-1617695744007-68ef55752789?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwxfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85' }
+  ];
+
+  const handleStartDesigning = () => {
+    if (!user) {
+      openAuth();
+      return;
+    }
+    // Proceed with design
+    alert('Design studio feature coming soon!');
+  };
+
+  if (fullPage) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-purple-50 to-teal-50">
+        <div className="container mx-auto px-4 py-12">
+          <h1 className="text-5xl font-bold text-center mb-4 bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent">
+            AI-Powered Design Studio
+          </h1>
+          <p className="text-center text-gray-600 mb-12 text-lg">Create stunning designs with our intelligent design tools</p>
+          
+          <div className="grid grid-cols-2 gap-12">
+            <div>
+              <h2 className="text-2xl font-bold mb-6">Choose a Template</h2>
+              <div className="grid grid-cols-2 gap-6">
+                {templates.map((template) => (
+                  <div
+                    key={template.id}
+                    className={`border-2 rounded-xl p-4 cursor-pointer transition-all duration-300 ${
+                      selectedTemplate?.id === template.id 
+                        ? 'border-purple-500 bg-purple-50 shadow-lg transform scale-105' 
+                        : 'border-gray-200 hover:border-purple-300 hover:shadow-md'
+                    }`}
+                    onClick={() => setSelectedTemplate(template)}
+                  >
+                    <img src={template.preview} alt={template.name} className="w-full h-32 object-cover rounded-lg mb-3" />
+                    <h3 className="font-semibold text-gray-800">{template.name}</h3>
+                    <p className="text-sm text-gray-600">{template.category}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+            <div>
+              <h2 className="text-2xl font-bold mb-6">Design Canvas</h2>
+              <div className="bg-white border-2 border-dashed border-purple-300 rounded-xl h-96 flex items-center justify-center shadow-inner">
+                {selectedTemplate ? (
+                  <div className="text-center">
+                    <img src={selectedTemplate.preview} alt="Design Preview" className="w-64 h-40 object-cover rounded-lg mb-6 mx-auto shadow-lg" />
+                    <h3 className="font-semibold mb-4 text-xl">{selectedTemplate.name}</h3>
+                    <button 
+                      className="bg-gradient-to-r from-purple-600 to-teal-500 text-white px-8 py-3 rounded-xl hover:from-purple-700 hover:to-teal-600 transition-all font-semibold shadow-lg"
+                      onClick={handleStartDesigning}
+                    >
+                      {user ? 'Start Editing - ₹99' : 'Login to Start Designing'}
+                    </button>
+                  </div>
+                ) : (
+                  <p className="text-gray-500 text-lg">Select a template to start designing</p>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <section className="py-20 bg-gradient-to-r from-purple-600 via-blue-600 to-teal-500">
+      <div className="container mx-auto px-4 text-center">
+        <h2 className="text-5xl font-bold text-white mb-6">AI-Powered Design Studio</h2>
+        <p className="text-xl text-white/90 mb-10 max-w-2xl mx-auto">
+          Create stunning designs with our intelligent design tools. From business cards to banners, design like a pro in minutes.
+        </p>
+        <button 
+          className="bg-white text-purple-600 px-12 py-4 rounded-xl font-bold hover:bg-gray-100 transition-all transform hover:scale-105 shadow-xl text-lg"
+          onClick={() => navigateTo('design-studio')}
+        >
+          Launch Design Studio
+        </button>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced B2B Section Component
+const B2BSection = ({ navigateTo, fullPage = false }) => {
+  if (fullPage) {
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-blue-50 to-purple-50">
+        <div className="container mx-auto px-4 py-12">
+          <h1 className="text-5xl font-bold text-center mb-4 bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent">
+            Enterprise Solutions
+          </h1>
+          <p className="text-center text-gray-600 mb-12 text-lg">Scalable printing solutions for growing businesses</p>
+          
+          <div className="grid grid-cols-2 gap-12">
+            <div>
+              <h2 className="text-3xl font-bold mb-6">Bulk Pricing (INR)</h2>
+              <div className="bg-white p-8 rounded-2xl shadow-xl border border-purple-100">
+                <div className="space-y-6">
+                  <div className="flex justify-between items-center py-3 border-b border-gray-100">
+                    <span className="text-lg">1-50 units</span>
+                    <span className="font-bold text-xl">₹299 each</span>
+                  </div>
+                  <div className="flex justify-between items-center py-3 border-b border-gray-100">
+                    <span className="text-lg">51-200 units</span>
+                    <span className="font-bold text-xl text-green-600">₹249 each (15% off)</span>
+                  </div>
+                  <div className="flex justify-between items-center py-3 border-b border-gray-100">
+                    <span className="text-lg">201-500 units</span>
+                    <span className="font-bold text-xl text-green-600">₹199 each (25% off)</span>
+                  </div>
+                  <div className="flex justify-between items-center py-3">
+                    <span className="text-lg">500+ units</span>
+                    <span className="font-bold text-xl text-green-600">₹149 each (40% off)</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div>
+              <h2 className="text-3xl font-bold mb-6">Enterprise Features</h2>
+              <div className="bg-white p-8 rounded-2xl shadow-xl border border-purple-100">
+                <ul className="space-y-4">
+                  <li className="flex items-center">
+                    <span className="text-green-500 mr-3 text-xl">✓</span>
+                    <span className="text-lg">Dedicated Account Manager</span>
+                  </li>
+                  <li className="flex items-center">
+                    <span className="text-green-500 mr-3 text-xl">✓</span>
+                    <span className="text-lg">Custom Quote Requests</span>
+                  </li>
+                  <li className="flex items-center">
+                    <span className="text-green-500 mr-3 text-xl">✓</span>
+                    <span className="text-lg">Priority Production Queue</span>
+                  </li>
+                  <li className="flex items-center">
+                    <span className="text-green-500 mr-3 text-xl">✓</span>
+                    <span className="text-lg">API Integration Support</span>
+                  </li>
+                  <li className="flex items-center">
+                    <span className="text-green-500 mr-3 text-xl">✓</span>
+                    <span className="text-lg">GST Invoice & Compliance</span>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-blue-50 to-purple-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-5xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent mb-6">
+            Enterprise Solutions
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Scale your business with our enterprise-grade printing solutions and dedicated support
+          </p>
+        </div>
+        <div className="grid grid-cols-3 gap-10">
+          <div className="text-center group">
+            <div className="bg-gradient-to-br from-purple-100 to-teal-100 p-8 rounded-2xl mb-6 group-hover:shadow-xl transition-all duration-300">
+              <img
+                src="https://images.pexels.com/photos/7764020/pexels-photo-7764020.jpeg"
+                alt="Bulk Orders"
+                className="w-full h-48 object-cover rounded-xl mb-4"
+              />
+            </div>
+            <h3 className="text-2xl font-bold mb-3">Volume Discounts</h3>
+            <p className="text-gray-600">Save up to 40% on bulk orders with tiered pricing</p>
+          </div>
+          <div className="text-center group">
+            <div className="bg-gradient-to-br from-purple-100 to-teal-100 p-8 rounded-2xl mb-6 group-hover:shadow-xl transition-all duration-300">
+              <img
+                src="https://images.pexels.com/photos/7763960/pexels-photo-7763960.jpeg"
+                alt="Support"
+                className="w-full h-48 object-cover rounded-xl mb-4"
+              />
+            </div>
+            <h3 className="text-2xl font-bold mb-3">Dedicated Support</h3>
+            <p className="text-gray-600">Personal account manager for enterprise clients</p>
+          </div>
+          <div className="text-center group">
+            <div className="bg-gradient-to-br from-purple-100 to-teal-100 p-8 rounded-2xl mb-6 group-hover:shadow-xl transition-all duration-300">
+              <img
+                src="https://images.unsplash.com/photo-1617695744007-68ef55752789?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwxfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85"
+                alt="Integration"
+                className="w-full h-48 object-cover rounded-xl mb-4"
+              />
+            </div>
+            <h3 className="text-2xl font-bold mb-3">API Integration</h3>
+            <p className="text-gray-600">Seamless integration with your existing systems</p>
+          </div>
+        </div>
+        <div className="text-center mt-12">
+          <button 
+            className="bg-gradient-to-r from-purple-600 to-teal-500 text-white px-12 py-4 rounded-xl font-bold hover:from-purple-700 hover:to-teal-600 transition-all transform hover:scale-105 shadow-xl text-lg"
+            onClick={() => navigateTo('b2b')}
+          >
+            Get Enterprise Quote
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Sustainability Section
+const SustainabilitySection = () => {
+  return (
+    <section className="py-20 bg-gradient-to-br from-green-50 to-emerald-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-5xl font-bold bg-gradient-to-r from-green-600 to-emerald-500 bg-clip-text text-transparent mb-6">
+            Sustainable Printing
+          </h2>
+          <p className="text-xl text-gray-600 max-w-2xl mx-auto">
+            Committed to environmental responsibility with eco-friendly printing solutions
+          </p>
+        </div>
+        <div className="grid grid-cols-3 gap-10">
+          <div className="text-center group">
+            <div className="text-8xl mb-6 group-hover:animate-bounce transition-all">🌱</div>
+            <h3 className="text-2xl font-bold mb-4">Recycled Materials</h3>
+            <p className="text-gray-600 text-lg">100% recycled paper options with premium quality finish</p>
+          </div>
+          <div className="text-center group">
+            <div className="text-8xl mb-6 group-hover:animate-bounce transition-all">🌿</div>
+            <h3 className="text-2xl font-bold mb-4">Eco-Friendly Inks</h3>
+            <p className="text-gray-600 text-lg">Water-based and soy-based inks for safe printing</p>
+          </div>
+          <div className="text-center group">
+            <div className="text-8xl mb-6 group-hover:animate-bounce transition-all">♻️</div>
+            <h3 className="text-2xl font-bold mb-4">Carbon Neutral</h3>
+            <p className="text-gray-600 text-lg">Offsetting carbon footprint for every order placed</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Testimonials Section
+const TestimonialsSection = () => {
+  const testimonials = [
+    {
+      name: "Arjun Mehta",
+      company: "Tech Innovators Pvt Ltd",
+      text: "Hyzo's quality and service exceeded our expectations. The AI design tools saved us hours of work!",
+      avatar: "https://images.unsplash.com/photo-1588829608152-e7accc3c7eef?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwyfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85",
+      rating: 5
+    },
+    {
+      name: "Sneha Patel",
+      company: "Creative Solutions Agency",
+      text: "The premium materials and lightning-fast delivery make Hyzo our go-to printing partner.",
+      avatar: "https://images.unsplash.com/photo-1504711434969-e33886168f5c?crop=entropy&cs=srgb&fm=jpg&ixid=M3w3NTY2Nzd8MHwxfHNlYXJjaHwzfHxwcmludGluZ3xlbnwwfHx8Ymx1ZXwxNzUwNzAyNDUwfDA&ixlib=rb-4.1.0&q=85",
+      rating: 5
+    },
+    {
+      name: "Rahul Sharma",
+      company: "Global Enterprises",
+      text: "Enterprise features and bulk pricing helped us scale efficiently. Highly recommend for businesses!",
+      avatar: "https://images.pexels.com/photos/7135121/pexels-photo-7135121.jpeg",
+      rating: 5
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-gray-50 to-purple-50">
+      <div className="container mx-auto px-4">
+        <div className="text-center mb-16">
+          <h2 className="text-5xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent mb-6">
+            Customer Success Stories
+          </h2>
+          <p className="text-xl text-gray-600">Join thousands of satisfied customers across India</p>
+        </div>
+        <div className="grid grid-cols-3 gap-10">
+          {testimonials.map((testimonial, index) => (
+            <div key={index} className="bg-white p-8 rounded-2xl shadow-xl hover:shadow-2xl transition-all duration-300 border border-purple-100">
+              <div className="flex items-center mb-6">
+                <img
+                  src={testimonial.avatar}
+                  alt={testimonial.name}
+                  className="w-16 h-16 rounded-full object-cover mr-4 border-2 border-purple-200"
+                />
+                <div>
+                  <h4 className="font-bold text-gray-800 text-lg">{testimonial.name}</h4>
+                  <p className="text-gray-600">{testimonial.company}</p>
+                </div>
+              </div>
+              <div className="flex mb-4">
+                {[...Array(testimonial.rating)].map((_, i) => (
+                  <span key={i} className="text-yellow-400 text-xl">⭐</span>
+                ))}
+              </div>
+              <p className="text-gray-700 italic text-lg">"{testimonial.text}"</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+// Enhanced Footer Component
+const Footer = ({ navigateTo }) => {
+  return (
+    <footer className="bg-gradient-to-br from-gray-900 to-purple-900 text-white py-16">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-4 gap-12">
+          <div>
+            <h3 className="text-2xl font-bold mb-6 bg-gradient-to-r from-purple-400 to-teal-400 bg-clip-text text-transparent">
+              Hyzo
+            </h3>
+            <p className="text-gray-300 mb-6 text-lg">
+              India's most advanced online printing platform with AI-powered design tools.
+            </p>
+            <div className="text-gray-300 space-y-2">
+              <p>📍 Mumbai | Delhi | Bangalore</p>
+              <p>📞 +91-9876543210</p>
+              <p>📧 [email protected]</p>
+            </div>
+          </div>
+          <div>
+            <h4 className="font-bold mb-6 text-lg">Products</h4>
+            <ul className="space-y-3 text-gray-300">
+              <li><button className="hover:text-purple-400 transition-colors">Business Cards</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Custom Apparel</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Marketing Materials</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Corporate Gifts</button></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="font-bold mb-6 text-lg">Services</h4>
+            <ul className="space-y-3 text-gray-300">
+              <li><button className="hover:text-purple-400 transition-colors" onClick={() => navigateTo('design-studio')}>AI Design Studio</button></li>
+              <li><button className="hover:text-purple-400 transition-colors" onClick={() => navigateTo('b2b')}>Enterprise Solutions</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Express Delivery</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Custom Solutions</button></li>
+            </ul>
+          </div>
+          <div>
+            <h4 className="font-bold mb-6 text-lg">Support</h4>
+            <ul className="space-y-3 text-gray-300">
+              <li><button className="hover:text-purple-400 transition-colors">Help Center</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Track Order</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Return Policy</button></li>
+              <li><button className="hover:text-purple-400 transition-colors">Contact Support</button></li>
+            </ul>
+          </div>
+        </div>
+        <div className="border-t border-gray-700 mt-12 pt-8 text-center text-gray-400">
+          <p>&copy; 2025 Hyzo India. All rights reserved. | GST: 27HYZO1234X1Z5</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+// Authentication Modal Component
+const AuthModal = ({ mode, onClose, onLogin, onSwitchMode }) => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    password: '',
+    confirmPassword: ''
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    // Simulate API call
+    setTimeout(() => {
+      if (mode === 'signup') {
+        if (formData.password !== formData.confirmPassword) {
+          alert('Passwords do not match!');
+          setIsLoading(false);
+          return;
+        }
+      }
+
+      // Mock successful authentication
+      const userData = {
+        name: formData.name || formData.email.split('@')[0],
+        email: formData.email,
+        id: Date.now()
+      };
+
+      onLogin(userData);
+      setIsLoading(false);
+    }, 1000);
+  };
+
+  const handleChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 relative">
+        <button 
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 text-2xl"
+        >
+          ×
+        </button>
+        
+        <div className="text-center mb-8">
+          <h2 className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-teal-500 bg-clip-text text-transparent mb-2">
+            {mode === 'login' ? 'Welcome Back' : 'Join Hyzo'}
+          </h2>
+          <p className="text-gray-600">
+            {mode === 'login' ? 'Sign in to your account' : 'Create your account to get started'}
+          </p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-6">
+          {mode === 'signup' && (
+            <div>
+              <label className="block text-gray-700 font-semibold mb-2">Full Name</label>
+              <input
+                type="text"
+                name="name"
+                value={formData.name}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="Enter your full name"
+                required
+              />
+            </div>
+          )}
+          
+          <div>
+            <label className="block text-gray-700 font-semibold mb-2">Email Address</label>
+            <input
+              type="email"
+              name="email"
+              value={formData.email}
+              onChange={handleChange}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          
+          <div>
+            <label className="block text-gray-700 font-semibold mb-2">Password</label>
+            <input
+              type="password"
+              name="password"
+              value={formData.password}
+              onChange={handleChange}
+              className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+              placeholder="Enter your password"
+              required
+              minLength="6"
+            />
+          </div>
+          
+          {mode === 'signup' && (
+            <div>
+              <label className="block text-gray-700 font-semibold mb-2">Confirm Password</label>
+              <input
+                type="password"
+                name="confirmPassword"
+                value={formData.confirmPassword}
+                onChange={handleChange}
+                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-purple-500 transition-colors"
+                placeholder="Confirm your password"
+                required
+                minLength="6"
+              />
+            </div>
+          )}
+          
+          <button
+            type="submit"
+            disabled={isLoading}
+            className="w-full bg-gradient-to-r from-purple-600 to-teal-500 text-white py-3 rounded-lg font-semibold hover:from-purple-700 hover:to-teal-600 transition-all disabled:opacity-50"
+          >
+            {isLoading ? 'Please wait...' : (mode === 'login' ? 'Sign In' : 'Create Account')}
+          </button>
+        </form>
+        
+        <div className="text-center mt-6">
+          <p className="text-gray-600">
+            {mode === 'login' ? "Don't have an account? " : "Already have an account? "}
+            <button
+              onClick={() => onSwitchMode(mode === 'login' ? 'signup' : 'login')}
+              className="text-purple-600 hover:text-purple-700 font-semibold"
+            >
+              {mode === 'login' ? 'Sign Up' : 'Sign In'}
+            </button>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// Export all components
+const Components = {
+  Header,
+  Hero,
+  KeyFeatures,
+  ProductGrid,
+  DesignStudio,
+  B2BSection,
+  SustainabilitySection,
+  TestimonialsSection,
+  Footer,
+  AuthModal
+};
+
+export default Components;

frontend/src/index.css

@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+        monospace;
+}

frontend/src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

frontend/tailwind.config.js

@@ -0,0 +1,11 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+    "./public/index.html"
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

test_result.md

@@ -0,0 +1,103 @@
+#====================================================================================================
+# START - Testing Protocol - DO NOT EDIT OR REMOVE THIS SECTION
+#====================================================================================================
+
+# THIS SECTION CONTAINS CRITICAL TESTING INSTRUCTIONS FOR BOTH AGENTS
+# BOTH MAIN_AGENT AND TESTING_AGENT MUST PRESERVE THIS ENTIRE BLOCK
+
+# Communication Protocol:
+# If the `testing_agent` is available, main agent should delegate all testing tasks to it.
+#
+# You have access to a file called `test_result.md`. This file contains the complete testing state
+# and history, and is the primary means of communication between main and the testing agent.
+#
+# Main and testing agents must follow this exact format to maintain testing data. 
+# The testing data must be entered in yaml format Below is the data structure:
+# 
+## user_problem_statement: {problem_statement}
+## backend:
+##   - task: "Task name"
+##     implemented: true
+##     working: true  # or false or "NA"
+##     file: "file_path.py"
+##     stuck_count: 0
+##     priority: "high"  # or "medium" or "low"
+##     needs_retesting: false
+##     status_history:
+##         -working: true  # or false or "NA"
+##         -agent: "main"  # or "testing" or "user"
+##         -comment: "Detailed comment about status"
+##
+## frontend:
+##   - task: "Task name"
+##     implemented: true
+##     working: true  # or false or "NA"
+##     file: "file_path.js"
+##     stuck_count: 0
+##     priority: "high"  # or "medium" or "low"
+##     needs_retesting: false
+##     status_history:
+##         -working: true  # or false or "NA"
+##         -agent: "main"  # or "testing" or "user"
+##         -comment: "Detailed comment about status"
+##
+## metadata:
+##   created_by: "main_agent"
+##   version: "1.0"
+##   test_sequence: 0
+##   run_ui: false
+##
+## test_plan:
+##   current_focus:
+##     - "Task name 1"
+##     - "Task name 2"
+##   stuck_tasks:
+##     - "Task name with persistent issues"
+##   test_all: false
+##   test_priority: "high_first"  # or "sequential" or "stuck_first"
+##
+## agent_communication:
+##     -agent: "main"  # or "testing" or "user"
+##     -message: "Communication message between agents"
+
+# Protocol Guidelines for Main agent
+#
+# 1. Update Test Result File Before Testing:
+#    - Main agent must always update the `test_result.md` file before calling the testing agent
+#    - Add implementation details to the status_history
+#    - Set `needs_retesting` to true for tasks that need testing
+#    - Update the `test_plan` section to guide testing priorities
+#    - Add a message to `agent_communication` explaining what you've done
+#
+# 2. Incorporate User Feedback:
+#    - When a user provides feedback that something is or isn't working, add this information to the relevant task's status_history
+#    - Update the working status based on user feedback
+#    - If a user reports an issue with a task that was marked as working, increment the stuck_count
+#    - Whenever user reports issue in the app, if we have testing agent and task_result.md file so find the appropriate task for that and append in status_history of that task to contain the user concern and problem as well 
+#
+# 3. Track Stuck Tasks:
+#    - Monitor which tasks have high stuck_count values or where you are fixing same issue again and again, analyze that when you read task_result.md
+#    - For persistent issues, use websearch tool to find solutions
+#    - Pay special attention to tasks in the stuck_tasks list
+#    - When you fix an issue with a stuck task, don't reset the stuck_count until the testing agent confirms it's working
+#
+# 4. Provide Context to Testing Agent:
+#    - When calling the testing agent, provide clear instructions about:
+#      - Which tasks need testing (reference the test_plan)
+#      - Any authentication details or configuration needed
+#      - Specific test scenarios to focus on
+#      - Any known issues or edge cases to verify
+#
+# 5. Call the testing agent with specific instructions referring to test_result.md
+#
+# IMPORTANT: Main agent must ALWAYS update test_result.md BEFORE calling the testing agent, as it relies on this file to understand what to test next.
+
+#====================================================================================================
+# END - Testing Protocol - DO NOT EDIT OR REMOVE THIS SECTION
+#====================================================================================================
+
+
+
+#====================================================================================================
+# Testing Data - Main Agent and testing sub agent both should log testing data below this section
+#====================================================================================================

yarn.lock

@@ -0,0 +1,4 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+