Created Card Sections

This commit is contained in:
aftabrehan
2024-02-02 10:05:16 +05:00
parent 71eb0dfed7
commit 637072301a
40 changed files with 2730 additions and 27 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -22,8 +22,10 @@ export default function RootLayout({
<html lang="en">
<body className={inter.className}>
<Header />
<main className="w-full min-h-[calc(100vh-144px)] mt-36">
<div className="w-full max-w-7xl mx-auto h-full">{children}</div>
<main className="w-full min-h-[calc(100vh-144px)] mt-36 bg-slate-50">
<div className="w-full max-w-[1432px] sm:max-w-[1464px] mx-auto h-full px-4 sm:px-8 py-8 sm:py-16">
{children}
</div>
</main>
<div
id="modal"

View File

@@ -1,6 +1,55 @@
import { SectionWrapper } from '@/components/section-wrapper'
import { Card } from '@/components/card'
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselNext,
CarouselPrevious,
} from '@/components/carousel'
import {
BOOKMARK_CARDS,
CONVERT_FROM_PDF_CARDS,
CONVERT_TO_PDF_CARDS,
} from '@/constants/feature-list'
const Home = () => (
<div className="w-full h-full">
<p>Home Page</p>
<div className="w-full h-full flex flex-col items-center justify-center gap-8">
<SectionWrapper
title="Your Bookmarks"
childrenClass="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-6 px-4 pb-4 sm:pb-6"
>
{BOOKMARK_CARDS.map((item, i) => (
<Card key={i} {...item} />
))}
</SectionWrapper>
<SectionWrapper title="Covert from PDF" showAllButton>
<Carousel className="w-full">
<CarouselContent className="w-full mb-12 xs:mb-16 sm:mb-0 px-4 pb-4 sm:pb-6">
{CONVERT_FROM_PDF_CARDS.map((item, i) => (
<CarouselItem
key={i}
className="basis-1/1 xs:basis-1/2 md:basis-1/3 lg:basis-1/4 xl:basis-1/5"
>
<Card {...item} />
</CarouselItem>
))}
</CarouselContent>
<CarouselPrevious />
<CarouselNext />
</Carousel>
</SectionWrapper>
<SectionWrapper
title="Covert to PDF"
childrenClass="grid grid-cols-1 xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-6 px-4 pb-4 sm:pb-6"
>
{CONVERT_TO_PDF_CARDS.map((item, i) => (
<Card key={i} {...item} />
))}
</SectionWrapper>
</div>
)