diff --git a/src/app/chi-siamo/page.tsx b/src/app/chi-siamo/page.tsx new file mode 100644 index 0000000..5f60553 --- /dev/null +++ b/src/app/chi-siamo/page.tsx @@ -0,0 +1,54 @@ +import type { Metadata } from "next" +import { AnswerSection } from "@/components/chi-siamo/answer-section" +import { HistorySection } from "@/components/chi-siamo/history-section" +import { NumbersSection } from "@/components/chi-siamo/numbers-section" +import { PathSection } from "@/components/chi-siamo/path-section" +import { ProblemSection } from "@/components/chi-siamo/problem-section" +import { SupportSection } from "@/components/chi-siamo/support-section" +import { VisionSection } from "@/components/chi-siamo/vision-section" +import { + ChiSiamoAnswerShapes, + ChiSiamoHistoryShapes, + ChiSiamoNumbersShapes, + ChiSiamoPathShapes, + ChiSiamoProblemShapes, + ChiSiamoVisionShapes, +} from "./shapes" + +export const metadata: Metadata = { + title: "Su di noi", + description: "Rendiamo le informazioni sul PoliMi più accessibili, comprensibili e facili da trovare.", +} + +export default function ChiSiamoPage() { + return ( + // Narrower content column (1200px, as in Figma): `page-container` caps its padding on this variable +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+ ) +} diff --git a/src/app/chi-siamo/shapes.tsx b/src/app/chi-siamo/shapes.tsx new file mode 100644 index 0000000..3c16ff8 --- /dev/null +++ b/src/app/chi-siamo/shapes.tsx @@ -0,0 +1,88 @@ +import { Shape, ShapeLayer } from "@/components/shapes" + +/** + * `left` offsets are `calc(50% + Npx)`, relative to the horizontal center of + * the 1728px (desktop) Figma frame — see src/components/home/shapes.tsx. + * + * Each section's shapes are `top`-anchored to that section's heading (the + * section's top edge): `top = figmaY - figmaHeadingY`. The vision shapes are + * instead anchored to the page top, since that section starts at the top of + * `
`, where page y = Figma y. + * + * The Figma file only has a desktop frame for this page, so there are no + * mobile shapes yet. + */ + +export function ChiSiamoVisionShapes() { + return ( + + {/* Desktop Shapes */} + + + + + + ) +} + +export function ChiSiamoProblemShapes() { + return ( + + {/* Desktop Shapes */} + + + + ) +} + +export function ChiSiamoAnswerShapes() { + return ( + + {/* Desktop Shapes */} + + + ) +} + +export function ChiSiamoPathShapes() { + return ( + + {/* Desktop Shapes */} + + + + + ) +} + +export function ChiSiamoNumbersShapes() { + return ( + + {/* Desktop Shapes */} + + + + + ) +} + +export function ChiSiamoHistoryShapes() { + return ( + + {/* Desktop Shapes */} + + + ) +} diff --git a/src/components/chi-siamo/answer-section.tsx b/src/components/chi-siamo/answer-section.tsx new file mode 100644 index 0000000..84fd5ef --- /dev/null +++ b/src/components/chi-siamo/answer-section.tsx @@ -0,0 +1,49 @@ +import { FiAward, FiBookOpen, FiUsers } from "react-icons/fi" +import { CardIcon } from "@/components/card-icon" + +const cards = [ + { + title: "Community", + description: + "Gruppi Telegram e WhatsApp per corsi, scaglioni, sedi e interessi. Una rete moderata ogni giorno da admin volontari.", + icon: FiUsers, + }, + { + title: "Strumenti", + description: + "Strumenti gratuiti e open source: graduatorie e simulazioni TOL, bot per trovare il tuo gruppo, appunti e temi d’esame.", + icon: FiBookOpen, + }, + { + title: "Eventi", + description: "Eventi per incontrarsi e fare community. Collaborazioni che portano valore concreto agli studenti.", + icon: FiAward, + }, +] as const + +export function AnswerSection() { + return ( +
+
+

+ La nostra risposta +

+

+ Costruiamo e manteniamo la rete di comunicazione studentesca del Politecnico di Milano. +

+
+ +
+ {cards.map((card) => ( + + ))} +
+
+ ) +} diff --git a/src/components/chi-siamo/history-section.tsx b/src/components/chi-siamo/history-section.tsx new file mode 100644 index 0000000..7212a28 --- /dev/null +++ b/src/components/chi-siamo/history-section.tsx @@ -0,0 +1,44 @@ +import Link from "next/link" +import { FiArrowUpRight, FiClock, FiUsers } from "react-icons/fi" +import { Glass } from "@/components/glass" +import { GradientIcon } from "@/components/gradient-icon" +import { Button } from "@/components/ui/button" + +const blocks = [ + { + title: "Da dove veniamo", + description: "Dal primo gruppo Telegram, nel 2016, a una rete costruita dagli studenti, per gli studenti.", + icon: FiClock, + cta: "La nostra storia", + href: "/storia", + }, + { + title: "Come siamo organizzati", + icon: FiUsers, + description: "Direttivo, team operativi, admin e soci. Guarda come funziona la macchina dall'interno.", + cta: "La nostra struttura", + href: "/about", + }, +] as const + +export function HistorySection() { + return ( +
+ {blocks.map((block) => ( + + +

+ {block.title} +

+

{block.description}

+ + + ))} +
+ ) +} diff --git a/src/components/chi-siamo/numbers-section.tsx b/src/components/chi-siamo/numbers-section.tsx new file mode 100644 index 0000000..a4e5412 --- /dev/null +++ b/src/components/chi-siamo/numbers-section.tsx @@ -0,0 +1,50 @@ +import { FiBook, FiBookOpen, FiHeadphones, FiSend, FiUser, FiUsers } from "react-icons/fi" +import { GradientIcon } from "@/components/gradient-icon" +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" + +const stats = [ + { value: "500+", label: "gruppi Telegram e WhatsApp attivi", icon: FiSend }, + { value: "30+", label: "corsi di laurea coperti", icon: FiBook }, + { value: "45k+", label: "studenti raggiunti ogni anno", icon: FiUser }, + { value: "100+", label: "admin volontari su tutte le sedi", icon: FiUsers }, + { value: "5", label: "team operativi", icon: FiHeadphones }, + { value: "100%", label: "progetti tecnici rilasciati open source", icon: FiBookOpen }, +] as const + +export function NumbersSection() { + return ( +
+
+

+ I numeri +

+

+ Un network in continua crescita, costruito dagli studenti, per gli studenti. +

+
+ +
+
+ {stats.map((stat) => ( + + + + {stat.value} + + + + {stat.label} + + ))} +
+ +

+ Dal 2016 al fianco degli studenti del PoliMi +

+
+
+ ) +} diff --git a/src/components/chi-siamo/path-section.tsx b/src/components/chi-siamo/path-section.tsx new file mode 100644 index 0000000..3967c25 --- /dev/null +++ b/src/components/chi-siamo/path-section.tsx @@ -0,0 +1,56 @@ +import { FiBook, FiClipboard, FiFileText, FiGift, FiUser, FiUserCheck } from "react-icons/fi" +import { Glass } from "@/components/glass" +import { GradientIcon } from "@/components/gradient-icon" +import { cn } from "@/lib/utils" + +const steps = [ + { title: "TOL", description: "Simulazioni, guide e consigli per affrontarlo al meglio.", icon: FiBook }, + { title: "Ammissione", description: "Graduatorie, scadenze e tutto ciò che serve per iniziare.", icon: FiClipboard }, + { title: "Primo anno", description: "Orientamento, gruppi, risorse e supporto tra studenti.", icon: FiUser }, + { title: "Esami", description: "Appunti, temi, consigli e strumenti per prepararti meglio.", icon: FiFileText }, + { + title: "Scelta del percorso", + description: "Informazioni chiare per decidere il tuo futuro al PoliMi.", + icon: FiUserCheck, + }, + { title: "Laurea", description: "Fino al traguardo, insieme.", icon: FiGift }, +] as const + +export function PathSection() { + return ( +
+

+ Il tuo percorso, sempre al tuo fianco +

+ +
    + {steps.map((step, index) => ( +
  1. + + + +
    +

    + {step.title} +

    +

    {step.description}

    +
    +
    2. + ))} +
+ +

+ Dalla prima simulazione del TOL fino alla laurea, ogni studente ha sempre{" "} + una risposta a portata di mano e{" "} + qualcuno a cui chiederla. +

+
+ ) +} diff --git a/src/components/chi-siamo/problem-section.tsx b/src/components/chi-siamo/problem-section.tsx new file mode 100644 index 0000000..85daeee --- /dev/null +++ b/src/components/chi-siamo/problem-section.tsx @@ -0,0 +1,31 @@ +import { FiEdit, FiFileText, FiUsers } from "react-icons/fi" +import { Card, CardAction, CardContent } from "@/components/ui/card" + +const questions = [ + { text: "Dove trovo il gruppo del mio corso?", icon: FiUsers }, + { text: "Come funziona il piano degli studi?", icon: FiFileText }, + { text: "Cosa succede se non passo l’OFA di inglese?", icon: FiEdit }, +] as const + +export function ProblemSection() { + return ( +
+
+

+ Il problema +

+

+ Il PoliMi è complesso. Le informazioni non dovrebbero esserlo. +

+
+
+ {questions.map((question) => ( + + {question.text} + + + ))} +
+
+ ) +} diff --git a/src/components/chi-siamo/support-section.tsx b/src/components/chi-siamo/support-section.tsx new file mode 100644 index 0000000..3d099ef --- /dev/null +++ b/src/components/chi-siamo/support-section.tsx @@ -0,0 +1,31 @@ +import { FiHeart } from "react-icons/fi" +import { Glass } from "@/components/glass" +import { GradientIcon } from "@/components/gradient-icon" + +export function SupportSection() { + return ( +
+ +
+ +

Sostieni PoliNetwork

+

+ Se vuoi supportare PoliNetwork economicamente, puoi destinarci il 5x1000 nella dichiarazione dei redditi. Si + tratta di una quota IRPEF che verseresti comunque, e che puoi scegliere di indirizzare a noi senza alcun + costo aggiuntivo. +

+
+ +

5x1000

+

Il tuo sostegno può fare la differenza

+

+ Nella sezione dedicata agli Enti del Terzo Settore, indica il nostro codice fiscale: +

+

+ 97927490157 +

+ + +
+ ) +} diff --git a/src/components/chi-siamo/vision-section.tsx b/src/components/chi-siamo/vision-section.tsx new file mode 100644 index 0000000..895b233 --- /dev/null +++ b/src/components/chi-siamo/vision-section.tsx @@ -0,0 +1,29 @@ +import Link from "next/link" +import { FiArrowDown, FiArrowUpRight } from "react-icons/fi" +import { Button } from "@/components/ui/button" + +export function VisionSection() { + return ( +
+

+ Un Politecnico in cui nessuno studente resti indietro per mancanza di{" "} + informazioni. +

+

+ Rendiamo le informazioni sul PoliMi più accessibili, comprensibili e facili da trovare. +

+
+ + +
+
+ ) +}