I'm extremely new to Next.js/front end development as a whole. I can't seem to get this site to show up with a basic title block and navbar below it. What am I doing wrong here? Any suggestions/help would be appreciated.

This is what I came up with for my CSS styling so far, using tailwind

/* styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

.body {
    font-family: "JetBrains Mono", sans-serif;
}

.homeLayout {
    @apply container mx-auto px-4;
}

.siteTitle {
    @apply text-4xl font-semibold text-center py-6;
}

.navBar {
    @apply bg-gray-800 text-white p-4;
}

.navBar ul {
    @apply flex justify-center space-x-6;
}

.navBar li {
    @apply text-lg;
}

.content {
    @apply mt-8 text-xl;
}

This is my actual homePage

import React from 'react';
import "/styles/styles.css"

const HomePageNav = () => {
    return (
        <header>
            <div className="homeLayout">Testing this site
                <h1 className="navBar">Testing the navbar</h1>
            </div>
        </header>

    );
};

export default HomePageNav;

and this function is called by my page file

import React from 'react';
import HomePageNav from "@/components/homePageNav.jsx";
import "/styles/styles.css"
import RootLayout from "@/app/layout";


const Page = () => {
    <HomePageNav />

};

export default Page;