update project api and page, set pagination in blog and create content generator component, create blog single page, ui fix

src/app/[locale]/about-us/page.tsx

@@ -1,6 +1,8 @@
 import images from '@/assets/images/images';
 import InnerPageBanner from '@/components/layout/innerPages/banner';
+import AboutDescription from '@/components/pages/about/AboutDescription';
 import AboutTopInfo from '@/components/pages/about/TopInfo';
+import HomeStorySection from '@/components/pages/home/HomeStorySection';
 import { IPageParams } from '@/models/layout';
 import { setRequestLocale } from 'next-intl/server';
 import { getTranslations } from 'next-intl/server';
@@ -26,12 +28,14 @@ export default async function AboutUs({
   const t = await getTranslations({ locale });
 
   return (
-    <main className="flex flex-col items-center justify-between">
+    <main className="mb-10 flex flex-col items-center justify-between">
       <InnerPageBanner
         title={t('pages_about_title')}
         imageSrc={images.aboutBanner.src}
       />
       <AboutTopInfo />
+      <AboutDescription className="mb-8 md:mb-14" locale={locale} />
+      <HomeStorySection />
     </main>
   );
 }

src/app/[locale]/blog/[id]/page.tsx

@@ -0,0 +1,48 @@
+import routeFactory from '@/assets/constants/routeFactory';
+import images from '@/assets/images/images';
+import Breadcrumb from '@/components/layout/breadcrumb';
+import { IBreadcrumbItem } from '@/components/layout/breadcrumb/breadcrumb';
+import ContentGenerator from '@/components/layout/contentGenerator';
+import InnerPageBanner from '@/components/layout/innerPages/banner';
+import { ILayoutLocaleParams } from '@/models/layout';
+import { getPost } from '@/services/blog';
+import { getTranslations } from 'next-intl/server';
+
+interface IPageParams extends ILayoutLocaleParams {
+  id: string;
+}
+
+export default async function PostPage({ params }: { params: IPageParams }) {
+  const paramsData = await params;
+  const t = await getTranslations({ locale: paramsData.locale });
+
+  const { id: postId, locale } = await params;
+  const routes = routeFactory(t, locale);
+
+  const postData = await getPost(postId);
+
+  const breadcrumbItems = [
+    {
+      ...routes.blog,
+      href: routes.blog.route(),
+    },
+    { title: postData?.title },
+  ] as IBreadcrumbItem[];
+
+  return (
+    <main className="flex flex-col items-center justify-between">
+      <InnerPageBanner
+        title={t('pages_blog_title')}
+        imageSrc={images.blogBanner.src}
+      />
+      <div className="container-fluid mx-auto my-12 md:my-24">
+        <Breadcrumb items={breadcrumbItems} />
+        {postData.content && postData.content.length ? (
+          <ContentGenerator data={postData.content} className="mt-10" />
+        ) : (
+          <></>
+        )}
+      </div>
+    </main>
+  );
+}

src/app/[locale]/contact-us/page.tsx

@@ -31,7 +31,7 @@ export default async function Contact({ params }: { params: IPageParams }) {
         imageSrc={images.blogBanner.src}
       />
 
-      <div className="relative flex w-full flex-col bg-gray-200 pt-4 md:pt-28">
+      <div className="relative flex w-full flex-col bg-gray-200 pt-12 lg: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
@@ -41,9 +41,9 @@ export default async function Contact({ params }: { params: IPageParams }) {
             />
           </div>
         </div>
-        <div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg md:flex-row">
-          <TouchUs />
-          <ContactForm />
+        <div className="container mx-auto flex w-full flex-col items-stretch overflow-hidden rounded-lg lg:flex-row">
+          <TouchUs className="p-8 lg:w-1/2" />
+          <ContactForm className="p-4 lg:w-1/2" />
         </div>
 
         <div className="mt-4 w-full md:mt-28">