link

src/app/blogs/components/BigBlogItem.tsx

@@ -12,11 +12,15 @@ interface BigBlogItemProps {
 const BigBlogItem: FC<BigBlogItemProps> = ({ item }) => {
     return (
         <div className='w-full rounded-4xl bg-white p-7 flex xl:flex-row flex-col gap-6'>
+            <Link href={`/blogs/${item.id}`}>
                 <Image src={item.imageUrl} alt='blog' width={300} height={300} className='size-[150px] object-cover mx-auto xl:mx-0 rounded-4xl' />
+            </Link>
             <div className='flex-1'>
-                <h4 className='font-bold text-sm leading-6'>
+                <Link href={`/blogs/${item.id}`}>
+                    <h4 className='font-bold text-sm leading-6 hover:opacity-70 transition-opacity'>
                         {item.title}
                     </h4>
+                </Link>
 
                 <div className='mt-3 flex gap-3 text-xs'>
                     <div className='flex text-[#7D818C] items-center gap-1'>

src/app/blogs/components/BlogList.tsx

@@ -6,9 +6,11 @@ import BigBlogItem from './BigBlogItem'
 import MostVisited from './MostVisited'
 import ContactUs from './ContactUs'
 import { useGetBlogs } from '../hooks/useBlogsData'
+import { useBlogStore } from '../store/BlogStore'
 const BlogList: FC = () => {
 
-    const { data } = useGetBlogs()
+    const { selectedCategory } = useBlogStore()
+    const { data } = useGetBlogs(selectedCategory)
 
     return (
         <div className=''>

src/app/blogs/components/Category.tsx

@@ -4,11 +4,10 @@ import { useGetBlogCategories } from '../hooks/useBlogsData'
 import Image from 'next/image'
 import { useBlogStore } from '../store/BlogStore'
 const Category: FC = () => {
+
     const { data } = useGetBlogCategories()
     const { selectedCategory, setSelectedCategory } = useBlogStore()
 
-    console.log(data);
-
     return (
         <div className='w-full rounded-4xl bg-white p-4'>
             <h4>

src/app/blogs/components/HeroSection.tsx

@@ -41,7 +41,7 @@ const HeroSection: FC = () => {
             <div className='flex xl:flex-row flex-col gap-8 mt-10'>
                 {
                     data?.data?.mostVisitedBlogs?.map((item, index: number) => {
-                        if (index !== 0) {
+                        if (index !== 0 && index < 4) {
                             return (
                                 <BlogItem key={item.id} item={item} />
                             )

src/app/blogs/components/MiniBlogItem.tsx

@@ -1,9 +1,11 @@
 import Image from 'next/image'
 import { FC } from 'react'
 import { Blog } from '../types/BlogTypes'
+import Link from 'next/link'
 const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
     return (
         <div className='flex items-center gap-2'>
+            <Link href={`/blogs/${item.id}`}>
                 <Image
                     src={item.imageUrl}
                     alt={item.title}
@@ -11,9 +13,13 @@ const MiniBlogItem: FC<{ item: Blog }> = ({ item }) => {
                     height={72}
                     className='rounded-xl size-[72px] min-w-[72px] object-cover'
                 />
-            <h6 className='text-xs leading-5 font-bold'>
+            </Link>
+
+            <Link href={`/blogs/${item.id}`}>
+                <h6 className='text-xs leading-5 font-bold hover:opacity-70 transition-opacity'>
                     {item.title}
                 </h6>
+            </Link>
         </div>
     )
 }

src/app/blogs/hooks/useBlogsData.ts

@@ -2,10 +2,10 @@ import { useQuery } from "@tanstack/react-query";
 import * as api from "../service/BlogService";
 
 // برای client
-export const useGetBlogs = () =>
+export const useGetBlogs = (categoryId: string) =>
   useQuery({
-    queryKey: ["blogs"],
+    queryKey: ["blogs", categoryId],
-    queryFn: api.getBlogs,
+    queryFn: () => api.getBlogs(categoryId),
   });
 
 export const useGetMostVisitedBlogs = () =>
@@ -40,8 +40,8 @@ export const useGetBlogSingle = (id: string) =>
 
 // برای server prefetch
 export const blogsQueryOptions = {
-  queryKey: ["blogs"],
+  queryKey: ["blogs", ""],
-  queryFn: api.getBlogs,
+  queryFn: () => api.getBlogs(""),
 };
 
 export const blogSingleQueryOptions = (id: string) => ({

src/app/blogs/service/BlogService.ts

@@ -6,8 +6,12 @@ import {
   BlogSingleResponse,
 } from "../types/BlogTypes";
 
-export const getBlogs = async () => {
+export const getBlogs = async (categoryId: string) => {
-  const { data } = await axios.get<BlogResponse>(`/blogs`);
+  let query = "";
+  if (categoryId) {
+    query = `?categoryId=${categoryId}`;
+  }
+  const { data } = await axios.get<BlogResponse>(`/blogs${query}`);
   return data;
 };
 

src/app/globals.css

@@ -103,3 +103,7 @@ tbody tr {
 .rc-rate-star {
   margin-right: 3px !important; /* فاصله بین ستاره‌ها */
 }
+
+#blog-preview-content * {
+  color: white !important;
+}

src/app/home/Blog.tsx

@@ -14,7 +14,8 @@ const Blog: FC = () => {
 
             <div className='flex xl:flex-row flex-col gap-8 xl:mt-16 mt-10 items-center'>
                 {
-                    data?.data?.pinnedBlogs?.map((item) => {
+                    data?.data?.pinnedBlogs?.map((item, index: number) => {
+                        if (index < 3)
                             return (
                                 <BlogItem key={item.id} item={item} />
                             )

src/components/BlogItem.tsx

@@ -1,5 +1,6 @@
 import { Blog } from '@/app/blogs/types/BlogTypes'
 import Image from 'next/image'
+import Link from 'next/link'
 import { FC } from 'react'
 
 interface Props {
@@ -8,7 +9,7 @@ interface Props {
 
 const BlogItem: FC<Props> = ({ item }) => {
     return (
-        <div className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
+        <Link href={`/blogs/${item.id}`} className='flex-1 w-full min-h-[390px] rounded-4xl overflow-hidden relative'>
             <Image
                 src={item.imageUrl}
                 layout='fill'
@@ -25,10 +26,10 @@ const BlogItem: FC<Props> = ({ item }) => {
                     {item.title}
                 </h6>
 
-                <p className='mt-4 text-sm' dangerouslySetInnerHTML={{ __html: item.previewContent }}>
+                <p id='blog-preview-content' className='mt-4 text-sm text-white' dangerouslySetInnerHTML={{ __html: item.previewContent }}>
                 </p>
             </div>
-        </div>
+        </Link>
     )
 }
 

src/components/ServiceItem.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const ServiceItem: FC<Props> = (props) => {
     return (
-        <Link href={`/products/${props.item.id}`} className='flex-1 bg-white rounded-4xl xl:p-7 p-4'>
+        <Link href={`/products/${props.item.id}`} className='flex-1 bg-white rounded-4xl xl:p-7 p-4 flex flex-col'>
             <div className='flex justify-between'>
                 <div className='xl:size-[65px] size-[50px] rounded-2xl overflow-hidden'>
                     <Image src={props.item.icon} className='size-full object-cover' alt={props.item.name} width={65} height={65} />

src/config/axios.ts

@@ -4,7 +4,7 @@ import { getToken } from "./func";
 
 const axiosInstance = axios.create({
   // baseURL: process.env.NEXT_PUBLIC_BASE_URL,
-  baseURL: "http://192.168.1.108:4000",
+  baseURL: "https://api.danakcorp.com",
 });
 
 axiosInstance.interceptors.response.use(

src/shared/Footer.tsx

@@ -11,7 +11,7 @@ const Footer: FC = () => {
 
                     <div className='flex xl:flex-row flex-col xl:gap-24 gap-7 w-full justify-between xl:px-10'>
 
-                        <div className='xl:max-w-[203px] flex flex-col items-center text-center xl:items-start xl:text-right'>
+                        <div className='xl:max-w-[203px] flex flex-col items-center text-right xl:items-start xl:text-right'>
                             <Image
                                 src={'/images/logo.svg'}
                                 width={140}
@@ -19,7 +19,7 @@ const Footer: FC = () => {
                                 alt='لوگو داناک'
                             />
 
-                            <p className='mt-6 text-sm xl:text-justify text-center'>
+                            <p className='mt-6 text-sm xl:text-justify text-right'>
                                 ما در داناک هم تولیدکننده نرم‌افزارهای پیشرفته هستیم و هم بستری برای فروش محصولات نرم‌افزاری دیگران فراهم کرده‌ایم. با ما هوشمندانه بسازید و حرفه‌ای بفروشید.
                             </p>
                         </div>
@@ -29,7 +29,7 @@ const Footer: FC = () => {
                                 <h6 className='font-bold xl:text-base text-xs'>
                                     داناک
                                 </h6>
-                                <ul className='xl:text-sm text-xs mt-4 flex flex-col gap-4 text-center'>
+                                <ul className='xl:text-sm text-xs mt-4 flex flex-col gap-4 text-right'>
                                     <li>
                                         محصولات
                                     </li>
@@ -46,7 +46,7 @@ const Footer: FC = () => {
                                 <h6 className='font-bold xl:text-base text-xs whitespace-nowrap'>
                                     سرویس ها محبوب
                                 </h6>
-                                <ul className='xl:text-sm text-xs mt-4 flex flex-col gap-4 text-center'>
+                                <ul className='xl:text-sm text-xs mt-4 flex flex-col gap-4 text-right'>
                                     <li>
                                         دی منو
                                     </li>
@@ -63,7 +63,7 @@ const Footer: FC = () => {
                                 <h6 className='font-bold xl:text-base text-xs'>
                                     همکاری با داناک
                                 </h6>
-                                <ul className='xl:text-sm text-xs mt-4 flex flex-col gap-4 text-center'>
+                                <ul className='xl:text-sm text-xs mt-4 flex flex-col gap-4 text-right'>
                                     <li>
                                         توسعه دهندگان
                                     </li>

src/shared/Header.tsx

@@ -27,7 +27,7 @@ const Header: FC = () => {
                             </li>
                         </Link>
 
-                        <Link href='/services'>
+                        <Link href='/danak-services'>
                             <li>
                                 خدمات
                             </li>
@@ -62,10 +62,12 @@ const Header: FC = () => {
                             <div>ورود | ثبت نام</div>
                         </a>
 
+                        <Link href='/contact'>
                             <Button
                                 label='تماس با ما'
                                 className='w-fit px-8'
                             />
+                        </Link>
                     </div>
                 </div>