Skip to content

feat: animated, procedurally generated page background #183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BIA3IA merged 5 commits into from
Oct 20, 2026
Merged

feat: animated, procedurally generated page background #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ddc6518
feat: animated, procedurally generated page background
toto04 Oct 15, 2026
c085607
deps: corepack up
toto04 Oct 15, 2026
3dc4e42
perf(background): drive animations from JS with raster shapes
toto04 Oct 15, 2026
7f0178d
fix(background): render each page's shapes in place instead of morphing
toto04 Oct 15, 2026
195647b
Merge branch 'main' into feat/animated-background
toto04 Oct 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"tw-animate-css": "^1.4.0",
"typescript": "^7.0.2"
},
"packageManager": "pnpm@10.33.0",
"packageManager": "pnpm@10.34.7+sha512.ba98abc585539933375b5971f4bc6d6c73a1b4b7edc4a879e7d102fe5423d1e02309d67c60a11f04955093a96e521ad9c3b138cdd654ca5be563f378b3ae48bd",
"engines": {
"node": ">=24.5.2"
}
Expand Down
108 changes: 43 additions & 65 deletions src/app/about/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { OrganizationChart } from "@/components/structure/organization-chart"
import { Participation } from "@/components/structure/participation"
import { Button } from "@/components/ui/button"
import { Hero } from "@/components/ui/hero"
import { StructureShapes } from "./shapes"

export const metadata: Metadata = {
title: "Struttura",
Expand All @@ -23,71 +22,50 @@ const titleClass =
export default function StructurePage() {
return (
<main className="flex w-full flex-col gap-24 pb-24 md:gap-36 md:pb-36">
<div className="relative">
<StructureShapes section="hero" />
<section className="mx-auto w-full max-w-330 px-6 pt-52 md:pt-57.5">
<Hero title="Struttura" description="Un’organizzazione pensata per durare" />
</section>
</div>
<div className="relative">
<StructureShapes section="diagram" />
<OrganizationChart />
</div>
<div className="relative">
<StructureShapes section="board" />
<section aria-labelledby="direttivo-title" className={containerClass}>
<h2 id="direttivo-title" className={titleClass}>
Il Direttivo in carica
</h2>
<div className="flex flex-col gap-6">
<BoardGallery />
<p className="typo-body-medium mx-auto max-w-160 text-balance text-center text-text-secondary">
Il Direttivo viene eletto ogni due anni dall’Assemblea dei Soci tra i soci dell’associazione.
</p>
</div>
</section>
</div>
<div className="relative">
<StructureShapes section="association" />
<section aria-labelledby="associazione-title" className={containerClass}>
<h2 id="associazione-title" className={titleClass}>
Come funziona l’associazione
</h2>
<AssociationBodies />
</section>
</div>
<div className="relative">
<StructureShapes section="participation" />
<section aria-labelledby="partecipa-title" className={containerClass}>
<h2 id="partecipa-title" className={titleClass}>
Trova il tuo posto in PoliNetwork
</h2>
<Participation />
</section>
</div>
<div className="relative">
<StructureShapes section="join" />
<section className="mx-auto flex w-full max-w-330 flex-col items-center gap-8 px-6 py-10 text-center md:py-16">
<h2 className="typo-headline-medium md:typo-display-medium max-w-160 text-balance bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
Tutto ciò che c’è da sapere su PoliNetwork.
</h2>
<p className="typo-body-large sm:typo-headline-extrasmall max-w-110 text-balance">
Scopri chi siamo, cosa facciamo e come entrare a far parte della nostra realtà.
<section className="mx-auto w-full max-w-330 px-6 pt-52 md:pt-57.5">
<Hero title="Struttura" description="Un’organizzazione pensata per durare" />
</section>
<OrganizationChart />
<section aria-labelledby="direttivo-title" className={containerClass}>
<h2 id="direttivo-title" className={titleClass}>
Il Direttivo in carica
</h2>
<div className="flex flex-col gap-6">
<BoardGallery />
<p className="typo-body-medium mx-auto max-w-160 text-balance text-center text-text-secondary">
Il Direttivo viene eletto ogni due anni dall’Assemblea dei Soci tra i soci dell’associazione.
</p>
<Button asChild size="lg">
<Link href="/join">
Unisciti a noi
<FiArrowUpRight aria-hidden />
</Link>
</Button>
</section>
</div>
<div className="relative">
<StructureShapes section="legal" />
<section aria-label="Forma giuridica e documenti associativi" className="mx-auto w-full max-w-330 px-6">
<LegalStatus />
</section>
</div>
</div>
</section>
<section aria-labelledby="associazione-title" className={containerClass}>
<h2 id="associazione-title" className={titleClass}>
Come funziona l’associazione
</h2>
<AssociationBodies />
</section>
<section aria-labelledby="partecipa-title" className={containerClass}>
<h2 id="partecipa-title" className={titleClass}>
Trova il tuo posto in PoliNetwork
</h2>
<Participation />
</section>
<section className="mx-auto flex w-full max-w-330 flex-col items-center gap-8 px-6 py-10 text-center md:py-16">
<h2 className="typo-headline-medium md:typo-display-medium max-w-160 text-balance bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text text-transparent">
Tutto ciò che c’è da sapere su PoliNetwork.
</h2>
<p className="typo-body-large sm:typo-headline-extrasmall max-w-110 text-balance">
Scopri chi siamo, cosa facciamo e come entrare a far parte della nostra realtà.
</p>
<Button asChild size="lg">
<Link href="/join">
Unisciti a noi
<FiArrowUpRight aria-hidden />
</Link>
</Button>
</section>
<section aria-label="Forma giuridica e documenti associativi" className="mx-auto w-full max-w-330 px-6">
<LegalStatus />
</section>
</main>
)
}
Loading
Loading