Chakra UI Landing page navbar

The landing page navbar is used in our dashboard layout and it takes just on prop, which is the session prop that checks if the user is logged in or not. Here is an example of the Navbar component :

/app/page.tsx

 
import NavbarFixed from '@/components/navbar/NavbarFixed';
import { Database } from '@/types_db';
import { Box, Button, Flex, Image, Input, Link, Text } from '@chakra-ui/react';
import { Session, User } from '@supabase/supabase-js';
 
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
type Product = Database['public']['Tables']['products']['Row'];
type Price = Database['public']['Tables']['prices']['Row'];
interface ProductWithPrices extends Product {
  prices: Price[];
}
interface PriceWithProduct extends Price {
  products: Product | null;
}
interface SubscriptionWithProduct extends Subscription {
  prices: PriceWithProduct | null;
}
 
interface Props {
  ............................
}
 
export default function Home(props: Props) {
  return (
    <> 
      <NavbarFixed session={props.session} />
      .......................................
    </>
  );
}

Landing Navbar

Chakra UI Navbar Dashboard Chakra UI Pricing Section