about us

src/app/about/hooks/useAboutData.ts

@@ -0,0 +1,11 @@
+import { useQuery } from "@tanstack/react-query";
+import { AboutService } from "../service/Service";
+
+export const useAboutData = () => {
+  return useQuery({
+    queryKey: ["about-us"],
+    queryFn: AboutService.getAboutUs,
+    staleTime: 5 * 60 * 1000, // 5 دقیقه
+    gcTime: 10 * 60 * 1000, // 10 دقیقه
+  });
+};

src/app/about/page.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import Layout from '@/hoc/Layout'
+import { NextPage } from 'next'
+import { useAboutData } from './hooks/useAboutData'
+import PageLoading from '@/components/PageLoading'
+import Image from 'next/image'
+
+const AboutPage: NextPage = () => {
+    const { data, isLoading, error } = useAboutData()
+
+    if (isLoading) {
+        return <PageLoading />
+    }
+
+    if (error) {
+        return (
+            <Layout>
+                <div className="mt-14 px-4 md:px-8 lg:px-20 text-center">
+                    <p className="text-red-500">خطا در دریافت اطلاعات</p>
+                </div>
+            </Layout>
+        )
+    }
+
+    const aboutData = data?.results?.aboutUs || []
+
+    return (
+        <Layout>
+            <div className="mt-14 px-4 md:px-8 lg:px-20">
+                {/* عنوان اصلی */}
+                <div className="text-center mb-16">
+                    <h1 className="text-3xl  font-bold text-gray-800">
+                        درباره ی ما
+                    </h1>
+                </div>
+
+                {/* بخش‌های محتوا */}
+                <div className="space-y-12">
+                    {aboutData.map((item) => (
+                        <div
+                            key={item._id}
+                            className="flex flex-col lg:flex-row items-start gap-8"
+                        >
+                            {/* تصویر در سمت چپ */}
+                            <div className="rounded-lg flex-shrink-0 overflow-hidden">
+                                <Image
+                                    src={item.imageUrl}
+                                    alt={item.title}
+                                    className="w-[100px]"
+                                    loading="lazy"
+                                    width={200}
+                                    height={200}
+                                />
+                            </div>
+
+                            {/* محتوای متنی در سمت راست */}
+                            <div className="flex-1 space-y-4">
+                                {/* عنوان بخش */}
+                                <h3 className="text-lg font-bold text-primary">
+                                    {item.title}
+                                </h3>
+
+                                {/* توضیحات */}
+                                <p className="font-light leading-6">
+                                    {item.description}
+                                </p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        </Layout>
+    )
+}
+
+export default AboutPage

src/app/about/service/Service.ts

@@ -0,0 +1,25 @@
+import axiosInstance from "@/config/axios";
+
+export interface AboutUsItem {
+  _id: string;
+  title: string;
+  description: string;
+  imageUrl: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface AboutUsResponse {
+  status: number;
+  success: boolean;
+  results: {
+    aboutUs: AboutUsItem[];
+  };
+}
+
+export class AboutService {
+  static async getAboutUs(): Promise<AboutUsResponse> {
+    const response = await axiosInstance.get<AboutUsResponse>("/about-us");
+    return response.data;
+  }
+}