Skip to content

feat: improve mobile layout for materials #121

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

Open
BIA3IA wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: improve mobile layout for materials #121

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
238a282
feat: improve Material's mobile layout
BIA3IA May 25, 2026
ddc7bef
fix: biome fix
BIA3IA May 25, 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
18 changes: 15 additions & 3 deletions src/components/home/materials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,16 @@
import { FiArrowUpRight, FiBook, FiBookOpen, FiClipboard, FiFileText, FiUploadCloud } from "react-icons/fi"
import { CardIcon } from "@/components/card-icon"
import { Button } from "@/components/ui/button"
import { CardCaption } from "../card-caption"

const featuredCards = [
{
title: "Carica",
description:
"Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo é prezioso per aiutare migliaia di colleghi con materiale aggiornato!",
caption:
"Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo è prezioso per aiutare migliaia di colleghi con materiale aggiornato!",

icon: FiUploadCloud,
size: "lg",
href: "#",
Expand All @@ -15,6 +19,8 @@ const featuredCards = [
title: "Visualizza",
description:
"Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
caption:
"Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.",
icon: FiBookOpen,
size: "lg",
href: "#",
Expand All @@ -30,13 +36,19 @@ const quickLinks = [
export function Materials() {
return (
<section className="mx-auto flex max-w-400 flex-col-reverse gap-24 p-11 py-28 sm:px-20 2xl:flex-row 2xl:items-start 2xl:gap-32">
<div className="flex grow flex-col gap-5 sm:gap-6 2xl:gap-8 2xl:pt-44">
<div className="grid gap-4 sm:grid-cols-2 sm:gap-12 2xl:gap-20">
{/* TODO sotto sm usare le altre card fatte da Diubi */}
<div className="flex grow flex-col gap-4 sm:gap-6 2xl:gap-8 2xl:pt-44">
{/* Desktop Cards */}
<div className="hidden gap-4 sm:grid sm:grid-cols-2 sm:gap-12 2xl:gap-20">
{featuredCards.map((card) => (
<CardIcon key={card.title} {...card} className="h-full" />
))}
</div>
{/* Mobile Cards */}
<div className="flex flex-col items-center gap-4 sm:hidden">
{featuredCards.map((card) => (
<CardCaption key={card.title} {...card} className="h-full w-fit" />
))}
</div>

<div className="grid grid-cols-3 gap-4 sm:gap-12 2xl:gap-20">
{quickLinks.map((card) => (
Expand Down
Loading