fix: backend-driven home projects, admin how-to, HR applications, transparent storia mockup

src/app/page.tsx

@@ -3,6 +3,9 @@ import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 import { Projects } from "@/components/home/projects"
 
+// The featured projects come from the backend at request time, like /projects
+export const dynamic = "force-dynamic"
+
 export default function Home() {
   return (
     <main className="w-full">

src/components/footer/index.tsx

@@ -7,8 +7,8 @@ import telegram from "@/assets/icons/telegram.svg"
 import { CardMultipleIcons } from "@/components/card-multiple-icons"
 import { Glass } from "@/components/glass"
 import { CONTAINER, SECTION_TITLE } from "@/components/layout/page"
-import { regulationsHref, statuteHref } from "@/components/structure/constants"
 import { Button } from "@/components/ui/button"
+import { regulationsHref, statuteHref } from "@/lib/documents"
 import { cn } from "@/lib/utils"
 
 const socials: { label: string; href: string; icon: ReactNode }[] = [

src/components/home/about-us.tsx

@@ -4,8 +4,8 @@ import { Button } from "@/components/ui/button"
 
 export function AboutUs() {
   return (
-    <section className="mx-auto flex min-h-svh w-full max-w-4xl flex-col items-center justify-center gap-16 px-7.5 py-12 text-center sm:gap-24">
-      <h2 className="typo-display-fluid-large text-balance bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
+    <section className="mx-auto flex min-h-svh w-full max-w-4xl flex-col items-center justify-center gap-10 px-7.5 py-12 text-center sm:gap-14">
+      <h2 className="typo-display-fluid-medium text-balance bg-linear-to-r from-text-primary via-blue-secondary to-blue-primary bg-clip-text text-transparent">
         PoliNetwork unisce gli studenti del Poli: gruppi, risorse e supporto, tutti in un'unica community.
       </h2>
 

src/components/home/projects.tsx

@@ -1,53 +1,19 @@
 import Link from "next/link"
 import { FiArrowUpRight } from "react-icons/fi"
-import { CardCaption } from "@/components/card-caption"
 import { CONTAINER } from "@/components/layout/page"
 import { PeekCarousel } from "@/components/peek-carousel"
+import { ProjectCard } from "@/components/projects/project-card"
 import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
+import { getAllProjects } from "@/queries/projects"
 
-const featuredCards = [
-  {
-    title: "WeBeepSync",
-    caption:
-      "WeBeep Sync è una semplice app, user-friendly e senza compromessi che serve per tenere sincronizzati tutti i tuoi file di WeBeep.",
-    href: "https://github.com/toto04/webeep-sync",
-  },
-  {
-    title: "PolimiSchedule",
-    caption:
-      "Genera un file iCalendar (.ics) a partire dal formato testuale dell’Orario delle lezioni. Possibilità di importare su Google Calendar.",
-    href: "https://github.com/jacopo-j/polimi-schedule",
-  },
-  {
-    title: "WiFiLinux",
-    caption: "Scarica ed esegui lo script Python per attivare la connessione permanente al WiFi Polimi",
-    href: "https://github.com/PoliNetworkOrg/WiFiLinux",
-  },
-  {
-    title: "The TOL Project",
-    caption: "Un simulatore gratuito del test di ammissione per le aspiranti matricole di Ingegneria del PoliMi.",
-    href: "https://tol.polinetwork.org/",
-  },
-] as const
+export async function Projects() {
+  const live = (await getAllProjects()).filter((project) => project.category !== "deprecated")
+  // The first four, in the order set from the admin dashboard
+  const featured = live.slice(0, 4)
+  // Without the backend there is nothing to count: the title then stays a plain "Projects"
+  const title = live.length > 1 ? `${live.length} Projects` : live.length === 1 ? "1 Project" : "Projects"
 
-function FeaturedProjectCard({ className, ...card }: (typeof featuredCards)[number] & { className?: string }) {
-  return (
-    <CardCaption
-      {...card}
-      className={className}
-      // Figma reserves the bottom-right corner for an action: show where the card leads
-      footer={
-        <span className="typo-label-large flex items-center justify-end gap-1 text-blue-secondary">
-          {new URL(card.href).hostname}
-          <FiArrowUpRight className="size-4" />
-        </span>
-      }
-    />
-  )
-}
-
-export function Projects() {
   return (
     <section
       className={cn(
@@ -56,7 +22,7 @@ export function Projects() {
       )}
     >
       <h2 className="typo-display-fluid-extralarge bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-center text-transparent xl:col-span-2 xl:text-start">
-        15+ Projects
+        {title}
       </h2>
 
       <div className="flex flex-col items-center gap-8 text-center xl:items-start xl:text-start">
@@ -77,18 +43,24 @@ export function Projects() {
         </Button>
       </div>
 
-      <div className="mx-auto hidden w-full max-w-4xl auto-rows-fr gap-6 pt-8 sm:grid sm:grid-cols-2 xl:max-w-none xl:pt-0">
-        {featuredCards.map((card) => (
-          <FeaturedProjectCard key={card.title} {...card} className="h-auto w-full p-6" />
-        ))}
-      </div>
+      {featured.length > 0 && (
+        <>
+          <ul className="mx-auto hidden w-full max-w-4xl auto-rows-fr gap-6 pt-8 sm:grid sm:grid-cols-2 xl:max-w-none xl:pt-0">
+            {featured.map((project) => (
+              <li key={project.id} className="min-w-0">
+                <ProjectCard project={project} />
+              </li>
+            ))}
+          </ul>
 
-      <PeekCarousel
-        items={featuredCards}
-        getKey={(card) => card.title}
-        render={(card) => <FeaturedProjectCard {...card} className="h-full w-full p-6" />}
-        className="pt-6 sm:hidden"
-      />
+          <PeekCarousel
+            items={featured}
+            getKey={(project) => project.id}
+            render={(project) => <ProjectCard project={project} />}
+            className="pt-6 sm:hidden"
+          />
+        </>
+      )}
     </section>
   )
 }

src/components/join/admin.tsx

@@ -1,12 +1,15 @@
 import Image from "next/image"
+import Link from "next/link"
+import { FiMail } from "react-icons/fi"
 import connectorFirst from "@/assets/icons/join/connector-first.svg"
 import connectorSecond from "@/assets/icons/join/connector-second.svg"
 import { InfoCard } from "@/components/collabora/info-card"
 import { Highlight } from "@/components/collabora/section"
-import { CONTAINER, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { CONTAINER, INLINE_LINK, SECTION_LEAD, SECTION_TITLE } from "@/components/layout/page"
+import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 import { JoinCards } from "./cards"
-import { adminCards, adminSteps } from "./constants"
+import { adminApplicationEmail, adminCards, adminSteps } from "./constants"
 
 const connectors = [connectorFirst, connectorSecond]
 
@@ -55,6 +58,21 @@ export function AdminSection() {
             </li>
           ))}
         </ol>
+        <div className="flex flex-col items-start gap-6 pt-4">
+          <p className={cn(SECTION_LEAD, "max-w-200")}>
+            Il primo passo è farti conoscere nel{" "}
+            <Link href="/groups" className={INLINE_LINK}>
+              gruppo del tuo corso
+            </Link>
+            , rispondendo a chi ha bisogno. Se vuoi proporti, scrivi al team HR: ti diremo come continuare.
+          </p>
+          <Button asChild size="lg">
+            <a href={adminApplicationEmail}>
+              Scrivi al team HR
+              <FiMail aria-hidden />
+            </a>
+          </Button>
+        </div>
       </div>
     </section>
   )

src/components/join/constants.ts

@@ -15,6 +15,7 @@ import report from "@/assets/icons/join/report.svg"
 import starShine from "@/assets/icons/join/star-shine.svg"
 import statute from "@/assets/icons/join/statute.svg"
 import type { InfoCardData } from "@/components/collabora/info-card"
+import { memberPrivacyHref, regulationsHref, statuteHref } from "@/lib/documents"
 
 const iconClassName = "mr-3 h-auto w-7 md:mr-0 md:w-13"
 
@@ -88,23 +89,25 @@ export const teamCards: InfoCardData[] = [
   },
 ]
 
+export const adminApplicationEmail = `mailto:hr@polinetwork.org?subject=${encodeURIComponent("Candidatura admin")}`
+
 export const membershipEmail = `mailto:info@polinetwork.org?subject=${encodeURIComponent("Richiesta ammissione sotto la qualifica di socio")}`
 
 export const membershipSteps = [
   {
     title: "Consulta lo Statuto dell’Associazione",
     icon: statute,
-    href: "https://github.com/PoliNetworkOrg/Statuto/blob/main/full.pdf",
+    href: statuteHref,
   },
   {
     title: "Leggi il Regolamento Interno",
     icon: regulations,
-    href: "https://github.com/PoliNetworkOrg/RegolamentoInterno/blob/main/RaccoltaRegolamentiInterni.pdf",
+    href: regulationsHref,
   },
   {
     title: "Dai un occhio alle Privacy Policy",
     icon: privacy,
-    href: "https://github.com/PoliNetworkOrg/PrivacyPolicies/releases/download/v1.0/regolamento_soci.pdf",
+    href: memberPrivacyHref,
   },
   { title: "Invia una mail a info@polinetwork.org", icon: mail, href: membershipEmail },
   { title: "Attendi la nostra risposta", icon: reply },

src/components/storia/projects.tsx

@@ -60,7 +60,7 @@ export function HistoryProjects() {
         <Image
           src={projectsImage}
           alt="Il sito PoliNetwork su computer e smartphone"
-          className="mx-auto h-auto w-full max-w-2xl object-contain mix-blend-multiply"
+          className="mx-auto h-auto w-full max-w-2xl object-contain"
           sizes="(max-width: 1279px) 100vw, 670px"
         />
       </TextOnlyLayout>

src/components/structure/constants.ts

@@ -83,7 +83,3 @@ export const legalFacts = [
     icon: FiFlag,
   },
 ]
-
-export const statuteHref = "https://github.com/PoliNetworkOrg/Statuto/blob/main/full.pdf"
-export const regulationsHref =
-  "https://github.com/PoliNetworkOrg/RegolamentoInterno/blob/main/RaccoltaRegolamentiInterni.pdf"

src/components/structure/legal-status.tsx

@@ -3,8 +3,9 @@ import { Glass } from "@/components/glass"
 import { GradientIcon } from "@/components/gradient-icon"
 import { SECTION_TITLE } from "@/components/layout/page"
 import { Button } from "@/components/ui/button"
+import { regulationsHref, statuteHref } from "@/lib/documents"
 import { cn } from "@/lib/utils"
-import { legalFacts, regulationsHref, statuteHref } from "./constants"
+import { legalFacts } from "./constants"
 
 export function LegalStatus() {
   return (

src/components/team/constants.ts

@@ -76,5 +76,5 @@ export const teams: Team[] = [
 ]
 
 export function applicationHref(team?: string) {
-  return `mailto:direttivo@polinetwork.org?subject=${encodeURIComponent(team ? `Candidatura – ${team}` : "Candidatura PoliNetwork")}`
+  return `mailto:hr@polinetwork.org?subject=${encodeURIComponent(team ? `Candidatura – ${team}` : "Candidatura PoliNetwork")}`
 }

src/lib/documents.ts

@@ -0,0 +1,6 @@
+/** The association's public documents, linked from /about, /join and the footer. */
+export const statuteHref = "https://github.com/PoliNetworkOrg/Statuto/blob/main/full.pdf"
+export const regulationsHref =
+  "https://github.com/PoliNetworkOrg/RegolamentoInterno/blob/main/RaccoltaRegolamentiInterni.pdf"
+export const memberPrivacyHref =
+  "https://github.com/PoliNetworkOrg/PrivacyPolicies/releases/download/v1.0/regolamento_soci.pdf"

src/lib/utils.ts

@@ -13,6 +13,7 @@ const twMerge = extendTailwindMerge({
           typo: [
             "display-fluid-extralarge",
             "display-fluid-large",
+            "display-fluid-medium",
             "display-extralarge",
             "display-large",
             "display-medium",

src/styles/typography.css

@@ -31,6 +31,11 @@
   @apply font-dm-sans font-medium text-[clamp(2rem,1.5rem+3vw,4.5rem)] leading-[1.2] tracking-[-0.02em];
 }
 
+@utility typo-display-fluid-medium {
+  /* 28px at 320px viewport → 48px from ~1600px, for statements that sit between sections */
+  @apply font-dm-sans font-medium text-[clamp(1.75rem,1.25rem+1.6vw,3rem)] leading-[1.2] tracking-[-0.02em];
+}
+
 @utility typo-display-fluid-extralarge {
   /* 44px at 402px viewport → 120px at 1728px (display-extralarge) */
   @apply font-dm-sans font-medium text-[clamp(2.75rem,1.25rem+6vw,7.5rem)] leading-[1.2] tracking-[-0.02em];