feat: make page backgrounds to represent Figma's ones

src/app/associations/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { AssociationsList } from "@/components/associations/associations-list"
 import { Hero } from "@/components/ui/hero"
 import { getAllAssociations } from "@/queries/associations"
+import { AssociationsShapes } from "./shapes"
 
 export const metadata: Metadata = {
   title: "Associazioni",
@@ -14,7 +15,8 @@ export default async function AssociationsPage() {
   const associations = await getAllAssociations()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
+    <main className="relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
+      <AssociationsShapes />
       <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
 
       <div className="w-full max-w-300">

src/app/associations/shapes.tsx

@@ -0,0 +1,38 @@
+import { Shape, ShapeLayer } from "@/components/shapes"
+
+export function AssociationsShapes() {
+  return (
+    <ShapeLayer>
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-193.75 left-[calc(50%-315px)] size-100.25 md:hidden" />
+      <Shape variant="big-teal" className="top-334.25 left-[calc(50%-89px)] size-100.25 md:hidden" />
+      <Shape variant="big-teal" className="top-413.75 left-[calc(50%-315px)] size-100.25 md:hidden" />
+      <Shape variant="big-teal" className="top-30.75 left-[calc(50%-448px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-4.25 left-[calc(50%+3px)] size-[354.13px] md:hidden" />
+      <Shape variant="small-blue" className="top-225.5 left-[calc(50%-281px)] size-58.25 md:hidden" />
+      <Shape variant="looper" className="top-[496.08px] left-[calc(50%-499px)] h-[1106.65px] w-[1090.12px] md:hidden" />
+      <Shape
+        variant="looper"
+        className="top-[1400.89px] left-[calc(50%-452.96px)] h-[1020.89px] w-[1000.33px] md:hidden"
+      />
+      <Shape
+        variant="looper"
+        className="top-[1423.63px] left-[calc(50%+498.85px)] h-[900.57px] w-[875.85px] md:hidden"
+      />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-81.25 left-[calc(50%-939px)] hidden size-243.5 md:block" />
+      {/* <Shape variant="big-teal" className="top-394 left-[calc(50%+71px)] hidden size-243.5 md:block" /> */}
+      <Shape variant="small-blue" className="top-36.25 left-[calc(50%+461px)] hidden size-[354.13px] md:block" />
+      {/* <Shape variant="small-blue" className="top-542 left-[calc(50%+35px)] hidden size-[354.13px] md:block" /> */}
+      <Shape
+        variant="looper"
+        className="top-38.75 left-[calc(50%-864px)] hidden h-[1560.48px] w-[1609.71px] md:block"
+      />
+      {/* <Shape
+        variant="looper"
+        className="bottom-[-1185.16px] left-[calc(50%-807px)] hidden h-[1716.52px] w-[1670.92px] md:block"
+      /> */}
+    </ShapeLayer>
+  )
+}

src/app/faqs/page.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next"
 import { FaqsTabs } from "@/components/faqs/faqs-tabs"
+import { ResourcesHeroShapes } from "@/components/resources/shapes"
 import { Hero } from "@/components/ui/hero"
 import { getAllFaqs } from "@/queries/faqs"
 
@@ -14,7 +15,8 @@ export default async function FAQsPage() {
   const categories = await getAllFaqs()
 
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-400 flex-col items-center justify-center gap-24 px-4 py-49">
+    <main className="relative mx-auto flex min-h-screen w-full flex-col items-center justify-center gap-24 px-4 py-49">
+      <ResourcesHeroShapes />
       <Hero title="FAQs" description="Risposte chiare per vivere al meglio la community" />
       <FaqsTabs categories={categories} />
     </main>

src/app/groups/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next"
 import { FiBook, FiStar } from "react-icons/fi"
 import { CardIcon } from "@/components/card-icon"
 import { GroupSearch } from "@/components/home/group-search"
+import { GroupsShapes } from "./shapes"
 
 const groups = [
   {
@@ -28,7 +29,8 @@ export const metadata: Metadata = {
 export default function Home() {
   return (
     <main className="w-full">
-      <div className="flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
+      <div className="relative flex min-h-svh flex-col items-center gap-16 px-6 py-64 md:gap-20 md:py-49">
+        <GroupsShapes />
         <div className="flex w-full flex-col items-center gap-5 text-center">
           <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent md:py-14">
             Groups

src/app/groups/shapes.tsx

@@ -0,0 +1,23 @@
+import { Shape, ShapeLayer } from "@/components/shapes"
+
+export function GroupsShapes() {
+  return (
+    <ShapeLayer className="overflow-hidden">
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="-top-20 left-[calc(50%-300px)] size-70.25 md:hidden" />
+      <Shape variant="big-blue" className="top-20 left-[calc(50%+100px)] size-70.25 rotate-132 md:hidden" />
+      <Shape variant="big-teal" className="top-250 left-[calc(50%-206px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-300 left-[calc(50%-116px)] size-58.25 md:hidden" />
+      <Shape variant="looper" className="-top-100 -rotate-163.5 left-[calc(50%-600px)] h-[690.4] w-200.75 md:hidden" />
+      <Shape variant="looper" className="top-200.75 left-[calc(50%-400px)] size-220 rotate-45 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-blue" className="top-121.5 left-[calc(50%-141.91px)] hidden size-[733.21px] md:block" />
+      <Shape variant="big-teal" className="top-48.75 left-[calc(50%+154px)] hidden size-209 md:block" />
+      <Shape variant="big-teal" className="top-54.25 left-[calc(50%-729px)] hidden size-199.25 md:block" />
+      <Shape variant="small-blue" className="top-34.25 left-[calc(50%-759px)] hidden size-[354.13px] md:block" />
+      <Shape variant="looper" className="top-12.5 left-[calc(50%-1028px)] hidden size-300 md:block" />
+      <Shape variant="looper" className="-top-12.5 left-[calc(50%+100px)] hidden size-300 rotate-215 md:block" />
+    </ShapeLayer>
+  )
+}

src/app/layout.tsx

@@ -1,6 +1,5 @@
 import { ConditionalFooter } from "@/components/conditional-footer"
 import { Header } from "@/components/header/header"
-import { Shape } from "@/components/shapes"
 import { ThemeProvider } from "@/components/theme-provider"
 import "@/styles/globals.css"
 import type { Metadata } from "next"
@@ -73,12 +72,7 @@ export default function RootLayout({ children }: Readonly<{ children: React.Reac
           // storageKey="polinetwork_darkmode_temp" // TODO: enable when dark mode design is ready
           disableTransitionOnChange
         >
-          <div className="-z-10 pointer-events-none fixed inset-0">
-            <Shape variant="big-teal" className="-translate-x-1/2 top-2 left-1/2" />
-            <Shape variant="small-blue" className="-translate-x-1/2 top-2 left-1/4 translate-y-1/2" />
-            <Shape variant="big-blue" className="-translate-x-1/2 -translate-y-1/2 top-0 left-1/2" />
-            <Shape variant="looper" className="-translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2" />
-          </div>
+          {/* <ConditionalGlobalShapes /> */}
           <div className="flex min-h-screen w-full flex-col items-center justify-start">
             <Header />
             {children}

src/app/matricole/guida/page.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next"
 import { FiDownload } from "react-icons/fi"
 import { CardSplit } from "@/components/card-split"
+import { ResourcesHeroShapes } from "@/components/resources/shapes"
 import { Button } from "@/components/ui/button"
 import { getLatestGuidaMatricola } from "@/queries/guida-matricola"
 
@@ -23,6 +24,7 @@ export default async function GuidaMatricolaPage() {
 
   return (
     <main className="mx-auto flex min-h-svh w-full max-w-500 flex-col items-center justify-center gap-10">
+      <ResourcesHeroShapes />
       <div className="mx-12 flex flex-col items-center lg:gap-6">
         <h2 className="typo-display-medium lg:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-center text-transparent lg:leading-33">
           Guida della Matricola

src/app/matricole/page.tsx

@@ -2,6 +2,8 @@ import type { Metadata } from "next"
 import { FAQsPage } from "@/components/matricole/faqs"
 import { MatricoleGuides } from "@/components/matricole/guides"
 import { MatricoleIntro } from "@/components/matricole/intro"
+import { ResourcesHeroShapes } from "@/components/resources/shapes"
+import { MatricoleFAQsShapes, MatricoleGuidesShapes } from "./shapes"
 
 export const metadata: Metadata = {
   title: "Matricole",
@@ -11,9 +13,18 @@ export const metadata: Metadata = {
 export default function MatricolePage() {
   return (
     <main className="w-full">
-      <MatricoleIntro />
-      <MatricoleGuides />
-      <FAQsPage />
+      <div className="relative">
+        <ResourcesHeroShapes />
+        <MatricoleIntro />
+      </div>
+      <div className="relative">
+        <MatricoleGuidesShapes />
+        <MatricoleGuides />
+      </div>
+      <div className="relative">
+        <MatricoleFAQsShapes />
+        <FAQsPage />
+      </div>
     </main>
   )
 }

src/app/matricole/shapes.tsx

@@ -0,0 +1,52 @@
+import { Shape, ShapeLayer } from "@/components/shapes"
+
+/**
+ * `left` offsets are `calc(50% + Npx)`, relative to the horizontal center of
+ * the 1728px-wide (desktop) / 402px-wide (mobile) Figma reference frames —
+ * see src/components/home/shapes.tsx for why.
+ *
+ * `top` is relative to the top of the section each component is mounted in
+ * (MatricoleGuides, FAQsPage), matching how the section
+ * boundaries are grouped in the Figma file, not to the page as a whole.
+ */
+
+export function MatricoleGuidesShapes() {
+  return (
+    <ShapeLayer>
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-44 left-[calc(50%-206px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-88.75 left-[calc(50%-116px)] size-58.25 md:hidden" />
+      <Shape variant="big-teal" className="top-243.75 left-[calc(50%-317px)] size-100.25 md:hidden" />
+      <Shape variant="big-teal" className="top-422.5 left-[calc(50%-260px)] size-40.75 md:hidden" />
+      <Shape variant="big-teal" className="top-408.5 left-[calc(50%-19px)] size-100.25 md:hidden" />
+      <Shape variant="big-teal" className="top-475 left-[calc(50%-412px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-224.5 left-[calc(50%-14px)] size-58.25 md:hidden" />
+      <Shape variant="matricole-glow-1" className="top-[1553.59px] left-[calc(50%-304px)] size-54.75 md:hidden" />
+      <Shape variant="big-teal" className="top-571.75 left-[calc(50%+311px)] size-100.25 md:hidden" />
+
+      <Shape variant="looper" className="-top-20 left-[calc(50%-340px)] size-200 rotate-45 md:hidden" />
+      <Shape variant="looper" className="-rotate-93 top-350.75 left-[calc(50%-500px)] size-250 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-[711.58px] left-[calc(50%-1200px)] hidden size-243.5 md:block" />
+      <Shape variant="small-blue" className="top-[699.7px] left-[calc(50%-900px)] hidden size-[498.98px] md:block" />
+      <Shape
+        variant="looper"
+        className="top-[521.62px] left-[calc(50%-1700px)] hidden h-[1560.48px] w-[1609.71px] rotate-x-180 md:block"
+      />
+      <Shape variant="big-teal" className="top-[1032.08px] left-[calc(50%+300px)] hidden size-165.5 md:block" />
+      <Shape variant="small-blue" className="top-[920.96px] left-[calc(50%+500px)] hidden size-[477.48px] md:block" />
+    </ShapeLayer>
+  )
+}
+
+export function MatricoleFAQsShapes() {
+  return (
+    <ShapeLayer>
+      {/* Mobile Shapes (this section has no shapes on desktop) */}
+      <Shape variant="big-teal" className="top-75 left-[calc(50%-364px)] h-103.75 w-107 md:hidden" />
+      <Shape variant="small-blue" className="top-95.75 left-[calc(50%-327px)] size-58.25 md:hidden" />
+      <Shape variant="big-teal" className="left-[calc(50%)] size-100 md:hidden" />
+    </ShapeLayer>
+  )
+}

src/app/page.tsx

@@ -2,13 +2,20 @@ import { AboutUs } from "@/components/home/about-us"
 import { Hero } from "@/components/home/hero"
 import { Materials } from "@/components/home/materials"
 import { Projects } from "@/components/home/projects"
+import { HomeMaterialsShapes, HomeProjectsShapes } from "@/components/home/shapes"
 
 export default function Home() {
   return (
     <main className="w-full">
       <Hero />
-      <Materials />
-      <Projects />
+      <div className="relative">
+        <HomeMaterialsShapes />
+        <Materials />
+      </div>
+      <div className="relative">
+        <HomeProjectsShapes />
+        <Projects />
+      </div>
       <AboutUs />
     </main>
   )

src/app/projects/page.tsx

@@ -3,6 +3,7 @@ import { CommunityNews } from "@/components/projects/community-news"
 import { Deprecated } from "@/components/projects/deprecated"
 import { Upload } from "@/components/projects/upload"
 import { getAllProjects } from "@/queries/projects"
+import { CollectionShapes, CommunityNewsShapes, DeprecatedShapes, UploadShapes } from "./shapes"
 
 export const metadata = {
   title: "Progetti",
@@ -20,10 +21,22 @@ export default async function Home() {
 
   return (
     <main className="w-full">
-      <CommunityNews projects={news} />
-      <Collection projects={general} />
-      <Upload />
-      <Deprecated projects={deprecated} />
+      <div className="relative">
+        <CommunityNewsShapes />
+        <CommunityNews projects={news} />
+      </div>
+      <div className="relative">
+        <CollectionShapes />
+        <Collection projects={general} />
+      </div>
+      <div className="relative">
+        <UploadShapes />
+        <Upload />
+      </div>
+      <div className="relative">
+        <DeprecatedShapes />
+        <Deprecated projects={deprecated} />
+      </div>
     </main>
   )
 }

src/app/projects/shapes.tsx

@@ -0,0 +1,97 @@
+import { Shape, ShapeLayer } from "@/components/shapes"
+
+/**
+ * `left` offsets below are expressed as `calc(50% + Npx)`, i.e. relative to the
+ * horizontal center of the section rather than its left edge. The projects
+ * content is itself center-anchored (not width-capped), so anchoring shapes to
+ * the edge would make them drift away from the content on screens wider or
+ * narrower than the 1728px/402px Figma reference frames.
+ *
+ * `top` is relative to the top of the section each component is mounted in
+ * (CommunityNews, Collection, Upload, Deprecated), not to the page. Every
+ * section on this page uses `min-h-screen` (fluid height, depends on the viewport)
+ * — each shape below is therefore scoped and `top`-anchored to the section it
+ * visually belongs to, rather than using cumulative page offsets.
+ */
+
+export function CommunityNewsShapes() {
+  return (
+    <ShapeLayer>
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-12.25 left-[calc(50%-44px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-64.75 left-[calc(50%-307px)] size-71.25 md:hidden" />
+      <Shape variant="big-teal" className="top-209 left-[calc(50%-200px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-253.75 left-[calc(50%-110px)] size-58.25 md:hidden" />
+      <Shape variant="looper" className="top-120 left-[calc(50%-411px)] h-216.5 w-222.75 rotate-45 md:hidden" />
+      <Shape variant="looper" className="-rotate-155 top-17.75 left-[calc(50%-303px)] h-216.5 w-263 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-0 left-[calc(50%-1314px)] hidden size-243.5 md:block" />
+      <Shape variant="big-teal" className="top-0 left-[calc(50%+340px)] hidden size-243.5 md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-73.78px] left-[calc(50%-1428px)] hidden h-[1881.13px] w-[1918.09px] md:block"
+      />
+      <Shape variant="projects-glow" className="-top-12.75 left-[calc(50%-1037px)] hidden size-115 md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-280.4px] left-[calc(50%-27.41px)] hidden h-[1584.39px] w-[1464.51px] md:block"
+      />
+    </ShapeLayer>
+  )
+}
+
+export function CollectionShapes() {
+  return (
+    <ShapeLayer>
+      {/* Mobile Shapes */}
+      <Shape variant="small-blue" className="top-76.25 left-[calc(50%-14px)] size-58.25 md:hidden" />
+      <Shape variant="big-teal" className="top-95.5 left-[calc(50%-317px)] size-100.25 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="top-9.25 left-[calc(50%-487px)] hidden size-243.5 md:block" />
+      <Shape variant="big-blue" className="top-128 left-[calc(50%-294px)] hidden size-144.5 md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-205.37px] left-[calc(50%-763.83px)] hidden h-[1560.48px] w-[1609.71px] md:block"
+      />
+    </ShapeLayer>
+  )
+}
+
+export function UploadShapes() {
+  return (
+    <ShapeLayer className="-z-9">
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-161 left-[calc(50%-52px)] size-100.25 md:hidden" />
+      <Shape variant="looper" className="-rotate-120 top-70 left-[calc(50%-480px)] h-265 w-258 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-blue" className="top-24 left-[calc(50%-50px)] hidden size-115 md:block" />
+      <Shape variant="big-teal" className="top-17.25 left-[calc(50%-801px)] hidden size-243.5 md:block" />
+      <Shape
+        variant="looper"
+        className="-top-15.25 left-[calc(50%-1096.09px)] hidden h-[1560.48px] w-[1609.71px] md:block"
+      />
+    </ShapeLayer>
+  )
+}
+
+export function DeprecatedShapes() {
+  return (
+    <ShapeLayer>
+      {/* Mobile Shapes */}
+      <Shape variant="big-teal" className="top-23.25 left-[calc(50%-338px)] size-100.25 md:hidden" />
+      <Shape variant="small-blue" className="top-45.5 left-[calc(50%-67px)] size-58.25 md:hidden" />
+      <Shape variant="looper" className="-rotate-137 top-143.5 left-[calc(50%-609px)] h-394.25 w-364.75 md:hidden" />
+
+      {/* Desktop Shapes */}
+      <Shape variant="big-teal" className="-top-13 left-[calc(50%+77px)] hidden size-243.5 md:block" />
+      <Shape variant="big-blue" className="top-[364.81px] left-[calc(50%+212.4px)] hidden size-[448.76px] md:block" />
+      <Shape
+        variant="looper"
+        className="top-[-147.41px] left-[calc(50%-268.41px)] hidden h-[1560.62px] w-[1609.84px] rotate-180 md:block"
+      />
+    </ShapeLayer>
+  )
+}