Hugging Face's logo

Spaces:
Pyfefactory
/
zvf-affiliation
Running

App Files Community
Pyfefactory commited on
Commit
a04e758
·
verified ·
1 Parent(s): 1b40b50

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +740 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Zvf Affiliation
3
- emoji: 📊
4
- colorFrom: indigo
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: zvf-affiliation
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,740 @@
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>Calendrier Pré-Ouverture - École de Musique 2025</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .timeline-item:not(:last-child)::after {
11
+ content: '';
12
+ position: absolute;
13
+ left: 7px;
14
+ top: 24px;
15
+ height: calc(100% - 24px);
16
+ width: 2px;
17
+ background: #3b82f6;
18
+ }
19
+ .phase-card:hover {
20
+ transform: translateY(-5px);
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
+ .checklist-item:hover {
24
+ background-color: #f8fafc;
25
+ }
26
+ .progress-bar {
27
+ transition: width 0.5s ease-in-out;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50 font-sans">
32
+ <div class="container mx-auto px-4 py-12 max-w-6xl">
33
+ <!-- Header -->
34
+ <header class="text-center mb-16">
35
+ <h1 class="text-4xl md:text-5xl font-bold text-indigo-800 mb-4">Calendrier Pré-Ouverture</h1>
36
+ <h2 class="text-2xl md:text-3xl font-semibold text-indigo-600">École de Musique - Septembre 2025</h2>
37
+ <div class="mt-8">
38
+ <div class="inline-flex items-center bg-indigo-100 text-indigo-800 px-6 py-3 rounded-full">
39
+ <i class="fas fa-calendar-alt mr-2"></i>
40
+ <span>24 mois pour construire votre succès</span>
41
+ </div>
42
+ </div>
43
+ </header>
44
+
45
+ <!-- Progress Overview -->
46
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
47
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
48
+ <i class="fas fa-chart-line text-indigo-600 mr-2"></i>
49
+ Vue d'ensemble du projet
50
+ </h3>
51
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
52
+ <div class="bg-indigo-50 p-4 rounded-lg">
53
+ <h4 class="font-medium text-indigo-700 mb-2">Date d'ouverture</h4>
54
+ <p class="text-2xl font-bold text-indigo-900">Septembre 2025</p>
55
+ </div>
56
+ <div class="bg-indigo-50 p-4 rounded-lg">
57
+ <h4 class="font-medium text-indigo-700 mb-2">Mois restants</h4>
58
+ <p class="text-2xl font-bold text-indigo-900">24 mois</p>
59
+ </div>
60
+ <div class="bg-indigo-50 p-4 rounded-lg">
61
+ <h4 class="font-medium text-indigo-700 mb-2">Progression globale</h4>
62
+ <div class="mt-2">
63
+ <div class="w-full bg-gray-200 rounded-full h-2.5">
64
+ <div class="progress-bar bg-indigo-600 h-2.5 rounded-full" style="width: 0%"></div>
65
+ </div>
66
+ <p class="text-right text-sm text-gray-600 mt-1">0% complété</p>
67
+ </div>
68
+ </div>
69
+ </div>
70
+ </section>
71
+
72
+ <!-- Timeline -->
73
+ <section class="mb-16">
74
+ <h3 class="text-2xl font-semibold text-gray-800 mb-8 text-center">
75
+ <i class="fas fa-road mr-2 text-indigo-600"></i>
76
+ Feuille de route stratégique
77
+ </h3>
78
+
79
+ <!-- Phase 1 -->
80
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
81
+ <div class="md:flex">
82
+ <div class="md:w-1/4 bg-indigo-700 p-6 text-white flex flex-col justify-center">
83
+ <h4 class="text-xl font-bold mb-2">Phase 1</h4>
84
+ <p class="text-indigo-100">Sept 2023 - Fév 2024</p>
85
+ <p class="text-indigo-200 mt-2">Fondations & Identité</p>
86
+ <span class="inline-block mt-4 px-3 py-1 bg-indigo-600 rounded-full text-xs font-medium">6 mois</span>
87
+ </div>
88
+ <div class="md:w-3/4 p-6">
89
+ <div class="space-y-6">
90
+ <div class="flex items-start timeline-item relative pl-8">
91
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
92
+ <div>
93
+ <h5 class="font-semibold text-gray-800">Sept-Oct 2023</h5>
94
+ <ul class="mt-2 space-y-2 text-gray-600">
95
+ <li class="flex items-start">
96
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
97
+ <span>Création de l'identité visuelle (logo, charte graphique)</span>
98
+ </li>
99
+ <li class="flex items-start">
100
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
101
+ <span>Définition du positionnement et de l'offre pédagogique</span>
102
+ </li>
103
+ <li class="flex items-start">
104
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
105
+ <span>Recherche de locaux et négociation</span>
106
+ </li>
107
+ </ul>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="flex items-start timeline-item relative pl-8">
112
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
113
+ <div>
114
+ <h5 class="font-semibold text-gray-800">Nov-Déc 2023</h5>
115
+ <ul class="mt-2 space-y-2 text-gray-600">
116
+ <li class="flex items-start">
117
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
118
+ <span>Lancement du site web vitrine avec formulaire de pré-inscription</span>
119
+ </li>
120
+ <li class="flex items-start">
121
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
122
+ <span>Création des réseaux sociaux (Facebook, Instagram, LinkedIn)</span>
123
+ </li>
124
+ <li class="flex items-start">
125
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
126
+ <span>Premiers partenariats avec magasins de musique locaux</span>
127
+ </li>
128
+ </ul>
129
+ </div>
130
+ </div>
131
+
132
+ <div class="flex items-start relative pl-8">
133
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
134
+ <div>
135
+ <h5 class="font-semibold text-gray-800">Jan-Fév 2024</h5>
136
+ <ul class="mt-2 space-y-2 text-gray-600">
137
+ <li class="flex items-start">
138
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
139
+ <span>Signature des premiers professeurs référents</span>
140
+ </li>
141
+ <li class="flex items-start">
142
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
143
+ <span>Campagne "Pré-inscriptions avant-première" avec tarifs préférentiels</span>
144
+ </li>
145
+ <li class="flex items-start">
146
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
147
+ <span>Organisation d'un événement de présentation à la presse locale</span>
148
+ </li>
149
+ </ul>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Phase 2 -->
158
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
159
+ <div class="md:flex">
160
+ <div class="md:w-1/4 bg-indigo-600 p-6 text-white flex flex-col justify-center">
161
+ <h4 class="text-xl font-bold mb-2">Phase 2</h4>
162
+ <p class="text-indigo-100">Mars - Août 2024</p>
163
+ <p class="text-indigo-200 mt-2">Visibilité & Engagement</p>
164
+ <span class="inline-block mt-4 px-3 py-1 bg-indigo-500 rounded-full text-xs font-medium">6 mois</span>
165
+ </div>
166
+ <div class="md:w-3/4 p-6">
167
+ <div class="space-y-6">
168
+ <div class="flex items-start timeline-item relative pl-8">
169
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
170
+ <div>
171
+ <h5 class="font-semibold text-gray-800">Mars-Mai 2024</h5>
172
+ <ul class="mt-2 space-y-2 text-gray-600">
173
+ <li class="flex items-start">
174
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
175
+ <span>Ateliers découverte gratuits dans les écoles et centres culturels</span>
176
+ </li>
177
+ <li class="flex items-start">
178
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
179
+ <span>Partenariat avec les conservatoires locaux pour complémentarité</span>
180
+ </li>
181
+ <li class="flex items-start">
182
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
183
+ <span>Lancement d'une chaîne YouTube avec tutoriels et présentations</span>
184
+ </li>
185
+ </ul>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="flex items-start timeline-item relative pl-8">
190
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
191
+ <div>
192
+ <h5 class="font-semibold text-gray-800">Juin-Juil 2024</h5>
193
+ <ul class="mt-2 space-y-2 text-gray-600">
194
+ <li class="flex items-start">
195
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
196
+ <span>Participation aux festivals et événements musicaux locaux</span>
197
+ </li>
198
+ <li class="flex items-start">
199
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
200
+ <span>Campagne publicitaire ciblée (Google Ads, Facebook Ads)</span>
201
+ </li>
202
+ <li class="flex items-start">
203
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
204
+ <span>Mise en place d'un programme de parrainage (élèves actuels)</span>
205
+ </li>
206
+ </ul>
207
+ </div>
208
+ </div>
209
+
210
+ <div class="flex items-start relative pl-8">
211
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
212
+ <div>
213
+ <h5 class="font-semibold text-gray-800">Août 2024</h5>
214
+ <ul class="mt-2 space-y-2 text-gray-600">
215
+ <li class="flex items-start">
216
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
217
+ <span>Finalisation des locaux et aménagement des salles</span>
218
+ </li>
219
+ <li class="flex items-start">
220
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
221
+ <span>Portes ouvertes avec démonstrations et essais gratuits</span>
222
+ </li>
223
+ <li class="flex items-start">
224
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
225
+ <span>Lancement du programme de bourses pour jeunes talents</span>
226
+ </li>
227
+ </ul>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ </div>
233
+ </div>
234
+
235
+ <!-- Phase 3 -->
236
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden mb-8 transition duration-300">
237
+ <div class="md:flex">
238
+ <div class="md:w-1/4 bg-indigo-500 p-6 text-white flex flex-col justify-center">
239
+ <h4 class="text-xl font-bold mb-2">Phase 3</h4>
240
+ <p class="text-indigo-100">Sept 2024 - Fév 2025</p>
241
+ <p class="text-indigo-200 mt-2">Accélération & Recrutement</p>
242
+ <span class="inline-block mt-4 px-3 py-1 bg-indigo-400 rounded-full text-xs font-medium">6 mois</span>
243
+ </div>
244
+ <div class="md:w-3/4 p-6">
245
+ <div class="space-y-6">
246
+ <div class="flex items-start timeline-item relative pl-8">
247
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
248
+ <div>
249
+ <h5 class="font-semibold text-gray-800">Sept-Déc 2024</h5>
250
+ <ul class="mt-2 space-y-2 text-gray-600">
251
+ <li class="flex items-start">
252
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
253
+ <span>Masterclasses avec musiciens renommés (communication événementielle)</span>
254
+ </li>
255
+ <li class="flex items-start">
256
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
257
+ <span>Partenariats avec entreprises locales pour cours en entreprise</span>
258
+ </li>
259
+ <li class="flex items-start">
260
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
261
+ <span>Campagne "Noël musical" avec cadeaux et promotions</span>
262
+ </li>
263
+ </ul>
264
+ </div>
265
+ </div>
266
+
267
+ <div class="flex items-start relative pl-8">
268
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
269
+ <div>
270
+ <h5 class="font-semibold text-gray-800">Jan-Fév 2025</h5>
271
+ <ul class="mt-2 space-y-2 text-gray-600">
272
+ <li class="flex items-start">
273
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
274
+ <span>Lancement d'un podcast sur l'apprentissage musical</span>
275
+ </li>
276
+ <li class="flex items-start">
277
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
278
+ <span>Programme de fidélisation avec avantages progressifs</span>
279
+ </li>
280
+ <li class="flex items-start">
281
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
282
+ <span>Stratégie de référencement local intensifiée</span>
283
+ </li>
284
+ </ul>
285
+ </div>
286
+ </div>
287
+ </div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+
292
+ <!-- Phase 4 -->
293
+ <div class="phase-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
294
+ <div class="md:flex">
295
+ <div class="md:w-1/4 bg-indigo-400 p-6 text-white flex flex-col justify-center">
296
+ <h4 class="text-xl font-bold mb-2">Phase 4</h4>
297
+ <p class="text-indigo-100">Mars - Sept 2025</p>
298
+ <p class="text-indigo-200 mt-2">Lancement & Pérennisation</p>
299
+ <span class="inline-block mt-4 px-3 py-1 bg-indigo-300 rounded-full text-xs font-medium">6 mois</span>
300
+ </div>
301
+ <div class="md:w-3/4 p-6">
302
+ <div class="space-y-6">
303
+ <div class="flex items-start timeline-item relative pl-8">
304
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
305
+ <div>
306
+ <h5 class="font-semibold text-gray-800">Mars-Mai 2025</h5>
307
+ <ul class="mt-2 space-y-2 text-gray-600">
308
+ <li class="flex items-start">
309
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
310
+ <span>Grande campagne de lancement multi-canaux</span>
311
+ </li>
312
+ <li class="flex items-start">
313
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
314
+ <span>Partenariats médias locaux (radio, journaux, TV locale)</span>
315
+ </li>
316
+ <li class="flex items-start">
317
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
318
+ <span>Concours de jeunes talents avec jury de professionnels</span>
319
+ </li>
320
+ </ul>
321
+ </div>
322
+ </div>
323
+
324
+ <div class="flex items-start timeline-item relative pl-8">
325
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
326
+ <div>
327
+ <h5 class="font-semibold text-gray-800">Juin-Juil 2025</h5>
328
+ <ul class="mt-2 space-y-2 text-gray-600">
329
+ <li class="flex items-start">
330
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
331
+ <span>Journées portes ouvertes avec concerts d'élèves</span>
332
+ </li>
333
+ <li class="flex items-start">
334
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
335
+ <span>Stages d'été intensifs (communication ciblée parents)</span>
336
+ </li>
337
+ <li class="flex items-start">
338
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
339
+ <span>Programme "Rentrée musicale" avec avantages exclusifs</span>
340
+ </li>
341
+ </ul>
342
+ </div>
343
+ </div>
344
+
345
+ <div class="flex items-start relative pl-8">
346
+ <div class="absolute left-0 mt-1 w-4 h-4 rounded-full bg-indigo-600 border-4 border-indigo-200"></div>
347
+ <div>
348
+ <h5 class="font-semibold text-gray-800">Août-Sept 2025</h5>
349
+ <ul class="mt-2 space-y-2 text-gray-600">
350
+ <li class="flex items-start">
351
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
352
+ <span>Grand événement d'ouverture avec concert inaugural</span>
353
+ </li>
354
+ <li class="flex items-start">
355
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
356
+ <span>Reportage média sur la première rentrée</span>
357
+ </li>
358
+ <li class="flex items-start">
359
+ <i class="far fa-circle text-indigo-500 mt-1 mr-2"></i>
360
+ <span>Mise en place d'un programme alumni pour fidélisation</span>
361
+ </li>
362
+ </ul>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+ </section>
370
+
371
+ <!-- Checklist -->
372
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
373
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
374
+ <i class="fas fa-tasks text-indigo-600 mr-2"></i>
375
+ Checklist des Canaux de Communication
376
+ </h3>
377
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
378
+ <!-- Digital -->
379
+ <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
380
+ <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
381
+ <i class="fas fa-laptop-code mr-2"></i>
382
+ Digital
383
+ </h4>
384
+ <ul class="space-y-2 text-sm">
385
+ <li class="flex items-start">
386
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
387
+ <span>Site web responsive avec blog pédagogique</span>
388
+ </li>
389
+ <li class="flex items-start">
390
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
391
+ <span>Réseaux sociaux (Instagram, Facebook, TikTok)</span>
392
+ </li>
393
+ <li class="flex items-start">
394
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
395
+ <span>Newsletter emailing (Mailchimp)</span>
396
+ </li>
397
+ <li class="flex items-start">
398
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
399
+ <span>SEO local et Google My Business</span>
400
+ </li>
401
+ </ul>
402
+ </div>
403
+
404
+ <!-- Événementiel -->
405
+ <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
406
+ <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
407
+ <i class="fas fa-calendar-check mr-2"></i>
408
+ Événementiel
409
+ </h4>
410
+ <ul class="space-y-2 text-sm">
411
+ <li class="flex items-start">
412
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
413
+ <span>Portes ouvertes avec démos</span>
414
+ </li>
415
+ <li class="flex items-start">
416
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
417
+ <span>Concerts pédagogiques</span>
418
+ </li>
419
+ <li class="flex items-start">
420
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
421
+ <span>Participation à des salons</span>
422
+ </li>
423
+ <li class="flex items-start">
424
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
425
+ <span>Événements corporatifs</span>
426
+ </li>
427
+ </ul>
428
+ </div>
429
+
430
+ <!-- Partenariats -->
431
+ <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
432
+ <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
433
+ <i class="fas fa-handshake mr-2"></i>
434
+ Partenariats
435
+ </h4>
436
+ <ul class="space-y-2 text-sm">
437
+ <li class="flex items-start">
438
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
439
+ <span>Écoles et centres culturels</span>
440
+ </li>
441
+ <li class="flex items-start">
442
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
443
+ <span>Magasins d'instruments</span>
444
+ </li>
445
+ <li class="flex items-start">
446
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
447
+ <span>Artistes et influenceurs locaux</span>
448
+ </li>
449
+ <li class="flex items-start">
450
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
451
+ <span>Entreprises pour cours en entreprise</span>
452
+ </li>
453
+ </ul>
454
+ </div>
455
+
456
+ <!-- Print -->
457
+ <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
458
+ <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
459
+ <i class="fas fa-newspaper mr-2"></i>
460
+ Print
461
+ </h4>
462
+ <ul class="space-y-2 text-sm">
463
+ <li class="flex items-start">
464
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
465
+ <span>Flyers et affiches</span>
466
+ </li>
467
+ <li class="flex items-start">
468
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
469
+ <span>Dossier de presse</span>
470
+ </li>
471
+ <li class="flex items-start">
472
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
473
+ <span>Plaquette institutionnelle</span>
474
+ </li>
475
+ <li class="flex items-start">
476
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
477
+ <span>Encarts presse locale</span>
478
+ </li>
479
+ </ul>
480
+ </div>
481
+
482
+ <!-- Relations Presse -->
483
+ <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
484
+ <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
485
+ <i class="fas fa-microphone mr-2"></i>
486
+ Relations Presse
487
+ </h4>
488
+ <ul class="space-y-2 text-sm">
489
+ <li class="flex items-start">
490
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
491
+ <span>Communiqués de presse</span>
492
+ </li>
493
+ <li class="flex items-start">
494
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
495
+ <span>Interviews radio/TV</span>
496
+ </li>
497
+ <li class="flex items-start">
498
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
499
+ <span>Articles invités dans blogs</span>
500
+ </li>
501
+ <li class="flex items-start">
502
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
503
+ <span>Reportages sur l'école</span>
504
+ </li>
505
+ </ul>
506
+ </div>
507
+
508
+ <!-- Fidélisation -->
509
+ <div class="checklist-item border border-gray-200 rounded-lg p-4 transition duration-200">
510
+ <h4 class="font-medium text-indigo-700 mb-3 flex items-center">
511
+ <i class="fas fa-star mr-2"></i>
512
+ Fidélisation
513
+ </h4>
514
+ <ul class="space-y-2 text-sm">
515
+ <li class="flex items-start">
516
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
517
+ <span>Programme de parrainage</span>
518
+ </li>
519
+ <li class="flex items-start">
520
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
521
+ <span>Carte de fidélité</span>
522
+ </li>
523
+ <li class="flex items-start">
524
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
525
+ <span>Événements exclusifs élèves</span>
526
+ </li>
527
+ <li class="flex items-start">
528
+ <i class="far fa-square text-gray-400 mt-1 mr-2"></i>
529
+ <span>Programme alumni</span>
530
+ </li>
531
+ </ul>
532
+ </div>
533
+ </div>
534
+ </section>
535
+
536
+ <!-- Budget Estimate -->
537
+ <section class="bg-white rounded-xl shadow-md p-6 mb-12">
538
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 flex items-center">
539
+ <i class="fas fa-coins text-indigo-600 mr-2"></i>
540
+ Estimation Budgétaire Communication
541
+ </h3>
542
+ <div class="overflow-x-auto">
543
+ <table class="min-w-full divide-y divide-gray-200">
544
+ <thead class="bg-gray-50">
545
+ <tr>
546
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Poste</th>
547
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 1</th>
548
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 2</th>
549
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 3</th>
550
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phase 4</th>
551
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
552
+ </tr>
553
+ </thead>
554
+ <tbody class="bg-white divide-y divide-gray-200">
555
+ <tr>
556
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Création site web</td>
557
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 000€</td>
558
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500€</td>
559
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500€</td>
560
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 000€</td>
561
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">5 000€</td>
562
+ </tr>
563
+ <tr>
564
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Réseaux sociaux</td>
565
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 000€</td>
566
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 000€</td>
567
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 000€</td>
568
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
569
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">6 500€</td>
570
+ </tr>
571
+ <tr>
572
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Publicité en ligne</td>
573
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">500€</td>
574
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 500€</td>
575
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3 000€</td>
576
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4 000€</td>
577
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">10 000€</td>
578
+ </tr>
579
+ <tr>
580
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Événements</td>
581
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
582
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5 000€</td>
583
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7 000€</td>
584
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10 000€</td>
585
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">23 500€</td>
586
+ </tr>
587
+ <tr>
588
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Print</td>
589
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 000€</td>
590
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2 000€</td>
591
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
592
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1 500€</td>
593
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">6 000€</td>
594
+ </tr>
595
+ <tr class="bg-gray-50">
596
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Total</td>
597
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">7 000€</td>
598
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">12 000€</td>
599
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">14 000€</td>
600
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-indigo-600">18 000€</td>
601
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-bold text-indigo-800">51 000€</td>
602
+ </tr>
603
+ </tbody>
604
+ </table>
605
+ </div>
606
+ <div class="mt-4 text-sm text-gray-600">
607
+ <p><i class="fas fa-info-circle text-indigo-500 mr-1"></i> Ces estimations peuvent varier selon votre localisation et les prestataires choisis.</p>
608
+ </div>
609
+ </section>
610
+
611
+ <!-- Tips -->
612
+ <section class="bg-indigo-50 rounded-xl p-6">
613
+ <h3 class="text-xl font-semibold text-indigo-800 mb-4 flex items-center">
614
+ <i class="fas fa-lightbulb text-indigo-600 mr-2"></i>
615
+ Conseils Stratégiques
616
+ </h3>
617
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
618
+ <div class="bg-white p-4 rounded-lg shadow-sm">
619
+ <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
620
+ <i class="fas fa-users mr-2"></i>
621
+ Stratégie de Contenu
622
+ </h4>
623
+ <ul class="space-y-2 text-sm text-gray-700">
624
+ <li class="flex items-start">
625
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
626
+ <span>Créez un blog avec des conseils pour apprendre la musique</span>
627
+ </li>
628
+ <li class="flex items-start">
629
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
630
+ <span>Postez régulièrement des vidéos courtes sur les réseaux</span>
631
+ </li>
632
+ <li class="flex items-start">
633
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
634
+ <span>Mettez en avant les succès de vos élèves</span>
635
+ </li>
636
+ </ul>
637
+ </div>
638
+ <div class="bg-white p-4 rounded-lg shadow-sm">
639
+ <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
640
+ <i class="fas fa-hand-holding-usd mr-2"></i>
641
+ Rentabilisation
642
+ </h4>
643
+ <ul class="space-y-2 text-sm text-gray-700">
644
+ <li class="flex items-start">
645
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
646
+ <span>Proposez des cours d'essai payants</span>
647
+ </li>
648
+ <li class="flex items-start">
649
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
650
+ <span>Vendez des accessoires et partitions</span>
651
+ </li>
652
+ <li class="flex items-start">
653
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
654
+ <span>Organisez des stages pendant les vacances</span>
655
+ </li>
656
+ </ul>
657
+ </div>
658
+ <div class="bg-white p-4 rounded-lg shadow-sm">
659
+ <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
660
+ <i class="fas fa-chart-pie mr-2"></i>
661
+ Analyse
662
+ </h4>
663
+ <ul class="space-y-2 text-sm text-gray-700">
664
+ <li class="flex items-start">
665
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
666
+ <span>Trackez les sources de vos élèves (Google Analytics)</span>
667
+ </li>
668
+ <li class="flex items-start">
669
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
670
+ <span>Analysez les taux de conversion par canal</span>
671
+ </li>
672
+ <li class="flex items-start">
673
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
674
+ <span>Adaptez votre budget en fonction des ROI</span>
675
+ </li>
676
+ </ul>
677
+ </div>
678
+ <div class="bg-white p-4 rounded-lg shadow-sm">
679
+ <h4 class="font-medium text-indigo-700 mb-2 flex items-center">
680
+ <i class="fas fa-graduation-cap mr-2"></i>
681
+ Pédagogie
682
+ </h4>
683
+ <ul class="space-y-2 text-sm text-gray-700">
684
+ <li class="flex items-start">
685
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
686
+ <span>Créez des programmes adaptés à chaque âge</span>
687
+ </li>
688
+ <li class="flex items-start">
689
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
690
+ <span>Proposez des cours en groupe et individuels</span>
691
+ </li>
692
+ <li class="flex items-start">
693
+ <i class="fas fa-check text-indigo-500 mt-1 mr-2"></i>
694
+ <span>Développez une méthode unique pour vous différencier</span>
695
+ </li>
696
+ </ul>
697
+ </div>
698
+ </div>
699
+ </section>
700
+
701
+ <!-- Footer -->
702
+ <footer class="mt-16 text-center text-gray-600 text-sm">
703
+ <p>© 2023 Calendrier Pré-Ouverture École de Musique - Tous droits réservés</p>
704
+ <p class="mt-2">Conçu avec <i class="fas fa-heart text-red-500"></i> pour les entrepreneurs musicaux</p>
705
+ </footer>
706
+ </div>
707
+
708
+ <script>
709
+ // Simple animation for progress bar
710
+ document.addEventListener('DOMContentLoaded', function() {
711
+ const progressBar = document.querySelector('.progress-bar');
712
+ let width = 0;
713
+ const interval = setInterval(function() {
714
+ if (width >= 100) {
715
+ clearInterval(interval);
716
+ } else {
717
+ width++;
718
+ progressBar.style.width = width + '%';
719
+ progressBar.previousElementSibling.textContent = width + '% complété';
720
+ }
721
+ }, 30);
722
+
723
+ // Checklist interaction
724
+ const checklistItems = document.querySelectorAll('.checklist-item li');
725
+ checklistItems.forEach(item => {
726
+ item.addEventListener('click', function() {
727
+ const icon = this.querySelector('i');
728
+ if (icon.classList.contains('fa-square')) {
729
+ icon.classList.remove('fa-square', 'text-gray-400');
730
+ icon.classList.add('fa-check-square', 'text-green-500');
731
+ } else {
732
+ icon.classList.remove('fa-check-square', 'text-green-500');
733
+ icon.classList.add('fa-square', 'text-gray-400');
734
+ }
735
+ });
736
+ });
737
+ });
738
+ </script>
739
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Pyfefactory/zvf-affiliation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
740
+ </html>