Shadcn Components
Shadcn UI Navbar Landing

Horizon AI Boilerplate - @shadcn/ui

Shadcn 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 {
  getSession,
  getSubscription,
  getActiveProductsWithPrices,
} from '@/app/supabase-server';
import { FooterWebsite } from '@/components/footer/FooterWebsite';
import Faq from '@/components/landing/faq';
import FeatureOne from '@/components/landing/feature-one';
import FeatureThree from '@/components/landing/feature-three';
import FeatureTwo from '@/components/landing/feature-two';
import FeaturesList from '@/components/landing/features-list';
import FirstSection from '@/components/landing/first-section';
import Hero from '@/components/landing/hero';
import Newsletter from '@/components/landing/newsletter';
import SecondSection from '@/components/landing/second-section';
import NavbarFixed from '@/components/navbar/NavbarFixed';
 
export default async function PricingPage() {
  const [session, products, subscription] = await Promise.all([
    getSession(),
    getActiveProductsWithPrices(),
    getSubscription(),
  ]).then();
 
  return (
    <> 
      <NavbarFixed session={session} />
      <div className="text-neutral-200 relative flex h-full min-h-screen flex-col items-center overflow-hidden">
        <div className="relative flex w-full flex-col items-center justify-center pb-0 md:pb-[80px]">
          <Hero />
          <FeaturesList />
          <FirstSection />
          <SecondSection />
          <FeatureOne />
          <FeatureTwo />
          <FeatureThree />
          <Faq />
          <Newsletter />
        </div>
        <FooterWebsite />
      </div>
    </>
  );
}

Landing Navbar