1408 lines
58 KiB
TypeScript
1408 lines
58 KiB
TypeScript
"use client";
|
|
|
|
import { ChevronLeft, ChevronRight, ShoppingBag } from "lucide-react";
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
|
import { Price, PriceValue } from "@/components/shadcnblocks/price";
|
|
import { AspectRatio } from "@/components/ui/aspect-ratio";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Carousel,
|
|
CarouselContent,
|
|
CarouselItem,
|
|
} from "@/components/ui/carousel";
|
|
import { type CarouselApi } from "@/components/ui/carousel";
|
|
import { Label } from "@/components/ui/label";
|
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ProductPrice {
|
|
regular: number;
|
|
sale?: number;
|
|
currency: string;
|
|
}
|
|
|
|
type Variant = {
|
|
color: string;
|
|
value: string;
|
|
id: string;
|
|
label: string;
|
|
link: string;
|
|
images: [Image, Image];
|
|
};
|
|
interface Product {
|
|
name: string;
|
|
category: {
|
|
label: string;
|
|
link: string;
|
|
};
|
|
images: [Image, Image];
|
|
link: string;
|
|
price: ProductPrice;
|
|
variants: Array<Variant>;
|
|
badges?: Array<Badge>;
|
|
}
|
|
|
|
interface PromoData {
|
|
image: string;
|
|
title: string;
|
|
kicker: string;
|
|
cta: {
|
|
label: string;
|
|
link: string;
|
|
};
|
|
}
|
|
|
|
type PromoCardProps = PromoData;
|
|
|
|
type Badge = {
|
|
text: string;
|
|
color: string;
|
|
};
|
|
|
|
type ProductCardProps = Product;
|
|
|
|
type Image = {
|
|
srcset?: string;
|
|
src: string;
|
|
sizes?: string;
|
|
alt: string;
|
|
};
|
|
|
|
interface ProductColorsProps {
|
|
variants: Omit<Variant, "images">[];
|
|
value: string;
|
|
onOptionHover: (value: string) => void;
|
|
}
|
|
|
|
interface BadgesProps {
|
|
badges?: Array<Badge>;
|
|
}
|
|
|
|
type ProductList = Array<{
|
|
title: string;
|
|
value: string;
|
|
promotion: PromoData;
|
|
products: Array<Product>;
|
|
}>;
|
|
|
|
const PRODUCTS_LIST: ProductList = [
|
|
{
|
|
title: "تازهها",
|
|
value: "new_arrivals",
|
|
promotion: {
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/john-black-RV9T8txb2uY-unsplash-1.jpg",
|
|
title: "تازه. شیک. همین الان.",
|
|
kicker: "پیشنهاد ویژه",
|
|
cta: {
|
|
label: "مشاهده تازهها",
|
|
link: "#",
|
|
},
|
|
},
|
|
products: [
|
|
{
|
|
name: "مبل چرمی",
|
|
price: {
|
|
regular: 899000.0,
|
|
sale: 799000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "صندلیها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#4e2115",
|
|
link: "#",
|
|
label: "قهوهای دربی",
|
|
value: "brown_derby-1",
|
|
id: "brown_derby-1",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
badges: [
|
|
{
|
|
text: "حراج",
|
|
color: "oklch(57.7% 0.245 27.325)",
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112729-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112734-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "لیوان سرامیکی",
|
|
price: {
|
|
regular: 59900.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "فنجانها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#4E7055",
|
|
link: "#",
|
|
label: "سبز",
|
|
value: "green-2",
|
|
id: "green-2",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
color: "#5F788B",
|
|
link: "#",
|
|
label: "آبی",
|
|
value: "blue-2",
|
|
id: "blue-2",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362198-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-20710970-15362162-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "کتری چای",
|
|
price: {
|
|
regular: 920000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "ظروف آشپزخانه",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#FFFFFF",
|
|
link: "#",
|
|
label: "سفید",
|
|
value: "white-3",
|
|
id: "white-3",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-nicola-barts-7937498-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "شمعهای معطر",
|
|
price: {
|
|
regular: 500000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "شمعها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#000000",
|
|
link: "#",
|
|
label: "مشکی",
|
|
value: "black-4",
|
|
id: "black-4",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
color: "#E8B951",
|
|
link: "#",
|
|
label: "طلایی",
|
|
value: "gold-5",
|
|
id: "gold-5",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20081033-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-sueda-gln-327513956-20080989-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: 'قاب چوبی ۵×۷ اینچ',
|
|
price: {
|
|
regular: 200000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "قابها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#C6B89C",
|
|
link: "#",
|
|
label: "قهوهای",
|
|
value: "brown-6",
|
|
id: "brown-6",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207785-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4464205-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "آباژور کرهای",
|
|
price: {
|
|
regular: 199000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "چراغها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#B8B9BD",
|
|
link: "#",
|
|
label: "خاکستری",
|
|
value: "gray-7",
|
|
id: "gray-7",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6825308-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-6920416-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "پرفروشها",
|
|
value: "hot_items",
|
|
promotion: {
|
|
image:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-karolina-grabowska-4207892-1.jpg",
|
|
title: "جسورانه. ضروری.",
|
|
kicker: "حراج",
|
|
cta: {
|
|
label: "مشاهده تازهها",
|
|
link: "#",
|
|
},
|
|
},
|
|
products: [
|
|
{
|
|
name: "صندلی چرمی",
|
|
price: {
|
|
regular: 899000.0,
|
|
sale: 799000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "صندلیها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
badges: [
|
|
{
|
|
text: "بهترین انتخاب!",
|
|
color: "oklch(54.6% 0.245 262.881)",
|
|
},
|
|
{
|
|
text: "حراج",
|
|
color: "oklch(57.7% 0.245 27.325)",
|
|
},
|
|
],
|
|
variants: [
|
|
{
|
|
color: "#000000",
|
|
link: "#",
|
|
label: "مشکی",
|
|
value: "black-8",
|
|
id: "black-8",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792096-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-mathilde-14792097-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "فنجان سرامیکی",
|
|
price: {
|
|
regular: 190000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "فنجانها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#A8A081",
|
|
link: "#",
|
|
label: "قهوهای",
|
|
value: "brown-9",
|
|
id: "brown-9",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
color: "#C2CCCD",
|
|
link: "#",
|
|
label: "قهوهای",
|
|
value: "brown-10",
|
|
id: "brown-10",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-bWlbcvFMUh4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/cafeconcetto-L2r9L6Llyp4-unsplash-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "صندلی ناهارخوری",
|
|
price: {
|
|
regular: 299000.0,
|
|
sale: 199000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "صندلی",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#DAC9AF",
|
|
link: "#",
|
|
label: "قهوهای",
|
|
value: "brown-11",
|
|
id: "brown-11",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626409-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-cottonbro-6626392-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "ساعت دیواری",
|
|
price: {
|
|
regular: 159000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "ساعتها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#FFFFFF",
|
|
link: "#",
|
|
label: "سفید",
|
|
value: "white-12",
|
|
id: "white-12",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185169-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-cottonbro-5185178-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "بشقاب سرامیکی",
|
|
price: {
|
|
regular: 990000.0,
|
|
sale: 890000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "ظروف آشپزخانه",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#709C69",
|
|
link: "#",
|
|
label: "سبز",
|
|
value: "green-13",
|
|
id: "green-13",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
color: "#E5BBB4",
|
|
link: "#",
|
|
label: "صورتی",
|
|
value: "pink-14",
|
|
id: "pink-14",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
badges: [
|
|
{
|
|
text: "حراج",
|
|
color: "oklch(57.7% 0.245 27.325)",
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410297-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/other/pexels-micheile-10410289-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "کابینت چوبی",
|
|
price: {
|
|
regular: 699000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "کشوها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#9f8568",
|
|
link: "#",
|
|
label: "قهوهای",
|
|
value: "brown-15",
|
|
id: "brown-15",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112749-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112750-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "صندلی چوبی",
|
|
price: {
|
|
regular: 490000.0,
|
|
currency: "ریال",
|
|
},
|
|
category: {
|
|
label: "صندلیها",
|
|
link: "#",
|
|
},
|
|
link: "#",
|
|
variants: [
|
|
{
|
|
color: "#9f8568",
|
|
link: "#",
|
|
label: "قهوهای",
|
|
value: "brown-16",
|
|
id: "brown-16",
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
images: [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112738-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg",
|
|
srcset:
|
|
"/block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-3.jpg 1920w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-2.jpg 1280w, /block-media/shadcnblocks/block/ecommerce/furniture/pexels-kseniachernaya-11112728-1.jpg 640w",
|
|
alt: "تصویر محصول",
|
|
sizes:
|
|
"(min-width: 1920px) 1920px, (min-width: 1280px) 1280px, 100vw",
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
];
|
|
|
|
const ProductList9TitleBlock = () => {
|
|
return (
|
|
<div dir="rtl" className="flex flex-col items-start gap-2 text-start">
|
|
<h2 className="text-xl leading-snug font-bold lg:text-3xl">تازهها</h2>
|
|
<p className="font-medium text-muted-foreground">
|
|
مرز سنتی بین فضای شخصی و حرفهای را از بین ببرید.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ProductList9Header = () => {
|
|
return (
|
|
<div className="mb-8 flex items-start justify-between gap-4">
|
|
<div className="flex gap-4">
|
|
{PRODUCTS_LIST.map((item) => (
|
|
<span
|
|
key={`product-list-9-tab-label-${item.value}`}
|
|
className="pb-1 font-medium text-muted-foreground"
|
|
>
|
|
{item.title}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<ProductList9TitleBlock />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type TabProductCarouselProps = {
|
|
promotion: PromoData;
|
|
products: Product[];
|
|
};
|
|
|
|
const TabProductCarousel = ({
|
|
promotion,
|
|
products,
|
|
}: TabProductCarouselProps) => {
|
|
const [api, setApi] = useState<CarouselApi>();
|
|
const [scrollProgress, setScrollProgress] = useState(0);
|
|
const [canScrollPrev, setCanScrollPrev] = useState(false);
|
|
const [canScrollNext, setCanScrollNext] = useState(false);
|
|
|
|
const onScroll = useCallback((carouselApi: CarouselApi) => {
|
|
if (!carouselApi) return;
|
|
const progress = Math.max(
|
|
0,
|
|
Math.min(1, carouselApi.scrollProgress() ?? 0),
|
|
);
|
|
setScrollProgress(progress + 0.25);
|
|
}, []);
|
|
|
|
const onSelect = useCallback(
|
|
(carouselApi: CarouselApi) => {
|
|
if (!carouselApi) return;
|
|
setCanScrollPrev(carouselApi.canScrollPrev());
|
|
setCanScrollNext(carouselApi.canScrollNext());
|
|
onScroll(carouselApi);
|
|
},
|
|
[onScroll],
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (!api) return;
|
|
|
|
requestAnimationFrame(() => {
|
|
onSelect(api);
|
|
});
|
|
|
|
api.on("reInit", onSelect).on("scroll", onScroll).on("select", onSelect);
|
|
|
|
return () => {
|
|
api.off("reInit", onSelect);
|
|
api.off("scroll", onScroll);
|
|
api.off("select", onSelect);
|
|
};
|
|
}, [api, onScroll, onSelect]);
|
|
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-1 gap-x-3 gap-y-5 sm:grid-cols-2 md:hidden">
|
|
<PromoCard {...promotion} />
|
|
{products.map((product, index) => (
|
|
<ProductCard
|
|
key={`product-list-9-mobile-item-${index}`}
|
|
{...product}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
<Carousel
|
|
dir="rtl"
|
|
opts={{
|
|
align: "start",
|
|
direction: "rtl",
|
|
}}
|
|
setApi={setApi}
|
|
className="hidden w-full md:block"
|
|
>
|
|
<CarouselContent className="ml-0 -mr-4 flex">
|
|
<CarouselItem className="pl-0 pr-4 basis-1/3 lg:basis-1/4 xl:basis-1/5">
|
|
<PromoCard {...promotion} />
|
|
</CarouselItem>
|
|
{products.map((product, index) => (
|
|
<CarouselItem
|
|
className="pl-0 pr-4 basis-1/3 lg:basis-1/4 xl:basis-1/5"
|
|
key={`product-list-9-item-${index}`}
|
|
>
|
|
<ProductCard {...product} />
|
|
</CarouselItem>
|
|
))}
|
|
</CarouselContent>
|
|
<div className="mt-6 flex items-center gap-3">
|
|
<div className="relative h-0.5 w-full overflow-hidden bg-muted">
|
|
<div
|
|
style={{
|
|
transform: `scaleX(${scrollProgress})`,
|
|
}}
|
|
className="h-full origin-start bg-primary"
|
|
></div>
|
|
</div>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
className="static size-8 shrink-0 translate-0 touch-manipulation"
|
|
disabled={!canScrollPrev}
|
|
onClick={() => api?.scrollPrev()}
|
|
>
|
|
<ChevronRight className="size-4" />
|
|
<span className="sr-only">اسلاید قبلی</span>
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="icon-sm"
|
|
className="static size-8 shrink-0 translate-0 touch-manipulation"
|
|
disabled={!canScrollNext}
|
|
onClick={() => api?.scrollNext()}
|
|
>
|
|
<ChevronLeft className="size-4" />
|
|
<span className="sr-only">اسلاید بعدی</span>
|
|
</Button>
|
|
</div>
|
|
</Carousel>
|
|
</>
|
|
);
|
|
};
|
|
|
|
interface ProductList9Props {
|
|
className?: string;
|
|
}
|
|
|
|
const ProductList9 = ({ className }: ProductList9Props) => {
|
|
const [mounted, setMounted] = useState(false);
|
|
const [activeTab, setActiveTab] = useState(PRODUCTS_LIST[0].value);
|
|
|
|
useEffect(() => {
|
|
setMounted(true);
|
|
}, []);
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<section className={cn("overflow-hidden py-32", className)}>
|
|
<div className="container">
|
|
<ProductList9Header />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<section className={cn("overflow-hidden py-32", className)}>
|
|
<div className="container">
|
|
<Tabs
|
|
value={activeTab}
|
|
onValueChange={setActiveTab}
|
|
className="block"
|
|
>
|
|
<div className="mb-8 flex items-start justify-between gap-4">
|
|
<TabsList className="!h-auto gap-4 bg-transparent p-0">
|
|
{PRODUCTS_LIST.map((item) => (
|
|
<TabsTrigger
|
|
key={`product-list-9-tab-trigger-${item.value}`}
|
|
value={item.value}
|
|
className="rounded-none bg-transparent px-0 pb-1 font-medium text-muted-foreground shadow-none data-active:bg-transparent data-active:text-foreground data-active:underline data-active:underline-offset-8 data-active:!shadow-none"
|
|
>
|
|
{item.title}
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
<ProductList9TitleBlock />
|
|
</div>
|
|
{PRODUCTS_LIST.map((item, index) => (
|
|
<TabsContent
|
|
value={item.value}
|
|
key={`product-list-9-tab-content-${index}`}
|
|
className="mt-0 data-[state=active]:animate-fade-in"
|
|
>
|
|
{activeTab === item.value ? (
|
|
<TabProductCarousel
|
|
key={item.value}
|
|
promotion={item.promotion}
|
|
products={item.products}
|
|
/>
|
|
) : null}
|
|
</TabsContent>
|
|
))}
|
|
</Tabs>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
const PromoCard = ({ image, title, cta, kicker }: PromoCardProps) => {
|
|
return (
|
|
<Card
|
|
dir="rtl"
|
|
className="group relative flex size-full min-h-95 min-w-47.5 flex-col items-start justify-between gap-5 overflow-hidden rounded-xl !p-6 text-start before:absolute before:inset-0 before:z-10 before:bg-black/20 lg:max-w-80"
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={title}
|
|
className="absolute inset-0 z-5 size-full origin-center object-cover object-center transition-transform duration-700 group-hover:scale-110"
|
|
/>
|
|
<a href={cta.link} className="absolute inset-0 z-10 size-full"></a>
|
|
<CardHeader className="pointer-events-none z-20 w-full gap-4 p-0 text-start">
|
|
<p className="font-bold text-white">{kicker}</p>
|
|
<CardTitle className="text-start text-3xl leading-tight text-white md:text-xl">
|
|
{title}
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardAction className="z-20 self-start">
|
|
<Button asChild variant="secondary" className="rounded-full">
|
|
<a href={cta.link}>{cta.label}</a>
|
|
</Button>
|
|
</CardAction>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const ProductCard = ({
|
|
link,
|
|
images,
|
|
name,
|
|
price,
|
|
category,
|
|
variants,
|
|
badges,
|
|
}: ProductCardProps) => {
|
|
const { regular, sale, currency } = price;
|
|
const [selectedColor, setSelectedColor] = useState<string>("");
|
|
|
|
const onOptionHover = (value: string) => {
|
|
setSelectedColor(value);
|
|
};
|
|
|
|
const productImages = useMemo(() => {
|
|
return variants.find((v) => v.value === selectedColor)?.images ?? images;
|
|
}, [images, selectedColor, variants]);
|
|
|
|
return (
|
|
<Card className="relative block rounded-none border-none bg-background p-0 shadow-none ring-0">
|
|
<CardContent className="p-0">
|
|
<div className="group relative overflow-hidden">
|
|
<a href={link}>
|
|
<AspectRatio ratio={1} className="overflow-hidden rounded-xl">
|
|
{productImages.map((img, index) => (
|
|
<div
|
|
className="absolute inset-0 size-full transition-opacity duration-700 first:z-20 group-hover:first:opacity-0 last:z-10 first:[&>img]:scale-105 first:[&>img]:delay-50 group-hover:first:[&>img]:scale-100 last:[&>img]:scale-105 group-hover:last:[&>img]:scale-100"
|
|
key={`product-list-9-card-img-wrapper-${index}`}
|
|
>
|
|
<img
|
|
srcSet={img.srcset}
|
|
alt={img.alt}
|
|
sizes={img.sizes}
|
|
className="block size-full object-cover object-center transition-transform duration-700"
|
|
/>
|
|
</div>
|
|
))}
|
|
</AspectRatio>
|
|
</a>
|
|
<div className="absolute start-2.5 top-2.5 z-60">
|
|
<Badges badges={badges} />
|
|
</div>
|
|
<div className="absolute end-2.5 bottom-2.5 z-60 md:hidden">
|
|
<Button variant="secondary" size="icon" className="rounded-full">
|
|
<ShoppingBag />
|
|
</Button>
|
|
</div>
|
|
<div className="absolute inset-x-4 bottom-4 z-60 hidden md:block">
|
|
<Button
|
|
variant="secondary"
|
|
className="w-full rounded-full opacity-0 duration-700 lg:translate-y-4 lg:group-hover:translate-y-0 lg:group-hover:opacity-100"
|
|
>
|
|
انتخاب گزینهها
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-col gap-1 pt-5">
|
|
<a
|
|
href={category.link}
|
|
dir="rtl"
|
|
className="block w-full text-start text-xs leading-loose font-bold text-muted-foreground uppercase underline-offset-4 hover:underline"
|
|
>
|
|
{category.label}
|
|
</a>
|
|
<a
|
|
href={link}
|
|
dir="rtl"
|
|
className="block w-full text-start underline-offset-4 hover:underline"
|
|
>
|
|
<CardTitle className="text-start leading-normal">{name}</CardTitle>
|
|
</a>
|
|
<div dir="rtl" className="flex w-full justify-start">
|
|
<Price
|
|
onSale={sale != null}
|
|
className="text-sm leading-normal font-bold"
|
|
>
|
|
<PriceValue
|
|
price={sale}
|
|
currency={currency}
|
|
variant="sale"
|
|
className="text-red-700"
|
|
/>
|
|
<PriceValue price={regular} currency={currency} variant="regular" />
|
|
</Price>
|
|
</div>
|
|
<ProductColors
|
|
value={selectedColor}
|
|
onOptionHover={onOptionHover}
|
|
variants={variants}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
const ProductColors = ({
|
|
value,
|
|
onOptionHover,
|
|
variants,
|
|
}: ProductColorsProps) => {
|
|
if (!variants) return;
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<RadioGroup value={value} className="mt-2 flex items-center gap-2">
|
|
{variants.map((item, index) => (
|
|
<Label
|
|
className="relative block pb-1.5 after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:w-full after:bg-primary after:opacity-0 after:transition-opacity hover:after:opacity-100 has-data-[state=checked]:after:opacity-100"
|
|
htmlFor={item.id}
|
|
key={`product-list-9-color-${index}`}
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<a href={item.link}>
|
|
<div
|
|
style={{
|
|
backgroundColor: item.color,
|
|
}}
|
|
className="size-5.5 border"
|
|
onMouseEnter={() => onOptionHover(item.value)}
|
|
></div>
|
|
</a>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<p>{item.label}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
<RadioGroupItem
|
|
value={item.value}
|
|
id={item.id}
|
|
className="sr-only"
|
|
/>
|
|
</Label>
|
|
))}
|
|
</RadioGroup>
|
|
</TooltipProvider>
|
|
);
|
|
};
|
|
|
|
const Badges = ({ badges }: BadgesProps) => {
|
|
if (!badges) return;
|
|
|
|
return (
|
|
<div className="flex flex-col gap-1.5">
|
|
{badges.map((item, index) => (
|
|
<Badge
|
|
style={{ backgroundColor: item.color }}
|
|
key={`product-list-9-badge-${index}`}
|
|
className="rounded-full dark:text-white"
|
|
>
|
|
{item.text}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export { ProductList9 };
|