Initial commit

This commit is contained in:
2026-04-08 17:25:42 +02:00
commit 9ce9c2ba7d
23 changed files with 7490 additions and 0 deletions
+41
View File
@@ -0,0 +1,41 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
# dependencies
/node_modules
/.pnp
.pnp.*
.yarn/*
!.yarn/patches
!.yarn/plugins
!.yarn/releases
!.yarn/versions
# testing
/coverage
# next.js
/.next/
/out/
# production
/build
# misc
.DS_Store
*.pem
# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
# env files (can opt-in for committing if needed)
.env*
# vercel
.vercel
# typescript
*.tsbuildinfo
next-env.d.ts
+36
View File
@@ -0,0 +1,36 @@
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+18
View File
@@ -0,0 +1,18 @@
import { defineConfig, globalIgnores } from "eslint/config";
import nextVitals from "eslint-config-next/core-web-vitals";
import nextTs from "eslint-config-next/typescript";
const eslintConfig = defineConfig([
...nextVitals,
...nextTs,
// Override default ignores of eslint-config-next.
globalIgnores([
// Default ignores of eslint-config-next:
".next/**",
"out/**",
"build/**",
"next-env.d.ts",
]),
]);
export default eslintConfig;
+7
View File
@@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;
+6584
View File
File diff suppressed because it is too large Load Diff
+26
View File
@@ -0,0 +1,26 @@
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "eslint"
},
"dependencies": {
"next": "16.2.2",
"react": "19.2.4",
"react-dom": "19.2.4"
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "16.2.2",
"tailwindcss": "^4",
"typescript": "^5"
}
}
+7
View File
@@ -0,0 +1,7 @@
const config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;
+1
View File
@@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 391 B

+1
View File
@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 397 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 346 KiB

+11
View File
@@ -0,0 +1,11 @@
<svg width="140" height="100" viewBox="0 0 140 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_698_2235)">
<path d="M43.0703 89.7223V64.9506C43.0703 62.984 43.848 62 45.4049 62C46.8801 62 47.6166 62.984 47.6166 64.9506V89.7223H54.8674V64.9506C54.8674 62.984 55.6038 62 57.0791 62C58.6347 62 59.4136 62.984 59.4136 64.9506V89.7223H67.3394V63.9054C67.3394 61.3654 66.6532 59.2958 65.2806 57.6982C63.9083 56.0994 62.2184 55.3012 60.2126 55.3012C58.6145 55.3012 57.2835 55.8133 56.2183 56.8373C55.1531 57.8626 54.56 59.2343 54.4368 60.9551C54.108 59.2759 53.4017 57.913 52.3166 56.8675C51.2316 55.8232 49.9508 55.3012 48.4767 55.3012C46.8798 55.3012 45.5677 55.8446 44.5441 56.9289C43.5204 58.0157 42.9472 59.419 42.824 61.1395H42.7012V55.9148H35.1442V89.7226H43.07L43.0703 89.7223ZM90.3491 88.6154C92.089 87.4696 93.1641 85.8907 93.5742 83.8828V89.7223H102.484V66.9789C102.484 63.2916 101.234 60.4238 98.7352 58.3732C96.2363 56.325 92.7553 55.3009 88.2903 55.3009C84.0301 55.3009 80.6505 56.2834 78.1528 58.2503C75.6539 60.2181 74.343 62.8611 74.2202 66.1807H82.945C83.0266 64.9922 83.5285 64.0898 84.4504 63.4762C85.3723 62.8611 86.6106 62.5539 88.1675 62.5539C89.8059 62.5539 91.0653 62.913 91.946 63.6295C92.8266 64.3473 93.2668 65.3413 93.2668 66.6102V68.7627H86.632C82.2474 68.7627 78.8492 69.7455 76.4319 71.7133C74.0145 73.6798 72.8075 76.3645 72.8075 79.7654C72.8075 82.9205 73.7896 85.472 75.7569 87.4172C77.7226 89.3651 80.3847 90.3376 83.7441 90.3376C86.4062 90.3376 88.6077 89.763 90.3491 88.6157M83.0983 81.7319C82.1776 80.9124 81.7157 79.8681 81.7157 78.597C81.7157 77.3268 82.1562 76.2916 83.0366 75.4934C83.9172 74.694 85.1766 74.2949 86.8163 74.2949H93.2668V77.7361C93.2668 79.2949 92.7035 80.5548 91.5772 81.5163C90.4505 82.4801 88.9253 82.9608 87.0008 82.9608C85.3199 82.9608 84.0202 82.5518 83.0983 81.7322M139.717 91.259H110.225V99.8648H139.717V91.259Z" fill="#282828"/>
<path d="M25.6215 45.9779C28.2836 43.7251 29.6975 40.6517 29.8603 36.7571H20.8907C20.7679 38.233 20.163 39.37 19.0779 40.1694C17.9917 40.9676 16.6091 41.3679 14.9306 41.3679C13.0877 41.3679 11.6739 40.886 10.6906 39.9233C9.70847 38.9607 9.21652 37.5977 9.21652 35.8357V27.845C9.21652 26.0417 9.70817 24.6697 10.6906 23.726C11.6742 22.7836 13.088 22.3128 14.9306 22.3128C16.6091 22.3128 17.9917 22.7218 19.0779 23.5414C20.163 24.3622 20.7676 25.4881 20.8907 26.9224H29.8603C29.6972 23.0294 28.2836 19.9559 25.6215 17.7017C22.9582 15.4489 19.3944 14.3218 14.9309 14.3218C11.9403 14.3218 9.31828 14.8854 7.06654 16.011C4.81359 17.1393 3.07217 18.7068 1.84409 20.7134C0.614796 22.7215 0 25.0983 0 27.8444V35.8351C0 38.5396 0.614796 40.9053 1.84409 42.9348C3.07217 44.9628 4.81359 46.5405 7.06654 47.6676C9.31828 48.7947 11.94 49.3583 14.9309 49.3583C19.3944 49.3583 22.9585 48.2318 25.6215 45.9779ZM67.2163 48.7432V40.445H57.509V14.9354H38.3392V23.2336H48.2922V40.445H37.1096V48.7432H67.2163ZM56.4956 8.29774C57.499 7.4369 58.0009 6.26852 58.0009 4.79382C58.0009 3.31912 57.499 2.15075 56.4956 1.28991C55.4906 0.430269 54.1496 -0.000152588 52.4711 -0.000152588C50.7914 -0.000152588 49.4489 0.430269 48.4466 1.28991C47.4416 2.15075 46.9412 3.31912 46.9412 4.79382C46.9412 6.26852 47.4416 7.4369 48.4466 8.29774C49.4489 9.15738 50.7911 9.5878 52.4711 9.5878C54.1496 9.5878 55.4906 9.15738 56.4956 8.29774Z" fill="#282828"/>
</g>
<defs>
<clipPath id="clip0_698_2235">
<rect width="140" height="100" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 3.4 KiB

+1
View File
@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

+1
View File
@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 128 B

+1
View File
@@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

After

Width:  |  Height:  |  Size: 385 B

+165
View File
@@ -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>
);
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

+56
View File
@@ -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;
}
+38
View File
@@ -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>
);
}
+271
View File
@@ -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>
</>
);
}
+89
View File
@@ -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">
&copy; 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>
);
}
+102
View File
@@ -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>
);
}
+34
View File
@@ -0,0 +1,34 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react-jsx",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
".next/types/**/*.ts",
".next/dev/types/**/*.ts",
"**/*.mts"
],
"exclude": ["node_modules"]
}