من میخوام یک وبسایت فروشگاهی راه اندازی کنم و میخوام صفحه ی اصلی این وبسایت و مواردی که نیاز داره رو به صورت استاتیک طراحی کنی. دقت کن تمام مواردی که یک وبسایت حرفه ای نیاز داره رو در این صفحه پیاده سازی کن

README.md

@@ -1,10 +1,13 @@
 ---
-title: Vip
-emoji: 📉
-colorFrom: red
-colorTo: green
+title: شاپ‌ویستا - بوتیک دیجیتال VIP 🛍️
+colorFrom: yellow
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,230 @@
+```javascript
+class ShopNavbar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this.cartCount = 0;
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        * {
+          margin: 0;
+          padding: 0;
+          box-sizing: border-box;
+        }
+        
+        nav {
+          background: rgba(255, 255, 255, 0.95);
+          backdrop-filter: blur(10px);
+          box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          transition: all 0.3s ease;
+        }
+        
+        .nav-container {
+          max-width: 1400px;
+          margin: 0 auto;
+          padding: 0 2rem;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 80px;
+        }
+        
+        .logo {
+          font-family: 'Inter', sans-serif;
+          font-size: 1.8rem;
+          font-weight: 800;
+          background: linear-gradient(135deg, #6366f1, #9333ea);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          text-decoration: none;
+        }
+        
+        .nav-menu {
+          display: flex;
+          list-style: none;
+          gap: 2rem;
+          align-items: center;
+        }
+        
+        .nav-link {
+          color: #374151;
+          text-decoration: none;
+          font-weight: 500;
+          font-size: 0.95rem;
+          transition: color 0.3s ease;
+          position: relative;
+        }
+        
+        .nav-link:hover {
+          color: #6366f1;
+        }
+        
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 2px;
+          background: #6366f1;
+          transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover::after {
+          width: 100%;
+        }
+        
+        .nav-actions {
+          display: flex;
+          align-items: center;
+          gap: 1rem;
+        }
+        
+        .cart-btn, .search-btn, .profile-btn, .theme-toggle {
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0.5rem;
+          border-radius: 50%;
+          transition: all 0.3s ease;
+          position: relative;
+        }
+        
+        .cart-btn:hover, .search-btn:hover, .profile-btn:hover, .theme-toggle:hover {
+          background: #f3f4f6;
+          transform: scale(1.1);
+        }
+        
+        .cart-count {
+          position: absolute;
+          top: -5px;
+          right: -5px;
+          background: #ef4444;
+          color: white;
+          border-radius: 50%;
+          width: 20px;
+          height: 20px;
+          font-size: 0.75rem;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        .search-input {
+          position: absolute;
+          top: 100%;
+          right: 0;
+          background: white;
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+          padding: 0.75rem;
+          width: 300px;
+          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+          display: none;
+        }
+        
+        .search-input.active {
+          display: block;
+        }
+        
+        .mobile-menu-btn {
+          display: none;
+        }
+        
+        @media (max-width: 768px) {
+          .nav-menu {
+            display: none;
+          }
+          
+          .mobile-menu-btn {
+            display: block;
+          }
+          
+          .search-input {
+            width: 250px;
+          }
+        }
+      </style>
+      
+      <nav>
+        <div class="nav-container">
+          <a href="/" class="logo">شاپ‌ویستا</a>
+          
+          <ul class="nav-menu">
+            <li><a href="/" class="nav-link">صفحه اصلی</a></li>
+            <li><a href="/category.html" class="nav-link">دسته‌بندی‌ها</a></li>
+            <li><a href="/products.html" class="nav-link">محصولات</a></li>
+            <li><a href="/brands.html" class="nav-link">برندها</a></li>
+            <li><a href="/deals.html" class="nav-link">تخفیف‌ها</a></li>
+            <li><a href="/blog.html" class="nav-link">وبلاگ</a></li>
+          </ul>
+          
+          <div class="nav-actions">
+            <button class="search-btn" id="searchBtn">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"></circle>
+                <path d="M21 21l-4.35-4.35"></path>
+              </svg>
+            </button>
+            <input type="text" class="search-input" id="searchInput" placeholder="جستجو در محصولات...">
+            
+            <button class="profile-btn">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+                <circle cx="12" cy="7" r="4"></circle>
+              </svg>
+            </button>
+            
+            <button class="theme-toggle" id="themeToggle">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" id="themeIcon">
+                <circle cx="12" cy="12" r="5"></circle>
+                <line x1="12" y1="1" x2="12" y2="3"></line>
+                <line x1="12" y1="21" x2="12" y2="23"></line>
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                <line x1="1" y1="12" x2="3" y2="12"></line>
+                <line x1="21" y1="12" x2="23" y2="12"></line>
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+              </svg>
+            </button>
+            
+            <button class="cart-btn" id="cartBtn">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M9 2L6 6H3L5 20H19L21 6H18L15 2H9Z"></path>
+              </svg>
+              <span class="cart-count" id="cartCount">${this.cartCount}</span>
+            </button>
+          </div>
+        </div>
+      </nav>
+    `;
+    
+    this.setupEventListeners();
+  }
+  
+  setupEventListeners() {
+    const searchBtn = this.shadowRoot.getElementById('searchBtn');
+    const searchInput = this.shadowRoot.getElementById('searchInput');
+    const themeToggle = this.shadowRoot.getElementById('themeToggle');
+    const cartBtn = this.shadowRoot.getElementById('cartBtn');
+    
+    searchBtn.addEventListener('click', () => {
+      searchInput.classList.toggle('active');
+      searchInput.focus();
+    });
+    
+    themeToggle.addEventListener('click', () => {
+      document.body.classList.toggle('dark');
+      const icon = this.shadowRoot.getElementById('themeIcon');
+      if (document.body.classList.contains('dark')) {
+        icon.innerHTML = '<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>';
+      } else {

index.html

@@ -1,19 +1,89 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ShopVista - فروشگاه آنلاین حرفه‌ای</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛒</text></svg>">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#eef2ff',
+                            100: '#e0e7ff',
+                            200: '#c7d2fe',
+                            300: '#a5b4fc',
+                            400: '#818cf8',
+                            500: '#6366f1',
+                            600: '#4f46e5',
+                            700: '#4338ca',
+                            800: '#3730a3',
+                            900: '#312e81',
+                        },
+                        secondary: {
+                            50: '#faf5ff',
+                            100: '#f3e8ff',
+                            200: '#e9d5ff',
+                            300: '#d8b4fe',
+                            400: '#c084fc',
+                            500: '#a855f7',
+                            600: '#9333ea',
+                            700: '#7e22ce',
+                            800: '#6b21a8',
+                            900: '#581c87',
+                        }
+                    },
+                    fontFamily: {
+                        'sans': ['Inter', 'system-ui', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
+    
+    <!-- Custom Components -->
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="components/product-card.js"></script>
+    <script src="components/cart-sidebar.js"></script>
+
+    <!-- Navbar -->
+    <shop-navbar></shop-navbar>
+
+    <!-- Main Content -->
+    <main class="pt-20">
+        
+        <!-- Hero Slider -->
+        <section class="relative overflow-hidden bg-gradient-to-br from-primary-600 to-secondary-600">
+            <div class="container mx-auto px-4 py-16">
+                <div class="grid md:grid-cols-2 gap-8 items-center">
+                    <div class="text-white space-y-6 animate-fade-in">
+                        <h1 class="text-4xl md:text-6xl font-bold leading-tight">
+                            تخفیفات ویژه <span class="text-yellow-300">تابستانی</span>
+                        </h1>
+                        <p class="text-xl opacity-90">تا 70% تخفیف محصولات منتخب - فرصت محدود!</p>
+                        <div class="flex flex-wrap gap-4">
+                            <a href="#deals" class="bg-yellow-400 text-gray-900 px-8 py-3 rounded-full font-semibold hover:bg-yellow-300 transform hover:scale-105 transition-all duration-300 shadow-lg">
+                                مشاهده پیشنهادات
+                            </a>
+                            <a href="#products" class="border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-primary-600 transition-all duration-300">
+                                فروشگاه
+                            </a>
+                        </div>
+                    </div>
+                    <div class="relative animate-float">
+                        <div class="absolute inset-0 bg-primary-400 rounded-full blur-3xl opacity-30"></div>
+                        <img src="http://static.photos/technology/640x360/42" alt="محصولات فناوری" class="relative z
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>