From 0555a4c5f2f7a1918eeb42cf8ffd274a8a82ebce Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Sat, 7 Mar 2026 09:42:05 +0000
Subject: [PATCH] Add src/app/about/page.tsx

---
 src/app/about/page.tsx | 199 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 199 insertions(+)
 create mode 100644 src/app/about/page.tsx

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..1e87300
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
+import MediaAbout from '@/components/sections/about/MediaAbout';
+import FeatureCardTwentyFour from '@/components/sections/feature/FeatureCardTwentyFour';
+import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import { Leaf, BookOpen, Target, Users, HelpCircle } from 'lucide-react';
+
+export default function AboutPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="shift-hover"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="compact"
+      sizing="mediumLargeSizeMediumTitles"
+      background="none"
+      cardStyle="layered-gradient"
+      primaryButtonStyle="shadow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Agenzia Venn"
+          navItems={[
+            { name: "Chi Siamo", id: "/about" },
+            { name: "Il Programma", id: "/pathways" },
+            { name: "Solidarietà", id: "solidarity" },
+            { name: "Info Pratiche", id: "info" },
+            { name: "Contatti", id: "contact" }
+          ]}
+          button={{
+            text: "Scopri gli Stand",            href: "/pathways"
+          }}
+        />
+      </div>
+
+      <div id="hero" data-section="hero">
+        <HeroBillboardScroll
+          title="Chi Siamo: Agenzia Venn"
+          description="Agenzia Venn nasce dalla convinzione che la collaborazione genuina tra diversi attori sociali genera impatto reale. Il nostro nome richiama il Diagramma di Venn: l'intersezione di cerchi rappresenta come competenze, esperienze e visioni diverse creano uno spazio comune di trasformazione."
+          tag="La Nostra Missione"
+          tagIcon={Leaf}
+          tagAnimation="slide-up"
+          background={{ variant: "plain" }}
+          buttons={[
+            { text: "Scopri i Nostri Valori", href: "#values" }
+          ]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-vector/young-people-giving-high-five_23-2148367683.jpg"
+          imageAlt="Diagramma di Venn con tre cerchi che si intersecano, simbolo di collaborazione"
+          className="hero-section-about"
+          titleClassName="text-4xl md:text-6xl font-bold tracking-tight"
+          descriptionClassName="text-lg md:text-xl leading-relaxed"
+          buttonContainerClassName="flex flex-col sm:flex-row gap-4 mt-8"
+        />
+      </div>
+
+      <div id="values" data-section="values">
+        <FeatureCardTwentyFour
+          title="I Nostri Tre Valori Fondamentali"
+          description="Agenzia Venn opera secondo tre principi cardine che guidano ogni nostra azione e progetto."
+          tag="Fondamenta Filosofiche"
+          tagIcon={BookOpen}
+          tagAnimation="blur-reveal"
+          features={[
+            {
+              id: "1",              title: "Collaborazione Autentica",              author: "Principio di Base",              description: "Crediamo che la vera trasformazione avviene quando diversi attori sociali—istituzioni, associazioni, famiglie, esperti—si incontrano in uno spazio di ascolto genuino. Non è cooperazione superficiale, ma condivisione di intenti e responsabilità condivisa nel creare soluzioni concrete.",              tags: ["Partnership", "Inclusione"],
+              imageSrc: "http://img.b2bpic.net/free-photo/group-diverse-people-holding-hands-together_23-2149159008.jpg",              imageAlt: "Persone diverse unite in un cerchio, simbolo di collaborazione autentica"
+            },
+            {
+              id: "2",              title: "Ecologia Concreta",              author: "Sostenibilità Pratica",              description: "Dalla scelta dei materiali alla logistica dell'evento, tutto è pensato con responsabilità ambientale. Utilizziamo materiali sostenibili, pratiche eco-compatibili e un approccio che riduce l'impronta ecologica. L'ecologia non è un'estetica, è una pratica quotidiana.",              tags: ["Sostenibilità", "Responsabilità"],
+              imageSrc: "http://img.b2bpic.net/free-photo/green-leaves-background_23-2148599889.jpg",              imageAlt: "Foglie verdi, simbolo di impegno ecologico e sostenibilità"
+            },
+            {
+              id: "3",              title: "Disponibilità Sociale",              author: "Ascolto Paziente",              description: "Siamo presenti per ascoltare attivamente e accompagnare con pazienza. Non giudichiamo; creiamo spazi sicuri dove dubbi, paure e domande possono emergere. La disponibilità significa essere sempre pronti a mettersi in gioco, adattarsi e imparare insieme alle comunità che servimo.",              tags: ["Empatia", "Supporto"],
+              imageSrc: "http://img.b2bpic.net/free-photo/people-support-each-other_23-2148599890.jpg",              imageAlt: "Persone che si supportano a vicenda, simbolo di disponibilità e ascolto"
+            },
+            {
+              id: "4",              title: "Accessibilità Universale",              author: "Standard, Non Eccezione",              description: "L'inclusione non è un supplemento, ma lo standard. Ogni evento, ogni materiale, ogni interazione è pensato per essere accessibile a tutti: persone con disabilità, lingue diverse, esigenze speciali. Questo è il nostro impegno strutturale verso una società realmente inclusiva.",              tags: ["Inclusione", "Accessibilità"],
+              imageSrc: "http://img.b2bpic.net/free-photo/accessible-ramp-entrance_23-2148599891.jpg",              imageAlt: "Rampa di accesso e simboli di accessibilità universale"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          cardTitleClassName="text-2xl md:text-3xl font-bold"
+          cardDescriptionClassName="text-base md:text-lg leading-relaxed"
+        />
+      </div>
+
+      <div id="mission" data-section="mission">
+        <MediaAbout
+          title="La Nostra Missione Impattante"
+          description="Agenzia Venn esiste per smantellare i tabù e creare dialogo costruttivo attorno alle tematiche di consapevolezza e prevenzione. Il nostro obiettivo è generare comunità informate, resilientie e capaci di fare scelte consapevoli. Attraverso collaborazione autentica, materiali sostenibili e una vera disponibilità sociale, creiamo spazi dove bambini, ragazzi, genitori e istituzioni si incontrano senza giudizio."
+          tag="Impatto Concreto"
+          tagIcon={Target}
+          tagAnimation="slide-up"
+          buttons={[{ text: "Partecipa all'Evento", href: "/pathways" }]}
+          buttonAnimation="slide-up"
+          imageSrc="http://img.b2bpic.net/free-photo/community-event-outdoor_23-2148599892.jpg"
+          imageAlt="Evento comunitario all'aperto con persone di tutte le età"
+          useInvertedBackground={true}
+          titleClassName="text-4xl md:text-5xl font-bold"
+          descriptionClassName="text-base md:text-lg leading-relaxed opacity-90"
+        />
+      </div>
+
+      <div id="team" data-section="team">
+        <FeatureCardTwentyFour
+          title="Il Team di Agenzia Venn"
+          description="Un gruppo di professionisti dediti, con esperienza in educazione, inclusione, comunicazione e progettazione comunitaria."
+          tag="Chi Siamo"
+          tagIcon={Users}
+          tagAnimation="blur-reveal"
+          features={[
+            {
+              id: "1",              title: "Coordinamento Progetti",              author: "Leadership Strategica",              description: "Coordiniamo la visione complessiva e garantiamo coerenza tra i diversi workstream. Dalla pianificazione dell'evento al monitoraggio dell'impatto, il nostro team assicura che ogni dettaglio rispecchi i nostri valori di collaborazione autentica e accessibilità universale.",              tags: ["Strategia", "Coordinamento"],
+              imageSrc: "http://img.b2bpic.net/free-photo/team-meeting-planning_23-2148599893.jpg",              imageAlt: "Team in una riunione di coordinamento strategico"
+            },
+            {
+              id: "2",              title: "Educazione e Prevenzione",              author: "Esperti Specializzati",              description: "Professionisti formati in educazione, psicologia della prevenzione e comunicazione consapevole. Loro garantiscono che i contenuti siano evidence-based, age-appropriate e orientati al dialogo piuttosto che alla paura.",              tags: ["Educazione", "Expertise"],
+              imageSrc: "http://img.b2bpic.net/free-photo/educator-workshop_23-2148599894.jpg",              imageAlt: "Educatore che conduce un workshop formativo"
+            },
+            {
+              id: "3",              title: "Inclusione e Accessibilità",              author: "Specialisti Dedicati",              description: "Il nostro team di accessibilità lavora per garantire che nessuno sia escluso. Dalle guide in Braille ai supporti acustici, dalla pianificazione dei servizi igienici alla formazione del personale, ogni aspetto è curato per davvero includere.",              tags: ["Accessibilità", "Inclusione"],
+              imageSrc: "http://img.b2bpic.net/free-photo/accessibility-specialist_23-2148599895.jpg",              imageAlt: "Specialista di accessibilità che verifica i materiali per l'inclusione"
+            },
+            {
+              id: "4",              title: "Comunicazione e Sostenibilità",              author: "Creativi Consapevoli",              description: "Comunichiamo il nostro messaggio attraverso materiali sostenibili, design inclusivo e narrativa autentica. Il nostro team di comunicazione trasforma concetti complessi in conversazioni accessibili e visivamente compelling.",              tags: ["Comunicazione", "Design"],
+              imageSrc: "http://img.b2bpic.net/free-photo/creative-design-workshop_23-2148599896.jpg",              imageAlt: "Team creativo che lavora su materiali di comunicazione sostenibili"
+            }
+          ]}
+          animationType="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          cardTitleClassName="text-2xl md:text-3xl font-bold"
+          cardDescriptionClassName="text-base md:text-lg leading-relaxed"
+        />
+      </div>
+
+      <div id="faq" data-section="faq">
+        <FaqSplitMedia
+          faqs={[
+            {
+              id: "1",              title: "Quando è stata fondata Agenzia Venn?",              content: "Agenzia Venn è nata dalla visione di creare spazi di dialogo autentico attorno a tematiche difficili. Il nostro primo evento major è previsto per Maggio 2026 al Parco BAM di Milano."
+            },
+            {
+              id: "2",              title: "Chi sono i nostri partner principali?",              content: "Collaboriamo con l'<strong>Unità Antidroga della Polizia</strong>, il <strong>Parco BAM Milano</strong>, <strong>City Security</strong>, e l'<strong>Associazione Nastro a Pois</strong>. Ogni partner porta expertise unica e condivide il nostro impegno per la comunità."
+            },
+            {
+              id: "3",              title: "Come posso contattare Agenzia Venn?",              content: "Puoi raggiungerci tramite il nostro sito, inviare una email direttamente, o visitarci durante l'evento al Parco BAM. Siamo sempre disponibili per domande, partnership, o semplicemente per ascoltare il tuo feedback."
+            },
+            {
+              id: "4",              title: "Posso diventare volontario per l'evento?",              content: "Sì! Siamo alla ricerca di volontari appassionati. Se sei interessato a supportare l'organizzazione, contattaci. Cerchiamo persone con background in educazione, accessibilità, comunicazione e logistica."
+            },
+            {
+              id: "5",              title: "Quale è il vostro approccio alla prevenzione?",              content: "Il nostro approccio è basato su <strong>dialogo autentico, non paura</strong>. Crediamo nell'informazione evidence-based, nello spazio sicuro per domande, e nell'accompagnamento paziente. Vogliamo emancipare, non spaventare."
+            },
+            {
+              id: "6",              title: "Come finanziate le vostre attività?",              content: "Combinazione di partnership con istituzioni, crowdfunding tramite gadget a offerta libera, e supporto da organizzazioni che condividono la nostra missione. Ogni euro è tracciato e allocato per massimizzare l'impatto."
+            }
+          ]}
+          imageSrc="http://img.b2bpic.net/free-photo/office-meeting-diverse-team_23-2148599897.jpg"
+          imageAlt="Il team di Agenzia Venn in una riunione collaborativa"
+          mediaAnimation="slide-up"
+          mediaPosition="right"
+          title="Domande su Agenzia Venn"
+          description="Scopri di più su chi siamo, cosa facciamo, e come puoi essere parte della nostra missione."
+          tag="Domande Frequenti"
+          tagIcon={HelpCircle}
+          tagAnimation="blur-reveal"
+          faqsAnimation="slide-up"
+          textboxLayout="default"
+          useInvertedBackground={false}
+          textBoxTitleClassName="text-4xl md:text-5xl font-bold"
+          textBoxDescriptionClassName="text-base md:text-lg leading-relaxed"
+          accordionClassName="space-y-2"
+        />
+      </div>
+
+      <div id="footer" data-section="footer">
+        <FooterLogoReveal
+          logoText="Agenzia Venn"
+          leftLink={{ text: "Privacy Policy", href: "#" }}
+          rightLink={{ text: "Torna alla Home", href: "/" }}
+          className="footer-venn"
+          wrapperClassName="relative min-h-screen"
+          containerClassName="flex flex-col items-center justify-center"
+          logoClassName="text-3xl font-bold tracking-tight"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}