Merge remote-tracking branch 'origin/navbar'

2025-06-13 19:58:45 +03:30
parent 261ab28447 594643816a
commit efef7fdbbb
24 changed files with 305 additions and 356 deletions
@@ -32,6 +32,11 @@ declare const messages: {
  "com_home_products_title": "The Qualified bricks for Your Projects",
  "com_home_products_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "com_home_projects_title": "Our successful project",
  "com_home_projects_title_bold": "initiatives",
  "com_home_projects_description": "Our successful project initiatives showcase our commitment to excellence and innovation across various industries.",
  "footer_title": "Industrial Solutions for a Modern World",
  "footer_description": "We are committed to providing personalized industrial solutions that meet the unique needs of our clients. Our team of experts is dedicated to delivering high-quality products and services that drive success in today’s competitive market.",
  "footer_slogan": "We are committed to providing personalized industrial solutions.",
@@ -29,6 +29,11 @@
  "com_home_products_title": "The Qualified bricks for Your Projects",
  "com_home_products_description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
  "com_home_projects_title": "Our successful project",
  "com_home_projects_title_bold": "initiatives",
  "com_home_projects_description": "Our successful project initiatives showcase our commitment to excellence and innovation across various industries.",
  "footer_title": "Industrial Solutions for a Modern World",
  "footer_description": "We are committed to providing personalized industrial solutions that meet the unique needs of our clients. Our team of experts is dedicated to delivering high-quality products and services that drive success in today’s competitive market.",
  "footer_slogan": "We are committed to providing personalized industrial solutions.",
@@ -4,6 +4,7 @@ import AboutTopInfo from '@/components/pages/about/TopInfo';
 import { IPageParams } from '@/models/layout';
 import { setRequestLocale } from 'next-intl/server';
 import { getTranslations } from 'next-intl/server';
 import Head from 'next/head';
 export default async function AboutUs({
  params,
@@ -18,6 +19,14 @@ export default async function AboutUs({
  const t = await getTranslations({ locale });
  return (
    <>
      <Head>
        <title>درباره کارخانه آجرپزی پاسارگاد</title>
        <meta
          name="description"
          content="معرفی کارخانه آجرپزی پاسارگاد، تاریخچه، چشم‌انداز، ظرفیت تولید و تیم متخصص ما."
        />
      </Head>
      <main className="flex flex-col items-center justify-between">
        <InnerPageBanner
          title={t('pages_about_title')}
@@ -25,5 +34,6 @@ export default async function AboutUs({
        />
        <AboutTopInfo />
      </main>
    </>
  );
 }
@@ -3,12 +3,21 @@ import InnerPageBanner from '@/components/layout/innerPages/banner';
 import PostsGrid from '@/components/pages/blog/PostsGrid';
 import { IPageParams } from '@/models/layout';
 import { getTranslations } from 'next-intl/server';
 import Head from 'next/head';
 export default async function Blog({ params }: { params: IPageParams }) {
  const paramsData = await params;
  const t = await getTranslations({ locale: paramsData.locale });
  return (
    <>
      <Head>
        <title>مقالات آموزشی درباره آجر و ساخت‌وساز - پاسارگاد</title>
        <meta
          name="description"
          content="مطالب تخصصی درباره آجر، نحوه انتخاب و کاربرد انواع آجر در ساختمان‌سازی و معماری."
        />
      </Head>
      <main className="flex flex-col items-center justify-between">
        <InnerPageBanner
          title={t('pages_blog_title')}
@@ -17,5 +26,6 @@ export default async function Blog({ params }: { params: IPageParams }) {
        <PostsGrid />
      </main>
    </>
  );
 }
@@ -6,6 +6,7 @@ import TouchUs from '@/components/pages/contact/TouchUs';
 import Image from 'next/image';
 import { getTranslations } from 'next-intl/server';
 import { IPageParams } from '@/models/layout';
 import Head from 'next/head';
 export default async function Contact({ params }: { params: IPageParams }) {
  const { locale } = await params;
@@ -13,6 +14,14 @@ export default async function Contact({ params }: { params: IPageParams }) {
  const t = await getTranslations({ locale });
  return (
    <>
      <Head>
        <title>تماس با کارخانه آجرپزی پاسارگاد</title>
        <meta
          name="description"
          content="راه‌های ارتباطی با کارخانه آجرپزی پاسارگاد شامل شماره تلفن، آدرس، نقشه و فرم تماس آنلاین."
        />
      </Head>
      <main className="flex flex-col items-center justify-between">
        <InnerPageBanner
          title={t('pages_contact_title')}
@@ -41,5 +50,6 @@ export default async function Contact({ params }: { params: IPageParams }) {
          </div>
        </div>
      </main>
    </>
  );
 }
@@ -4,6 +4,7 @@ import 'leaflet/dist/leaflet.css';
 import { notFound } from 'next/navigation';
 import { NextIntlClientProvider } from 'next-intl';
 import type { IPageParams } from '@/models/layout.d';
 import Head from 'next/head';
 export default async function RootLayout({
  children,
@@ -26,6 +27,13 @@ export default async function RootLayout({
  return (
    <html lang={locale} dir={locale === 'fa' ? 'rtl' : 'ltr'}>
      <Head>
        <meta name="robots" content="index, follow" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta property="og:site_name" content="کارخانه آجرپزی پاسارگاد" />
        <meta name="author" content="پاسارگاد" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <body className={`min-h-svh w-full overflow-x-hidden ${fontClass}`}>
        <NextIntlClientProvider locale={locale} messages={messages}>
          {children}
@@ -17,7 +17,7 @@ export default async function Home({ params }: { params: IPageParams }) {
      <AboutTopInfo />
      <HomePageProducts locale={locale} />
      <HomePageProjects locale={locale} />
-      <HomeStorySection className="my-24" />
+      <HomeStorySection className="my-24 max-lg:my-12" />
    </main>
  );
 }
@@ -1,21 +1,40 @@
 import { IProjectCardProps } from '@/app/api/projects/data';
 import images from '@/assets/images/images';
 import InnerPageBanner from '@/components/layout/innerPages/banner';
 import ProjectsGrid from '@/components/pages/project/ProjectGrid';
 import ProjectsGridView from '@/components/pages/project/projectGridView';
 import { IPageParams } from '@/models/layout';
 import { getProjects } from '@/services/projects';
 import { getTranslations } from 'next-intl/server';
 import Head from 'next/head';
-export default async function Projects({ params }: { params: IPageParams }) {
+export default async function ProjectsPage({
  params,
 }: {
  params: IPageParams;
 }) {
  const { locale } = await params;
  const t = await getTranslations({ locale });
-
+  const projects: IProjectCardProps[] = await getProjects();
  console.log(projects, 'proj');
  return (
-    <main className="flex flex-col items-center justify-between">
+    <>
      <Head>
        <title>پروژه‌های اجراشده با آجر پاسارگاد</title>
        <meta
          name="description"
          content="نمونه پروژه‌های موفق اجراشده با آجرهای باکیفیت کارخانه آجرپزی پاسارگاد در سراسر کشور."
        />
      </Head>
      <main>
        <InnerPageBanner
          title={t('pages_projects_title')}
-        imageSrc={images.blogBanner.src}
+          imageSrc={images.aboutBanner.src}
        />
-
+        <div className="container-fluid mx-auto my-24">
-      <ProjectsGrid />
+          <ProjectsGridView />
        </div>
      </main>
    </>
  );
 }
@@ -1,118 +0,0 @@
 export const productCategories = [
  {
    id: '1',
    title: 'Ghazaghi',
    fa_title: 'قزاقی',
    icon: 'categoryGhazaghi',
    typesCount: 22,
    priceTypeTitle: 'Economy',
    fa_priceTypeTitle: 'اقتصادی',
    bestForTitle: 'Best For Interior Part',
    fa_bestForTitle: 'Best For Interior Part',
    fa_description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
    description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
  },
  {
    id: '2',
    title: 'Ghermez',
    fa_title: 'قرمز',
    icon: 'categoryGhermez',
    typesCount: 12,
    priceTypeTitle: 'Luxury',
    fa_priceTypeTitle: 'لاکچری',
    bestForTitle: 'Best For Exterior Part',
    fa_bestForTitle: 'Best For Exterior Part',
    fa_description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
    description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
  },
  {
    id: '3',
    title: 'oryZard',
    fa_title: 'زرد',
    icon: 'categoryZard',
    typesCount: 11,
    priceTypeTitle: 'Economy',
    fa_priceTypeTitle: 'اقتصادی',
    bestForTitle: 'Best For Facing',
    fa_bestForTitle: 'Best For Facing',
    fa_description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
    description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
  },
  {
    id: '40',
    title: 'Semirom',
    fa_title: 'سمیرم',
    icon: 'categorySemirom',
    typesCount: 40,
    priceTypeTitle: 'Economy',
    fa_priceTypeTitle: 'اقتصادی',
    bestForTitle: 'Best For Building',
    fa_bestForTitle: 'Best For Building',
    fa_description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
    description: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`,
  },
 ] as APIProductCategoryEntity[];
 interface APIProductCategoryEntity {
  id: string;
  title: string;
  fa_title?: string;
  icon: string;
  typesCount: number;
  priceTypeTitle: string;
  fa_priceTypeTitle?: string;
  bestForTitle: string;
  fa_bestForTitle?: string;
  fa_description?: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`;
  description?: `Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features
 Facing bricks, also known as face bricks or veneer bricks, are specially designed for visible areas of a building, primarily the exterior facades, but also for interior walls where aesthetics are important. Unlike common bricks which are often covered by plaster or other materials, facing bricks are chosen for their visual appeal and ability to withstand environmental conditions.
 Facing Bricks: Characteristics and Features`;
 }
@@ -1,51 +0,0 @@
 import { NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { productCategories } from './data';
 export async function GET(request: Request) {
  let data = productCategories;
  const cookieStore = await cookies();
  const lang = (await cookieStore).get('lang')?.value || 'fa';
  if (lang === 'fa') {
    data = productCategories.map(
      ({
        id,
        title,
        fa_title,
        icon,
        typesCount,
        priceTypeTitle,
        fa_priceTypeTitle,
        bestForTitle,
        fa_bestForTitle,
        description,
        fa_description,
      }) => {
        if (lang === 'fa') {
          return {
            id,
            icon,
            typesCount,
            title: fa_title || title,
            priceTypeTitle: fa_priceTypeTitle || priceTypeTitle,
            bestForTitle: fa_bestForTitle || bestForTitle,
            description: fa_description || description,
          };
        }
        return {
          id,
          icon,
          typesCount,
          title,
          priceTypeTitle,
          bestForTitle,
          description,
        };
      },
    );
  }
  return NextResponse.json({ data: productCategories });
 }
@@ -0,0 +1,54 @@
 import images from '@/assets/images/images';
 export interface IProjectCardProps {
  id:string;
  title: string;
  fa_title?: string;
  imageSrc: string;
 }
 export const projects = [
  {
    id:'1',
    title: 'Sustainable Practices Reducing Waste in Industrial Production',
    fa_title: 'روش‌های پایدار برای کاهش ضایعات در تولید صنعتی',
    imageSrc: `/images/project1.jpeg`,
  },
  {
    id:'2',
    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
    fa_title: 'رباتیک پیشرفته و تحول فرآیندهای صنعتی',
    imageSrc:  `/images/project2.jpeg`,
  },
  {
    id:'3',
    title: 'Top Benefits of the Robotics in Manufacturing',
    fa_title: 'مزایای اصلی استفاده از رباتیک در تولید',
    imageSrc:  `/images/project3.jpeg`,
  },
  {
    id:'4',
    title: 'Leveraging Data Analytics for Smarter Production',
    fa_title: 'استفاده از تحلیل داده برای تولید هوشمندتر',
    imageSrc:  `/images/project4.jpeg`,
  },
  {
    id:'5',
    title: 'Reducing Operational Costs Through Automation',
    fa_title: 'کاهش هزینه‌ها با اتوماسیون',
    imageSrc:  `/images/project1.jpeg`,
  },
  {
    id:'6',
    title: 'The Advantages of Customized Manufacturing Solutions',
    fa_title: 'مزایای راه‌حل‌های سفارشی‌سازی در تولید',
    imageSrc:  `/images/project1.jpeg`,
  },
 ] as IProjectCardProps[]
 export function generateProjects(
 ): IProjectCardProps[] {
  return [...projects, ...projects, ...projects].map((e, i)=>({...e, id:String(i+1)}))
 }
@@ -0,0 +1,39 @@
 import { NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
 import { generateProjects  } from './data';
 export async function GET(request: Request) {
  let projects = generateProjects();
  let data = projects
  const cookieStore = await cookies();
    const lang = (await cookieStore).get('lang')?.value || 'fa';
  if (lang === 'fa') {
    data = projects.map(
      ({
        id,
        title,
        fa_title,
        imageSrc,
      }) => {
        if (lang === 'fa') {
          return {
            id,
            title: fa_title || title,
            imageSrc,
          };
        }
        return {
          id,
          title,
          imageSrc,
        };
      },
    );
  }
  return NextResponse.json({ data: projects });
 }
@@ -15,10 +15,12 @@ export default function SectionTitle({
        <Icon name="setting" className="text-primary" />
        <h3 className="text-sm leading-1 tracking-[0.175rem]">{title}</h3>
      </div>
-      <h2 className="text-[3.25rem] leading-14 font-extralight tracking-tight">
+      <h2 className="text-3xl font-extralight tracking-tight md:text-[3.25rem] md:leading-14">
        {description}
        {description_bold && (
-          <strong className="block font-bold">{description_bold}</strong>
+          <strong className="block font-light md:font-bold">
            {description_bold}
          </strong>
        )}
      </h2>
    </div>
@@ -22,11 +22,26 @@ export default function AboutTopInfo() {
  ];
  return (
-    <div className="w-white relative w-full py-28">
+    <div className="w-white relative w-full py-28 max-lg:pt-6 max-lg:pb-16">
-      <div className="absolute inset-0 z-10 flex items-end justify-start">
+      <div className="absolute inset-0 z-10 flex items-end justify-start max-md:hidden">
        <img src={images.factoryVector.src} className="max-h-56 w-auto" />
      </div>
-      <div className="relative z-20 container mx-auto grid grid-cols-2 items-stretch gap-10">
+      <div className="relative z-20 container mx-auto grid grid-cols-1 items-stretch gap-10 lg:grid-cols-2">
        <div className="lg:hidden">
          {' '}
          <div>
            <SectionTitle
              title={t('pages_about_title')}
              description={t('com_about_info_title')}
              description_bold={t('com_about_info_title_bold')}
            />
          </div>
          <div className="mt-3">
            <p className="text-base font-light text-gray-300">
              {t('com_about_info_description')}
            </p>
          </div>
        </div>
        <div className="relative h-full">
          <div className="grid h-44 grid-cols-2 gap-4 overflow-hidden">
            <div className="h-full overflow-hidden rounded-3xl">
@@ -42,8 +57,8 @@ export default function AboutTopInfo() {
              </span>
            </div>
          </div>
-          <div className="absolute right-0 bottom-0 h-full w-[70%] pt-32">
+          <div className="absolute right-0 bottom-0 h-full w-[70%] pt-32 max-lg:relative max-lg:-top-11 max-lg:float-end max-lg:p-0">
-            <div className="h-full w-full overflow-hidden rounded-3xl border-[12px] border-white">
+            <div className="h-full w-full overflow-hidden rounded-3xl border-[12px] border-white max-lg:aspect-[0.95] max-lg:h-auto">
              <img
                src={images.aboutImg_2.src}
                className="h-full w-full object-cover"
@@ -51,19 +66,21 @@ export default function AboutTopInfo() {
            </div>
          </div>
        </div>
-        <div className="flex flex-col pt-16 pb-20">
+        <div className="flex flex-col pt-16 pb-20 max-lg:-mt-16 max-lg:p-0">
          <div className="max-lg:hidden">
            <SectionTitle
              title={t('pages_about_title')}
              description={t('com_about_info_title')}
              description_bold={t('com_about_info_title_bold')}
            />
          </div>
-          <div className="mt-5">
+          <div className="mt-5 max-lg:hidden">
            <p className="text-base font-light text-gray-300">
              {t('com_about_info_description')}
            </p>
          </div>
-          <div className="mt-10 flex flex-col gap-4">
+          <div className="mt-2 flex flex-col gap-4">
            {topInfoAchievementTitles.map((title, index) => (
              <AchievementTextBox key={index} title={title} />
            ))}
@@ -28,8 +28,10 @@ export default function HomeStorySection({
  ];
  return (
-    <div className={`container mx-auto flex flex-col gap-12 ${className}`}>
+    <div
-      <div className="grid grid-cols-2 gap-10">
+      className={`container mx-auto flex flex-col gap-12 max-lg:gap-0 ${className}`}
    >
      <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
        <SectionTitle
          title={t('com_home_story_title')}
          description={t('com_home_story_slogan')}
@@ -47,19 +49,19 @@ export default function HomeStorySection({
        </div>
      </div>
-      <div className="grid grid-cols-2 gap-10">
+      <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
-        <div className="aspect-video w-full overflow-hidden rounded-3xl">
+        <div className="aspect-video w-full overflow-hidden rounded-3xl max-lg:hidden">
          <Image
            src={images.whatWeDoImage}
            alt=""
            className="h-full w-full object-cover"
          />
        </div>
-        <div className="flex flex-col py-8">
+        <div className="flex flex-col py-8 max-lg:gap-6">
          <p className="text-base font-light text-gray-500">
            {t('com_home_story_description')}
          </p>
-          <hr className="my-10 text-gray-100/50" />
+          <hr className="my-10 text-gray-100/50 max-lg:hidden" />
          <div className="grid grid-cols-3 justify-between gap-1">
            {statisticsData.map((stat, index) => (
              <div key={index} className="flex flex-col gap-1">
@@ -21,28 +21,28 @@ export default async function HomePageProducts({ locale }: Props) {
  return (
    <div className="w-full">
      <div
-        className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
+        className={`relative w-full bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-20 max-lg:pt-6 md:pb-48`}
        style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
      >
        <div className="absolute inset-0 z-10 bg-black opacity-50" />
-        <div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
+        <div className="relative z-20 container mx-auto grid grid-cols-1 gap-0 lg:grid-cols-2 lg:gap-28">
          <SectionTitle
            title={t('pages_product_categories_title')}
            description={t('com_home_products_title')}
            reverseColor
          />
-          <h4 className="pt-10 text-base font-extralight tracking-normal text-white">
+          <h4 className="pt-6 text-base font-extralight tracking-normal text-white lg:pt-10">
            {t('com_home_products_description')}
          </h4>
        </div>
      </div>
-      <div className="relative top-[-100px] z-20 container mx-auto w-full">
+      <div className="relative -top-7 z-20 container mx-auto w-full md:top-[-100px]">
-        <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
+        <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl max-md:gap-0 max-md:py-5 md:grid-cols-2 lg:grid-cols-4">
          {productCategories.map((category, index) => (
            <Link key={category.id} href={routes.products.route(category.id)}>
              <div
-                className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
+                className={`flex flex-col items-center justify-center gap-4 p-6 text-center max-md:gap-2 ${index ? 'border-s-[1px] border-gray-100' : ''} ${index !== productCategories.length - 1 ? `border-gray-100 max-md:border-b-[1px]` : ''}`}
              >
                <h3 className="text-xl font-bold text-gray-500">
                  {category.title}
@@ -1,65 +1,32 @@
 import images from '@/assets/images/images';
 import SectionTitle from '@/components/layout/sectionTitle';
 import { getProductCategories } from '@/services/products';
 import Link from 'next/link';
 import routeFactory from '@/assets/constants/routeFactory';
 import { getTranslations } from 'next-intl/server';
 import { TLocales } from '@/models/layout';
-import { getProjectCategories } from '@/services/projects';
+import { getProjects } from '@/services/projects';
 import { IProjectCardProps } from '../project/project';
-
+import ProjectsGrid from '../project/ProjectGrid';
 interface Props {
  locale: TLocales;
 }
 export default async function HomePageProjects({ locale }: Props) {
  const t = await getTranslations({ locale });
-
+  const projects: IProjectCardProps[] = await getProjects();
  // const projectCategories: IProjectCardProps[] = await getProjectCategories();
  const routes = routeFactory(t, locale);
  return (
    <div className="w-full">
      <div
-        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 pb-48`}
+        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 max-lg:pt-6`}
        // style={{ backgroundImage: `url(${images.homeProductBack.src})` }}
      >
-        <div className="absolute inset-0 z-10 bg-black opacity-50" />
+        <div className="relative z-20 container mx-auto grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
        <div className="relative z-20 container mx-auto grid grid-cols-2 gap-28">
          <SectionTitle
-            title={t('pages_product_categories_title')}
+            title={t('pages_projects_title')}
-            description={t('com_home_products_title')}
+            description={t('com_home_projects_title')}
-            reverseColor
+            description_bold={t('com_home_projects_title_bold')}
          />
-          <h4 className="pt-10 text-base font-extralight tracking-normal text-white">
+          <h4 className="pt-10 text-base font-extralight tracking-normal max-lg:hidden">
-            {t('com_home_products_description')}
+            {t('com_home_projects_description')}
          </h4>
        </div>
      </div>
-      <div className="relative top-[-100px] z-20 container mx-auto w-full">
+        <ProjectsGrid projects={projects?.slice(-4)} />
        {/* <div className="grid grid-cols-1 gap-8 rounded-4xl bg-gray-50 py-10 shadow-2xl md:grid-cols-2 lg:grid-cols-4">
          {projectCategories.map((category, index) => (
            <Link
              href={'#'}
              key={index}
              // href={routes.products.route(index)}
            >
              <div
                className={`flex flex-col items-center justify-center gap-4 p-6 text-center ${index ? 'border-s-[1px] border-gray-100' : ''}`}
              >
                <h3 className="text-xl font-bold text-gray-500">
                  {category.title}
                </h3>
                {/* <p className="text-lg font-light text-gray-400">
                  {t('com_products_category_types_count', {
                    count: category.typesCount,
                  })}
                </p> 
              </div>
            </Link>
          ))} 
        </div>*/}
      </div>
    </div>
  );
@@ -1,51 +1,14 @@
 import images from '@/assets/images/images';
 import Image from 'next/image';
 import Link from 'next/link';
 import { IProjectCardProps } from './project';
 import { getProjects } from '@/services/projects';
-const projects = [
+export default async function ProjectsGrid({ projects }) {
  {
    title: 'Sustainable Practices Reducing Waste in Industrial Production',
    imageSrc: images.projectImg_1.src,
    link: '#',
  },
  {
    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
    imageSrc: images.projectImg_1.src,
    link: '#',
  },
  {
    title: 'Top Benefits of the Robotics in Manufacturing',
    imageSrc: images.projectImg_1.src,
    link: '#',
  },
  {
    title: 'Leveraging Data Analytics for Smarter Production',
    imageSrc: images.projectImg_1.src,
    link: '#',
  },
  {
    title: 'Reducing Operational Costs Through Automation',
    imageSrc: '/images/post5.jpg',
    link: '#',
  },
  {
    title: 'The Advantages of Customized Manufacturing Solutions',
    imageSrc: '/images/post6.jpg',
    link: '#',
  },
 ] as IProjectCardProps[];
 export default function ProjectsGrid() {
  return (
-    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 py-14 md:grid-cols-2 md:py-28">
+    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 pt-12 pb-0 md:grid-cols-2 md:py-28">
      {projects.map((project, index) => (
-        <Link
+        <Link href={'/'} key={index} className="overflow-hidden bg-white">
-          href={project.link}
+          <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
          key={index}
          className="overflow-hidden bg-white"
        >
          <div className="relative aspect-[1.09] w-full overflow-hidden rounded-4xl">
            <Image
              src={project.imageSrc}
              alt={project.title}
@@ -0,0 +1,14 @@
 import { getProjects } from '@/services/projects';
 import { IProjectCardProps } from './project';
 import ProjectsGrid from './ProjectGrid';
 export default async function ProjectsGridView() {
  const projects: IProjectCardProps[] = await getProjects();
  return (
    <>
      <ProjectsGrid projects={projects} />
      {/* <Pagination {...pagination} onPageChange={fetchPage} /> */}
    </>
  );
 }
@@ -5,36 +5,29 @@ import api from '@/lib/axios';
 import { IResponse } from '@/models/response';
 import { cookies } from 'next/headers';
-export async function getProjectCategories() {
+export async function getProjects() {
  const cookiesStore = await cookies();
  return api
-    .get('/project_categories', {
+    .get('/projects', {
      headers: {
        Cookie: cookiesStore.toString(),
      },
    })
-    .then(({ data }) => {
+    .then(({ data }) => Promise.resolve(data.data))
      return Promise.resolve(data.data);
    })
    .catch((error) => Promise.reject(error));
 }
-
+// export async function getProjectById(
-
+//   projectId: string,
-export async function getProjects(
+// ): Promise<IProjectCardProps> {
-  categoryId: string,
+//   const cookiesStore = await cookies();
-  page = 1,
+//   return api
-): Promise<IResponse<IProjectCardProps[]>> {
+//     .get(`/projects/${projectId}`, {
-  const cookiesStore = await cookies();
+//       headers: {
-  return api
+//         Cookie: cookiesStore.toString(),
-    .get(`/project_categories/${categoryId}/projects`, {
+//       },
-      headers: {
+//     })
-        Cookie: cookiesStore.toString(),
+//     .then(({ data }) => Promise.resolve(data.data))
-      },
+//     .catch((error) => Promise.reject(error));
-      params: { page },
+// }
    })
    .then(({ data }) => {
      return Promise.resolve(data);
    })
    .catch((error) => Promise.reject(error));
 }