Marketing Pages

Overview

The Next.js Supabase SaaS template includes pre-defined marketing pages to help you quickly launch your SaaS application. These pages are built using Next.js and styled with Tailwind CSS, providing a flexible, responsive design. You can find these pages in the /app/[lang]/(website) folder, where [lang] refers to the language of the page.

Predefined Marketing Pages

The following marketing pages are included in the template:

1. Home Page (page.tsx)
2. Terms and Conditions
3. Privacy Policy
4. Blog Page (dynamic)
5. Doc Page (dynamic)

Customizable Sections in the Home Page

The Home page includes several key components that you can customize:

• Navigation Bar: Modify the navigation structure for easy access to different sections of your site.
• Hero Section: Customize the main banner with your branding and messaging.
• Scroll Banner: A dynamic banner to highlight key announcements or updates.
• Trusted Brands Section: Showcase clients or partners using your SaaS product.
• User-Faced Problems Section (FAQ): Add frequently asked questions to guide users.
• Features Section: Highlight the core features of your SaaS platform.
• Testimonials Section: Include customer testimonials to build credibility.
• Pricing Section: Present your pricing plans in a clear and organized format.
• Footer: A customizable footer containing social links, feature highlights, and site navigation.

You can modify the layout, text, and visuals of each section to suit your branding and content needs.

Modifying the Overall Layout

To change the overall structure and layout of all marketing pages, you can edit the code in the /app/[lang]/(website)/layout.tsx file. For example, you can:

• Display the user's profile image when they are logged in, along with navigation links to pages like Dashboard and My Account.
• Show a button for creating an account if the user is not signed in.

Example Code for User Profile Handling

<div className="flex items-center gap-3">
    {profile ? (
        <UserProfile showDashboardMenu profile={profile} />
    ) : (
        <div className="inline-flex items-center justify-center gap-6">
            <div className="hidden lg:block">
                <ThemeSwitcherToggle />
            </div>
            <ButtonLink href={`/${lang}/sign-in`} className="rounded-full pr-2">
                {dictionary.website("navigation_get_started_button")}
                <span className="bg-background rounded-full p-1">
                    <ArrowUpRight className="shrink-0 text-primary size-5" />
                </span>
            </ButtonLink>
        </div>
    )}
</div>

This snippet checks if a user is logged in, displays their profile, and provides menu options. Otherwise, it shows a sign-in button.

Adding a New Marketing Page

To add a new marketing page, follow these steps:

1. Create a folder in the /app/[lang]/(website) directory. Example: To create an About page, create /app/[lang]/(website)/about.

2. Create a page.tsx file inside the folder:

   // apps/web/app/(marketing)/about/page.tsx
   export default function AboutPage() {
       return <div></div>;
   }

3. Add a layout for the new page by creating a layout.tsx file, if necessary. This layout file will apply only to the specific marketing page (e.g., About):

   export default async function AboutPageLayout({ children, params }: ReactChildren<{ params: ParamsWithLang }>) {
       return (
           <div className="flex flex-col min-h-screen">
               <Navigation profile={userProfile} />
               <main className="space-y-32 mb-32 flex-1">{children}</main>
               <Footer lang={params.lang} dictionary={dictionary} />
           </div>
       );
   }

   This example includes common components like Navigation and Footer.

4. Customize content and theming inside the page according to your design requirements.

5. Add the new page component (e.g., AboutPage) into the page.tsx file of /app/[lang]/(website)/page.tsx:

   <AboutPage {...props} />

This will render the new page with any common components you define.