Hugging Face's logo

Spaces:
docto41
/
mega-maret
Running

App Files Community
mega-maret
File size: 12,849 Bytes 
c7ec9b0
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MegaMarket AI - 9,850,000+ produits numériques</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .floating {
            animation: float 6s ease-in-out infinite;
        }
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem;
        }
        .blinking {
            animation: blink 2s infinite;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        .category-chip {
            transition: all 0.3s ease;
        }
        .category-chip:hover {
            transform: scale(1.05);
            background-color: #3b82f6 !important;
        }
    </style>
</head>
<body class="bg-gray-900 text-white min-h-screen font-sans">
    <!-- Navigation -->
    <nav class="glass-effect fixed w-full z-50">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl font-bold gradient-text">MegaMarket AI</span>
                    </div>
                    <div class="hidden lg:block ml-10">
                        <div class="flex space-x-4">
                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-600 text-white">Accueil</a>
                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Explorer</a>
                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Catégories</a>
                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Créateurs IA</a>
                            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 hover:text-white">Abonnements</a>
                        </div>
                    </div>
                </div>
                <div class="hidden lg:block">
                    <div class="ml-4 flex items-center space-x-4">
                        <div class="relative">
                            <input type="text" placeholder="Rechercher parmi 9.8M+ produits..." class="pl-10 pr-4 py-2 rounded-full bg-gray-800 text-white text-sm w-64 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i>
                        </div>
                        <button class="px-4 py-2 rounded-md text-sm font-medium bg-gradient-to-r from-blue-500 to-purple-600 text-white hover:from-blue-600 hover:to-purple-700">
                            Connexion
                        </button>
                    </div>
                </div>
                <div class="-mr-2 flex lg:hidden">
                    <button onclick="toggleMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
                        <i class="fas fa-bars h-6 w-6"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div id="mobileMenu" class="hidden lg:hidden bg-gray-900">
            <div class="px-2 pt-2 pb-3 space-y-1">
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-800">Accueil</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Explorer</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Catégories</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Créateurs IA</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Abonnements</a>
                <div class="pt-4 pb-3 border-t border-gray-800">
                    <div class="flex items-center px-5">
                        <button class="w-full px-4 py-2 rounded-md text-sm font-medium bg-gradient-to-r from-blue-500 to-purple-600 text-white">
                            Connexion
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-b from-gray-900 to-gray-800">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="lg:grid lg:grid-cols-12 lg:gap-12">
                <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-7 lg:text-left">
                    <div class="flex items-center space-x-2 mb-4">
                        <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-900 text-blue-100">NOUVEAU</span>
                        <span class="text-sm text-gray-300">+12,450 produits ajoutés aujourd'hui</span>
                    </div>
                    <h1 class="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
                        <span class="block">La plus grande marketplace</span>
                        <span class="block gradient-text">de produits numériques IA</span>
                    </h1>
                    <p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
                        Accédez à plus de 9,850,000 produits générés par nos 80,555 intelligences artificielles spécialisées. Téléchargez gratuitement après inscription et abonnement.
                    </p>
                    <div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
                        <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
                            <button class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition-all duration-300 transform hover:scale-105">
                                S'inscrire maintenant
                            </button>
                            <button class="px-8 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-gray-100 md:py-4 md:text-lg md:px-10 transition-all duration-300 transform hover:scale-105">
                                Voir les abonnements
                            </button>
                        </div>
                    </div>
                </div>
                <div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-5 lg:flex lg:items-center">
                    <div class="relative w-full rounded-xl overflow-hidden floating">
                        <div class="glass-effect rounded-lg overflow-hidden">
                            <img class="w-full" src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Produits numériques IA">
                            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent opacity-70"></div>
                            <div class="absolute bottom-0 left-0 right-0 p-6">
                                <div class="flex justify-between items-center">
                                    <div>
                                        <h3 class="text-xl font-bold text-white">Pack UI/UX Premium</h3>
                                        <p class="mt-1 text-gray-200">Généré par DesignMaster AI</p>
                                    </div>
                                    <div class="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium blinking">
                                        GRATUIT
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-12 bg-gray-800">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="stats-grid">
                <div class="glass-effect p-6 rounded-xl text-center">
                    <div class="text-4xl font-bold gradient-text">9,850,000+</div>
                    <div class="mt-2 text-gray-300">Produits numériques</div>
                </div>
                <div class="glass-effect p-6 rounded-xl text-center">
                    <div class="text-4xl font-bold gradient-text">80,555</div>
                    <div class="mt-2 text-gray-300">IA spécialisées</div>
                </div>
                <div class="glass-effect p-6 rounded-xl text-center">
                    <div class="text-4xl font-bold gradient-text">1,200+</div>
                    <div class="mt-2 text-gray-300">Catégories</div>
                </div>
                <div class="glass-effect p-6 rounded-xl text-center">
                    <div class="text-4xl font-bold gradient-text">4.2M</div>
                    <div class="mt-2 text-gray-300">Utilisateurs</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories Section -->
    <section class="py-20 bg-gray-900">
        <div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-white">Parcourir par catégories</h2>
                <p class="mt-4 max-w-2xl text-xl text-gray-300 mx-auto">
                    Découvrez nos principales catégories de produits générés par IA
                </p>
            </div>
            
            <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                <a href="#" class="category-chip bg-blue-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg">
                    <i class="fas fa-paint-brush text-3xl text-blue-400 mb-2"></i>
                    <span class="font-medium">Design</span>
                    <span class="text-xs text-gray-400 mt-1">1.2M produits</span>
                </a>
                <a href="#" class="category-chip bg-purple-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg">
                    <i class="fas fa-code text-3xl text-purple-400 mb-2"></i>
                    <span class="font-medium">Code</span>
                    <span class="text-xs text-gray-400 mt-1">850K produits</span>
                </a>
                <a href="#" class="category-chip bg-pink-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg">
                    <i class="fas fa-music text-3xl text-pink-400 mb-2"></i>
                    <span class="font-medium">Musique</span>
                    <span class="text-xs text-gray-400 mt-1">620K produits</span>
                </a>
                <a href="#" class="category-chip bg-green-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg">
                    <i class="fas fa-image text-3xl text-green-400 mb-2"></i>
                    <span class="font-medium">Images</span>
                    <span class="text-xs text-gray-400 mt-1">3.1M produits</span>
                </a>
                <a href="#" class="category-chip bg-yellow-900 bg-opacity-40 p-4 rounded-lg flex flex-col items-center hover:shadow-lg">
                    <i class="fas fa-video text
</html>