page home responsive & change component element & page blog item

app/blog/[slug]/page.js

@@ -10,6 +10,7 @@ function Blog({ params: { slug } }) {
         <Layout title='وبلاگ' name='blog'>
             <BlogPage
                 article={article}
+                articles={articles}
             />
         </Layout>
     )

app/component/AnimationTextHead.js

@@ -0,0 +1,16 @@
+function AnimationTextHead({ name, text, children }) {
+    return (
+        <div className='flex justify-center items-start relative w-fit'>
+            <div className='overflow-hidden mb-1.5'>
+                <p
+                    data-aos={name}
+                    className='text-[#3B3B3B] text-nowrap overflow-hidden text-[20px] font-bold'>{text}</p>
+            </div>
+            <div className="absolute bottom-0 right-1/2 translate-x-1/2 w-full flex justify-center">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default AnimationTextHead

app/component/comment/Field.js

@@ -25,4 +25,4 @@ function Field({ title, type, multiline, isPlaceHolder }) {
     )
 }
 
-export default Field
+export default Field;

app/component/comment/ItemUser.js

@@ -1,11 +1,13 @@
-import Image from "next/image"
-import { Button, Skeleton } from "@mui/material"
-import LikeComment from "@/components/icons/LikeComment"
-import BoldLikeComment from "@/components/icons/BoldLikeComment"
-import BoldDisLikeComment from "@/components/icons/BoldDisLikeComment"
-import DisLikeComment from "@/components/icons/DisLikeComment"
-import ArrowUpComment from "@/components/icons/ArrowUpComment"
-import Field from "./Field"
+import Image from "next/image";
+import { Button, Skeleton } from "@mui/material";
+import Field from "./Field";
+
+// Icons
+import BoldDisLikeComment from "@/components/icons/BoldDisLikeComment";
+import BoldLikeComment from "@/components/icons/BoldLikeComment";
+import DisLikeComment from "@/components/icons/DisLikeComment";
+import ArrowUpComment from "@/components/icons/ArrowUpComment";
+import LikeComment from "@/components/icons/LikeComment";
 
 function ItemUser({ update, setUpdate, list, setList, data, loading }) {
 

app/component/comment/index.js

@@ -2,14 +2,14 @@
 import { useState } from 'react';
 import ItemUser from './ItemUser'
 
-function CommentUser({ doctor }) {
+function Comment({ data }) {
 
-    const [list, setList] = useState(doctor.comments);
+    const [list, setList] = useState(data.comments);
     const [update, setUpdate] = useState(false);
 
     return (
         <ul className={`flex flex-col !pl-2.5 justify-start max-h-[492px] overflow-auto items-start gap-12 mt-2 ${false && 'w-full'}`}>
-            {doctor && !!doctor.comments.length && doctor.comments.map((item, idx) => (
+            {data && !!data.comments.length && data.comments.map((item, idx) => (
                 <ItemUser
                     key={idx}
                     list={list}
@@ -24,4 +24,4 @@ function CommentUser({ doctor }) {
     )
 }
 
-export default CommentUser
+export default Comment;

app/component/element/AutoCompleteSelect.js

@@ -2,13 +2,16 @@ import BottomSelect from "@/components/icons/BottomSelect";
 import { Autocomplete, TextField } from "@mui/material";
 import { styleTextSelectRight } from "@/mui";
 
-function AutoCompleteSelect({ list, updateData, label }) {
+function AutoCompleteSelect({ list, updateData, name, label }) {
     return (
         <Autocomplete
             disablePortal
             options={list}
             className="!w-full !rounded-lg md:!w-[344px]"
-            onChange={(event) => updateData && updateData(event)}
+            onChange={(event) =>
+                updateData &&
+                updateData(event, name)
+            }
             sx={{
                 ...styleTextSelectRight,
                 // Hide Icon Number

app/globals.css

@@ -231,6 +231,11 @@ body {
     padding-right: 24px;
 }
 
+.hover-rotate-icon:hover svg {
+    transform: rotateY(360deg);
+    transition: 0.5s all;
+}
+
 /* Hidden Scroll */
 
 .hidden-scroll::-webkit-scrollbar-thumb {

app/page.js

@@ -1,17 +1,7 @@
-'use client';
-
 import HomePage from "@/components/home";
 import Layout from "@/components/layout";
-import Aos from "aos";
-import "aos/dist/aos.css";
-import { useEffect } from "react";
 
 export default function Home() {
-
-  useEffect(() => {
-    Aos.init({});
-  }, [])
-
   return (
     <Layout title='خانه' name=''>
       <HomePage />

components/blog/detail/Caption.js

@@ -0,0 +1,33 @@
+import Image from 'next/image'
+import React from 'react'
+
+function Caption({ data }) {
+    return (
+        <>
+            <Image
+                className="rounded-[8px] overflow-hidden w-full"
+                src={data.cover_first}
+                alt="cover-blog"
+                height={570}
+                width={808}
+            />
+            <div
+                className="my-6 text-[#525252] text-[16px] font-normal leading-[32px]"
+                dangerouslySetInnerHTML={{ __html: data.caption }}
+            />
+            <Image
+                className="rounded-[8px] overflow-hidden w-full"
+                src={data.cover_second}
+                alt="cover-blog"
+                height={570}
+                width={808}
+            />
+            <div
+                className="my-6"
+                dangerouslySetInnerHTML={{ __html: data.caption }}
+            />
+        </>
+    )
+}
+
+export default Caption

components/blog/detail/SocialMedia.js

@@ -0,0 +1,27 @@
+import LinkedinB from "@/components/icons/LinkedinB"
+import TelegramB from "@/components/icons/TelegramB"
+import WhatsappB from "@/components/icons/WhatsappB"
+
+const socials = [
+    <WhatsappB />,
+    <TelegramB />,
+    <LinkedinB />
+]
+
+function SocialMedia() {
+    return (
+        <ul className="flex mt-[8px] pb-[32px] relative items-center justify-end gap-4">
+            {socials.map((item, idx) => (
+                <li
+                    key={idx}
+                    className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+                >
+                    {item}
+                </li>
+            ))}
+            <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
+        </ul>
+    )
+}
+
+export default SocialMedia

components/blog/detail/commentUser/AddComment.js

@@ -0,0 +1,18 @@
+import { Button } from '@mui/material'
+import React from 'react'
+
+function AddComment() {
+    return (
+        <div className='flex items-center justify-start gap-[16px] my-[24px]'>
+            <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
+            <Button
+                variant='outlined'
+                className='!border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[9px]'
+            >
+                ثبت نظر
+            </Button>
+        </div>
+    )
+}
+
+export default AddComment

components/blog/detail/commentUser/index.js

@@ -0,0 +1,19 @@
+import AnimationTextHead from '@/app/component/AnimationTextHead'
+import Comment from '@/app/component/comment'
+import Underline from '@/components/icons/Underline'
+import React from 'react'
+import AddComment from './AddComment'
+
+function CommentUser({ data }) {
+    return (
+        <div className='mt-[24px]'>
+            <AnimationTextHead name='zoom-in-up' text='نظرات'>
+                <Underline />
+            </AnimationTextHead>
+            <AddComment />
+            <Comment data={data} />
+        </div>
+    )
+}
+
+export default CommentUser

components/blog/detail/index.js

@@ -1,17 +1,13 @@
-import Image from "next/image"
+import Caption from "./Caption";
+import SocialMedia from "./SocialMedia";
+import CommentUser from "./commentUser";
 
 function Detail({ data }) {
     return (
-        <div>
-            <Image
-                className="rounded-[8px] overflow-hidden"
-                src={data.cover}
-                alt="cover-blog"
-                height={570}
-                width={808}
-            />
-            <div dangerouslySetInnerHTML={{ __html: data.caption }} />
-            {/* <p >{data.caption}</p> */}
+        <div className="w-[68%]">
+            <Caption data={data} />
+            <SocialMedia />
+            <CommentUser data={data} />
         </div>
     )
 }

components/blog/index.js

@@ -1,15 +1,14 @@
 import Detail from "./detail";
 import Head from "./head";
+import RelatedContent from "./relatedContent";
 
-function BlogPage({ article }) {
-
-    console.log(article);
-
+function BlogPage({ article, articles }) {
     return (
         <div className="padding-responsive pt-[176px]">
             <Head data={article} />
-            <div className="flex items-center justify-center gap-6">
+            <div className="flex items-start justify-center gap-[24px] mt-[24px]">
                 <Detail data={article} />
+                <RelatedContent data={articles} />
             </div>
         </div>
     )

components/blog/relatedContent/Item.js

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import Link from "next/link";
+
+function Item({ data }) {
+    return (
+        <li className="flex relative items-center justify-start gap-[8px] py-[20px]">
+            <Link href={`/blog/${data.id}`}>
+                <Image
+                    className="w-[97px] h-[88px] rounded-[8px] overflow-hidden object-cover"
+                    src={data.src}
+                    alt="article"
+                    height={88}
+                    width={97}
+                />
+            </Link>
+            <div className="flex flex-col gap-[24px] items-start justify-between">
+                <Link href={`/blog/${data.id}`}>
+                    <p
+                        className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
+                    >{data.title}</p>
+                </Link>
+                <p
+                    className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+                >تاریخ انتشار: {data.date_of_release}</p>
+            </div>
+            <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+        </li>
+    )
+}
+
+export default Item

components/blog/relatedContent/index.js

@@ -0,0 +1,24 @@
+import AnimationTextHead from '@/app/component/AnimationTextHead'
+import UnderlineLG from '@/components/icons/UnderlineLG'
+import React from 'react'
+import Item from './Item'
+
+function RelatedContent({ data }) {
+  return (
+    <div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
+      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
+        <UnderlineLG />
+      </AnimationTextHead>
+      <ul className='flex w-fit flex-col justify-start items-start'>
+        {data.map(item => (
+          <Item
+            data={item}
+            key={item.id}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default RelatedContent

components/clinic/components/about/index.js

@@ -1,9 +1,8 @@
-import Image from "next/image"
-import Images from "./Images"
-import ContentDetail from "./ContentDetail"
-import ListBime from "./ListBime"
-import Specialties from "./Specialties"
-import Services from "./Services"
+import Images from "./Images";
+import ContentDetail from "./ContentDetail";
+import ListBime from "./ListBime";
+import Specialties from "./Specialties";
+import Services from "./Services";
 
 function About({ data }) {
     return (

components/clinic/components/doctors/index.js

@@ -1,12 +1,9 @@
-import ItemDoctor from "@/app/component/ItemDoctor"
-import Pagination from "@/app/component/Pagination"
-import SmSearch from "@/components/searchHead/SmSearch"
 import List from "./List"
 import SearchBar from "./SearchBar"
 
 function Doctors({ doctors }) {
     return (
-        <div className="opacity-page">
+        <div>
             <SearchBar />
             <List doctors={doctors} />
         </div>

components/doctor/detailDoctor/cards/comments/index.js

@@ -1,6 +1,6 @@
 import { Button } from '@mui/material'
 import Chart from './chart'
-import CommentUser from './commentUser'
+import Comment from '@/app/component/comment'
 
 function Comments({ doctor }) {
     return (
@@ -16,7 +16,7 @@ function Comments({ doctor }) {
                 >ثبت نظر</Button>
             </div>
             <Chart doctor={doctor} />
-            <CommentUser doctor={doctor} />
+            <Comment data={doctor} />
         </div>
     )
 }

components/home/index.js

@@ -11,7 +11,7 @@ function HomePage() {
             <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
                 <div>
                     <p
-                        className="text-[#D15B56] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold"
+                        className="text-[#F17732] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold"
                     >نوبت ۷۲۴</p>
                     <p
                         className="text-[#525252] text-center mt-2.5 font-kalame text-[20px] sm:text-[25px] md:text-[31px] lg:text-[36px] 

components/home/search/index.js

@@ -10,7 +10,7 @@ function SearchBar() {
             className="
             !py-[4px] sm:!py-[7px] md:!py-[10px] lg:!py-[12px] !gap-3
             !px-[4px] sm:!px-[8px] md:!px-[12px] lg:!px-[16px]   
-            !bg-[#FAFAFA] !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
+            !bg-[#FAFAFA] !transition-all !duration-500 !shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full lg:w-fit
             "
         >
             <ModalSearchCity />

components/home/search/modal/index.js

@@ -18,15 +18,23 @@ function ModalSearchCity() {
     ];
 
     const cities = [
-        { label: 'شهر یک', id: 10 },
-        { label: 'شهر دو', id: 20 },
-        { label: 'شهر سه', id: 30 }
+        { label: 'پردیس', id: 10 },
+        { label: 'دماوند', id: 20 },
+        { label: 'فیروزکوه', id: 30 }
     ];
 
     const [open, setOpen] = useState(false);
     const handleOpen = () => setOpen(true);
     const handleClose = () => setOpen(false);
 
+    const [selected, setSelected] = useState({
+        first: '',
+        second: ''
+    });
+
+    const updateData = (event, name) =>
+        setSelected({ ...selected, [name]: event.target.innerText })
+
     return (
         <>
             {/* Button Modal */}
@@ -39,7 +47,10 @@ function ModalSearchCity() {
                 <div className="min-w-[20px] min-h-[20px] hidden md:flex">
                     <Location />
                 </div>
-                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">انتخاب شهر</p>
+                <p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">
+                    {selected.first && selected.second ?
+                        `${selected.first} | ${selected.second}` : 'انتخاب شهر'}
+                </p>
                 <div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
                     <ArrowBottomH />
                 </div>
@@ -61,11 +72,15 @@ function ModalSearchCity() {
                         <p className="text-[#525252] mt-[38px] md:mt-4 text-[16px] font-medium text-center">شهر یا استان مورد نظر را انتخاب نمایید:</p>
                         <div className="flex flex-col mt-[52px] md:mt-[44px] mb-14 justify-center items-center gap-10">
                             <AutoCompleteSelect
+                                updateData={updateData}
                                 list={states}
                                 label='استان'
+                                name='first'
                             />
                             <AutoCompleteSelect
+                                updateData={updateData}
                                 list={cities}
+                                name='second'
                                 label='شهر'
                             />
                         </div>

components/icons/ArrowDownF.js

@@ -1,7 +1,7 @@
 function ArrowDownF() {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-            <path d="M19.92 8.95001L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.07996 8.95001" stroke="#262866" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M19.92 8.95001L13.4 15.47C12.63 16.24 11.37 16.24 10.6 15.47L4.07996 8.95001" stroke="#262866" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
     )
 }

components/icons/Instagram.js

@@ -1,6 +1,6 @@
 function Instagram() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path d="M7.50008 18.3334H12.5001C16.6667 18.3334 18.3334 16.6667 18.3334 12.5V7.50002C18.3334 3.33335 16.6667 1.66669 12.5001 1.66669H7.50008C3.33341 1.66669 1.66675 3.33335 1.66675 7.50002V12.5C1.66675 16.6667 3.33341 18.3334 7.50008 18.3334Z" stroke="#5559CE" strokeLinecap="round" strokeLinejoin="round" />
             <path d="M9.99992 12.9166C11.6107 12.9166 12.9166 11.6108 12.9166 9.99998C12.9166 8.38915 11.6107 7.08331 9.99992 7.08331C8.38909 7.08331 7.08325 8.38915 7.08325 9.99998C7.08325 11.6108 8.38909 12.9166 9.99992 12.9166Z" stroke="#5559CE" strokeLinecap="round" strokeLinejoin="round" />
             <path d="M14.6968 5.83335H14.7065" stroke="#5559CE" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />

components/icons/Linkedin.js

@@ -1,6 +1,6 @@
 function Linkedin() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path fillRule="evenodd" clipRule="evenodd" d="M4.16667 1.04169C3.55888 1.04169 2.97598 1.28313 2.54621 1.7129C2.11644 2.14267 1.875 2.72557 1.875 3.33335C1.875 3.94114 2.11644 4.52404 2.54621 4.95381C2.97598 5.38358 3.55888 5.62502 4.16667 5.62502C4.77445 5.62502 5.35735 5.38358 5.78712 4.95381C6.21689 4.52404 6.45833 3.94114 6.45833 3.33335C6.45833 2.72557 6.21689 2.14267 5.78712 1.7129C5.35735 1.28313 4.77445 1.04169 4.16667 1.04169ZM3.125 3.33335C3.125 3.05709 3.23475 2.79213 3.4301 2.59678C3.62545 2.40143 3.8904 2.29169 4.16667 2.29169C4.44293 2.29169 4.70789 2.40143 4.90324 2.59678C5.09859 2.79213 5.20833 3.05709 5.20833 3.33335C5.20833 3.60962 5.09859 3.87457 4.90324 4.06992C4.70789 4.26527 4.44293 4.37502 4.16667 4.37502C3.8904 4.37502 3.62545 4.26527 3.4301 4.06992C3.23475 3.87457 3.125 3.60962 3.125 3.33335ZM1.875 6.66669C1.875 6.50093 1.94085 6.34196 2.05806 6.22475C2.17527 6.10754 2.33424 6.04169 2.5 6.04169H5.83333C5.99909 6.04169 6.15807 6.10754 6.27528 6.22475C6.39249 6.34196 6.45833 6.50093 6.45833 6.66669V17.5C6.45833 17.6658 6.39249 17.8248 6.27528 17.942C6.15807 18.0592 5.99909 18.125 5.83333 18.125H2.5C2.33424 18.125 2.17527 18.0592 2.05806 17.942C1.94085 17.8248 1.875 17.6658 1.875 17.5V6.66669ZM3.125 7.29169V16.875H5.20833V7.29169H3.125ZM7.70833 6.66669C7.70833 6.50093 7.77418 6.34196 7.89139 6.22475C8.0086 6.10754 8.16757 6.04169 8.33333 6.04169H11.6667C11.8324 6.04169 11.9914 6.10754 12.1086 6.22475C12.2258 6.34196 12.2917 6.50093 12.2917 6.66669V7.02835L12.6542 6.87252C13.2792 6.60542 13.9423 6.4381 14.6192 6.37669C16.9317 6.16669 18.9583 7.98335 18.9583 10.3167V17.5C18.9583 17.6658 18.8925 17.8248 18.7753 17.942C18.6581 18.0592 18.4991 18.125 18.3333 18.125H15C14.8342 18.125 14.6753 18.0592 14.5581 17.942C14.4408 17.8248 14.375 17.6658 14.375 17.5V11.6667C14.375 11.3904 14.2653 11.1255 14.0699 10.9301C13.8746 10.7348 13.6096 10.625 13.3333 10.625C13.0571 10.625 12.7921 10.7348 12.5968 10.9301C12.4014 11.1255 12.2917 11.3904 12.2917 11.6667V17.5C12.2917 17.6658 12.2258 17.8248 12.1086 17.942C11.9914 18.0592 11.8324 18.125 11.6667 18.125H8.33333C8.16757 18.125 8.0086 18.0592 7.89139 17.942C7.77418 17.8248 7.70833 17.6658 7.70833 17.5V6.66669ZM8.95833 7.29169V16.875H11.0417V11.6667C11.0417 11.0589 11.2831 10.476 11.7129 10.0462C12.1427 9.61646 12.7255 9.37502 13.3333 9.37502C13.9411 9.37502 14.524 9.61646 14.9538 10.0462C15.3836 10.476 15.625 11.0589 15.625 11.6667V16.875H17.7083V10.3167C17.7083 8.73002 16.3242 7.47669 14.7333 7.62169C14.1868 7.67141 13.6514 7.80638 13.1467 8.02169L11.9133 8.55085C11.8182 8.59171 11.7144 8.6083 11.6113 8.59913C11.5082 8.58996 11.4089 8.55531 11.3225 8.4983C11.2361 8.44129 11.1652 8.36371 11.1162 8.27252C11.0671 8.18133 11.0415 8.07939 11.0417 7.97585V7.29169H8.95833Z" fill="#5559CE" />
         </svg>
     )

components/icons/LinkedinB.js

@@ -0,0 +1,9 @@
+function LinkedinB() {
+    return (
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <path d="M4.59572 2.27158C4.59921 2.71616 4.42757 3.14425 4.11792 3.46328C3.80827 3.78231 3.3855 3.96665 2.94101 3.97644C2.49745 3.96032 2.07704 3.7744 1.76668 3.4571C1.45632 3.1398 1.27974 2.71538 1.27344 2.27158C1.29261 1.83907 1.4756 1.43005 1.78529 1.12753C2.09498 0.824998 2.50817 0.651622 2.94101 0.642578C3.37257 0.651795 3.78429 0.825606 4.0919 1.12844C4.39951 1.43127 4.57975 1.84021 4.59572 2.27158ZM1.45215 7.00558C1.45215 6.02586 2.07572 6.17886 2.94101 6.17886C3.80629 6.17886 4.41701 6.02586 4.41701 7.00558V16.5507C4.41701 17.5433 3.79344 17.3401 2.94101 17.3401C2.08858 17.3401 1.45215 17.5433 1.45215 16.5507V7.00558ZM6.98844 7.00686C6.98844 6.45915 7.19158 6.25472 7.50915 6.19172C7.82801 6.12744 8.92215 6.19172 9.30401 6.19172C9.68587 6.19172 9.83887 6.81529 9.82601 7.28586C10.1526 6.84761 10.5861 6.50046 11.0852 6.27761C11.5842 6.05476 12.1321 5.96365 12.6764 6.01301C13.211 5.98037 13.7464 6.06053 14.2479 6.24828C14.7495 6.43604 15.2059 6.72718 15.5876 7.10281C15.9693 7.47845 16.2677 7.93016 16.4635 8.42863C16.6592 8.9271 16.7479 9.46116 16.7239 9.99615V16.5121C16.7239 17.5047 16.1132 17.3016 15.2466 17.3016C14.3813 17.3016 13.7706 17.5047 13.7706 16.5121V11.422C13.793 11.1601 13.7588 10.8964 13.6702 10.6488C13.5817 10.4013 13.441 10.1757 13.2575 9.9874C13.0741 9.79908 12.8523 9.65245 12.6071 9.55745C12.362 9.46246 12.0993 9.42133 11.8369 9.43686C11.5754 9.42998 11.3156 9.47874 11.0744 9.57992C10.8333 9.6811 10.6164 9.83239 10.4382 10.0238C10.2599 10.2151 10.1244 10.4422 10.0406 10.6899C9.95679 10.9376 9.92659 11.2003 9.95201 11.4606V16.5507C9.95201 17.5433 9.32844 17.3401 8.46315 17.3401C7.59787 17.3401 6.98715 17.5433 6.98715 16.5507V7.00558L6.98844 7.00686Z" stroke="#525252" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default LinkedinB

components/icons/Telegram.js

@@ -1,6 +1,6 @@
 function Telegram() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
             <path d="M13.1299 19.346L10.7039 13.258L4.6149 10.792L4.5769 10.162L19.4229 4.53802L13.7619 19.346H13.1299ZM13.4349 17.377L17.7149 6.24703L6.5459 10.489L11.4459 12.477L13.4349 17.377Z" fill="#5559CE" />
         </svg>
     )

components/icons/TelegramB.js

@@ -0,0 +1,9 @@
+function TelegramB() {
+    return (
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="18" height="16" viewBox="0 0 18 16" fill="none">
+            <path d="M17.4016 0.800049L0.601562 6.80005L5.40156 9.20005L12.6016 4.40005L7.80156 10.4L15.0016 15.2L17.4016 0.800049Z" stroke="#525252" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default TelegramB

components/icons/Underline.js

@@ -0,0 +1,10 @@
+function Underline() {
+    return (
+        <svg width="34" height="2" viewBox="0 0 34 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.5" width="33" height="2" rx="1" fill="#F17732" />
+        </svg>
+
+    )
+}
+
+export default Underline

components/icons/UnderlineLG.js

@@ -0,0 +1,10 @@
+function UnderlineLG() {
+    return (
+        <svg width="85" height="2" viewBox="0 0 85 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="0.5" width="84" height="2" rx="1" fill="#F17732" />
+        </svg>
+
+    )
+}
+
+export default UnderlineLG

components/icons/Whatsapp.js

@@ -1,6 +1,6 @@
 function Whatsapp() {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path d="M5.75008 17.1667C7.00008 17.9167 8.50008 18.3334 10.0001 18.3334C14.5834 18.3334 18.3334 14.5834 18.3334 10C18.3334 5.41669 14.5834 1.66669 10.0001 1.66669C5.41675 1.66669 1.66675 5.41669 1.66675 10C1.66675 11.5 2.08341 12.9167 2.75008 14.1667L2.10719 16.6393C1.91247 17.3883 2.60567 18.0651 3.34973 17.8525L5.75008 17.1667Z" stroke="#5559CE" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
             <path d="M13.75 12.3737C13.75 12.5087 13.72 12.6475 13.6561 12.7825C13.5923 12.9175 13.5096 13.045 13.4007 13.165C13.2167 13.3675 13.0139 13.5138 12.7848 13.6075C12.5595 13.7013 12.3153 13.75 12.0525 13.75C11.6694 13.75 11.26 13.66 10.8281 13.4763C10.3962 13.2925 9.96432 13.045 9.53618 12.7338C9.10428 12.4188 8.69492 12.07 8.30433 11.6837C7.9175 11.2937 7.56823 10.885 7.25651 10.4575C6.94855 10.03 6.70068 9.6025 6.52041 9.17875C6.34014 8.75125 6.25 8.3425 6.25 7.9525C6.25 7.6975 6.29507 7.45375 6.3852 7.22875C6.47534 7 6.61805 6.79 6.8171 6.6025C7.05746 6.36625 7.32036 6.25 7.59827 6.25C7.70343 6.25 7.80859 6.2725 7.90248 6.3175C8.00013 6.3625 8.0865 6.43 8.15411 6.5275L9.02541 7.75375C9.09301 7.8475 9.14184 7.93375 9.17564 8.01625C9.20944 8.095 9.22822 8.17375 9.22822 8.245C9.22822 8.335 9.20193 8.425 9.14935 8.51125C9.10053 8.5975 9.02917 8.6875 8.93903 8.7775L8.65361 9.07375C8.61229 9.115 8.59352 9.16375 8.59352 9.22375C8.59352 9.25375 8.59727 9.28 8.60478 9.31C8.61605 9.34 8.62732 9.3625 8.63483 9.385C8.70243 9.50875 8.81885 9.67 8.9841 9.865C9.1531 10.06 9.33337 10.2588 9.52867 10.4575C9.73147 10.6563 9.92677 10.84 10.1258 11.0087C10.3211 11.1737 10.4826 11.2862 10.6103 11.3537C10.6291 11.3612 10.6516 11.3725 10.6779 11.3837C10.7079 11.395 10.738 11.3987 10.7718 11.3987C10.8356 11.3987 10.8845 11.3763 10.9258 11.335L11.2112 11.0538C11.3051 10.96 11.3952 10.8887 11.4816 10.8438C11.568 10.7912 11.6544 10.765 11.7482 10.765C11.8196 10.765 11.8947 10.78 11.9773 10.8138C12.06 10.8475 12.1463 10.8963 12.2402 10.96L13.4834 11.8412C13.581 11.9087 13.6486 11.9875 13.6899 12.0812C13.7275 12.175 13.75 12.2687 13.75 12.3737Z" stroke="#5559CE" strokeMiterlimit="10" />
         </svg>

components/icons/WhatsappB.js

@@ -0,0 +1,9 @@
+function WhatsappB() {
+    return (
+        <svg className="transition-all duration-500" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+            <path d="M14.2891 3.68254C13.6015 2.98799 12.7825 2.4373 11.8798 2.06258C10.9771 1.68787 10.0089 1.49664 9.03156 1.50004C4.93656 1.50004 1.59906 4.83754 1.59906 8.93254C1.59906 10.245 1.94406 11.52 2.58906 12.645L1.53906 16.5L5.47656 15.465C6.56406 16.0575 7.78656 16.3725 9.03156 16.3725C13.1266 16.3725 16.4641 13.035 16.4641 8.94004C16.4641 6.95254 15.6916 5.08504 14.2891 3.68254ZM9.03156 15.1125C7.92156 15.1125 6.83406 14.8125 5.88156 14.25L5.65656 14.115L3.31656 14.73L3.93906 12.45L3.78906 12.2175C3.17237 11.2328 2.84492 10.0945 2.84406 8.93254C2.84406 5.52754 5.61906 2.75254 9.02406 2.75254C10.6741 2.75254 12.2266 3.39754 13.3891 4.56754C13.9647 5.14052 14.4208 5.82204 14.7311 6.57261C15.0414 7.32319 15.1996 8.12788 15.1966 8.94004C15.2116 12.345 12.4366 15.1125 9.03156 15.1125ZM12.4216 10.4925C12.2341 10.4025 11.3191 9.95254 11.1541 9.88504C10.9816 9.82504 10.8616 9.79504 10.7341 9.97504C10.6066 10.1625 10.2541 10.5825 10.1491 10.7025C10.0441 10.83 9.93156 10.845 9.74406 10.7475C9.55656 10.6575 8.95656 10.455 8.25156 9.82504C7.69656 9.33004 7.32906 8.72254 7.21656 8.53504C7.11156 8.34754 7.20156 8.25004 7.29906 8.15254C7.38156 8.07004 7.48656 7.93504 7.57656 7.83004C7.66656 7.72504 7.70406 7.64254 7.76406 7.52254C7.82406 7.39504 7.79406 7.29004 7.74906 7.20005C7.70406 7.11004 7.32906 6.19504 7.17906 5.82004C7.02906 5.46004 6.87156 5.50504 6.75906 5.49754H6.39906C6.27156 5.49754 6.07656 5.54254 5.90406 5.73004C5.73906 5.91754 5.25906 6.36754 5.25906 7.28254C5.25906 8.19754 5.92656 9.08254 6.01656 9.20254C6.10656 9.33004 7.32906 11.205 9.18906 12.0075C9.63156 12.2025 9.97656 12.315 10.2466 12.3975C10.6891 12.54 11.0941 12.5175 11.4166 12.4725C11.7766 12.42 12.5191 12.0225 12.6691 11.5875C12.8266 11.1525 12.8266 10.785 12.7741 10.7025C12.7216 10.62 12.6091 10.5825 12.4216 10.4925Z" fill="#525252" />
+        </svg>
+    )
+}
+
+export default WhatsappB

components/layout/footer/LogoNamad.js

@@ -9,8 +9,8 @@ const Namads = [
 function LogoNamad() {
     return (
         <ul className="flex items-center gap-3">
-            {Namads.map(src => (
-                <li>
+            {Namads.map((src, idx) => (
+                <li key={idx}>
                     <Image
                         alt="logo"
                         width={48}

components/layout/footer/index.js

@@ -71,11 +71,11 @@ function Footer() {
                 </div>
 
                 {/* Center */}
-                <div className="w-full">
+                <div className="w-full lg:w-fit">
                     <HeadMenu title={footerR[0]} isOpen={openMenu.right} name='right' changeMenu={changeMenu} />
                     <ListMenu list={footerR} isOpen={openMenu.right} />
                 </div>
-                <div className="w-full">
+                <div className="w-full lg:w-fit">
                     <HeadMenu title={footerL[0]} isOpen={openMenu.left} name='left' changeMenu={changeMenu} />
                     <ListMenu list={footerL} isOpen={openMenu.left} />
                 </div>
@@ -89,7 +89,7 @@ function Footer() {
                         {socialMedias.map((item, idx) => (
                             <li
                                 key={idx}
-                                className="p-2.5 bg-[#EAECFA] rounded-full w-fit"
+                                className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
                             >
                                 <Link
                                     href='/'

components/layout/footer/menu/HeadMenu.js

@@ -4,7 +4,7 @@ import { Button } from "@mui/material"
 function HeadMenu({ title, name, isOpen, changeMenu }) {
     return (
         <Button
-            className="!flex !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
+            className="!flex lg:!hidden !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
             onClick={() => changeMenu(name)}
         >
             <p className="text-[#262866] text-[14px] font-medium">{title}</p>

components/layout/footer/menu/ListMenu.js

@@ -3,14 +3,14 @@ import React from 'react'
 function ListMenu({ list, isOpen }) {
   return (
     <ul className={`
-      mt-3 lg:mt-0 w-full lg:w-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
+      mt-3 lg:mt-0 w-full lg:w-fit lg:!max-h-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
       ${isOpen ? 'max-h-[150px]' : 'max-h-0'}
     `}>
       {list.map((item, idx) => (
         <li
           key={idx}
           className={`
-            relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
+            relative cursor-pointer after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
             ${idx === 0 ?
               'hidden lg:flex text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' :
               'text-[#616161] border-transparent font-normal'} 

components/layout/header/index.js

@@ -13,8 +13,6 @@ import UserLogin from "@/components/icons/UserLogin";
 function Header({ name }) {
 
     const [isActive, setIsActive] = useState(false);
-    console.log(name);
-
 
     return (
         <div

components/layout/header/list/Row.js

@@ -4,7 +4,7 @@ import Link from "next/link";
 
 function Row({ name }) {
     return (
-        <ul className="hidden lg:flex items-center justify-center gap-[40px]">
+        <ul className="hidden lg:flex items-center justify-center gap-[30px] xl:gap-[40px]">
             {listNav.map(nav => (
                 <li
                     key={nav.id}
@@ -12,9 +12,9 @@ function Row({ name }) {
                     <Link
                         href={nav.link}
                         className={`
-                                ${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
-                                    text-[16px] font-medium
-                                `}
+                            ${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
+                            text-[16px] font-medium
+                        `}
                     >
                         {nav.name}
                     </Link>

components/layout/header/list/col/index.js

@@ -4,9 +4,6 @@ import Link from "next/link";
 import { isActiveURL } from "@/helper";
 
 function Col({ isActive, setIsActive, name }) {
-
-    console.log(name);
-
     return (
         <div className="flex lg:hidden">
             {/* <Button variant="text" className="!p-0.5">

components/layout/index.js

@@ -1,14 +1,26 @@
+'use client';
+
 import Footer from './footer';
 import Header from './header';
 
+// AOS
+import Aos from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
+
 function Layout({ children, title, name }) {
+
+    useEffect(() => {
+        Aos.init({ duration: 1000 });
+    }, [])
+
     return (
         <div>
             <main className="w-full min-h-screen">
                 <header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
                     <Header name={name} />
                 </header>
-                <section>
+                <section className='opacity-page'>
                     {children}
                 </section>
             </main>

constans/index.js

@@ -1,9 +1,10 @@
 export const listNav = [
     { id: 1, name: 'صفحه اصلی', link: '/' },
     { id: 2, name: 'تخصص ها', link: '/specialties' },
-    { id: 3, name: 'بلاگ', link: '/blog' },
-    { id: 4, name: 'تماس با ما', link: '/contact-us' },
-    { id: 5, name: 'درباره ما', link: '/about-us' },
+    { id: 3, name: 'کلینک ها', link: '/clinics' },
+    { id: 4, name: 'بلاگ', link: '/blogs' },
+    { id: 5, name: 'تماس با ما', link: '/contact-us' },
+    { id: 6, name: 'درباره ما', link: '/about-us' },
 ];
 
 export const frequentSearches = [