Spaces:

HuggyGuyJo01
/

Boutique

Running

App Files Files Community

HuggyGuyJo01 commited on Nov 18, 2024

Commit

803e56a

verified ·

1 Parent(s): 5a366f8

Update index.html

Browse files

Files changed (1) hide show

index.html +131 -62

index.html CHANGED Viewed

@@ -3,25 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Catalogue de Produits - Nom de votre entreprise</title>
-    <meta name="description" content="✓ Catalogue mis à jour ✓ Produits disponibles ✓ Livraison rapide.">
-    <meta name="robots" content="index, follow">
-    <meta name="keywords" content="catalogue, produits, services, e-commerce">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="Catalogue de Produits - Nom de votre entreprise">
-    <meta property="og:description" content="Découvrez nos derniers produits disponibles avec livraison rapide.">
-    <meta property="og:site_name" content="Nom de votre entreprise">
-    <link rel="canonical" href="https://votre-site-web.com/catalogue" />
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">
     <style>
         :root {
             --primary-color: #2563eb;
-            --secondary-color: #3b82f6;
-            --accent-color: #60a5fa;
-            --background-color: #f8fafc;
-            --text-color: #1e293b;
-            --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
         }
         * {
@@ -31,8 +20,8 @@
         }
         body {
-            font-family: system-ui, -apple-system, sans-serif;
-            background-color: var(--background-color);
             color: var(--text-color);
             line-height: 1.6;
         }
@@ -40,119 +29,199 @@
         .container {
             max-width: 1200px;
             margin: 0 auto;
-            padding: 0 1rem;
         }
         header {
-            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
-            color: white;
             padding: 2rem 0;
-            margin-bottom: 2rem;
         }
         header h1 {
             font-size: 2.5rem;
             margin-bottom: 0.5rem;
-            font-weight: 700;
         }
-        .subtitle {
-            opacity: 0.9;
             font-size: 1.1rem;
         }
         .products-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
-            padding: 1rem 0;
         }
         .product-card {
-            background: white;
-            border-radius: 1rem;
             overflow: hidden;
-            box-shadow: var(--card-shadow);
-            transition: transform 0.3s ease;
         }
         .product-card:hover {
-            transform: translateY(-5px);
         }
         .product-image {
             width: 100%;
-            height: 200px;
             object-fit: cover;
         }
         .product-content {
-            padding: 1.5rem;
         }
         .product-title {
-            font-size: 1.5rem;
             margin-bottom: 0.5rem;
-            color: var(--text-color);
         }
         .product-description {
-            color: #64748b;
-            margin-bottom: 1rem;
         }
         .product-price {
             font-size: 1.25rem;
-            font-weight: 600;
             color: var(--primary-color);
-            margin: 1rem 0;
         }
         footer {
-            background-color: #1e293b;
             color: white;
-            padding: 3rem 0;
-            margin-top: 4rem;
         }
-        .footer-title {
-            color: white;
-            font-size: 1.5rem;
-            margin-bottom: 1rem;
         }
         @media (max-width: 768px) {
             .products-grid {
                 grid-template-columns: 1fr;
             }
-            header h1 {
-                font-size: 2rem;
-            }
         }
     </style>
 </head>
 <body>
-    <header class="animate__animated animate__fadeIn">
         <div class="container">
-            <h1>Nom de votre entreprise</h1>
-            <p class="subtitle">Produits mis à jour récemment</p>
         </div>
     </header>
-    <main class="container animate__animated animate__fadeIn">
-        <div class="products-grid">
-            <!-- Ajoutez vos produits ici -->
         </div>
     </main>
     <footer>
         <div class="container">
-            <div class="footer-content">
-                <h2 class="footer-title">Nom de votre entreprise</h2>
-                <p>Livraison rapide et produits de qualité.</p>
-            </div>
         </div>
     </footer>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tech Innovators - Catalogue de Produits Technologiques</title>
     <style>
         :root {
             --primary-color: #2563eb;
+            --secondary-color: #60a5fa;
+            --text-color: #333;
+            --background-color: #f4f4f5;
+            --card-background: #ffffff;
         }
         * {
         }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+            background: linear-gradient(135deg, var(--background-color) 0%, #e6e9f0 100%);
             color: var(--text-color);
             line-height: 1.6;
         }
         .container {
             max-width: 1200px;
             margin: 0 auto;
+            padding: 0 15px;
         }
         header {
+            background-color: var(--card-background);
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
             padding: 2rem 0;
+            text-align: center;
         }
         header h1 {
+            color: var(--primary-color);
             font-size: 2.5rem;
             margin-bottom: 0.5rem;
         }
+        header p {
+            color: #6b7280;
             font-size: 1.1rem;
         }
         .products-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 1.5rem;
+            padding: 2rem 0;
         }
         .product-card {
+            background-color: var(--card-background);
+            border-radius: 12px;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
             overflow: hidden;
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
         }
         .product-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
         }
         .product-image {
             width: 100%;
+            height: 250px;
             object-fit: cover;
         }
         .product-content {
+            padding: 1.25rem;
         }
         .product-title {
+            color: var(--primary-color);
+            font-size: 1.25rem;
             margin-bottom: 0.5rem;
         }
         .product-description {
+            color: #6b7280;
+            margin-bottom: 0.75rem;
+        }
+        .product-status {
+            font-weight: bold;
+            margin-bottom: 0.5rem;
+        }
+        .product-status.in-stock {
+            color: #10b981;
+        }
+        .product-promo {
+            background-color: #ef4444;
+            color: white;
+            display: inline-block;
+            padding: 0.25rem 0.5rem;
+            border-radius: 20px;
+            font-size: 0.8rem;
+            margin-bottom: 0.5rem;
         }
         .product-price {
             font-size: 1.25rem;
+            font-weight: bold;
             color: var(--primary-color);
+            margin-bottom: 0.5rem;
         }
         footer {
+            background-color: var(--primary-color);
             color: white;
+            text-align: center;
+            padding: 2rem 0;
         }
+        footer h2 {
+            margin-bottom: 0.75rem;
         }
         @media (max-width: 768px) {
             .products-grid {
                 grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
+    <header>
         <div class="container">
+            <h1>Tech Innovators</h1>
+            <p>Produits technologiques et artisanaux de qualité</p>
         </div>
     </header>
+    <main class="container">
+        <div id="products-grid" class="products-grid">
+            <!-- Products will be dynamically added here -->
         </div>
     </main>
     <footer>
         <div class="container">
+            <h2>Tech Innovators</h2>
+            <p>Livraison rapide et produits de qualité. Contactez-nous au +226 56 88 88 79</p>
         </div>
     </footer>
+    <script>
+        const products = [
+            {
+                name: "Smartphone X",
+                description: "Un smartphone performant avec 128 Go de stockage.",
+                price: 250000,
+                currency: "FCFA",
+                image: "smartphone.jpg",
+                status: "En stock",
+                promoPercentage: null,
+                location: {
+                    ville: "Ouagadougou",
+                    quartier: "Nagrin"
+                },
+                contact: "+22656888878"
+            },
+            {
+                name: "Solution CRM",
+                description: "Logiciel de gestion de la relation client.",
+                price: 500000,
+                currency: "FCFA",
+                image: "crm_solution.jpg",
+                status: "Disponible sur commande",
+                promoPercentage: 10,
+                location: {
+                    ville: "Ouagadougou",
+                    quartier: "Zogona"
+                },
+                contact: "+22656888879"
+            },
+            {
+                name: "Panier artisanal",
+                description: "Panier en osier fait main, durable et élégant.",
+                price: 15000,
+                currency: "FCFA",
+                image: "panier.jpg",
+                status: "En stock",
+                promoPercentage: 5,
+                location: {
+                    ville: "Bobo-Dioulasso",
+                    quartier: "Koko"
+                },
+                contact: "+22656888787"
+            }
+        ];
+        function renderProducts() {
+            const grid = document.getElementById('products-grid');
+            grid.innerHTML = products.map(product => `
+                <div class="product-card">
+                    <img src="${product.image}" alt="${product.name}" class="product-image">
+                    <div class="product-content">
+                        <h2 class="product-title">${product.name}</h2>
+                        <p class="product-description">${product.description}</p>
+                        <p class="product-status ${product.status === 'En stock' ? 'in-stock' : ''}">${product.status}</p>
+                        ${product.promoPercentage ? `<div class="product-promo">-${product.promoPercentage}%</div>` : ''}
+                        <p class="product-price">${product.price.toLocaleString()} ${product.currency}</p>
+                        <small>${product.location.ville} - ${product.location.quartier}</small>
+                        <br>
+                        <small>Contact: ${product.contact}</small>
+                    </div>
+                </div>
+            `).join('');
+        }
+        renderProducts();
+    </script>
 </body>
 </html>