Initial commit
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
dist/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env.local
|
||||
.env
|
||||
.vscode/
|
||||
.idea/
|
||||
@@ -0,0 +1,88 @@
|
||||
# cimaprogetti - Sito Aziendale
|
||||
|
||||
Sito web professionale realizzato con **Svelte** e **Vite**.
|
||||
|
||||
## Struttura del Progetto
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Componenti Svelte riutilizzabili
|
||||
│ ├── Header.svelte
|
||||
│ ├── Hero.svelte
|
||||
│ ├── Services.svelte
|
||||
│ └── Footer.svelte
|
||||
├── App.svelte # Componente principale
|
||||
└── main.js # Entry point dell'applicazione
|
||||
```
|
||||
|
||||
## Componenti Disponibili
|
||||
|
||||
- **Header**: Barra di navigazione sticky con menu
|
||||
- **Hero**: Sezione hero con call-to-action
|
||||
- **Services**: Griglia con i servizi offerti
|
||||
- **Footer**: Footer con informazioni aziendali e link
|
||||
|
||||
## Setup Iniziale
|
||||
|
||||
### Installazione
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### Avvio dello sviluppo
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Il progetto sarà disponibile su `http://localhost:5173`
|
||||
|
||||
### Build per la produzione
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Preview della build
|
||||
|
||||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## Customizzazione
|
||||
|
||||
### Modificare i Servizi
|
||||
|
||||
Modifica l'array `services` nel file [src/components/Services.svelte](src/components/Services.svelte) per aggiungere/rimuovere servizi.
|
||||
|
||||
### Cambiare i Colori
|
||||
|
||||
I colori principali sono definiti negli `<style>` di ogni componente:
|
||||
- **Blu primario**: `#0066cc`
|
||||
- **Blu scuro**: `#0052a3`
|
||||
- **Arancione**: `#ff6b35`
|
||||
|
||||
### Aggiungere Nuove Pagine
|
||||
|
||||
1. Crea un nuovo file `.svelte` in `src/pages/`
|
||||
2. Importalo in `App.svelte`
|
||||
3. Aggiungi la navigazione in `Header.svelte`
|
||||
|
||||
## Tecnologie Utilizzate
|
||||
|
||||
- **Svelte** - Framework UI reattivo
|
||||
- **Vite** - Build tool moderno e veloce
|
||||
- **CSS3** - Styling responsive
|
||||
|
||||
## Prossimi Passi
|
||||
|
||||
- [ ] Aggiungere routing con SvelteKit
|
||||
- [ ] Integrare animazioni con Svelte transitions
|
||||
- [ ] Aggiungere form di contatto
|
||||
- [ ] Ottimizzare SEO
|
||||
- [ ] Aggiungere dark mode
|
||||
|
||||
---
|
||||
|
||||
**Nota**: Questo è un template base. Personalizza i contenuti, le immagini e i colori secondo le tue esigenze aziendali.
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
+13
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<title>cimaprogetti</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Generated
+1176
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "cimaprogetti",
|
||||
"version": "1.0.0",
|
||||
"description": "Sito aziendale realizzato con Svelte",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"lint": "eslint src"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^7.0.0",
|
||||
"svelte": "^5.55.5",
|
||||
"vite": "^8.0.10"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="174" height="124" viewBox="0 0 174 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_949_1180)">
|
||||
<path d="M53.5307 111.256V80.5389C53.5307 78.1003 54.4973 76.8801 56.4322 76.8801C58.2658 76.8801 59.181 78.1003 59.181 80.5389V111.256H68.1927V80.5389C68.1927 78.1003 69.108 76.8801 70.9416 76.8801C72.875 76.8801 73.8431 78.1003 73.8431 80.5389V111.256H83.6937V79.2428C83.6937 76.0932 82.8409 73.5269 81.135 71.5459C79.4294 69.5634 77.329 68.5736 74.8362 68.5736C72.8499 68.5736 71.1956 69.2086 69.8717 70.4784C68.5478 71.7498 67.8107 73.4507 67.6576 75.5845C67.249 73.5022 66.3712 71.8122 65.0226 70.5158C63.674 69.2209 62.0822 68.5736 60.2501 68.5736C58.2654 68.5736 56.6346 69.2474 55.3624 70.592C54.0901 71.9395 53.3777 73.6797 53.2246 75.8131H53.0719V69.3344H43.6797V111.256H53.5303L53.5307 111.256ZM112.291 109.883C114.454 108.462 115.79 106.505 116.3 104.015V111.256H127.373V83.054C127.373 78.4817 125.82 74.9256 122.714 72.3829C119.608 69.8431 115.282 68.5732 109.733 68.5732C104.438 68.5732 100.238 69.7916 97.1332 72.2305C94.0274 74.6705 92.3982 77.9479 92.2455 82.0642H103.089C103.191 80.5904 103.814 79.4714 104.96 78.7106C106.106 77.9479 107.645 77.567 109.58 77.567C111.616 77.567 113.182 78.0122 114.276 78.9007C115.371 79.7908 115.918 81.0233 115.918 82.5968V85.2658H107.672C102.222 85.2658 97.9987 86.4845 94.9943 88.9246C91.9899 91.3631 90.4898 94.6921 90.4898 98.9092C90.4898 102.822 91.7104 105.985 94.1554 108.397C96.5985 110.813 99.9071 112.019 104.082 112.019C107.391 112.019 110.127 111.306 112.291 109.884M103.28 101.348C102.135 100.331 101.561 99.0365 101.561 97.4604C101.561 95.8854 102.109 94.6017 103.203 93.6119C104.298 92.6207 105.863 92.1258 107.901 92.1258H115.918V96.3929C115.918 98.3258 115.218 99.8881 113.818 101.08C112.418 102.275 110.522 102.872 108.13 102.872C106.041 102.872 104.426 102.364 103.28 101.348M173.648 113.161H136.995V123.832H173.648V113.161Z" fill="white"/>
|
||||
<path d="M31.8439 57.0127C35.1525 54.2194 36.9097 50.4082 37.1121 45.579H25.9642C25.8115 47.4091 25.0597 48.819 23.7111 49.8103C22.3611 50.8 20.6428 51.2964 18.5566 51.2964C16.2662 51.2964 14.509 50.6988 13.2869 49.5051C12.0662 48.3114 11.4548 46.6214 11.4548 44.4364V34.528C11.4548 32.2919 12.0659 30.5906 13.2869 29.4205C14.5094 28.2518 16.2666 27.6681 18.5566 27.6681C20.6428 27.6681 22.3611 28.1753 23.7111 29.1915C25.0597 30.2093 25.8111 31.6054 25.9642 33.384H37.1121C36.9093 28.5566 35.1525 24.7455 31.8439 21.9502C28.5338 19.1569 24.1044 17.7593 18.557 17.7593C14.8401 17.7593 11.5813 18.4581 8.7827 19.8538C5.98261 21.2529 3.81827 23.1966 2.29194 25.6848C0.764103 28.1749 0 31.1221 0 34.5273V44.4357C0 47.7893 0.764103 50.7227 2.29194 53.2393C3.81827 55.7541 5.98261 57.7104 8.7827 59.108C11.5813 60.5056 14.8398 61.2045 18.557 61.2045C24.1044 61.2045 28.5341 59.8076 31.8439 57.0127ZM83.5402 60.4418V50.152H71.4754V18.5201H47.6502V28.8098H60.0203V50.152H46.122V60.4418H83.5402ZM70.2159 10.2894C71.4631 9.22194 72.0869 7.77316 72.0869 5.94453C72.0869 4.1159 71.4631 2.66712 70.2159 1.59967C68.9669 0.533723 67.3002 0 65.2141 0C63.1264 0 61.4579 0.533723 60.2122 1.59967C58.9632 2.66712 58.3413 4.1159 58.3413 5.94453C58.3413 7.77316 58.9632 9.22194 60.2122 10.2894C61.4579 11.3553 63.1261 11.8891 65.2141 11.8891C67.3002 11.8891 68.9669 11.3553 70.2159 10.2894Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_949_1180">
|
||||
<rect width="174" height="124" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="174" height="124" viewBox="0 0 174 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_949_935)">
|
||||
<path d="M53.5307 111.256V80.5389C53.5307 78.1003 54.4973 76.8801 56.4322 76.8801C58.2658 76.8801 59.181 78.1003 59.181 80.5389V111.256H68.1927V80.5389C68.1927 78.1003 69.108 76.8801 70.9416 76.8801C72.875 76.8801 73.8431 78.1003 73.8431 80.5389V111.256H83.6937V79.2428C83.6937 76.0932 82.8409 73.5269 81.135 71.5459C79.4294 69.5634 77.329 68.5736 74.8362 68.5736C72.8499 68.5736 71.1956 69.2086 69.8717 70.4784C68.5478 71.7498 67.8107 73.4507 67.6576 75.5845C67.249 73.5022 66.3712 71.8122 65.0226 70.5158C63.674 69.2209 62.0822 68.5736 60.2501 68.5736C58.2654 68.5736 56.6346 69.2474 55.3624 70.592C54.0901 71.9395 53.3777 73.6797 53.2246 75.8131H53.0719V69.3344H43.6797V111.256H53.5303L53.5307 111.256ZM112.291 109.883C114.454 108.462 115.79 106.505 116.3 104.015V111.256H127.373V83.054C127.373 78.4817 125.82 74.9256 122.714 72.3829C119.608 69.8431 115.282 68.5732 109.733 68.5732C104.438 68.5732 100.238 69.7916 97.1332 72.2305C94.0274 74.6705 92.3982 77.9479 92.2455 82.0642H103.089C103.191 80.5904 103.814 79.4714 104.96 78.7106C106.106 77.9479 107.645 77.567 109.58 77.567C111.616 77.567 113.182 78.0122 114.276 78.9007C115.371 79.7908 115.918 81.0233 115.918 82.5968V85.2658H107.672C102.222 85.2658 97.9987 86.4845 94.9943 88.9246C91.9899 91.3631 90.4898 94.6921 90.4898 98.9092C90.4898 102.822 91.7104 105.985 94.1554 108.397C96.5985 110.813 99.9071 112.019 104.082 112.019C107.391 112.019 110.127 111.306 112.291 109.884M103.28 101.348C102.135 100.331 101.561 99.0365 101.561 97.4604C101.561 95.8854 102.109 94.6017 103.203 93.6119C104.298 92.6207 105.863 92.1258 107.901 92.1258H115.918V96.3929C115.918 98.3258 115.218 99.8881 113.818 101.08C112.418 102.275 110.522 102.872 108.13 102.872C106.041 102.872 104.426 102.364 103.28 101.348M173.648 113.161H136.995V123.832H173.648V113.161Z" fill="#4983F2"/>
|
||||
<path d="M31.8439 57.0127C35.1525 54.2194 36.9097 50.4082 37.1121 45.579H25.9642C25.8115 47.4091 25.0597 48.819 23.7111 49.8103C22.3611 50.8 20.6428 51.2964 18.5566 51.2964C16.2662 51.2964 14.509 50.6988 13.2869 49.5051C12.0662 48.3114 11.4548 46.6214 11.4548 44.4364V34.528C11.4548 32.2919 12.0659 30.5906 13.2869 29.4205C14.5094 28.2518 16.2666 27.6681 18.5566 27.6681C20.6428 27.6681 22.3611 28.1753 23.7111 29.1915C25.0597 30.2093 25.8111 31.6054 25.9642 33.384H37.1121C36.9093 28.5566 35.1525 24.7455 31.8439 21.9502C28.5338 19.1569 24.1044 17.7593 18.557 17.7593C14.8401 17.7593 11.5813 18.4581 8.7827 19.8538C5.98261 21.2529 3.81827 23.1966 2.29194 25.6848C0.764103 28.1749 0 31.1221 0 34.5273V44.4357C0 47.7893 0.764103 50.7227 2.29194 53.2393C3.81827 55.7541 5.98261 57.7104 8.7827 59.108C11.5813 60.5056 14.8398 61.2045 18.557 61.2045C24.1044 61.2045 28.5341 59.8076 31.8439 57.0127ZM83.5402 60.4418V50.152H71.4754V18.5201H47.6502V28.8098H60.0203V50.152H46.122V60.4418H83.5402ZM70.2159 10.2894C71.4631 9.22194 72.0869 7.77316 72.0869 5.94453C72.0869 4.1159 71.4631 2.66712 70.2159 1.59967C68.9669 0.533723 67.3002 0 65.2141 0C63.1264 0 61.4579 0.533723 60.2122 1.59967C58.9632 2.66712 58.3413 4.1159 58.3413 5.94453C58.3413 7.77316 58.9632 9.22194 60.2122 10.2894C61.4579 11.3553 63.1261 11.8891 65.2141 11.8891C67.3002 11.8891 68.9669 11.3553 70.2159 10.2894Z" fill="#4983F2"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_949_935">
|
||||
<rect width="174" height="124" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="174" height="124" viewBox="0 0 174 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_949_636)">
|
||||
<path d="M53.5307 111.256V80.5387C53.5307 78.1002 54.4973 76.88 56.4322 76.88C58.2658 76.88 59.181 78.1002 59.181 80.5387V111.256H68.1927V80.5387C68.1927 78.1002 69.108 76.88 70.9416 76.88C72.875 76.88 73.8431 78.1002 73.8431 80.5387V111.256H83.6937V79.2427C83.6937 76.093 82.8409 73.5268 81.135 71.5458C79.4294 69.5633 77.329 68.5735 74.8362 68.5735C72.8499 68.5735 71.1956 69.2084 69.8717 70.4783C68.5478 71.7497 67.8107 73.4506 67.6576 75.5844C67.249 73.5021 66.3712 71.8121 65.0226 70.5157C63.674 69.2208 62.0822 68.5735 60.2501 68.5735C58.2654 68.5735 56.6346 69.2473 55.3624 70.5919C54.0901 71.9394 53.3777 73.6795 53.2246 75.8129H53.0719V69.3343H43.6797V111.256H53.5303L53.5307 111.256ZM112.291 109.883C114.454 108.462 115.79 106.504 116.3 104.015V111.256H127.373V83.0539C127.373 78.4815 125.82 74.9255 122.714 72.3828C119.608 69.843 115.282 68.5731 109.733 68.5731C104.438 68.5731 100.238 69.7915 97.1332 72.2304C94.0274 74.6704 92.3982 77.9478 92.2455 82.0641H103.089C103.191 80.5903 103.814 79.4713 104.96 78.7105C106.106 77.9478 107.645 77.5669 109.58 77.5669C111.616 77.5669 113.182 78.0121 114.276 78.9006C115.371 79.7906 115.918 81.0232 115.918 82.5967V85.2657H107.672C102.222 85.2657 97.9987 86.4844 94.9943 88.9244C91.9899 91.363 90.4898 94.6919 90.4898 98.9091C90.4898 102.821 91.7104 105.985 94.1554 108.397C96.5985 110.813 99.9071 112.019 104.082 112.019C107.391 112.019 110.127 111.306 112.291 109.883M103.28 101.348C102.135 100.331 101.561 99.0364 101.561 97.4603C101.561 95.8852 102.109 94.6015 103.203 93.6118C104.298 92.6205 105.863 92.1256 107.901 92.1256H115.918V96.3928C115.918 98.3257 115.218 99.888 113.818 101.08C112.418 102.275 110.522 102.871 108.13 102.871C106.041 102.871 104.426 102.364 103.28 101.348M173.648 113.161H136.995V123.832H173.648V113.161Z" fill="#1343F0"/>
|
||||
<path d="M31.8439 57.0126C35.1525 54.2192 36.9097 50.4081 37.1121 45.5788H25.9642C25.8115 47.409 25.0597 48.8189 23.7111 49.8102C22.3611 50.7999 20.6428 51.2963 18.5566 51.2963C16.2662 51.2963 14.509 50.6987 13.2869 49.505C12.0662 48.3113 11.4548 46.6213 11.4548 44.4363V34.5279C11.4548 32.2918 12.0659 30.5905 13.2869 29.4204C14.5094 28.2517 16.2666 27.6679 18.5566 27.6679C20.6428 27.6679 22.3611 28.1751 23.7111 29.1914C25.0597 30.2092 25.8111 31.6053 25.9642 33.3839H37.1121C36.9093 28.5565 35.1525 24.7453 31.8439 21.9501C28.5338 19.1568 24.1044 17.7591 18.557 17.7591C14.8401 17.7591 11.5813 18.4579 8.7827 19.8537C5.98261 21.2528 3.81827 23.1965 2.29194 25.6847C0.764103 28.1748 0 31.122 0 34.5272V44.4356C0 47.7892 0.764103 50.7226 2.29194 53.2392C3.81827 55.7539 5.98261 57.7103 8.7827 59.1079C11.5813 60.5055 14.8398 61.2043 18.557 61.2043C24.1044 61.2043 28.5341 59.8075 31.8439 57.0126ZM83.5402 60.4417V50.1519H71.4754V18.5199H47.6502V28.8097H60.0203V50.1519H46.122V60.4417H83.5402ZM70.2159 10.2893C71.4631 9.22182 72.0869 7.77303 72.0869 5.94441C72.0869 4.11578 71.4631 2.667 70.2159 1.59955C68.9669 0.533601 67.3002 -0.00012207 65.2141 -0.00012207C63.1264 -0.00012207 61.4579 0.533601 60.2122 1.59955C58.9632 2.667 58.3413 4.11578 58.3413 5.94441C58.3413 7.77303 58.9632 9.22182 60.2122 10.2893C61.4579 11.3552 63.1261 11.8889 65.2141 11.8889C67.3002 11.8889 68.9669 11.3552 70.2159 10.2893Z" fill="#1343F0"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_949_636">
|
||||
<rect width="174" height="124" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,11 @@
|
||||
<svg width="174" height="124" viewBox="0 0 174 124" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_949_1183)">
|
||||
<path d="M53.5307 111.256V80.5389C53.5307 78.1003 54.4973 76.8801 56.4322 76.8801C58.2658 76.8801 59.181 78.1003 59.181 80.5389V111.256H68.1927V80.5389C68.1927 78.1003 69.108 76.8801 70.9416 76.8801C72.875 76.8801 73.8431 78.1003 73.8431 80.5389V111.256H83.6937V79.2428C83.6937 76.0932 82.8409 73.5269 81.135 71.5459C79.4294 69.5634 77.329 68.5736 74.8362 68.5736C72.8499 68.5736 71.1956 69.2086 69.8717 70.4784C68.5478 71.7498 67.8107 73.4507 67.6576 75.5845C67.249 73.5022 66.3712 71.8122 65.0226 70.5158C63.674 69.2209 62.0822 68.5736 60.2501 68.5736C58.2654 68.5736 56.6346 69.2474 55.3624 70.592C54.0901 71.9395 53.3777 73.6797 53.2246 75.8131H53.0719V69.3344H43.6797V111.256H53.5303L53.5307 111.256ZM112.291 109.883C114.454 108.462 115.79 106.505 116.3 104.015V111.256H127.373V83.054C127.373 78.4817 125.82 74.9256 122.714 72.3829C119.608 69.8431 115.282 68.5732 109.733 68.5732C104.438 68.5732 100.238 69.7916 97.1332 72.2305C94.0274 74.6705 92.3982 77.9479 92.2455 82.0642H103.089C103.191 80.5904 103.814 79.4714 104.96 78.7106C106.106 77.9479 107.645 77.567 109.58 77.567C111.616 77.567 113.182 78.0122 114.276 78.9007C115.371 79.7908 115.918 81.0233 115.918 82.5968V85.2658H107.672C102.222 85.2658 97.9987 86.4845 94.9943 88.9246C91.9899 91.3631 90.4898 94.6921 90.4898 98.9092C90.4898 102.822 91.7104 105.985 94.1554 108.397C96.5985 110.813 99.9071 112.019 104.082 112.019C107.391 112.019 110.127 111.306 112.291 109.884M103.28 101.348C102.135 100.331 101.561 99.0365 101.561 97.4604C101.561 95.8854 102.109 94.6017 103.203 93.6119C104.298 92.6207 105.863 92.1258 107.901 92.1258H115.918V96.3929C115.918 98.3258 115.218 99.8881 113.818 101.08C112.418 102.275 110.522 102.872 108.13 102.872C106.041 102.872 104.426 102.364 103.28 101.348M173.648 113.161H136.995V123.832H173.648V113.161Z" fill="black"/>
|
||||
<path d="M31.8439 57.0127C35.1525 54.2194 36.9097 50.4082 37.1121 45.579H25.9642C25.8115 47.4091 25.0597 48.819 23.7111 49.8103C22.3611 50.8 20.6428 51.2964 18.5566 51.2964C16.2662 51.2964 14.509 50.6988 13.2869 49.5051C12.0662 48.3114 11.4548 46.6214 11.4548 44.4364V34.528C11.4548 32.2919 12.0659 30.5906 13.2869 29.4205C14.5094 28.2518 16.2666 27.6681 18.5566 27.6681C20.6428 27.6681 22.3611 28.1753 23.7111 29.1915C25.0597 30.2093 25.8111 31.6054 25.9642 33.384H37.1121C36.9093 28.5566 35.1525 24.7455 31.8439 21.9502C28.5338 19.1569 24.1044 17.7593 18.557 17.7593C14.8401 17.7593 11.5813 18.4581 8.7827 19.8538C5.98261 21.2529 3.81827 23.1966 2.29194 25.6848C0.764103 28.1749 0 31.1221 0 34.5273V44.4357C0 47.7893 0.764103 50.7227 2.29194 53.2393C3.81827 55.7541 5.98261 57.7104 8.7827 59.108C11.5813 60.5056 14.8398 61.2045 18.557 61.2045C24.1044 61.2045 28.5341 59.8076 31.8439 57.0127ZM83.5402 60.4418V50.152H71.4754V18.5201H47.6502V28.8098H60.0203V50.152H46.122V60.4418H83.5402ZM70.2159 10.2894C71.4631 9.22194 72.0869 7.77316 72.0869 5.94453C72.0869 4.1159 71.4631 2.66712 70.2159 1.59967C68.9669 0.533723 67.3002 0 65.2141 0C63.1264 0 61.4579 0.533723 60.2122 1.59967C58.9632 2.66712 58.3413 4.1159 58.3413 5.94453C58.3413 7.77316 58.9632 9.22194 60.2122 10.2894C61.4579 11.3553 63.1261 11.8891 65.2141 11.8891C67.3002 11.8891 68.9669 11.3553 70.2159 10.2894Z" fill="black"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_949_1183">
|
||||
<rect width="174" height="124" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,32 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte'
|
||||
import Hero from "./components/Hero/Hero.svelte";
|
||||
import Services from "./components/Services/Services.svelte";
|
||||
import Footer from "./components/Footer/Footer.svelte";
|
||||
import "./styles/App.css";
|
||||
import Header from "./components/Header/Header.svelte";
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem('theme')
|
||||
if (saved) {
|
||||
document.documentElement.setAttribute('data-theme', saved)
|
||||
return
|
||||
}
|
||||
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
const theme = prefersDark ? 'dark' : 'light'
|
||||
document.documentElement.setAttribute('data-theme', theme)
|
||||
localStorage.setItem('theme', theme)
|
||||
} catch (e) {
|
||||
document.documentElement.setAttribute('data-theme', 'light')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div class="app">
|
||||
<Header />
|
||||
<main>
|
||||
<!-- <Hero /> -->
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
background-color: var(--button-color);
|
||||
color: var(--button-text-color);
|
||||
padding: var(--button-padding);
|
||||
border-radius: var(--button-radius);
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
opacity: 0.92;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.button:focus-visible {
|
||||
outline: 2px solid rgba(255, 255, 255, 0.85);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<script>
|
||||
import './Button.css'
|
||||
|
||||
export let color = '#1343F0'
|
||||
export let text = 'Button'
|
||||
export let textColor = '#ffffff'
|
||||
export let round = '8px'
|
||||
export let padding = '8px 24px'
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="button"
|
||||
style={`--button-color: ${color}; --button-text-color: ${textColor}; --button-radius: ${round}; --button-padding: ${padding};`}
|
||||
>
|
||||
{text}
|
||||
</button>
|
||||
@@ -0,0 +1,203 @@
|
||||
p, a, h4 {
|
||||
font-size: 0.7rem;
|
||||
margin: 0;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: var(--surface);
|
||||
color: var(--text-color);
|
||||
padding: 60px 20px 20px;
|
||||
}
|
||||
|
||||
.footer-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10rem;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto 40px;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
flex: 0 0 auto;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-social-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.footer-section-info-container {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 40px;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
margin-right: 100px;
|
||||
}
|
||||
|
||||
.footer-section-info h4,
|
||||
.footer-section-info p,
|
||||
.footer-section-info a,
|
||||
.footer-section-info li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.footer-logo-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-section h3,
|
||||
.footer-section h4 {
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.footer-logo {
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
transition: background-color 0.2s ease, transform 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-logo-mask {
|
||||
background-color: var(--text-color);
|
||||
-webkit-mask-image: url('/images/icons/logo-nero.svg');
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-image: url('/images/icons/logo-nero.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: block;
|
||||
background-color: var(--text-color);
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
transition: background-color 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.icon-facebook { -webkit-mask-image: url('./assets/facebook.svg'); mask-image: url('./assets/facebook.svg'); }
|
||||
.icon-instagram { -webkit-mask-image: url('./assets/instagram.svg'); mask-image: url('./assets/instagram.svg'); }
|
||||
.icon-linkedin { -webkit-mask-image: url('./assets/linkedin.svg'); mask-image: url('./assets/linkedin.svg'); }
|
||||
.icon-tiktok { -webkit-mask-image: url('./assets/tiktok.svg'); mask-image: url('./assets/tiktok.svg'); }
|
||||
|
||||
.footer-links a:hover .social-icon,
|
||||
.footer-links a:focus-visible .social-icon {
|
||||
background-color: var(--primary-color);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.footer-section-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-section-info ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.footer-section-info li {
|
||||
margin: 0 0 8px 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.footer-section-info p {
|
||||
display: block;
|
||||
margin: 0;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.footer-section-info a {
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
.footer-section-info a:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
border-top: 1px solid rgba(127, 127, 127, 0.28);
|
||||
padding-top: 20px;
|
||||
text-align: center;
|
||||
color: var(--muted-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer {
|
||||
padding: 40px 20px 20px;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.footer-section,
|
||||
.footer-section-info-container,
|
||||
.footer-section-info h4,
|
||||
.footer-section-info p,
|
||||
.footer-section-info a,
|
||||
.footer-section-info li {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.footer-section-info-container {
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
<script>
|
||||
import "./Footer.css";
|
||||
import ThemeToggle from "../ThemeToggle/ThemeToggle.svelte";
|
||||
const year = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<footer class="footer" id="contact">
|
||||
<div class="footer-container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<div class="footer-logo-section">
|
||||
<h3>CIMA PROGETTI Srls</h3>
|
||||
<span
|
||||
class="footer-logo footer-logo-mask"
|
||||
aria-hidden="true"
|
||||
></span>
|
||||
</div>
|
||||
<div class="footer-social-section">
|
||||
<p>Scoprirci anche sui nostri canali social</p>
|
||||
<div class="footer-links">
|
||||
<a
|
||||
href="https://www.facebook.com/cimaprogetti"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<span class="social-icon icon-facebook" aria-hidden="true"></span>
|
||||
<span class="sr-only">Facebook</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.instagram.com/cimaprogetti"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<span class="social-icon icon-instagram" aria-hidden="true"></span>
|
||||
<span class="sr-only">Instagram</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.linkedin.com/company/cimaprogetti"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<span class="social-icon icon-linkedin" aria-hidden="true"></span>
|
||||
<span class="sr-only">LinkedIn</span>
|
||||
</a>
|
||||
<a
|
||||
href="https://www.tiktok.com/@cimaprogetti"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
<span class="social-icon icon-tiktok" aria-hidden="true"></span>
|
||||
<span class="sr-only">TikTok</span>
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section-info-container">
|
||||
<div class="footer-section-info">
|
||||
<h4>LEGALS</h4>
|
||||
<ul>
|
||||
<li><p>Via Via Otranto 39 <br /> 00192 Roma, Italia</p></li>
|
||||
<li><p>REA RM-1778381</p></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section-info">
|
||||
<h4>SUPPORTO</h4>
|
||||
<ul>
|
||||
<li><a href="#privacy-policy">Privacy Policy</a></li>
|
||||
<li><a href="#terms-of-service">Termini e Condizioni</a></li>
|
||||
<li><a href="#faq">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-section-info">
|
||||
<h4>CONTATTI</h4>
|
||||
<ul>
|
||||
<li><a href="mailto:info@cimaprogetti.it">info@cimaprogetti.it</a></li>
|
||||
<li><a href="tel:+393382451171">+39 338 245 1171</a></li>
|
||||
<li><a href="mailto:cima.progetti@pec-societa.it">cima.progetti@pec-societa.it</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© {year} CIMA PROGETTI. soluzioni digitali.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M22 11C22 4.95 17.05 0 11 0C4.95 0 0 4.95 0 11C0 16.5 3.9875 21.0375 9.2125 21.8625V14.1625H6.4625V11H9.2125V8.525C9.2125 5.775 10.8625 4.2625 13.3375 4.2625C14.575 4.2625 15.8125 4.5375 15.8125 4.5375V7.2875H14.4375C13.0625 7.2875 12.65 8.1125 12.65 8.9375V11H15.675L15.125 14.1625H12.5125V22C18.0125 21.175 22 16.5 22 11Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 452 B |
@@ -0,0 +1,5 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 1.89759C13.2831 1.89759 13.6627 1.89759 14.8012 1.89759C15.8133 1.89759 16.3193 2.1506 16.6988 2.27711C17.2048 2.53012 17.5843 2.65663 17.9639 3.03615C18.3434 3.41566 18.5964 3.79518 18.7229 4.30121C18.8494 4.68072 18.9759 5.18675 19.1024 6.1988C19.1024 7.33735 19.1024 7.59036 19.1024 10.5C19.1024 13.4096 19.1024 13.6627 19.1024 14.8012C19.1024 15.8133 18.8494 16.3193 18.7229 16.6988C18.4699 17.2048 18.3434 17.5843 17.9639 17.9639C17.5843 18.3434 17.2048 18.5964 16.6988 18.7229C16.3193 18.8494 15.8133 18.9759 14.8012 19.1024C13.6627 19.1024 13.4096 19.1024 10.5 19.1024C7.59036 19.1024 7.33735 19.1024 6.1988 19.1024C5.18675 19.1024 4.68072 18.8494 4.30121 18.7229C3.79518 18.4699 3.41566 18.3434 3.03615 17.9639C2.65663 17.5843 2.40361 17.2048 2.27711 16.6988C2.1506 16.3193 2.0241 15.8133 1.89759 14.8012C1.89759 13.6627 1.89759 13.4096 1.89759 10.5C1.89759 7.59036 1.89759 7.33735 1.89759 6.1988C1.89759 5.18675 2.1506 4.68072 2.27711 4.30121C2.53012 3.79518 2.65663 3.41566 3.03615 3.03615C3.41566 2.65663 3.79518 2.40361 4.30121 2.27711C4.68072 2.1506 5.18675 2.0241 6.1988 1.89759C7.33735 1.89759 7.71687 1.89759 10.5 1.89759ZM10.5 0C7.59036 0 7.33735 0 6.1988 0C5.06024 0 4.30121 0.25301 3.66868 0.50602C3.03615 0.75904 2.40362 1.13856 1.77109 1.77109C1.13856 2.40362 0.88554 2.90964 0.50602 3.66868C0.25301 4.30121 0.12651 5.06024 0 6.1988C0 7.33735 0 7.71687 0 10.5C0 13.4096 0 13.6627 0 14.8012C0 15.9398 0.25301 16.6988 0.50602 17.3313C0.75904 17.9639 1.13856 18.5964 1.77109 19.2289C2.40362 19.8614 2.90964 20.1145 3.66868 20.494C4.30121 20.747 5.06024 20.8735 6.1988 21C7.33735 21 7.71687 21 10.5 21C13.2831 21 13.6627 21 14.8012 21C15.9398 21 16.6988 20.747 17.3313 20.494C17.9639 20.241 18.5964 19.8614 19.2289 19.2289C19.8614 18.5964 20.1145 18.0904 20.494 17.3313C20.747 16.6988 20.8735 15.9398 21 14.8012C21 13.6627 21 13.2831 21 10.5C21 7.71687 21 7.33735 21 6.1988C21 5.06024 20.747 4.30121 20.494 3.66868C20.241 3.03615 19.8614 2.40362 19.2289 1.77109C18.5964 1.13856 18.0904 0.88554 17.3313 0.50602C16.6988 0.25301 15.9398 0.12651 14.8012 0C13.6627 0 13.4096 0 10.5 0Z" fill="black"/>
|
||||
<path d="M10.5003 5.06006C7.46417 5.06006 5.06055 7.46368 5.06055 10.4998C5.06055 13.5359 7.46417 15.9396 10.5003 15.9396C13.5364 15.9396 15.9401 13.5359 15.9401 10.4998C15.9401 7.46368 13.5364 5.06006 10.5003 5.06006ZM10.5003 14.042C8.60271 14.042 6.95814 12.5239 6.95814 10.4998C6.95814 8.60222 8.47621 6.95765 10.5003 6.95765C12.3979 6.95765 14.0425 8.47572 14.0425 10.4998C14.0425 12.3974 12.3979 14.042 10.5003 14.042Z" fill="black"/>
|
||||
<path d="M16.0659 6.19907C16.7645 6.19907 17.3309 5.63268 17.3309 4.93401C17.3309 4.23533 16.7645 3.66895 16.0659 3.66895C15.3672 3.66895 14.8008 4.23533 14.8008 4.93401C14.8008 5.63268 15.3672 6.19907 16.0659 6.19907Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19.4479 0H1.55207C0.69566 0 0 0.67484 0 1.50393V19.4961C0 20.3279 0.69566 21 1.55207 21H19.4479C20.3043 21 21 20.3252 21 19.4961V1.50393C21 0.67209 20.3043 0 19.4479 0ZM6.36624 17.5817H3.19559V8.09811H6.36624V17.5817ZM4.78092 6.80352H4.76152C3.69724 6.80352 3.0099 6.07634 3.0099 5.16461C3.0099 4.25289 3.71941 3.52571 4.80309 3.52571C5.88676 3.52571 6.55471 4.2336 6.57688 5.16461C6.57688 6.07358 5.88953 6.80352 4.78369 6.80352H4.78092ZM17.8044 17.5817H14.6338V12.508C14.6338 11.2327 14.1737 10.3623 13.0263 10.3623C12.1505 10.3623 11.6294 10.949 11.3994 11.5164C11.3162 11.7202 11.294 12.0012 11.294 12.2849V17.5817H8.1234C8.1234 17.5817 8.16497 8.9878 8.1234 8.09811H11.294V9.4423C11.7153 8.795 12.4692 7.87775 14.1515 7.87775C16.2385 7.87775 17.8044 9.2329 17.8044 12.1472V17.5845V17.5817Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 924 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="18" height="22" viewBox="0 0 18 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.40205 16.9406C4.42161 16.9586 4.4422 16.9769 4.46141 16.9948C4.64191 17.1254 4.77334 17.3088 4.94698 17.4498C5.48642 17.885 6.09209 18.122 6.78732 18.1648C8.4341 18.2664 9.8689 17.0194 10.0552 15.3806C10.0641 15.3008 10.0607 15.2203 10.0607 15.1409V0.333791C10.0609 0.112021 10.171 0.00113143 10.3908 0.00113143C11.1358 0.00113143 11.8811 0.000441417 12.6254 0.00182142C12.6947 0.00182142 12.7682 -0.0113036 12.8317 0.0329114C12.8365 0.0363714 12.8406 0.0405115 12.8454 0.0425815C12.8807 0.0798915 12.891 0.127221 12.9017 0.175581C13.1872 1.5055 13.8828 2.56703 14.973 3.36809C15.0416 3.41853 15.0986 3.48071 15.1641 3.53425C15.2115 3.57432 15.2588 3.61577 15.3069 3.65584C15.3405 3.65342 15.3648 3.67415 15.3909 3.689C15.9417 4.00611 16.5309 4.21407 17.1554 4.31839C17.3994 4.35846 17.6458 4.38575 17.8939 4.38333C17.9975 4.38229 18.0006 4.38575 17.9999 4.48489V4.62617L17.9944 5.17818L17.9999 5.18301V8.99006L17.9248 8.98039C17.2066 8.88505 16.5072 8.70819 15.8315 8.44289C15.185 8.18831 14.5763 7.86463 14.0042 7.46842C13.9689 7.44389 13.9325 7.42178 13.8769 7.38655V7.54683C13.8769 10.0419 13.8793 12.537 13.8762 15.031C13.8755 16.3606 13.5334 17.5959 12.8282 18.7231C11.9769 20.0844 10.7961 21.0423 9.2944 21.5902C8.3837 21.9246 7.4403 22.0527 6.47162 21.9805C4.83785 21.8589 3.4244 21.2306 2.22061 20.1155C2.18869 20.0862 2.1609 20.0516 2.13173 20.0188C2.07374 19.9677 2.01746 19.9169 1.96015 19.8661C1.52846 19.5072 1.2282 19.0419 0.948178 18.5662C0.516488 17.8336 0.236478 17.0415 0.0995578 16.2003C0.0220078 15.7192 -0.0181421 15.2342 0.00793786 14.7478C0.0937279 13.1795 0.617728 11.7795 1.62214 10.5694C2.46528 9.5549 3.51842 8.84567 4.75859 8.4194C5.83335 8.04875 6.75232 8.03424 7.8367 8.1548C7.8909 8.16136 7.9046 8.18589 7.9036 8.23287C7.9022 8.25981 7.9036 8.28607 7.9036 8.31335C7.9036 9.4958 7.9036 10.6779 7.9029 11.8603C7.9029 11.9035 7.9142 11.9498 7.8868 11.9967C7.7317 11.967 7.58 11.9204 7.4222 11.8983C6.51554 11.7701 5.69677 11.9836 4.97786 12.5539C4.34611 13.0552 3.95766 13.7132 3.82726 14.5101C3.68863 15.3564 3.86261 16.1413 4.34543 16.8515C4.36602 16.8802 4.38352 16.9102 4.40205 16.9406Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
@@ -0,0 +1,87 @@
|
||||
.header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.logo-img{
|
||||
width: 98px;
|
||||
height: 70px;
|
||||
margin-right: auto;
|
||||
transition: opacity 0.2s, transform 0.2s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.logo-mask {
|
||||
background-color: var(--text-color);
|
||||
-webkit-mask-image: url('/images/icons/logo-nero.svg');
|
||||
-webkit-mask-repeat: no-repeat;
|
||||
-webkit-mask-position: center;
|
||||
-webkit-mask-size: contain;
|
||||
mask-image: url('/images/icons/logo-nero.svg');
|
||||
mask-repeat: no-repeat;
|
||||
mask-position: center;
|
||||
mask-size: contain;
|
||||
}
|
||||
|
||||
.logo-img:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
text-decoration: none;
|
||||
color: var(--text-color);
|
||||
font-weight: 500;
|
||||
transition: color 0.2s, transform 0.2s;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.nav a:hover {
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav a:hover,
|
||||
.nav a.active {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/*Temporaneo*/
|
||||
@media (max-width: 768px) {
|
||||
.header-container {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
|
||||
.nav {
|
||||
gap: 15px;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.nav a {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
<script>
|
||||
import './Header.css'
|
||||
import Button from '../Button/Button.svelte'
|
||||
|
||||
let activeNav = 'home'
|
||||
|
||||
function navigate(section) {
|
||||
activeNav = section
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="header" id="home">
|
||||
<div class="header-container">
|
||||
<div class="logo">
|
||||
<a href="/" aria-label="CIMA PROGETTI home">
|
||||
<span class="logo-img logo-mask" aria-hidden="true"></span>
|
||||
</a>
|
||||
</div>
|
||||
<nav class="nav">
|
||||
<a
|
||||
href="#services"
|
||||
class:active={activeNav === 'services'}
|
||||
on:click|preventDefault={() => navigate('services')}
|
||||
aria-current={activeNav === 'services' ? 'page' : undefined}
|
||||
>
|
||||
Servizi
|
||||
</a>
|
||||
<a
|
||||
href="#method"
|
||||
class:active={activeNav === 'method'}
|
||||
on:click|preventDefault={() => navigate('method')}
|
||||
aria-current={activeNav === 'method' ? 'page' : undefined}
|
||||
>
|
||||
Il metodo
|
||||
</a>
|
||||
<a
|
||||
href="#projects"
|
||||
class:active={activeNav === 'projects'}
|
||||
on:click|preventDefault={() => navigate('projects')}
|
||||
aria-current={activeNav === 'projects' ? 'page' : undefined}
|
||||
>
|
||||
Progetti
|
||||
</a>
|
||||
<a
|
||||
href="#us"
|
||||
class:active={activeNav === 'us'}
|
||||
on:click|preventDefault={() => navigate('us')}
|
||||
aria-current={activeNav === 'us' ? 'page' : undefined}
|
||||
>
|
||||
Chi Siamo
|
||||
</a>
|
||||
</nav>
|
||||
<div class="header-actions">
|
||||
<Button text="Contattaci" href="#contact" />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
@@ -0,0 +1,111 @@
|
||||
.hero {
|
||||
background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
|
||||
color: white;
|
||||
padding: 120px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 48px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 24px;
|
||||
margin: 0 0 40px 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: #ff6b35;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 40px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #e55a24;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}.hero {
|
||||
background: linear-gradient(135deg, #0066cc 0%, #0052a3 100%);
|
||||
color: white;
|
||||
padding: 120px 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 48px;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 24px;
|
||||
margin: 0 0 40px 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: #ff6b35;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 40px;
|
||||
font-size: 18px;
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.cta-button:hover {
|
||||
background-color: #e55a24;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero {
|
||||
padding: 80px 20px;
|
||||
}
|
||||
|
||||
.hero-content h1 {
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.hero-content p {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
padding: 12px 30px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
<script>
|
||||
import './Hero.css'
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-container">
|
||||
<div class="hero-content">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,68 @@
|
||||
.services {
|
||||
padding: 80px 20px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.services-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.services h2 {
|
||||
text-align: center;
|
||||
font-size: 36px;
|
||||
margin-bottom: 50px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: #f9f9f9;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 48px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 20px;
|
||||
margin: 15px 0;
|
||||
color: #0066cc;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.services {
|
||||
padding: 60px 20px;
|
||||
}
|
||||
|
||||
.services h2 {
|
||||
font-size: 28px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
<script>
|
||||
import './Services.css'
|
||||
|
||||
const services = [
|
||||
{
|
||||
id: 1,
|
||||
title: 'Consulenza',
|
||||
description: 'Supporto strategico per la crescita della tua azienda',
|
||||
icon: '💼'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: 'Sviluppo Web',
|
||||
description: 'Siti e applicazioni web moderne e performanti',
|
||||
icon: '🚀'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: 'Analisi Dati',
|
||||
description: 'Insights approfonditi dai tuoi dati aziendali',
|
||||
icon: '📊'
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: 'Cloud Solutions',
|
||||
description: 'Migrazione e gestione dell\'infrastruttura cloud',
|
||||
icon: '☁️'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
|
||||
<section class="services">
|
||||
<div class="services-container">
|
||||
<h2>I Nostri Servizi</h2>
|
||||
<div class="services-grid">
|
||||
{#each services as service (service.id)}
|
||||
<div class="service-card">
|
||||
<div class="icon">{service.icon}</div>
|
||||
<h3>{service.title}</h3>
|
||||
<p>{service.description}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -0,0 +1,8 @@
|
||||
.theme-toggle {
|
||||
background: transparent ;
|
||||
color: var(--text-color);
|
||||
padding: 8px 12px;
|
||||
border-style: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, color 0.2s, border-color 0.2s;
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import "./ThemeToggle.css";
|
||||
|
||||
let theme = "light";
|
||||
|
||||
function applyTheme(t) {
|
||||
theme = t;
|
||||
try {
|
||||
document.documentElement.setAttribute("data-theme", t);
|
||||
localStorage.setItem("theme", t);
|
||||
} catch (e) {
|
||||
// ignore in SSR or restricted environments
|
||||
}
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
applyTheme(theme === "dark" ? "light" : "dark");
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
try {
|
||||
const saved = localStorage.getItem("theme");
|
||||
if (saved) {
|
||||
applyTheme(saved);
|
||||
return;
|
||||
}
|
||||
const prefersDark =
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches;
|
||||
applyTheme(prefersDark ? "dark" : "light");
|
||||
} catch (e) {
|
||||
// safe fallback
|
||||
applyTheme("light");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<button
|
||||
class="theme-toggle"
|
||||
on:click={toggle}
|
||||
aria-pressed={theme === "dark"}
|
||||
title="Toggle dark mode"
|
||||
>
|
||||
{#if theme === "dark"}
|
||||
○
|
||||
{:else}
|
||||
●
|
||||
{/if}
|
||||
</button>
|
||||
@@ -0,0 +1,9 @@
|
||||
import './styles/global.css'
|
||||
import { mount } from 'svelte'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
@@ -0,0 +1,26 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="contacts-page">
|
||||
<h1>Contatti</h1>
|
||||
<p>Pagina contatti - contenuto da aggiungere</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.contacts-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 40px 20px;
|
||||
min-height: 60vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="error-page">
|
||||
<h1>403 - Accesso Negato</h1>
|
||||
<p>Non hai i permessi per accedere a questa risorsa.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="error-page">
|
||||
<h1>404 - Pagina Non Trovata</h1>
|
||||
<p>La pagina che stai cercando non esiste.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="error-page">
|
||||
<h1>500 - Errore del Server</h1>
|
||||
<p>Si è verificato un errore interno del server. Riprova più tardi.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,28 @@
|
||||
<script>
|
||||
</script>
|
||||
|
||||
<div class="error-page">
|
||||
<h1>Errore</h1>
|
||||
<p>Si è verificato un errore. Per favore, riprova più tardi.</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.error-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 60vh;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,9 @@
|
||||
.app {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
:root {
|
||||
--primary-color: #0066cc;
|
||||
--text-color: #111827;
|
||||
--muted-color: #6b7280;
|
||||
--surface: #ffffff;
|
||||
--background: rgba(246, 249, 255, 0.5);
|
||||
}
|
||||
|
||||
/* Dark theme overrides (toggle by setting attribute on <html>) */
|
||||
:root[data-theme='dark'], html[data-theme='dark'] {
|
||||
--primary-color: #4983F2;
|
||||
--text-color: #e6eef8;
|
||||
--muted-color: #9ca3af;
|
||||
--surface: #000;
|
||||
--background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Helvetica, 'Segoe UI';
|
||||
color: var(--text-color);
|
||||
background-color: var(--surface);
|
||||
background-image: url('/images/background/paper.png');
|
||||
background-repeat: repeat;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Background overlay layer that follows theme color */
|
||||
body::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background-color: var(--background);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* Reusable theme asset helpers:
|
||||
add theme-light-only / theme-dark-only to any paired element (images, icons, labels). */
|
||||
.theme-light-only {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme-dark-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .theme-light-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .theme-dark-only {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.theme-difference {
|
||||
filter: invert(var(--icon-invert));
|
||||
transition: filter 0.3s ease;
|
||||
}
|
||||
|
||||
:root {
|
||||
--icon-invert: 0;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
--icon-invert: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: 'IBM Plex Mono', monospace;
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
preprocess: vitePreprocess()
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [svelte()],
|
||||
server: {
|
||||
port: 5173,
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user