Hugging Face's logo

Spaces:
Yocapp
/
deepsite-project-lfogs
Running

App Files Community
Yocapp commited on
Commit
592ac4f
·
verified ·
1 Parent(s): cb4ee83

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +218 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project Lfogs
3
- emoji: 🦀
4
- colorFrom: yellow
5
  colorTo: pink
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: DeepSite Project
3
+ colorFrom: green
 
4
  colorTo: pink
5
  sdk: static
6
+ emoji: 📦
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,218 @@
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>TIE - Transformez une bonne course en relation qui dure</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
11
+ <style>
12
+ body {
13
+ font-family: 'Inter', system-ui, sans-serif;
14
+ background-color: #0a0a0a;
15
+ color: #f5f5f5;
16
+ padding-bottom: 80px;
17
+ }
18
+ .scrollbar-hide::-webkit-scrollbar {
19
+ display: none;
20
+ }
21
+ .scrollbar-hide {
22
+ -ms-overflow-style: none;
23
+ scrollbar-width: none;
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="bg-neutral-950 text-neutral-100 antialiased">
28
+
29
+ <!-- Header -->
30
+ <header class="sticky top-0 z-50 backdrop-blur-md bg-neutral-950/70 border-b border-neutral-900">
31
+ <div class="max-w-3xl mx-auto px-5 h-14 flex items-center justify-between">
32
+ <div class="text-lg font-semibold tracking-tight text-neutral-100">
33
+ TIE
34
+ </div>
35
+ <div class="flex items-center gap-4">
36
+ <button class="text-sm text-neutral-300 hover:text-white transition-colors">
37
+ Connexion
38
+ </button>
39
+ <button class="text-sm text-neutral-300 hover:text-white transition-colors">
40
+ Menu
41
+ </button>
42
+ </div>
43
+ </div>
44
+ </header>
45
+
46
+ <!-- Main Content -->
47
+ <main class="max-w-3xl mx-auto px-5 py-8">
48
+
49
+ <!-- Hero Section -->
50
+ <section class="flex flex-col items-center text-center mb-8">
51
+ <span class="inline-flex px-3 py-1.5 rounded-full border border-neutral-800 bg-neutral-900 text-xs text-neutral-400 mb-5">
52
+ Relation directe chauffeur ↔ client privé
53
+ </span>
54
+
55
+ <h1 class="text-3xl font-semibold text-neutral-100 leading-tight tracking-tight mb-3">
56
+ Transformez une bonne course en relation qui dure.
57
+ </h1>
58
+
59
+ <p class="text-neutral-400 text-sm text-center max-w-md mb-10">
60
+ TIE permet aux chauffeurs VTC de garder leurs meilleurs clients et aux clients privés de retrouver leur chauffeur de confiance.
61
+ </p>
62
+ </section>
63
+
64
+ <!-- Section 1: Je suis chauffeur VTC -->
65
+ <section class="mb-8">
66
+ <h2 class="text-xl font-semibold text-neutral-100 mb-4">
67
+ Je suis chauffeur VTC
68
+ </h2>
69
+
70
+ <div class="flex overflow-x-auto gap-4 pb-2 scrollbar-hide">
71
+ <!-- Card 1 -->
72
+ <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer">
73
+ <div class="flex flex-col gap-3 h-full">
74
+ <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
75
+ <i data-lucide="car" class="w-5 h-5 text-emerald-400"></i>
76
+ </div>
77
+ <div class="flex flex-col gap-1 flex-1">
78
+ <h3 class="text-base font-medium text-neutral-100">Créer mon espace chauffeur</h3>
79
+ <p class="text-sm text-neutral-400">Commencer à utiliser TIE pour garder vos clients.</p>
80
+ </div>
81
+ <span class="text-sm font-medium text-emerald-400 mt-1">Accéder</span>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- Card 2 -->
86
+ <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer">
87
+ <div class="flex flex-col gap-3 h-full">
88
+ <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
89
+ <i data-lucide="users" class="w-5 h-5 text-emerald-400"></i>
90
+ </div>
91
+ <div class="flex flex-col gap-1 flex-1">
92
+ <h3 class="text-base font-medium text-neutral-100">Garder mes meilleurs clients</h3>
93
+ <p class="text-sm text-neutral-400">Transformez vos bonnes courses en relation durable.</p>
94
+ </div>
95
+ <span class="text-sm font-medium text-emerald-400 mt-1">Découvrir</span>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- Card 3 -->
100
+ <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer">
101
+ <div class="flex flex-col gap-3 h-full">
102
+ <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
103
+ <i data-lucide="shield" class="w-5 h-5 text-emerald-400"></i>
104
+ </div>
105
+ <div class="flex flex-col gap-1 flex-1">
106
+ <h3 class="text-base font-medium text-neutral-100">Sans commission</h3>
107
+ <p class="text-sm text-neutral-400">Travaillez directement avec vos clients privés.</p>
108
+ </div>
109
+ <span class="text-sm font-medium text-emerald-400 mt-1">Voir les avantages</span>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </section>
114
+
115
+ <!-- Section 2: Je suis client privé -->
116
+ <section class="mb-8">
117
+ <h2 class="text-xl font-semibold text-neutral-100 mb-4">
118
+ Je suis client privé
119
+ </h2>
120
+
121
+ <div class="flex overflow-x-auto gap-4 pb-2 scrollbar-hide">
122
+ <!-- Card 1 -->
123
+ <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer">
124
+ <div class="flex flex-col gap-3 h-full">
125
+ <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
126
+ <i data-lucide="map-pin" class="w-5 h-5 text-emerald-400"></i>
127
+ </div>
128
+ <div class="flex flex-col gap-1 flex-1">
129
+ <h3 class="text-base font-medium text-neutral-100">Réserver mon chauffeur</h3>
130
+ <p class="text-sm text-neutral-400">Envoyez une demande directement à votre chauffeur.</p>
131
+ </div>
132
+ <span class="text-sm font-medium text-emerald-400 mt-1">Réserver</span>
133
+ </div>
134
+ </div>
135
+
136
+ <!-- Card 2 -->
137
+ <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer">
138
+ <div class="flex flex-col gap-3 h-full">
139
+ <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
140
+ <i data-lucide="star" class="w-5 h-5 text-emerald-400"></i>
141
+ </div>
142
+ <div class="flex flex-col gap-1 flex-1">
143
+ <h3 class="text-base font-medium text-neutral-100">Retrouver mon chauffeur</h3>
144
+ <p class="text-sm text-neutral-400">Gardez le contact avec votre chauffeur de confiance.</p>
145
+ </div>
146
+ <span class="text-sm font-medium text-emerald-400 mt-1">Accéder</span>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Card 3 -->
151
+ <div class="min-w-[220px] bg-neutral-900 rounded-2xl border border-neutral-800 p-5 shadow-sm hover:border-emerald-500 hover:bg-neutral-900 transition cursor-pointer">
152
+ <div class="flex flex-col gap-3 h-full">
153
+ <div class="w-10 h-10 rounded-lg bg-emerald-500/10 flex items-center justify-center">
154
+ <i data-lucide="repeat" class="w-5 h-5 text-emerald-400"></i>
155
+ </div>
156
+ <div class="flex flex-col gap-1 flex-1">
157
+ <h3 class="text-base font-medium text-neutral-100">Reprogrammer un trajet</h3>
158
+ <p class="text-sm text-neutral-400">Replanifiez vos trajets réguliers facilement.</p>
159
+ </div>
160
+ <span class="text-sm font-medium text-emerald-400 mt-1">Voir comment</span>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </section>
165
+
166
+ <!-- Trust Section -->
167
+ <section class="mt-10">
168
+ <div class="flex flex-wrap justify-center gap-x-6 gap-y-3">
169
+ <div class="flex items-center gap-2 text-xs text-neutral-500">
170
+ <i data-lucide="user-check" class="w-3.5 h-3.5"></i>
171
+ <span>Chauffeurs identifiés</span>
172
+ </div>
173
+ <div class="flex items-center gap-2 text-xs text-neutral-500">
174
+ <i data-lucide="calendar" class="w-3.5 h-3.5"></i>
175
+ <span>Réservation simple</span>
176
+ </div>
177
+ <div class="flex items-center gap-2 text-xs text-neutral-500">
178
+ <i data-lucide="lock" class="w-3.5 h-3.5"></i>
179
+ <span>Données sécurisées</span>
180
+ </div>
181
+ <div class="flex items-center gap-2 text-xs text-neutral-500">
182
+ <i data-lucide="handshake" class="w-3.5 h-3.5"></i>
183
+ <span>Relation directe</span>
184
+ </div>
185
+ </div>
186
+ </section>
187
+
188
+ </main>
189
+
190
+ <!-- Bottom Navigation -->
191
+ <nav class="fixed bottom-0 left-0 right-0 backdrop-blur-xl bg-neutral-950/70 border-t border-neutral-900 py-3 z-50">
192
+ <div class="flex justify-around items-center">
193
+ <button class="flex flex-col items-center gap-1 text-emerald-400">
194
+ <i data-lucide="home" class="w-5 h-5"></i>
195
+ <span class="text-xs">Accueil</span>
196
+ </button>
197
+ <button class="flex flex-col items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors">
198
+ <i data-lucide="car" class="w-5 h-5"></i>
199
+ <span class="text-xs">Chauffeur</span>
200
+ </button>
201
+ <button class="flex flex-col items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors">
202
+ <i data-lucide="user" class="w-5 h-5"></i>
203
+ <span class="text-xs">Client</span>
204
+ </button>
205
+ <button class="flex flex-col items-center gap-1 text-neutral-500 hover:text-neutral-300 transition-colors">
206
+ <i data-lucide="log-in" class="w-5 h-5"></i>
207
+ <span class="text-xs">Connexion</span>
208
+ </button>
209
+ </div>
210
+ </nav>
211
+
212
+ <script src="https://unpkg.com/lucide@latest"></script>
213
+ <script>
214
+ lucide.createIcons();
215
+ </script>
216
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>
217
+ </body>
218
+ </html>