added hero navbar and webwiz circle

package.json

@@ -20,7 +20,8 @@
     "react-dom": "^18",
     "react-element-to-jsx-string": "^15.0.0",
     "scroll": "^3.0.1",
-    "tailwind-merge": "^2.2.1"
+    "tailwind-merge": "^2.2.1",
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "@types/node": "^20",

src/app/Narashimha/Circle/page.tsx

@@ -0,0 +1,9 @@
+import Image from "next/image";
+
+export default function page() {
+  return (
+    <div className="w-full h-screen">
+      <Image src={"/Group.svg"} alt="webwizcircle" fill={true}/>
+    </div>
+  );
+}

src/app/Narashimha/Hero/page.tsx

@@ -0,0 +1,43 @@
+"use client";
+import React from 'react'
+function page(){
+    return(<>
+    <div className='hidden md:block'>
+        <div className='main-hero flex flex-col relative top-56 justify-center items-center ml-20 mr-20 bg-[#262628] text-[#FFFFFF] px-4 py-4'>
+            <div>
+                <p className='font-bold text-[64px] text-center mb-[24px]'>Empowering Students to Create Stunning Websites</p>
+            </div>
+            <div>
+                <p className='text-[24px] text-center mb-[56px]'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, reprehenderit neque illo iure aspernatur esse assumenda reiciendis nihil animi! Necessitatibus illum maxime, sint corrupti sequi molestiae? Quaerat, quod maxime! Nisi?
+                </p>
+            </div>
+            <div className=''>
+                <button className='border-[2px] border-[#8037B1] px-5 py-2.5 mr-4 rounded-md bg-[#3F3BFA] text-[#FFFFFF] font-semibold'>Primary button</button>
+                <button className='border-[2px] border-[#8037B1] px-5 py-2.5 mr-4 rounded-md text-[#FFFFFF] font-semibold bg-[#262628]'>Secondary button</button>
+            </div>
+        </div>
+    </div>
+
+
+
+
+
+    <div className='block md:hidden'>
+        <div className='main-hero flex flex-col relative top-56 justify-center items-center ml-10 mr-10 bg-[#262628] text-[#FFFFFF] px-4 py-4'>
+            <div>
+                <p className='font-bold text-[32px] text-center mb-[24px]'>Empowering Students to Create Stunning Websites</p>
+            </div>
+            <div>
+                <p className='text-[12px] text-center mb-[28px]'>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, reprehenderit neque illo iure aspernatur esse assumenda reiciendis nihil animi! Necessitatibus illum maxime, sint corrupti sequi molestiae? Quaerat, quod maxime! Nisi?
+                </p>
+            </div>
+            <div className='flex flex-row'>
+                <button className='border-[2px] border-[#8037B1] px-2.5 py-2 mr-4  rounded-md bg-[#3F3BFA] text-[#FFFFFF] font-semibold text-[12px]'>Primary button</button>
+                <button className='border-[2px] border-[#8037B1] px-2.5 py-2 mr-4 rounded-md text-[#FFFFFF] font-semibold bg-[#262628] text-[12px]'>Secondary button</button>
+            </div>
+        </div>
+    </div>
+
+</>)
+}
+export default page

src/app/Narashimha/HeroCover/page.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import Image from 'next/image'
+
+const page = () => {
+  return (
+  <div>
+  <div className="absolute inset-0 -z-10 h-full w-full bg-[#080512] bg-[linear-gradient(to_right,#0D0719_2px,transparent_1px),linear-gradient(to_bottom,#0D0719_2px,transparent_1px)] bg-[size:6rem_4rem]"></div>
+  {/* <div className='border-2 border-red-500 flex flex-row justify-between h-full'>
+    <div className="w-1/3 ">
+        <img alt='gradient' src={"/Ellipse4.svg"} style={{ width: "100%"}}/>
+    </div>
+    <div className="w-1/3"></div>
+    <div className="w-1/3 ">
+        <img alt='gradient' src={"/Ellipse4.svg"} style={{ width: "100%"}}/>
+    </div>
+  </div> */}
+  <div className='first'>
+    <div className="flex flex-row justify-between h-full border-2">
+        <div className="w-1/2 h-full">
+        <Image src="/Ellipse444.svg" alt="gradient" width={300} height={300} layout='responsive' objectFit='cover'/>
+        </div>
+        <div className="w-1/2 h-full">
+            <Image src="/Ellipse444.svg" alt="gradient" width={300} height={300} layout='responsive' objectFit='cover'/>
+        </div>
+    </div>
+  </div>
+</div>
+  )
+}
+
+export default page

src/app/Narashimha/Navbar/page.tsx

@@ -0,0 +1,57 @@
+"use client";
+import React from 'react'
+import { useState } from 'react';
+import { FaBars } from "react-icons/fa6";
+import { IoClose } from "react-icons/io5";
+
+function Page() {
+    const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+    const [isIcon, setIsIcon] = useState(false);
+
+    const toggleSidebar = () => {
+      setIsSidebarOpen(!isSidebarOpen);
+      setIsIcon(!isIcon);
+    };
+    return (<>
+    <div className='hidden md:block'>
+        <div className="main-navbar mx-12 h-12 sticky mt-10 flex justify-between items-center text-white bg-[#0f0f10] font-medium rounded-md z-10">
+          <p className="nav-item1 ml-4 font-[1000]" style={{ 
+      backgroundImage: 'linear-gradient(to top, #7730B5, #FFFFFF)',
+      WebkitBackgroundClip: 'text',
+      backgroundClip: 'text',
+      color: 'transparent'
+    }}>&lt;Webwiz/&gt;</p>
+          <div className="nav-item2 flex">
+            <p className="nav-item21 mr-10">About</p>
+            <p className="nav-item21 mr-10">Projects</p>
+            <p className="nav-item21 mr-10">Workshops</p>
+            <p className="nav-item21">Events</p>
+          </div>
+          <div className="nav-item3 mr-4 border-2 px-4 py-1 bg-[#11081e] border-[#8249b5] rounded-md">Join Us</div>
+        </div>
+    </div>
+
+
+        {isSidebarOpen && (
+    <div className='block md:hidden h-screen bg-black w-1/2 text-white z-10 mx-0 my-0'>
+        <button onClick={toggleSidebar} className='relative top-4 start-4'>{isIcon ? <FaBars size={30}/>:<IoClose size={30}/>}</button>
+        <div className='list-none text-center h-full flex flex-col items-center justify-evenly mt-4'>
+            <li className="side-item">About</li>
+            <li className="side-item">Projects</li>
+            <li className="side-item">Workshops</li>
+            <li className="side-item">Events</li>
+            <li className="side-item ml-3 mr-3">Join Us</li>
+        </div>
+    </div>
+        )}
+        {!isSidebarOpen && (
+    <div className='block md:hidden z-10 relative top-10 start-10'>
+      <button onClick={toggleSidebar}>{isIcon ? <FaBars/>:<IoClose/>}</button>
+      </div>
+        )}
+
+    </>
+    )
+}
+
+export default Page

src/app/globals.css

@@ -116,4 +116,4 @@ p {
 
 .rotating {
   animation: rotate 6s linear infinite;
-}*/
+}*/