iam working on a next js web app . its similar to google classroom . its called ClassPlus. iam using the latest and best practices of next js . iam using app router .
and i need your help with generate some components . i want to create a landing page with the following components: Navbar - this is my header . i think its the most complext part . and here is what i want : its should be dynamic , because i will change the buttons and links in this navbar depanding on some conditions. for example if the user is logged in , i will display the logout button . and if the user is not logged in , i will display login and signup buttons. if the user is in the landing page i will display the landing page sections like about and contact.
i want the nav bar something like this : it has 3 containers : this first (left) is the ClassPlus logo . in the middle the links container . and in the right the buttons (signup , login , etc)
i also want : Hero - add some cool design with nice background . i | A shadcn/ui and v0 generation - v0