add: about page

src/app/[name]/about/page.tsx

@@ -0,0 +1,142 @@
+import { ArrowDown2, CallCalling, Clock, Gallery, Instagram, Location, MouseCircle, Whatsapp } from 'iconsax-react';
+import { Metadata } from 'next';
+import Image from 'next/image';
+import React from 'react'
+
+type Params = { name: string };
+
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  const { name } = await params;
+  const data = { title: 'درباره ما | ' + name, description: 'همه چیز درباره مجموعه ' + name }
+
+  return {
+    title: data.title || `About | ${name}`,
+    description: data.description || `This is the about-us page for ${name}.`,
+  };
+}
+
+export async function generateStaticParams() {
+  return [{ name: 'zhivan' }, { name: 'dake' }];
+}
+
+function AboutIndex() {
+  return (
+    <div>
+      <div className="bg-container rounded-container shadow-container p-4">
+        <div className="flex justify-between items-center border-b-[1.5px] border-gray-200 pb-[25px]">
+          <div className="">
+            <div className='text-sm2 font-bold leading-5'>کافه رستوران ژیوان</div>
+            <div className="text-sm2 leading-5 mt-4">تاسیس:1392</div>
+            <div className="text-sm2 leading-5 mt-2">نوع محصولات: ایرانی، خارجی</div>
+          </div>
+          <div className="rounded-normal overflow-clip">
+            <Image
+              alt='logo'
+              src={'/assets/images/food-preview.png'}
+              width={88}
+              height={88}
+              unoptimized
+              priority
+            />
+          </div>
+        </div>
+        <div className="mt-[23px]">
+          <div className="text-sm2 font-bold leading-5">درباره مجموعه</div>
+          <p className="text-sm2 leading-5 mt-3 border-spacing-48" style={{ wordSpacing: '0.01em' }}>
+            لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد
+          </p>
+          <div className='inline-flex gap-2 mt-[23px] items-center'>
+            <Gallery size={20} className='stroke-disabled-text' />
+            <span className='text-sm2 text-disabled-text font-medium pt-0.5'>عکس های رستوران</span>
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-container rounded-container shadow-container pt-3 pb-3.5 px-[16px] mt-4 grid grid-cols-3 items-center">
+        <div className='text-sm2 font-medium leading-5'>ارتباط</div>
+        <div className='col-span-1 text-center flex justify-center gap-4'>
+          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
+            <CallCalling className='stroke-foreground' size={24} />
+          </a>
+          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
+            <MouseCircle variant='Linear' className='stroke-foreground' size={24} />
+          </a>
+          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
+            <Whatsapp className='stroke-foreground' size={24} />
+          </a>
+          <a href='' className='bg-[#EAEDF5] p-2 rounded-normal'>
+            <Instagram className='stroke-foreground' size={24} />
+          </a>
+        </div>
+      </div>
+
+      <div className="bg-container rounded-container shadow-container p-4 mt-4">
+        <div className='text-sm2 font-medium leading-5'>آدرس</div>
+        <div className='text-sm2 mt-[9px]'>خیابان دانشگاه روبروی بیمارستان خوانساری ساختمان مهر</div>
+        <div className='inline-flex gap-2 mt-[23px] items-center'>
+          <Location size={20} className='stroke-disabled-text' />
+          <span className='text-sm2 text-disabled-text pt-0.5'>عکس های رستوران</span>
+        </div>
+      </div>
+
+      <div className="bg-container rounded-container shadow-container py-6 px-4 mt-4 flex justify-between items-center">
+        <div className="flex items-center gap-2 justify-start">
+          <Clock size={16} className='stroke-disabled-text' />
+          <div className='text-sm2 font-medium leading-5 mt-0.5 text-[#8C90A3]'>باز</div>
+          <div className='size-1.5 bg-[#D9D9D9] rounded-full'></div>
+          <div className='text-sm2 mt-0.5'>امروز از ساعت 10:30 تا 17:30 </div>
+        </div>
+        <div className="">
+          <ArrowDown2 size={16} className='stroke-[#292D32]' />
+        </div>
+      </div>
+
+      <div
+        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
+        <div className="text-sm2">
+          شنبه
+        </div>
+        <div className='text-sm2 font-light'>
+          10:30 - 17:30
+        </div>
+      </div>
+
+      <div
+        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
+        <div className="text-sm2">
+          شنبه
+        </div>
+        <div className='text-sm2 font-light'>
+          10:30 - 17:30
+        </div>
+      </div>
+
+      <div
+        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
+        <div className="text-sm2">
+          شنبه
+        </div>
+        <div className='text-sm2 font-light'>
+          10:30 - 17:30
+        </div>
+      </div>
+
+      <div
+        style={{ boxShadow: '0px 0px 14px 0px #0000000F' }}
+        className="bg-[#F6F6FA] rounded-container py-6 px-4 mt-4 flex justify-between items-center">
+        <div className="text-sm2">
+          شنبه
+        </div>
+        <div className='text-sm2 font-light'>
+          10:30 - 17:30
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+export default AboutIndex

src/app/globals.css

@@ -89,10 +89,6 @@ input[type="password"] {
 }
 
 @theme inline {
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
   --color-background: var(--background);
   --color-foreground: var(--foreground);
   --color-card: var(--card);

src/components/navigation/BottomNavBar.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react'
 import BottomNavLink from './BottomNavLink'
 import BottomNavHighlightLink from './BottomNavLinkBig'

src/components/wrapper/ClientMenuRouteWrapper.tsx.tsx

@@ -36,15 +36,15 @@ function ClientMenuRouteWrapper({ children }: Props) {
   // }, [location])
 
   return (
-    <div className='h-full overflow-hidden py-10 px-4'>
+    <div className='h-full overflow-hidden py-10 '>
-      <header>
+      <header className='px-4'>
         <TopBar
           profileDropState={profileDrop} toggleProfileDropState={toggleProfileDrop}
           menuState={menuState} toggleMenuState={toggleMenuState}
           searchModalState={searchModal} toggleSearchModalState={toggleSearchModal}
           nightModeState={nightMode} toggleNightModeState={toggleNightMode} />
       </header>
-      <main className="h-full pt-14 pb-14 lg:pt-28 overflow-y-auto noscrollbar">
+      <main className="h-full px-4 pt-14 pb-14 lg:pt-28 overflow-y-auto noscrollbar">
         {children}
       </main>
       <aside>
@@ -53,7 +53,7 @@ function ClientMenuRouteWrapper({ children }: Props) {
           nightModeState={nightMode} togglenightModeState={toggleNightMode}
           menuState={menuState} toggleMenuState={toggleMenuState} />
       </aside>
-      <footer>
+      <footer className='px-4'>
         <BottomNavBar />
 
       </footer>