Hugging Face's logo

Spaces:
federi
/
testdeploy
Running

App Files Community
federi commited on
Commit
5e8f04d
·
verified ·
1 Parent(s): 4f55a74

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +648 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Testdeploy
3
- emoji: 🐠
4
- colorFrom: purple
5
- colorTo: green
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: testdeploy
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
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,648 @@
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="it">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Ginevra Bersoldin - Insegnante di Italiano per Stranieri | Milano</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
+ .hero-pattern {
11
+ background-image: url('https://images.unsplash.com/photo-1529254479751-faeedc87aef8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
12
+ background-size: cover;
13
+ background-position: center;
14
+ }
15
+
16
+ .wave-shape {
17
+ position: absolute;
18
+ bottom: 0;
19
+ left: 0;
20
+ width: 100%;
21
+ overflow: hidden;
22
+ line-height: 0;
23
+ }
24
+
25
+ .wave-shape svg {
26
+ position: relative;
27
+ display: block;
28
+ width: calc(100% + 1.3px);
29
+ height: 150px;
30
+ }
31
+
32
+ .wave-shape .shape-fill {
33
+ fill: #FFFFFF;
34
+ }
35
+
36
+ .testimonial-card {
37
+ transition: all 0.3s ease;
38
+ }
39
+
40
+ .testimonial-card:hover {
41
+ transform: translateY(-5px);
42
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
43
+ }
44
+
45
+ .flag-icon {
46
+ width: 30px;
47
+ height: 20px;
48
+ display: inline-block;
49
+ margin-right: 10px;
50
+ border-radius: 2px;
51
+ }
52
+ </style>
53
+ </head>
54
+ <body class="font-sans antialiased text-gray-800">
55
+ <!-- Navigation -->
56
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
57
+ <div class="max-w-6xl mx-auto px-4">
58
+ <div class="flex justify-between items-center h-16">
59
+ <div class="flex items-center">
60
+ <a href="#" class="flex items-center">
61
+ <i class="fas fa-language text-2xl text-blue-600 mr-2"></i>
62
+ <span class="text-xl font-semibold text-gray-800">Ginevra Bersoldin</span>
63
+ </a>
64
+ </div>
65
+ <div class="hidden md:flex items-center space-x-8">
66
+ <a href="#home" class="text-blue-600 font-medium">Home</a>
67
+ <a href="#about" class="hover:text-blue-600 transition">Chi Sono</a>
68
+ <a href="#courses" class="hover:text-blue-600 transition">Corsi</a>
69
+ <a href="#testimonials" class="hover:text-blue-600 transition">Testimonianze</a>
70
+ <a href="#contact" class="hover:text-blue-600 transition">Contatti</a>
71
+ <a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Prenota una lezione</a>
72
+ </div>
73
+ <div class="md:hidden flex items-center">
74
+ <button class="outline-none mobile-menu-button">
75
+ <i class="fas fa-bars text-gray-600 text-xl"></i>
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </div>
80
+ <!-- Mobile menu -->
81
+ <div class="hidden mobile-menu bg-white shadow-lg">
82
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
83
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600">Home</a>
84
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Chi Sono</a>
85
+ <a href="#courses" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Corsi</a>
86
+ <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Testimonianze</a>
87
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Contatti</a>
88
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium bg-blue-600 text-white">Prenota una lezione</a>
89
+ </div>
90
+ </div>
91
+ </nav>
92
+
93
+ <!-- Hero Section -->
94
+ <section id="home" class="hero-pattern relative pt-32 pb-64 text-white">
95
+ <div class="absolute inset-0 bg-blue-900 opacity-75"></div>
96
+ <div class="max-w-6xl mx-auto px-4 relative z-10">
97
+ <div class="md:w-2/3 lg:w-1/2">
98
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Impara l'Italiano con Ginevra</h1>
99
+ <p class="text-xl mb-8">Lezioni personalizzate di italiano per stranieri a Milano e online. Scopri la bellezza della lingua italiana e della cultura del Bel Paese.</p>
100
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
101
+ <a href="#contact" class="bg-white text-blue-600 px-6 py-3 rounded-md font-medium hover:bg-gray-100 transition text-center">Prenota una lezione</a>
102
+ <a href="#courses" class="border-2 border-white text-white px-6 py-3 rounded-md font-medium hover:bg-white hover:text-blue-600 transition text-center">Scopri i corsi</a>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ <div class="wave-shape">
107
+ <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
108
+ <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
109
+ </svg>
110
+ </div>
111
+ </section>
112
+
113
+ <!-- About Section -->
114
+ <section id="about" class="py-20 bg-white">
115
+ <div class="max-w-6xl mx-auto px-4">
116
+ <div class="flex flex-col md:flex-row items-center">
117
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
118
+ <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Ginevra Bersoldin" class="rounded-lg shadow-xl w-full">
119
+ </div>
120
+ <div class="md:w-1/2">
121
+ <h2 class="text-3xl font-bold mb-6 text-blue-600">Chi Sono</h2>
122
+ <p class="text-lg mb-6">Ciao! Sono Ginevra Bersoldin, un'insegnante qualificata di italiano per stranieri con sede a Milano. Con oltre 10 anni di esperienza nell'insegnamento, ho aiutato centinaia di studenti da tutto il mondo a imparare e amare la lingua italiana.</p>
123
+ <p class="text-lg mb-6">La mia passione per l'insegnamento nasce dalla convinzione che imparare una nuova lingua sia molto più che memorizzare vocaboli e regole grammaticali: è un viaggio nella cultura e nello stile di vita di un popolo.</p>
124
+ <div class="grid grid-cols-2 gap-4 mb-6">
125
+ <div class="flex items-center">
126
+ <i class="fas fa-graduation-cap text-blue-500 mr-3 text-xl"></i>
127
+ <span>Laurea in Lingue e Letterature Straniere</span>
128
+ </div>
129
+ <div class="flex items-center">
130
+ <i class="fas fa-certificate text-blue-500 mr-3 text-xl"></i>
131
+ <span>Certificata DITALS II</span>
132
+ </div>
133
+ <div class="flex items-center">
134
+ <i class="fas fa-globe-europe text-blue-500 mr-3 text-xl"></i>
135
+ <span>Esperienza internazionale</span>
136
+ </div>
137
+ <div class="flex items-center">
138
+ <i class="fas fa-users text-blue-500 mr-3 text-xl"></i>
139
+ <span>Oltre 500 studenti</span>
140
+ </div>
141
+ </div>
142
+ <a href="#contact" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition">Contattami</a>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </section>
147
+
148
+ <!-- Courses Section -->
149
+ <section id="courses" class="py-20 bg-gray-50">
150
+ <div class="max-w-6xl mx-auto px-4">
151
+ <div class="text-center mb-16">
152
+ <h2 class="text-3xl font-bold mb-4 text-blue-600">I Miei Corsi</h2>
153
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Offro lezioni personalizzate per ogni livello e necessità, sia individuali che di gruppo, a Milano e online.</p>
154
+ </div>
155
+
156
+ <div class="grid md:grid-cols-3 gap-8">
157
+ <!-- Course 1 -->
158
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
159
+ <div class="bg-blue-600 text-white py-4 px-6">
160
+ <h3 class="text-xl font-bold">Italiano Base</h3>
161
+ <p class="text-blue-100">A1-A2 Livello</p>
162
+ </div>
163
+ <div class="p-6">
164
+ <div class="flex items-center mb-4">
165
+ <i class="fas fa-euro-sign text-blue-500 mr-2"></i>
166
+ <span class="font-bold text-lg">30€/ora</span>
167
+ </div>
168
+ <ul class="space-y-3 mb-6">
169
+ <li class="flex items-start">
170
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
171
+ <span>Introduzione alla lingua italiana</span>
172
+ </li>
173
+ <li class="flex items-start">
174
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
175
+ <span>Vocabolario essenziale</span>
176
+ </li>
177
+ <li class="flex items-start">
178
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
179
+ <span>Grammatica di base</span>
180
+ </li>
181
+ <li class="flex items-start">
182
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
183
+ <span>Conversazioni semplici</span>
184
+ </li>
185
+ </ul>
186
+ <a href="#contact" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Prenota ora</a>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Course 2 -->
191
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105 transform scale-105 border-2 border-blue-500">
192
+ <div class="bg-blue-700 text-white py-4 px-6">
193
+ <h3 class="text-xl font-bold">Italiano Intermedio</h3>
194
+ <p class="text-blue-200">B1-B2 Livello</p>
195
+ </div>
196
+ <div class="p-6">
197
+ <div class="flex items-center mb-4">
198
+ <i class="fas fa-euro-sign text-blue-500 mr-2"></i>
199
+ <span class="font-bold text-lg">35€/ora</span>
200
+ </div>
201
+ <ul class="space-y-3 mb-6">
202
+ <li class="flex items-start">
203
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
204
+ <span>Approfondimento grammaticale</span>
205
+ </li>
206
+ <li class="flex items-start">
207
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
208
+ <span>Conversazioni complesse</span>
209
+ </li>
210
+ <li class="flex items-start">
211
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
212
+ <span>Lettura di testi autentici</span>
213
+ </li>
214
+ <li class="flex items-start">
215
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
216
+ <span>Preparazione esami CILS/PLIDA</span>
217
+ </li>
218
+ </ul>
219
+ <a href="#contact" class="block text-center bg-blue-700 text-white px-4 py-2 rounded-md hover:bg-blue-800 transition">Prenota ora</a>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Course 3 -->
224
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
225
+ <div class="bg-blue-600 text-white py-4 px-6">
226
+ <h3 class="text-xl font-bold">Italiano Avanzato</h3>
227
+ <p class="text-blue-100">C1-C2 Livello</p>
228
+ </div>
229
+ <div class="p-6">
230
+ <div class="flex items-center mb-4">
231
+ <i class="fas fa-euro-sign text-blue-500 mr-2"></i>
232
+ <span class="font-bold text-lg">40€/ora</span>
233
+ </div>
234
+ <ul class="space-y-3 mb-6">
235
+ <li class="flex items-start">
236
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
237
+ <span>Perfezionamento linguistico</span>
238
+ </li>
239
+ <li class="flex items-start">
240
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
241
+ <span>Analisi di testi complessi</span>
242
+ </li>
243
+ <li class="flex items-start">
244
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
245
+ <span>Italiano per lavoro/università</span>
246
+ </li>
247
+ <li class="flex items-start">
248
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
249
+ <span>Espressione idiomatica</span>
250
+ </li>
251
+ </ul>
252
+ <a href="#contact" class="block text-center bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Prenota ora</a>
253
+ </div>
254
+ </div>
255
+ </div>
256
+
257
+ <div class="mt-16 bg-white rounded-lg shadow-lg p-8">
258
+ <h3 class="text-2xl font-bold mb-6 text-center text-blue-600">Corsi Speciali</h3>
259
+ <div class="grid md:grid-cols-2 gap-8">
260
+ <div class="flex items-start">
261
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
262
+ <i class="fas fa-briefcase text-blue-600 text-xl"></i>
263
+ </div>
264
+ <div>
265
+ <h4 class="font-bold text-lg mb-2">Italiano Commerciale</h4>
266
+ <p class="text-gray-600">Corso specifico per professionisti che necessitano di italiano per il lavoro, con focus su terminologia settoriale, scrittura di email e presentazioni.</p>
267
+ </div>
268
+ </div>
269
+ <div class="flex items-start">
270
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
271
+ <i class="fas fa-utensils text-blue-600 text-xl"></i>
272
+ </div>
273
+ <div>
274
+ <h4 class="font-bold text-lg mb-2">Italiano e Cucina</h4>
275
+ <p class="text-gray-600">Impara l'italiano attraverso la cucina italiana! Lezioni che combinano lingua e preparazione di piatti tipici.</p>
276
+ </div>
277
+ </div>
278
+ <div class="flex items-start">
279
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
280
+ <i class="fas fa-landmark text-blue-600 text-xl"></i>
281
+ </div>
282
+ <div>
283
+ <h4 class="font-bold text-lg mb-2">Italiano per l'Immigrazione</h4>
284
+ <p class="text-gray-600">Preparazione specifica per il test di lingua richiesto per il permesso di soggiorno di lungo periodo.</p>
285
+ </div>
286
+ </div>
287
+ <div class="flex items-start">
288
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
289
+ <i class="fas fa-child text-blue-600 text-xl"></i>
290
+ </div>
291
+ <div>
292
+ <h4 class="font-bold text-lg mb-2">Italiano per Bambini</h4>
293
+ <p class="text-gray-600">Metodi didattici specifici per bambini e ragazzi, con approccio ludico e coinvolgente.</p>
294
+ </div>
295
+ </div>
296
+ </div>
297
+ </div>
298
+ </div>
299
+ </section>
300
+
301
+ <!-- Testimonials Section -->
302
+ <section id="testimonials" class="py-20 bg-white">
303
+ <div class="max-w-6xl mx-auto px-4">
304
+ <div class="text-center mb-16">
305
+ <h2 class="text-3xl font-bold mb-4 text-blue-600">Cosa Dicono i Miei Studenti</h2>
306
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Le esperienze e i successi dei miei studenti sono la mia più grande soddisfazione.</p>
307
+ </div>
308
+
309
+ <div class="grid md:grid-cols-3 gap-8">
310
+ <!-- Testimonial 1 -->
311
+ <div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md">
312
+ <div class="flex items-center mb-4">
313
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
314
+ <i class="fas fa-user text-blue-600 text-xl"></i>
315
+ </div>
316
+ <div>
317
+ <h4 class="font-bold">Sophie Martin</h4>
318
+ <div class="flex items-center">
319
+ <span class="flag-icon bg-blue-500"></span>
320
+ <span class="text-sm text-gray-500">Francia</span>
321
+ </div>
322
+ </div>
323
+ </div>
324
+ <div class="flex mb-2">
325
+ <i class="fas fa-star text-yellow-400"></i>
326
+ <i class="fas fa-star text-yellow-400"></i>
327
+ <i class="fas fa-star text-yellow-400"></i>
328
+ <i class="fas fa-star text-yellow-400"></i>
329
+ <i class="fas fa-star text-yellow-400"></i>
330
+ </div>
331
+ <p class="text-gray-600">"Ginevra è un'insegnante fantastica! Le sue lezioni sono sempre ben preparate e divertenti. In soli 6 mesi ho superato l'esame B1 grazie al suo metodo efficace."</p>
332
+ </div>
333
+
334
+ <!-- Testimonial 2 -->
335
+ <div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md">
336
+ <div class="flex items-center mb-4">
337
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
338
+ <i class="fas fa-user text-blue-600 text-xl"></i>
339
+ </div>
340
+ <div>
341
+ <h4 class="font-bold">Ahmed Al-Farsi</h4>
342
+ <div class="flex items-center">
343
+ <span class="flag-icon bg-green-500"></span>
344
+ <span class="text-sm text-gray-500">Egitto</span>
345
+ </div>
346
+ </div>
347
+ </div>
348
+ <div class="flex mb-2">
349
+ <i class="fas fa-star text-yellow-400"></i>
350
+ <i class="fas fa-star text-yellow-400"></i>
351
+ <i class="fas fa-star text-yellow-400"></i>
352
+ <i class="fas fa-star text-yellow-400"></i>
353
+ <i class="fas fa-star text-yellow-400"></i>
354
+ </div>
355
+ <p class="text-gray-600">"Ho provato molte scuole di italiano a Milano, ma nessuna come Ginevra. Spiega la grammatica in modo chiaro e paziente. Ora posso parlare fluentemente con i miei colleghi italiani!"</p>
356
+ </div>
357
+
358
+ <!-- Testimonial 3 -->
359
+ <div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md">
360
+ <div class="flex items-center mb-4">
361
+ <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
362
+ <i class="fas fa-user text-blue-600 text-xl"></i>
363
+ </div>
364
+ <div>
365
+ <h4 class="font-bold">Li Wei</h4>
366
+ <div class="flex items-center">
367
+ <span class="flag-icon bg-red-500"></span>
368
+ <span class="text-sm text-gray-500">Cina</span>
369
+ </div>
370
+ </div>
371
+ </div>
372
+ <div class="flex mb-2">
373
+ <i class="fas fa-star text-yellow-400"></i>
374
+ <i class="fas fa-star text-yellow-400"></i>
375
+ <i class="fas fa-star text-yellow-400"></i>
376
+ <i class="fas fa-star text-yellow-400"></i>
377
+ <i class="fas fa-star text-yellow-400"></i>
378
+ </div>
379
+ <p class="text-gray-600">"Le lezioni online con Ginevra sono perfette per il mio programma intensivo di lavoro. Adoro come incorpora la cultura italiana nelle lezioni. Consigliatissima!"</p>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="mt-12 text-center">
384
+ <a href="#contact" class="inline-block bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition">Diventa anche tu mio studente</a>
385
+ </div>
386
+ </div>
387
+ </section>
388
+
389
+ <!-- Contact Section -->
390
+ <section id="contact" class="py-20 bg-gray-50">
391
+ <div class="max-w-6xl mx-auto px-4">
392
+ <div class="text-center mb-16">
393
+ <h2 class="text-3xl font-bold mb-4 text-blue-600">Contattami</h2>
394
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Prenota una lezione di prova o chiedimi informazioni sui corsi.</p>
395
+ </div>
396
+
397
+ <div class="flex flex-col md:flex-row">
398
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
399
+ <div class="bg-white p-8 rounded-lg shadow-lg">
400
+ <h3 class="text-2xl font-bold mb-6 text-blue-600">Informazioni di Contatto</h3>
401
+
402
+ <div class="space-y-6">
403
+ <div class="flex items-start">
404
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
405
+ <i class="fas fa-map-marker-alt text-blue-600"></i>
406
+ </div>
407
+ <div>
408
+ <h4 class="font-bold mb-1">Dove insegno</h4>
409
+ <p class="text-gray-600">Milano, zona Porta Romana<br>Lezioni anche online via Zoom/Skype</p>
410
+ </div>
411
+ </div>
412
+
413
+ <div class="flex items-start">
414
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
415
+ <i class="fas fa-envelope text-blue-600"></i>
416
+ </div>
417
+ <div>
418
+ <h4 class="font-bold mb-1">Email</h4>
419
+ <p class="text-gray-600">[email protected]</p>
420
+ </div>
421
+ </div>
422
+
423
+ <div class="flex items-start">
424
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
425
+ <i class="fas fa-phone-alt text-blue-600"></i>
426
+ </div>
427
+ <div>
428
+ <h4 class="font-bold mb-1">Telefono</h4>
429
+ <p class="text-gray-600">+39 123 456 7890</p>
430
+ </div>
431
+ </div>
432
+
433
+ <div class="flex items-start">
434
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
435
+ <i class="fas fa-clock text-blue-600"></i>
436
+ </div>
437
+ <div>
438
+ <h4 class="font-bold mb-1">Orari</h4>
439
+ <p class="text-gray-600">Lun-Ven: 9:00 - 19:00<br>Sabato: 10:00 - 14:00</p>
440
+ </div>
441
+ </div>
442
+ </div>
443
+
444
+ <div class="mt-8">
445
+ <h4 class="font-bold mb-4 text-blue-600">Seguimi sui social</h4>
446
+ <div class="flex space-x-4">
447
+ <a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition">
448
+ <i class="fab fa-facebook-f"></i>
449
+ </a>
450
+ <a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition">
451
+ <i class="fab fa-twitter"></i>
452
+ </a>
453
+ <a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition">
454
+ <i class="fab fa-instagram"></i>
455
+ </a>
456
+ <a href="#" class="bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 transition">
457
+ <i class="fab fa-linkedin-in"></i>
458
+ </a>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+
464
+ <div class="md:w-1/2">
465
+ <div class="bg-white p-8 rounded-lg shadow-lg">
466
+ <h3 class="text-2xl font-bold mb-6 text-blue-600">Invia un Messaggio</h3>
467
+ <form id="contactForm">
468
+ <div class="mb-4">
469
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
470
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
471
+ </div>
472
+ <div class="mb-4">
473
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
474
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" required>
475
+ </div>
476
+ <div class="mb-4">
477
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefono</label>
478
+ <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
479
+ </div>
480
+ <div class="mb-4">
481
+ <label for="course" class="block text-gray-700 font-medium mb-2">Corso di interesse</label>
482
+ <select id="course" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
483
+ <option value="">Seleziona un corso</option>
484
+ <option value="base">Italiano Base (A1-A2)</option>
485
+ <option value="intermedio">Italiano Intermedio (B1-B2)</option>
486
+ <option value="avanzato">Italiano Avanzato (C1-C2)</option>
487
+ <option value="commerciale">Italiano Commerciale</option>
488
+ <option value="cucina">Italiano e Cucina</option>
489
+ <option value="immigrazione">Italiano per l'Immigrazione</option>
490
+ <option value="bambini">Italiano per Bambini</option>
491
+ </select>
492
+ </div>
493
+ <div class="mb-4">
494
+ <label for="message" class="block text-gray-700 font-medium mb-2">Messaggio</label>
495
+ <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
496
+ </div>
497
+ <div class="mb-4">
498
+ <label class="inline-flex items-center">
499
+ <input type="checkbox" class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" required>
500
+ <span class="ml-2 text-gray-700">Accetto l'informativa sulla privacy</span>
501
+ </label>
502
+ </div>
503
+ <button type="submit" class="w-full bg-blue-600 text-white py-3 px-4 rounded-md hover:bg-blue-700 transition font-medium">Invia Messaggio</button>
504
+ </form>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </section>
510
+
511
+ <!-- Map Section -->
512
+ <div class="bg-white py-10">
513
+ <div class="max-w-6xl mx-auto px-4">
514
+ <h3 class="text-2xl font-bold mb-6 text-center text-blue-600">Dove mi trovi a Milano</h3>
515
+ <div class="overflow-hidden rounded-lg shadow-lg">
516
+ <!-- Placeholder for map - in a real site you would embed Google Maps -->
517
+ <div class="bg-gray-200 h-96 flex items-center justify-center">
518
+ <div class="text-center">
519
+ <i class="fas fa-map-marker-alt text-4xl text-blue-600 mb-4"></i>
520
+ <p class="text-xl font-medium">Porta Romana, Milano</p>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+
527
+ <!-- Footer -->
528
+ <footer class="bg-blue-900 text-white py-12">
529
+ <div class="max-w-6xl mx-auto px-4">
530
+ <div class="grid md:grid-cols-4 gap-8">
531
+ <div>
532
+ <h4 class="text-xl font-bold mb-4">Ginevra Bersoldin</h4>
533
+ <p class="mb-4">Insegnante qualificata di italiano per stranieri a Milano.</p>
534
+ <div class="flex space-x-4">
535
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-facebook-f"></i></a>
536
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-twitter"></i></a>
537
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-instagram"></i></a>
538
+ <a href="#" class="hover:text-blue-300 transition"><i class="fab fa-linkedin-in"></i></a>
539
+ </div>
540
+ </div>
541
+ <div>
542
+ <h4 class="text-lg font-bold mb-4">Link Veloci</h4>
543
+ <ul class="space-y-2">
544
+ <li><a href="#home" class="hover:text-blue-300 transition">Home</a></li>
545
+ <li><a href="#about" class="hover:text-blue-300 transition">Chi Sono</a></li>
546
+ <li><a href="#courses" class="hover:text-blue-300 transition">Corsi</a></li>
547
+ <li><a href="#testimonials" class="hover:text-blue-300 transition">Testimonianze</a></li>
548
+ <li><a href="#contact" class="hover:text-blue-300 transition">Contatti</a></li>
549
+ </ul>
550
+ </div>
551
+ <div>
552
+ <h4 class="text-lg font-bold mb-4">Corsi</h4>
553
+ <ul class="space-y-2">
554
+ <li><a href="#" class="hover:text-blue-300 transition">Italiano Base</a></li>
555
+ <li><a href="#" class="hover:text-blue-300 transition">Italiano Intermedio</a></li>
556
+ <li><a href="#" class="hover:text-blue-300 transition">Italiano Avanzato</a></li>
557
+ <li><a href="#" class="hover:text-blue-300 transition">Italiano Commerciale</a></li>
558
+ <li><a href="#" class="hover:text-blue-300 transition">Italiano e Cucina</a></li>
559
+ </ul>
560
+ </div>
561
+ <div>
562
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
563
+ <p class="mb-4">Iscriviti per ricevere consigli e risorse gratuite per imparare l'italiano.</p>
564
+ <form class="flex">
565
+ <input type="email" placeholder="La tua email" class="px-3 py-2 text-gray-800 rounded-l-md w-full focus:outline-none">
566
+ <button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-700 transition">
567
+ <i class="fas fa-paper-plane"></i>
568
+ </button>
569
+ </form>
570
+ </div>
571
+ </div>
572
+ <div class="border-t border-blue-800 mt-10 pt-6 text-center">
573
+ <p>&copy; 2023 Ginevra Bersoldin - Insegnante di Italiano per Stranieri. Tutti i diritti riservati.</p>
574
+ </div>
575
+ </div>
576
+ </footer>
577
+
578
+ <!-- Back to Top Button -->
579
+ <button id="backToTop" class="fixed bottom-6 right-6 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition opacity-0 invisible">
580
+ <i class="fas fa-arrow-up"></i>
581
+ </button>
582
+
583
+ <script>
584
+ // Mobile menu toggle
585
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
586
+ const mobileMenu = document.querySelector('.mobile-menu');
587
+
588
+ mobileMenuButton.addEventListener('click', () => {
589
+ mobileMenu.classList.toggle('hidden');
590
+ });
591
+
592
+ // Contact form submission
593
+ const contactForm = document.getElementById('contactForm');
594
+
595
+ contactForm.addEventListener('submit', (e) => {
596
+ e.preventDefault();
597
+
598
+ // Here you would typically send the form data to a server
599
+ // For this example, we'll just show an alert
600
+ alert('Grazie per il tuo messaggio! Ti risponderò al più presto.');
601
+ contactForm.reset();
602
+ });
603
+
604
+ // Back to top button
605
+ const backToTopButton = document.getElementById('backToTop');
606
+
607
+ window.addEventListener('scroll', () => {
608
+ if (window.pageYOffset > 300) {
609
+ backToTopButton.classList.remove('opacity-0', 'invisible');
610
+ backToTopButton.classList.add('opacity-100', 'visible');
611
+ } else {
612
+ backToTopButton.classList.remove('opacity-100', 'visible');
613
+ backToTopButton.classList.add('opacity-0', 'invisible');
614
+ }
615
+ });
616
+
617
+ backToTopButton.addEventListener('click', () => {
618
+ window.scrollTo({
619
+ top: 0,
620
+ behavior: 'smooth'
621
+ });
622
+ });
623
+
624
+ // Smooth scrolling for anchor links
625
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
626
+ anchor.addEventListener('click', function (e) {
627
+ e.preventDefault();
628
+
629
+ const targetId = this.getAttribute('href');
630
+ if (targetId === '#') return;
631
+
632
+ const targetElement = document.querySelector(targetId);
633
+ if (targetElement) {
634
+ window.scrollTo({
635
+ top: targetElement.offsetTop - 80,
636
+ behavior: 'smooth'
637
+ });
638
+
639
+ // Close mobile menu if open
640
+ if (!mobileMenu.classList.contains('hidden')) {
641
+ mobileMenu.classList.add('hidden');
642
+ }
643
+ }
644
+ });
645
+ });
646
+ </script>
647
+ <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=federi/testdeploy" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
648
+ </html>