|
|
<!DOCTYPE html> |
|
|
<html lang="it"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>MemoVita - AttivAmente</title> |
|
|
<link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
</head> |
|
|
<body class="bg-blue-50 font-sans"> |
|
|
|
|
|
<header class="bg-white shadow-md"> |
|
|
<div class="container mx-auto px-4 py-4 flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<img src="http://static.photos/abstract/1200x630/42" alt="AttivAmente Logo" class="h-12 w-12 rounded-full mr-3"> |
|
|
<h1 class="text-2xl font-bold text-blue-800">AttivAmente</h1> |
|
|
</div> |
|
|
<nav class="flex flex-wrap justify-center gap-4"> |
|
|
<a href="index.html" class="text-blue-700 hover:text-blue-900 font-medium">Home</a> |
|
|
<a href="coach-virtuale.html" class="text-blue-700 hover:text-blue-900 font-medium">Coach Virtuale</a> |
|
|
<a href="matching-intergenerazionale.html" class="text-blue-700 hover:text-blue-900 font-medium">Matching Intergenerazionale</a> |
|
|
<a href="centro-digitale.html" class="text-blue-700 hover:text-blue-900 font-medium">Centro Digitale</a> |
|
|
<a href="memovita.html" class="text-blue-700 hover:text-blue-900 font-medium">MemoVita</a> |
|
|
<a href="#contact" class="text-blue-700 hover:text-blue-900 font-medium">Contatti</a> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="bg-gradient-to-r from-blue-400 to-blue-600 text-white py-16"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-4xl md:text-5xl font-bold mb-6">MemoVita</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto">Preserva i tuoi ricordi più preziosi</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row items-center justify-between"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0"> |
|
|
<img src="http://static.photos/vintage/640x360/202" alt="MemoVita" class="rounded-lg shadow-lg"> |
|
|
</div> |
|
|
<div class="md:w-1/2 md:pl-12"> |
|
|
<h3 class="text-2xl font-bold text-blue-800 mb-4">Il tuo diario cognitivo digitale</h3> |
|
|
<p class="text-gray-700 mb-6">MemoVita è un diario cognitivo digitale che ti aiuta a preservare i tuoi ricordi più belli e stimolare la memoria. Organizza storie, foto, pensieri e condividili con i tuoi cari in modo semplice e sicuro.</p> |
|
|
|
|
|
<h4 class="text-xl font-bold text-blue-700 mb-3">Funzionalità principali:</h4> |
|
|
<ul class="list-disc pl-6 text-gray-700 mb-6 space-y-2"> |
|
|
<li>Archiviazione sicura di ricordi e storie</li> |
|
|
<li>Esercizi di stimolazione cognitiva</li> |
|
|
<li>Organizzazione cronologica dei contenuti</li> |
|
|
<li>Condivisione facile con familiari</li> |
|
|
<li>Interfaccia intuitiva e accessibile</li> |
|
|
</ul> |
|
|
|
|
|
<a href="registrati.html" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full inline-block transition duration-300">Inizia a raccontare la tua storia</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-blue-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<h3 class="text-3xl font-bold text-center text-blue-800 mb-12">Benefici di MemoVita</h3> |
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white rounded-xl p-6 shadow-md text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="book-open" class="text-blue-600" style="width: 32px; height: 32px;"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-blue-800 mb-2">Conservazione</h4> |
|
|
<p class="text-gray-700">Preserva i tuoi ricordi per sempre in formato digitale</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow-md text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="cpu" class="text-blue-600" style="width: 32px; height: 32px;"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-blue-800 mb-2">Stimolazione Cognitiva</h4> |
|
|
<p class="text-gray-700">Esercizi mirati per mantenere la mente attiva</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white rounded-xl p-6 shadow-md text-center"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
|
|
<i data-feather="share" class="text-blue-600" style="width: 32px; height: 32px;"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold text-blue-800 mb-2">Condivisione</h4> |
|
|
<p class="text-gray-700">Condividi facilmente i tuoi ricordi con familiari e amici</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer id="contact" class="bg-blue-900 text-white py-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-xl font-bold mb-4">AttivAmente</h3> |
|
|
<p class="text-blue-200">Soluzioni intelligenti per un'invecchiamento attiva e consapevole.</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Servizi</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="coach-virtuale.html" class="text-blue-200 hover:text-white">Coach Virtuale</a></li> |
|
|
<li><a href="matching-intergenerazionale.html" class="text-blue-200 hover:text-white">Matching Intergenerazionale</a></li> |
|
|
<li><a href="centro-digitale.html" class="text-blue-200 hover:text-white">Centro Digitale</a></li> |
|
|
<li><a href="memovita.html" class="text-blue-200 hover:text-white">MemoVita</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Contatti</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="map-pin" class="mr-2 mt-1" style="width: 18px; height: 18px;"></i> |
|
|
<span>Via Roma 123, Milano</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="phone" class="mr-2" style="width: 18px; height: 18px;"></i> |
|
|
<span>+39 02 1234567</span> |
|
|
</li> |
|
|
<li class="flex items-center"> |
|
|
<i data-feather="mail" class="mr-2" style="width: 18px; height: 18px;"></i> |
|
|
<span>[email protected]</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Seguici</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="bg-blue-800 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="facebook" style="width: 20px; height: 20px;"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-800 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="instagram" style="width: 20px; height: 20px;"></i> |
|
|
</a> |
|
|
<a href="#" class="bg-blue-800 hover:bg-blue-700 w-10 h-10 rounded-full flex items-center justify-center"> |
|
|
<i data-feather="twitter" style="width: 20px; height: 20px;"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-blue-800 mt-8 pt-8 text-center text-blue-300"> |
|
|
<p>© 2023 AttivAmente. Tutti i diritti riservati.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script>feather.replace();</script> |
|
|
</body> |
|
|
</html> |
