fixed layout making sidebar and navbar fixed but not absolute

src/components/banner/HeroBanner.js

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import Image from 'next/image';
+
+const HeroBanner = () => {
+    const options = ['Bitcoin', 'Lightning', 'Nostr'];
+    const [currentOption, setCurrentOption] = useState(0);
+    const [fade, setFade] = useState(true);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setFade(false);
+            setTimeout(() => {
+                setCurrentOption((prevOption) => (prevOption + 1) % options.length);
+                setFade(true);
+            }, 700); // Half the interval time
+        }, 1500); // Change text every 2 seconds
+
+        return () => clearInterval(interval);
+    }, []);
+
+    return (
+        <div className="relative flex justify-center items-center">
+            <Image
+                src="/plebdevs-banner.jpg"
+                alt="Banner"
+                width={1920}
+                height={1080}
+                quality={100}
+            />
+            <div className="absolute text-center text-white text-2xl">
+                <p className='text-4xl'>Learn how to code</p>
+                <p className='text-4xl pt-4'>
+                    Build{' '}
+                    <span className={`text-4xl pt-4 transition-opacity duration-500 ${fade ? 'opacity-100' : 'opacity-0'}`}>
+                        {options[currentOption]}
+                    </span>
+                    {' '}apps
+                </p>
+                <p className='text-4xl pt-4'>Become a Bitcoin developer</p>
+            </div>
+        </div>
+    );
+};
+
+export default HeroBanner;

src/components/courses/CoursesCarousel.js

@@ -8,6 +8,24 @@ import { useImageProxy } from '@/hooks/useImageProxy';
 import { parseEvent } from '@/utils/nostr';
 import { formatTimestampToHowLongAgo } from '@/utils/time';
 
+const responsiveOptions = [
+    {
+        breakpoint: '1199px',
+        numVisible: 3,
+        numScroll: 1
+    },
+    {
+        breakpoint: '767px',
+        numVisible: 2,
+        numScroll: 1
+    },
+    {
+        breakpoint: '575px',
+        numVisible: 1,
+        numScroll: 1
+    }
+];
+
 export default function CoursesCarousel() {
     const courses = useSelector((state) => state.events.courses);
     const [processedCourses, setProcessedCourses] = useState([]);
@@ -48,7 +66,7 @@ export default function CoursesCarousel() {
     return (
         <>
             <h1 className="text-2xl ml-[6%] mt-4">courses</h1>
-            <Carousel value={processedCourses} numVisible={3} itemTemplate={courseTemplate} />
+            <Carousel value={processedCourses} numVisible={3} itemTemplate={courseTemplate} responsiveOptions={responsiveOptions} />
         </>
     );
 }

src/components/navbar/Navbar.js

@@ -13,6 +13,8 @@ const Navbar = () => {
 
     const menu = useRef(null);
 
+    const navbarHeight = '60px';
+
     const menuItems = [
         {
             label: 'Home',
@@ -85,10 +87,18 @@ const Navbar = () => {
     );
 
     return (
-        <Menubar
-            start={start}
-            end={UserAvatar}
-            className='px-[2%] bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none' />
+        <>
+            <div className='w-[100vw] h-fit'>
+                <Menubar
+                    start={start}
+                    end={UserAvatar}
+                    className='px-[2%] bg-gray-800 border-t-0 border-l-0 border-r-0 rounded-none fixed z-10 w-[100vw]' 
+                    style={{ height: navbarHeight }}
+                />
+            </div>
+            {/* Placeholder div with the same height as the Navbar */}
+            <div style={{ height: navbarHeight }}></div>
+        </>
     );
 };
 

src/components/sidebar/Sidebar.js

@@ -12,7 +12,7 @@ const Sidebar = () => {
     };
 
     return (
-        <div className='max-mob:hidden max-tab:hidden w-[15vw] bg-gray-800 p-4 h-screen'>
+        <div className='max-mob:hidden max-tab:hidden w-[15vw] bg-gray-800 p-4 fixed z-10 h-[100%]'>
             <div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
                 <p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
             </div>

src/pages/_app.js

@@ -15,12 +15,12 @@ export default function MyApp({
         <Provider store={store}>
             <PrimeReactProvider>
                 <ToastProvider>
-                    <Layout>
+                <Layout>
                         <div className="flex flex-col min-h-screen">
                             <Navbar />
                             <div className='flex'>
                                 <Sidebar />
-                                <div className='max-w-[85vw]'>
+                                <div className='max-w-[100vw] pl-[15vw]'>
                                     <Component {...pageProps} />
                                 </div>
                             </div>

src/pages/details/[slug].js

@@ -55,8 +55,8 @@ export default function Details() {
     }, [event]);
 
     return (
-        <div className='flex flex-row justify-between m-4'>
-            <i className='pi pi-arrow-left cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
+        <div className='w-[80vw] flex flex-row justify-between mx-auto mt-4'>
+            <i className='pi pi-arrow-left pl-8 cursor-pointer hover:opacity-75' onClick={() => router.push('/')} />
             <div className='flex flex-col items-start'>
                 <div className='flex flex-row justify-start w-full'>
                     <Tag className='mr-2' value="Primary"></Tag>

src/pages/index.js

@@ -2,6 +2,7 @@ import Head from 'next/head'
 import React, {useCallback, useEffect, useState} from 'react';
 import CoursesCarousel from '@/components/courses/CoursesCarousel'
 import WorkshopsCarousel from '@/components/workshops/WorkshopsCarousel'
+import HeroBanner from '@/components/banner/HeroBanner';
 import { useNostr } from '@/hooks/useNostr'
 
 export default function Home() {
@@ -21,6 +22,7 @@ export default function Home() {
         <link rel="icon" href="/favicon.ico" />
       </Head>
       <main>
+        <HeroBanner text="Welcome to Nostr!" />
         <CoursesCarousel />
         <WorkshopsCarousel />
       </main>

src/pages/profile.js

@@ -59,7 +59,7 @@ const Profile = () => {
 
     return (
         <>
-            <div className="flex flex-col justify-center px-12">
+            <div className="w-[85vw] flex flex-col justify-center mx-auto">
                 <div className="relative flex w-full items-center justify-center">
                     {user.avatar && (
                         <Image