Hugging Face's logo

Spaces:
CIAG
/
technova-hub
Running

App Files Community
CIAG commited on
Commit
075da5f
·
verified ·
1 Parent(s): 9b57c21

creer site web de tecnogies

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +339 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Technova Hub
3
- emoji: 📈
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: TechNova Hub 🚀
3
+ colorFrom: pink
4
+ colorTo: red
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,340 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>TechNova Hub - L'avenir en un clic</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js"></script>
12
+ <style>
13
+ .gradient-text {
14
+ background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
15
+ -webkit-background-clip: text;
16
+ background-clip: text;
17
+ color: transparent;
18
+ }
19
+ .tech-card:hover {
20
+ transform: translateY(-10px);
21
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
22
+ }
23
+ #vanta-bg {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ z-index: -1;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="bg-gray-900 text-white min-h-screen overflow-x-hidden">
34
+ <div id="vanta-bg"></div>
35
+
36
+ <!-- Navigation -->
37
+ <nav class="relative container mx-auto p-6">
38
+ <div class="flex items-center justify-between">
39
+ <div class="flex items-center space-x-4">
40
+ <i data-feather="cpu" class="text-indigo-500 h-8 w-8"></i>
41
+ <span class="text-2xl font-bold gradient-text">TechNova</span>
42
+ </div>
43
+ <div class="hidden md:flex space-x-8">
44
+ <a href="#" class="hover:text-indigo-400 transition">Accueil</a>
45
+ <a href="#" class="hover:text-indigo-400 transition">Technologies</a>
46
+ <a href="#" class="hover:text-indigo-400 transition">Articles</a>
47
+ <a href="#" class="hover:text-indigo-400 transition">Contact</a>
48
+ </div>
49
+ <div class="md:hidden">
50
+ <button id="menu-btn" class="focus:outline-none">
51
+ <i data-feather="menu" class="h-8 w-8"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ <!-- Mobile Menu -->
56
+ <div id="mobile-menu" class="hidden absolute flex-col items-center self-end py-8 mt-10 space-y-6 font-bold bg-gray-800 sm:w-auto sm:self-center left-6 right-6 drop-shadow-md">
57
+ <a href="#" class="hover:text-indigo-400 transition">Accueil</a>
58
+ <a href="#" class="hover:text-indigo-400 transition">Technologies</a>
59
+ <a href="#" class="hover:text-indigo-400 transition">Articles</a>
60
+ <a href="#" class="hover:text-indigo-400 transition">Contact</a>
61
+ </div>
62
+ </nav>
63
+
64
+ <!-- Hero Section -->
65
+ <section class="container mx-auto px-6 py-32">
66
+ <div class="max-w-4xl mx-auto text-center">
67
+ <h1 class="text-5xl md:text-7xl font-bold mb-6">
68
+ Explorez le futur <span class="gradient-text">technologique</span>
69
+ </h1>
70
+ <p class="text-xl md:text-2xl text-gray-300 mb-12">
71
+ Découvrez les dernières innovations qui façonnent notre monde numérique. Des tendances émergentes aux technologies révolutionnaires.
72
+ </p>
73
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
74
+ <button class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 rounded-full font-semibold transition duration-300 transform hover:scale-105">
75
+ Commencer l'exploration
76
+ </button>
77
+ <button class="px-8 py-4 bg-transparent border-2 border-indigo-500 hover:bg-indigo-500/10 rounded-full font-semibold transition duration-300 transform hover:scale-105">
78
+ <span class="flex items-center justify-center gap-2">
79
+ <i data-feather="play-circle"></i> Voir la vidéo
80
+ </span>
81
+ </button>
82
+ </div>
83
+ </div>
84
+ </section>
85
+
86
+ <!-- Tech Trends Section -->
87
+ <section class="py-20 bg-gradient-to-b from-gray-900 to-gray-800">
88
+ <div class="container mx-auto px-6">
89
+ <div class="text-center mb-16">
90
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">Tendances <span class="gradient-text">2023</span></h2>
91
+ <p class="max-w-2xl mx-auto text-gray-400">Les technologies qui vont transformer notre quotidien</p>
92
+ </div>
93
+
94
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
95
+ <!-- AI Card -->
96
+ <div class="tech-card bg-gray-800 rounded-xl p-8 transition duration-500 ease-in-out">
97
+ <div class="bg-indigo-500/10 p-4 rounded-full w-fit mb-6">
98
+ <i data-feather="activity" class="h-6 w-6 text-indigo-400"></i>
99
+ </div>
100
+ <h3 class="text-2xl font-bold mb-4">Intelligence Artificielle</h3>
101
+ <p class="text-gray-400 mb-6">L'IA continue de progresser avec des modèles plus puissants et accessibles.</p>
102
+ <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center gap-2">
103
+ En savoir plus <i data-feather="arrow-right" class="h-4 w-4"></i>
104
+ </a>
105
+ </div>
106
+
107
+ <!-- Web3 Card -->
108
+ <div class="tech-card bg-gray-800 rounded-xl p-8 transition duration-500 ease-in-out">
109
+ <div class="bg-purple-500/10 p-4 rounded-full w-fit mb-6">
110
+ <i data-feather="database" class="h-6 w-6 text-purple-400"></i>
111
+ </div>
112
+ <h3 class="text-2xl font-bold mb-4">Web3 & Blockchain</h3>
113
+ <p class="text-gray-400 mb-6">L'évolution vers un internet décentralisé et plus sécurisé.</p>
114
+ <a href="#" class="text-purple-400 hover:text-purple-300 flex items-center gap-2">
115
+ En savoir plus <i data-feather="arrow-right" class="h-4 w-4"></i>
116
+ </a>
117
+ </div>
118
+
119
+ <!-- Quantum Card -->
120
+ <div class="tech-card bg-gray-800 rounded-xl p-8 transition duration-500 ease-in-out">
121
+ <div class="bg-blue-500/10 p-4 rounded-full w-fit mb-6">
122
+ <i data-feather="zap" class="h-6 w-6 text-blue-400"></i>
123
+ </div>
124
+ <h3 class="text-2xl font-bold mb-4">Informatique Quantique</h3>
125
+ <p class="text-gray-400 mb-6">Une révolution dans la puissance de calcul et la cryptographie.</p>
126
+ <a href="#" class="text-blue-400 hover:text-blue-300 flex items-center gap-2">
127
+ En savoir plus <i data-feather="arrow-right" class="h-4 w-4"></i>
128
+ </a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </section>
133
+
134
+ <!-- Latest Articles -->
135
+ <section class="py-20">
136
+ <div class="container mx-auto px-6">
137
+ <div class="text-center mb-16">
138
+ <h2 class="text-3xl md:text-5xl font-bold mb-4">Nos <span class="gradient-text">derniers articles</span></h2>
139
+ <p class="max-w-2xl mx-auto text-gray-400">Restez informé avec nos analyses et perspectives technologiques</p>
140
+ </div>
141
+
142
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
143
+ <!-- Article 1 -->
144
+ <div class="bg-gray-800 rounded-xl overflow-hidden transition duration-500 ease-in-out hover:shadow-xl">
145
+ <img src="http://static.photos/technology/640x360/101" alt="Article image" class="w-full h-48 object-cover">
146
+ <div class="p-6">
147
+ <div class="flex items-center gap-2 text-sm text-gray-400 mb-4">
148
+ <span>25 Mai 2023</span>
149
+ <span>•</span>
150
+ <span>8 min read</span>
151
+ </div>
152
+ <h3 class="text-xl font-bold mb-3">L'avenir de l'IA générative</h3>
153
+ <p class="text-gray-400 mb-4">Comment les modèles comme GPT-4 vont transformer la création de contenu.</p>
154
+ <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center gap-2 text-sm">
155
+ Lire l'article <i data-feather="arrow-right" class="h-4 w-4"></i>
156
+ </a>
157
+ </div>
158
+ </div>
159
+
160
+ <!-- Article 2 -->
161
+ <div class="bg-gray-800 rounded-xl overflow-hidden transition duration-500 ease-in-out hover:shadow-xl">
162
+ <img src="http://static.photos/abstract/640x360/201" alt="Article image" class="w-full h-48 object-cover">
163
+ <div class="p-6">
164
+ <div class="flex items-center gap-2 text-sm text-gray-400 mb-4">
165
+ <span>18 Mai 2023</span>
166
+ <span>•</span>
167
+ <span>6 min read</span>
168
+ </div>
169
+ <h3 class="text-xl font-bold mb-3">Métavers : réalité ou fiction ?</h3>
170
+ <p class="text-gray-400 mb-4">Analyse des promesses et défis des mondes virtuels persistants.</p>
171
+ <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center gap-2 text-sm">
172
+ Lire l'article <i data-feather="arrow-right" class="h-4 w-4"></i>
173
+ </a>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Article 3 -->
178
+ <div class="bg-gray-800 rounded-xl overflow-hidden transition duration-500 ease-in-out hover:shadow-xl">
179
+ <img src="http://static.photos/science/640x360/301" alt="Article image" class="w-full h-48 object-cover">
180
+ <div class="p-6">
181
+ <div class="flex items-center gap-2 text-sm text-gray-400 mb-4">
182
+ <span>10 Mai 2023</span>
183
+ <span>•</span>
184
+ <span>10 min read</span>
185
+ </div>
186
+ <h3 class="text-xl font-bold mb-3">Les promesses du calcul quantique</h3>
187
+ <p class="text-gray-400 mb-4">Comment les qubits pourraient résoudre des problèmes impossibles aujourd'hui.</p>
188
+ <a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center gap-2 text-sm">
189
+ Lire l'article <i data-feather="arrow-right" class="h-4 w-4"></i>
190
+ </a>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="text-center mt-12">
196
+ <button class="px-8 py-3 bg-transparent border-2 border-indigo-500 hover:bg-indigo-500/10 rounded-full font-semibold transition duration-300 transform hover:scale-105">
197
+ Voir tous les articles
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </section>
202
+
203
+ <!-- Newsletter -->
204
+ <section class="py-20 bg-gradient-to-r from-gray-800 to-gray-900">
205
+ <div class="container mx-auto px-6 max-w-4xl">
206
+ <div class="bg-gray-800 rounded-xl p-8 md:p-12 shadow-xl">
207
+ <div class="text-center mb-8">
208
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Restez connecté</h2>
209
+ <p class="text-gray-400">Abonnez-vous à notre newsletter pour recevoir les dernières actualités technologiques directement dans votre boîte mail.</p>
210
+ </div>
211
+ <form class="flex flex-col sm:flex-row gap-4">
212
+ <input type="email" placeholder="Votre email" class="flex-grow px-6 py-4 bg-gray-700 rounded-full focus:outline-none focus:ring-2 focus:ring-indigo-500">
213
+ <button type="submit" class="px-8 py-4 bg-indigo-600 hover:bg-indigo-700 rounded-full font-semibold transition duration-300 transform hover:scale-105 whitespace-nowrap">
214
+ S'abonner
215
+ </button>
216
+ </form>
217
+ </div>
218
+ </div>
219
+ </section>
220
+
221
+ <!-- Footer -->
222
+ <footer class="bg-gray-900 py-12">
223
+ <div class="container mx-auto px-6">
224
+ <div class="flex flex-col md:flex-row justify-between items-center">
225
+ <div class="flex items-center space-x-4 mb-6 md:mb-0">
226
+ <i data-feather="cpu" class="text-indigo-500 h-8 w-8"></i>
227
+ <span class="text-2xl font-bold gradient-text">TechNova</span>
228
+ </div>
229
+ <div class="flex space-x-6">
230
+ <a href="#" class="hover:text-indigo-400 transition">
231
+ <i data-feather="twitter"></i>
232
+ </a>
233
+ <a href="#" class="hover:text-indigo-400 transition">
234
+ <i data-feather="linkedin"></i>
235
+ </a>
236
+ <a href="#" class="hover:text-indigo-400 transition">
237
+ <i data-feather="github"></i>
238
+ </a>
239
+ <a href="#" class="hover:text-indigo-400 transition">
240
+ <i data-feather="youtube"></i>
241
+ </a>
242
+ </div>
243
+ </div>
244
+ <div class="border-t border-gray-800 mt-8 pt-8 grid grid-cols-1 md:grid-cols-4 gap-8">
245
+ <div>
246
+ <h3 class="text-lg font-semibold mb-4">Navigation</h3>
247
+ <ul class="space-y-2">
248
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Accueil</a></li>
249
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Technologies</a></li>
250
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Articles</a></li>
251
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Contact</a></li>
252
+ </ul>
253
+ </div>
254
+ <div>
255
+ <h3 class="text-lg font-semibold mb-4">Ressources</h3>
256
+ <ul class="space-y-2">
257
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Documentation</a></li>
258
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Tutoriels</a></li>
259
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">API</a></li>
260
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Outils</a></li>
261
+ </ul>
262
+ </div>
263
+ <div>
264
+ <h3 class="text-lg font-semibold mb-4">Entreprise</h3>
265
+ <ul class="space-y-2">
266
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">À propos</a></li>
267
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Carrières</a></li>
268
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Presse</a></li>
269
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Blog</a></li>
270
+ </ul>
271
+ </div>
272
+ <div>
273
+ <h3 class="text-lg font-semibold mb-4">Légal</h3>
274
+ <ul class="space-y-2">
275
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Mentions légales</a></li>
276
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Confidentialité</a></li>
277
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Cookies</a></li>
278
+ <li><a href="#" class="text-gray-400 hover:text-indigo-400 transition">Conditions</a></li>
279
+ </ul>
280
+ </div>
281
+ </div>
282
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500">
283
+ <p>© 2023 TechNova Hub. Tous droits réservés.</p>
284
+ </div>
285
+ </div>
286
+ </footer>
287
+
288
+ <script>
289
+ // Vanta.js background
290
+ VANTA.NET({
291
+ el: "#vanta-bg",
292
+ mouseControls: true,
293
+ touchControls: true,
294
+ gyroControls: false,
295
+ minHeight: 200.00,
296
+ minWidth: 200.00,
297
+ scale: 1.00,
298
+ scaleMobile: 1.00,
299
+ color: 0x3b82f6,
300
+ backgroundColor: 0x111827,
301
+ points: 12.00,
302
+ maxDistance: 22.00,
303
+ spacing: 18.00
304
+ });
305
+
306
+ // Mobile menu toggle
307
+ const btn = document.getElementById('menu-btn');
308
+ const menu = document.getElementById('mobile-menu');
309
+
310
+ btn.addEventListener('click', () => {
311
+ menu.classList.toggle('hidden');
312
+ menu.classList.toggle('flex');
313
+ });
314
+
315
+ // Feather icons
316
+ feather.replace();
317
+
318
+ // Animation on scroll
319
+ document.addEventListener('DOMContentLoaded', () => {
320
+ const techCards = document.querySelectorAll('.tech-card');
321
+
322
+ techCards.forEach((card, index) => {
323
+ card.style.opacity = '0';
324
+ card.style.transform = 'translateY(20px)';
325
+
326
+ setTimeout(() => {
327
+ anime({
328
+ targets: card,
329
+ opacity: 1,
330
+ translateY: 0,
331
+ duration: 800,
332
+ easing: 'easeOutQuad',
333
+ delay: index * 100
334
+ });
335
+ }, 300);
336
+ });
337
+ });
338
+ </script>
339
+ </body>
340
  </html>