need to work better

app/components/Navbar.tsx

@@ -4,7 +4,7 @@ import logo from '@/public/images/logo2.png'
 
 const Navbar: React.FC = () => {
   return (
-    <nav className="bg-[#212121] px-[6.5rem] pt-8 h-[750px]">
+    <nav className="bg-[#212121] px-[6.5rem] pt-8 h-[110px]">
       <div className="container mx-auto flex  items-center">
         <div className='w-[241px]'>
         <Link href="/" >
@@ -13,28 +13,28 @@ const Navbar: React.FC = () => {
         </div>
         <ul className="flex space-x-12">
           <li>
-            <Link href="/home" className="text-[#818181] pl-12 pr-14 font-iranSans">صفحه اصلی
+            <Link href="/home" className="text-[#818181] pl-12 pr-14 font-iranSans font-medium text-sm">صفحه اصلی
 
             </Link>
           </li>
           <li>
-            <Link href="/group-class" className="text-[#818181] font-iranSans">کلاس گروهی
+            <Link href="/group-class" className="text-[#818181] font-iranSans font-medium text-sm">کلاس گروهی
 
             </Link>
           </li>
           <li>
-            <Link href="/private-class" className="text-[#818181] font-iranSans">کلاس خصوصی
+            <Link href="/private-class" className="text-[#818181] font-iranSans font-medium text-sm">کلاس خصوصی
 
             </Link>
           </li>
 
           <li>
-            <Link href="/blog" className="text-[#818181] font-iranSans">وبلاگ
+            <Link href="/blog" className="text-[#818181] font-iranSans font-medium text-sm">وبلاگ
 
             </Link>
           </li>
           <li>
-            <Link href="/contact-us" className="text-[#818181] font-iranSans">تماس با ما
+            <Link href="/contact-us" className="text-[#818181] font-iranSans font-medium text-sm">تماس با ما
 
             </Link>
           </li>

app/group-class/CourseLevel.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const courseLevel = () => {
+  return (
+    <div className='bg-blue-800 z-30 rounded w-[85%] relative mx-[6.5rem]'>
+      <h2>gvgnccf</h2>
+    </div>
+  )
+}
+
+export default courseLevel

app/group-class/page.tsx

@@ -0,0 +1,35 @@
+
+import React from 'react'
+import Navbar from '../components/Navbar'
+// import introVideo from 'public/videos/intro.mp4';
+import vTemp from '@/public/videos/v-temp.png'
+import Image from 'next/image'
+import CourseLevel from './CourseLevel'
+
+const groupClass = () => {
+  return (
+    <main>
+      <Navbar></Navbar>
+      <section className='w-full h-[40rem] bg-[#212121]'>
+        <h1 className='font-iranSans font-bold text-[2rem] text-[#1FD998] text-center leading-relaxed mb-4 pt-24'> ثبت نام کلاس های گروهی زبان <span className='bg-[#2E2E2E] text-white p-1'>آنلاین </span></h1>
+        <h2 className='font-iranSans text-[#B7B7B7] text-xl text-center font-medium'>یک بار برای همیشه به انگلیسی مسلط شوید</h2>
+        {/* <video controls width="640" height="360">
+        <source src={introVideo} type="video/mp4" />
+        Your browser does not support the video tag.
+      </video> */}
+      <button className='w-[175px] h-[52px] bg-red-600 flex justify-center items-center mx-auto mt-8 '>replace me!</button>
+      <Image src={vTemp} alt='video should be here ' width={580} height={384} className='mx-auto mt-8 z-50 relative'></Image>
+      </section>
+      <div className='bg-[#f8f8fb] w-full relative z-10 h-[700px]'> 
+
+        <div className='bg-[#f8f8fb]  mt-[-10rem] absolute w-[85%] mx-[6.5rem] z-0 h-[700px] rounded-lg'>
+
+        </div>
+        <CourseLevel></CourseLevel>
+      </div>
+
+    </main>
+  )
+}
+
+export default groupClass