Initial commit
This commit is contained in:
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user