add title and description in head , responsive home page

2025-06-11 17:13:51 +03:30
parent ab37893d1b
commit 594643816a
18 changed files with 166 additions and 111 deletions
@@ -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,12 +19,21 @@ export default async function AboutUs({
  const t = await getTranslations({ locale });

  return (
-    <main className="flex flex-col items-center justify-between">
-      <InnerPageBanner
-        title={t('pages_about_title')}
-        imageSrc={images.aboutBanner.src}
-      />
-      <AboutTopInfo />
-    </main>
+    <>
+      <Head>
+        <title>درباره کارخانه آجرپزی پاسارگاد</title>
+        <meta
+          name="description"
+          content="معرفی کارخانه آجرپزی پاسارگاد، تاریخچه، چشم‌انداز، ظرفیت تولید و تیم متخصص ما."
+        />
+      </Head>
+      <main className="flex flex-col items-center justify-between">
+        <InnerPageBanner
+          title={t('pages_about_title')}
+          imageSrc={images.aboutBanner.src}
+        />
+        <AboutTopInfo />
+      </main>
+    </>
  );
 }
@@ -3,19 +3,29 @@ 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 (
-    <main className="flex flex-col items-center justify-between">
-      <InnerPageBanner
-        title={t('pages_blog_title')}
-        imageSrc={images.blogBanner.src}
-      />
+    <>
+      <Head>
+        <title>مقالات آموزشی درباره آجر و ساخت‌وساز - پاسارگاد</title>
+        <meta
+          name="description"
+          content="مطالب تخصصی درباره آجر، نحوه انتخاب و کاربرد انواع آجر در ساختمان‌سازی و معماری."
+        />
+      </Head>
+      <main className="flex flex-col items-center justify-between">
+        <InnerPageBanner
+          title={t('pages_blog_title')}
+          imageSrc={images.blogBanner.src}
+        />

-      <PostsGrid />
-    </main>
+        <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,33 +14,42 @@ export default async function Contact({ params }: { params: IPageParams }) {
  const t = await getTranslations({ locale });

  return (
-    <main className="flex flex-col items-center justify-between">
-      <InnerPageBanner
-        title={t('pages_contact_title')}
-        imageSrc={images.blogBanner.src}
-      />
+    <>
+      <Head>
+        <title>تماس با کارخانه آجرپزی پاسارگاد</title>
+        <meta
+          name="description"
+          content="راه‌های ارتباطی با کارخانه آجرپزی پاسارگاد شامل شماره تلفن، آدرس، نقشه و فرم تماس آنلاین."
+        />
+      </Head>
+      <main className="flex flex-col items-center justify-between">
+        <InnerPageBanner
+          title={t('pages_contact_title')}
+          imageSrc={images.blogBanner.src}
+        />

-      <div className="relative flex w-full flex-col bg-gray-200 pt-4 md:pt-28">
-        <div className="absolute inset-x-0 inset-y-64 z-2 flex items-end justify-start">
-          <div className="max-md:hidden md:w-1/2">
-            <Image
-              alt="footer-bg"
-              src={images.factoryVector}
-              className="h-full w-full object-cover"
-            />
+        <div className="relative flex w-full flex-col bg-gray-200 pt-4 md:pt-28">
+          <div className="absolute inset-x-0 inset-y-64 z-2 flex items-end justify-start">
+            <div className="max-md:hidden md:w-1/2">
+              <Image
+                alt="footer-bg"
+                src={images.factoryVector}
+                className="h-full w-full object-cover"
+              />
+            </div>
+          </div>
+          <div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row">
+            <TouchUs />
+            <ContactForm />
+          </div>
+
+          <div className="mt-4 w-full md:mt-28">
+            <div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
+              <ContactMap />
+            </div>
          </div>
        </div>
-        <div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row">
-          <TouchUs />
-          <ContactForm />
-        </div>
-
-        <div className="mt-4 w-full md:mt-28">
-          <div className="h-64 w-full overflow-hidden rounded-lg bg-gray-200">
-            <ContactMap />
-          </div>
-        </div>
-      </div>
-    </main>
+      </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>
  );
 }
@@ -6,6 +6,7 @@ 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 ProjectsPage({
  params,
@@ -17,22 +18,23 @@ export default async function ProjectsPage({
  const projects: IProjectCardProps[] = await getProjects();
  console.log(projects, 'proj');
  return (
-    <main>
-      <InnerPageBanner
-        title={t('pages_projects_title')}
-        imageSrc={images.aboutBanner.src}
-      />
-      <div className="container-fluid mx-auto my-24">
-        <ProjectsGridView />
-        {/* <div className="grid w-full grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3">
-          {projects?.map((project, index) => (
-            <>
-              yyy {project.title}
-              <ProjectsGrid key={index} {...project} />
-            </>
-          ))}
-        </div> */}
-      </div>
-    </main>
+    <>
+      <Head>
+        <title>پروژه‌های اجراشده با آجر پاسارگاد</title>
+        <meta
+          name="description"
+          content="نمونه پروژه‌های موفق اجراشده با آجرهای باکیفیت کارخانه آجرپزی پاسارگاد در سراسر کشور."
+        />
+      </Head>
+      <main>
+        <InnerPageBanner
+          title={t('pages_projects_title')}
+          imageSrc={images.aboutBanner.src}
+        />
+        <div className="container-fluid mx-auto my-24">
+          <ProjectsGridView />
+        </div>
+      </main>
+    </>
  );
 }
@@ -5,7 +5,6 @@ export interface IProjectCardProps {
  title: string;
  fa_title?: string;
  imageSrc: string;
-  link: string;
 }

 export const projects = [
@@ -13,42 +12,43 @@ export const projects = [
    id:'1',
    title: 'Sustainable Practices Reducing Waste in Industrial Production',
    fa_title: 'روش‌های پایدار برای کاهش ضایعات در تولید صنعتی',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
+    imageSrc: `/images/project1.jpeg`,
  },
  {
    id:'2',
    title: 'Advanced Robotics Revolutionizing Industrial Workflows',
    fa_title: 'رباتیک پیشرفته و تحول فرآیندهای صنعتی',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
+    imageSrc:  `/images/project2.jpeg`,
  },
  {
    id:'3',
    title: 'Top Benefits of the Robotics in Manufacturing',
    fa_title: 'مزایای اصلی استفاده از رباتیک در تولید',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
+    imageSrc:  `/images/project3.jpeg`,
  },
  {
    id:'4',
    title: 'Leveraging Data Analytics for Smarter Production',
    fa_title: 'استفاده از تحلیل داده برای تولید هوشمندتر',
-    imageSrc: images.projectImg_1.src,
-    link: '#',
+    imageSrc:  `/images/project4.jpeg`,
+            
  },
  {
    id:'5',
    title: 'Reducing Operational Costs Through Automation',
    fa_title: 'کاهش هزینه‌ها با اتوماسیون',
-    imageSrc: '/images/post5.jpg',
-    link: '#',
+    imageSrc:  `/images/project1.jpeg`,
  },
  {
    id:'6',
    title: 'The Advantages of Customized Manufacturing Solutions',
    fa_title: 'مزایای راه‌حل‌های سفارشی‌سازی در تولید',
-    imageSrc: '/images/post6.jpg',
-    link: '#',
+    imageSrc:  `/images/project1.jpeg`,
  },
 ] as IProjectCardProps[]
+
+export function generateProjects(
+): IProjectCardProps[] {
+  return [...projects, ...projects, ...projects].map((e, i)=>({...e, id:String(i+1)}))
+ 
+}
@@ -1,10 +1,11 @@
 import { NextResponse } from 'next/server';
 import { cookies } from 'next/headers';
-import { projects } from './data';
+import { generateProjects  } from './data';


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

  const cookieStore = await cookies();
    const lang = (await cookieStore).get('lang')?.value || 'fa';
@@ -16,21 +17,18 @@ export async function GET(request: Request) {
        title,
        fa_title,
        imageSrc,
-        link,
      }) => {
        if (lang === 'fa') {
          return {
            id,
            title: fa_title || title,
            imageSrc,
-            link,
          };
        }
        return {
          id,
          title,
          imageSrc,
-          link,
         
        };
      },
@@ -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="absolute inset-0 z-10 flex items-end justify-start">
+    <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 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="h-full w-full overflow-hidden rounded-3xl border-[12px] border-white">
+          <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 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">
-          <SectionTitle
-            title={t('pages_about_title')}
-            description={t('com_about_info_title')}
-            description_bold={t('com_about_info_title_bold')}
-          />
+        <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 className="grid grid-cols-2 gap-10">
+    <div
+      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="aspect-video w-full overflow-hidden rounded-3xl">
+      <div className="grid grid-cols-1 gap-10 lg:grid-cols-2">
+        <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="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="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 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}
@@ -13,15 +13,15 @@ export default async function HomePageProjects({ locale }: Props) {
  return (
    <div className="w-full">
      <div
-        className={`relative w-full bg-white bg-cover bg-fixed bg-center bg-no-repeat pt-28`}
+        className={`relative 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-2 gap-28">
+        <div className="relative z-20 container mx-auto 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')}
          />
-          <h4 className="pt-10 text-base font-extralight tracking-normal">
+          <h4 className="pt-10 text-base font-extralight tracking-normal max-lg:hidden">
            {t('com_home_projects_description')}
          </h4>
        </div>
@@ -5,13 +5,9 @@ import { getProjects } from '@/services/projects';

 export default async function ProjectsGrid({ projects }) {
  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
-          href={project.link}
-          key={index}
-          className="overflow-hidden bg-white"
-        >
+        <Link href={'/'} key={index} className="overflow-hidden bg-white">
          <div className="relative aspect-[1.4] w-full overflow-hidden rounded-4xl">
            <Image
              src={project.imageSrc}