added lazy loading for best-efficiency
This commit is contained in:
+172
-187
@@ -1,10 +1,53 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Suspense } from "react";
|
||||
import { LazySection } from "@/components/LazySection";
|
||||
import { Skeleton, SkeletonWave } from "@/components/Skeleton";
|
||||
|
||||
const ServicesSection = dynamic(
|
||||
() => import("@/components/sections/ServicesSection"),
|
||||
{
|
||||
loading: () => (
|
||||
<div className="py-20 lg:py-32 px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<Skeleton variant="heading" className="mb-8" />
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="bg-surface-container p-8 lg:p-12">
|
||||
<SkeletonWave height="40px" className="mb-8" />
|
||||
<SkeletonWave height="20px" className="mb-4" />
|
||||
<SkeletonWave height="60px" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
const AboutSection = dynamic(
|
||||
() => import("@/components/sections/AboutSection"),
|
||||
{
|
||||
loading: () => (
|
||||
<div 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">
|
||||
<SkeletonWave width="100%" height="600px" />
|
||||
<div className="space-y-8">
|
||||
<Skeleton height="60px" />
|
||||
<Skeleton height="100px" count={3} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
{/* Hero Section - Priority render for LCP */}
|
||||
<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">
|
||||
@@ -32,7 +75,10 @@ export default function Home() {
|
||||
</header>
|
||||
|
||||
{/* Approccio / Ecosistema Integrato */}
|
||||
<section id="approccio" className="py-20 lg:py-32 px-6 lg:px-8 bg-surface-container-low">
|
||||
<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">
|
||||
@@ -44,201 +90,105 @@ export default function Home() {
|
||||
</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.
|
||||
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>
|
||||
{/* Problema / Valore - Lazy loaded */}
|
||||
<LazySection
|
||||
className="lazy-section"
|
||||
skeletonHeight="400px"
|
||||
skeletonCount={1}
|
||||
>
|
||||
<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>
|
||||
</LazySection>
|
||||
|
||||
<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>
|
||||
{/* Servizi - Lazy loaded with dynamic import */}
|
||||
<LazySection className="lazy-section" skeletonHeight="300px">
|
||||
<Suspense>
|
||||
<ServicesSection />
|
||||
</Suspense>
|
||||
</LazySection>
|
||||
|
||||
{/* 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>
|
||||
{/* Chi Siamo - Lazy loaded with dynamic import */}
|
||||
<LazySection className="lazy-section" skeletonHeight="600px">
|
||||
<Suspense>
|
||||
<AboutSection />
|
||||
</Suspense>
|
||||
</LazySection>
|
||||
|
||||
{/* 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-surface-container-high text-on-surface p-8 lg:p-12 flex flex-col md:flex-row justify-between items-center gap-8 group transition-colors duration-300">
|
||||
<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
|
||||
{/* Filosofia - Lazy loaded */}
|
||||
<LazySection className="lazy-section" skeletonHeight="300px">
|
||||
<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>
|
||||
<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.
|
||||
<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 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>
|
||||
</section>
|
||||
</LazySection>
|
||||
|
||||
{/* CTA / Conversione */}
|
||||
<section id="progetti" className="py-28 lg:py-40 px-6 lg:px-8 bg-primary text-white relative overflow-hidden">
|
||||
<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">
|
||||
@@ -258,11 +208,46 @@ export default function Home() {
|
||||
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" />
|
||||
<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