clean project sections and page and set pagination to projects

2025-06-18 20:02:27 +03:30
parent 8ddf2dc7db
commit 38df8ec335
14 changed files with 179 additions and 81 deletions
@@ -42,6 +42,8 @@ declare const messages: {
  "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.",
+  "com_home_projects_show_more": "More Projects",
+  "com_home_projects_details_CTA": "Show Details",

  "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.",
@@ -57,7 +59,7 @@ declare const messages: {
  "com_home_story_slogan_bold": "industrial innovation",
  "com_home_story_description": "We are a leading provider of industrial solutions, dedicated to delivering high-quality products and services that meet the unique needs of our clients. Our team of experts is committed to driving success in today’s competitive market through innovation and excellence.",
  "com_home_story_projects_count": "Completed Projects",
-  "com_home_story_customer_count": "Happy Customers",
+  "com_home_story_customer_count": "Satisfied Customer",
  "com_home_story_experience": "Years of Experience",

  "com_products_category_Ghazaghi_title": "Ghazaghi",
@@ -117,6 +119,7 @@ declare const messages: {

  "page_projects_metadata_title": "Projects",
  "page_projects_metadata_description": "Discover successful projects completed using our high-quality bricks and expert craftsmanship.",
+  "page_projects_description": "Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship.",

  "page_product_categories_metadata_title": "Product Categories",
  "page_product_categories_metadata_description": "Browse through our product categories including Ghazaghi, yellow bricks, facing bricks, and more to find the right solution for your project.",
@@ -39,6 +39,8 @@
  "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.",
+  "com_home_projects_show_more": "More Projects",
+  "com_home_projects_details_CTA": "Show Details",

  "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.",
@@ -54,7 +56,7 @@
  "com_home_story_slogan_bold": "industrial innovation",
  "com_home_story_description": "We are a leading provider of industrial solutions, dedicated to delivering high-quality products and services that meet the unique needs of our clients. Our team of experts is committed to driving success in today’s competitive market through innovation and excellence.",
  "com_home_story_projects_count": "Completed Projects",
-  "com_home_story_customer_count": "Happy Customers",
+  "com_home_story_customer_count": "Satisfied Customer",
  "com_home_story_experience": "Years of Experience",

  "com_products_category_Ghazaghi_title": "Ghazaghi",
@@ -114,6 +116,7 @@

  "page_projects_metadata_title": "Projects",
  "page_projects_metadata_description": "Discover successful projects completed using our high-quality bricks and expert craftsmanship.",
+  "page_projects_description": "Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship. Discover successful projects completed using our high-quality bricks and expert craftsmanship.",

  "page_product_categories_metadata_title": "Product Categories",
  "page_product_categories_metadata_description": "Browse through our product categories including Ghazaghi, yellow bricks, facing bricks, and more to find the right solution for your project.",
@@ -39,6 +39,8 @@
  "com_home_projects_title": "پروژه‌های موفق ما",
  "com_home_projects_title_bold": "ابتکارات",
  "com_home_projects_description": "ابتکارات پروژه‌های موفق ما نشان‌دهنده تعهد ما به برتری و نوآوری در صنایع مختلف است.",
+  "com_home_projects_show_more": "پروژه‌های بیشتر",
+  "com_home_projects_details_CTA": "مشاهده‌ی جزییات",

  "footer_title": "راهکارهای صنعتی برای دنیای مدرن",
  "footer_description": "ما متعهد به ارائه راهکارهای صنعتی شخصی‌سازی شده هستیم که نیازهای منحصر به فرد مشتریانمان را برآورده می‌کند. تیم متخصص ما به ارائه محصولات و خدمات با کیفیت بالا که موفقیت را در بازار رقابتی امروز تضمین می‌کند، متعهد است.",
@@ -90,7 +92,7 @@
  "com_contact_phone_error": "شماره تماس معتبر نیست (مثلاً: 09123456789)",
  "com_contact_textarea_error": "پیام باید حداقل ۱۰ کاراکتر باشد",
  "com_contact_button_submit": "ارسال پیام",
-  "pages_notFound_title": "صفحه ۴۰۴ پیدا نشد",
+  "pages_notFound_title": "صفحه مورد نظر پیدا نشد.",
  "pages_notFound_description": "صفحه‌ای که به دنبال آن هستید وجود ندارد یا منتقل شده است. لطفاً آدرس را بررسی کنید یا به صفحه اصلی بازگردید.",
  "pages_notFound_button": "بازگشت به صفحه اصلی",

@@ -111,6 +113,7 @@

  "page_projects_metadata_title": "پروژه‌ها",
  "page_projects_metadata_description": "نگاهی به پروژه‌های موفق ما که با استفاده از آجرهای با کیفیت اجرا شده‌اند.",
+  "page_projects_description": "Discover successful projects completed using our high-quality bricks and expert craftsmanship.",

  "page_product_categories_metadata_title": "دسته‌بندی محصولات",
  "page_product_categories_metadata_description": "دسته‌بندی کامل آجرها شامل آجر قزاقی، آجر زرد، آجر نما و موارد دیگر را در این بخش بررسی کنید.",
@@ -1,18 +1,18 @@
 import { IProjectCardProps } from '@/app/api/projects/data';
+import routeFactory from '@/assets/constants/routeFactory';
 import images from '@/assets/images/images';
 import InnerPageBanner from '@/components/layout/innerPages/banner';
-import ProjectsGrid from '@/components/pages/project/ProjectGrid';
+import SectionTitle from '@/components/layout/sectionTitle';
 import ProjectsGridView from '@/components/pages/project/projectGridView';
+import Button from '@/components/uikit/button';
 import { IPageParams } from '@/models/layout';
 import { getProjects } from '@/services/projects';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
-import Head from 'next/head';

 export async function generateMetadata({ params }: { params: IPageParams }) {
  const { locale } = await params;
  setRequestLocale(locale);
  const t = await getTranslations({ locale });
-
  return {
    title: t('page_projects_metadata_title'),
    description: t('page_projects_metadata_description'),
@@ -25,15 +25,25 @@ export default async function ProjectsPage({
 }) {
  const { locale } = await params;
  const t = await getTranslations({ locale });
-  const projects: IProjectCardProps[] = await getProjects();
+  const projects = await getProjects();
+
  return (
    <main>
      <InnerPageBanner
        title={t('pages_projects_title')}
        imageSrc={images.aboutBanner.src}
      />
-      <div className="container-fluid mx-auto my-12 md:my-24">
-        <ProjectsGridView />
+      <div
+        id="projectList"
+        className="container-fluid mx-auto flex flex-col gap-10 py-12 md:py-24"
+      >
+        <h3 className="text-xl tracking-normal max-lg:hidden">
+          {t('page_projects_description')}
+        </h3>
+        <ProjectsGridView
+          initialProjects={projects.data}
+          initialPagination={projects.pagination}
+        />
      </div>
    </main>
  );
@@ -1,7 +1,7 @@
 import images from '@/assets/images/images';

 export interface IProjectCardProps {
-  id:string;
+  id: string;
  title: string;
  fa_title?: string;
  imageSrc: string;
@@ -9,46 +9,48 @@ export interface IProjectCardProps {

 export const projects = [
  {
-    id:'1',
+    id: '1',
    title: 'Sustainable Practices Reducing Waste in Industrial Production',
    fa_title: 'روش‌های پایدار برای کاهش ضایعات در تولید صنعتی',
    imageSrc: `/images/project1.jpeg`,
  },
  {
-    id:'2',
+    id: '2',
    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
    fa_title: 'رباتیک پیشرفته و تحول فرآیندهای صنعتی',
-    imageSrc:  `/images/project2.jpeg`,
+    imageSrc: `/images/project2.jpeg`,
  },
  {
-    id:'3',
+    id: '3',
    title: 'Top Benefits of the Robotics in Manufacturing',
    fa_title: 'مزایای اصلی استفاده از رباتیک در تولید',
-    imageSrc:  `/images/project3.jpeg`,
+    imageSrc: `/images/project3.jpeg`,
  },
  {
-    id:'4',
+    id: '4',
    title: 'Leveraging Data Analytics for Smarter Production',
    fa_title: 'استفاده از تحلیل داده برای تولید هوشمندتر',
-    imageSrc:  `/images/project4.jpeg`,
-            
+    imageSrc: `/images/project4.jpeg`,
  },
  {
-    id:'5',
+    id: '5',
    title: 'Reducing Operational Costs Through Automation',
    fa_title: 'کاهش هزینه‌ها با اتوماسیون',
-    imageSrc:  `/images/project1.jpeg`,
+    imageSrc: `/images/project1.jpeg`,
  },
  {
-    id:'6',
+    id: '6',
    title: 'The Advantages of Customized Manufacturing Solutions',
    fa_title: 'مزایای راه‌حل‌های سفارشی‌سازی در تولید',
-    imageSrc:  `/images/project1.jpeg`,
+    imageSrc: `/images/project1.jpeg`,
  },
-] as IProjectCardProps[]
+] as IProjectCardProps[];

-export function generateProjects(
-): IProjectCardProps[] {
-  return [...projects, ...projects, ...projects].map((e, i)=>({...e, id:String(i+1)}))
- 
-}
+export function generateProjects(): IProjectCardProps[] {
+  return [...projects, ...projects, ...projects, ...projects, ...projects].map(
+    (e, i) => ({
+      ...e,
+      id: String(i + 1),
+    }),
+  );
+}
@@ -1,39 +1,42 @@
 import { NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
-import { generateProjects  } from './data';
-
+import { generateProjects } from './data';

 export async function GET(request: Request) {
  let projects = generateProjects();
-  let data = projects
+  let data = projects;

  const cookieStore = await cookies();
-    const lang = (await cookieStore).get('lang')?.value || 'fa';
+  const lang = (await cookieStore).get('lang')?.value || 'fa';
+
+  // Pagination logic
+  const { searchParams } = new URL(request.url);
+  const page = parseInt(searchParams.get('page') || '1', 10);
+  const perPage = 20;
+
+  const start = (page - 1) * perPage;
+  const end = start + perPage;
+  const paginatedProjects = projects.slice(start, end);

  if (lang === 'fa') {
-    data = projects.map(
-      ({
-        id,
-        title,
-        fa_title,
-        imageSrc,
-      }) => {
-        if (lang === 'fa') {
-          return {
-            id,
-            title: fa_title || title,
-            imageSrc,
-          };
-        }
+    data = paginatedProjects.map((project) => {
+      if (lang === 'fa') {
        return {
-          id,
-          title,
-          imageSrc,
-         
+          ...project,
+          title: project.fa_title || project.title,
        };
-      },
-    );
+      }
+      return project;
+    });
  }

-  return NextResponse.json({ data: projects });
+  return NextResponse.json({
+    data: projects,
+    pagination: {
+      page,
+      perPage,
+      total: projects.length,
+      totalPages: Math.ceil(projects.length / perPage),
+    },
+  });
 }
@@ -22,7 +22,7 @@ export default function Header() {

  return (
    <header
-      className="relative w-full bg-cover bg-right bg-no-repeat text-white md:h-screen"
+      className="relative w-full overflow-hidden bg-cover bg-right bg-no-repeat text-white md:h-screen"
      style={{ backgroundImage: `url(${images.homeBanner.src})` }}
    >
      <div className="absolute inset-0 z-0 bg-black opacity-50 blur-[100px]" />
@@ -23,7 +23,7 @@ export default function Pagination({
    pages.push(i);
  }

-  return (
+  return pages.length ? (
    <nav
      className={`mt-8 flex items-center justify-center gap-2 ${className || ''}`}
    >
@@ -51,5 +51,7 @@ export default function Pagination({
        &gt;
      </IconButton>
    </nav>
+  ) : (
+    <></>
  );
 }
@@ -29,7 +29,6 @@ export default function AboutTopInfo() {
      </div>
      <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')}
@@ -88,7 +87,7 @@ export default function AboutTopInfo() {
              <AchievementTextBox key={index} title={title} />
            ))}
          </div>
-          <div className="mt-10">
+          <div className="mt-10 max-md:mx-auto">
            <Button endIcon="showMore" link={routes.contact.route()}>
              {t('pages_contact_title')}
            </Button>
@@ -4,30 +4,51 @@ import { TLocales } from '@/models/layout';
 import { getProjects } from '@/services/projects';
 import { IProjectCardProps } from '../project/project';
 import ProjectsGrid from '../project/ProjectGrid';
+import Button from '@/components/uikit/button';
+import routeFactory from '@/assets/constants/routeFactory';
 interface Props {
  locale: TLocales;
 }
 export default async function HomePageProjects({ locale }: Props) {
  const t = await getTranslations({ locale });
-  const projects: IProjectCardProps[] = await getProjects();
+  const projects = await getProjects();
+  console.log(projects);
+
+  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 max-lg:pt-6`}
+        className={`relative container mx-auto w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28 max-lg:pt-6`}
      >
-        <div className="relative z-20 container mx-auto grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
+        <div className="relative z-20 grid grid-cols-1 lg:grid-cols-2 lg:gap-28">
          <SectionTitle
            title={t('pages_projects_title')}
            description={t('com_home_projects_title')}
            description_bold={t('com_home_projects_title_bold')}
            locale={locale}
          />
-          <h4 className="pt-10 text-base font-extralight tracking-normal max-lg:hidden">
-            {t('com_home_projects_description')}
-          </h4>
+          <div className="pt-10 max-lg:hidden">
+            <h4 className="text-base font-extralight tracking-normal max-lg:hidden">
+              {t('com_home_projects_description')}
+            </h4>
+            <Button
+              link={routes.projects.route()}
+              endIcon="showMore"
+              className="mt-5"
+            >
+              {t('com_home_projects_show_more')}
+            </Button>
+          </div>
        </div>

-        <ProjectsGrid projects={projects?.slice(-4)} />
+        <ProjectsGrid projects={projects.data?.slice(3)} className="mt-10" />
+        <Button
+          link={routes.projects.route()}
+          endIcon="showMore"
+          className="mx-auto mt-5 lg:hidden"
+        >
+          {t('com_home_projects_show_more')}
+        </Button>
      </div>
    </div>
  );
@@ -1,17 +1,26 @@
+'use client';
+
 import Image from 'next/image';
 import Link from 'next/link';
 import { IProjectCardProps } from './project';
-import { getProjects } from '@/services/projects';
+import Button from '@/components/uikit/button';
+import { useTranslations } from 'next-intl';

-export default async function ProjectsGrid({
+export default function ProjectsGrid({
  projects,
+  className = '',
 }: {
  projects: IProjectCardProps[];
+  className?: string;
 }) {
+  const t = useTranslations();
+
  return (
-    <div className="container mx-auto grid grid-cols-1 gap-6 px-4 pt-12 pb-0 md:grid-cols-2 md:py-28">
+    <div
+      className={`grid grid-cols-1 gap-8 md:grid-cols-2 md:gap-12 xl:grid-cols-3 xl:gap-18 ${className}`}
+    >
      {projects.map((project, index) => (
-        <Link href={'/'} key={index} className="overflow-hidden bg-white">
+        <div className="group flex flex-col gap-4 overflow-hidden bg-white md:gap-6">
          <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
            <Image
              src={project.imageSrc}
@@ -19,12 +28,21 @@ export default async function ProjectsGrid({
              fill
              className="h-auto w-full object-cover"
            />
+            <div className="invisible absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 backdrop-blur-xs transition-all group-hover:visible group-hover:opacity-100">
+              <Button endIcon="showMore">
+                {t('com_home_projects_details_CTA')}
+              </Button>
+            </div>
          </div>

-          <div className="py-7 text-center">
-            <h2 className="mb-5 text-xl font-semibold">{project.title}</h2>
-          </div>
-        </Link>
+          <Link
+            href={'/'}
+            key={index}
+            className="group-hover:text-primary text-center text-gray-500"
+          >
+            <h2 className="text-xl font-semibold">{project.title}</h2>
+          </Link>
+        </div>
      ))}
    </div>
  );
@@ -3,3 +3,8 @@ export interface IProjectCardProps {
  title: string;
  link: string;
 }
+
+export interface IProjectGridViewProps {
+  initialProjects: IProjectCardProps[];
+  initialPagination: IPagination;
+}
@@ -1,14 +1,39 @@
-import { getProjects } from '@/services/projects';
-import { IProjectCardProps } from './project';
-import ProjectsGrid from './ProjectGrid';
+'use client';

-export default async function ProjectsGridView() {
-  const projects: IProjectCardProps[] = await getProjects();
+import { getProjects } from '@/services/projects';
+import { IProjectGridViewProps } from './project';
+import ProjectsGrid from './ProjectGrid';
+import Pagination from '@/components/layout/pagination';
+import { useState } from 'react';
+
+export default function ProjectsGridView({
+  initialProjects,
+  initialPagination,
+}: IProjectGridViewProps) {
+  const [projects, setProjects] = useState(initialProjects);
+  const [pagination, setPagination] = useState(initialPagination);
+
+  const fetchPage = (page: number) => {
+    console.log(page);
+
+    getProjects(page)
+      .then((res) => {
+        setProjects(res.data);
+        setPagination(res.pagination);
+
+        document
+          .getElementById('projectList')
+          ?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      })
+      .catch((error) => {
+        console.error('Failed to fetch Projects:', error);
+      });
+  };

  return (
    <>
-      <ProjectsGrid projects={projects} />
-      {/* <Pagination {...pagination} onPageChange={fetchPage} /> */}
+      {projects?.length ? <ProjectsGrid projects={projects} /> : <></>}
+      <Pagination {...pagination} onPageChange={fetchPage} />
    </>
  );
 }
@@ -3,15 +3,19 @@
 import api from '@/lib/axios';
 import { cookies } from 'next/headers';

-export async function getProjects() {
+export async function getProjects(page = 1 as number) {
  const cookiesStore = await cookies();
+  console.log('page');
+  console.log(page);
+
  return api
    .get('/projects', {
+      params: { page },
      headers: {
        Cookie: cookiesStore.toString(),
      },
    })
-    .then(({ data }) => Promise.resolve(data.data))
+    .then(({ data }) => Promise.resolve(data))
    .catch((error) => Promise.reject(error));
 }