Hugging Face's logo

Spaces:
federi
/
testdeploy
Running

App Files Community
testdeploy / index.html
federi's picture
federi
Add 2 files
5e8f04d verified
raw
history blame contribute delete
38.1 kB
 <!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ginevra Bersoldin - Insegnante di Italiano per Stranieri | Milano</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.hero-pattern {
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');
background-size: cover;
background-position: center;
}
.wave-shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-shape svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.wave-shape .shape-fill {
fill: #FFFFFF;
}
.testimonial-card {
transition: all 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.flag-icon {
width: 30px;
height: 20px;
display: inline-block;
margin-right: 10px;
border-radius: 2px;
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Navigation -->
<nav class="bg-white shadow-lg sticky top-0 z-50">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center h-16">
<div class="flex items-center">
<a href="#" class="flex items-center">
<i class="fas fa-language text-2xl text-blue-600 mr-2"></i>
<span class="text-xl font-semibold text-gray-800">Ginevra Bersoldin</span>
</a>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#home" class="text-blue-600 font-medium">Home</a>
<a href="#about" class="hover:text-blue-600 transition">Chi Sono</a>
<a href="#courses" class="hover:text-blue-600 transition">Corsi</a>
<a href="#testimonials" class="hover:text-blue-600 transition">Testimonianze</a>
<a href="#contact" class="hover:text-blue-600 transition">Contatti</a>
<a href="#contact" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 transition">Prenota una lezione</a>
</div>
<div class="md:hidden flex items-center">
<button class="outline-none mobile-menu-button">
<i class="fas fa-bars text-gray-600 text-xl"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden mobile-menu bg-white shadow-lg">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-blue-600">Home</a>
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Chi Sono</a>
<a href="#courses" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Corsi</a>
<a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Testimonianze</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium hover:text-blue-600">Contatti</a>
<a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium bg-blue-600 text-white">Prenota una lezione</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-pattern relative pt-32 pb-64 text-white">
<div class="absolute inset-0 bg-blue-900 opacity-75"></div>
<div class="max-w-6xl mx-auto px-4 relative z-10">
<div class="md:w-2/3 lg:w-1/2">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Impara l'Italiano con Ginevra</h1>
<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>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<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>
<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>
</div>
</div>
</div>
<div class="wave-shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<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>
</svg>
</div>
</section>
<!-- About Section -->
<section id="about" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<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">
</div>
<div class="md:w-1/2">
<h2 class="text-3xl font-bold mb-6 text-blue-600">Chi Sono</h2>
<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>
<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>
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="flex items-center">
<i class="fas fa-graduation-cap text-blue-500 mr-3 text-xl"></i>
<span>Laurea in Lingue e Letterature Straniere</span>
</div>
<div class="flex items-center">
<i class="fas fa-certificate text-blue-500 mr-3 text-xl"></i>
<span>Certificata DITALS II</span>
</div>
<div class="flex items-center">
<i class="fas fa-globe-europe text-blue-500 mr-3 text-xl"></i>
<span>Esperienza internazionale</span>
</div>
<div class="flex items-center">
<i class="fas fa-users text-blue-500 mr-3 text-xl"></i>
<span>Oltre 500 studenti</span>
</div>
</div>
<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>
</div>
</div>
</div>
</section>
<!-- Courses Section -->
<section id="courses" class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4 text-blue-600">I Miei Corsi</h2>
<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>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Course 1 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
<div class="bg-blue-600 text-white py-4 px-6">
<h3 class="text-xl font-bold">Italiano Base</h3>
<p class="text-blue-100">A1-A2 Livello</p>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<i class="fas fa-euro-sign text-blue-500 mr-2"></i>
<span class="font-bold text-lg">30€/ora</span>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Introduzione alla lingua italiana</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Vocabolario essenziale</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Grammatica di base</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Conversazioni semplici</span>
</li>
</ul>
<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>
</div>
</div>
<!-- Course 2 -->
<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">
<div class="bg-blue-700 text-white py-4 px-6">
<h3 class="text-xl font-bold">Italiano Intermedio</h3>
<p class="text-blue-200">B1-B2 Livello</p>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<i class="fas fa-euro-sign text-blue-500 mr-2"></i>
<span class="font-bold text-lg">35€/ora</span>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Approfondimento grammaticale</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Conversazioni complesse</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Lettura di testi autentici</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Preparazione esami CILS/PLIDA</span>
</li>
</ul>
<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>
</div>
</div>
<!-- Course 3 -->
<div class="bg-white rounded-lg shadow-lg overflow-hidden transition-transform duration-300 hover:scale-105">
<div class="bg-blue-600 text-white py-4 px-6">
<h3 class="text-xl font-bold">Italiano Avanzato</h3>
<p class="text-blue-100">C1-C2 Livello</p>
</div>
<div class="p-6">
<div class="flex items-center mb-4">
<i class="fas fa-euro-sign text-blue-500 mr-2"></i>
<span class="font-bold text-lg">40€/ora</span>
</div>
<ul class="space-y-3 mb-6">
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Perfezionamento linguistico</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Analisi di testi complessi</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Italiano per lavoro/università</span>
</li>
<li class="flex items-start">
<i class="fas fa-check text-green-500 mt-1 mr-2"></i>
<span>Espressione idiomatica</span>
</li>
</ul>
<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>
</div>
</div>
</div>
<div class="mt-16 bg-white rounded-lg shadow-lg p-8">
<h3 class="text-2xl font-bold mb-6 text-center text-blue-600">Corsi Speciali</h3>
<div class="grid md:grid-cols-2 gap-8">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-briefcase text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-2">Italiano Commerciale</h4>
<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>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-utensils text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-2">Italiano e Cucina</h4>
<p class="text-gray-600">Impara l'italiano attraverso la cucina italiana! Lezioni che combinano lingua e preparazione di piatti tipici.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-landmark text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-2">Italiano per l'Immigrazione</h4>
<p class="text-gray-600">Preparazione specifica per il test di lingua richiesto per il permesso di soggiorno di lungo periodo.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-child text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-2">Italiano per Bambini</h4>
<p class="text-gray-600">Metodi didattici specifici per bambini e ragazzi, con approccio ludico e coinvolgente.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4 text-blue-600">Cosa Dicono i Miei Studenti</h2>
<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>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- Testimonial 1 -->
<div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
<i class="fas fa-user text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold">Sophie Martin</h4>
<div class="flex items-center">
<span class="flag-icon bg-blue-500"></span>
<span class="text-sm text-gray-500">Francia</span>
</div>
</div>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<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>
</div>
<!-- Testimonial 2 -->
<div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
<i class="fas fa-user text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold">Ahmed Al-Farsi</h4>
<div class="flex items-center">
<span class="flag-icon bg-green-500"></span>
<span class="text-sm text-gray-500">Egitto</span>
</div>
</div>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<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>
</div>
<!-- Testimonial 3 -->
<div class="testimonial-card bg-gray-50 p-8 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-4">
<i class="fas fa-user text-blue-600 text-xl"></i>
</div>
<div>
<h4 class="font-bold">Li Wei</h4>
<div class="flex items-center">
<span class="flag-icon bg-red-500"></span>
<span class="text-sm text-gray-500">Cina</span>
</div>
</div>
</div>
<div class="flex mb-2">
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
<i class="fas fa-star text-yellow-400"></i>
</div>
<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>
</div>
</div>
<div class="mt-12 text-center">
<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>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4 text-blue-600">Contattami</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Prenota una lezione di prova o chiedimi informazioni sui corsi.</p>
</div>
<div class="flex flex-col md:flex-row">
<div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold mb-6 text-blue-600">Informazioni di Contatto</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">Dove insegno</h4>
<p class="text-gray-600">Milano, zona Porta Romana<br>Lezioni anche online via Zoom/Skype</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">Email</h4>
<p class="text-gray-600">ginevra.bersoldin@italianoperstranieri.com</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-phone-alt text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">Telefono</h4>
<p class="text-gray-600">+39 123 456 7890</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<i class="fas fa-clock text-blue-600"></i>
</div>
<div>
<h4 class="font-bold mb-1">Orari</h4>
<p class="text-gray-600">Lun-Ven: 9:00 - 19:00<br>Sabato: 10:00 - 14:00</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold mb-4 text-blue-600">Seguimi sui social</h4>
<div class="flex space-x-4">
<a href="#" class="bg-blue-600 text-white p-3 rounded-full hover:bg-blue-700 transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-blue-400 text-white p-3 rounded-full hover:bg-blue-500 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="bg-pink-600 text-white p-3 rounded-full hover:bg-pink-700 transition">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 transition">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
</div>
<div class="md:w-1/2">
<div class="bg-white p-8 rounded-lg shadow-lg">
<h3 class="text-2xl font-bold mb-6 text-blue-600">Invia un Messaggio</h3>
<form id="contactForm">
<div class="mb-4">
<label for="name" class="block text-gray-700 font-medium mb-2">Nome</label>
<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>
</div>
<div class="mb-4">
<label for="email" class="block text-gray-700 font-medium mb-2">Email</label>
<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>
</div>
<div class="mb-4">
<label for="phone" class="block text-gray-700 font-medium mb-2">Telefono</label>
<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">
</div>
<div class="mb-4">
<label for="course" class="block text-gray-700 font-medium mb-2">Corso di interesse</label>
<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">
<option value="">Seleziona un corso</option>
<option value="base">Italiano Base (A1-A2)</option>
<option value="intermedio">Italiano Intermedio (B1-B2)</option>
<option value="avanzato">Italiano Avanzato (C1-C2)</option>
<option value="commerciale">Italiano Commerciale</option>
<option value="cucina">Italiano e Cucina</option>
<option value="immigrazione">Italiano per l'Immigrazione</option>
<option value="bambini">Italiano per Bambini</option>
</select>
</div>
<div class="mb-4">
<label for="message" class="block text-gray-700 font-medium mb-2">Messaggio</label>
<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>
</div>
<div class="mb-4">
<label class="inline-flex items-center">
<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>
<span class="ml-2 text-gray-700">Accetto l'informativa sulla privacy</span>
</label>
</div>
<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>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- Map Section -->
<div class="bg-white py-10">
<div class="max-w-6xl mx-auto px-4">
<h3 class="text-2xl font-bold mb-6 text-center text-blue-600">Dove mi trovi a Milano</h3>
<div class="overflow-hidden rounded-lg shadow-lg">
<!-- Placeholder for map - in a real site you would embed Google Maps -->
<div class="bg-gray-200 h-96 flex items-center justify-center">
<div class="text-center">
<i class="fas fa-map-marker-alt text-4xl text-blue-600 mb-4"></i>
<p class="text-xl font-medium">Porta Romana, Milano</p>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="bg-blue-900 text-white py-12">
<div class="max-w-6xl mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h4 class="text-xl font-bold mb-4">Ginevra Bersoldin</h4>
<p class="mb-4">Insegnante qualificata di italiano per stranieri a Milano.</p>
<div class="flex space-x-4">
<a href="#" class="hover:text-blue-300 transition"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="hover:text-blue-300 transition"><i class="fab fa-twitter"></i></a>
<a href="#" class="hover:text-blue-300 transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="hover:text-blue-300 transition"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Link Veloci</h4>
<ul class="space-y-2">
<li><a href="#home" class="hover:text-blue-300 transition">Home</a></li>
<li><a href="#about" class="hover:text-blue-300 transition">Chi Sono</a></li>
<li><a href="#courses" class="hover:text-blue-300 transition">Corsi</a></li>
<li><a href="#testimonials" class="hover:text-blue-300 transition">Testimonianze</a></li>
<li><a href="#contact" class="hover:text-blue-300 transition">Contatti</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Corsi</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-blue-300 transition">Italiano Base</a></li>
<li><a href="#" class="hover:text-blue-300 transition">Italiano Intermedio</a></li>
<li><a href="#" class="hover:text-blue-300 transition">Italiano Avanzato</a></li>
<li><a href="#" class="hover:text-blue-300 transition">Italiano Commerciale</a></li>
<li><a href="#" class="hover:text-blue-300 transition">Italiano e Cucina</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Newsletter</h4>
<p class="mb-4">Iscriviti per ricevere consigli e risorse gratuite per imparare l'italiano.</p>
<form class="flex">
<input type="email" placeholder="La tua email" class="px-3 py-2 text-gray-800 rounded-l-md w-full focus:outline-none">
<button type="submit" class="bg-blue-600 px-4 py-2 rounded-r-md hover:bg-blue-700 transition">
<i class="fas fa-paper-plane"></i>
</button>
</form>
</div>
</div>
<div class="border-t border-blue-800 mt-10 pt-6 text-center">
<p>&copy; 2023 Ginevra Bersoldin - Insegnante di Italiano per Stranieri. Tutti i diritti riservati.</p>
</div>
</div>
</footer>
<!-- Back to Top Button -->
<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">
<i class="fas fa-arrow-up"></i>
</button>
<script>
// Mobile menu toggle
const mobileMenuButton = document.querySelector('.mobile-menu-button');
const mobileMenu = document.querySelector('.mobile-menu');
mobileMenuButton.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Contact form submission
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', (e) => {
e.preventDefault();
// Here you would typically send the form data to a server
// For this example, we'll just show an alert
alert('Grazie per il tuo messaggio! Ti risponderò al più presto.');
contactForm.reset();
});
// Back to top button
const backToTopButton = document.getElementById('backToTop');
window.addEventListener('scroll', () => {
if (window.pageYOffset > 300) {
backToTopButton.classList.remove('opacity-0', 'invisible');
backToTopButton.classList.add('opacity-100', 'visible');
} else {
backToTopButton.classList.remove('opacity-100', 'visible');
backToTopButton.classList.add('opacity-0', 'invisible');
}
});
backToTopButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
// Close mobile menu if open
if (!mobileMenu.classList.contains('hidden')) {
mobileMenu.classList.add('hidden');
}
}
});
});
</script>
<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>
</html>