Hugging Face's logo

Spaces:
grmsolution
/
macchiareddu104
Running

App Files Community
macchiareddu104 / index.html
grmsolution's picture
grmsolution
Add 2 files
8d870c5 verified
raw
history blame contribute delete
44.6 kB
 <!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progetto Fotovoltaico Macchiareddu | 104MW Porto di Cagliari</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">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
solar: {
primary: '#F9A825',
secondary: '#1565C0',
dark: '#263238',
light: '#ECEFF1'
}
},
fontFamily: {
sans: ['Montserrat', 'sans-serif'],
},
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');
body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
}
.hero {
background: linear-gradient(rgba(38, 50, 56, 0.8), rgba(38, 50, 56, 0.8)),
url('https://images.unsplash.com/photo-1509391366363-2c46eda721ca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
background-size: cover;
background-position: center;
}
.solar-panel {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
.map-container {
height: 500px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.timeline-item:not(:last-child)::after {
content: '';
position: absolute;
left: 24px;
top: 32px;
height: calc(100% - 32px);
width: 2px;
background: #F9A825;
}
.benefit-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.benefit-card {
transition: all 0.3s ease;
}
</style>
</head>
<body class="bg-solar-light">
<!-- Navbar -->
<nav class="bg-solar-dark text-white shadow-lg fixed w-full z-50">
<div class="container mx-auto px-6 py-3 flex justify-between items-center">
<div class="flex items-center space-x-4">
<i class="fas fa-solar-panel text-2xl text-solar-primary"></i>
<span class="font-semibold text-xl">SolarPort Cagliari</span>
</div>
<div class="hidden md:flex space-x-8">
<a href="#progetto" class="hover:text-solar-primary transition">Progetto</a>
<a href="#localizzazione" class="hover:text-solar-primary transition">Localizzazione</a>
<a href="#benefici" class="hover:text-solar-primary transition">Benefici</a>
<a href="#tecnologia" class="hover:text-solar-primary transition">Tecnologia</a>
<a href="#contatti" class="hover:text-solar-primary transition">Contatti</a>
</div>
<button class="md:hidden focus:outline-none">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero text-white pt-32 pb-20 md:pt-40 md:pb-28">
<div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Progetto Fotovoltaico <span class="text-solar-primary">Macchiareddu</span></h1>
<p class="text-xl mb-8">104 MW di energia pulita nel Porto di Cagliari per un futuro sostenibile della Sardegna</p>
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
<a href="#progetto" class="bg-solar-primary hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 text-center">Scopri il progetto</a>
<a href="#contatti" class="border-2 border-white hover:bg-white hover:text-solar-dark font-bold py-3 px-6 rounded-lg transition duration-300 text-center">Contattaci</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://images.unsplash.com/photo-1508514177221-188e1e464088?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Pannelli solari"
class="rounded-lg shadow-xl solar-panel max-w-md w-full">
</div>
</div>
</section>
<!-- Key Facts -->
<section class="py-12 bg-white">
<div class="container mx-auto px-6">
<div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
<div class="bg-solar-light p-6 rounded-lg shadow">
<div class="text-solar-primary text-4xl font-bold mb-2">104<span class="text-2xl">MW</span></div>
<div class="text-solar-dark">Potenza installata</div>
</div>
<div class="bg-solar-light p-6 rounded-lg shadow">
<div class="text-solar-primary text-4xl font-bold mb-2">200<span class="text-2xl">GWh</span></div>
<div class="text-solar-dark">Produzione annuale</div>
</div>
<div class="bg-solar-light p-6 rounded-lg shadow">
<div class="text-solar-primary text-4xl font-bold mb-2">120<span class="text-2xl">k</span></div>
<div class="text-solar-dark">Tonnellate CO₂ risparmiate</div>
</div>
<div class="bg-solar-light p-6 rounded-lg shadow">
<div class="text-solar-primary text-4xl font-bold mb-2">50<span class="text-2xl">ha</span></div>
<div class="text-solar-dark">Superficie occupata</div>
</div>
</div>
</div>
</section>
<!-- Project Section -->
<section id="progetto" class="py-20 bg-solar-light">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-solar-dark mb-4">Il <span class="text-solar-primary">Progetto</span></h2>
<div class="w-24 h-1 bg-solar-primary mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-lg text-gray-700">Un impianto fotovoltaico utility-scale da 104 MW che trasformerà un'area industriale del Porto di Cagliari in una centrale di energia rinnovabile, contribuendo significativamente agli obiettivi di decarbonizzazione della Sardegna.</p>
</div>
<div class="flex flex-col lg:flex-row gap-12 items-center">
<div class="lg:w-1/2">
<img src="https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1632&q=80"
alt="Area progetto"
class="rounded-lg shadow-xl w-full">
</div>
<div class="lg:w-1/2">
<h3 class="text-2xl font-bold text-solar-dark mb-6">Caratteristiche principali</h3>
<ul class="space-y-4">
<li class="flex items-start">
<i class="fas fa-check-circle text-solar-primary mt-1 mr-3"></i>
<span>Potenza totale: 104 MW (uno dei più grandi impianti fotovoltaici in Sardegna)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-solar-primary mt-1 mr-3"></i>
<span>Circa 200.000 pannelli fotovoltaici ad alta efficienza</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-solar-primary mt-1 mr-3"></i>
<span>Produzione stimata: 200 GWh/anno (equivalenti al consumo di circa 70.000 famiglie)</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-solar-primary mt-1 mr-3"></i>
<span>Riduzione emissioni CO₂: 120.000 tonnellate/anno</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-solar-primary mt-1 mr-3"></i>
<span>Integrazione con la rete elettrica esistente del porto</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Location Section -->
<section id="localizzazione" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-solar-dark mb-4">Localizzazione <span class="text-solar-primary">Strategica</span></h2>
<div class="w-24 h-1 bg-solar-primary mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-lg text-gray-700">L'impianto sorgerà nell'area industriale di Macchiareddu, all'interno del Porto di Cagliari, una posizione ideale per la produzione di energia pulita.</p>
</div>
<div class="map-container mb-12">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3079.193470180843!2d8.99639031562134!3d39.51810217948078!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12e81e5a8e8d5a3b%3A0x1e7e4b5a5a5a5a5a!2sMacchiareddu%2C%2009042%20CA!5e0!3m2!1sit!2sit!4v1629999999999!5m2!1sit!2sit"
width="100%"
height="100%"
style="border:0;"
allowfullscreen=""
loading="lazy"></iframe>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h3 class="text-2xl font-bold text-solar-dark mb-4">Vantaggi della localizzazione</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-map-marker-alt text-solar-primary mt-1 mr-3"></i>
<span>Prossimità alla rete elettrica esistente del porto</span>
</li>
<li class="flex items-start">
<i class="fas fa-sun text-solar-primary mt-1 mr-3"></i>
<span>Elevata irradiazione solare (circa 1.700 kWh/m²/anno)</span>
</li>
<li class="flex items-start">
<i class="fas fa-industry text-solar-primary mt-1 mr-3"></i>
<span>Area industriale già destinata a uso produttivo</span>
</li>
<li class="flex items-start">
<i class="fas fa-anchor text-solar-primary mt-1 mr-3"></i>
<span>Possibilità di integrazione con le attività portuali</span>
</li>
</ul>
</div>
<div>
<h3 class="text-2xl font-bold text-solar-dark mb-4">Impatto territoriale</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fas fa-leaf text-solar-primary mt-1 mr-3"></i>
<span>Minimo impatto ambientale grazie alla riqualificazione di un'area industriale</span>
</li>
<li class="flex items-start">
<i class="fas fa-road text-solar-primary mt-1 mr-3"></i>
<span>Facilità di accesso per la costruzione e manutenzione</span>
</li>
<li class="flex items-start">
<i class="fas fa-users text-solar-primary mt-1 mr-3"></i>
<span>Distanza adeguata dai centri abitati</span>
</li>
<li class="flex items-start">
<i class="fas fa-water text-solar-primary mt-1 mr-3"></i>
<span>Possibilità di integrare sistemi di desalinizzazione</span>
</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Benefits Section -->
<section id="benefici" class="py-20 bg-solar-light">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-solar-dark mb-4">Benefici per il <span class="text-solar-primary">Territorio</span></h2>
<div class="w-24 h-1 bg-solar-primary mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-lg text-gray-700">Il progetto fotovoltaico di Macchiareddu porterà numerosi vantaggi economici, ambientali e sociali alla Sardegna e in particolare all'area di Cagliari.</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="benefit-card bg-white p-8 rounded-lg shadow-lg">
<div class="text-solar-primary text-4xl mb-4">
<i class="fas fa-bolt"></i>
</div>
<h3 class="text-xl font-bold mb-3">Energia Pulita</h3>
<p class="text-gray-700">Produzione di 200 GWh/anno di energia rinnovabile, contribuendo alla transizione energetica della Sardegna и riducendo la dipendenza dai combustibili fossili.</p>
</div>
<div class="benefit-card bg-white p-8 rounded-lg shadow-lg">
<div class="text-solar-primary text-4xl mb-4">
<i class="fas fa-cloud-sun"></i>
</div>
<h3 class="text-xl font-bold mb-3">Riduzione CO₂</h3>
<p class="text-gray-700">Evitata l'emissione di circa 120.000 tonnellate di CO₂ all'anno, equivalente alla piantumazione di 1,2 milioni di alberi.</p>
</div>
<div class="benefit-card bg-white p-8 rounded-lg shadow-lg">
<div class="text-solar-primary text-4xl mb-4">
<i class="fas fa-briefcase"></i>
</div>
<h3 class="text-xl font-bold mb-3">Occupazione</h3>
<p class="text-gray-700">Creazione di circa 200 posti di lavoro durante la fase di costruzione e 15-20 posizioni permanenti per la gestione e manutenzione.</p>
</div>
<div class="benefit-card bg-white p-8 rounded-lg shadow-lg">
<div class="text-solar-primary text-4xl mb-4">
<i class="fas fa-euro-sign"></i>
</div>
<h3 class="text-xl font-bold mb-3">Sviluppo Economico</h3>
<p class="text-gray-700">Investimento di circa 70 milioni di euro con ricadute positive sull'indotto locale e sulle casse comunali attraverso le imposte.</p>
</div>
<div class="benefit-card bg-white p-8 rounded-lg shadow-lg">
<div class="text-solar-primary text-4xl mb-4">
<i class="fas fa-industry"></i>
</div>
<h3 class="text-xl font-bold mb-3">Riqualificazione</h3>
<p class="text-gray-700">Valorizzazione di un'area industriale attraverso un uso produttivo e sostenibile del suolo.</p>
</div>
<div class="benefit-card bg-white p-8 rounded-lg shadow-lg">
<div class="text-solar-primary text-4xl mb-4">
<i class="fas fa-lightbulb"></i>
</div>
<h3 class="text-xl font-bold mb-3">Innovazione</h3>
<p class="text-gray-700">Possibilità di integrare tecnologie avanzate come accumuli a batteria e sistemi di gestione intelligente dell'energia.</p>
</div>
</div>
<div class="mt-16 bg-solar-dark text-white rounded-lg p-8 shadow-xl">
<h3 class="text-2xl font-bold mb-6 text-center">Impatto energetico in numeri</h3>
<div class="grid md:grid-cols-2 gap-8 items-center">
<div>
<canvas id="energyChart" height="300"></canvas>
</div>
<div>
<ul class="space-y-4">
<li class="flex items-start">
<div class="bg-solar-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-check text-white text-xs"></i>
</div>
<span>Copertura del 5% del fabbisogno elettrico della provincia di Cagliari</span>
</li>
<li class="flex items-start">
<div class="bg-solar-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-check text-white text-xs"></i>
</div>
<span>Energia sufficiente per alimentare circa 70.000 abitazioni</span>
</li>
<li class="flex items-start">
<div class="bg-solar-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-check text-white text-xs"></i>
</div>
<span>Riduzione del 3% delle emissioni del settore elettrico sardo</span>
</li>
<li class="flex items-start">
<div class="bg-solar-primary rounded-full w-6 h-6 flex items-center justify-center mr-3 mt-1">
<i class="fas fa-check text-white text-xs"></i>
</div>
<span>Contributo al raggiungimento degli obiettivi PNIEC per la Sardegna</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Technology Section -->
<section id="tecnologia" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-solar-dark mb-4">Tecnologia <span class="text-solar-primary">Avanzata</span></h2>
<div class="w-24 h-1 bg-solar-primary mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-lg text-gray-700">L'impianto utilizzerà le più avanzate tecnologie fotovoltaiche per massimizzare l'efficienza e minimizzare l'impatto ambientale.</p>
</div>
<div class="flex flex-col lg:flex-row gap-12 items-center mb-16">
<div class="lg:w-1/2">
<h3 class="text-2xl font-bold text-solar-dark mb-6">Componenti principali</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-solar-panel text-solar-primary text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Pannelli fotovoltaici</h4>
<p class="text-gray-700">Moduli bifacciali ad alta efficienza (22%+) con struttura di supporto a inseguimento monoassiale per aumentare la produzione energetica del 15-25%.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-microchip text-solar-primary text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Inverter</h4>
<p class="text-gray-700">Inverter stringa di ultima generazione con efficienza >98,5% e sistema di monitoraggio avanzato per ottimizzare le prestazioni.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-bolt text-solar-primary text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Sistema di trasformazione</h4>
<p class="text-gray-700">Cabine di trasformazione MT/BT con tecnologia secco per ridurre i rischi ambientali e aumentare l'affidabilità.</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-network-wired text-solar-primary text-xl"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Sistema di connessione</h4>
<p class="text-gray-700">Collegamento alla rete elettrica esistente del porto attraverso una linea dedicata di media tensione.</p>
</div>
</div>
</div>
</div>
<div class="lg:w-1/2">
<img src="https://images.unsplash.com/photo-1508514177221-188e1e464088?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
alt="Tecnologia fotovoltaica"
class="rounded-lg shadow-xl w-full">
</div>
</div>
<div class="bg-solar-light rounded-xl p-8 shadow-inner">
<h3 class="text-2xl font-bold text-solar-dark mb-6 text-center">Innovazioni tecnologiche</h3>
<div class="grid md:grid-cols-2 gap-8">
<div>
<h4 class="font-bold text-lg mb-3 flex items-center">
<i class="fas fa-robot text-solar-primary mr-2"></i>
Monitoraggio intelligente
</h4>
<p class="text-gray-700">Sistema di monitoraggio predittivo basato su IoT e intelligenza artificiale per ottimizzare le prestazioni e programmare la manutenzione.</p>
</div>
<div>
<h4 class="font-bold text-lg mb-3 flex items-center">
<i class="fas fa-water text-solar-primary mr-2"></i>
Integrazione idrica
</h4>
<p class="text-gray-700">Possibilità futura di integrare un impianto di desalinizzazione alimentato dall'energia prodotta, utile per le attività portuali.</p>
</div>
<div>
<h4 class="font-bold text-lg mb-3 flex items-center">
<i class="fas fa-battery-three-quarters text-solar-primary mr-2"></i>
Storage ibrido
</h4>
<p class="text-gray-700">Preparazione per l'integrazione futura di sistemi di accumuloa batteria per stabilizzare la rete e massimizzare l'autoconsumo.</p>
</div>
<div>
<h4 class="font-bold text-lg mb-3 flex items-center">
<i class="fas fa-seedling text-solar-primary mr-2"></i>
Doppio uso del suolo
</h4>
<p class="text-gray-700">Studio di soluzioni per l'agrivoltaico che permettano la coltivazione tra i pannelli, aumentando la sostenibilità complessiva.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Timeline Section -->
<section class="py-20 bg-solar-dark text-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Cronoprogramma <span class="text-solar-primary">Progetto</span></h2>
<div class="w-24 h-1 bg-solar-primary mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-lg text-gray-300">Le principali tappe per la realizzazione dell'impianto fotovoltaico da 104 MW a Macchiareddu.</p>
</div>
<div class="relative max-w-3xl mx-auto">
<div class="space-y-8">
<div class="timeline-item relative pl-16">
<div class="absolute left-0 top-0 flex items-center justify-center w-12 h-12 rounded-full bg-solar-primary text-white font-bold">1</div>
<div class="bg-solar-light bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold mb-2">Autorizzazioni e permessi</h3>
<div class="text-solar-primary mb-3">Q3 2023 - Q1 2024</div>
<p class="text-gray-300">Completamento dell'iter autorizzativo con la presentazione della documentazione necessaria alle autorità competenti e ottenimento delle approvazioni.</p>
</div>
</div>
<div class="timeline-item relative pl-16">
<div class="absolute left-0 top-0 flex items-center justify-center w-12 h-12 rounded-full bg-solar-primary text-white font-bold">2</div>
<div class="bg-solar-light bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold mb-2">Progettazione esecutiva</h3>
<div class="text-solar-primary mb-3">Q2 2024</div>
<p class="text-gray-300">Sviluppo dei progetti esecutivi e ingegneristici dettagliati, selezione dei fornitori e definizione dei contratti.</p>
</div>
</div>
<div class="timeline-item relative pl-16">
<div class="absolute left-0 top-0 flex items-center justify-center w-12 h-12 rounded-full bg-solar-primary text-white font-bold">3</div>
<div class="bg-solar-light bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold mb-2">Lavori preparatori</h3>
<div class="text-solar-primary mb-3">Q3 2024</div>
<p class="text-gray-300">Preparazione del sito, sistemazione del terreno, realizzazione delle infrastrutture di base e delle strade di cantiere.</p>
</div>
</div>
<div class="timeline-item relative pl-16">
<div class="absolute left-0 top-0 flex items-center justify-center w-12 h-12 rounded-full bg-solar-primary text-white font-bold">4</div>
<div class="bg-solar-light bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold mb-2">Costruzione impianto</h3>
<div class="text-solar-primary mb-3">Q4 2024 - Q2 2025</div>
<p class="text-gray-300">Installazione delle strutture di supporto, posa dei pannelli fotovoltaici, cabine elettriche e sistemi di controllo.</p>
</div>
</div>
<div class="timeline-item relative pl-16">
<div class="absolute left-0 top-0 flex items-center justify-center w-12 h-12 rounded-full bg-solar-primary text-white font-bold">5</div>
<div class="bg-solar-light bg-opacity-10 p-6 rounded-lg">
<h3 class="text-xl font-bold mb-2">Collaudo e connessione</h3>
<div class="text-solar-primary mb-3">Q3 2025</div>
<p class="text-gray-300">Test di funzionamento, collaudi tecnici e connessione alla rete elettrica. Avviamento della produzione energetica.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Contact Section -->
<section id="contatti" class="py-20 bg-white">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold text-solar-dark mb-4">Contattaci per <span class="text-solar-primary">maggiori informazioni</span></h2>
<div class="w-24 h-1 bg-solar-primary mx-auto mb-6"></div>
<p class="max-w-3xl mx-auto text-lg text-gray-700">Sei interessato al progetto o vuoi maggiori dettagli? Compila il form e ti risponderemo al più presto.</p>
</div>
<div class="flex flex-col lg:flex-row gap-12">
<div class="lg:w-1/2">
<form class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<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-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-solar-primary focus:border-transparent">
</div>
<div>
<label for="surname" class="block text-gray-700 font-medium mb-2">Cognome</label>
<input type="text" id="surname" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-solar-primary focus:border-transparent">
</div>
</div>
<div>
<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-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-solar-primary focus:border-transparent">
</div>
<div>
<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-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-solar-primary focus:border-transparent">
</div>
<div>
<label for="message" class="block text-gray-700 font-medium mb-2">Messaggio</label>
<textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-solar-primary focus:border-transparent"></textarea>
</div>
<div class="flex items-center">
<input type="checkbox" id="privacy" class="mr-3">
<label for="privacy" class="text-gray-700">Acconsento al trattamento dei miei dati personali ai sensi del GDPR</label>
</div>
<button type="submit" class="bg-solar-primary hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 w-full md:w-auto">Invia messaggio</button>
</form>
</div>
<div class="lg:w-1/2">
<div class="bg-solar-light rounded-xl p-8 h-full">
<h3 class="text-2xl font-bold text-solar-dark mb-6">Informazioni di contatto</h3>
<div class="space-y-6">
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-map-marker-alt text-solar-primary"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Sede operativa</h4>
<p class="text-gray-700">IDDA GROUP rete di imprese<br>Via Leoncavallo 9, 07046 Porto Torres (SS)</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-envelope text-solar-primary"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Email</h4>
<p class="text-gray-700">[email protected]</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-phone text-solar-primary"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Telefono</h4>
<p class="text-gray-700">+39 334 5769970</p>
</div>
</div>
<div class="flex items-start">
<div class="bg-solar-primary bg-opacity-10 p-3 rounded-full mr-4">
<i class="fas fa-clock text-solar-primary"></i>
</div>
<div>
<h4 class="font-bold text-lg mb-1">Orari ufficio</h4>
<p class="text-gray-700">Lunedì - Venerdì: 9:00 - 18:00<br>Sabato e Domenica: Chiuso</p>
</div>
</div>
</div>
<div class="mt-8">
<h4 class="font-bold text-lg mb-4">Seguici sui social</h4>
<div class="flex space-x-4">
<a href="#" class="bg-solar-primary bg-opacity-10 p-3 rounded-full text-solar-primary hover:bg-opacity-20 transition">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="bg-solar-primary bg-opacity-10 p-3 rounded-full text-solar-primary hover:bg-opacity-20 transition">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="bg-solar-primary bg-opacity-10 p-3 rounded-full text-solar-primary hover:bg-opacity-20 transition">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="bg-solar-primary bg-opacity-10 p-3 rounded-full text-solar-primary hover:bg-opacity-20 transition">
<i class="fab fa-instagram"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-solar-dark text-white py-12">
<div class="container mx-auto px-6">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<i class="fas fa-solar-panel text-2xl text-solar-primary"></i>
<span class="font-semibold text-xl">SolarPort Cagliari</span>
</div>
<p class="text-gray-400">Progetto fotovoltaico utility-scale da 104 MW nell'area industriale di Macchiareddu, Porto di Cagliari.</p>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Link rapidi</h4>
<ul class="space-y-2">
<li><a href="#progetto" class="text-gray-400 hover:text-solar-primary transition">Progetto</a></li>
<li><a href="#localizzazione" class="text-gray-400 hover:text-solar-primary transition">Localizzazione</a></li>
<li><a href="#benefici" class="text-gray-400 hover:text-solar-primary transition">Benefici</a></li>
<li><a href="#tecnologia" class="text-gray-400 hover:text-solar-primary transition">Tecnologia</a></li>
<li><a href="#contatti" class="text-gray-400 hover:text-solar-primary transition">Contatti</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Documenti</h4>
<ul class="space-y-2">
<li><a href="#" class="text-gray-400 hover:text-solar-primary transition">Studio di fattibilità</a></li>
<li><a href="#" class="text-gray-400 hover:text-solar-primary transition">Impatto ambientale</a></li>
<li><a href="#" class="text-gray-400 hover:text-solar-primary transition">Brochure progetto</a></li>
<li><a href="#" class="text-gray-400 hover:text-solar-primary transition">Presentazione</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-bold mb-4">Newsletter</h4>
<p class="text-gray-400 mb-4">Iscriviti per ricevere aggiornamenti sul progetto.</p>
<div class="flex">
<input type="email" placeholder="La tua email" class="px-4 py-2 rounded-l-lg focus:outline-none text-gray-800 w-full">
<button class="bg-solar-primary hover:bg-yellow-600 px-4 py-2 rounded-r-lg transition">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400 mb-4 md:mb-0">© 2023 SolarPort Cagliari. Tutti i diritti riservati.</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-solar-primary transition">Privacy Policy</a>
<a href="#" class="text-gray-400 hover:text-solar-primary transition">Cookie Policy</a>
<a href="#" class="text-gray-400 hover:text-solar-primary transition">Termini e condizioni</a>
</div>
</div>
</div>
</footer>
<script>
// Grafico a torta
const energyCtx = document.getElementById('energyChart').getContext('2d');
const energyChart = new Chart(energyCtx, {
type: 'pie',
data: {
labels: ['Consumo domestico (70k famiglie)', 'Industria portuale', 'Immissione in rete'],
datasets: [{
data: [60, 25, 15],
backgroundColor: [
'#F9A825',
'#1565C0',
'#263238'
],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: {
color: '#fff',
font: {
family: 'Montserrat',
size: 14
}
}
},
tooltip: {
callbacks: {
label: function(context) {
return context.label + ': ' + context.raw + '%';
}
}
}
}
}
});
// Animazioni al scroll
document.addEventListener('DOMContentLoaded', function() {
const benefitCards = document.querySelectorAll('.benefit-card');
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, { threshold: 0.1 });
benefitCards.forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'all 0.6s ease';
observer.observe(card);
});
});
// Mobile menu toggle (semplice)
document.querySelector('.md\\:hidden').addEventListener('click', function() {
alert('Menu mobile da implementare');
});
</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=grmsolution/macchiareddu104" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>