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

Merged
toto04 merged 4 commits into from
Jun 2, 2026
Merged

feat: improve mobile layout for materials #121

Changes from all commits
Commits
Show all changes
4 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
d5d3b46
fix: remove redundant caption from featuredCards and use description …
BIA3IA Jun 2, 2026
0673a93
fix: biome
BIA3IA Jun 2, 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
13 changes: 10 additions & 3 deletions src/components/home/materials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
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 = [
{
Expand Down Expand Up @@ -30,13 +31,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} caption={card.description} 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