Initial commit
This commit is contained in:
@@ -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 & 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 & CFO
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-on-surface-variant mb-10 max-w-sm text-base leading-relaxed">
|
||||
Jr Engineer & 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>
|
||||
);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@@ -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'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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-dark-bg w-full py-16 px-6 lg:px-8 mt-auto border-t border-zinc-800 relative overflow-hidden">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 max-w-7xl mx-auto">
|
||||
<div className="lg:col-span-1">
|
||||
<span className="text-xl font-bold text-white tracking-tighter mb-4 block uppercase">
|
||||
CiMa Progetti
|
||||
</span>
|
||||
<p className="font-sans text-sm tracking-wide text-zinc-400 leading-relaxed">
|
||||
Via Otranto 39
|
||||
<br />
|
||||
00192 Roma, Italia
|
||||
<br />
|
||||
P.IVA 18328621000
|
||||
<br />
|
||||
REA RM-1778381
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-bold mb-6 uppercase text-xs tracking-widest">
|
||||
Navigazione
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{["Chi siamo", "Servizi", "Metodo", "Progetti"].map((item) => (
|
||||
<li key={item}>
|
||||
<Link
|
||||
href={`/#${item.toLowerCase().replace(" ", "-")}`}
|
||||
className="font-sans text-sm tracking-wide text-zinc-400 hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-bold mb-6 uppercase text-xs tracking-widest">
|
||||
Supporto
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{["Privacy Policy", "Termini e Condizioni", "FAQ"].map((item) => (
|
||||
<li key={item}>
|
||||
<Link
|
||||
href="#"
|
||||
className="font-sans text-sm tracking-wide text-zinc-400 hover:text-blue-400 transition-colors"
|
||||
>
|
||||
{item}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-white font-bold mb-6 uppercase text-xs tracking-widest">
|
||||
Contatti
|
||||
</p>
|
||||
<p className="font-sans text-sm tracking-wide text-zinc-400 mb-4">
|
||||
<a href="mailto:info@cimaprogetti.it" className="text-blue-400 hover:text-blue-300">
|
||||
info@cimaprogetti.it
|
||||
</a>
|
||||
<br />
|
||||
<a href="https://wa.me/393382451171" className="text-blue-400 hover:text-blue-300">
|
||||
+39 338 245 1171
|
||||
</a>
|
||||
<br />
|
||||
<a href="mailto:cima.progetti@pec-societa.it" className="text-blue-400 hover:text-blue-300">
|
||||
cima.progetti@pec-societa.it
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-zinc-800 text-center sm:text-left">
|
||||
<p className="font-sans text-xs tracking-wide text-zinc-500 uppercase">
|
||||
© 2026 CiMa Progetti. Soluzioni digitali.
|
||||
</p>
|
||||
</div>
|
||||
{/* Watermark */}
|
||||
<span className="absolute bottom-0 right-0 text-[200px] font-black tracking-tighter leading-none select-none pointer-events-none text-[#2e2e2e] translate-x-4 translate-y-12">
|
||||
CIMA
|
||||
</span>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
|
||||
const navLinks = [
|
||||
{ label: "Chi siamo", href: "/#approccio" },
|
||||
{ label: "Servizi", href: "/#servizi" },
|
||||
{ label: "Metodo", href: "/#filosofia" },
|
||||
{ label: "Progetti", href: "/#progetti" },
|
||||
];
|
||||
|
||||
export default function Navbar() {
|
||||
const pathname = usePathname();
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100">
|
||||
<div className="flex justify-between items-center px-6 lg:px-8 py-4 max-w-7xl mx-auto">
|
||||
<Link href="/" className="block">
|
||||
<Image
|
||||
src="/logo.svg"
|
||||
alt="CiMa Progetti"
|
||||
width={110}
|
||||
height={40}
|
||||
className="h-8 w-auto"
|
||||
priority
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{/* Desktop Nav */}
|
||||
<div className="hidden lg:flex gap-8 items-center">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="font-sans uppercase tracking-tighter font-bold text-sm text-zinc-600 hover:text-primary transition-colors duration-300"
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/contatti"
|
||||
className={`px-6 py-2 font-bold text-sm uppercase tracking-widest transition-all active:scale-95 ${
|
||||
pathname === "/contatti"
|
||||
? "bg-primary text-white"
|
||||
: "bg-primary text-white hover:brightness-110"
|
||||
}`}
|
||||
>
|
||||
Contatti
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Mobile Toggle */}
|
||||
<button
|
||||
className="lg:hidden flex items-center p-2 focus:outline-none"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg
|
||||
className="w-7 h-7"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
{menuOpen ? (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
) : (
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
||||
)}
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{menuOpen && (
|
||||
<div className="lg:hidden bg-white border-t border-zinc-100 px-6 py-6 space-y-4">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.href}
|
||||
href={link.href}
|
||||
className="block font-sans uppercase tracking-tighter font-bold text-sm text-zinc-600 hover:text-primary transition-colors"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
>
|
||||
{link.label}
|
||||
</Link>
|
||||
))}
|
||||
<Link
|
||||
href="/contatti"
|
||||
className="block bg-primary text-white px-6 py-2 font-bold text-sm uppercase tracking-widest text-center"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
>
|
||||
Contatti
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user