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>
+    </>
  );
 }