courses update

package.json

@@ -9,19 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "14.2.3",
-    "react": "^18",
-    "react-dom": "^18",
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/next-js": "^2.2.0",
     "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@nextui-org/react": "^2.3.6",
-    "framer-motion": "^11.1.7",
+    "@react-oauth/google": "^0.12.1",
+    "axios": "^1.6.8",
+    "framer-motion": "^11.2.4",
+    "lucide-react": "^0.378.0",
+    "next": "14.2.3",
+    "razorpay": "^2.9.3",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-hook-form": "^7.51.4",
     "react-icons": "^5.1.0",
     "typewriter-effect": "^2.21.0",
-    "web-vitals": "^3.5.2"
+    "web-vitals": "^3.5.2",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.19",

src/Components/CourceDetails/CourceDetails.jsx

@@ -0,0 +1,37 @@
+import Image from 'next/image'
+import React from 'react'
+import star from "../../imgs/Cirstar.svg"
+
+const CourceDetails = () => {
+  return (
+    <div className='bg-[#BDA0E9] py-[15.5px] rounded-[20px]'>
+      <div className='ml-[10px] mb-[15.5px] flex items-center gap-[27px]'>
+        <Image src={star} width={27} height={27} alt='star'/>
+        <p className='text-[16px] text-white font-normal'>Develop effective habits and time management strategies.</p>
+      </div>
+
+      <div className='ml-[10px] mb-[15.5px] flex items-center gap-[27px]'>
+        <Image src={star} width={27} height={27} alt='star'/>
+        <p className='text-[16px] text-white font-normal'>Acquire decision-making frameworks to evaluate career options.</p>
+      </div>
+
+      <div className='ml-[10px] mb-[15.5px] flex items-center gap-[27px]'>
+        <Image src={star} width={27} height={27} alt='star'/>
+        <p className='text-[16px] text-white font-normal'>Gain insights into emerging industries and future job trends.</p>
+      </div>
+
+      <div className='ml-[10px] mb-[15.5px] flex items-center gap-[27px]'>
+        <Image src={star} width={27} height={27} alt='star'/>
+        <p className='text-[16px] text-white font-normal'>Gain insights into emerging industries and future job trends.</p>
+      </div>
+
+      <div className='ml-[10px]  flex items-center gap-[27px]'>
+        <Image src={star} width={27} height={27} alt='star'/>
+        <p className='text-[16px] text-white font-normal'>Gain insights into emerging industries and future job trends.</p>
+      </div>
+
+    </div>
+  )
+}
+
+export default CourceDetails

src/Components/Duration/Duration.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+
+const Duration = ({text,time}) => {
+  return (
+    <div className='bg-[#FFBF75] w-full rounded-md shadow-lg p-[20px]'>
+      <div className=''>
+        <p className='text-[#C10000] text-center text-[18px] font-normal'>{text} <br /> {time}</p>
+      </div>
+    </div>
+  )
+}
+
+export default Duration

src/Components/Navbar/Navbar.css

@@ -10,7 +10,6 @@
   #navFix {
     position: sticky;
    top: 0;
-   z-index: 20;
    width: 90%;
 
   }

src/Components/Navbar/Navbar.jsx

@@ -39,8 +39,6 @@ export default function Navbar() {
   const { colorMode, toggleColorMode } = useColorMode();
   const { isOpen, onOpen, onClose } = useDisclosure();
 
-
-
   return (
     <div id="navFix" className="flex h-30 rounded-2xl mx-auto ">
       <Navbar_ maxWidth="full" className="rounded-2xl backdrop-lg h-16 mt-5 shadow-xl ring-slate-200 ring-2 ring-offset-2" >