272 lines
12 KiB
TypeScript
272 lines
12 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
}
|