feat: add Guides page

src/app/guides/page.tsx

@@ -0,0 +1,55 @@
+import { FiUserPlus } from "react-icons/fi"
+import GuideContent from "@/components/guides/content"
+import GuideHero from "@/components/guides/hero"
+import { Button } from "@/components/ui/button"
+
+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",
+    },
+  ],
+}
+
+export default function GuidePage() {
+  return (
+    <section className="min-h-screen w-full">
+      <div className="mx-auto flex w-full max-w-350 flex-col gap-35 px-12 pt-58 pb-18">
+        <GuideHero />
+        <GuideContent {...guidesInfo} />
+      </div>
+
+      <div className="flex w-full justify-end px-12 pb-18">
+        <Button variant="tertiaryBlur" size="lg" className="text-blue-secondary">
+          <FiUserPlus />
+          Sei una matricola?
+        </Button>
+      </div>
+
+      <div className="mx-auto flex w-full max-w-350 flex-col px-12 pb-18">
+        <GuideContent {...guidesGeneral} />
+      </div>
+    </section>
+  )
+}

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 sm:typo-hedline-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.tsx

@@ -0,0 +1,18 @@
+import CardText from "@/components/card-text"
+import type { GuideContentProps } from "./types"
+
+export default function GuideContent({ title, description, guides }: GuideContentProps) {
+  return (
+    <section className="mx-auto flex w-full max-w-350 flex-col gap-14">
+      <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/hero.tsx

@@ -0,0 +1,12 @@
+export default function GuideHero() {
+  return (
+    <section className="flex flex-col items-center gap-6 text-center">
+      <h1 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">
+        Guide
+      </h1>
+      <p className="typo-title-large sm:typo-headline-small max-w-2xl text-text-primary">
+        Una raccolta di guide realizzate dai membri del Network
+      </p>
+    </section>
+  )
+}

src/components/guides/types.ts

@@ -0,0 +1,5 @@
+export type GuideContentProps = {
+  title: string
+  description: string
+  guides: { text: string }[]
+}