Initial commit
This commit is contained in:
@@ -0,0 +1,271 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<header className="min-h-screen flex flex-col justify-center px-6 lg:px-8 pt-20">
|
||||
<div className="max-w-7xl mx-auto w-full grid grid-cols-1 lg:grid-cols-12 gap-8 items-end">
|
||||
<div className="lg:col-span-10">
|
||||
<h1 className="text-huge font-black uppercase mb-12">
|
||||
La{" "}
|
||||
<span className="text-primary">struttura</span> digitale del
|
||||
vostro business.
|
||||
</h1>
|
||||
<div className="flex flex-col sm:flex-row gap-6">
|
||||
<Link
|
||||
href="/contatti"
|
||||
className="bg-primary text-on-primary px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:brightness-110 active:scale-[0.98] text-center"
|
||||
>
|
||||
Inizia il Progetto
|
||||
</Link>
|
||||
<a
|
||||
href="#filosofia"
|
||||
className="border-2 border-on-background text-on-background px-10 py-5 font-bold uppercase tracking-widest text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98] text-center"
|
||||
>
|
||||
Scopri il Metodo
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Approccio / Ecosistema Integrato */}
|
||||
<section id="approccio" className="py-20 lg:py-32 px-6 lg:px-8 bg-surface-container-low">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-12 gap-12">
|
||||
<div className="md:col-span-4">
|
||||
<p className="text-primary font-bold uppercase tracking-widest text-sm mb-4">
|
||||
L'Approccio
|
||||
</p>
|
||||
<h2 className="text-3xl lg:text-4xl font-black uppercase leading-none">
|
||||
Tutto Collegato
|
||||
</h2>
|
||||
</div>
|
||||
<div className="md:col-span-7 md:col-start-6">
|
||||
<p className="text-xl lg:text-2xl leading-relaxed text-on-surface">
|
||||
Non software isolati, ma infrastrutture digitali portanti. Ogni componente dialoga con gli altri per creare un sistema unico, costruito attorno al vostro modo di lavorare.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Problema / Valore */}
|
||||
<section className="py-20 lg:py-32 px-6 lg:px-8 border-y border-outline-variant/10">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/20">
|
||||
<div className="bg-background p-8 lg:p-16 space-y-8">
|
||||
<span className="material-symbols-outlined text-error text-5xl">
|
||||
architecture
|
||||
</span>
|
||||
<h3 className="text-2xl lg:text-3xl font-black uppercase">Prima</h3>
|
||||
<ul className="space-y-4 text-zinc-500">
|
||||
{[
|
||||
"Dati sparsi ovunque",
|
||||
"Processi manuali e lenti",
|
||||
"Sistemi vulnerabili",
|
||||
"Zero visibilità strategica",
|
||||
].map((item) => (
|
||||
<li key={item} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-error shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-background p-8 lg:p-16 space-y-8">
|
||||
<span className="material-symbols-outlined text-primary text-5xl">
|
||||
domain
|
||||
</span>
|
||||
<h3 className="text-2xl lg:text-3xl font-black uppercase">Dopo</h3>
|
||||
<ul className="space-y-4 text-zinc-900">
|
||||
{[
|
||||
"Un unico flusso di dati",
|
||||
"Automazione dove serve",
|
||||
"Sicurezza di livello enterprise",
|
||||
"Dashboard per decidere in tempo reale",
|
||||
].map((item) => (
|
||||
<li key={item} className="flex items-center gap-2">
|
||||
<span className="w-1.5 h-1.5 bg-primary shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Servizi */}
|
||||
<section id="servizi" className="py-20 lg:py-32 px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 mb-20 items-end">
|
||||
<div className="lg:col-span-8">
|
||||
<h2 className="text-4xl lg:text-5xl font-black uppercase mb-6">
|
||||
Cosa Facciamo
|
||||
</h2>
|
||||
<div className="w-24 h-2 bg-primary mb-8" />
|
||||
<p className="text-xl text-secondary leading-relaxed max-w-2xl">
|
||||
Soluzioni su misura per il vostro metodo di lavoro. Automazione, gestione dati e competenze umane in un unico flusso.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Portali */}
|
||||
<div className="bg-surface-container p-8 lg:p-12 border-t-4 border-primary hover:bg-zinc-900 hover:text-white transition-all duration-500 group">
|
||||
<span className="material-symbols-outlined text-4xl mb-8 block text-primary group-hover:text-white">
|
||||
hub
|
||||
</span>
|
||||
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
|
||||
Portali & Infrastrutture Digitali
|
||||
</h3>
|
||||
<p className="opacity-70 group-hover:opacity-100">
|
||||
Siti, portali e web app costruiti per funzionare e crescere con voi.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Database */}
|
||||
<div className="bg-surface-container p-8 lg:p-12 border-t-4 border-primary hover:bg-zinc-900 hover:text-white transition-all duration-500 group">
|
||||
<span className="material-symbols-outlined text-4xl mb-8 block text-primary group-hover:text-white">
|
||||
schema
|
||||
</span>
|
||||
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
|
||||
Database & Sistemi Gestionali
|
||||
</h3>
|
||||
<p className="opacity-70 group-hover:opacity-100">
|
||||
I vostri dati organizzati, accessibili e pronti per le decisioni che contano.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* E-commerce */}
|
||||
<div className="bg-surface-container p-8 lg:p-12 border-t-4 border-primary hover:bg-zinc-900 hover:text-white transition-all duration-500 group">
|
||||
<span className="material-symbols-outlined text-4xl mb-8 block text-primary group-hover:text-white">
|
||||
shopping_bag
|
||||
</span>
|
||||
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
|
||||
E-commerce & Piattaforme
|
||||
</h3>
|
||||
<p className="opacity-70 group-hover:opacity-100">
|
||||
Vendita online integrata con la vostra logistica, pronta a scalare.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Automazioni & IA */}
|
||||
<div className="md:col-span-2 bg-zinc-900 text-white p-8 lg:p-12 flex flex-col md:flex-row justify-between items-center gap-8 group">
|
||||
<div className="max-w-xl">
|
||||
<h3 className="text-2xl lg:text-3xl font-black uppercase mb-4">
|
||||
Automazioni & IA
|
||||
</h3>
|
||||
<p className="opacity-60 text-base lg:text-lg">
|
||||
Meno lavoro ripetitivo, più tempo per quello che conta.
|
||||
<br />
|
||||
IA anche in locale, i vostri dati restano vostri.
|
||||
</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-7xl text-primary animate-pulse">
|
||||
memory
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Cybersicurezza */}
|
||||
<div className="bg-primary text-white p-8 lg:p-12 flex flex-col justify-between">
|
||||
<div>
|
||||
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
|
||||
Cybersicurezza
|
||||
</h3>
|
||||
<p className="opacity-80">
|
||||
Protezione proattiva e monitoraggio continuo dei vostri asset digitali.
|
||||
</p>
|
||||
</div>
|
||||
<span className="material-symbols-outlined text-4xl mt-8">
|
||||
verified_user
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Chi Siamo */}
|
||||
<section className="py-20 lg:py-32 px-6 lg:px-8 overflow-hidden bg-white">
|
||||
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center">
|
||||
<div className="relative">
|
||||
<Image
|
||||
alt="Architettura moderna in vetro e acciaio"
|
||||
className="w-full grayscale hover:grayscale-0 transition-all duration-700"
|
||||
src="/images/architecture.jpg"
|
||||
width={800}
|
||||
height={600}
|
||||
/>
|
||||
<div className="absolute -bottom-8 -right-8 bg-primary w-36 h-36 lg:w-48 lg:h-48" />
|
||||
</div>
|
||||
<div className="space-y-8">
|
||||
<h2 className="text-4xl lg:text-5xl font-black uppercase">
|
||||
Chi Siamo
|
||||
</h2>
|
||||
<p className="text-lg lg:text-xl leading-relaxed text-secondary">
|
||||
CiMa Progetti unisce architettura e software engineering. Costruiamo sistemi digitali solidi e scalabili per aziende che non accettano compromessi.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-8 lg:gap-12 border-t border-zinc-200 pt-8">
|
||||
<div>
|
||||
<p className="text-2xl lg:text-3xl font-black">AI Expert</p>
|
||||
<p className="text-xs uppercase tracking-widest text-primary font-bold">
|
||||
Nicola Leone Ciardi
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl lg:text-3xl font-black">Jr Engineer</p>
|
||||
<p className="text-xs uppercase tracking-widest text-primary font-bold">
|
||||
Valentina Madaudo
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Filosofia */}
|
||||
<section id="filosofia" className="py-20 lg:py-32 px-6 lg:px-8 bg-dark-bg text-white">
|
||||
<div className="max-w-4xl mx-auto text-center space-y-12">
|
||||
<h2 className="text-sm font-bold uppercase tracking-[0.4em] text-primary">
|
||||
La nostra idea
|
||||
</h2>
|
||||
<blockquote className="text-3xl md:text-4xl lg:text-6xl font-black leading-tight italic">
|
||||
“La forma segue la funzione. La struttura la rende duratura.”
|
||||
</blockquote>
|
||||
<p className="text-zinc-400 text-base lg:text-lg max-w-2xl mx-auto leading-relaxed">
|
||||
Solido come cemento armato, fluido come un open-space. Zero fronzoli, massima efficienza.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA / Conversione */}
|
||||
<section id="progetti" className="py-28 lg:py-40 px-6 lg:px-8 bg-primary text-white relative overflow-hidden">
|
||||
<div className="max-w-7xl mx-auto relative z-10">
|
||||
<div className="max-w-3xl">
|
||||
<h2 className="text-4xl md:text-6xl lg:text-7xl font-black uppercase mb-12 leading-none">
|
||||
Pronto a scalare?
|
||||
</h2>
|
||||
<Link
|
||||
href="/contatti"
|
||||
className="inline-block border-2 border-white bg-white text-primary px-12 py-6 font-black uppercase tracking-widest text-lg lg:text-xl hover:bg-transparent hover:text-white hover:border-2 hover:border-white transition-colors"
|
||||
>
|
||||
Contattaci
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-0 right-0 h-full w-1/3 opacity-10 pointer-events-none">
|
||||
<svg
|
||||
className="h-full w-full"
|
||||
preserveAspectRatio="none"
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<line stroke="white" strokeWidth="0.1" x1="0" x2="100" y1="0" y2="100" />
|
||||
<line stroke="white" strokeWidth="0.1" x1="0" x2="100" y1="20" y2="120" />
|
||||
<line stroke="white" strokeWidth="0.1" x1="0" x2="100" y1="40" y2="140" />
|
||||
<line stroke="white" strokeWidth="0.1" x1="20" x2="120" y1="0" y2="100" />
|
||||
<line stroke="white" strokeWidth="0.1" x1="40" x2="140" y1="0" y2="100" />
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user