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,
         
        };
      },