cima-squad/cima.it
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

many changes

Browse Source
This commit is contained in:
Nicola Leone Ciardi (CEO)
2026-04-10 19:38:15 +02:00
parent 5f10448291
commit dfcba4965f
14 changed files with 793 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/next.config.ts
-8
View File
@@ -17,14 +17,6 @@ const nextConfig: NextConfig = {
/* Generate static pages early */ /* Generate static pages early */
reactStrictMode: true, reactStrictMode: true,
/* Experimental performance features */
experimental: {
optimizePackageImports: [
"@radix-ui/react-dialog",
"date-fns",
"lodash-es",
],
},
}; };
export default nextConfig; export default nextConfig;
frontend/public/images/team.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 269 KiB

frontend/src/app/globals.css
+11 -2
View File
@@ -1,7 +1,7 @@
@import "tailwindcss"; @import "tailwindcss";
@theme inline { @theme inline {
--font-sans: "Inter", "Helvetica Neue", Arial, sans-serif; --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
--color-background: #fcf9f8; --color-background: #fcf9f8;
--color-on-background: #1b1c1c; --color-on-background: #1b1c1c;
@@ -16,7 +16,7 @@
--color-surface-container-highest: #e4e2e1; --color-surface-container-highest: #e4e2e1;
--color-surface-variant: #e4e2e1; --color-surface-variant: #e4e2e1;
--color-on-surface-variant: #454558; --color-on-surface-variant: #454558;
--color-primary: #0001bb; --color-primary: #0000ff;
--color-on-primary: #ffffff; --color-on-primary: #ffffff;
--color-primary-container: #0000ff; --color-primary-container: #0000ff;
--color-on-primary-container: #b3b7ff; --color-on-primary-container: #b3b7ff;
@@ -49,6 +49,11 @@ html {
scroll-snap-align: start; scroll-snap-align: start;
} }
/* Prevent scroll-snap from interfering with GSAP pinned sections */
.pin-spacer {
scroll-snap-align: none !important;
}
body { body {
font-family: var(--font-sans); font-family: var(--font-sans);
background: var(--color-background); background: var(--color-background);
@@ -107,6 +112,10 @@ img {
animation-delay: 0.65s; animation-delay: 0.65s;
} }
.hero-fade-up-delay-3 {
animation-delay: 0.8s;
}
/* Skeleton wave animation */ /* Skeleton wave animation */
@keyframes wave { @keyframes wave {
0% { 0% {
frontend/src/app/layout.tsx
+3 -9
View File
@@ -1,14 +1,8 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter",
});
export const viewport: Viewport = { export const viewport: Viewport = {
width: "device-width", width: "device-width",
initialScale: 1, initialScale: 1,
@@ -41,11 +35,11 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="it" className={`${inter.variable} scroll-smooth`}> <html lang="it" className="scroll-smooth mb:overflow-x-hidden">
<head> <head>
{/* Preconnect to Google Fonts — used by Material Symbols loaded lazily */} {/* Preconnect to Google Fonts — used by Material Symbols loaded lazily */}
<link rel="dns-prefetch" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://fonts.gstatic.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
</head> </head>
<body className="min-h-screen flex flex-col"> <body className="min-h-screen flex flex-col">
<Navbar /> <Navbar />
frontend/src/components/Footer.tsx
+149 -50
View File
@@ -2,86 +2,185 @@ import Link from "next/link";
export default function Footer() { export default function Footer() {
return ( return (
<footer className="bg-surface-container-high w-full py-16 px-6 lg:px-8 mt-auto border-t border-outline-variant/20 relative overflow-hidden transition-colors duration-300"> <footer className="bg-surface-container-low w-full py-20 px-6 lg:px-12 border-t border-outline-variant/20 relative overflow-hidden transition-colors duration-300">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-12 max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="lg:col-span-1"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-20">
<span className="text-xl font-bold text-on-surface tracking-tighter mb-4 block uppercase"> {/* Logo + Social */}
CiMa Progetti <div className="space-y-4">
<div className="flex flex-col gap-4">
<span className="text-2xl font-black uppercase tracking-tight text-on-surface">
CIMA PROGETTI Srls
</span> </span>
<p className="font-sans text-sm tracking-wide text-on-surface-variant leading-relaxed"> </div>
<div className="flex space-y-3 flex-col w-full">
<p className="text-secondary font-medium">
Scoprirci anche sui nostri canali social
</p>
<div className="flex gap-4 w-full">
{/* Facebook */}
<a
className="hover:opacity-80 transition-opacity"
href="https://facebook.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Facebook"
>
<svg className="w-10 h-10" fill="none" viewBox="0 0 24 24">
<path
d="M22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 16.9913 5.65684 21.1283 10.4375 21.8785V14.8906H7.89844V12H10.4375V9.79688C10.4375 7.29063 11.9305 5.90625 14.2146 5.90625C15.3088 5.90625 16.4531 6.10156 16.4531 6.10156V8.5625H15.1922C13.95 8.5625 13.5625 9.33313 13.5625 10.1242V12H16.3359L15.8926 14.8906H13.5625V21.8785C18.3432 21.1283 22 16.9913 22 12Z"
fill="currentColor"
/>
</svg>
</a>
{/* Instagram */}
<a
className="hover:opacity-80 transition-opacity"
href="https://instagram.com"
target="_blank"
rel="noopener noreferrer"
aria-label="Instagram"
>
<svg className="w-10 h-10" fill="none" viewBox="0 0 24 24">
<path
d="M12 2.16338C15.2037 2.16338 15.5842 2.17575 16.8517 2.23388C18.0229 2.28713 18.6592 2.48288 19.0822 2.64713C19.6429 2.86463 20.0426 3.123 20.463 3.54338C20.8834 3.96375 21.1414 4.3635 21.3589 4.92413C21.5231 5.34713 21.7192 5.9835 21.7725 7.15463C21.8306 8.42213 21.843 8.80238 21.843 12C21.843 15.1976 21.8306 15.5779 21.7725 16.8454C21.7192 18.0165 21.5231 18.6529 21.3589 19.0759C21.1414 19.6365 20.8834 20.0363 20.463 20.4566C20.0426 20.877 19.6429 21.135 19.0822 21.3525C18.6592 21.5168 18.0229 21.7129 16.8517 21.7661C15.5842 21.8243 15.2037 21.8366 12 21.8366C8.79637 21.8366 8.41575 21.8243 7.14825 21.7661C5.97712 21.7129 5.34075 21.5168 4.91775 21.3525C4.35712 21.135 3.95737 20.877 3.537 20.4566C3.11662 20.0363 2.85862 19.6365 2.64112 19.0759C2.47687 18.6529 2.28075 18.0165 2.2275 16.8454C2.16937 15.5779 2.157 15.1976 2.157 12C2.157 8.80238 2.16937 8.42213 2.2275 7.15463C2.28075 5.9835 2.47687 5.34713 2.64112 4.92413C2.85862 4.3635 3.11662 3.96375 3.537 3.54338C3.95737 3.123 4.35712 2.86463 4.91775 2.64713C5.34075 2.48288 5.97712 2.28713 7.14825 2.23388C8.41575 2.17575 8.79637 2.16338 12 2.16338ZM12 0C8.74125 0 8.33325 0.013875 7.053 0.072375C5.77537 0.1305 4.90275 0.33375 4.143 0.628875C3.35775 0.93375 2.69062 1.34175 2.02575 2.007C1.36012 2.67188 0.9525 3.33938 0.647625 4.12463C0.352125 4.88438 0.14925 5.75738 0.091125 7.035C0.032625 8.31525 0.01875 8.72325 0.01875 11.9816C0.01875 15.2396 0.032625 15.6476 0.091125 16.9279C0.14925 18.2055 0.352125 19.0781 0.647625 19.8379C0.9525 20.6231 1.36012 21.2906 2.02575 21.9555C2.69062 22.6204 3.35812 23.0284 4.14337 23.3332C4.90312 23.6288 5.77612 23.8316 7.05375 23.8898C8.334 23.9482 8.742 23.9621 12.0004 23.9621C15.2584 23.9621 15.6664 23.9482 16.9466 23.8898C18.2242 23.8316 19.0969 23.6288 19.8566 23.3332C20.6419 23.0284 21.3094 22.6204 21.9742 21.9555C22.6395 21.2906 23.0475 20.6231 23.3524 19.8379C23.6479 19.0781 23.8507 18.2051 23.9089 16.9275C23.9674 15.6472 23.9812 15.2393 23.9812 11.9809C23.9812 8.7225 23.9674 8.3145 23.9089 7.03425C23.8507 5.75662 23.6479 4.884 23.3524 4.12425C23.0475 3.339 22.6395 2.6715 21.9742 2.00663C21.3094 1.34138 20.6419 0.933375 19.8566 0.6285C19.0969 0.333375 18.2239 0.1305 16.9463 0.072C15.666 0.0135 15.258 0 11.9996 0H12Z"
fill="currentColor"
/>
<path
d="M12 5.8275C8.59087 5.8275 5.82712 8.59125 5.82712 12C5.82712 15.4088 8.59087 18.1725 12 18.1725C15.4091 18.1725 18.1729 15.4088 18.1729 12C18.1729 8.59125 15.4091 5.8275 12 5.8275ZM12 16.0151C9.78262 16.0151 7.98487 14.2174 7.98487 12C7.98487 9.78263 9.78262 7.98488 12 7.98488C14.2174 7.98488 16.0151 9.78263 16.0151 12C16.0151 14.2174 14.2174 16.0151 12 16.0151Z"
fill="currentColor"
/>
<path
d="M18.4219 4.14C17.6227 4.14 16.9763 4.7865 16.9763 5.58562C16.9763 6.38475 17.6227 7.03125 18.4219 7.03125C19.221 7.03125 19.8675 6.38475 19.8675 5.58562C19.8675 4.7865 19.221 4.14 18.4219 4.14Z"
fill="currentColor"
/>
</svg>
</a>
{/* LinkedIn */}
<a
className="hover:opacity-80 transition-opacity"
href="https://linkedin.com"
target="_blank"
rel="noopener noreferrer"
aria-label="LinkedIn"
>
<svg className="w-10 h-10" fill="none" viewBox="0 0 24 24">
<path
d="M20.4472 20.452H16.8904V14.88C16.8904 13.5524 16.8656 11.8448 15.0424 11.8448C13.1936 11.8448 12.9096 13.2888 12.9096 14.784V20.452H9.3528V8.9952H12.7656V10.5624H12.8136C13.2888 9.6616 14.4496 8.712 16.1816 8.712C19.7832 8.712 20.4472 11.0824 20.4472 14.168V20.452ZM5.3376 7.4336C4.1976 7.4336 3.2736 6.5096 3.2736 5.372C3.2736 4.2344 4.1976 3.3104 5.3376 3.3104C6.4752 3.3104 7.4016 4.2344 7.4016 5.372C7.4016 6.5096 6.4752 7.4336 5.3376 7.4336ZM7.1192 20.452H3.5552V8.9952H7.1192V20.452ZM22.2256 0H1.7712C0.792 0 0 0.7744 0 1.7296V22.2688C0 23.224 0.792 24 1.7712 24H22.2216C23.2 24 24 23.224 24 22.2688V1.7296C24 0.7744 23.2 0 22.2256 0Z"
fill="currentColor"
/>
</svg>
</a>
{/* TikTok */}
<a
className="hover:opacity-80 transition-opacity"
href="https://tiktok.com"
target="_blank"
rel="noopener noreferrer"
aria-label="TikTok"
>
<svg className="w-10 h-10" fill="none" viewBox="0 0 24 24">
<path
d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-2.88 2.5 2.89 2.89 0 0 1-2.89-2.89 2.89 2.89 0 0 1 2.89-2.89c.3 0 .59.04.86.11V9a6.27 6.27 0 0 0-.86-.06 6.33 6.33 0 0 0-6.33 6.33A6.33 6.33 0 0 0 9.49 21.6a6.33 6.33 0 0 0 6.33-6.33V8.78a8.18 8.18 0 0 0 3.77.92V6.69Z"
fill="currentColor"
/>
</svg>
</a>
</div>
</div>
</div>
{/* Legals */}
<div>
<h4 className="font-bold uppercase tracking-widest text-xs mb-8 text-on-surface">
Legals
</h4>
<div className="space-y-4 text-secondary font-medium">
<p>
Via Otranto 39 Via Otranto 39
<br /> <br />
00192 Roma, Italia 00192 Roma, Italia
<br />
P.IVA 18328621000
<br />
REA RM-1778381
</p> </p>
<p>P.IVA 18328621000</p>
<p>REA RM-1778381</p>
</div>
</div> </div>
{/* Supporto */}
<div> <div>
<p className="text-on-surface font-bold mb-6 uppercase text-xs tracking-widest"> <h4 className="font-bold uppercase tracking-widest text-xs mb-8 text-on-surface">
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-on-surface-variant hover:text-primary transition-colors"
>
{item}
</Link>
</li>
))}
</ul>
</div>
<div>
<p className="text-on-surface font-bold mb-6 uppercase text-xs tracking-widest">
Supporto Supporto
</p> </h4>
<ul className="space-y-3"> <ul className="space-y-4 text-secondary font-medium">
{["Privacy Policy", "Termini e Condizioni", "FAQ"].map((item) => ( <li>
<li key={item}>
<Link <Link
href="#" href="#"
className="font-sans text-sm tracking-wide text-on-surface-variant hover:text-primary transition-colors" className="hover:text-primary transition-colors"
> >
{item} Privacy Policy
</Link>
</li>
<li>
<Link
href="#"
className="hover:text-primary transition-colors"
>
Termini e Condizioni
</Link>
</li>
<li>
<Link
href="#"
className="hover:text-primary transition-colors"
>
FAQ
</Link> </Link>
</li> </li>
))}
</ul> </ul>
</div> </div>
{/* Contatti */}
<div> <div>
<p className="text-on-surface font-bold mb-6 uppercase text-xs tracking-widest"> <h4 className="font-bold uppercase tracking-widest text-xs mb-8 text-on-surface">
Contatti Contatti
</p> </h4>
<p className="font-sans text-sm tracking-wide text-on-surface-variant mb-4"> <ul className="space-y-4 text-secondary font-medium">
<a href="mailto:info@cimaprogetti.it" className="text-primary hover:brightness-110 dark:hover:brightness-90 transition-all"> <li>
<a
href="mailto:info@cimaprogetti.it"
className="hover:text-primary transition-colors"
>
info@cimaprogetti.it info@cimaprogetti.it
</a> </a>
<br /> </li>
<a href="https://wa.me/393382451171" className="text-primary hover:brightness-110 dark:hover:brightness-90 transition-all"> <li>
<a
href="tel:+393382451171"
className="hover:text-primary transition-colors"
>
+39 338 245 1171 +39 338 245 1171
</a> </a>
<br /> </li>
<a href="mailto:cima.progetti@pec-societa.it" className="text-primary hover:brightness-110 dark:hover:brightness-90 transition-all"> <li>
<a
href="mailto:cima.progetti@pec-societa.it"
className="hover:text-primary transition-colors"
>
cima.progetti@pec-societa.it cima.progetti@pec-societa.it
</a> </a>
</li>
</ul>
</div>
</div>
<div className="pt-8 border-t border-outline-variant/20 text-center">
<p className="text-on-surface-variant/60 text-xs font-medium uppercase tracking-[0.2em]">
&copy; 2026 CIMA PROGETTI. Soluzioni Digitali.
</p> </p>
</div> </div>
</div> </div>
<div className="max-w-7xl mx-auto mt-16 pt-8 border-t border-outline-variant/20 text-center sm:text-left">
<p className="font-sans text-xs tracking-wide text-on-surface-variant/60 uppercase">
&copy; 2026 CiMa Progetti Srls. Soluzioni digitali.
</p>
</div>
{/* Watermark */} {/* Watermark */}
<span className="hidden lg:block absolute bottom-0 right-0 text-[185px] font-black tracking-tighter leading-none select-none pointer-events-none text-on-surface/10 dark:text-on-surface/5 translate-x-4 translate-y-12 transition-colors duration-300"> <span className="hidden lg:block absolute bottom-0 right-0 text-[210px] font-black tracking-tighter leading-none select-none pointer-events-none text-on-surface/10 translate-x-4 translate-y-12 transition-colors duration-300">
CIMA CIMA
</span> </span>
</footer> </footer>
frontend/src/components/HomeSections.tsx
+4 -4
View File
@@ -4,10 +4,10 @@ import { useGsapScrollTrigger } from "@/components/hooks/useGsapScrollTrigger";
import MaterialSymbolsFont from "@/components/MaterialSymbolsFont"; import MaterialSymbolsFont from "@/components/MaterialSymbolsFont";
const ApproccioSection = dynamic(() => import("@/components/sections/ApproccioSection"), { ssr: false }); const ApproccioSection = dynamic(() => import("@/components/sections/ApproccioSection"), { ssr: false });
const BeforeAfterSection = dynamic(() => import("@/components/sections/BeforeAfterSection"), { ssr: false }); const QuoteSection = dynamic(() => import("@/components/sections/QuoteSection"), { ssr: false });
const ServicesSection = dynamic(() => import("@/components/sections/ServicesSection"), { ssr: false }); const ServicesSection = dynamic(() => import("@/components/sections/ServicesSection"), { ssr: false });
const AboutSection = dynamic(() => import("@/components/sections/AboutSection"), { ssr: false }); const AboutSection = dynamic(() => import("@/components/sections/AboutSection"), { ssr: false });
const FilosofiaSection = dynamic(() => import("@/components/sections/FilosofiaSection"), { ssr: false }); const FaqSection = dynamic(() => import("@/components/sections/FaqSection"), { ssr: false });
const CtaSection = dynamic(() => import("@/components/sections/CtaSection"), { ssr: false }); const CtaSection = dynamic(() => import("@/components/sections/CtaSection"), { ssr: false });
export default function HomeSections() { export default function HomeSections() {
@@ -17,10 +17,10 @@ export default function HomeSections() {
<> <>
<MaterialSymbolsFont /> <MaterialSymbolsFont />
<ApproccioSection /> <ApproccioSection />
<BeforeAfterSection /> <QuoteSection />
<ServicesSection /> <ServicesSection />
<AboutSection /> <AboutSection />
<FilosofiaSection /> <FaqSection />
<CtaSection /> <CtaSection />
</> </>
); );
frontend/src/components/Navbar.tsx
+45 -24
View File
@@ -17,14 +17,14 @@ export default function Navbar() {
const [menuOpen, setMenuOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false);
return ( return (
<nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-zinc-100"> <nav className="fixed top-0 w-full z-50 bg-white/80 backdrop-blur-md border-b border-zinc-200">
<div className="flex justify-between items-center px-6 lg:px-8 py-4 max-w-7xl mx-auto"> <div className="bg-transparent flex justify-between max-h-16 items-center px-6 lg:px-8 py-6 max-w-7xl mx-auto">
<Link href="/" className="block"> <Link href="/" className="block">
<Image <Image
src="/logo.svg" src="/logo.svg"
alt="CiMa Progetti" alt="CiMa Progetti"
width={110} width={130}
height={40} height={50}
className="h-8 w-auto" className="h-8 w-auto"
priority priority
/> />
@@ -43,7 +43,7 @@ export default function Navbar() {
))} ))}
<Link <Link
href="/contatti" href="/contatti"
className={`px-6 py-2 font-bold text-sm uppercase tracking-widest transition-all active:scale-95 ${ className={`px-6 py-2 font-bold text-sm uppercase tracking-widest transition-all active:scale-95 rounded-[10px] ${
pathname === "/contatti" pathname === "/contatti"
? "bg-primary text-white" ? "bg-primary text-white"
: "bg-primary text-white hover:brightness-110" : "bg-primary text-white hover:brightness-110"
@@ -58,31 +58,48 @@ export default function Navbar() {
className="lg:hidden flex items-center p-2 focus:outline-none" className="lg:hidden flex items-center p-2 focus:outline-none"
onClick={() => setMenuOpen(!menuOpen)} onClick={() => setMenuOpen(!menuOpen)}
aria-label="Toggle menu" aria-label="Toggle menu"
aria-expanded={menuOpen}
aria-controls="mobile-menu"
> >
<svg <div className="w-7 h-5 relative flex flex-col justify-between">
className="w-7 h-7" <span
fill="none" className={`block h-0.5 w-full bg-current rounded-full transition-all duration-150 ease-out origin-center ${
stroke="currentColor" menuOpen ? "translate-y-[9px] rotate-45" : ""
strokeWidth={2} }`}
viewBox="0 0 24 24" />
> <span
{menuOpen ? ( className={`block h-0.5 w-full bg-current rounded-full transition-opacity duration-150 ease-out ${
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" /> menuOpen ? "opacity-0" : ""
) : ( }`}
<path strokeLinecap="round" strokeLinejoin="round" d="M4 6h16M4 12h16M4 18h16" /> />
)} <span
</svg> className={`block h-0.5 w-full bg-current rounded-full transition-all duration-150 ease-out origin-center ${
menuOpen ? "-translate-y-[9px] -rotate-45" : ""
}`}
/>
</div>
</button> </button>
</div> </div>
{/* Mobile Menu */} {/* Mobile Menu */}
{menuOpen && ( <div
<div className="lg:hidden bg-white border-t border-zinc-100 px-6 py-6 space-y-4"> id="mobile-menu"
{navLinks.map((link) => ( aria-hidden={!menuOpen}
className="grid lg:hidden bg-transparent transition-[grid-template-rows] duration-200 ease-out"
style={{ gridTemplateRows: menuOpen ? "1fr" : "0fr" }}
>
<div className={`overflow-hidden min-h-0 ${menuOpen ? "border-t border-zinc-100" : ""}`}>
<div className="px-6 py-6 space-y-4 bg-white/80 backdrop-blur-md">
{navLinks.map((link, index) => (
<Link <Link
key={link.href} key={link.href}
href={link.href} href={link.href}
className="block font-sans uppercase tracking-tighter font-bold text-sm text-zinc-600 hover:text-primary transition-colors" className={`block font-sans uppercase tracking-tighter font-bold text-sm transition-all duration-150 ease-out ${
menuOpen
? "text-zinc-600 hover:text-primary opacity-100 translate-y-0"
: "opacity-0 translate-y-2"
}`}
style={{ transitionDelay: menuOpen ? `${index * 40}ms` : "0ms" }}
onClick={() => setMenuOpen(false)} onClick={() => setMenuOpen(false)}
> >
{link.label} {link.label}
@@ -90,13 +107,17 @@ export default function Navbar() {
))} ))}
<Link <Link
href="/contatti" href="/contatti"
className="block bg-primary text-white px-6 py-2 font-bold text-sm uppercase tracking-widest text-center" className={`block bg-primary text-white px-6 py-2 font-bold text-sm uppercase tracking-widest text-center rounded-[10px] transition-all duration-150 ease-out ${
menuOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"
}`}
style={{ transitionDelay: menuOpen ? "160ms" : "0ms" }}
onClick={() => setMenuOpen(false)} onClick={() => setMenuOpen(false)}
> >
Contatti Contatti
</Link> </Link>
</div> </div>
)} </div>
</div>
</nav> </nav>
); );
} }
frontend/src/components/sections/AboutSection.tsx
+61 -41
View File
@@ -11,13 +11,14 @@ export default function AboutSection() {
const textRef = useRef<HTMLDivElement>(null); const textRef = useRef<HTMLDivElement>(null);
useGSAP(() => { useGSAP(() => {
if (!sectionRef.current || !textRef.current) return; if (!sectionRef.current) return;
if (imageRef.current) {
gsap.fromTo( gsap.fromTo(
textRef.current, imageRef.current,
{ y: 40, opacity: 0 }, { x: -60, opacity: 0 },
{ {
y: 0, x: 0,
opacity: 1, opacity: 1,
duration: 1, duration: 1,
ease: "power3.out", ease: "power3.out",
@@ -28,59 +29,78 @@ export default function AboutSection() {
}, },
} }
); );
}
if (textRef.current) {
gsap.fromTo(
Array.from(textRef.current.children),
{ y: 40, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.8,
stagger: 0.15,
ease: "power3.out",
scrollTrigger: {
trigger: sectionRef.current,
start: "top 70%",
toggleActions: "play none none reverse",
},
}
);
}
}, { scope: sectionRef }); }, { scope: sectionRef });
return ( return (
<section <section
ref={sectionRef} ref={sectionRef}
id="chi-siamo" id="chi-siamo"
className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8 bg-black relative overflow-hidden" className="snap-section py-24 px-6 lg:px-12 bg-white overflow-hidden"
>
{/* Background Image */}
<div
ref={imageRef}
className="absolute inset-0 z-0"
> >
<div className="max-w-7xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-16 items-center lg:items-start justify-center">
{/* Image */}
<div ref={imageRef} className="relative w-full max-w-sm lg:max-w-[400px] shrink-0">
<Image <Image
alt="Architettura moderna in vetro e acciaio" alt="Nicola Leone Ciardi e Valentina Madaudo"
src="/images/architecture.jpg" src="/images/team.jpg"
fill width={640}
sizes="100vw" height={800}
className="object-cover" className="w-full h-auto object-cover grayscale hover:grayscale-0 transition-all duration-500"
priority={false}
/> />
<div className="absolute inset-0 bg-black/50" />
</div> </div>
{/* Content Overlay */} {/* Content */}
<div ref={textRef} className="max-w-3xl mx-auto text-center text-white relative z-10"> <div ref={textRef} className="space-y-10">
<h2 className="text-huge font-black uppercase mb-8">Chi Siamo</h2> <div className="space-y-6">
<p className="text-base sm:text-lg lg:text-xl leading-relaxed mb-8 sm:mb-12"> <p className="text-secondary font-medium leading-relaxed max-w-xl text-base lg:text-lg">
CiMa Progetti unisce architettura e software engineering. Costruiamo Due figure giovani, ma strutturate: il dualismo di tecnica e
sistemi digitali solidi e scalabili per aziende che non accettano visione, processo e creatività, velocità e consapevolezza.
compromessi.
</p> </p>
<div className="flex flex-col sm:flex-row gap-8 lg:gap-12 border-t border-white/30 pt-8 justify-center"> <h2 className="text-4xl lg:text-5xl xl:text-6xl font-black uppercase leading-[0.85] tracking-tighter">
<div> DALL&apos;IDEA
<p className="text-2xl lg:text-3xl font-black">AI Expert</p> <br />
<p className="text-xs uppercase tracking-widest text-primary font-bold"> AI PROCESSI.
Nicola Leone Ciardi <br />
DALLA <span className="text-primary">VISIONE</span>
<br />
AL SISTEMA.
</h2>
<p className="text-secondary font-medium leading-relaxed max-w-xl text-base lg:text-lg">
Perché per noi innovare significa integrare competenze e
prospettive, per costruire soluzioni che non siano solo funzionali,
ma solide nel tempo.
</p> </p>
</div> </div>
<div>
<p className="text-2xl lg:text-3xl font-black">Jr Engineer</p> {/* Name badges */}
<p className="text-xs uppercase tracking-widest text-primary font-bold"> <div className="pt-8 flex flex-col sm:flex-row gap-8 items-start relative">
Valentina Madaudo <div className="border border-on-background px-6 sm:px-8 py-4 sm:py-5 flex items-center justify-center font-bold text-lg sm:text-xl bg-white shadow-sm hover:shadow-xl transition-shadow cursor-default z-10 w-full sm:w-auto sm:min-w-[280px]">
</p> Nicola Leone <span className="text-primary ml-2">Ciardi</span>
</div>
<div className="border border-outline-variant px-6 sm:px-8 py-4 sm:py-5 flex items-center justify-center font-bold text-lg sm:text-xl bg-white shadow-lg hover:shadow-2xl transition-all cursor-default sm:rotate-[-6deg] sm:-mt-4 sm:ml-[-20px] z-20 w-full sm:w-auto sm:min-w-[280px]">
Valentina <span className="text-primary ml-2">Madaudo</span>
</div> </div>
</div> </div>
<div className="mt-12">
<a
href="/contatti"
className="inline-block border-2 border-white bg-white text-dark-bg px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-transparent hover:text-white active:scale-[0.98]"
>
Lavora con Noi
</a>
</div> </div>
</div> </div>
</section> </section>
frontend/src/components/sections/ApproccioSection.tsx
+87 -19
View File
@@ -5,15 +5,14 @@ import gsap from "gsap";
export default function ApproccioSection() { export default function ApproccioSection() {
const sectionRef = useRef<HTMLElement>(null); const sectionRef = useRef<HTMLElement>(null);
const contentRef = useRef<HTMLDivElement>(null); const headerRef = useRef<HTMLDivElement>(null);
const cardsRef = useRef<HTMLDivElement>(null);
useGSAP(() => { useGSAP(() => {
if (!contentRef.current) return; if (!headerRef.current || !cardsRef.current) return;
const children = contentRef.current.children;
gsap.fromTo( gsap.fromTo(
Array.from(children), Array.from(headerRef.current.children),
{ y: 40, opacity: 0 }, { y: 40, opacity: 0 },
{ {
y: 0, y: 0,
@@ -28,32 +27,101 @@ export default function ApproccioSection() {
}, },
} }
); );
gsap.fromTo(
Array.from(cardsRef.current.children),
{ y: 50, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.8,
stagger: 0.2,
ease: "power3.out",
scrollTrigger: {
trigger: cardsRef.current,
start: "top 80%",
toggleActions: "play none none reverse",
},
}
);
}, { scope: sectionRef }); }, { scope: sectionRef });
return ( return (
<section <section
ref={sectionRef} ref={sectionRef}
id="approccio" id="approccio"
className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8 bg-surface-container-low" className="snap-section py-24 px-6 lg:px-12 bg-white"
> >
<div ref={contentRef} className="max-w-3xl mx-auto text-center"> <div
<p className="text-primary font-bold uppercase tracking-widest text-sm mb-4"> ref={headerRef}
className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12 items-start"
>
<div className="lg:col-span-5">
<p className="text-primary font-black uppercase tracking-widest text-xs mb-4">
L&apos;Approccio L&apos;Approccio
</p> </p>
<h2 className="text-huge font-black uppercase mb-8"> <h2 className="text-5xl lg:text-6xl font-black uppercase leading-[0.9] mb-8">
Tutto Collegato Ecosistema
<br />
Integrato
</h2> </h2>
<p className="text-base sm:text-xl lg:text-2xl leading-relaxed text-on-background mb-8 sm:mb-12"> </div>
Non software isolati, ma infrastrutture digitali portanti. Ogni <div className="lg:col-span-7">
componente dialoga con gli altri per creare un sistema unico, <p className="text-xl lg:text-2xl font-medium leading-relaxed text-on-background">
costruito attorno al vostro modo di lavorare. Non costruiamo software isolati, ma infrastrutture digitali portanti.
Ogni riga di codice è un pilastro, ogni interfaccia un varco
funzionale verso l&apos;efficienza operativa. La nostra visione
architettonica trasforma il caos informativo in un sistema di
precisione millimetrica.
</p> </p>
<a </div>
href="#servizi" </div>
className="inline-block border-2 border-on-background text-on-background px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98]"
<div
ref={cardsRef}
className="max-w-7xl mx-auto mt-20 grid grid-cols-1 md:grid-cols-2 gap-8"
> >
Scopri i Servizi {/* Prima */}
</a> <div className="bg-surface-container-low p-12 lg:p-16 min-h-[400px]">
<span className="material-symbols-outlined text-primary text-5xl mb-8 block">
architecture
</span>
<h3 className="text-4xl font-black uppercase mb-10">Prima</h3>
<ul className="space-y-6 text-secondary font-medium">
{[
"Database frammentati",
"Processi manuali obsoleti",
"Vulnerabilità di sistema",
"Perdita di controllo strategico",
].map((item) => (
<li key={item} className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-primary shrink-0" />
{item}
</li>
))}
</ul>
</div>
{/* Dopo */}
<div className="bg-surface-container-low p-12 lg:p-16 min-h-[400px]">
<span className="material-symbols-outlined text-primary text-5xl mb-8 block">
domain
</span>
<h3 className="text-4xl font-black uppercase mb-10">Dopo</h3>
<ul className="space-y-6 text-on-background font-medium">
{[
"Flussi centralizzati",
"Automazione intelligente",
"Crittografia militare",
"Dashboard decisionali real-time",
].map((item) => (
<li key={item} className="flex items-center gap-3">
<span className="w-1.5 h-1.5 bg-primary shrink-0" />
{item}
</li>
))}
</ul>
</div>
</div> </div>
</section> </section>
); );
frontend/src/components/sections/CtaSection.tsx
+18 -62
View File
@@ -7,10 +7,10 @@ import gsap from "gsap";
export default function CtaSection() { export default function CtaSection() {
const sectionRef = useRef<HTMLElement>(null); const sectionRef = useRef<HTMLElement>(null);
const headingRef = useRef<HTMLHeadingElement>(null); const headingRef = useRef<HTMLHeadingElement>(null);
const buttonRef = useRef<HTMLAnchorElement>(null); const contentRef = useRef<HTMLDivElement>(null);
useGSAP(() => { useGSAP(() => {
if (!headingRef.current || !buttonRef.current) return; if (!headingRef.current || !contentRef.current) return;
const tl = gsap.timeline({ const tl = gsap.timeline({
defaults: { ease: "power3.out" }, defaults: { ease: "power3.out" },
@@ -21,12 +21,14 @@ export default function CtaSection() {
}, },
}); });
tl.fromTo(headingRef.current, tl.fromTo(
headingRef.current,
{ scale: 0.8, opacity: 0 }, { scale: 0.8, opacity: 0 },
{ scale: 1, opacity: 1, duration: 0.8 } { scale: 1, opacity: 1, duration: 0.8 }
).fromTo(buttonRef.current, ).fromTo(
contentRef.current.children,
{ opacity: 0, y: 20 }, { opacity: 0, y: 20 },
{ opacity: 1, y: 0, duration: 0.6 }, { opacity: 1, y: 0, duration: 0.6, stagger: 0.15 },
"-=0.4" "-=0.4"
); );
}, { scope: sectionRef }); }, { scope: sectionRef });
@@ -35,75 +37,29 @@ export default function CtaSection() {
<section <section
ref={sectionRef} ref={sectionRef}
id="progetti" id="progetti"
className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8 bg-primary text-white relative overflow-hidden" className="snap-section py-20 sm:py-28 lg:py-32 px-6 bg-primary text-white text-center"
> >
<div className="max-w-4xl mx-auto w-full relative z-10 text-center"> <div className="max-w-4xl mx-auto">
<div className="mx-auto">
<h2 <h2
ref={headingRef} ref={headingRef}
className="text-4xl md:text-6xl lg:text-7xl font-black uppercase mb-12 leading-none" className="text-5xl sm:text-7xl lg:text-9xl font-black uppercase leading-none mb-8 sm:mb-10"
> >
Pronto a scalare? SYSTEM
<br />
UPGRADE
</h2> </h2>
<div ref={contentRef}>
<p className="text-lg sm:text-xl lg:text-2xl font-medium mb-8 sm:mb-12 max-w-2xl mx-auto opacity-90">
Progettiamo insieme il prossimo tassello digitale della tua azienda.
</p>
<Link <Link
ref={buttonRef}
href="/contatti" href="/contatti"
className="inline-block border-2 border-white bg-white text-primary px-8 py-4 sm:px-12 sm:py-6 font-black uppercase tracking-widest text-sm sm:text-lg lg:text-xl hover:bg-transparent hover:text-white hover:border-2 hover:border-white transition-colors" className="inline-block border-2 border-white hover:bg-transparent hover:text-white bg-white text-primary px-8 sm:px-12 py-4 sm:py-5 font-black uppercase tracking-widest text-base sm:text-lg transition-all active:scale-[0.98] rounded-[10px]"
> >
Contattaci Contattaci
</Link> </Link>
</div> </div>
</div> </div>
{/* Decorative SVG Lines */}
<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> </section>
); );
} }
frontend/src/components/sections/FaqSection.tsx
+125
View File
@@ -0,0 +1,125 @@
"use client";
import { useRef, useState } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
const faqs = [
{
question: "Realizzate solo siti web?",
answer:
"No. Progettiamo ecosistemi digitali completi: siti, ecommerce, funnel di conversione, piattaforme, dashboard, automazioni, integrazioni e infrastrutture digitali costruite per supportare la crescita e migliorare la gestione operativa.",
},
{
question: "Cosa vi distingue da una classica agenzia?",
answer:
"Non ci fermiamo al design o allo sviluppo di singoli asset. Lavoriamo come partner tecnico e strategico, progettando soluzioni che collegano immagine, processi, strumenti e performance in un sistema più ordinato, efficiente e misurabile.",
},
{
question: "Come utilizzate l'IA nei progetti?",
answer:
"Usiamo l’IA come leva per accelerare, organizzare e potenziare i processi, senza sostituire il valore umano. La tecnologia aumenta velocità e precisione; strategia, controllo e decisioni restano guidati dall’esperienza.",
},
{
question: "Possiamo integrare i vostri servizi con strumenti che utilizziamo già?",
answer:
"Sì. Quando possibile partiamo da ciò che l’azienda ha già costruito, integrando strumenti, processi e flussi di lavoro esistenti per migliorare l’operatività senza creare complessità inutile.",
},
{
question: "Ci seguite anche dopo la realizzazione?",
answer:
"Sì. Un progetto digitale funziona davvero quando può evolversi nel tempo. Per questo accompagniamo il cliente anche nelle fasi di ottimizzazione, miglioramento e crescita del sistema implementato.",
},
{
question: "Perché scegliere CiMa come partner?",
answer:
"Perché uniamo visione progettuale, competenze tecniche e un approccio aggiornato ai sistemi digitali contemporanei. Costruiamo soluzioni concrete, pensate per essere utili, sostenibili e davvero integrate nel lavoro quotidiano dell’azienda.",
},
];
export default function FaqSection() {
const sectionRef = useRef<HTMLElement>(null);
const titleRef = useRef<HTMLDivElement>(null);
const listRef = useRef<HTMLDivElement>(null);
const [openIndex, setOpenIndex] = useState<number | null>(null);
useGSAP(() => {
if (!titleRef.current || !listRef.current) return;
gsap.fromTo(
titleRef.current,
{ x: -40, opacity: 0 },
{
x: 0,
opacity: 1,
duration: 0.8,
ease: "power3.out",
scrollTrigger: {
trigger: sectionRef.current,
start: "top 70%",
toggleActions: "play none none reverse",
},
}
);
gsap.fromTo(
Array.from(listRef.current.children),
{ y: 20, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.6,
stagger: 0.08,
ease: "power3.out",
scrollTrigger: {
trigger: sectionRef.current,
start: "top 70%",
toggleActions: "play none none reverse",
},
}
);
}, { scope: sectionRef });
return (
<section
ref={sectionRef}
className="snap-section py-24 px-6 lg:px-12 bg-dark-bg text-white"
>
<div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-12 gap-12">
<div ref={titleRef} className="lg:col-span-4">
<h2 className="text-7xl font-black uppercase">FAQs</h2>
</div>
<div ref={listRef} className="lg:col-span-8 space-y-2">
{faqs.map((faq, i) => (
<div
key={i}
className="border-b border-zinc-700 py-6 cursor-pointer"
onClick={() => setOpenIndex(openIndex === i ? null : i)}
>
<div className="flex justify-between items-center">
<h3 className="text-xl lg:text-2xl font-bold uppercase tracking-tight pr-4">
{faq.question}
</h3>
<span className="material-symbols-outlined text-4xl shrink-0 transition-transform duration-300"
style={{ transform: openIndex === i ? "rotate(45deg)" : "rotate(0deg)" }}
>
add
</span>
</div>
<div
className="overflow-hidden transition-all duration-300"
style={{
maxHeight: openIndex === i ? "200px" : "0px",
opacity: openIndex === i ? 1 : 0,
}}
>
<p className="text-zinc-400 font-medium leading-relaxed pt-4">
{faq.answer}
</p>
</div>
</div>
))}
</div>
</div>
</section>
);
}
frontend/src/components/sections/HeroSection.tsx
+45 -14
View File
@@ -2,26 +2,57 @@ import Link from "next/link";
export default function HeroSection() { export default function HeroSection() {
return ( return (
<section className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8 pt-20"> <section className="snap-section min-h-screen flex flex-col justify-center items-center text-center px-6 pt-24 pb-12">
<div className="max-w-5xl mx-auto text-center"> <div className="mb-3 hero-fade-up">
<h1 className="text-huge font-black uppercase mb-8 sm:mb-12 hero-slide-up"> <span className="bg-primary text-on-primary px-6 py-2 font-black uppercase text-sm tracking-widest inline-block rounded-[10px]">
La <span className="text-primary">struttura</span> digitale del soluzioni digitali
tuo business. </span>
</div>
<h1 className="text-huge font-black uppercase mb-10 max-w-5xl hero-slide-up">
PORTA IN <span className="text-primary">CIMA</span>
<br />
IL TUO BUSINESS
</h1> </h1>
<div className="flex flex-col sm:flex-row gap-6 justify-center"> <p className="text-lg lg:text-xl font-medium max-w-2xl mb-12 hero-fade-up">
Il tuo partner per scalare nella transizione 5.0:
<br />
<span className="font-black">
leader in automazioni IA, conversione
<br className="hidden sm:inline" />
online e infrastrutture digitali per le aziende.
</span>
</p>
<div className="flex flex-col sm:flex-row gap-4 w-full sm:w-auto hero-fade-up hero-fade-up-delay-2">
<Link
href="/#servizi"
className="bg-primary text-on-primary px-10 py-5 font-black uppercase tracking-widest text-base transition-all border-3 border-primary hover:bg-transparent hover:text-primary active:scale-[0.98] text-center rounded-[10px]"
>
Vai ai servizi
</Link>
<Link <Link
href="/contatti" href="/contatti"
className="hero-fade-up hero-fade-up-delay-1 bg-primary text-on-primary px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:brightness-110 active:scale-[0.98] text-center" className="border-2 border-on-background text-on-background px-10 py-5 font-black uppercase tracking-widest text-base transition-all hover:bg-on-background hover:text-background active:scale-[0.98] text-center rounded-[10px]"
> >
Inizia il Progetto Contattaci
</Link> </Link>
<a
href="#filosofia"
className="hero-fade-up hero-fade-up-delay-2 border-2 border-on-background text-on-background px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:bg-on-background hover:text-background active:scale-[0.98] text-center"
>
Scopri il Metodo
</a>
</div> </div>
<div className="mt-15 flex flex-col items-center gap-4 text-secondary hero-fade-up hero-fade-up-delay-2">
<span className="text-[10px] uppercase tracking-[0.3em] font-bold">
Scopri di più
</span>
<svg
className="w-10 h-10 animate-bounce"
fill="none"
stroke="currentColor"
strokeWidth={1.5}
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m9 12.75 3 3m0 0 3-3m-3 3v-7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
/>
</svg>
</div> </div>
</section> </section>
); );
frontend/src/components/sections/QuoteSection.tsx
+48
View File
@@ -0,0 +1,48 @@
"use client";
import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";
export default function QuoteSection() {
const sectionRef = useRef<HTMLElement>(null);
const quoteRef = useRef<HTMLHeadingElement>(null);
useGSAP(() => {
if (!quoteRef.current) return;
gsap.fromTo(
quoteRef.current,
{ y: 30, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 1,
ease: "power3.out",
scrollTrigger: {
trigger: sectionRef.current,
start: "top 70%",
toggleActions: "play none none reverse",
},
}
);
}, { scope: sectionRef });
return (
<section
ref={sectionRef}
className="snap-section py-24 px-6 bg-dark-bg text-white flex flex-col items-center justify-center text-center"
>
<div className="max-w-5xl">
<h2
ref={quoteRef}
className="text-2xl md:text-3xl lg:text-4xl italic leading-tight"
>
<span className="font-black">&ldquo;Trasformiamo le tue idee in realtà digitale:</span>
<br />
<span className="font-normal">velocità dell&apos;IA ed esperienza umana, animate dalla tua
esperienza.&rdquo;</span>
</h2>
</div>
</section>
);
}
frontend/src/components/sections/ServicesSection.tsx
+129 -148
View File
@@ -1,91 +1,114 @@
"use client"; "use client";
import { useRef, useState, useCallback, useEffect } from "react"; import { useRef } from "react";
import { useGSAP } from "@gsap/react"; import { useGSAP } from "@gsap/react";
import gsap from "gsap"; import gsap from "gsap";
import ScrollProgressDots from "@/components/ScrollProgressDots";
const services = [
{
id: "portali",
title: "Portali & Infrastrutture Digitali",
icon: "hub",
description: "Siti, portali e web app costruiti per funzionare e crescere con voi.",
},
{
id: "database",
title: "Database & Sistemi Gestionali",
icon: "schema",
description: "I vostri dati organizzati, accessibili e pronti per le decisioni che contano.",
},
{
id: "ecommerce",
title: "E-commerce & Piattaforme",
icon: "shopping_bag",
description: "Vendita online integrata con la vostra logistica, pronta a scalare.",
},
{
id: "automazioni",
title: "Automazioni & IA",
icon: "memory",
description:
"Meno lavoro ripetitivo, più tempo per quello che conta. IA anche in locale, i vostri dati restano vostri.",
},
{
id: "cybersecurity",
title: "Cybersicurezza",
icon: "verified_user",
description: "Protezione proattiva e monitoraggio continuo dei vostri asset digitali.",
},
];
export default function ServicesSection() { export default function ServicesSection() {
const sectionRef = useRef<HTMLElement>(null); const sectionRef = useRef<HTMLElement>(null);
const desktopContainerRef = useRef<HTMLDivElement>(null); const headerRef = useRef<HTMLDivElement>(null);
const mobileScrollRef = useRef<HTMLDivElement>(null); const cardsRef = useRef<HTMLDivElement>(null);
const [currentServiceMobile, setCurrentServiceMobile] = useState(0);
const handleMobileScroll = useCallback(() => {
const container = mobileScrollRef.current;
if (!container) return;
const card = container.querySelector("[data-mobile-card]") as HTMLElement;
if (!card) return;
const cardWidth = card.offsetWidth;
const gap = parseFloat(getComputedStyle(container).gap) || 0;
const index = Math.round(container.scrollLeft / (cardWidth + gap));
setCurrentServiceMobile(Math.min(index, services.length - 1));
}, []);
useEffect(() => {
const container = mobileScrollRef.current;
if (!container) return;
container.addEventListener("scroll", handleMobileScroll, { passive: true });
return () => container.removeEventListener("scroll", handleMobileScroll);
}, [handleMobileScroll]);
useGSAP(() => { useGSAP(() => {
if (!sectionRef.current) return; if (!headerRef.current || !cardsRef.current) return;
const mm = gsap.matchMedia();
mm.add("(min-width: 1024px)", () => { // Check for reduced motion preference
const cards = desktopContainerRef.current?.querySelectorAll("[data-service-card]"); const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
if (cards && cards.length > 0) { if (prefersReducedMotion) {
gsap.set(Array.from(headerRef.current.children), { y: 0, opacity: 1 });
gsap.set(Array.from(cardsRef.current.children), { y: 0, opacity: 1 });
return;
}
// Desktop: Pinned ScrollTrigger for header + first 3 cards,
// then independent triggers for the bottom 2 cards after unpin
gsap.matchMedia().add("(min-width: 768px)", () => {
const allCards = Array.from(cardsRef.current!.children);
const topCards = allCards.slice(0, 3);
const bottomCards = allCards.slice(3);
// Set bottom cards to invisible initially
gsap.set(bottomCards, { y: 60, opacity: 0 });
const tl = gsap.timeline({
scrollTrigger: {
trigger: sectionRef.current,
start: "top top",
end: "+=900",
scrub: 1,
pin: true,
},
});
tl.fromTo(
Array.from(headerRef.current!.children),
{ y: 40, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.8, stagger: 0.15, ease: "power3.out" },
0
);
tl.fromTo(
topCards,
{ y: 80, opacity: 0 },
{ y: 0, opacity: 1, duration: 0.8, stagger: 0.15, ease: "power3.out" },
0.3
);
// Bottom 2 cards animate independently after section unpins
bottomCards.forEach((card) => {
gsap.fromTo( gsap.fromTo(
Array.from(cards), card,
{ y: 60, opacity: 0 }, { y: 60, opacity: 0 },
{ {
y: 0, y: 0,
opacity: 1, opacity: 1,
stagger: 0.1,
duration: 0.8, duration: 0.8,
ease: "power3.out", ease: "power3.out",
scrollTrigger: { scrollTrigger: {
trigger: sectionRef.current, trigger: card as HTMLElement,
start: "top 70%", start: "top 90%",
toggleActions: "play none none reverse", toggleActions: "play none none reverse",
}, },
} }
); );
});
});
// Mobile: Independent ScrollTriggers without pinning
gsap.matchMedia().add("(max-width: 767px)", () => {
gsap.fromTo(
Array.from(headerRef.current!.children),
{ y: 30, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.8,
stagger: 0.15,
ease: "power3.out",
scrollTrigger: {
trigger: sectionRef.current,
start: "top 85%",
toggleActions: "play none none reverse",
},
} }
);
Array.from(cardsRef.current!.children).forEach((card, index) => {
gsap.fromTo(
card,
{ y: 80, opacity: 0 },
{
y: 0,
opacity: 1,
duration: 0.8,
ease: "power3.out",
scrollTrigger: {
trigger: card as HTMLElement,
start: "top 85%",
toggleActions: "play none none reverse",
},
}
);
});
}); });
}, { scope: sectionRef }); }, { scope: sectionRef });
@@ -93,147 +116,105 @@ export default function ServicesSection() {
<section <section
ref={sectionRef} ref={sectionRef}
id="servizi" id="servizi"
className="snap-section min-h-screen flex items-center justify-center px-6 lg:px-8" className="overflow-hidden py-20 lg:py-32 px-6 lg:px-8"
> >
<div className="max-w-7xl mx-auto w-full"> <div className="max-w-7xl mx-auto">
<div className="mb-16 text-center lg:text-left"> {/* Header */}
<h2 className="text-2xl sm:text-4xl lg:text-5xl font-black uppercase mb-4 sm:mb-6"> <div
ref={headerRef}
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 Cosa Facciamo
</h2> </h2>
<div className="w-24 h-2 bg-primary mb-8 hidden lg:block" /> <div className="w-24 h-2 bg-primary mb-8" />
<p className="text-base sm:text-xl text-secondary leading-relaxed max-w-2xl"> <p className="text-xl text-secondary leading-relaxed max-w-2xl">
Soluzioni su misura per il vostro metodo di lavoro. Automazione, Soluzioni su misura per il vostro metodo di lavoro. Automazione,
gestione dati e competenze umane in un unico flusso. gestione dati e competenze umane in un unico flusso.
</p> </p>
</div> </div>
</div>
{/* Desktop Grid */} {/* Services Grid */}
<div ref={desktopContainerRef} className="hidden lg:grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
{/* Portali */}
<div <div
data-service-card ref={cardsRef}
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" 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"> <span className="material-symbols-outlined text-4xl mb-8 block text-primary group-hover:text-white">
hub hub
</span> </span>
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4"> <h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
{services[0].title} Connetti &amp; dai forma alla tua idea
</h3> </h3>
<p className="opacity-70 group-hover:opacity-100"> <p className="opacity-70 group-hover:opacity-100">
{services[0].description} App, piattaforme e infrastrutture digitali: architetture progettate per dare vita ai tuoi progetti e connettere il tuo lavoro.
</p> </p>
</div> </div>
{/* Database */} {/* Database */}
<div <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">
data-service-card
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"> <span className="material-symbols-outlined text-4xl mb-8 block text-primary group-hover:text-white">
schema schema
</span> </span>
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4"> <h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
{services[1].title} Organizza e gestisci
</h3> </h3>
<p className="opacity-70 group-hover:opacity-100"> <p className="opacity-70 group-hover:opacity-100">
{services[1].description} Sviluppiamo dashboard e gestionali strutturati sulle tue esigenze aziendali: organizzazione del dato al servizio della decisione. Sistemi su misura che riflettono i vostri processi reali.
</p> </p>
</div> </div>
{/* E-commerce */} {/* E-commerce */}
<div <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">
data-service-card
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"> <span className="material-symbols-outlined text-4xl mb-8 block text-primary group-hover:text-white">
shopping_bag shopping_bag
</span> </span>
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4"> <h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
{services[2].title} Mostra e vendi i tuoi prodotti
</h3> </h3>
<p className="opacity-70 group-hover:opacity-100"> <p className="opacity-70 group-hover:opacity-100">
{services[2].description} Sviluppiamo siti web ed e-commerce pensati non solo per mostrare, ma per gestire in modo completo vendita, pagamenti, ordini e logistica.
</p> </p>
</div> </div>
{/* Automazioni & IA */} {/* Automazioni & IA */}
<div <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 transition-colors duration-300 hover:bg-primary">
data-service-card
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"> <div className="max-w-xl">
<h3 className="text-2xl lg:text-3xl font-black uppercase mb-4"> <h3 className="text-2xl lg:text-3xl font-black uppercase mb-4">
{services[3].title} Potenzia i tuoi processi
</h3> </h3>
<p className="opacity-60 text-base lg:text-lg"> <p className="opacity-60 text-base group-hover:opacity-100 transition-all lg:text-lg">
{services[3].description} Dalle automazioni che alleggeriscono i lavori ripetitivi, fino a report
<br />
esaustivi sui tuoi dati realizzati dall'intelligenza artificiale.
<br />
IA anche in locale per la massima protezione dei tuoi dati.
</p> </p>
</div> </div>
<span className="material-symbols-outlined text-7xl text-primary animate-pulse"> <span className="material-symbols-outlined text-7xl text-white animate-pulse">
memory memory
</span> </span>
</div> </div>
{/* Cybersicurezza */} {/* Cybersicurezza */}
<div <div className="bg-zinc-900 text-white p-8 lg:p-12 flex flex-col justify-between hover:bg-primary transition-colors duration-300">
data-service-card
className="bg-primary text-white p-8 lg:p-12 flex flex-col justify-between"
>
<div> <div>
<h3 className="text-xl lg:text-2xl font-black uppercase mb-4"> <h3 className="text-xl lg:text-2xl font-black uppercase mb-4">
{services[4].title} Cybersicurezza
</h3> </h3>
<p className="opacity-80">{services[4].description}</p> <p className="opacity-80 group-hover:opacity-100 transition-all">
Protezione proattiva e monitoraggio continuo dei vostri asset
digitali.
</p>
</div> </div>
<span className="material-symbols-outlined text-4xl mt-8"> <span className="material-symbols-outlined text-4xl mt-8">
verified_user verified_user
</span> </span>
</div> </div>
</div> </div>
{/* Mobile Carousel — horizontal scroll-snap */}
<div className="lg:hidden mb-8">
<div
ref={mobileScrollRef}
className="flex overflow-x-auto snap-x snap-mandatory scrollbar-hide gap-4"
style={{ WebkitOverflowScrolling: "touch" }}
>
{services.map((service) => (
<div
key={service.id}
data-mobile-card
className="snap-start w-[calc(100vw-3rem)] shrink-0 bg-surface-container p-8 border-t-4 border-primary space-y-6"
>
<span className="material-symbols-outlined text-4xl block text-primary">
{service.icon}
</span>
<h3 className="text-xl font-black uppercase mb-4">
{service.title}
</h3>
<p className="text-on-surface">{service.description}</p>
</div>
))}
</div>
{/* Mobile Progress Dots */}
<div className="flex justify-center mt-6">
<ScrollProgressDots
total={services.length}
current={currentServiceMobile}
/>
</div>
</div>
{/* CTA */}
<div className="text-center mt-12">
<a
href="/contatti"
className="inline-block bg-primary text-on-primary px-6 py-3 sm:px-10 sm:py-5 font-bold uppercase tracking-widest text-sm sm:text-lg transition-all hover:brightness-110 active:scale-[0.98]"
>
Parliamo del tuo Progetto
</a>
</div>
</div> </div>
</section> </section>
); );