Initial commit

2026-04-08 17:25:42 +02:00
commit 9ce9c2ba7d
23 changed files with 7490 additions and 0 deletions
@@ -0,0 +1,165 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+
+export const metadata: Metadata = {
+  title: "Contatti | CiMa Progetti",
+  description: "Parliamo del tuo prossimo progetto digitale.",
+};
+
+export default function Contatti() {
+  return (
+    <div className="pt-32 pb-24 px-6 lg:px-8 max-w-7xl mx-auto">
+      {/* Hero Section */}
+      <section className="grid grid-cols-12 mb-16 lg:mb-24">
+        <div className="col-span-12 md:col-span-8">
+          <h1 className="text-huge font-black uppercase text-on-surface mb-8">
+            CONTATTI
+          </h1>
+          <div className="h-2 w-24 bg-primary mt-4" />
+        </div>
+        <div className="col-span-12 md:col-start-9 md:col-span-4 mt-8 md:mt-auto">
+          <p className="text-on-surface-variant font-medium text-lg lg:text-xl leading-relaxed">
+            Parliamo del tuo prossimo progetto. Nessun impegno, solo una conversazione.
+          </p>
+        </div>
+      </section>
+
+      {/* General Contacts */}
+      <section className="grid grid-cols-12 mb-16 lg:mb-24 gap-12">
+        <div className="col-span-12 md:col-span-5 border-t border-outline-variant/20 pt-8">
+          <h2 className="text-xs font-black tracking-[0.2em] uppercase text-zinc-400 mb-12">
+            contatti
+          </h2>
+          <div className="space-y-12">
+            <div>
+              <p className="text-xs font-bold uppercase tracking-widest text-primary mb-3">
+                whatsapp
+              </p>
+              <a
+                className="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300"
+                href="tel:+393382451171"
+              >
+                +39 338 245 1171
+              </a>
+            </div>
+            <div>
+              <p className="text-xs font-bold uppercase tracking-widest text-primary mb-3">
+                email
+              </p>
+              <a
+                className="text-2xl sm:text-3xl lg:text-4xl font-black tracking-tighter text-on-surface hover:text-primary transition-colors duration-300 underline decoration-2 underline-offset-8"
+                href="mailto:info@cimaprogetti.it"
+              >
+                info@cimaprogetti.it
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* Structural Visual Element */}
+        <div className="hidden md:block col-start-7 col-span-6 relative overflow-hidden h-[360px]">
+          <Image
+            alt="Concrete architecture geometric detail"
+            className="w-full h-full object-cover grayscale brightness-90 hover:brightness-100 transition-all duration-700"
+            src="/images/contatti.jpg"
+            width={800}
+            height={360}
+          />
+          <div className="absolute inset-0 bg-primary/5 mix-blend-multiply" />
+        </div>
+      </section>
+
+      {/* People Behind CiMa */}
+      <section className="mb-12">
+        <div className="border-t border-outline-variant/20 pt-8 mb-8">
+          <h2 className="text-xs font-black tracking-[0.2em] uppercase text-zinc-400">
+            people behind cima
+          </h2>
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-px bg-outline-variant/10">
+          {/* Nicola Leone Ciardi */}
+          <div className="bg-background py-12 pr-0 md:pr-12">
+            <div className="flex flex-col h-full">
+              <div className="mb-6">
+                <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
+                  Nicola Leone Ciardi
+                </h3>
+                <p className="text-primary font-bold uppercase text-[10px] tracking-[0.2em]">
+                  Co-Founder &amp; CEO
+                </p>
+              </div>
+              <p className="text-on-surface-variant mb-10 max-w-sm text-base leading-relaxed">
+                Management and computer science.
+              </p>
+              <div className="mt-auto space-y-4">
+                <a
+                  className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
+                  href="tel:+393382451178"
+                >
+                  <span className="material-symbols-outlined text-primary">
+                    call
+                  </span>
+                  <span className="font-bold tracking-tight">
+                    +39 338 245 1178
+                  </span>
+                </a>
+                <a
+                  className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
+                  href="mailto:nicolaleone.ciardi@cimaprogetti.it"
+                >
+                  <span className="material-symbols-outlined text-primary">
+                    mail
+                  </span>
+                  <span className="font-bold tracking-tight">
+                    nicolaleone.ciardi@cimaprogetti.it
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+
+          {/* Valentina Madaudo */}
+          <div className="bg-background py-12 md:pl-12 border-t md:border-t-0 md:border-l border-outline-variant/10">
+            <div className="flex flex-col h-full">
+              <div className="mb-6">
+                <h3 className="text-3xl lg:text-4xl xl:text-5xl font-black tracking-tighter text-on-surface mb-2">
+                  Valentina Madaudo
+                </h3>
+                <p className="text-primary font-bold uppercase text-[10px] tracking-[0.2em]">
+                  Co-Founder &amp; CFO
+                </p>
+              </div>
+              <p className="text-on-surface-variant mb-10 max-w-sm text-base leading-relaxed">
+                Jr Engineer &amp; economist for sustainable development.
+              </p>
+              <div className="mt-auto space-y-4">
+                <a
+                  className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
+                  href="tel:+393393580805"
+                >
+                  <span className="material-symbols-outlined text-primary">
+                    call
+                  </span>
+                  <span className="font-bold tracking-tight">
+                    +39 339 358 0805
+                  </span>
+                </a>
+                <a
+                  className="flex items-center space-x-3 text-on-surface hover:text-primary transition-colors"
+                  href="mailto:valentina.madaudo@cimaprogetti.it"
+                >
+                  <span className="material-symbols-outlined text-primary">
+                    mail
+                  </span>
+                  <span className="font-bold tracking-tight">
+                    valentina.madaudo@cimaprogetti.it
+                  </span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}
@@ -0,0 +1,56 @@
+@import "tailwindcss";
+
+@theme inline {
+  --font-sans: "Inter", "Helvetica Neue", Arial, sans-serif;
+
+  --color-background: #fcf9f8;
+  --color-on-background: #1b1c1c;
+  --color-surface: #fcf9f8;
+  --color-on-surface: #1b1c1c;
+  --color-surface-dim: #dcd9d9;
+  --color-surface-bright: #fcf9f8;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f6f3f2;
+  --color-surface-container: #f0eded;
+  --color-surface-container-high: #eae7e7;
+  --color-surface-container-highest: #e4e2e1;
+  --color-surface-variant: #e4e2e1;
+  --color-on-surface-variant: #454558;
+  --color-primary: #0001bb;
+  --color-on-primary: #ffffff;
+  --color-primary-container: #0000ff;
+  --color-on-primary-container: #b3b7ff;
+  --color-secondary: #5f5e5e;
+  --color-on-secondary: #ffffff;
+  --color-secondary-container: #e4e2e1;
+  --color-on-secondary-container: #656464;
+  --color-tertiary: #720001;
+  --color-on-tertiary: #ffffff;
+  --color-error: #ba1a1a;
+  --color-on-error: #ffffff;
+  --color-outline: #757589;
+  --color-outline-variant: #c5c4db;
+  --color-inverse-surface: #303030;
+  --color-inverse-on-surface: #f3f0ef;
+  --color-inverse-primary: #bec2ff;
+  --color-dark-bg: #282828;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  font-family: var(--font-sans);
+  background: var(--color-background);
+  color: var(--color-on-background);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  overflow-x: hidden;
+}
+
+.text-huge {
+  font-size: clamp(2.5rem, 8vw, 8rem);
+  line-height: 0.9;
+  letter-spacing: -0.04em;
+}
@@ -0,0 +1,38 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+});
+
+export const metadata: Metadata = {
+  title: "CiMa Progetti | Digital Architecture & Integration",
+  description:
+    "Progettiamo la struttura digitale del vostro business. Portali, database, e-commerce, automazioni IA e cybersicurezza.",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="it" className={`${inter.variable} scroll-smooth`}>
+      <head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body className="min-h-screen flex flex-col">
+        <Navbar />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </body>
+    </html>
+  );
+}
@@ -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&apos;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 &amp; 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 &amp; 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 &amp; 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 &amp; 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">
+            &ldquo;La forma segue la funzione. La struttura la rende duratura.&rdquo;
+          </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>
+    </>
+  );
+}