iniziali
iniziali Signed-off-by: PanSi21 <pansi21@noreply.localhost>
This commit is contained in:
parent
735ec8bb04
commit
853a807a4e
15 changed files with 591 additions and 0 deletions
459
index.html
Normal file
459
index.html
Normal file
|
|
@ -0,0 +1,459 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="it">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#4D45FF" />
|
||||
|
||||
<!-- SEO -->
|
||||
<title>ESysLab - Innovazione Embedded, Automazione e Formazione</title>
|
||||
<meta name="description"
|
||||
content="ESysLab - Soluzioni embedded innovative: libri multimediali interattivi, robotica didattica e corsi di formazione per aziende e scuole." />
|
||||
<link rel="canonical" href="https://esyslab.it/" />
|
||||
|
||||
<!-- Open Graph (Facebook, LinkedIn, WhatsApp, Telegram) -->
|
||||
<meta property="og:site_name" content="ESysLab" />
|
||||
<meta property="og:title" content="ESysLab - Innovazione Embedded, Automazione e Formazione" />
|
||||
<meta property="og:description"
|
||||
content="Libri multimediali interattivi, robotica didattica e corsi per scuole e aziende. Scopri ESysLab." />
|
||||
<meta property="og:url" content="https://esyslab.it/" />
|
||||
<meta property="og:image" content="https://esys.pansi21.xyz/card.png" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="ESysLab - Innovazione Embedded, Automazione e Formazione" />
|
||||
<meta name="twitter:description"
|
||||
content="Libri multimediali interattivi, robotica didattica e corsi per scuole e aziende. Scopri ESysLab." />
|
||||
<meta name="twitter:image" content="https://esys.pansi21.xyz/card.png" />
|
||||
<!-- Se hai un account Twitter ufficiale, aggiungilo -->
|
||||
<!-- <meta name="twitter:site" content="@tuoaccount" /> -->
|
||||
|
||||
<!-- favicon https://favicon.pub/ -->
|
||||
<link rel="icon" href="../ico/favicon.ico" sizes="any">
|
||||
<link rel="icon" type="image/png" href="../ico/favicon-16x16.png" sizes="16x16">
|
||||
<link rel="icon" type="image/png" href="../ico/favicon-32x32.png" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="../ico/favicon-48x48.png" sizes="48x48">
|
||||
<link rel="manifest" href="../ico/site.webmanifest">
|
||||
<link rel="icon" type="image/png" href="../ico/android-chrome-192x192.png" sizes="192x192">
|
||||
<link rel="icon" type="image/png" href="../ico/android-chrome-512x512.png" sizes="512x512">
|
||||
<link rel="apple-touch-icon" href="../ico/apple-touch-icon.png">
|
||||
<link rel="mask-icon" href="../ico/safari-pinned-tab.svg" color="#5bbad5">
|
||||
<link rel="icon" href="../ico/favicon.svg" type="image/svg+xml">
|
||||
|
||||
<!-- Structured Data (SEO avanzato per Google) -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "ESysLab",
|
||||
"url": "https://esyslab.it",
|
||||
"logo": "https://esys.pansi21.xyz/card.png",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"email": "info@esyslab.it",
|
||||
"contactType": "customer support",
|
||||
"areaServed": "IT",
|
||||
"availableLanguage": ["Italian", "English"]
|
||||
},
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Via Don Giovanni Bosco 2",
|
||||
"addressLocality": "Agrigento",
|
||||
"postalCode": "92025",
|
||||
"addressCountry": "IT"
|
||||
},
|
||||
"sameAs": [
|
||||
"https://www.linkedin.com/company/esyslab",
|
||||
"https://twitter.com/esyslab"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
|
||||
<link href="style.css" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<!-- Navigation -->
|
||||
<nav id="navbar">
|
||||
<div class="nav-container">
|
||||
<!-- original logo
|
||||
<a href="#home" class="logo">MINIMAL</a>
|
||||
-->
|
||||
<a href="index.html" class="logo">
|
||||
<img src="logo.png" alt="Logo" class="_img-logo">
|
||||
</a>
|
||||
|
||||
|
||||
<div class="menu-toggle" id="menuToggle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<ul class="nav-links" id="navLinks">
|
||||
<li><a href="#home" class="nav-link">HOME</a></li>
|
||||
<li><a href="#services" class="nav-link">SERVIZI</a></li>
|
||||
<li><a href="about.html" class="nav-link">ABOUT</a></li>
|
||||
<li><a href="contact.html" class="nav-link">CONTATTI</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Section 1: Hero -->
|
||||
<section id="home" class="hero">
|
||||
<!-- Animated Objects (Reduced) -->
|
||||
<div class="floating-objects">
|
||||
<div class="floating-circle"></div>
|
||||
<div class="floating-circle"></div>
|
||||
<div class="floating-square"></div>
|
||||
<div class="floating-line"></div>
|
||||
</div>
|
||||
|
||||
<div class="hero-decoration"></div>
|
||||
<div class="hero-content">
|
||||
<h1>Embedded System Laboratory</h1>
|
||||
<!-- original subtitle
|
||||
<p class="subtitle">Embedded System Laboratory</p>
|
||||
-->
|
||||
<a href="#services" class="cta-button">ESPLORA</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Section 2: Services - Asymmetric Grid -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<div class="services-header fade-in">
|
||||
<h2>COSA FACCIAMO</h2>
|
||||
</div>
|
||||
|
||||
<div class="asymmetric-grid fade-in">
|
||||
<div class="service-large">
|
||||
<h3>Brand Identity</h3>
|
||||
<p>Creating distinctive visual languages that communicate your essence through simplicity. We
|
||||
develop comprehensive brand systems that stand the test of time.</p>
|
||||
<a href="#contact" class="service-tag">View Work</a>
|
||||
</div>
|
||||
<div class="service-small">
|
||||
<div class="service-number">01</div>
|
||||
<h4>Strategy First</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="asymmetric-grid reverse fade-in">
|
||||
<div class="service-small">
|
||||
<div class="service-number">02</div>
|
||||
<h4>Digital Native</h4>
|
||||
</div>
|
||||
<div class="service-large">
|
||||
<h3>Web Design</h3>
|
||||
<p>Crafting digital experiences that prioritize clarity and usability. Every pixel serves a purpose
|
||||
in our pursuit of functional beauty.</p>
|
||||
<a href="#contact" class="service-tag">Explore</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="asymmetric-grid fade-in">
|
||||
<div class="service-large">
|
||||
<h3>Art Direction</h3>
|
||||
<p>Guiding visual narratives with restraint and intention. We believe the most powerful statements
|
||||
are often the quietest ones.</p>
|
||||
<a href="#contact" class="service-tag">Discover</a>
|
||||
</div>
|
||||
<div class="service-small">
|
||||
<div class="service-number">03</div>
|
||||
<h4>Vision Focused</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Section 2.5: Services - Prodotti -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<div class="services-header fade-in">
|
||||
<h2>COSA FACCIAMO</h2>
|
||||
</div>
|
||||
|
||||
<!-- Prodotto 1 -->
|
||||
<div class="asymmetric-grid fade-in">
|
||||
<div class="service-large">
|
||||
<h3>Libro Multimediale Interattivo</h3>
|
||||
<p>Il nostro progetto di punta: un libro innovativo che unisce tecnologia ed esperienza sensoriale.
|
||||
Pensato per musei, scuole e spazi educativi, rende la conoscenza accessibile e coinvolgente.</p>
|
||||
<a href="prodotti/book.html" class="service-tag">Scopri di più</a>
|
||||
</div>
|
||||
<div class="service-small">
|
||||
<div class="service-number">01</div>
|
||||
<h4>Esperienza Immersiva</h4>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Prodotto 2 -->
|
||||
<div class="asymmetric-grid reverse fade-in">
|
||||
<div class="service-small">
|
||||
<div class="service-number">02</div>
|
||||
<h4>Apprendimento Attivo</h4>
|
||||
</div>
|
||||
<div class="service-large">
|
||||
<h3>Robot Didattici</h3>
|
||||
<p>Progettiamo e realizziamo piccoli robot educativi personalizzati, ideali per attività
|
||||
laboratoriali
|
||||
nelle scuole e per la divulgazione scientifica interattiva.</p>
|
||||
<a href="contact.html" class="service-tag">Esplora</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prodotto 3 -->
|
||||
<div class="asymmetric-grid fade-in">
|
||||
<div class="service-large">
|
||||
<h3>Corsi di Formazione</h3>
|
||||
<p>Organizziamo corsi pratici di formazione.
|
||||
Offriamo soluzioni formative su misura in ambito embedded systems, elettronica e programmazione.
|
||||
</p>
|
||||
<a href="contact.html" class="service-tag">Richiedi info</a>
|
||||
</div>
|
||||
<div class="service-small">
|
||||
<div class="service-number">03</div>
|
||||
<h4>Conoscenza Condivisa</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- Section 3: About - Mixed Layouts -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<!-- Introduction with large quote -->
|
||||
<div class="about-intro fade-in">
|
||||
<div class="quote-block">
|
||||
<span class="quote-mark">"</span>
|
||||
<h3>Ma mandali tutti a fanculo, tanto moriranno tutti.</h3>
|
||||
<div class="quote-author">
|
||||
<span class="author-line"></span>
|
||||
<p>Benedetto (non Sedicesimo)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="black-line"></div>
|
||||
|
||||
<!-- Stats Section -->
|
||||
<div class="stats-grid fade-in">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">95%</div>
|
||||
<div class="stat-label">Clienti Soddisfatti</div>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">90+</div>
|
||||
<div class="stat-label">Progetti Completati</div>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">30</div>
|
||||
<div class="stat-label">Anni di Esperienza</div>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-number">∞</div>
|
||||
<div class="stat-label">Possibilità</div>
|
||||
<div class="stat-decoration"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Philosophy Section with offset layout -->
|
||||
<div class="philosophy-section fade-in">
|
||||
<div class="philosophy-header">
|
||||
<h2>Filosofia</h2>
|
||||
<div class="header-decoration"></div>
|
||||
</div>
|
||||
<div class="philosophy-content">
|
||||
<div class="philosophy-main">
|
||||
<p class="lead-text">Crediamo nella forza della semplicità. Ogni progetto, ogni sistema, ogni
|
||||
dettaglio ha un ruolo preciso nel rendere la tecnologia utile, accessibile e duratura.</p>
|
||||
</div>
|
||||
<div class="philosophy-points">
|
||||
<div class="point-item">
|
||||
<span class="point-number">01</span>
|
||||
<h4>Chiarezza e Affidabilità</h4>
|
||||
<p>Creiamo soluzioni embedded chiare e robuste, eliminando la complessità inutile per
|
||||
offrire solo ciò che serve davvero.</p>
|
||||
</div>
|
||||
<div class="point-item">
|
||||
<span class="point-number">02</span>
|
||||
<h4>Innovazione Accessibile</h4>
|
||||
<p>Progettiamo sistemi che rendono la tecnologia intuitiva e vicina alle persone, che si
|
||||
tratti di musei, scuole o aziende.</p>
|
||||
</div>
|
||||
<div class="point-item">
|
||||
<span class="point-number">03</span>
|
||||
<h4>Personalizzazione e Valore</h4>
|
||||
<p>Ogni scelta è pensata per rispondere alle esigenze specifiche dei nostri clienti,
|
||||
trasformando l’idea in uno strumento concreto e significativo.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Process Timeline -->
|
||||
<div class="process-timeline fade-in">
|
||||
<h2 class="section-subtitle">Il nostro processo</h2>
|
||||
<div class="timeline-container">
|
||||
<div class="timeline-line"></div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>Scoprire</h4>
|
||||
<p>Analizziamo le esigenze del cliente per comprendere obiettivi, contesto e sfide
|
||||
specifiche.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>Progettare</h4>
|
||||
<p>Semplifichiamo la complessità, definendo l’architettura embedded più adatta e
|
||||
sostenibile.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>Sviluppare</h4>
|
||||
<p>Curando ogni dettaglio, realizziamo soluzioni affidabili, innovative e su misura.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-dot"></div>
|
||||
<div class="timeline-content">
|
||||
<h4>Consegnare</h4>
|
||||
<p>Trasformiamo l’idea in un sistema concreto, pronto per essere utilizzato e valorizzato.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Values Grid -->
|
||||
<div class="values-section fade-in">
|
||||
<div class="values-header">
|
||||
<div class="black-square"></div>
|
||||
<h2>Valori Fondamentali</h2>
|
||||
<div class="black-square"></div>
|
||||
</div>
|
||||
<div class="values-grid">
|
||||
<div class="value-card">
|
||||
<div class="value-icon">—</div>
|
||||
<h4>Semplicità</h4>
|
||||
</div>
|
||||
<div class="value-card black">
|
||||
<div class="value-icon">+</div>
|
||||
<h4>Innovazione</h4>
|
||||
</div>
|
||||
<div class="value-card black">
|
||||
<div class="value-icon">○</div>
|
||||
<h4>Affidabilità</h4>
|
||||
</div>
|
||||
<div class="value-card">
|
||||
<div class="value-icon">□</div>
|
||||
<h4>Equilibrio</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- Section 4: Contact -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<div class="contact-grid fade-in">
|
||||
<div class="contact-info">
|
||||
<h2>CONTATTI</h2>
|
||||
<div class="info-item">
|
||||
<h4>Email</h4>
|
||||
<p><a
|
||||
href="mailto:info@esyslab.it?subject=Richiesta%20informazioni&body=Buongiorno,%0D%0Ascrivo%20per%20avere%20maggiori%20dettagli%20sui%20vostri%20prodotti.">INFO@ESYSLAB.IT</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>Telefono</h4>
|
||||
<p> <a href="tel:+39 333 666 9999">+39 333 666 9999</a></p>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<h4>POSIZIONE</h4>
|
||||
<p>Agrigento, IT</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-divider"></div>
|
||||
|
||||
<div class="contact-form">
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder=" " required>
|
||||
<label>NOME</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" placeholder=" " required>
|
||||
<label>Email</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea rows="4" placeholder=" " required></textarea>
|
||||
<label>MESSAGGIO</label>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
|
||||
|
||||
<section id="_infoFooter" class="_infoContact">
|
||||
<h2>ESysLab</h2>
|
||||
|
||||
<div class="footer-container">
|
||||
<!-- Logo a sinistra -->
|
||||
<div class="footer-logo">
|
||||
<img src="logo-min.png" alt="Embedded System Laboratory Logo">
|
||||
</div>
|
||||
|
||||
<!-- Info a destra -->
|
||||
<div class="footer-info">
|
||||
<p>© 2025 Embedded System Laboratory</p>
|
||||
<p>Via Don Giovanni Bosco 2, 92025, Agrigento</p>
|
||||
<p>Mail: <a
|
||||
href="mailto:info@esyslab.it?subject=Richiesta%20informazioni&body=Buongiorno,%0D%0Ascrivo%20per%20avere%20maggiori%20dettagli%20sui%20vostri%20prodotti.">info@esyslab.it</a>
|
||||
</p>
|
||||
<p>Casella PEC: <a href="mailto:pec-bebbo@pec.esyslab.it">pec-bebbo@pec.esyslab.it</a></p>
|
||||
<p>Partita IVA. 12621321332131 | <a href="contact.html">Contattaci</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<br>
|
||||
|
||||
<p id="_designedBy">
|
||||
© 2025 ESysLab — Designed by <a href="https://pansi21.xyz" target="_blank" rel="nofollow noopener"
|
||||
style="color: #000; font-weight: 400;">PanSi21</a>
|
||||
</p>
|
||||
</footer>
|
||||
<script src="tooplate-minimal-script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue