-
- Pronto a scalare?
-
+
+
+ SYSTEM
+
+ UPGRADE
+
+
+
+ Progettiamo insieme il prossimo tassello digitale della tua azienda.
+
Contattaci
-
- {/* Decorative SVG Lines */}
-
-
-
);
}
diff --git a/frontend/src/components/sections/FaqSection.tsx b/frontend/src/components/sections/FaqSection.tsx
new file mode 100644
index 0000000..2c338ef
--- /dev/null
+++ b/frontend/src/components/sections/FaqSection.tsx
@@ -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
(null);
+ const titleRef = useRef(null);
+ const listRef = useRef(null);
+ const [openIndex, setOpenIndex] = useState(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 (
+
+
+
+
FAQs
+
+
+ {faqs.map((faq, i) => (
+
setOpenIndex(openIndex === i ? null : i)}
+ >
+
+
+ {faq.question}
+
+
+ add
+
+
+
+
+ ))}
+
+
-
- La struttura digitale del
- tuo business.
-
-
+
+
+
+ soluzioni digitali
+
+
+
+ PORTA IN CIMA
+
+ IL TUO BUSINESS
+
+
+ Il tuo partner per scalare nella transizione 5.0:
+
+
+ leader in automazioni IA, conversione
+
+ online e infrastrutture digitali per le aziende.
+
+
+
+
+ Vai ai servizi
+
+
+ Contattaci
+
+
+
+
+ Scopri di più
+
+
);
diff --git a/frontend/src/components/sections/QuoteSection.tsx b/frontend/src/components/sections/QuoteSection.tsx
new file mode 100644
index 0000000..aa159a4
--- /dev/null
+++ b/frontend/src/components/sections/QuoteSection.tsx
@@ -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
(null);
+ const quoteRef = useRef(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 (
+
+
+
+ “Trasformiamo le tue idee in realtà digitale:
+
+ velocità dell'IA ed esperienza umana, animate dalla tua
+ esperienza.”
+
+
+
+ );
+}
diff --git a/frontend/src/components/sections/ServicesSection.tsx b/frontend/src/components/sections/ServicesSection.tsx
index c86faf9..afe4bc9 100644
--- a/frontend/src/components/sections/ServicesSection.tsx
+++ b/frontend/src/components/sections/ServicesSection.tsx
@@ -1,91 +1,114 @@
"use client";
-import { useRef, useState, useCallback, useEffect } from "react";
+import { useRef } from "react";
import { useGSAP } from "@gsap/react";
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() {
const sectionRef = useRef(null);
- const desktopContainerRef = useRef(null);
- const mobileScrollRef = useRef(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]);
+ const headerRef = useRef(null);
+ const cardsRef = useRef(null);
useGSAP(() => {
- if (!sectionRef.current) return;
- const mm = gsap.matchMedia();
+ if (!headerRef.current || !cardsRef.current) return;
- mm.add("(min-width: 1024px)", () => {
- const cards = desktopContainerRef.current?.querySelectorAll("[data-service-card]");
- if (cards && cards.length > 0) {
+ // Check for reduced motion preference
+ const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+ 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(
- Array.from(cards),
+ card,
{ y: 60, opacity: 0 },
{
y: 0,
opacity: 1,
- stagger: 0.1,
duration: 0.8,
ease: "power3.out",
scrollTrigger: {
- trigger: sectionRef.current,
- start: "top 70%",
+ trigger: card as HTMLElement,
+ start: "top 90%",
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 });
@@ -93,147 +116,105 @@ export default function ServicesSection() {
-
-
-
- Cosa Facciamo
-
-
-
- Soluzioni su misura per il vostro metodo di lavoro. Automazione,
- gestione dati e competenze umane in un unico flusso.
-
+
+ {/* Header */}
+
+
+
+ Cosa Facciamo
+
+
+
+ Soluzioni su misura per il vostro metodo di lavoro. Automazione,
+ gestione dati e competenze umane in un unico flusso.
+
+
- {/* Desktop Grid */}
-
+ {/* Services Grid */}
+
{/* Portali */}
-
+
hub
- {services[0].title}
+ Connetti & dai forma alla tua idea
- {services[0].description}
+ App, piattaforme e infrastrutture digitali: architetture progettate per dare vita ai tuoi progetti e connettere il tuo lavoro.
{/* Database */}
-
+
schema
- {services[1].title}
+ Organizza e gestisci
- {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.
{/* E-commerce */}
-
+
shopping_bag
- {services[2].title}
+ Mostra e vendi i tuoi prodotti
- {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.
{/* Automazioni & IA */}
-
+
- {services[3].title}
+ Potenzia i tuoi processi
-
- {services[3].description}
+
+ Dalle automazioni che alleggeriscono i lavori ripetitivi, fino a report
+
+ esaustivi sui tuoi dati realizzati dall'intelligenza artificiale.
+
+ IA anche in locale per la massima protezione dei tuoi dati.
-
+
memory
{/* Cybersicurezza */}
-
+
- {services[4].title}
+ Cybersicurezza
-
{services[4].description}
+
+ Protezione proattiva e monitoraggio continuo dei vostri asset
+ digitali.
+
verified_user
-
- {/* Mobile Carousel — horizontal scroll-snap */}
-
-
- {services.map((service) => (
-
-
- {service.icon}
-
-
- {service.title}
-
-
{service.description}
-
- ))}
-
-
- {/* Mobile Progress Dots */}
-
-
-
-
-
- {/* CTA */}
-
);