responsive home page and layout
This commit is contained in:
hamid zarghami
@@ -8,20 +8,26 @@ const BannerSection: FC = () => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="relative">
|
||||
<Image src={banner} alt="banner" width={2000} height={574} className="w-full max-h-[574px] object-cover" />
|
||||
<div className="absolute h-full right-[120px] top-0 bottom-0 m-auto flex flex-col justify-center">
|
||||
<div className="text-base">چاپ و بسته بندی به روش هوشمندانه</div>
|
||||
<div className="text-2xl font-black mt-4">مجــتمع تخصصــــــی</div>
|
||||
<div className="text-2xl font-black mt-4">
|
||||
<Image
|
||||
src={banner}
|
||||
alt="banner"
|
||||
width={2000}
|
||||
height={574}
|
||||
className="w-full h-[420px] sm:h-[480px] lg:h-auto lg:max-h-[574px] object-cover"
|
||||
/>
|
||||
<div className="absolute inset-y-0 right-4 sm:right-8 lg:right-[120px] flex flex-col justify-center max-w-[min(100%,420px)] lg:max-w-none">
|
||||
<div className="text-sm sm:text-base">چاپ و بسته بندی به روش هوشمندانه</div>
|
||||
<div className="text-xl sm:text-2xl font-black mt-3 sm:mt-4">مجــتمع تخصصــــــی</div>
|
||||
<div className="text-xl sm:text-2xl font-black mt-3 sm:mt-4">
|
||||
چــــــاپ و بستــــه بندی <span className="text-primary">دستی</span> و <span className="text-primary">هوشمند</span>{" "}
|
||||
</div>
|
||||
<div className="mt-4 text-base flex flex-col gap-3">
|
||||
<div className="mt-3 sm:mt-4 text-sm sm:text-base flex flex-col gap-2 sm:gap-3">
|
||||
<div>قیمتهای عالی</div>
|
||||
<div>خدمات مشتریان بینظیر</div>
|
||||
<div>سیستم سفارشگیری ساده</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex gap-6 items-center">
|
||||
<div className="mt-4 flex flex-wrap gap-3 sm:gap-6 items-center">
|
||||
<Button>
|
||||
<div className="flex gap-2.5">
|
||||
<div>محصولات</div>
|
||||
|
||||
@@ -32,20 +32,20 @@ const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"relative overflow-hidden rounded-[40px]",
|
||||
featured ? "col-span-2 row-span-2" : "aspect-square",
|
||||
"relative overflow-hidden rounded-[24px] sm:rounded-[40px]",
|
||||
featured ? "col-span-2 row-span-2 min-h-[220px] sm:min-h-0" : "aspect-square",
|
||||
)}
|
||||
>
|
||||
<Image src={image} alt={title} fill className="object-cover" sizes={featured ? "50vw" : "25vw"} />
|
||||
<Image src={image} alt={title} fill className="object-cover" sizes={featured ? "(max-width: 768px) 100vw, 50vw" : "(max-width: 768px) 50vw, 25vw"} />
|
||||
<div
|
||||
className={cn(
|
||||
"absolute inset-x-4 bottom-4 flex items-center justify-between rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
|
||||
featured ? "px-6 py-3.5" : "px-5 py-3",
|
||||
"absolute inset-x-3 bottom-3 sm:inset-x-4 sm:bottom-4 flex items-center justify-between rounded-2xl sm:rounded-3xl bg-[#0A1B2C]/60 backdrop-blur-[2px]",
|
||||
featured ? "px-4 py-3 sm:px-6 sm:py-3.5" : "px-3 py-2.5 sm:px-5 sm:py-3",
|
||||
)}
|
||||
>
|
||||
<div className={cn("text-white font-bold", featured ? "text-lg" : "text-base")}>{title}</div>
|
||||
<div className={cn("text-white font-bold", featured ? "text-base sm:text-lg" : "text-sm sm:text-base")}>{title}</div>
|
||||
<div className="flex items-center gap-1.5 text-white">
|
||||
<span className={cn("font-bold", featured ? "text-sm" : "text-xs")}>مشاهده</span>
|
||||
<span className={cn("font-bold", featured ? "text-xs sm:text-sm" : "text-xs")}>مشاهده</span>
|
||||
<ArrowLeft size={featured ? 20 : 18} color="currentColor" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,10 +55,10 @@ const CategoryTile: FC<CategoryTileProps> = ({ title, image, featured }) => {
|
||||
|
||||
const BestSellerCategories: FC = () => {
|
||||
return (
|
||||
<div className="mt-[120px] px-[120px]">
|
||||
<div className="font-bold text-2xl">دسته بندی های پرفروش</div>
|
||||
<div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
|
||||
<div className="font-bold text-lg sm:text-2xl">دسته بندی های پرفروش</div>
|
||||
|
||||
<div className="mt-12 grid grid-cols-4 gap-10">
|
||||
<div className="mt-8 sm:mt-12 grid grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-10">
|
||||
{categories.map((category) => (
|
||||
<CategoryTile key={category.title} title={category.title} image={category.image} featured={category.featured} />
|
||||
))}
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
import GridWrapper from "@/app/components/GridWrapper";
|
||||
import { FC } from "react";
|
||||
import BlogCard from "./BlogCard";
|
||||
|
||||
const BlogsSection: FC = () => {
|
||||
return (
|
||||
<div className="mt-[120px] px-[120px]">
|
||||
<div className="text-2xl font-bold">مقالات ما</div>
|
||||
<GridWrapper desktop={4} mobile={1} className="mt-12">
|
||||
<div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
|
||||
<div className="text-lg sm:text-2xl font-bold">مقالات ما</div>
|
||||
<div className="mt-8 sm:mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-10">
|
||||
<BlogCard />
|
||||
<BlogCard />
|
||||
<BlogCard />
|
||||
<BlogCard />
|
||||
</GridWrapper>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -9,9 +9,9 @@ type CategoryCardProps = {
|
||||
|
||||
const CategoryCard: FC<CategoryCardProps> = ({ title }) => {
|
||||
return (
|
||||
<div className="w-full bg-[#D4E3F154]/33 rounded-[40px] p-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="text-[#21588C] font-bold">{title}</div>
|
||||
<div className="w-full bg-[#D4E3F154]/33 rounded-[24px] sm:rounded-[40px] p-4 sm:p-6">
|
||||
<div className="flex justify-between items-center gap-2">
|
||||
<div className="text-[#21588C] font-bold text-sm sm:text-base">{title}</div>
|
||||
<div className="bg-white/40 flex justify-center items-center">
|
||||
<ArrowLeft size={20} color="currentColor" className="text-primary rotate-45" />
|
||||
</div>
|
||||
|
||||
@@ -16,14 +16,14 @@ const categories = [
|
||||
|
||||
const CategorySection = () => {
|
||||
return (
|
||||
<div className="mt-[120px] px-[120px]">
|
||||
<Carousel slidesPerView={5} gap={40}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="font-bold text-2xl">دسته بندی های محصولات</div>
|
||||
<div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
|
||||
<Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 16, md: 24, lg: 40 }}>
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="font-bold text-lg sm:text-2xl">دسته بندی های محصولات</div>
|
||||
<CarouselControls prevLabel="دستهبندیهای قبلی" nextLabel="دستهبندیهای بعدی" />
|
||||
</div>
|
||||
|
||||
<CarouselTrack className="mt-12">
|
||||
<CarouselTrack className="mt-8 sm:mt-12">
|
||||
{categories.map((title) => (
|
||||
<CarouselSlide key={title}>
|
||||
<CategoryCard title={title} />
|
||||
|
||||
@@ -6,13 +6,15 @@ import { type FC } from "react";
|
||||
|
||||
const ContactCtaSection: FC = () => {
|
||||
return (
|
||||
<div className="mt-[120px] flex items-center justify-center gap-6 bg-linear-to-l from-primary/10 to-transparent py-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<Image src={deliveryTruckImage} alt="" width={40} height={40} className="size-10 object-contain" />
|
||||
<p className="text-xl font-bold text-[#0A1B2C] whitespace-nowrap">ارسال سریع به سراسر ایران | مشاوره رایگان قبل از سفارش</p>
|
||||
<div className="mt-12 sm:mt-16 lg:mt-[120px] flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6 bg-linear-to-l from-primary/10 to-transparent px-4 py-8 sm:py-10">
|
||||
<div className="flex items-center gap-3 text-center sm:text-right">
|
||||
<Image src={deliveryTruckImage} alt="" width={40} height={40} className="size-10 object-contain shrink-0" />
|
||||
<p className="text-base sm:text-xl font-bold text-[#0A1B2C] sm:whitespace-nowrap">
|
||||
ارسال سریع به سراسر ایران | مشاوره رایگان قبل از سفارش
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button className="gap-2 ps-5 pe-6 font-bold">
|
||||
<Button className="gap-2 ps-5 pe-6 font-bold shrink-0">
|
||||
<CallCalling size={20} color="currentColor" variant="Linear" />
|
||||
تماس با ما
|
||||
</Button>
|
||||
|
||||
@@ -5,11 +5,11 @@ import ProductCard from "./ProductCard";
|
||||
|
||||
const OrderByApplication: FC = () => {
|
||||
return (
|
||||
<div className="p-[120px] bg-[#F1F6FA] mt-[120px]">
|
||||
<div className="text-2xl font-bold">سفارش بر اساس کاربرد</div>
|
||||
<Carousel slidesPerView={5} gap={40}>
|
||||
<div className="flex mt-12 justify-between items-center">
|
||||
<div>
|
||||
<div className="px-4 py-12 sm:px-8 sm:py-16 lg:p-[120px] bg-[#F1F6FA] mt-12 sm:mt-16 lg:mt-[120px]">
|
||||
<div className="text-lg sm:text-2xl font-bold">سفارش بر اساس کاربرد</div>
|
||||
<Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 16, md: 24, lg: 40 }}>
|
||||
<div className="flex mt-8 sm:mt-12 justify-between items-center gap-4">
|
||||
<div className="min-w-0 flex-1 max-w-[240px] sm:max-w-none sm:flex-none">
|
||||
<Select
|
||||
options={[
|
||||
{
|
||||
@@ -30,7 +30,7 @@ const OrderByApplication: FC = () => {
|
||||
<CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
|
||||
</div>
|
||||
|
||||
<CarouselTrack className="mt-12 px-3 py-4 -mx-3">
|
||||
<CarouselTrack className="mt-8 sm:mt-12 px-2 sm:px-3 py-4 -mx-2 sm:-mx-3">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<CarouselSlide key={index}>
|
||||
<ProductCard />
|
||||
|
||||
@@ -4,9 +4,15 @@ import { FC } from "react";
|
||||
|
||||
const OrderRegistrationSteps: FC = () => {
|
||||
return (
|
||||
<div className="p-[120px] bg-[#F1F6FA] mt-[120px]">
|
||||
<div className="text-2xl font-bold">سفارش بر اساس کاربرد</div>
|
||||
<Image src={ImageSrc} alt="Order Registration Steps" width={1000} height={1000} className="w-full mt-12 h-auto object-contain" />
|
||||
<div className="px-4 py-12 sm:px-8 sm:py-16 lg:p-[120px] bg-[#F1F6FA] mt-12 sm:mt-16 lg:mt-[120px]">
|
||||
<div className="text-lg sm:text-2xl font-bold">سفارش بر اساس کاربرد</div>
|
||||
<Image
|
||||
src={ImageSrc}
|
||||
alt="Order Registration Steps"
|
||||
width={1000}
|
||||
height={1000}
|
||||
className="w-full mt-8 sm:mt-12 h-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -4,14 +4,14 @@ import ProductCard from "./ProductCard";
|
||||
|
||||
const ProductSection: FC = () => {
|
||||
return (
|
||||
<div className="mt-[120px] px-[120px]">
|
||||
<Carousel slidesPerView={5} gap={40}>
|
||||
<div className="flex justify-between items-center">
|
||||
<div className="font-bold text-2xl">محبوبترین محصولات</div>
|
||||
<div className="mt-12 px-4 sm:mt-16 sm:px-8 lg:mt-[120px] lg:px-[120px]">
|
||||
<Carousel slidesPerView={{ base: 1.4, md: 3, lg: 5 }} gap={{ base: 16, md: 24, lg: 40 }}>
|
||||
<div className="flex justify-between items-center gap-4">
|
||||
<div className="font-bold text-lg sm:text-2xl">محبوبترین محصولات</div>
|
||||
<CarouselControls prevLabel="محصولات قبلی" nextLabel="محصولات بعدی" />
|
||||
</div>
|
||||
|
||||
<CarouselTrack className="mt-12 px-3 py-4 -mx-3">
|
||||
<CarouselTrack className="mt-8 sm:mt-12 px-2 sm:px-3 py-4 -mx-2 sm:-mx-3">
|
||||
{Array.from({ length: 10 }).map((_, index) => (
|
||||
<CarouselSlide key={index}>
|
||||
<ProductCard />
|
||||
|
||||
@@ -1,32 +1,25 @@
|
||||
import { ColorSwatch, Element4, LampCharge, Magicpen, Setting2, TruckFast } from "iconsax-reactjs";
|
||||
import { FC } from "react";
|
||||
|
||||
const steps = [
|
||||
{ label: "تحلیل نیاز برند", Icon: LampCharge },
|
||||
{ label: "طراحی و آمادهسازی فایل", Icon: Magicpen },
|
||||
{ label: "انتخاب فناوری و متریال", Icon: Element4 },
|
||||
{ label: "کنترل رنگ و نمونهگیری", Icon: ColorSwatch },
|
||||
{ label: "عملیات تکمیلی", Icon: Setting2 },
|
||||
{ label: "تحویل به موقع", Icon: TruckFast },
|
||||
];
|
||||
|
||||
const StepSection: FC = () => {
|
||||
return (
|
||||
<div className="w-full px-[120px] bg-secondary flex justify-between items-center h-[80px]">
|
||||
<div className="flex gap-4 3tems-center">
|
||||
<LampCharge variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm">تحلیل نیاز برند</div>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Magicpen variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm">طراحی و آمادهسازی فایل</div>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Element4 variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm">انتخاب فناوری و متریال</div>
|
||||
</div>
|
||||
<div className="flex gap-4 i3ems-center">
|
||||
<ColorSwatch variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm">کنترل رنگ و نمونهگیری</div>
|
||||
</div>
|
||||
<div className="flex gap-3 items-center">
|
||||
<Setting2 variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm">عملیات تکمیلی</div>
|
||||
</div>
|
||||
<div className="flex gap-43items-center">
|
||||
<TruckFast variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm">تحویل به موقع</div>
|
||||
<div className="w-full px-4 sm:px-8 lg:px-[120px] bg-secondary">
|
||||
<div className="flex gap-6 lg:gap-4 lg:justify-between items-center h-auto py-4 lg:py-0 lg:h-[80px] overflow-x-auto scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden">
|
||||
{steps.map(({ label, Icon }) => (
|
||||
<div key={label} className="flex gap-3 items-center shrink-0">
|
||||
<Icon variant="Bulk" size={24} color="currentColor" className="text-primary" />
|
||||
<div className="font-bold text-sm whitespace-nowrap">{label}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user