grid wrapper + newest products + latest blogs

package-lock.json

@@ -9,10 +9,12 @@
       "version": "0.1.0",
       "dependencies": {
         "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slot": "^1.2.3",
         "@tanstack/react-query": "^5.84.1",
         "axios": "^1.11.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "embla-carousel-react": "^8.6.0",
         "iconsax-react": "^0.0.8",
         "lucide-react": "^0.536.0",
         "next": "15.4.5",
@@ -2721,6 +2723,34 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/embla-carousel": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
+      "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
+      "license": "MIT"
+    },
+    "node_modules/embla-carousel-react": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.6.0.tgz",
+      "integrity": "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==",
+      "license": "MIT",
+      "dependencies": {
+        "embla-carousel": "8.6.0",
+        "embla-carousel-reactive-utils": "8.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
+    "node_modules/embla-carousel-reactive-utils": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.6.0.tgz",
+      "integrity": "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "embla-carousel": "8.6.0"
+      }
+    },
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",

package.json

@@ -10,10 +10,12 @@
   },
   "dependencies": {
     "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.84.1",
     "axios": "^1.11.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.6.0",
     "iconsax-react": "^0.0.8",
     "lucide-react": "^0.536.0",
     "next": "15.4.5",

src/app/home/components/Banners3.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react'
+
+const Banners3: FC = () => {
+    return (
+        <div className='flex gap-4 h-[500px]'>
+            <div className='flex flex-col gap-4 h-full flex-1'>
+                <div className='flex-1 bg-red-50 h-full'>
+                </div>
+                <div className='flex-1 bg-red-50 h-full'>
+                </div>
+            </div>
+            <div className='flex-1 bg-blue-50 h-full'>
+            </div>
+        </div>
+    )
+}
+
+export default Banners3

src/app/home/components/BlogCard.tsx

@@ -0,0 +1,14 @@
+import { FC } from 'react'
+
+const BlogCard: FC = () => {
+    return (
+        <div className='w-full h-[224px] rounded-lg overflow-hidden bg-blue-300 relative'>
+            <div className='absolute bottom-6 right-6 left-6 text-right text-white leading-6'>
+                بررسی
+                گوشی گیمینگ ایسوس
+            </div>
+        </div>
+    )
+}
+
+export default BlogCard

src/app/home/components/Blogs.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+import BlogCard from './BlogCard'
+import GridWrapper from '@/components/GridWrapper'
+
+const Blogs: FC = () => {
+    return (
+        <GridWrapper desktop={5} mobile={1} gapDesktop={24} gapMobile={16}>
+            <BlogCard />
+            <BlogCard />
+            <BlogCard />
+            <BlogCard />
+            <BlogCard />
+        </GridWrapper>
+    )
+}
+
+export default Blogs

src/app/home/components/Categories.tsx

@@ -0,0 +1,28 @@
+'use client'
+import React from 'react'
+import CategoryItem from './CategoryItem'
+import { useGetCategories } from '@/share/hooks/useShareData'
+import { Category } from '@/share/types/SharedTypes'
+
+const Categories = () => {
+
+    const { data } = useGetCategories()
+    const parentCategories = data?.results?.data?.filter(cat => !cat.parent) || []
+
+    return (
+        <div className='flex gap-6 justify-center'>
+            {
+                parentCategories?.map((item: Category) => {
+                    return (
+                        <CategoryItem key={item._id} image={item.imageUrl} title={item.title_fa} />
+
+                    )
+                })
+            }
+
+
+        </div>
+    )
+}
+
+export default Categories

src/app/home/components/CategoryItem.tsx

@@ -0,0 +1,22 @@
+import Image from 'next/image';
+import React, { FC } from 'react'
+
+type Props = {
+    image: string;
+    title: string;
+}
+
+const CategoryItem: FC<Props> = (props) => {
+    return (
+        <div className='text-center' >
+            <div className='size-[113px] rounded-full overflow-hidden'>
+                <Image src={props.image} alt={props.title} width={113} height={113} />
+            </div>
+            <div className='mt-3 text-sm text-[#191919]'>
+                {props.title}
+            </div>
+        </div>
+    )
+}
+
+export default CategoryItem

src/app/home/components/NewestProducts.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react'
+import {
+    Carousel,
+    CarouselContent,
+    CarouselItem,
+    CarouselNext,
+    CarouselPrevious,
+} from "@/components/ui/carousel"
+import ProductCard from '@/components/ProductCard'
+
+
+const NewestProducts: FC = () => {
+    return (
+        <div>
+            <h4 className='text-[#012B4D] text-lg'>جدیدترین محصولات </h4>
+            <div className='mt-2 flex gap-1 text-sm text-[#8C8C8C]'>
+                برای مشاهده ی جدیدترین  محصولات <span className='text-primary'>اینجا کلیک کنید</span>
+            </div>
+
+            <div className='mt-10'>
+                <Carousel
+                    opts={{
+                        align: "start",
+                        direction: "rtl",
+                    }}
+                    className="w-full"
+                >
+                    <CarouselContent className='gap-2'>
+                        {Array.from({ length: 5 }).map((_, index) => (
+                            <CarouselItem key={index} className="basis-[292px]">
+                                <ProductCard />
+                            </CarouselItem>
+                        ))}
+                    </CarouselContent>
+                    <CarouselPrevious className="left-auto -right-12 [&_svg]:-scale-x-100" />
+                    <CarouselNext className="right-auto -left-12 [&_svg]:-scale-x-100" />
+                </Carousel>
+            </div>
+        </div>
+    )
+}
+
+export default NewestProducts

src/app/page.tsx

@@ -2,6 +2,10 @@ import { NextPage } from 'next'
 import withLayout from '@/hoc/withLayout'
 import Carousel from './home/components/Carousel'
 import HotOffer from './home/components/HotOffer'
+import Categories from './home/components/Categories'
+import Banners3 from './home/components/Banners3'
+import Blogs from './home/components/Blogs'
+import NewestProducts from './home/components/NewestProducts'
 
 const Home: NextPage = () => {
   return (
@@ -9,6 +13,20 @@ const Home: NextPage = () => {
       <Carousel />
       <div className='mt-24 px-20'>
         <HotOffer />
+        <div className='mt-24'>
+          <Categories />
+        </div>
+        <div className='mt-24'>
+          <Banners3
+          />
+        </div>
+        <div className='mt-16'>
+          <Blogs />
+        </div>
+      </div>
+
+      <div className='mt-24 bg-[#FAF8F6] p-20'>
+        <NewestProducts />
       </div>
     </div>
   )

src/components/GridWrapper.tsx

@@ -0,0 +1,122 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+type GridWrapperProps = {
+    children: React.ReactNode;
+    desktop: number; // تعداد ستون‌ها در دسکتاپ
+    mobile: number; // تعداد ستون‌ها در موبایل
+    gapDesktop?: number; // فاصله بین آیتم‌ها در دسکتاپ (بر اساس scale پیش‌فرض Tailwind)
+    gapMobile?: number; // فاصله بین آیتم‌ها در موبایل
+    className?: string;
+};
+
+const GRID_COLS_CLASS: Record<number, string> = {
+    1: "grid-cols-1",
+    2: "grid-cols-2",
+    3: "grid-cols-3",
+    4: "grid-cols-4",
+    5: "grid-cols-5",
+    6: "grid-cols-6",
+    7: "grid-cols-7",
+    8: "grid-cols-8",
+    9: "grid-cols-9",
+    10: "grid-cols-10",
+    11: "grid-cols-11",
+    12: "grid-cols-12",
+};
+
+const MD_GRID_COLS_CLASS: Record<number, string> = {
+    1: "md:grid-cols-1",
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-4",
+    5: "md:grid-cols-5",
+    6: "md:grid-cols-6",
+    7: "md:grid-cols-7",
+    8: "md:grid-cols-8",
+    9: "md:grid-cols-9",
+    10: "md:grid-cols-10",
+    11: "md:grid-cols-11",
+    12: "md:grid-cols-12",
+};
+
+// نسخه‌ی دسکتاپ با پیشوند lg: به صورت literal تا با purge مشکلی نداشته باشد
+const LG_GRID_COLS_CLASS: Record<number, string> = {
+    1: "lg:grid-cols-1",
+    2: "lg:grid-cols-2",
+    3: "lg:grid-cols-3",
+    4: "lg:grid-cols-4",
+    5: "lg:grid-cols-5",
+    6: "lg:grid-cols-6",
+    7: "lg:grid-cols-7",
+    8: "lg:grid-cols-8",
+    9: "lg:grid-cols-9",
+    10: "lg:grid-cols-10",
+    11: "lg:grid-cols-11",
+    12: "lg:grid-cols-12",
+};
+
+// Gap mapping (scale رایج Tailwind)
+const GAP_CLASS: Record<number, string> = {
+    0: "gap-0", 1: "gap-1", 2: "gap-2", 3: "gap-3", 4: "gap-4", 5: "gap-5",
+    6: "gap-6", 7: "gap-7", 8: "gap-8", 9: "gap-9", 10: "gap-10", 11: "gap-11",
+    12: "gap-12", 13: "gap-13", 14: "gap-14", 15: "gap-15", 16: "gap-16", 17: "gap-17",
+    18: "gap-18", 19: "gap-19", 20: "gap-20", 21: "gap-21", 22: "gap-22", 23: "gap-23", 24: "gap-24",
+};
+
+const LG_GAP_CLASS: Record<number, string> = {
+    0: "lg:gap-0", 1: "lg:gap-1", 2: "lg:gap-2", 3: "lg:gap-3", 4: "lg:gap-4", 5: "lg:gap-5",
+    6: "lg:gap-6", 7: "lg:gap-7", 8: "lg:gap-8", 9: "lg:gap-9", 10: "lg:gap-10", 11: "lg:gap-11",
+    12: "lg:gap-12", 13: "lg:gap-13", 14: "lg:gap-14", 15: "lg:gap-15", 16: "lg:gap-16", 17: "lg:gap-17",
+    18: "lg:gap-18", 19: "lg:gap-19", 20: "lg:gap-20", 21: "lg:gap-21", 22: "lg:gap-22", 23: "lg:gap-23", 24: "lg:gap-24",
+};
+
+function clampToRange(value: number, min: number, max: number): number {
+    return Math.max(min, Math.min(max, value));
+}
+
+function getGridColsClass(count: number): string {
+    const safe = clampToRange(count, 1, 12);
+    return GRID_COLS_CLASS[safe];
+}
+
+function getLgGridColsClass(count: number): string {
+    const safe = clampToRange(count, 1, 12);
+    return LG_GRID_COLS_CLASS[safe];
+}
+
+function getMdGridColsClass(count: number): string {
+    const safe = clampToRange(count, 1, 12);
+    return MD_GRID_COLS_CLASS[safe];
+}
+
+function getGapClass(value?: number): string | undefined {
+    if (value === undefined) return undefined;
+    const safe = clampToRange(value, 0, 12);
+    return GAP_CLASS[safe];
+}
+
+function getLgGapClass(value?: number): string | undefined {
+    if (value === undefined) return undefined;
+    const safe = clampToRange(value, 0, 12);
+    return LG_GAP_CLASS[safe];
+}
+
+export default function GridWrapper(props: GridWrapperProps) {
+    const { children, desktop, mobile, className, gapDesktop = 4, gapMobile = 4 } = props;
+
+    const mobileCols = getGridColsClass(mobile);
+    const desktopColsMd = getMdGridColsClass(desktop);
+    const desktopColsLg = getLgGridColsClass(desktop);
+
+    const mobileGap = getGapClass(gapMobile);
+    const desktopGap = getLgGapClass(gapDesktop);
+
+    return (
+        <div className={cn("grid", mobileCols, desktopColsMd, desktopColsLg, mobileGap, desktopGap, className)}>
+            {children}
+        </div>
+    );
+}
+
+

src/components/ui/button.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

src/components/ui/carousel.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import * as React from "react"
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import { ArrowLeft, ArrowRight } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselProps = {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: ReturnType<typeof useEmblaCarousel>[1]
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+} & CarouselProps
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext)
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />")
+  }
+
+  return context
+}
+
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & CarouselProps) {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins
+  )
+  const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+  const [canScrollNext, setCanScrollNext] = React.useState(false)
+
+  const onSelect = React.useCallback((api: CarouselApi) => {
+    if (!api) return
+    setCanScrollPrev(api.canScrollPrev())
+    setCanScrollNext(api.canScrollNext())
+  }, [])
+
+  const scrollPrev = React.useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = React.useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [scrollPrev, scrollNext]
+  )
+
+  React.useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  React.useEffect(() => {
+    if (!api) return
+    onSelect(api)
+    api.on("reInit", onSelect)
+    api.on("select", onSelect)
+
+    return () => {
+      api?.off("select", onSelect)
+    }
+  }, [api, onSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api: api,
+        opts,
+        orientation:
+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+      }}
+    >
+      <div
+        onKeyDownCapture={handleKeyDown}
+        className={cn("relative", className)}
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div
+      ref={carouselRef}
+      className="overflow-hidden"
+      data-slot="carousel-content"
+    >
+      <div
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-previous"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  )
+}
+
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      data-slot="carousel-next"
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute size-8 rounded-full",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  )
+}
+
+export {
+  type CarouselApi,
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselPrevious,
+  CarouselNext,
+}

src/share/components/Menu.tsx

@@ -2,13 +2,13 @@
 import { HambergerMenu, ArrowLeft2 } from 'iconsax-react'
 import { FC, useState, useRef, useEffect } from 'react'
 import Image from 'next/image'
-import { useCategories } from '../hooks/useShareData'
+import { useGetCategories } from '../hooks/useShareData'
 import { Category } from '../types/SharedTypes'
 
 const Menu: FC = () => {
     const [isOpen, setIsOpen] = useState(false)
     const [hoveredPath, setHoveredPath] = useState<Category[]>([])
-    const { data, isLoading } = useCategories()
+    const { data, isLoading } = useGetCategories()
     const menuRef = useRef<HTMLDivElement>(null)
 
     useEffect(() => {

src/share/hooks/useShareData.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { getCategories } from "../service/ShareService";
 
-export const useCategories = () => {
+export const useGetCategories = () => {
   return useQuery({
     queryKey: ["categories"],
     queryFn: getCategories,