add title and description in head , responsive home page

src/components/layout/sectionTitle/index.tsx

@@ -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>

src/components/pages/about/TopInfo.tsx

@@ -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} />
             ))}

src/components/pages/home/HomeStorySection.tsx

@@ -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">

src/components/pages/home/Products.tsx

@@ -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}

src/components/pages/home/Projects.tsx

@@ -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>

src/components/pages/project/ProjectGrid.tsx

@@ -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}