feat: add Guides page

src/app/associations/page.tsx

@@ -12,6 +12,7 @@ import {
   FiYoutube,
 } from "react-icons/fi"
 import AccordionAssociation from "@/components/accordion-association"
+import { Hero } from "@/components/ui/hero"
 import esnLogo from "../../../public/logos/esn.svg"
 
 const accordionItems = [
@@ -158,19 +159,11 @@ const accordionItems = [
 
 export default function AssociationsPage() {
   return (
-    <main className="w-full">
-      <div className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-20 px-4 py-49 md:gap-39">
-        <div className="flex flex-col items-center gap-6">
-          <h2 className="typo-display-large md:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text text-transparent md:py-14">
-            Associazioni
-          </h2>
-          <p className="typo-title-large md:typo-headline-small max-w-2xl text-center">
-            Scopri le associazioni studentesche del Politecnico
-          </p>
-        </div>
-        <div className="w-full max-w-300">
-          <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
-        </div>
+    <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">
+      <Hero title="Associazioni" description="Scopri le associazioni studentesche del Politecnico" />
+
+      <div className="w-full max-w-300">
+        <AccordionAssociation accordionItems={accordionItems} defaultValue="ESN - Erasmus Student Network" />
       </div>
     </main>
   )

src/app/guides/page.tsx

@@ -0,0 +1,105 @@
+import { FiLogIn } from "react-icons/fi"
+import { CardCaption } from "@/components/card-caption"
+import type { CardResourceProps } from "@/components/card-resource/types"
+import GuideContent from "@/components/guides/content"
+import { GuideContentMobile } from "@/components/guides/content-mobile"
+import { Hero } from "@/components/ui/hero"
+
+const guidesInfo = {
+  title: "Le guide per Ingegneria Informatica",
+  description: "Rimani aggiornato sulle idee appena condivise dagli studenti del Politecnico",
+  guides: [
+    {
+      text: "Corsi a scelta Primo Anno",
+    },
+    {
+      text: "Corsi a scelta Secondo Anno",
+    },
+    {
+      text: "Corsi a scelta Terzo Anno",
+    },
+  ],
+}
+
+const guidesGeneral = {
+  title: "Le guide generali",
+  description: "Consulta le guide generali per orientarti al meglio nella vita universitaria",
+  guides: [
+    {
+      text: "Guida a Webex",
+    },
+    {
+      text: "Guida alla connessione alla rete del Polimi",
+    },
+  ],
+}
+
+const guidesInfoMobile: CardResourceProps[] = [
+  {
+    title: "Chimica Generale",
+    description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...",
+    tag: {
+      text: "Teorico",
+      variant: "primary",
+    },
+    author: "Giulia M.",
+    date: "Ott 24",
+    href: "/guides",
+  },
+  {
+    title: "Chimica",
+    description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...",
+    tag: [
+      {
+        text: "Teorico",
+        variant: "primary",
+      },
+      {
+        text: "2 Anno",
+        variant: "secondary",
+      },
+    ],
+    author: "Giulia M.",
+    date: "Ott 24",
+    href: "/guides",
+  },
+  {
+    title: "Generale",
+    description: "È un esame che tratta tutti argomenti già visti in qualsiasi liceo scientifico...",
+    tag: {
+      text: "Teorico",
+      variant: "primary",
+    },
+    author: "Giulia M.",
+    date: "Ott 24",
+    href: "/guides",
+  },
+]
+
+const guidesMobile = {
+  title: "Trova le guide del tuo corso",
+  caption: "Una raccolta di guide scritte dagli studenti del tuo corso",
+  icon: FiLogIn,
+}
+
+export default function GuidePage() {
+  return (
+    <section className="flex min-h-screen w-full max-w-350 flex-col gap-32 px-12 pt-58 pb-18 sm:gap-48">
+      <Hero title="Guide" description="Una raccolta di guide realizzate dai membri del Network" />
+
+      {/* Desktop */}
+      <div className="hidden w-full flex-col gap-28 sm:flex">
+        <GuideContent {...guidesInfo} />
+
+        <GuideContent {...guidesGeneral} />
+      </div>
+
+      {/* Mobile */}
+      <div className="flex w-full flex-col items-center gap-32 sm:hidden">
+        <CardCaption {...guidesMobile} className="p-6" />
+
+        <GuideContentMobile title="Guide Generali" guides={guidesInfoMobile} />
+      </div>
+    </section>
+  )
+}

src/components/card-resource/index.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+import Link from "next/link"
+import { useState } from "react"
+import { FiBookmark } from "react-icons/fi"
+import { Card, CardContent, CardTitle } from "@/components/ui/card"
+import { Pill } from "@/components/ui/pill"
+import { cn } from "@/lib/utils"
+import type { CardResourceProps } from "./types"
+
+export function CardResource({
+  tag,
+  title,
+  description,
+  author,
+  date,
+  bookmarked: initialBookmarked = false,
+  href,
+  className,
+}: CardResourceProps) {
+  const [bookmarked, setBookmarked] = useState(initialBookmarked)
+
+  return (
+    <Card className={cn("h-fit w-full p-6", className)}>
+      <Link href={href} className="flex h-full flex-col">
+        <div className="flex items-center justify-between">
+          <div className="flex gap-2">
+            {(Array.isArray(tag) ? tag : [tag]).map((t) => (
+              <Pill key={t.text} variant={t.variant}>
+                {t.text}
+              </Pill>
+            ))}
+          </div>
+          <button
+            type="button"
+            aria-label={bookmarked ? "Remove bookmark" : "Add bookmark"}
+            onClick={(e) => {
+              e.preventDefault()
+              setBookmarked((b) => !b)
+            }}
+            className={cn(bookmarked ? "text-text-secondary" : "text-text-secondary hover:text-text-primary")}
+          >
+            <FiBookmark className={cn("h-5 w-5", bookmarked && "fill-current")} />
+          </button>
+        </div>
+
+        <div className="mt-5 flex flex-1 flex-col gap-2">
+          <CardTitle className="typo-title-large">{title}</CardTitle>
+          <CardContent className="typo-body-large line-clamp-3 px-0 text-text-primary">{description}</CardContent>
+        </div>
+
+        <div className="typo-body-large mt-12 flex items-center justify-between text-text-secondary">
+          <span>{author}</span>
+          <span>{date}</span>
+        </div>
+      </Link>
+    </Card>
+  )
+}

src/components/card-resource/types.ts

@@ -0,0 +1,17 @@
+import type { PillVariant } from "@/components/ui/pill"
+
+export type PillTag = {
+  text: string
+  variant: PillVariant
+}
+
+export type CardResourceProps = {
+  tag: PillTag | PillTag[]
+  title: string
+  description: string
+  author: string
+  date: string
+  bookmarked?: boolean
+  href: string
+  className?: string
+}

src/components/card-text.tsx

@@ -0,0 +1,11 @@
+import { Card, CardContent } from "./ui/card"
+
+export default function CardText({ text, className }: { text: string; className?: string }) {
+  return (
+    <Card className={`h-fit w-full rounded-3xl border-white/50 p-4 ${className || ""}`}>
+      <CardContent className="typo-headline-small bg-linear-to-b from-blue-secondary to-blue-primary bg-clip-text px-0 text-center font-normal text-transparent">
+        {text}
+      </CardContent>
+    </Card>
+  )
+}

src/components/guides/content-mobile.tsx

@@ -0,0 +1,14 @@
+import { cn } from "@/lib/utils"
+import { CardResource } from "../card-resource"
+import type { GuideContentMobileProps } from "./types"
+
+export function GuideContentMobile({ title, guides, className }: GuideContentMobileProps) {
+  return (
+    <div className={cn("flex w-full flex-col gap-5 text-start", className)}>
+      <p className="typo-title-large">{title}</p>
+      {guides.map((guide) => (
+        <CardResource key={guide.title} {...guide} />
+      ))}
+    </div>
+  )
+}

src/components/guides/content.tsx

@@ -0,0 +1,19 @@
+import CardText from "@/components/card-text"
+import { cn } from "@/lib/utils"
+import type { GuideContentProps } from "./types"
+
+export default function GuideContent({ title, description, guides, className }: GuideContentProps) {
+  return (
+    <section className={cn("mx-auto flex w-full max-w-350 flex-col gap-14", className)}>
+      <div className="flex flex-col gap-2 text-start">
+        <h3 className="typo-headline-small sm:typo-display-medium w-fit">{title}</h3>
+        <p className="typo-body-large text-text-primary">{description}</p>
+      </div>
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-4">
+        {guides.map((guide) => (
+          <CardText key={guide.text} text={guide.text} />
+        ))}
+      </div>
+    </section>
+  )
+}

src/components/guides/types.ts

@@ -0,0 +1,14 @@
+import type { CardResourceProps } from "../card-resource/types"
+
+export type GuideContentProps = {
+  title: string
+  description: string
+  guides: { text: string }[]
+  className?: string
+}
+
+export type GuideContentMobileProps = {
+  title: string
+  guides: CardResourceProps[]
+  className?: string
+}

src/components/projects/collection.tsx

@@ -83,7 +83,7 @@ export function Collection() {
       </div>
 
       <div className="hidden flex-col gap-12 sm:flex">
-        <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+        <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
           {collectionCards.map((card) => (
             <CardCaption key={card.title} {...card} />
           ))}

src/components/projects/community-news.tsx

@@ -1,6 +1,7 @@
 import { FiCrop } from "react-icons/fi"
 import { CardCaption } from "../card-caption"
 import { Carousel, CarouselContent, CarouselDots, CarouselItem } from "../ui/carousel"
+import { Hero } from "../ui/hero"
 
 const communityCards = [
   {
@@ -36,14 +37,7 @@ const communityCards = [
 export function CommunityNews() {
   return (
     <section className="mx-auto flex min-h-screen max-w-400 flex-col items-center justify-center gap-48 px-4 py-49">
-      <div className="flex flex-col items-center gap-6">
-        <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent sm:py-14">
-          Projects
-        </h2>
-        <p className="typo-title-large sm:typo-headline-small max-w-xl text-center">
-          Esplora e contribuisci ai progetti degli studenti
-        </p>
-      </div>
+      <Hero title="Projects" description=" Esplora e contribuisci ai progetti degli studenti" />
 
       <div className="mx-auto flex w-full flex-col gap-14 sm:w-fit">
         <div className="flex flex-col items-center gap-2 sm:items-start">

src/components/projects/deprecated.tsx

@@ -47,7 +47,7 @@ export function Deprecated() {
         </div>
 
         <div className="hidden flex-col gap-12 sm:flex">
-          <div className="grid grid-cols-2 justify-items-center gap-6 xl:grid-cols-4">
+          <div className="grid 1xl:grid-cols-4 grid-cols-2 justify-items-center gap-6">
             {communityCards.map((card) => (
               <CardCaption key={card.title} {...card} />
             ))}

src/components/ui/hero.tsx

@@ -0,0 +1,10 @@
+export function Hero({ title, description }: { title: string; description: string }) {
+  return (
+    <div className="flex flex-col items-center gap-6">
+      <h2 className="typo-display-large sm:typo-display-extralarge w-fit bg-linear-to-b from-text-primary to-text-secondary bg-clip-text py-4 text-transparent sm:py-14">
+        {title}
+      </h2>
+      <p className="typo-title-large sm:typo-headline-small max-w-2xl text-center">{description}</p>
+    </div>
+  )
+}