Tutorials
Quick Launch

Quick Launch

We're here to help you quickly deploy your project, either if it is an AI chatbot, landing / presentation page or a statistics dashboard type of app.

First of all, look through the archive you just got. We included landing page sections, layout components like a very flexible Sidebar, Navbar, layout components for bot auth or dashboard pages, and many many more.

The base landing page will look something like this:

demo.js
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>
    </>
  );
}

Here you can customize the main landing page and create the vision for the style you'll use throughout the project, section by section.

The moment you got an idea about the look of the project, you can start setting up everything, like the Stripe Account, the database and the authentication system.

After you are done with the landing page, you can go in /app/dashboard and look through the pages, find whaterver suits your need or what fits your ideal app, and feel free to either pick and choose or even customize each page/component.

Finally, you can push all you modifications to you favorite version control and deploy your app!