feat: add Guides page

src/app/guides/page.tsx

@@ -0,0 +1,65 @@
+import type { Metadata } from "next"
+import type { CardResourceProps } from "@/components/card-resource/types"
+import GuideFind from "@/components/guides/guide-find"
+import GuideContent from "@/components/guides/guide-general"
+import { Hero } from "@/components/ui/hero"
+
+export const metadata: Metadata = {
+  title: "Guide",
+  description: "Una raccolta di guide realizzate dai membri del Network",
+}
+
+
+const guidesInfo: 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",
+  },
+]
+
+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" />
+
+      <GuideFind />
+      <GuideContent title="Guide Generali" guides={guidesInfo} />
+
+    </section>
+  )
+}

src/components/card-resource/index.tsx

@@ -0,0 +1,44 @@
+"use client"
+
+import Link from "next/link"
+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,
+  href,
+  className,
+}: CardResourceProps) {
+
+  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>
+        </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/guide-find.tsx

@@ -0,0 +1,26 @@
+import { FiLogIn } from "react-icons/fi"
+import { CardCaption } from "@/components/card-caption"
+
+
+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 GuideFind() {
+  return (
+    <>
+
+      {/* Mobile */}
+      <div className="flex w-full flex-col items-center gap-32 sm:hidden">
+        <CardCaption {...guidesMobile} className="p-6" />
+      </div>
+
+      {/* Desktop */}
+      <div className="hidden w-full flex-col gap-2 sm:flex">
+        <CardCaption {...guidesMobile} className="w-full max-w-4xl self-center p-6" />
+      </div>
+    </>
+  );
+}

src/components/guides/guide-general.tsx

@@ -0,0 +1,33 @@
+import { CardResource } from "../card-resource"
+import type { GuideContentMobileProps } from "./types"
+
+export default function GuideContent({ title, guides }: GuideContentMobileProps) {
+  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="mx-auto flex w-full flex-col gap-14 sm:w-fit">
+
+        {/* Desktop Grid */}
+        <div className="hidden sm:flex w-full flex-col gap-5">
+          <div className="flex flex-col items-center gap-2 ">
+            <h3 className="text-start sm:typo-display-medium typo-headline-medium w-full">{title}</h3>
+          </div>
+          <div className="lg:grid-cols-3 justify-items-center gap-5 grid grid-cols-2">
+            {guides.map((guide) => (
+              <CardResource key={guide.title} {...guide} />
+            ))}
+          </div>
+        </div>
+
+        {/* Mobile Carousel */}
+        <div className="sm:hidden">
+          <div className="flex w-full flex-col gap-5 text-start">
+            <p className="typo-title-large">{title}</p>
+            {guides.map((guide) => (
+              <CardResource key={guide.title} {...guide} />
+            ))}
+          </div>
+        </div>
+      </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/ui/pill.tsx

@@ -0,0 +1,31 @@
+import { cn } from "@/lib/utils"
+
+export type PillVariant = "primary" | "secondary" | "tertiary"
+
+const variantClasses: Record<PillVariant, string> = {
+  primary: "bg-blue-tertiary text-text-accent-lightbg",
+  secondary: "bg-blue-secondary text-text-accent-darkbg",
+  tertiary: "bg-blue-primary text-primary",
+}
+
+export function Pill({
+  children,
+  variant = "tertiary",
+  className,
+}: {
+  children: React.ReactNode
+  variant?: PillVariant
+  className?: string
+}) {
+  return (
+    <span
+      className={cn(
+        "typo-body-small inline-flex items-center rounded-buttonsM px-3 py-1",
+        variantClasses[variant],
+        className
+      )}
+    >
+      {children}
+    </span>
+  )
+}