Hugging Face's logo

Spaces:
wolfkaku
/
stagecrafters-pro
Running

App Files Community
wolfkaku commited on
Commit
c80bb72
·
verified ·
1 Parent(s): db6d2bc

va migliorata stilisticamente la head del body inoltre togli la parte di recensione dei clienti. aggiungi la pagina dei collegata al pulsante ricevi un preventivo

Browse files
Files changed (3) hide show
  1. components/footer.js +61 -1
  2. contatti.html +117 -0
  3. index.html +7 -63
components/footer.js CHANGED
@@ -1,3 +1,4 @@
 
1
  class CustomFooter extends HTMLElement {
2
  connectedCallback() {
3
  this.attachShadow({ mode: 'open' });
@@ -5,6 +6,11 @@ class CustomFooter extends HTMLElement {
5
  <style>
6
  .footer-links a:hover {
7
  color: #f59e0b;
 
 
 
 
 
8
  }
9
  </style>
10
  <footer class="bg-gray-900 text-white py-12">
@@ -13,4 +19,58 @@ class CustomFooter extends HTMLElement {
13
  <div>
14
  <h3 class="text-xl font-bold mb-4 flex items-center">
15
  <i data-feather="box" class="w-6 h-6 mr-2 text-yellow-400"></i>
16
- StageCraft{"ok":false,"message":"terminated"}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
  class CustomFooter extends HTMLElement {
3
  connectedCallback() {
4
  this.attachShadow({ mode: 'open' });
 
6
  <style>
7
  .footer-links a:hover {
8
  color: #f59e0b;
9
+ transition: color 0.3s ease;
10
+ }
11
+ .social-icon:hover {
12
+ transform: translateY(-3px);
13
+ transition: transform 0.3s ease;
14
  }
15
  </style>
16
  <footer class="bg-gray-900 text-white py-12">
 
19
  <div>
20
  <h3 class="text-xl font-bold mb-4 flex items-center">
21
  <i data-feather="box" class="w-6 h-6 mr-2 text-yellow-400"></i>
22
+ StageCrafters Pro
23
+ </h3>
24
+ <p class="text-gray-400 mb-4">Specialisti in allestimenti scenografici e palchi professionali per ogni tipo di evento.</p>
25
+ <div class="flex space-x-4">
26
+ <a href="#" class="social-icon text-gray-400 hover:text-yellow-400">
27
+ <i data-feather="facebook" class="w-5 h-5"></i>
28
+ </a>
29
+ <a href="#" class="social-icon text-gray-400 hover:text-yellow-400">
30
+ <i data-feather="instagram" class="w-5 h-5"></i>
31
+ </a>
32
+ <a href="#" class="social-icon text-gray-400 hover:text-yellow-400">
33
+ <i data-feather="linkedin" class="w-5 h-5"></i>
34
+ </a>
35
+ </div>
36
+ </div>
37
+ <div>
38
+ <h3 class="text-lg font-bold mb-4">Servizi</h3>
39
+ <ul class="space-y-2 footer-links">
40
+ <li><a href="servizi.html" class="text-gray-400">Allestimenti Palchi</a></li>
41
+ <li><a href="servizi.html" class="text-gray-400">Scenografie</a></li>
42
+ <li><a href="servizi.html" class="text-gray-400">Illuminazione</a></li>
43
+ <li><a href="servizi.html" class="text-gray-400">Sistemi Audio</a></li>
44
+ </ul>
45
+ </div>
46
+ <div>
47
+ <h3 class="text-lg font-bold mb-4">Azienda</h3>
48
+ <ul class="space-y-2 footer-links">
49
+ <li><a href="chi-siamo.html" class="text-gray-400">Chi Siamo</a></li>
50
+ <li><a href="portfolio.html" class="text-gray-400">Portfolio</a></li>
51
+ <li><a href="blog.html" class="text-gray-400">Blog</a></li>
52
+ <li><a href="contatti.html" class="text-gray-400">Lavora con noi</a></li>
53
+ </ul>
54
+ </div>
55
+ <div>
56
+ <h3 class="text-lg font-bold mb-4">Contatti</h3>
57
+ <ul class="space-y-2">
58
+ <li class="flex items-center text-gray-400">
59
+ <i data-feather="map-pin" class="w-4 h-4 mr-2"></i> Via dello Spettacolo 123, Milano
60
+ </li>
61
+ <li class="flex items-center text-gray-400">
62
+ <i data-feather="mail" class="w-4 h-4 mr-2"></i> info@stagecrafterspro.it
63
+ </li>
64
+ <li class="flex items-center text-gray-400">
65
+ <i data-feather="phone" class="w-4 h-4 mr-2"></i> +39 012 345 6789
66
+ </li>
67
+ </ul>
68
+ </div>
69
+ </div>
70
+ <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500">
71
+ <p>&copy; 2023 StageCrafters Pro. Tutti i diritti riservati.</p>
72
+ </div>
73
+ </div>
74
+ </footer>
75
+ <script>feather.replace();</script>
76
+ `;
contatti.html ADDED
@@ -0,0 +1,117 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <meta name="description" content="Richiedi un preventivo per i nostri servizi di allestimento scenografico">
7
+ <title>Contatti | StageCrafters Pro</title>
8
+ <link rel="stylesheet" href="style.css">
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+ <script src="https://cdn.tailwindcss.com"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
14
+ <script src="components/navbar.js"></script>
15
+ <script src="components/footer.js"></script>
16
+ </head>
17
+ <body class="bg-gray-100">
18
+ <custom-navbar></custom-navbar>
19
+
20
+ <!-- Contact Hero -->
21
+ <section class="relative py-20 bg-gradient-to-r from-indigo-800 to-purple-900 text-white">
22
+ <div class="container mx-auto px-4 text-center">
23
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Richiedi un preventivo</h1>
24
+ <p class="text-xl max-w-2xl mx-auto">Compila il form e ti risponderemo entro 24 ore con una soluzione personalizzata per il tuo evento.</p>
25
+ </div>
26
+ </section>
27
+
28
+ <!-- Contact Form -->
29
+ <section class="py-16 bg-white">
30
+ <div class="container mx-auto px-4 max-w-4xl">
31
+ <div class="bg-gray-50 rounded-xl p-8 md:p-12 shadow-lg">
32
+ <form id="contactForm">
33
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
34
+ <div>
35
+ <label for="name" class="block text-gray-700 font-medium mb-2">Nome *</label>
36
+ <input type="text" id="name" name="name" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none">
37
+ </div>
38
+ <div>
39
+ <label for="company" class="block text-gray-700 font-medium mb-2">Azienda</label>
40
+ <input type="text" id="company" name="company" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none">
41
+ </div>
42
+ </div>
43
+ <div class="grid md:grid-cols-2 gap-6 mb-6">
44
+ <div>
45
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label>
46
+ <input type="email" id="email" name="email" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none">
47
+ </div>
48
+ <div>
49
+ <label for="phone" class="block text-gray-700 font-medium mb-2">Telefono *</label>
50
+ <input type="tel" id="phone" name="phone" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none">
51
+ </div>
52
+ </div>
53
+ <div class="mb-6">
54
+ <label for="eventType" class="block text-gray-700 font-medium mb-2">Tipo di evento *</label>
55
+ <select id="eventType" name="eventType" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none">
56
+ <option value="">Seleziona...</option>
57
+ <option value="concerto">Concerto</option>
58
+ <option value="teatro">Spettacolo Teatrale</option>
59
+ <option value="evento">Evento Aziendale</option>
60
+ <option value="mostra">Mostra/Esposizione</option>
61
+ <option value="altro">Altro</option>
62
+ </select>
63
+ </div>
64
+ <div class="mb-6">
65
+ <label for="message" class="block text-gray-700 font-medium mb-2">Descrizione del tuo progetto *</label>
66
+ <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-indigo-500 focus:outline-none"></textarea>
67
+ </div>
68
+ <button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center">
69
+ Invia richiesta <i data-feather="send" class="ml-2"></i>
70
+ </button>
71
+ </form>
72
+ </div>
73
+ </div>
74
+ </section>
75
+
76
+ <!-- Contact Info -->
77
+ <section class="py-16 bg-gray-100">
78
+ <div class="container mx-auto px-4">
79
+ <div class="grid md:grid-cols-3 gap-8">
80
+ <div class="bg-white rounded-xl p-8 shadow-lg text-center">
81
+ <div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
82
+ <i data-feather="mail" class="text-indigo-600 w-6 h-6"></i>
83
+ </div>
84
+ <h3 class="text-xl font-bold mb-2">Email</h3>
85
+ <p class="text-gray-600">info@stagecrafterspro.it</p>
86
+ </div>
87
+ <div class="bg-white rounded-xl p-8 shadow-lg text-center">
88
+ <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
89
+ <i data-feather="phone" class="text-purple-600 w-6 h-6"></i>
90
+ </div>
91
+ <h3 class="text-xl font-bold mb-2">Telefono</h3>
92
+ <p class="text-gray-600">+39 012 345 6789</p>
93
+ </div>
94
+ <div class="bg-white rounded-xl p-8 shadow-lg text-center">
95
+ <div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mb-6 mx-auto">
96
+ <i data-feather="map-pin" class="text-yellow-600 w-6 h-6"></i>
97
+ </div>
98
+ <h3 class="text-xl font-bold mb-2">Sede</h3>
99
+ <p class="text-gray-600">Via dello Spettacolo 123, Milano</p>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </section>
104
+
105
+ <custom-footer></custom-footer>
106
+ <script>
107
+ feather.replace();
108
+ // Form validation and submission would be added here
109
+ document.getElementById('contactForm').addEventListener('submit', function(e) {
110
+ e.preventDefault();
111
+ // Form submission logic would go here
112
+ alert('Grazie per la tua richiesta! Ti contatteremo al più presto.');
113
+ this.reset();
114
+ });
115
+ </script>
116
+ </body>
117
+ </html>
index.html CHANGED
@@ -3,8 +3,13 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>StageCrafters Pro - Allestimenti e Scenografie</title>
 
 
7
  <link rel="stylesheet" href="style.css">
 
 
 
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
  <script src="https://unpkg.com/feather-icons"></script>
@@ -107,68 +112,7 @@
107
  </div>
108
  </div>
109
  </section>
110
-
111
- <!-- Testimonials Section -->
112
- <section class="py-20 bg-indigo-700 text-white">
113
- <div class="container mx-auto px-4">
114
- <h2 class="text-3xl font-bold text-center mb-16">Cosa dicono i nostri clienti</h2>
115
- <div class="grid md:grid-cols-3 gap-8">
116
- <div class="bg-indigo-800 rounded-xl p-8">
117
- <div class="flex items-center mb-4">
118
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
119
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
120
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
121
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
122
- <i data-feather="star" class="text-yellow-400"></i>
123
- </div>
124
- <p class="text-lg italic mb-6">"Professionalità e creatività eccezionali. Hanno trasformato la nostra convention in un evento memorabile."</p>
125
- <div class="flex items-center">
126
- <img src="http://static.photos/people/200x200/1" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
127
- <div>
128
- <h4 class="font-bold">Marco Rossi</h4>
129
- <p class="text-indigo-200">Marketing Director, TechCorp</p>
130
- </div>
131
- </div>
132
- </div>
133
- <div class="bg-indigo-800 rounded-xl p-8">
134
- <div class="flex items-center mb-4">
135
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
136
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
137
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
138
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
139
- <i data-feather="star" class="text-yellow-400"></i>
140
- </div>
141
- <p class="text-lg italic mb-6">"Il palco realizzato per il nostro concerto è stato spettacolare. Reattivi e precisi su ogni dettaglio."</p>
142
- <div class="flex items-center">
143
- <img src="http://static.photos/people/200x200/2" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
144
- <div>
145
- <h4 class="font-bold">Laura Bianchi</h4>
146
- <p class="text-indigo-200">Event Manager, MusicFest</p>
147
- </div>
148
- </div>
149
- </div>
150
- <div class="bg-indigo-800 rounded-xl p-8">
151
- <div class="flex items-center mb-4">
152
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
153
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
154
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
155
- <i data-feather="star" class="text-yellow-400 mr-1"></i>
156
- <i data-feather="star" class="text-yellow-400"></i>
157
- </div>
158
- <p class="text-lg italic mb-6">"Scenografia perfetta per la nostra opera teatrale. Grande attenzione alle nostre esigenze artistiche."</p>
159
- <div class="flex items-center">
160
- <img src="http://static.photos/people/200x200/3" alt="Cliente" class="w-12 h-12 rounded-full mr-4">
161
- <div>
162
- <h4 class="font-bold">Giovanni Verdi</h4>
163
- <p class="text-indigo-200">Direttore Artistico, Teatro dell'Opera</p>
164
- </div>
165
- </div>
166
- </div>
167
- </div>
168
- </div>
169
- </section>
170
-
171
- <!-- CTA Section -->
172
  <section class="py-16 bg-gray-900 text-white">
173
  <div class="container mx-auto px-4 text-center">
174
  <h2 class="text-3xl font-bold mb-6">Pronto a trasformare il tuo evento?</h2>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="StageCrafters Pro - Specializzati in allestimenti scenografici e palchi professionali per eventi">
7
+ <meta name="keywords" content="scenografie, allestimenti, palchi, eventi, teatro, concerti">
8
+ <title>StageCrafters Pro - Allestimenti e Scenografie Professionali</title>
9
  <link rel="stylesheet" href="style.css">
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
13
  <script src="https://cdn.tailwindcss.com"></script>
14
  <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
15
  <script src="https://unpkg.com/feather-icons"></script>
 
112
  </div>
113
  </div>
114
  </section>
115
+ <!-- CTA Section -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  <section class="py-16 bg-gray-900 text-white">
117
  <div class="container mx-auto px-4 text-center">
118
  <h2 class="text-3xl font-bold mb-6">Pronto a trasformare il tuo evento?</h2>