B2B-88: adds starter kit's structure and functionality

.aiignore

@@ -0,0 +1,27 @@
+# An .aiignore file follows the same syntax as a .gitignore file.
+# .gitignore documentation: https://git-scm.com/docs/gitignore
+
+# you can ignore files
+.DS_Store
+*.log
+*.tmp
+
+# or folders
+dist/
+build/
+out/
+
+.cursor
+.cursorignore
+database.types.ts
+playwright-report
+test-results
+web/supabase/migrations
+pnpm-lock.yaml
+.env.local
+.env.production.local
+.idea
+.vscode
+.zed
+tsconfig.tsbuildinfo
+.windsurfrules

.cursorignore

@@ -0,0 +1,12 @@
+database.types.ts
+playwright-report
+test-results
+web/supabase/migrations
+pnpm-lock.yaml
+.env.local
+.env.production.local
+.idea
+.vscode
+.zed
+tsconfig.tsbuildinfo
+.windsurfrules

.env

@@ -0,0 +1,49 @@
+# SHARED ENVIROMENT VARIABLES
+# HERE YOU CAN ADD ALL THE **PUBLIC** ENVIRONMENT VARIABLES THAT ARE SHARED ACROSS ALL THE ENVIROMENTS
+# PLEASE DO NOT ADD ANY CONFIDENTIAL KEYS OR SENSITIVE INFORMATION HERE
+# ONLY CONFIGURATION, PATH, FEATURE FLAGS, ETC.
+# TO OVERRIDE THESE VARIABLES IN A SPECIFIC ENVIRONMENT, PLEASE ADD THEM TO THE SPECIFIC ENVIRONMENT FILE (e.g. .env.development, .env.production)
+
+# SITE
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+NEXT_PUBLIC_PRODUCT_NAME=MedReport
+NEXT_PUBLIC_SITE_TITLE="MedReport"
+NEXT_PUBLIC_SITE_DESCRIPTION="MedReport."
+NEXT_PUBLIC_DEFAULT_THEME_MODE=light
+NEXT_PUBLIC_THEME_COLOR="#ffffff"
+NEXT_PUBLIC_THEME_COLOR_DARK="#0a0a0a"
+
+# AUTH
+NEXT_PUBLIC_AUTH_PASSWORD=true
+NEXT_PUBLIC_AUTH_MAGIC_LINK=false
+NEXT_PUBLIC_CAPTCHA_SITE_KEY=
+
+# BILLING
+NEXT_PUBLIC_BILLING_PROVIDER=stripe
+
+# CMS
+CMS_CLIENT=keystatic
+
+# KEYSTATIC
+NEXT_PUBLIC_KEYSTATIC_CONTENT_PATH=./content
+
+# LOCALES PATH
+NEXT_PUBLIC_LOCALES_PATH=apps/web/public/locales
+
+# FEATURE FLAGS
+NEXT_PUBLIC_ENABLE_THEME_TOGGLE=true
+NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_DELETION=true
+NEXT_PUBLIC_ENABLE_PERSONAL_ACCOUNT_BILLING=true
+NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_DELETION=true
+NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_BILLING=true
+NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS=true
+NEXT_PUBLIC_ENABLE_TEAM_ACCOUNTS_CREATION=true
+NEXT_PUBLIC_LANGUAGE_PRIORITY=application
+NEXT_PUBLIC_ENABLE_NOTIFICATIONS=true
+
+# NEXTJS
+NEXT_TELEMETRY_DISABLED=1
+
+LOGGER=pino
+
+NEXT_PUBLIC_DEFAULT_LOCALE=et

.env.development

@@ -0,0 +1,27 @@
+# This file is used to define environment variables for the development environment.
+# These values are only used when running the app in development mode.
+
+# SUPABASE
+NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
+
+## THIS IS FOR DEVELOPMENT ONLY - DO NOT USE IN PRODUCTION
+SUPABASE_DB_WEBHOOK_SECRET=WEBHOOKSECRET
+
+# EMAILS
+EMAIL_SENDER="Makerkit <admin@makerkit.dev>"
+EMAIL_PORT=54325
+EMAIL_HOST=localhost
+EMAIL_TLS=false
+EMAIL_USER=user
+EMAIL_PASSWORD=password
+
+# CONTACT FORM
+CONTACT_EMAIL=test@makerkit.dev
+
+# STRIPE
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=
+
+# MAILER
+MAILER_PROVIDER=nodemailer

.env.production

@@ -0,0 +1,12 @@
+# PRODUCTION ENVIRONMENT VARIABLES
+
+## DO NOT ADD VARS HERE UNLESS THEY ARE PUBLIC OR NOT SENSITIVE
+## THIS ENV IS USED FOR PRODUCTION AND IS COMMITED TO THE REPO
+## AVOID PLACING SENSITIVE DATA IN THIS FILE.
+## PUBLIC KEYS OR CONFIGURATION ARE OKAY TO BE PLACED HERE.
+
+# SUPABASE
+NEXT_PUBLIC_SUPABASE_URL=
+
+# STRIPE
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=

.env.test

@@ -0,0 +1,22 @@
+# TEST ENVIRONMENT VARIABLES
+NEXT_PUBLIC_CI=true
+
+# SUPABASE
+NEXT_PUBLIC_SUPABASE_URL=http://127.0.0.1:54321
+NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
+SUPABASE_SERVICE_ROLE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
+
+## THIS IS FOR DEVELOPMENT ONLY - DO NOT USE IN PRODUCTION
+SUPABASE_DB_WEBHOOK_SECRET=WEBHOOKSECRET
+
+EMAIL_SENDER=test@makerkit.dev
+EMAIL_PORT=54325
+EMAIL_HOST=localhost
+EMAIL_TLS=false
+EMAIL_USER=user
+EMAIL_PASSWORD=password
+
+# STRIPE
+NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51K9cWKI1i3VnbZTq2HGstY2S8wt3peF1MOqPXFO4LR8ln2QgS7GxL8XyKaKLvn7iFHeqAnvdDw0o48qN7rrwwcHU00jOtKhjsf
+
+CONTACT_EMAIL=test@makerkit.dev

.gitignore

@@ -2,6 +2,7 @@
 
 # dependencies
 /node_modules
+**/node_modules/
 /.pnp
 .pnp.*
 .yarn/*
@@ -32,7 +33,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
-.env
+
 
 # vercel
 .vercel

.npmrc

@@ -0,0 +1,10 @@
+peer-legacy-deps=true
+dedupe-peer-dependents=true
+use-lockfile-v6=true
+resolution-mode=highest
+package-manager-strict=true
+public-hoist-pattern[]=*i18next*
+public-hoist-pattern[]=*eslint*
+public-hoist-pattern[]=*prettier*
+public-hoist-pattern[]=*require-in-the-middle*
+public-hoist-pattern[]=*import-in-the-middle*

.nvmrc

@@ -0,0 +1 @@
+20.10

.prettierignore

@@ -0,0 +1,3 @@
+database.types.ts
+playwright-report
+*.hbs

.windsurfrules

@@ -0,0 +1,224 @@
+# Makerkit Guidelines
+
+## Project Stack
+- Framework: Next.js 15 App Router, TypeScript, React, Node.js
+- Backend: Supabase with Postgres
+- UI: Shadcn UI, Tailwind CSS
+- Key libraries: React Hook Form, React Query, Zod, Lucide React
+- Focus: Code clarity, Readability, Best practices, Maintainability
+
+## Project Structure
+```
+  /app
+    /home          # protected routes
+      /(user)      # user workspace
+      /[account]   # team workspace
+    /(marketing)   # marketing pages
+    /auth         # auth pages
+  /components     # global components
+  /config        # global config
+  /lib           # global utils
+  /content       # markdoc content
+  /supabase      # supabase root
+```
+
+## Core Principles
+
+### Data Flow
+1. Server Components
+   - Use Supabase Client directly via `getSupabaseServerClient`
+   - Handle errors with proper boundaries
+   - Example:
+     ```tsx
+     async function ServerComponent() {
+       const client = getSupabaseServerClient();
+       const { data, error } = await client.from('notes').select('*');
+       if (error) return <ErrorComponent error={error} />;
+       return <ClientComponent data={data} />;
+     }
+     ```
+
+2. Client Components
+   - Use React Query for data fetching
+   - Implement proper loading states
+   - Example:
+     ```tsx
+     function useNotes() {
+       const { data, isLoading } = useQuery({
+         queryKey: ['notes'],
+         queryFn: async () => {
+           const { data } = await fetch('/api/notes');
+           return data;
+         }
+       });
+       return { data, isLoading };
+     }
+     ```
+
+### Server Actions
+- Name files as "server-actions.ts" in `_lib/server` folder
+- Export with "Action" suffix
+- Use `enhanceAction` with proper typing
+- Example:
+  ```tsx
+  export const createNoteAction = enhanceAction(
+    async function (data, user) {
+      const client = getSupabaseServerClient();
+      const { error } = await client
+        .from('notes')
+        .insert({ ...data, user_id: user.id });
+      if (error) throw error;
+      return { success: true };
+    },
+    {
+      auth: true,
+      schema: NoteSchema,
+    }
+  );
+  ```
+
+### Route Handlers
+
+- Use `enhanceRouteHandler` to wrap route handlers
+- Use Route Handlers when data fetching from Client Components
+
+## Database & Security
+
+### RLS Policies
+- Strive to create a safe, robust, secure and consistent database schema
+- Always consider the compromises you need to make and explain them so I can make an educated decision. Follow up with the considerations make and explain them.
+- Enable RLS by default and propose the required RLS policies
+- `public.accounts` are the root tables for the application
+- Implement cascading deletes when appropriate
+- Ensure strong consistency considering triggers and constraints
+- Always use Postgres schemas explicitly (e.g., `public.accounts`)
+
+## Forms Pattern
+
+### 1. Schema Definition
+```tsx
+// schema/note.schema.ts
+import { z } from 'zod';
+
+export const NoteSchema = z.object({
+  title: z.string().min(1).max(100),
+  content: z.string().min(1),
+  category: z.enum(['work', 'personal']),
+});
+```
+
+### 2. Form Component
+```tsx
+'use client';
+
+export function NoteForm() {
+  const [pending, startTransition] = useTransition();
+  const form = useForm({
+    resolver: zodResolver(NoteSchema),
+    defaultValues: { title: '', content: '', category: 'personal' }
+  });
+
+  const onSubmit = (data: z.infer<typeof NoteSchema>) => {
+    startTransition(async () => {
+      try {
+        await createNoteAction(data);
+        form.reset();
+      } catch (error) {
+        // Handle error
+      }
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <FormField name="title" render={({ field }) => (
+        <FormItem>
+          <FormLabel>Title</FormLabel>
+          <FormControl>
+            <Input {...field} />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      )} />
+      {/* Other fields */}
+    </Form>
+  );
+}
+```
+
+## Error Handling
+
+- Consider logging asynchronous requests in server code using the `@kit/shared/logger`
+- Handle promises and async/await gracefully
+- Consider the unhappy path and handle errors appropriately
+
+### Structured Logging
+```tsx
+const ctx = {
+  name: 'create-note',
+  userId: user.id,
+  noteId: note.id
+};
+
+logger.info(ctx, 'Creating new note...');
+
+try {
+  await createNote();
+  logger.info(ctx, 'Note created successfully');
+} catch (error) {
+  logger.error(ctx, 'Failed to create note', { error });
+  throw error;
+}
+```
+
+## Context Management
+
+In client components, we can use the `useUserWorkspace` hook to access the user's workspace data.
+
+### Personal Account
+```tsx
+'use client';
+
+function PersonalDashboard() {
+  const { workspace, user } = useUserWorkspace();
+  if (!workspace) return null;
+  
+  return (
+    <div>
+      <h1>Welcome, {user.email}</h1>
+      <SubscriptionStatus status={workspace.subscription_status} />
+    </div>
+  );
+}
+```
+
+### Team Account
+In client components, we can use the `useTeamAccountWorkspace` hook to access the team account's workspace data. It only works under the `/home/[account]` route.
+
+```tsx
+'use client';
+
+function TeamDashboard() {
+  const { account, user } = useTeamAccountWorkspace();
+  
+  return (
+    <div>
+      <h1>{account.name}</h1>
+      <RoleDisplay role={account.role} />
+      <PermissionsList permissions={account.permissions} />
+    </div>
+  );
+}
+```
+
+## UI Components
+
+- Reusable UI components are defined in the "packages/ui" package named "@kit/ui".
+- By exporting the component from the "exports" field, we can import it using the "@kit/ui/{component-name}" format.
+
+## Creating Pages
+
+When creating new pages ensure:
+- The page is exported using `withI18n(Page)` to enable i18n.
+- The page has the required and correct metadata using the `metadata` or `generateMetadata` function.
+- Don't worry about authentication, it's handled in the middleware.

README.md

@@ -1,104 +1,46 @@
-<a href="https://demo-nextjs-with-supabase.vercel.app/">
-  <img alt="Next.js and Supabase Starter Kit - the fastest way to build apps with Next.js and Supabase" src="https://demo-nextjs-with-supabase.vercel.app/opengraph-image.png">
-  <h1 align="center">Next.js and Supabase Starter Kit</h1>
-</a>
 
-<p align="center">
- The fastest way to build apps with Next.js and Supabase
-</p>
+## Prerequisites 
+    "node": ">=20.0.0",
+    "pnpm": ">=9.0.0"
 
-<p align="center">
-  <a href="#features"><strong>Features</strong></a> ·
-  <a href="#demo"><strong>Demo</strong></a> ·
-  <a href="#deploy-to-vercel"><strong>Deploy to Vercel</strong></a> ·
-  <a href="#clone-and-run-locally"><strong>Clone and run locally</strong></a> ·
-  <a href="#feedback-and-issues"><strong>Feedback and issues</strong></a>
-  <a href="#more-supabase-examples"><strong>More Examples</strong></a>
-</p>
-<br/>
+## Project structure
+```
+/ app - pages
+/ components - custom components, helper components that not provided by any package. Place to extend an redefine components from packages
+/ config - bunch of configs, that are provided by starter kit. 
+/ content - (temporary?) - to be removed when cleaned all dependencies
+/ fonts - (temporary) - contains fonts, should be relocated to another place (maybe public)
+/ lib - diffirent libs, services, utils
+    - fonts.ts - project fonts setup, which becomes available as a global css variable 
+    / i18n - translations/localization setup
+/ public - public assets
+    / locales - translations under a corresponding local - at a specific namespace
+/ styles - all styles of the projects, including tailwind variable setup
+    - global.css - Global styles for the entire application, a place where should apply variables to global selectors
+    - shadcn-ui.css - A place where all global variables are defined for color, sizes and etc, that are used in theme.css. Variables defined here and in theme.css are available as tailwindcss property-class
+    - theme.css - more specific variables,  available as tailwindcss property-class
+    - makerkit.css - Makerkit-specific global styles
+    - markdoc.css - Styles for Markdoc Markdown files.
+    - 
+/ supabase - primary supabase
+/ tooling - a workspace package, used for generation packages in node_modules and provides global links for its data. The most important is typescript config
+/ utils
 
-## Features
 
-- Works across the entire [Next.js](https://nextjs.org) stack
-  - App Router
-  - Pages Router
-  - Middleware
-  - Client
-  - Server
-  - It just works!
-- supabase-ssr. A package to configure Supabase Auth to use cookies
-- Styling with [Tailwind CSS](https://tailwindcss.com)
-- Components with [shadcn/ui](https://ui.shadcn.com/)
-- Optional deployment with [Supabase Vercel Integration and Vercel deploy](#deploy-your-own)
-  - Environment variables automatically assigned to Vercel project
+```
 
-## Demo
 
-You can view a fully working demo at [demo-nextjs-with-supabase.vercel.app](https://demo-nextjs-with-supabase.vercel.app/).
+## Migration from old structure
+```bash 
+pnpm clean
+pnpm i
+```
 
-## Deploy to Vercel
+## Adding new dependency
 
-Vercel deployment will guide you through creating a Supabase account and project.
+```bash 
+pnpm add <pacakge-name> -w
+```
 
-After installation of the Supabase integration, all relevant environment variables will be assigned to the project so the deployment is fully functioning.
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&project-name=nextjs-with-supabase&repository-name=nextjs-with-supabase&demo-title=nextjs-with-supabase&demo-description=This+starter+configures+Supabase+Auth+to+use+cookies%2C+making+the+user%27s+session+available+throughout+the+entire+Next.js+app+-+Client+Components%2C+Server+Components%2C+Route+Handlers%2C+Server+Actions+and+Middleware.&demo-url=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2F&external-id=https%3A%2F%2Fgithub.com%2Fvercel%2Fnext.js%2Ftree%2Fcanary%2Fexamples%2Fwith-supabase&demo-image=https%3A%2F%2Fdemo-nextjs-with-supabase.vercel.app%2Fopengraph-image.png)
-
-The above will also clone the Starter kit to your GitHub, you can clone that locally and develop locally.
-
-If you wish to just develop locally and not deploy to Vercel, [follow the steps below](#clone-and-run-locally).
-
-## Clone and run locally
-
-1. You'll first need a Supabase project which can be made [via the Supabase dashboard](https://database.new)
-
-2. Create a Next.js app using the Supabase Starter template npx command
-
-   ```bash
-   npx create-next-app --example with-supabase with-supabase-app
-   ```
-
-   ```bash
-   yarn create next-app --example with-supabase with-supabase-app
-   ```
-
-   ```bash
-   pnpm create next-app --example with-supabase with-supabase-app
-   ```
-
-3. Use `cd` to change into the app's directory
-
-   ```bash
-   cd with-supabase-app
-   ```
-
-4. Rename `.env.example` to `.env.local` and update the following:
-
-   ```
-   NEXT_PUBLIC_SUPABASE_URL=[INSERT SUPABASE PROJECT URL]
-   NEXT_PUBLIC_SUPABASE_ANON_KEY=[INSERT SUPABASE PROJECT API ANON KEY]
-   ```
-
-   Both `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY` can be found in [your Supabase project's API settings](https://app.supabase.com/project/_/settings/api)
-
-5. You can now run the Next.js local development server:
-
-   ```bash
-   npm run dev
-   ```
-
-   The starter kit should now be running on [localhost:3000](http://localhost:3000/).
-
-6. This template comes with the default shadcn/ui style initialized. If you instead want other ui.shadcn styles, delete `components.json` and [re-install shadcn/ui](https://ui.shadcn.com/docs/installation/next)
-
-> Check out [the docs for Local Development](https://supabase.com/docs/guides/getting-started/local-development) to also run Supabase locally.
-
-## Feedback and issues
-
-Please file feedback and issues over on the [Supabase GitHub org](https://github.com/supabase/supabase/issues/new/choose).
-
-## More Supabase examples
-
-- [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments)
-- [Cookie-based Auth and the Next.js 13 App Router (free course)](https://youtube.com/playlist?list=PL5S4mPUpp4OtMhpnp93EFSo42iQ40XjbF)
-- [Supabase Auth and the Next.js App Router](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs)
+## Supabase
+TODO

app/(marketing)/(legal)/cookie-policy/page.tsx

@@ -0,0 +1,30 @@
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:cookiePolicy'),
+  };
+}
+
+async function CookiePolicyPage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing:cookiePolicy`)}
+        subtitle={t(`marketing:cookiePolicyDescription`)}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(CookiePolicyPage);

app/(marketing)/(legal)/privacy-policy/page.tsx

@@ -0,0 +1,30 @@
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:privacyPolicy'),
+  };
+}
+
+async function PrivacyPolicyPage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t('marketing:privacyPolicy')}
+        subtitle={t('marketing:privacyPolicyDescription')}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(PrivacyPolicyPage);

app/(marketing)/(legal)/terms-of-service/page.tsx

@@ -0,0 +1,30 @@
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:termsOfService'),
+  };
+}
+
+async function TermsOfServicePage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing:termsOfService`)}
+        subtitle={t(`marketing:termsOfServiceDescription`)}
+      />
+
+      <div className={'container mx-auto py-8'}>
+        <div>Your terms of service content here</div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(TermsOfServicePage);

app/(marketing)/_components/site-footer.tsx

@@ -0,0 +1,58 @@
+import { Footer } from '@kit/ui/marketing';
+import { Trans } from '@kit/ui/trans';
+
+import { AppLogo } from '~/components/app-logo';
+import appConfig from '~/config/app.config';
+
+export function SiteFooter() {
+  return (
+    <Footer
+      logo={<AppLogo className="w-[85px] md:w-[95px]" />}
+      description={<Trans i18nKey="marketing:footerDescription" />}
+      copyright={
+        <Trans
+          i18nKey="marketing:copyright"
+          values={{
+            product: appConfig.name,
+            year: new Date().getFullYear(),
+          }}
+        />
+      }
+      sections={[
+        {
+          heading: <Trans i18nKey="marketing:about" />,
+          links: [
+            { href: '/blog', label: <Trans i18nKey="marketing:blog" /> },
+            { href: '/contact', label: <Trans i18nKey="marketing:contact" /> },
+          ],
+        },
+        {
+          heading: <Trans i18nKey="marketing:product" />,
+          links: [
+            {
+              href: '/docs',
+              label: <Trans i18nKey="marketing:documentation" />,
+            },
+          ],
+        },
+        {
+          heading: <Trans i18nKey="marketing:legal" />,
+          links: [
+            {
+              href: '/terms-of-service',
+              label: <Trans i18nKey="marketing:termsOfService" />,
+            },
+            {
+              href: '/privacy-policy',
+              label: <Trans i18nKey="marketing:privacyPolicy" />,
+            },
+            {
+              href: '/cookie-policy',
+              label: <Trans i18nKey="marketing:cookiePolicy" />,
+            },
+          ],
+        },
+      ]}
+    />
+  );
+}

app/(marketing)/_components/site-header-account-section.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+
+import { useQuery } from '@tanstack/react-query';
+
+import { PersonalAccountDropdown } from '@kit/accounts/personal-account-dropdown';
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import { useSupabase } from '@kit/supabase/hooks/use-supabase';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
+const ModeToggle = dynamic(() =>
+  import('@kit/ui/mode-toggle').then((mod) => ({
+    default: mod.ModeToggle,
+  })),
+);
+
+const paths = {
+  home: pathsConfig.app.home,
+};
+
+const features = {
+  enableThemeToggle: featuresFlagConfig.enableThemeToggle,
+};
+
+export function SiteHeaderAccountSection() {
+  const session = useSession();
+  const signOut = useSignOut();
+
+  if (session.data) {
+    return (
+      <PersonalAccountDropdown
+        showProfileName={false}
+        paths={paths}
+        features={features}
+        user={session.data.user}
+        signOutRequested={() => signOut.mutateAsync()}
+      />
+    );
+  }
+
+  return <AuthButtons />;
+}
+
+function AuthButtons() {
+  return (
+    <div className={'animate-in fade-in flex gap-x-2.5 duration-500'}>
+      <div className={'hidden md:flex'}>
+        <If condition={features.enableThemeToggle}>
+          <ModeToggle />
+        </If>
+      </div>
+
+      <div className={'flex gap-x-2.5'}>
+        <Button className={'hidden md:block'} asChild variant={'ghost'}>
+          <Link href={pathsConfig.auth.signIn}>
+            <Trans i18nKey={'auth:signIn'} />
+          </Link>
+        </Button>
+
+        <Button asChild className="text-xs md:text-sm" variant={'default'}>
+          <Link href={pathsConfig.auth.signUp}>
+            <Trans i18nKey={'auth:signUp'} />
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+function useSession() {
+  const client = useSupabase();
+
+  return useQuery({
+    queryKey: ['session'],
+    queryFn: async () => {
+      const { data } = await client.auth.getSession();
+
+      return data.session;
+    },
+  });
+}

app/(marketing)/_components/site-header.tsx

@@ -0,0 +1,16 @@
+import { Header } from '@kit/ui/marketing';
+
+import { AppLogo } from '~/components/app-logo';
+
+import { SiteHeaderAccountSection } from './site-header-account-section';
+import { SiteNavigation } from './site-navigation';
+
+export function SiteHeader() {
+  return (
+    <Header
+      logo={<AppLogo />}
+      navigation={<SiteNavigation />}
+      actions={<SiteHeaderAccountSection />}
+    />
+  );
+}

app/(marketing)/_components/site-navigation-item.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { NavigationMenuItem } from '@kit/ui/navigation-menu';
+import { cn, isRouteActive } from '@kit/ui/utils';
+
+const getClassName = (path: string, currentPathName: string) => {
+  const isActive = isRouteActive(path, currentPathName);
+
+  return cn(
+    `inline-flex w-max text-sm font-medium transition-colors duration-300`,
+    {
+      'dark:text-gray-300 dark:hover:text-white': !isActive,
+      'text-current dark:text-white': isActive,
+    },
+  );
+};
+
+export function SiteNavigationItem({
+  path,
+  children,
+}: React.PropsWithChildren<{
+  path: string;
+}>) {
+  const currentPathName = usePathname();
+  const className = getClassName(path, currentPathName);
+
+  return (
+    <NavigationMenuItem key={path}>
+      <Link className={className} href={path} as={path} prefetch={true}>
+        {children}
+      </Link>
+    </NavigationMenuItem>
+  );
+}

app/(marketing)/_components/site-navigation.tsx

@@ -0,0 +1,87 @@
+import Link from 'next/link';
+
+import { Menu } from 'lucide-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { NavigationMenu, NavigationMenuList } from '@kit/ui/navigation-menu';
+import { Trans } from '@kit/ui/trans';
+
+import { SiteNavigationItem } from './site-navigation-item';
+
+const links = {
+  Blog: {
+    label: 'marketing:blog',
+    path: '/blog',
+  },
+  Docs: {
+    label: 'marketing:documentation',
+    path: '/docs',
+  },
+  Pricing: {
+    label: 'marketing:pricing',
+    path: '/pricing',
+  },
+  FAQ: {
+    label: 'marketing:faq',
+    path: '/faq',
+  },
+  Contact: {
+    label: 'marketing:contact',
+    path: '/contact',
+  },
+};
+
+export function SiteNavigation() {
+  const NavItems = Object.values(links).map((item) => {
+    return (
+      <SiteNavigationItem key={item.path} path={item.path}>
+        <Trans i18nKey={item.label} />
+      </SiteNavigationItem>
+    );
+  });
+
+  return (
+    <>
+      <div className={'hidden items-center justify-center md:flex'}>
+        <NavigationMenu>
+          <NavigationMenuList className={'gap-x-2.5'}>
+            {NavItems}
+          </NavigationMenuList>
+        </NavigationMenu>
+      </div>
+
+      <div className={'flex justify-start sm:items-center md:hidden'}>
+        <MobileDropdown />
+      </div>
+    </>
+  );
+}
+
+function MobileDropdown() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger aria-label={'Open Menu'}>
+        <Menu className={'h-8 w-8'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent className={'w-full'}>
+        {Object.values(links).map((item) => {
+          const className = 'flex w-full h-full items-center';
+
+          return (
+            <DropdownMenuItem key={item.path} asChild>
+              <Link className={className} href={item.path}>
+                <Trans i18nKey={item.label} />
+              </Link>
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/(marketing)/_components/site-page-header.tsx

@@ -0,0 +1,37 @@
+import { cn } from '@kit/ui/utils';
+
+export function SitePageHeader({
+  title,
+  subtitle,
+  container = true,
+  className = '',
+}: {
+  title: string;
+  subtitle: string;
+  container?: boolean;
+  className?: string;
+}) {
+  const containerClass = container ? 'container' : '';
+
+  return (
+    <div className={cn('border-b py-8 xl:py-10 2xl:py-12', className)}>
+      <div className={cn('flex flex-col gap-y-3 lg:gap-y-4', containerClass)}>
+        <h1
+          className={
+            'font-heading text-3xl font-medium tracking-tighter xl:text-5xl dark:text-white'
+          }
+        >
+          {title}
+        </h1>
+
+        <h2
+          className={
+            'text-muted-foreground text-lg tracking-tight 2xl:text-2xl'
+          }
+        >
+          {subtitle}
+        </h2>
+      </div>
+    </div>
+  );
+}

app/(marketing)/blog/[slug]/page.tsx

@@ -0,0 +1,78 @@
+import { cache } from 'react';
+
+import type { Metadata } from 'next';
+
+import { notFound } from 'next/navigation';
+
+import { createCmsClient } from '@kit/cms';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { Post } from '../../blog/_components/post';
+
+interface BlogPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+const getPostBySlug = cache(postLoader);
+
+async function postLoader(slug: string) {
+  const client = await createCmsClient();
+
+  return client.getContentItemBySlug({ slug, collection: 'posts' });
+}
+
+export async function generateMetadata({
+  params,
+}: BlogPageProps): Promise<Metadata> {
+  const slug = (await params).slug;
+  const post = await getPostBySlug(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  const { title, publishedAt, description, image } = post;
+
+  return Promise.resolve({
+    title,
+    description,
+    openGraph: {
+      title,
+      description,
+      type: 'article',
+      publishedTime: publishedAt,
+      url: post.url,
+      images: image
+        ? [
+            {
+              url: image,
+            },
+          ]
+        : [],
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title,
+      description,
+      images: image ? [image] : [],
+    },
+  });
+}
+
+async function BlogPost({ params }: BlogPageProps) {
+  const slug = (await params).slug;
+  const post = await getPostBySlug(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <div className={'container sm:max-w-none sm:p-0'}>
+      <Post post={post} content={post.content} />
+    </div>
+  );
+}
+
+export default withI18n(BlogPost);

app/(marketing)/blog/_components/blog-pagination.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+export function BlogPagination(props: {
+  currentPage: number;
+  canGoToNextPage: boolean;
+  canGoToPreviousPage: boolean;
+}) {
+  const navigate = useGoToPage();
+
+  return (
+    <div className={'flex items-center space-x-2'}>
+      <If condition={props.canGoToPreviousPage}>
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            navigate(props.currentPage - 1);
+          }}
+        >
+          <ArrowLeft className={'mr-2 h-4'} />
+          <Trans i18nKey={'marketing:blogPaginationPrevious'} />
+        </Button>
+      </If>
+
+      <If condition={props.canGoToNextPage}>
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            navigate(props.currentPage + 1);
+          }}
+        >
+          <Trans i18nKey={'marketing:blogPaginationNext'} />
+          <ArrowRight className={'ml-2 h-4'} />
+        </Button>
+      </If>
+    </div>
+  );
+}
+
+function useGoToPage() {
+  const router = useRouter();
+  const path = usePathname();
+
+  return (page: number) => {
+    const searchParams = new URLSearchParams({
+      page: page.toString(),
+    });
+
+    router.push(path + '?' + searchParams.toString());
+  };
+}

app/(marketing)/blog/_components/cover-image.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image';
+
+import { cn } from '@kit/ui/utils';
+
+type Props = {
+  title: string;
+  src: string;
+  preloadImage?: boolean;
+  className?: string;
+};
+
+export function CoverImage({ title, src, preloadImage, className }: Props) {
+  return (
+    <Image
+      className={cn(
+        'block rounded-xl object-cover duration-250' +
+          ' transition-all hover:opacity-90',
+        {
+          className,
+        },
+      )}
+      src={src}
+      priority={preloadImage}
+      alt={`Cover Image for ${title}`}
+      fill
+    />
+  );
+}

app/(marketing)/blog/_components/date-formatter.tsx

@@ -0,0 +1,11 @@
+import { format, parseISO } from 'date-fns';
+
+type Props = {
+  dateString: string;
+};
+
+export const DateFormatter = ({ dateString }: Props) => {
+  const date = parseISO(dateString);
+
+  return <time dateTime={dateString}>{format(date, 'PP')}</time>;
+};

app/(marketing)/blog/_components/draft-post-badge.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function DraftPostBadge({ children }: React.PropsWithChildren) {
+  return (
+    <span className="dark:text-dark-800 rounded-md bg-yellow-200 px-4 py-2 font-semibold">
+      {children}
+    </span>
+  );
+}

app/(marketing)/blog/_components/post-header.tsx

@@ -0,0 +1,50 @@
+import { Cms } from '@kit/cms';
+import { If } from '@kit/ui/if';
+import { cn } from '@kit/ui/utils';
+
+import { CoverImage } from './cover-image';
+import { DateFormatter } from './date-formatter';
+
+export function PostHeader({ post }: { post: Cms.ContentItem }) {
+  const { title, publishedAt, description, image } = post;
+
+  return (
+    <div className={'flex flex-1 flex-col'}>
+      <div className={cn('border-b py-8')}>
+        <div className={'mx-auto flex max-w-3xl flex-col space-y-4'}>
+          <h1
+            className={
+              'font-heading text-3xl font-semibold tracking-tighter xl:text-5xl dark:text-white'
+            }
+          >
+            {title}
+          </h1>
+
+          <div>
+            <span className={'text-muted-foreground'}>
+              <DateFormatter dateString={publishedAt} />
+            </span>
+          </div>
+
+          <h2
+            className={'text-muted-foreground text-base xl:text-lg'}
+            dangerouslySetInnerHTML={{ __html: description ?? '' }}
+          ></h2>
+        </div>
+      </div>
+
+      <If condition={image}>
+        {(imageUrl) => (
+          <div className="relative mx-auto mt-8 flex h-[378px] w-full max-w-3xl justify-center">
+            <CoverImage
+              preloadImage
+              className="rounded-md"
+              title={title}
+              src={imageUrl}
+            />
+          </div>
+        )}
+      </If>
+    </div>
+  );
+}

app/(marketing)/blog/_components/post-preview.tsx

@@ -0,0 +1,65 @@
+import Link from 'next/link';
+
+import { Cms } from '@kit/cms';
+import { If } from '@kit/ui/if';
+
+import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
+import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
+
+type Props = {
+  post: Cms.ContentItem;
+  preloadImage?: boolean;
+  imageHeight?: string | number;
+};
+
+const DEFAULT_IMAGE_HEIGHT = 250;
+
+export function PostPreview({
+  post,
+  preloadImage,
+  imageHeight,
+}: React.PropsWithChildren<Props>) {
+  const { title, image, publishedAt, description } = post;
+  const height = imageHeight ?? DEFAULT_IMAGE_HEIGHT;
+
+  const slug = `/blog/${post.slug}`;
+
+  return (
+    <div className="transition-shadow-sm flex flex-col gap-y-4 rounded-lg duration-500">
+      <If condition={image}>
+        {(imageUrl) => (
+          <div className="relative mb-2 w-full" style={{ height }}>
+            <Link href={slug}>
+              <CoverImage
+                preloadImage={preloadImage}
+                title={title}
+                src={imageUrl}
+              />
+            </Link>
+          </div>
+        )}
+      </If>
+
+      <div className={'flex flex-col space-y-4 px-1'}>
+        <div className={'flex flex-col space-y-2'}>
+          <h2 className="text-xl leading-snug font-semibold tracking-tight">
+            <Link href={slug} className="hover:underline">
+              {title}
+            </Link>
+          </h2>
+
+          <div className="flex flex-row items-center gap-x-3 text-sm">
+            <div className="text-muted-foreground">
+              <DateFormatter dateString={publishedAt} />
+            </div>
+          </div>
+        </div>
+
+        <p
+          className="text-muted-foreground mb-4 text-sm leading-relaxed"
+          dangerouslySetInnerHTML={{ __html: description ?? '' }}
+        />
+      </div>
+    </div>
+  );
+}

app/(marketing)/blog/_components/post.tsx

@@ -0,0 +1,24 @@
+import type { Cms } from '@kit/cms';
+import { ContentRenderer } from '@kit/cms';
+
+import { PostHeader } from './post-header';
+
+export function Post({
+  post,
+  content,
+}: {
+  post: Cms.ContentItem;
+  content: unknown;
+}) {
+  return (
+    <div>
+      <PostHeader post={post} />
+
+      <div className={'mx-auto flex max-w-3xl flex-col space-y-6 py-8'}>
+        <article className="markdoc">
+          <ContentRenderer content={content} />
+        </article>
+      </div>
+    </div>
+  );
+}

app/(marketing)/blog/page.tsx

@@ -0,0 +1,105 @@
+import { cache } from 'react';
+
+import { createCmsClient } from '@kit/cms';
+import { getLogger } from '@kit/shared/logger';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { SitePageHeader } from '../_components/site-page-header';
+import { BlogPagination } from './_components/blog-pagination';
+import { PostPreview } from './_components/post-preview';
+
+interface BlogPageProps {
+  searchParams: Promise<{ page?: string }>;
+}
+
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:blog'),
+    description: t('marketing:blogSubtitle'),
+  };
+};
+
+const getContentItems = cache(
+  async (language: string | undefined, limit: number, offset: number) => {
+    const client = await createCmsClient();
+    const logger = await getLogger();
+
+    try {
+      return await client.getContentItems({
+        collection: 'posts',
+        limit,
+        offset,
+        language,
+        content: false,
+        sortBy: 'publishedAt',
+        sortDirection: 'desc',
+      });
+    } catch (error) {
+      logger.error({ error }, 'Failed to load blog posts');
+
+      return { total: 0, items: [] };
+    }
+  },
+);
+
+async function BlogPage(props: BlogPageProps) {
+  const { t, resolvedLanguage: language } = await createI18nServerInstance();
+  const searchParams = await props.searchParams;
+
+  const page = searchParams.page ? parseInt(searchParams.page) : 0;
+  const limit = 10;
+  const offset = page * limit;
+
+  const { total, items: posts } = await getContentItems(
+    language,
+    limit,
+    offset,
+  );
+
+  return (
+    <>
+      <SitePageHeader
+        title={t('marketing:blog')}
+        subtitle={t('marketing:blogSubtitle')}
+      />
+
+      <div className={'container flex flex-col space-y-6 py-12'}>
+        <If
+          condition={posts.length > 0}
+          fallback={<Trans i18nKey="marketing:noPosts" />}
+        >
+          <PostsGridList>
+            {posts.map((post, idx) => {
+              return <PostPreview key={idx} post={post} />;
+            })}
+          </PostsGridList>
+
+          <div>
+            <BlogPagination
+              currentPage={page}
+              canGoToNextPage={offset + limit < total}
+              canGoToPreviousPage={page > 0}
+            />
+          </div>
+        </If>
+      </div>
+    </>
+  );
+}
+
+export default withI18n(BlogPage);
+
+function PostsGridList({ children }: React.PropsWithChildren) {
+  return (
+    <div className="grid grid-cols-1 gap-y-8 md:grid-cols-2 md:gap-x-8 md:gap-y-12 lg:grid-cols-3 lg:gap-x-12">
+      {children}
+    </div>
+  );
+}

app/(marketing)/contact/_components/contact-form.tsx

@@ -0,0 +1,161 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@kit/ui/form';
+import { Input } from '@kit/ui/input';
+import { Textarea } from '@kit/ui/textarea';
+import { Trans } from '@kit/ui/trans';
+
+import { ContactEmailSchema } from '~/(marketing)/contact/_lib/contact-email.schema';
+import { sendContactEmail } from '~/(marketing)/contact/_lib/server/server-actions';
+
+export function ContactForm() {
+  const [pending, startTransition] = useTransition();
+
+  const [state, setState] = useState({
+    success: false,
+    error: false,
+  });
+
+  const form = useForm({
+    resolver: zodResolver(ContactEmailSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      message: '',
+    },
+  });
+
+  if (state.success) {
+    return <SuccessAlert />;
+  }
+
+  if (state.error) {
+    return <ErrorAlert />;
+  }
+
+  return (
+    <Form {...form}>
+      <form
+        className={'flex flex-col space-y-4'}
+        onSubmit={form.handleSubmit((data) => {
+          startTransition(async () => {
+            try {
+              await sendContactEmail(data);
+
+              setState({ success: true, error: false });
+            } catch {
+              setState({ error: true, success: false });
+            }
+          });
+        })}
+      >
+        <FormField
+          name={'name'}
+          render={({ field }) => {
+            return (
+              <FormItem>
+                <FormLabel>
+                  <Trans i18nKey={'marketing:contactName'} />
+                </FormLabel>
+
+                <FormControl>
+                  <Input maxLength={200} {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            );
+          }}
+        />
+
+        <FormField
+          name={'email'}
+          render={({ field }) => {
+            return (
+              <FormItem>
+                <FormLabel>
+                  <Trans i18nKey={'marketing:contactEmail'} />
+                </FormLabel>
+
+                <FormControl>
+                  <Input type={'email'} {...field} />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            );
+          }}
+        />
+
+        <FormField
+          name={'message'}
+          render={({ field }) => {
+            return (
+              <FormItem>
+                <FormLabel>
+                  <Trans i18nKey={'marketing:contactMessage'} />
+                </FormLabel>
+
+                <FormControl>
+                  <Textarea
+                    className={'min-h-36'}
+                    maxLength={5000}
+                    {...field}
+                  />
+                </FormControl>
+
+                <FormMessage />
+              </FormItem>
+            );
+          }}
+        />
+
+        <Button disabled={pending} type={'submit'}>
+          <Trans i18nKey={'marketing:sendMessage'} />
+        </Button>
+      </form>
+    </Form>
+  );
+}
+
+function SuccessAlert() {
+  return (
+    <Alert variant={'success'}>
+      <AlertTitle>
+        <Trans i18nKey={'marketing:contactSuccess'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'marketing:contactSuccessDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}
+
+function ErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <AlertTitle>
+        <Trans i18nKey={'marketing:contactError'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'marketing:contactErrorDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

app/(marketing)/contact/_lib/contact-email.schema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+export const ContactEmailSchema = z.object({
+  name: z.string().min(1).max(200),
+  email: z.string().email(),
+  message: z.string().min(1).max(5000),
+});

app/(marketing)/contact/_lib/server/server-actions.ts

@@ -0,0 +1,51 @@
+'use server';
+
+import { z } from 'zod';
+
+import { getMailer } from '@kit/mailers';
+import { enhanceAction } from '@kit/next/actions';
+
+import { ContactEmailSchema } from '../contact-email.schema';
+
+const contactEmail = z
+  .string({
+    description: `The email where you want to receive the contact form submissions.`,
+    required_error:
+      'Contact email is required. Please use the environment variable CONTACT_EMAIL.',
+  })
+  .parse(process.env.CONTACT_EMAIL);
+
+const emailFrom = z
+  .string({
+    description: `The email sending address.`,
+    required_error:
+      'Sender email is required. Please use the environment variable EMAIL_SENDER.',
+  })
+  .parse(process.env.EMAIL_SENDER);
+
+export const sendContactEmail = enhanceAction(
+  async (data) => {
+    const mailer = await getMailer();
+
+    await mailer.sendEmail({
+      to: contactEmail,
+      from: emailFrom,
+      subject: 'Contact Form Submission',
+      html: `
+        <p>
+          You have received a new contact form submission.
+        </p>
+
+        <p>Name: ${data.name}</p>
+        <p>Email: ${data.email}</p>
+        <p>Message: ${data.message}</p>
+      `,
+    });
+
+    return {};
+  },
+  {
+    schema: ContactEmailSchema,
+    auth: false,
+  },
+);

app/(marketing)/contact/page.tsx

@@ -0,0 +1,54 @@
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { ContactForm } from '~/(marketing)/contact/_components/contact-form';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export async function generateMetadata() {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:contact'),
+  };
+}
+
+async function ContactPage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div>
+      <SitePageHeader
+        title={t(`marketing:contact`)}
+        subtitle={t(`marketing:contactDescription`)}
+      />
+
+      <div className={'container mx-auto'}>
+        <div
+          className={'flex flex-1 flex-col items-center justify-center py-12'}
+        >
+          <div
+            className={
+              'flex w-full max-w-lg flex-col space-y-4 rounded-lg border p-8'
+            }
+          >
+            <div>
+              <Heading level={3}>
+                <Trans i18nKey={'marketing:contactHeading'} />
+              </Heading>
+
+              <p className={'text-muted-foreground'}>
+                <Trans i18nKey={'marketing:contactSubheading'} />
+              </p>
+            </div>
+
+            <ContactForm />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(ContactPage);

app/(marketing)/docs/[...slug]/page.tsx

@@ -0,0 +1,90 @@
+import { cache } from 'react';
+
+import { notFound } from 'next/navigation';
+
+import { ContentRenderer, createCmsClient } from '@kit/cms';
+import { If } from '@kit/ui/if';
+import { Separator } from '@kit/ui/separator';
+import { cn } from '@kit/ui/utils';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { DocsCards } from '../_components/docs-cards';
+import { DocsTableOfContents } from '../_components/docs-table-of-contents';
+import { extractHeadingsFromJSX } from '../_lib/utils';
+
+const getPageBySlug = cache(pageLoader);
+
+interface DocumentationPageProps {
+  params: Promise<{ slug: string[] }>;
+}
+
+async function pageLoader(slug: string) {
+  const client = await createCmsClient();
+
+  return client.getContentItemBySlug({ slug, collection: 'documentation' });
+}
+
+export const generateMetadata = async ({ params }: DocumentationPageProps) => {
+  const slug = (await params).slug.join('/');
+  const page = await getPageBySlug(slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  const { title, description } = page;
+
+  return {
+    title,
+    description,
+  };
+};
+
+async function DocumentationPage({ params }: DocumentationPageProps) {
+  const slug = (await params).slug.join('/');
+  const page = await getPageBySlug(slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  const description = page?.description ?? '';
+
+  const headings = extractHeadingsFromJSX(
+    page.content as {
+      props: { children: React.ReactElement[] };
+    },
+  );
+
+  return (
+    <div className={'flex flex-1 flex-col gap-y-4 overflow-y-hidden py-5'}>
+      <div className={'flex overflow-y-hidden'}>
+        <article className={cn('gap-y-12 overflow-y-auto px-6')}>
+          <section className={'flex flex-col gap-y-2.5'}>
+            <h1 className={'text-foreground text-3xl font-semibold'}>
+              {page.title}
+            </h1>
+
+            <h2 className={'text-muted-foreground text-lg'}>{description}</h2>
+          </section>
+
+          <div className={'markdoc'}>
+            <ContentRenderer content={page.content} />
+          </div>
+        </article>
+
+        <DocsTableOfContents data={headings} />
+      </div>
+
+      <If condition={page.children.length > 0}>
+        <Separator />
+
+        <DocsCards cards={page.children ?? []} />
+      </If>
+    </div>
+  );
+}
+
+export default withI18n(DocumentationPage);

app/(marketing)/docs/_components/docs-card.tsx

@@ -0,0 +1,53 @@
+import Link from 'next/link';
+
+import { ChevronRight } from 'lucide-react';
+
+import { Trans } from '@kit/ui/trans';
+
+export function DocsCard({
+  title,
+  subtitle,
+  children,
+  link,
+}: React.PropsWithChildren<{
+  title: string;
+  subtitle?: string | null;
+  link: { url: string; label?: string };
+}>) {
+  return (
+    <div className="flex flex-col">
+      <div
+        className={`bg-background flex grow flex-col gap-y-2 border p-6 ${link ? 'rounded-t-lg border-b-0' : 'rounded-lg'}`}
+      >
+        <h3 className="mt-0 text-lg font-semibold hover:underline dark:text-white">
+          <Link href={link.url}>{title}</Link>
+        </h3>
+
+        {subtitle && (
+          <div className="text-muted-foreground text-sm">
+            <p dangerouslySetInnerHTML={{ __html: subtitle }}></p>
+          </div>
+        )}
+
+        {children && <div className="text-sm">{children}</div>}
+      </div>
+
+      {link && (
+        <div className="bg-muted/50 rounded-b-lg border p-6 py-4">
+          <Link
+            className={
+              'flex items-center space-x-2 text-sm font-medium hover:underline'
+            }
+            href={link.url}
+          >
+            <span>
+              {link.label ?? <Trans i18nKey={'marketing:readMore'} />}
+            </span>
+
+            <ChevronRight className={'h-4'} />
+          </Link>
+        </div>
+      )}
+    </div>
+  );
+}

app/(marketing)/docs/_components/docs-cards.tsx

@@ -0,0 +1,24 @@
+import { Cms } from '@kit/cms';
+
+import { DocsCard } from './docs-card';
+
+export function DocsCards({ cards }: { cards: Cms.ContentItem[] }) {
+  const cardsSortedByOrder = [...cards].sort((a, b) => a.order - b.order);
+
+  return (
+    <div className={'grid grid-cols-1 gap-6 lg:grid-cols-2'}>
+      {cardsSortedByOrder.map((item) => {
+        return (
+          <DocsCard
+            key={item.title}
+            title={item.title}
+            subtitle={item.description}
+            link={{
+              url: `/docs/${item.slug}`,
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+}

app/(marketing)/docs/_components/docs-nav-link.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useRef } from 'react';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { SidebarMenuButton, SidebarMenuItem } from '@kit/ui/shadcn-sidebar';
+import { cn, isRouteActive } from '@kit/ui/utils';
+
+export function DocsNavLink({
+  label,
+  url,
+  children,
+}: React.PropsWithChildren<{ label: string; url: string }>) {
+  const currentPath = usePathname();
+  const ref = useRef<HTMLElement>(null);
+  const isCurrent = isRouteActive(url, currentPath, true);
+
+  return (
+    <SidebarMenuItem>
+      <SidebarMenuButton
+        asChild
+        isActive={isCurrent}
+        className={cn('transition-background font-normal!', {
+          'text-secondary-foreground font-bold': isCurrent,
+        })}
+      >
+        <Link href={url}>
+          <span ref={ref} className="block max-w-full truncate">
+            {label}
+          </span>
+
+          {children}
+        </Link>
+      </SidebarMenuButton>
+    </SidebarMenuItem>
+  );
+}

app/(marketing)/docs/_components/docs-navigation-collapsible.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+import { Cms } from '@kit/cms';
+import { Collapsible } from '@kit/ui/collapsible';
+import { isRouteActive } from '@kit/ui/utils';
+
+export function DocsNavigationCollapsible(
+  props: React.PropsWithChildren<{
+    node: Cms.ContentItem;
+    prefix: string;
+  }>,
+) {
+  const currentPath = usePathname();
+  const prefix = props.prefix;
+
+  const isChildActive = props.node.children.some((child) =>
+    isRouteActive(prefix + '/' + child.url, currentPath, false),
+  );
+
+  return (
+    <Collapsible
+      className={'group/collapsible'}
+      defaultOpen={isChildActive ? true : !props.node.collapsed}
+    >
+      {props.children}
+    </Collapsible>
+  );
+}

app/(marketing)/docs/_components/docs-navigation.tsx

@@ -0,0 +1,143 @@
+import { ChevronDown } from 'lucide-react';
+
+import { Cms } from '@kit/cms';
+import { CollapsibleContent, CollapsibleTrigger } from '@kit/ui/collapsible';
+import {
+  Sidebar,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+} from '@kit/ui/shadcn-sidebar';
+
+import { DocsNavLink } from '~/(marketing)/docs/_components/docs-nav-link';
+import { DocsNavigationCollapsible } from '~/(marketing)/docs/_components/docs-navigation-collapsible';
+
+import { FloatingDocumentationNavigation } from './floating-docs-navigation';
+
+function Node({
+  node,
+  level,
+  prefix,
+}: {
+  node: Cms.ContentItem;
+  level: number;
+  prefix: string;
+}) {
+  const url = `${prefix}/${node.slug}`;
+  const label = node.label ? node.label : node.title;
+
+  const Container = (props: React.PropsWithChildren) => {
+    if (node.collapsible) {
+      return (
+        <DocsNavigationCollapsible node={node} prefix={prefix}>
+          {props.children}
+        </DocsNavigationCollapsible>
+      );
+    }
+
+    return props.children;
+  };
+
+  const ContentContainer = (props: React.PropsWithChildren) => {
+    if (node.collapsible) {
+      return <CollapsibleContent>{props.children}</CollapsibleContent>;
+    }
+
+    return props.children;
+  };
+
+  const Trigger = () => {
+    if (node.collapsible) {
+      return (
+        <CollapsibleTrigger asChild>
+          <SidebarMenuItem>
+            <SidebarMenuButton>
+              {label}
+              <ChevronDown className="ml-auto transition-transform group-data-[state=open]/collapsible:rotate-180" />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </CollapsibleTrigger>
+      );
+    }
+
+    return <DocsNavLink label={label} url={url} />;
+  };
+
+  return (
+    <Container>
+      <Trigger />
+
+      <ContentContainer>
+        <Tree pages={node.children ?? []} level={level + 1} prefix={prefix} />
+      </ContentContainer>
+    </Container>
+  );
+}
+
+function Tree({
+  pages,
+  level,
+  prefix,
+}: {
+  pages: Cms.ContentItem[];
+  level: number;
+  prefix: string;
+}) {
+  if (level === 0) {
+    return pages.map((treeNode, index) => (
+      <Node key={index} node={treeNode} level={level} prefix={prefix} />
+    ));
+  }
+
+  if (pages.length === 0) {
+    return null;
+  }
+
+  return (
+    <SidebarMenuSub>
+      {pages.map((treeNode, index) => (
+        <Node key={index} node={treeNode} level={level} prefix={prefix} />
+      ))}
+    </SidebarMenuSub>
+  );
+}
+
+export function DocsNavigation({
+  pages,
+  prefix = '/docs',
+}: {
+  pages: Cms.ContentItem[];
+  prefix?: string;
+}) {
+  return (
+    <>
+      <Sidebar
+        variant={'ghost'}
+        className={'sticky z-1 mt-4 max-h-full overflow-y-auto'}
+      >
+        <SidebarGroup>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <Tree pages={pages} level={0} prefix={prefix} />
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </Sidebar>
+
+      <div className={'lg:hidden'}>
+        <FloatingDocumentationNavigation>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <Tree pages={pages} level={0} prefix={prefix} />
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </FloatingDocumentationNavigation>
+      </div>
+    </>
+  );
+}

app/(marketing)/docs/_components/docs-page-link.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link';
+
+import { If } from '@kit/ui/if';
+import { cn } from '@kit/ui/utils';
+
+export function DocsPageLink({
+  page,
+  before,
+  after,
+}: React.PropsWithChildren<{
+  page: {
+    url: string;
+    title: string;
+  };
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+}>) {
+  return (
+    <Link
+      className={cn(
+        `ring-muted hover:ring-primary flex w-full items-center space-x-8 rounded-xl p-6 font-medium text-current ring-2 transition-all`,
+        {
+          'justify-start': before,
+          'justify-end self-end': after,
+        },
+      )}
+      href={page.url}
+    >
+      <If condition={before}>{(node) => <>{node}</>}</If>
+
+      <span className={'flex flex-col space-y-1.5'}>
+        <span
+          className={'text-muted-foreground text-xs font-semibold uppercase'}
+        >
+          {before ? `Previous` : ``}
+          {after ? `Next` : ``}
+        </span>
+
+        <span>{page.title}</span>
+      </span>
+
+      <If condition={after}>{(node) => <>{node}</>}</If>
+    </Link>
+  );
+}

app/(marketing)/docs/_components/docs-table-of-contents.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import Link from 'next/link';
+
+interface NavItem {
+  text: string;
+  level: number;
+  href: string;
+  children: NavItem[];
+}
+
+export function DocsTableOfContents(props: { data: NavItem[] }) {
+  const navData = props.data;
+
+  return (
+    <div className="bg-background sticky inset-y-0 hidden h-svh max-h-full min-w-[14em] border-l p-4 lg:block">
+      <ol
+        role="list"
+        className="relative text-sm text-gray-600 dark:text-gray-400"
+      >
+        {navData.map((item) => (
+          <li key={item.href} className="group/item relative mt-3 first:mt-0">
+            <a
+              href={item.href}
+              className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
+            >
+              {item.text}
+            </a>
+            {item.children && (
+              <ol role="list" className="relative mt-3 pl-4">
+                {item.children.map((child) => (
+                  <li
+                    key={child.href}
+                    className="group/subitem relative mt-3 first:mt-0"
+                  >
+                    <Link
+                      href={child.href}
+                      className="block transition-colors **:[font:inherit] hover:text-gray-950 dark:hover:text-white"
+                    >
+                      {child.text}
+                    </Link>
+                  </li>
+                ))}
+              </ol>
+            )}
+          </li>
+        ))}
+      </ol>
+    </div>
+  );
+}

app/(marketing)/docs/_components/floating-docs-navigation.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { useEffect, useMemo, useState } from 'react';
+
+import { usePathname } from 'next/navigation';
+
+import { Menu } from 'lucide-react';
+
+import { isBrowser } from '@kit/shared/utils';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+
+export function FloatingDocumentationNavigation(
+  props: React.PropsWithChildren,
+) {
+  const activePath = usePathname();
+
+  const body = useMemo(() => {
+    return isBrowser() ? document.body : null;
+  }, []);
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  const enableScrolling = (element: HTMLElement) =>
+    (element.style.overflowY = '');
+
+  const disableScrolling = (element: HTMLElement) =>
+    (element.style.overflowY = 'hidden');
+
+  // enable/disable body scrolling when the docs are toggled
+  useEffect(() => {
+    if (!body) {
+      return;
+    }
+
+    if (isVisible) {
+      disableScrolling(body);
+    } else {
+      enableScrolling(body);
+    }
+  }, [isVisible, body]);
+
+  // hide docs when navigating to another page
+  useEffect(() => {
+    setIsVisible(false);
+  }, [activePath]);
+
+  const onClick = () => {
+    setIsVisible(!isVisible);
+  };
+
+  return (
+    <>
+      <If condition={isVisible}>
+        <div
+          className={
+            'fixed top-0 left-0 z-10 h-screen w-full p-4' +
+            ' dark:bg-background flex flex-col space-y-4 overflow-auto bg-white'
+          }
+        >
+          {props.children}
+        </div>
+      </If>
+
+      <Button
+        className={'fixed right-5 bottom-5 z-10 h-16 w-16 rounded-full'}
+        onClick={onClick}
+      >
+        <Menu className={'h-8'} />
+      </Button>
+    </>
+  );
+}

app/(marketing)/docs/_lib/server/docs.loader.ts

@@ -0,0 +1,31 @@
+import { cache } from 'react';
+
+import { createCmsClient } from '@kit/cms';
+import { getLogger } from '@kit/shared/logger';
+
+/**
+ * @name getDocs
+ * @description Load the documentation pages.
+ * @param language
+ */
+export const getDocs = cache(docsLoader);
+
+async function docsLoader(language: string | undefined) {
+  const cms = await createCmsClient();
+  const logger = await getLogger();
+
+  try {
+    const data = await cms.getContentItems({
+      collection: 'documentation',
+      language,
+      limit: Infinity,
+      content: false,
+    });
+
+    return data.items;
+  } catch (error) {
+    logger.error({ error }, 'Failed to load documentation pages');
+
+    return [];
+  }
+}

app/(marketing)/docs/_lib/utils.ts

@@ -0,0 +1,146 @@
+import { Cms } from '@kit/cms';
+
+interface HeadingNode {
+  text: string;
+  level: number;
+  href: string;
+  children: HeadingNode[];
+}
+
+/**
+ * @name buildDocumentationTree
+ * @description Build a tree structure for the documentation pages.
+ * @param pages
+ */
+export function buildDocumentationTree(pages: Cms.ContentItem[]) {
+  const tree: Cms.ContentItem[] = [];
+
+  pages.forEach((page) => {
+    if (page.parentId) {
+      const parent = pages.find((item) => item.slug === page.parentId);
+
+      if (!parent) {
+        return;
+      }
+
+      if (!parent.children) {
+        parent.children = [];
+      }
+
+      parent.children.push(page);
+
+      // sort children by order
+      parent.children.sort((a, b) => a.order - b.order);
+    } else {
+      tree.push(page);
+    }
+  });
+
+  return tree.sort((a, b) => a.order - b.order);
+}
+
+/**
+ * @name extractHeadingsFromJSX
+ * @description Extract headings from JSX. This is used to generate the table of contents for the documentation pages.
+ * @param jsx
+ */
+export function extractHeadingsFromJSX(jsx: {
+  props: { children: React.ReactElement[] };
+}) {
+  const headings: HeadingNode[] = [];
+  let currentH2: HeadingNode | null = null;
+
+  function getTextContent(
+    children: React.ReactElement[] | string | React.ReactElement,
+  ): string {
+    try {
+      if (typeof children === 'string') {
+        return children;
+      }
+
+      if (Array.isArray(children)) {
+        return children.map((child) => getTextContent(child)).join('');
+      }
+
+      if (
+        (
+          children.props as {
+            children: React.ReactElement;
+          }
+        ).children
+      ) {
+        return getTextContent(
+          (children.props as { children: React.ReactElement }).children,
+        );
+      }
+
+      return '';
+    } catch {
+      return '';
+    }
+  }
+
+  try {
+    jsx.props.children.forEach((node) => {
+      if (!node || typeof node !== 'object' || !('type' in node)) {
+        return;
+      }
+
+      const nodeType = node.type as string;
+
+      const text = getTextContent(
+        (
+          node.props as {
+            children: React.ReactElement[];
+          }
+        ).children,
+      );
+
+      if (nodeType === 'h1') {
+        const slug = generateSlug(text);
+
+        headings.push({
+          text,
+          level: 1,
+          href: `#${slug}`,
+          children: [],
+        });
+      } else if (nodeType === 'h2') {
+        const slug = generateSlug(text);
+
+        currentH2 = {
+          text,
+          level: 2,
+          href: `#${slug}`,
+          children: [],
+        };
+
+        if (headings.length > 0) {
+          headings[headings.length - 1]!.children.push(currentH2);
+        } else {
+          headings.push(currentH2);
+        }
+      } else if (nodeType === 'h3' && currentH2) {
+        const slug = generateSlug(text);
+
+        currentH2.children.push({
+          text,
+          level: 3,
+          href: `#${slug}`,
+          children: [],
+        });
+      }
+    });
+
+    return headings;
+  } catch {
+    return [];
+  }
+}
+
+function generateSlug(text: string): string {
+  return text
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/(^-|-$)/g, '');
+}

app/(marketing)/docs/layout.tsx

@@ -0,0 +1,27 @@
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+
+// local imports
+import { DocsNavigation } from './_components/docs-navigation';
+import { getDocs } from './_lib/server/docs.loader';
+import { buildDocumentationTree } from './_lib/utils';
+
+async function DocsLayout({ children }: React.PropsWithChildren) {
+  const { resolvedLanguage } = await createI18nServerInstance();
+  const docs = await getDocs(resolvedLanguage);
+  const tree = buildDocumentationTree(docs);
+
+  return (
+    <SidebarProvider
+      style={{ '--sidebar-width': '18em' } as React.CSSProperties}
+      className={'h-[calc(100vh-72px)] overflow-y-hidden lg:container'}
+    >
+      <DocsNavigation pages={tree} />
+
+      {children}
+    </SidebarProvider>
+  );
+}
+
+export default DocsLayout;

app/(marketing)/docs/loading.tsx

@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;

app/(marketing)/docs/page.tsx

@@ -0,0 +1,39 @@
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { SitePageHeader } from '../_components/site-page-header';
+import { DocsCards } from './_components/docs-cards';
+import { getDocs } from './_lib/server/docs.loader';
+
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:documentation'),
+  };
+};
+
+async function DocsPage() {
+  const { t, resolvedLanguage } = await createI18nServerInstance();
+  const items = await getDocs(resolvedLanguage);
+
+  // Filter out any docs that have a parentId, as these are children of other docs
+  const cards = items.filter((item) => !item.parentId);
+
+  return (
+    <div className={'flex flex-col gap-y-6 xl:gap-y-10'}>
+      <SitePageHeader
+        title={t('marketing:documentation')}
+        subtitle={t('marketing:documentationSubtitle')}
+      />
+
+      <div className={'flex flex-col items-center'}>
+        <div className={'container mx-auto max-w-5xl'}>
+          <DocsCards cards={cards} />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(DocsPage);

app/(marketing)/faq/page.tsx

@@ -0,0 +1,143 @@
+import Link from 'next/link';
+
+import { ArrowRight, ChevronDown } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:faq'),
+  };
+};
+
+async function FAQPage() {
+  const { t } = await createI18nServerInstance();
+
+  // replace this content with translations
+  const faqItems = [
+    {
+      // or: t('marketing:faq.question1')
+      question: `Do you offer a free trial?`,
+      // or: t('marketing:faq.answer1')
+      answer: `Yes, we offer a 14-day free trial. You can cancel at any time during the trial period and you won't be charged.`,
+    },
+    {
+      question: `Can I cancel my subscription?`,
+      answer: `You can cancel your subscription at any time. You can do this from your account settings.`,
+    },
+    {
+      question: `Where can I find my invoices?`,
+      answer: `You can find your invoices in your account settings.`,
+    },
+    {
+      question: `What payment methods do you accept?`,
+      answer: `We accept all major credit cards and PayPal.`,
+    },
+    {
+      question: `Can I upgrade or downgrade my plan?`,
+      answer: `Yes, you can upgrade or downgrade your plan at any time. You can do this from your account settings.`,
+    },
+    {
+      question: `Do you offer discounts for non-profits?`,
+      answer: `Yes, we offer a 50% discount for non-profits. Please contact us to learn more.`,
+    },
+  ];
+
+  const structuredData = {
+    '@context': 'https://schema.org',
+    '@type': 'FAQPage',
+    mainEntity: faqItems.map((item) => {
+      return {
+        '@type': 'Question',
+        name: item.question,
+        acceptedAnswer: {
+          '@type': 'Answer',
+          text: item.answer,
+        },
+      };
+    }),
+  };
+
+  return (
+    <>
+      <script
+        key={'ld:json'}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
+      />
+
+      <div className={'flex flex-col space-y-4 xl:space-y-8'}>
+        <SitePageHeader
+          title={t('marketing:faq')}
+          subtitle={t('marketing:faqSubtitle')}
+        />
+
+        <div className={'container flex flex-col space-y-8 pb-16'}>
+          <div className="flex w-full max-w-xl flex-col">
+            {faqItems.map((item, index) => {
+              return <FaqItem key={index} item={item} />;
+            })}
+          </div>
+
+          <div>
+            <Button asChild variant={'outline'}>
+              <Link href={'/contact'}>
+                <span>
+                  <Trans i18nKey={'marketing:contactFaq'} />
+                </span>
+
+                <ArrowRight className={'ml-2 w-4'} />
+              </Link>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default withI18n(FAQPage);
+
+function FaqItem({
+  item,
+}: React.PropsWithChildren<{
+  item: {
+    question: string;
+    answer: string;
+  };
+}>) {
+  return (
+    <details className={'group border-b px-2 py-4 last:border-b-transparent'}>
+      <summary
+        className={
+          'flex items-center justify-between hover:cursor-pointer hover:underline'
+        }
+      >
+        <h2
+          className={
+            'hover:underline-none cursor-pointer font-sans font-medium'
+          }
+        >
+          <Trans i18nKey={item.question} defaults={item.question} />
+        </h2>
+
+        <div>
+          <ChevronDown
+            className={'h-5 transition duration-300 group-open:-rotate-180'}
+          />
+        </div>
+      </summary>
+
+      <div className={'text-muted-foreground flex flex-col gap-y-3 py-1'}>
+        <Trans i18nKey={item.answer} defaults={item.answer} />
+      </div>
+    </details>
+  );
+}

app/(marketing)/layout.tsx

@@ -0,0 +1,17 @@
+import { SiteFooter } from '~/(marketing)/_components/site-footer';
+import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+function SiteLayout(props: React.PropsWithChildren) {
+  return (
+    <div className={'flex min-h-[100vh] flex-col'}>
+      <SiteHeader />
+
+      {props.children}
+
+      <SiteFooter />
+    </div>
+  );
+}
+
+export default withI18n(SiteLayout);

app/(marketing)/loading.tsx

@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;

app/(marketing)/page.tsx

@@ -0,0 +1,62 @@
+import Link from 'next/link';
+
+import { ArrowRightIcon } from 'lucide-react';
+
+import {
+  CtaButton,
+  Hero,
+} from '@kit/ui/marketing';
+import { Trans } from '@kit/ui/trans';
+
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { MedReportTitle } from '@/components/MedReportTitle';
+
+function Home() {
+  return (
+    <div className={'mt-4 flex flex-col space-y-24 py-14'}>
+      <div className={'container mx-auto'}>
+        <Hero
+          title={<MedReportTitle />}
+          subtitle={
+            <span>
+              <Trans i18nKey={'marketing:heroSubtitle'} />
+            </span>
+          }
+          cta={<MainCallToActionButton />}
+        />
+      </div>
+
+    </div>
+  );
+}
+
+export default withI18n(Home);
+
+function MainCallToActionButton() {
+  return (
+    <div className={'flex space-x-4'}>
+      <CtaButton>
+        <Link href={'/auth/sign-up'}>
+          <span className={'flex items-center space-x-0.5'}>
+            <span>
+              <Trans i18nKey={'common:getStarted'} />
+            </span>
+
+            <ArrowRightIcon
+              className={
+                'animate-in fade-in slide-in-from-left-8 h-4' +
+                ' zoom-in fill-mode-both delay-1000 duration-1000'
+              }
+            />
+          </span>
+        </Link>
+      </CtaButton>
+
+      <CtaButton variant={'link'}>
+        <Link href={'/register-company'}>
+          <Trans i18nKey={'account:createCompanyAccount'} />
+        </Link>
+      </CtaButton>
+    </div>
+  );
+}

app/(marketing)/pricing/page.tsx

@@ -0,0 +1,39 @@
+import { PricingTable } from '@kit/billing-gateway/marketing';
+
+import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('marketing:pricing'),
+  };
+};
+
+const paths = {
+  signUp: pathsConfig.auth.signUp,
+  return: pathsConfig.app.home,
+};
+
+async function PricingPage() {
+  const { t } = await createI18nServerInstance();
+
+  return (
+    <div className={'flex flex-col space-y-12'}>
+      <SitePageHeader
+        title={t('marketing:pricing')}
+        subtitle={t('marketing:pricingSubtitle')}
+      />
+
+      <div className={'container mx-auto pb-8 xl:pb-16'}>
+        <PricingTable paths={paths} config={billingConfig} />
+      </div>
+    </div>
+  );
+}
+
+export default withI18n(PricingPage);

app/(public)/layout.tsx

@@ -0,0 +1,11 @@
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+function SiteLayout(props: React.PropsWithChildren) {
+  return (
+    <div className={'flex min-h-[100vh] flex-col justify-center items-center'}>
+      {props.children}
+    </div>
+  );
+}
+
+export default withI18n(SiteLayout);

app/(public)/register-company/page.tsx

@@ -2,16 +2,17 @@
 
 import { MedReportTitle } from "@/components/MedReportTitle";
 import React from "react";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import Image from "next/image";
-import { SubmitButton } from "@/components/submit-button";
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useForm } from "react-hook-form";
 import { companySchema } from "@/lib/validations/companySchema";
 import { CompanySubmitData } from "@/lib/types/company";
 import { submitCompanyRegistration } from "@/lib/services/register-company.service";
 import { useRouter } from "next/navigation";
+import { Label } from "@kit/ui/label";
+import { Input } from "@kit/ui/input";
+import { SubmitButton } from "@/components/ui/submit-button";
+import { FormItem } from "@kit/ui/form";
+import { Trans } from "@kit/ui/trans";
 
 export default function RegisterCompany() {
   const router = useRouter();
@@ -42,35 +43,35 @@ export default function RegisterCompany() {
   }
 
   return (
-    <div className="flex flex-row border rounded-3xl border-border">
+    <div className="flex flex-row border rounded-3xl border-border max-w-5xl  overflow-hidden">
       <div className="flex flex-col text-center py-14 px-12 w-1/2">
         <MedReportTitle />
         <h1 className="pt-8">Ettevõtte andmed</h1>
-        <p className="pt-2">
+        <p className="pt-2 text-muted-foreground text-sm">
           Pakkumise saamiseks palun sisesta ettevõtte andmed millega MedReport
           kasutada kavatsed.
         </p>
         <form
           onSubmit={handleSubmit(onSubmit)}
           noValidate
-          className="flex gap-4 flex-col text-left pt-8 px-6"
+          className="flex gap-7 flex-col text-left pt-8 px-6"
         >
-          <div>
+          <FormItem>
             <Label>Ettevõtte nimi</Label>
             <Input {...register("companyName")} />
-          </div>
-          <div>
+          </FormItem>
+          <FormItem>
             <Label>Kontaktisik</Label>
             <Input {...register("contactPerson")} />
-          </div>
-          <div>
+          </FormItem>
+          <FormItem>
             <Label>E-mail</Label>
             <Input type="email" {...register("email")}></Input>
-          </div>
-          <div>
+          </FormItem>
+          <FormItem>
             <Label>Telefon</Label>
             <Input type="tel" {...register("phone")} />
-          </div>
+          </FormItem>
           <SubmitButton
             disabled={!isValid || isSubmitting}
             pendingText="Saatmine..."
@@ -78,12 +79,11 @@ export default function RegisterCompany() {
             formAction={submitCompanyRegistration}
             className="mt-4 hover:bg-primary/90"
           >
-            Küsi pakkumist
+            <Trans i18nKey={'account:requestCompanyAccount'} />
           </SubmitButton>
         </form>
       </div>
-      <div className="w-1/2">
-        <Image src='/assets/med-report-logo-big.png' alt="MedReport" width={494} height={674} priority />
+      <div className="w-1/2 min-w-[460px] bg-[url(/assets/med-report-logo-big.png)] bg-cover bg-center bg-no-repeat">
       </div>
     </div>
   );

app/(public)/register-company/success/page.tsx

@@ -1,7 +1,7 @@
 import { MedReportTitle } from "@/components/MedReportTitle";
+import { Button } from "@/packages/ui/src/shadcn/button";
 import Image from "next/image";
 import Link from "next/link";
-import { Button } from "@/components/ui/button";
 
 export default function CompanyRegistrationSuccess() {
   return (
@@ -16,7 +16,7 @@ export default function CompanyRegistrationSuccess() {
           height={195}
         />
         <h1 className="pb-2">Päring edukalt saadetud!</h1>
-        <p>Saadame teile esimesel võimalusel vastuse</p>
+        <p className=" text-muted-foreground text-sm">Saadame teile esimesel võimalusel vastuse</p>
       </div>
       <Button className="w-full mt-8">
         <Link href="/">Tagasi kodulehele</Link>

app/(public)/sign-in/page.tsx

@@ -1,4 +1,4 @@
-import { Button } from "@/components/ui/button";
+import { Button } from '@kit/ui/button';
 import Link from "next/link";
 import React from "react";
 

app/admin/_components/admin-sidebar.tsx

@@ -0,0 +1,67 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { LayoutDashboard, Users } from 'lucide-react';
+
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+} from '@kit/ui/shadcn-sidebar';
+
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+
+export function AdminSidebar() {
+  const path = usePathname();
+
+  return (
+    <Sidebar collapsible="icon">
+      <SidebarHeader className={'m-2'}>
+        <AppLogo href={'/admin'} className="max-w-full" />
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarGroup>
+          <SidebarGroupLabel>Super Admin</SidebarGroupLabel>
+
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuButton isActive={path === '/admin'} asChild>
+                <Link className={'flex gap-2.5'} href={'/admin'}>
+                  <LayoutDashboard className={'h-4'} />
+                  <span>Dashboard</span>
+                </Link>
+              </SidebarMenuButton>
+
+              <SidebarMenuButton
+                isActive={path.includes('/admin/accounts')}
+                asChild
+              >
+                <Link
+                  className={'flex size-full gap-2.5'}
+                  href={'/admin/accounts'}
+                >
+                  <Users className={'h-4'} />
+                  <span>Accounts</span>
+                </Link>
+              </SidebarMenuButton>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+      </SidebarContent>
+
+      <SidebarFooter>
+        <ProfileAccountDropdownContainer />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

app/admin/_components/mobile-navigation.tsx

@@ -0,0 +1,30 @@
+import Link from 'next/link';
+
+import { Menu } from 'lucide-react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+
+export function AdminMobileNavigation() {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu className={'h-8 w-8'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent>
+        <DropdownMenuItem>
+          <Link href={'/admin'}>Home</Link>
+        </DropdownMenuItem>
+
+        <DropdownMenuItem>
+          <Link href={'/admin/accounts'}>Accounts</Link>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

app/admin/accounts/[id]/page.tsx

@@ -0,0 +1,47 @@
+import { cache } from 'react';
+
+import { AdminAccountPage } from '@kit/admin/components/admin-account-page';
+import { AdminGuard } from '@kit/admin/components/admin-guard';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+interface Params {
+  params: Promise<{
+    id: string;
+  }>;
+}
+
+export const generateMetadata = async (props: Params) => {
+  const params = await props.params;
+  const account = await loadAccount(params.id);
+
+  return {
+    title: `Admin | ${account.name}`,
+  };
+};
+
+async function AccountPage(props: Params) {
+  const params = await props.params;
+  const account = await loadAccount(params.id);
+
+  return <AdminAccountPage account={account} />;
+}
+
+export default AdminGuard(AccountPage);
+
+const loadAccount = cache(accountLoader);
+
+async function accountLoader(id: string) {
+  const client = getSupabaseServerClient();
+
+  const { data, error } = await client
+    .from('accounts')
+    .select('*, memberships: accounts_memberships (*)')
+    .eq('id', id)
+    .single();
+
+  if (error) {
+    throw error;
+  }
+
+  return data;
+}

app/admin/accounts/page.tsx

@@ -0,0 +1,79 @@
+import { ServerDataLoader } from '@makerkit/data-loader-supabase-nextjs';
+
+import { AdminAccountsTable } from '@kit/admin/components/admin-accounts-table';
+import { AdminCreateUserDialog } from '@kit/admin/components/admin-create-user-dialog';
+import { AdminGuard } from '@kit/admin/components/admin-guard';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { Button } from '@kit/ui/button';
+import { PageBody, PageHeader } from '@kit/ui/page';
+
+interface SearchParams {
+  page?: string;
+  account_type?: 'all' | 'team' | 'personal';
+  query?: string;
+}
+
+interface AdminAccountsPageProps {
+  searchParams: Promise<SearchParams>;
+}
+
+export const metadata = {
+  title: `Accounts`,
+};
+
+async function AccountsPage(props: AdminAccountsPageProps) {
+  const client = getSupabaseServerClient();
+  const searchParams = await props.searchParams;
+  const page = searchParams.page ? parseInt(searchParams.page) : 1;
+
+  return (
+    <>
+      <PageHeader description={<AppBreadcrumbs />}>
+        <div className="flex justify-end">
+          <AdminCreateUserDialog>
+            <Button data-test="admin-create-user-button">Create User</Button>
+          </AdminCreateUserDialog>
+        </div>
+      </PageHeader>
+
+      <PageBody>
+        <ServerDataLoader
+          table={'accounts'}
+          client={client}
+          page={page}
+          where={(queryBuilder) => {
+            const { account_type: type, query } = searchParams;
+
+            if (type && type !== 'all') {
+              queryBuilder.eq('is_personal_account', type === 'personal');
+            }
+
+            if (query) {
+              queryBuilder.or(`name.ilike.%${query}%,email.ilike.%${query}%`);
+            }
+
+            return queryBuilder;
+          }}
+        >
+          {({ data, page, pageSize, pageCount }) => {
+            return (
+              <AdminAccountsTable
+                page={page}
+                pageSize={pageSize}
+                pageCount={pageCount}
+                data={data}
+                filters={{
+                  type: searchParams.account_type ?? 'all',
+                  query: searchParams.query ?? '',
+                }}
+              />
+            );
+          }}
+        </ServerDataLoader>
+      </PageBody>
+    </>
+  );
+}
+
+export default AdminGuard(AccountsPage);

app/admin/layout.tsx

@@ -0,0 +1,44 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
+
+import { AdminSidebar } from '~/admin/_components/admin-sidebar';
+import { AdminMobileNavigation } from '~/admin/_components/mobile-navigation';
+
+export const metadata = {
+  title: `Super Admin`,
+};
+
+export const dynamic = 'force-dynamic';
+
+export default function AdminLayout(props: React.PropsWithChildren) {
+  const state = use(getLayoutState());
+
+  return (
+    <SidebarProvider defaultOpen={state.open}>
+      <Page style={'sidebar'}>
+        <PageNavigation>
+          <AdminSidebar />
+        </PageNavigation>
+
+        <PageMobileNavigation>
+          <AdminMobileNavigation />
+        </PageMobileNavigation>
+
+        {props.children}
+      </Page>
+    </SidebarProvider>
+  );
+}
+
+async function getLayoutState() {
+  const cookieStore = await cookies();
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+
+  return {
+    open: sidebarOpenCookie?.value !== 'true',
+  };
+}

app/admin/loading.tsx

@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;

app/admin/page.tsx

@@ -0,0 +1,17 @@
+import { AdminDashboard } from '@kit/admin/components/admin-dashboard';
+import { AdminGuard } from '@kit/admin/components/admin-guard';
+import { PageBody, PageHeader } from '@kit/ui/page';
+
+function AdminPage() {
+  return (
+    <>
+      <PageHeader description={`Super Admin`} />
+
+      <PageBody>
+        <AdminDashboard />
+      </PageBody>
+    </>
+  );
+}
+
+export default AdminGuard(AdminPage);

app/api/billing/webhook/route.ts

@@ -0,0 +1,49 @@
+import { getPlanTypesMap } from '@kit/billing';
+import { getBillingEventHandlerService } from '@kit/billing-gateway';
+import { enhanceRouteHandler } from '@kit/next/routes';
+import { getLogger } from '@kit/shared/logger';
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+
+import billingConfig from '~/config/billing.config';
+
+/**
+ * @description Handle the webhooks from Stripe related to checkouts
+ */
+export const POST = enhanceRouteHandler(
+  async ({ request }) => {
+    const provider = billingConfig.provider;
+    const logger = await getLogger();
+
+    const ctx = {
+      name: 'billing.webhook',
+      provider,
+    };
+
+    logger.info(ctx, `Received billing webhook. Processing...`);
+
+    const supabaseClientProvider = () => getSupabaseServerAdminClient();
+
+    const service = await getBillingEventHandlerService(
+      supabaseClientProvider,
+      provider,
+      getPlanTypesMap(billingConfig),
+    );
+
+    try {
+      await service.handleWebhookEvent(request);
+
+      logger.info(ctx, `Successfully processed billing webhook`);
+
+      return new Response('OK', { status: 200 });
+    } catch (error) {
+      logger.error({ ...ctx, error }, `Failed to process billing webhook`);
+
+      return new Response('Failed to process billing webhook', {
+        status: 500,
+      });
+    }
+  },
+  {
+    auth: false,
+  },
+);

app/api/db/webhook/route.ts

@@ -0,0 +1,43 @@
+import { getDatabaseWebhookHandlerService } from '@kit/database-webhooks';
+import { getServerMonitoringService } from '@kit/monitoring/server';
+import { enhanceRouteHandler } from '@kit/next/routes';
+
+/**
+ * @name POST
+ * @description POST handler for the webhook route that handles the webhook event
+ */
+export const POST = enhanceRouteHandler(
+  async ({ request }) => {
+    const service = getDatabaseWebhookHandlerService();
+
+    try {
+      const signature = request.headers.get('X-Supabase-Event-Signature');
+
+      if (!signature) {
+        return new Response('Missing signature', { status: 400 });
+      }
+
+      const body = await request.clone().json();
+
+      // handle the webhook event
+      await service.handleWebhook({
+        body,
+        signature,
+      });
+
+      // return a successful response
+      return new Response(null, { status: 200 });
+    } catch (error) {
+      const service = await getServerMonitoringService();
+
+      await service.ready();
+      await service.captureException(error as Error);
+
+      // return an error response
+      return new Response(null, { status: 500 });
+    }
+  },
+  {
+    auth: false,
+  },
+);

app/auth/callback/error/page.tsx

@@ -0,0 +1,71 @@
+import Link from 'next/link';
+
+import type { AuthError } from '@supabase/supabase-js';
+
+import { ResendAuthLinkForm } from '@kit/auth/resend-email-link';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+import pathsConfig from '~/config/paths.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+interface AuthCallbackErrorPageProps {
+  searchParams: Promise<{
+    error: string;
+    callback?: string;
+    email?: string;
+    code?: AuthError['code'];
+  }>;
+}
+
+async function AuthCallbackErrorPage(props: AuthCallbackErrorPageProps) {
+  const { error, callback, code } = await props.searchParams;
+  const signInPath = pathsConfig.auth.signIn;
+  const redirectPath = callback ?? pathsConfig.auth.callback;
+
+  return (
+    <div className={'flex flex-col space-y-4 py-4'}>
+      <Alert variant={'warning'}>
+        <AlertTitle>
+          <Trans i18nKey={'auth:authenticationErrorAlertHeading'} />
+        </AlertTitle>
+
+        <AlertDescription>
+          <Trans i18nKey={error ?? 'auth:authenticationErrorAlertBody'} />
+        </AlertDescription>
+      </Alert>
+
+      <AuthCallbackForm
+        code={code}
+        signInPath={signInPath}
+        redirectPath={redirectPath}
+      />
+    </div>
+  );
+}
+
+function AuthCallbackForm(props: {
+  signInPath: string;
+  redirectPath?: string;
+  code?: AuthError['code'];
+}) {
+  switch (props.code) {
+    case 'otp_expired':
+      return <ResendAuthLinkForm redirectPath={props.redirectPath} />;
+    default:
+      return <SignInButton signInPath={props.signInPath} />;
+  }
+}
+
+function SignInButton(props: { signInPath: string }) {
+  return (
+    <Button className={'w-full'} asChild>
+      <Link href={props.signInPath}>
+        <Trans i18nKey={'auth:signIn'} />
+      </Link>
+    </Button>
+  );
+}
+
+export default withI18n(AuthCallbackErrorPage);

app/auth/callback/route.ts

@@ -0,0 +1,18 @@
+import { redirect } from 'next/navigation';
+import type { NextRequest } from 'next/server';
+
+import { createAuthCallbackService } from '@kit/supabase/auth';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import pathsConfig from '~/config/paths.config';
+
+export async function GET(request: NextRequest) {
+  const service = createAuthCallbackService(getSupabaseServerClient());
+
+  const { nextPath } = await service.exchangeCodeForSession(request, {
+    joinTeamPath: pathsConfig.app.joinTeam,
+    redirectPath: pathsConfig.app.home,
+  });
+
+  return redirect(nextPath);
+}

app/auth/confirm/route.ts

@@ -0,0 +1,17 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+import { createAuthCallbackService } from '@kit/supabase/auth';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import pathsConfig from '~/config/paths.config';
+
+export async function GET(request: NextRequest) {
+  const service = createAuthCallbackService(getSupabaseServerClient());
+
+  const url = await service.verifyTokenHash(request, {
+    joinTeamPath: pathsConfig.app.joinTeam,
+    redirectPath: pathsConfig.app.home,
+  });
+
+  return NextResponse.redirect(url);
+}

app/auth/layout.tsx

@@ -0,0 +1,9 @@
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+import { AppLogo } from '~/components/app-logo';
+
+function AuthLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default AuthLayout;

app/auth/loading.tsx

@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;

app/auth/password-reset/page.tsx

@@ -0,0 +1,51 @@
+import Link from 'next/link';
+
+import { PasswordResetRequestContainer } from '@kit/auth/password-reset';
+import { Button } from '@kit/ui/button';
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export const generateMetadata = async () => {
+  const { t } = await createI18nServerInstance();
+
+  return {
+    title: t('auth:passwordResetLabel'),
+  };
+};
+
+const { callback, passwordUpdate, signIn } = pathsConfig.auth;
+const redirectPath = `${callback}?next=${passwordUpdate}`;
+
+function PasswordResetPage() {
+  return (
+    <>
+      <div className={'flex flex-col items-center gap-1'}>
+        <Heading level={4} className={'tracking-tight'}>
+          <Trans i18nKey={'auth:passwordResetLabel'} />
+        </Heading>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'auth:passwordResetSubheading'} />
+        </p>
+      </div>
+
+      <div className={'flex flex-col space-y-4'}>
+        <PasswordResetRequestContainer redirectPath={redirectPath} />
+
+        <div className={'flex justify-center text-xs'}>
+          <Button asChild variant={'link'} size={'sm'}>
+            <Link href={signIn}>
+              <Trans i18nKey={'auth:passwordRecoveredQuestion'} />
+            </Link>
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default withI18n(PasswordResetPage);

app/auth/sign-in/page.tsx

@@ -0,0 +1,70 @@
+import Link from 'next/link';
+
+import { SignInMethodsContainer } from '@kit/auth/sign-in';
+import { Button } from '@kit/ui/button';
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import authConfig from '~/config/auth.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+interface SignInPageProps {
+  searchParams: Promise<{
+    invite_token?: string;
+    next?: string;
+  }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+
+  return {
+    title: i18n.t('auth:signIn'),
+  };
+};
+
+async function SignInPage({ searchParams }: SignInPageProps) {
+  const { invite_token: inviteToken, next = '' } = await searchParams;
+
+  const signUpPath =
+    pathsConfig.auth.signUp +
+    (inviteToken ? `?invite_token=${inviteToken}` : '');
+
+  const paths = {
+    callback: pathsConfig.auth.callback,
+    returnPath: next ?? pathsConfig.app.home,
+    joinTeam: pathsConfig.app.joinTeam,
+  };
+
+  return (
+    <>
+      <div className={'flex flex-col items-center gap-1'}>
+        <Heading level={4} className={'tracking-tight'}>
+          <Trans i18nKey={'auth:signInHeading'} />
+        </Heading>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'auth:signInSubheading'} />
+        </p>
+      </div>
+
+      <SignInMethodsContainer
+        inviteToken={inviteToken}
+        paths={paths}
+        providers={authConfig.providers}
+      />
+
+      <div className={'flex justify-center'}>
+        <Button asChild variant={'link'} size={'sm'}>
+          <Link href={signUpPath} prefetch={true}>
+            <Trans i18nKey={'auth:doNotHaveAccountYet'} />
+          </Link>
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default withI18n(SignInPage);

app/auth/sign-up/page.tsx

@@ -0,0 +1,69 @@
+import Link from 'next/link';
+
+import { SignUpMethodsContainer } from '@kit/auth/sign-up';
+import { Button } from '@kit/ui/button';
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import authConfig from '~/config/auth.config';
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+
+  return {
+    title: i18n.t('auth:signUp'),
+  };
+};
+
+interface Props {
+  searchParams: Promise<{
+    invite_token?: string;
+  }>;
+}
+
+const paths = {
+  callback: pathsConfig.auth.callback,
+  appHome: pathsConfig.app.home,
+};
+
+async function SignUpPage({ searchParams }: Props) {
+  const inviteToken = (await searchParams).invite_token;
+
+  const signInPath =
+    pathsConfig.auth.signIn +
+    (inviteToken ? `?invite_token=${inviteToken}` : '');
+
+  return (
+    <>
+      <div className={'flex flex-col items-center gap-1'}>
+        <Heading level={4} className={'tracking-tight'}>
+          <Trans i18nKey={'auth:signUpHeading'} />
+        </Heading>
+
+        <p className={'text-muted-foreground text-sm'}>
+          <Trans i18nKey={'auth:signUpSubheading'} />
+        </p>
+      </div>
+
+      <SignUpMethodsContainer
+        providers={authConfig.providers}
+        displayTermsCheckbox={authConfig.displayTermsCheckbox}
+        inviteToken={inviteToken}
+        paths={paths}
+      />
+
+      <div className={'flex justify-center'}>
+        <Button asChild variant={'link'} size={'sm'}>
+          <Link href={signInPath} prefetch={true}>
+            <Trans i18nKey={'auth:alreadyHaveAnAccount'} />
+          </Link>
+        </Button>
+      </div>
+    </>
+  );
+}
+
+export default withI18n(SignUpPage);

app/auth/verify/page.tsx

@@ -0,0 +1,55 @@
+import { redirect } from 'next/navigation';
+
+import { MultiFactorChallengeContainer } from '@kit/auth/mfa';
+import { checkRequiresMultiFactorAuthentication } from '@kit/supabase/check-requires-mfa';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import pathsConfig from '~/config/paths.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+interface Props {
+  searchParams: Promise<{
+    next?: string;
+  }>;
+}
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+
+  return {
+    title: i18n.t('auth:signIn'),
+  };
+};
+
+async function VerifyPage(props: Props) {
+  const client = getSupabaseServerClient();
+
+  const {
+    data: { user },
+  } = await client.auth.getUser();
+
+  if (!user) {
+    redirect(pathsConfig.auth.signIn);
+  }
+
+  const needsMfa = await checkRequiresMultiFactorAuthentication(client);
+
+  if (!needsMfa) {
+    redirect(pathsConfig.auth.signIn);
+  }
+
+  const nextPath = (await props.searchParams).next;
+  const redirectPath = nextPath ?? pathsConfig.app.home;
+
+  return (
+    <MultiFactorChallengeContainer
+      userId={user.id}
+      paths={{
+        redirectPath,
+      }}
+    />
+  );
+}
+
+export default withI18n(VerifyPage);

app/error.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ArrowLeft, MessageCircle } from 'lucide-react';
+
+import { useCaptureException } from '@kit/monitoring/hooks';
+import { Button } from '@kit/ui/button';
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import { SiteHeader } from '~/(marketing)/_components/site-header';
+
+const ErrorPage = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  useCaptureException(error);
+
+  return (
+    <div className={'flex h-screen flex-1 flex-col'}>
+      <SiteHeader />
+
+      <div
+        className={
+          'container m-auto flex w-full flex-1 flex-col items-center justify-center'
+        }
+      >
+        <div className={'flex flex-col items-center space-y-8'}>
+          <div>
+            <h1 className={'font-heading text-9xl font-semibold'}>
+              <Trans i18nKey={'common:errorPageHeading'} />
+            </h1>
+          </div>
+
+          <div className={'flex flex-col items-center space-y-8'}>
+            <div
+              className={
+                'flex max-w-xl flex-col items-center gap-y-2 text-center'
+              }
+            >
+              <div>
+                <Heading level={2}>
+                  <Trans i18nKey={'common:genericError'} />
+                </Heading>
+              </div>
+
+              <p className={'text-muted-foreground text-lg'}>
+                <Trans i18nKey={'common:genericErrorSubHeading'} />
+              </p>
+            </div>
+
+            <div className={'flex space-x-4'}>
+              <Button className={'w-full'} variant={'default'} onClick={reset}>
+                <ArrowLeft className={'mr-2 h-4'} />
+
+                <Trans i18nKey={'common:goBack'} />
+              </Button>
+
+              <Button className={'w-full'} variant={'outline'} asChild>
+                <Link href={'/contact'}>
+                  <MessageCircle className={'mr-2 h-4'} />
+
+                  <Trans i18nKey={'common:contactUs'} />
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorPage;

app/global-error.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import Link from 'next/link';
+
+import { ArrowLeft, MessageCircle } from 'lucide-react';
+
+import { useCaptureException } from '@kit/monitoring/hooks';
+import { Button } from '@kit/ui/button';
+import { Heading } from '@kit/ui/heading';
+import { Trans } from '@kit/ui/trans';
+
+import { SiteHeader } from '~/(marketing)/_components/site-header';
+import { RootProviders } from '~/components/root-providers';
+
+const GlobalErrorPage = ({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) => {
+  useCaptureException(error);
+
+  return (
+    <html>
+      <body>
+        <RootProviders>
+          <div className={'flex h-screen flex-1 flex-col'}>
+            <SiteHeader />
+
+            <div
+              className={
+                'container m-auto flex w-full flex-1 flex-col items-center justify-center'
+              }
+            >
+              <div className={'flex flex-col items-center space-y-8'}>
+                <div>
+                  <h1 className={'font-heading text-9xl font-semibold'}>
+                    <Trans i18nKey={'common:errorPageHeading'} />
+                  </h1>
+                </div>
+
+                <div className={'flex flex-col items-center space-y-8'}>
+                  <div
+                    className={
+                      'flex max-w-xl flex-col items-center gap-y-2 text-center'
+                    }
+                  >
+                    <div>
+                      <Heading level={2}>
+                        <Trans i18nKey={'common:genericError'} />
+                      </Heading>
+                    </div>
+
+                    <p className={'text-muted-foreground text-lg'}>
+                      <Trans i18nKey={'common:genericErrorSubHeading'} />
+                    </p>
+                  </div>
+
+                  <div className={'flex space-x-4'}>
+                    <Button
+                      className={'w-full'}
+                      variant={'default'}
+                      onClick={reset}
+                    >
+                      <ArrowLeft className={'mr-2 h-4'} />
+
+                      <Trans i18nKey={'common:goBack'} />
+                    </Button>
+
+                    <Button className={'w-full'} variant={'outline'} asChild>
+                      <Link href={'/contact'}>
+                        <MessageCircle className={'mr-2 h-4'} />
+
+                        <Trans i18nKey={'common:contactUs'} />
+                      </Link>
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </RootProviders>
+      </body>
+    </html>
+  );
+};
+
+export default GlobalErrorPage;

app/globals.css

@@ -1,66 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  @font-face {
-    font-family: 'Inter Display';
-    src: url('../fonts/InterDisplay-Regular.woff2') format('woff2');
-    font-weight: 400;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'Inter Display';
-    src: url('../fonts/InterDisplay-Medium.woff2') format('woff2');
-    font-weight: 500;
-    font-style: medium;
-    font-display: swap;
-  }
-
-  h1 {
-    @apply text-foreground text-2xl font-semibold tracking-tight
-  }
-
-  p {
-    @apply font-inter text-muted-foreground text-sm
-  }
-
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 240 10% 4%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 356 100% 97%;
-    --primary: 145 78% 18%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 240 4% 41%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 6% 90%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.5rem;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

app/healthcheck/route.ts

@@ -0,0 +1,37 @@
+import { NextResponse } from 'next/server';
+
+import { getSupabaseServerAdminClient } from '@kit/supabase/server-admin-client';
+
+/**
+ * Healthcheck endpoint for the web app. If this endpoint returns a 200, the web app will be considered healthy.
+ * If this endpoint returns a 500, the web app will be considered unhealthy.
+ * This endpoint can be used by Docker to determine if the web app is healthy and should be restarted.
+ */
+export async function GET() {
+  const isDbHealthy = await getSupabaseHealthCheck();
+
+  return NextResponse.json({
+    services: {
+      database: isDbHealthy,
+      // add other services here
+    },
+  });
+}
+
+/**
+ * Quick check to see if the database is healthy by querying the config table
+ * @returns true if the database is healthy, false otherwise
+ */
+async function getSupabaseHealthCheck() {
+  try {
+    const client = getSupabaseServerAdminClient();
+
+    const { error } = await client.rpc('is_set', {
+      field_name: 'billing_provider',
+    });
+
+    return !error;
+  } catch {
+    return false;
+  }
+}

app/home/(user)/_components/home-account-selector.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import { useContext } from 'react';
+
+import { useRouter } from 'next/navigation';
+
+import { AccountSelector } from '@kit/accounts/account-selector';
+import { SidebarContext } from '@kit/ui/shadcn-sidebar';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import pathsConfig from '~/config/paths.config';
+
+const features = {
+  enableTeamCreation: featureFlagsConfig.enableTeamCreation,
+};
+
+export function HomeAccountSelector(props: {
+  accounts: Array<{
+    label: string | null;
+    value: string | null;
+    image: string | null;
+  }>;
+
+  userId: string;
+  collisionPadding?: number;
+}) {
+  const router = useRouter();
+  const context = useContext(SidebarContext);
+
+  return (
+    <AccountSelector
+      collapsed={!context?.open}
+      collisionPadding={props.collisionPadding ?? 20}
+      accounts={props.accounts}
+      features={features}
+      userId={props.userId}
+      onAccountChange={(value) => {
+        if (value) {
+          const path = pathsConfig.app.accountHome.replace('[account]', value);
+          router.replace(path);
+        }
+      }}
+    />
+  );
+}

app/home/(user)/_components/home-accounts-list.tsx

@@ -0,0 +1,61 @@
+import { use } from 'react';
+
+import Link from 'next/link';
+
+import {
+  CardButton,
+  CardButtonHeader,
+  CardButtonTitle,
+} from '@kit/ui/card-button';
+import {
+  EmptyState,
+  EmptyStateButton,
+  EmptyStateHeading,
+  EmptyStateText,
+} from '@kit/ui/empty-state';
+import { Trans } from '@kit/ui/trans';
+
+import { loadUserWorkspace } from '../_lib/server/load-user-workspace';
+import { HomeAddAccountButton } from './home-add-account-button';
+
+export function HomeAccountsList() {
+  const { accounts } = use(loadUserWorkspace());
+
+  if (!accounts.length) {
+    return <HomeAccountsListEmptyState />;
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+        {accounts.map((account) => (
+          <CardButton key={account.value} asChild>
+            <Link href={`/home/${account.value}`}>
+              <CardButtonHeader>
+                <CardButtonTitle>{account.label}</CardButtonTitle>
+              </CardButtonHeader>
+            </Link>
+          </CardButton>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function HomeAccountsListEmptyState() {
+  return (
+    <div className={'flex flex-1'}>
+      <EmptyState>
+        <EmptyStateButton asChild>
+          <HomeAddAccountButton className={'mt-4'} />
+        </EmptyStateButton>
+        <EmptyStateHeading>
+          <Trans i18nKey={'account:noTeamsYet'} />
+        </EmptyStateHeading>
+        <EmptyStateText>
+          <Trans i18nKey={'account:createTeam'} />
+        </EmptyStateText>
+      </EmptyState>
+    </div>
+  );
+}

app/home/(user)/_components/home-add-account-button.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useState } from 'react';
+
+import { CreateTeamAccountDialog } from '@kit/team-accounts/components';
+import { Button } from '@kit/ui/button';
+import { Trans } from '@kit/ui/trans';
+
+export function HomeAddAccountButton(props: { className?: string }) {
+  const [isAddingAccount, setIsAddingAccount] = useState(false);
+
+  return (
+    <>
+      <Button
+        className={props.className}
+        onClick={() => setIsAddingAccount(true)}
+      >
+        <Trans i18nKey={'account:createTeamButtonLabel'} />
+      </Button>
+
+      <CreateTeamAccountDialog
+        isOpen={isAddingAccount}
+        setIsOpen={setIsAddingAccount}
+      />
+    </>
+  );
+}

app/home/(user)/_components/home-menu-navigation.tsx

@@ -0,0 +1,68 @@
+import {
+  BorderedNavigationMenu,
+  BorderedNavigationMenuItem,
+} from '@kit/ui/bordered-navigation-menu';
+import { If } from '@kit/ui/if';
+
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+
+// home imports
+import { HomeAccountSelector } from '../_components/home-account-selector';
+import { UserNotifications } from '../_components/user-notifications';
+import { type UserWorkspace } from '../_lib/server/load-user-workspace';
+
+export function HomeMenuNavigation(props: { workspace: UserWorkspace }) {
+  const { workspace, user, accounts } = props.workspace;
+
+  const routes = personalAccountNavigationConfig.routes.reduce<
+    Array<{
+      path: string;
+      label: string;
+      Icon?: React.ReactNode;
+      end?: boolean | ((path: string) => boolean);
+    }>
+  >((acc, item) => {
+    if ('children' in item) {
+      return [...acc, ...item.children];
+    }
+
+    if ('divider' in item) {
+      return acc;
+    }
+
+    return [...acc, item];
+  }, []);
+
+  return (
+    <div className={'flex w-full flex-1 justify-between'}>
+      <div className={'flex items-center space-x-8'}>
+        <AppLogo />
+
+        <BorderedNavigationMenu>
+          {routes.map((route) => (
+            <BorderedNavigationMenuItem {...route} key={route.path} />
+          ))}
+        </BorderedNavigationMenu>
+      </div>
+
+      <div className={'flex justify-end space-x-2.5'}>
+        <UserNotifications userId={user.id} />
+
+        <If condition={featuresFlagConfig.enableTeamAccounts}>
+          <HomeAccountSelector userId={user.id} accounts={accounts} />
+        </If>
+
+        <div>
+          <ProfileAccountDropdownContainer
+            user={user}
+            account={workspace}
+            showProfileName={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

app/home/(user)/_components/home-mobile-navigation.tsx

@@ -0,0 +1,122 @@
+'use client';
+
+import Link from 'next/link';
+
+import { LogOut, Menu } from 'lucide-react';
+
+import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@kit/ui/dropdown-menu';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+
+// home imports
+import { HomeAccountSelector } from '../_components/home-account-selector';
+import type { UserWorkspace } from '../_lib/server/load-user-workspace';
+
+export function HomeMobileNavigation(props: { workspace: UserWorkspace }) {
+  const signOut = useSignOut();
+
+  const Links = personalAccountNavigationConfig.routes.map((item, index) => {
+    if ('children' in item) {
+      return item.children.map((child) => {
+        return (
+          <DropdownLink
+            key={child.path}
+            Icon={child.Icon}
+            path={child.path}
+            label={child.label}
+          />
+        );
+      });
+    }
+
+    if ('divider' in item) {
+      return <DropdownMenuSeparator key={index} />;
+    }
+  });
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger>
+        <Menu className={'h-9'} />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent sideOffset={10} className={'w-screen rounded-none'}>
+        <If condition={featuresFlagConfig.enableTeamAccounts}>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>
+              <Trans i18nKey={'common:yourAccounts'} />
+            </DropdownMenuLabel>
+
+            <HomeAccountSelector
+              userId={props.workspace.user.id}
+              accounts={props.workspace.accounts}
+              collisionPadding={0}
+            />
+          </DropdownMenuGroup>
+
+          <DropdownMenuSeparator />
+        </If>
+
+        <DropdownMenuGroup>{Links}</DropdownMenuGroup>
+
+        <DropdownMenuSeparator />
+
+        <SignOutDropdownItem onSignOut={() => signOut.mutateAsync()} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function DropdownLink(
+  props: React.PropsWithChildren<{
+    path: string;
+    label: string;
+    Icon: React.ReactNode;
+  }>,
+) {
+  return (
+    <DropdownMenuItem asChild key={props.path}>
+      <Link
+        href={props.path}
+        className={'flex h-12 w-full items-center space-x-4'}
+      >
+        {props.Icon}
+
+        <span>
+          <Trans i18nKey={props.label} defaults={props.label} />
+        </span>
+      </Link>
+    </DropdownMenuItem>
+  );
+}
+
+function SignOutDropdownItem(
+  props: React.PropsWithChildren<{
+    onSignOut: () => unknown;
+  }>,
+) {
+  return (
+    <DropdownMenuItem
+      className={'flex h-12 w-full items-center space-x-4'}
+      onClick={props.onSignOut}
+    >
+      <LogOut className={'h-6'} />
+
+      <span>
+        <Trans i18nKey={'common:signOut'} defaults={'Sign out'} />
+      </span>
+    </DropdownMenuItem>
+  );
+}

app/home/(user)/_components/home-page-header.tsx

@@ -0,0 +1,12 @@
+import { PageHeader } from '@kit/ui/page';
+
+export function HomeLayoutPageHeader(
+  props: React.PropsWithChildren<{
+    title: string | React.ReactNode;
+    description: string | React.ReactNode;
+  }>,
+) {
+  return (
+    <PageHeader description={props.description}>{props.children}</PageHeader>
+  );
+}

app/home/(user)/_components/home-sidebar.tsx

@@ -0,0 +1,61 @@
+import { If } from '@kit/ui/if';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarNavigation,
+} from '@kit/ui/shadcn-sidebar';
+import { cn } from '@kit/ui/utils';
+
+import { AppLogo } from '~/components/app-logo';
+import { ProfileAccountDropdownContainer } from '~/components/personal-account-dropdown-container';
+import featuresFlagConfig from '~/config/feature-flags.config';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { UserNotifications } from '~/home/(user)/_components/user-notifications';
+
+// home imports
+import type { UserWorkspace } from '../_lib/server/load-user-workspace';
+import { HomeAccountSelector } from './home-account-selector';
+
+interface HomeSidebarProps {
+  workspace: UserWorkspace;
+}
+
+export function HomeSidebar(props: HomeSidebarProps) {
+  const { workspace, user, accounts } = props.workspace;
+  const collapsible = personalAccountNavigationConfig.sidebarCollapsedStyle;
+
+  return (
+    <Sidebar collapsible={collapsible}>
+      <SidebarHeader className={'h-16 justify-center'}>
+        <div className={'flex items-center justify-between gap-x-3'}>
+          <If
+            condition={featuresFlagConfig.enableTeamAccounts}
+            fallback={
+              <AppLogo
+                className={cn(
+                  'p-2 group-data-[minimized=true]:max-w-full group-data-[minimized=true]:py-0',
+                )}
+              />
+            }
+          >
+            <HomeAccountSelector userId={user.id} accounts={accounts} />
+          </If>
+
+          <div className={'group-data-[minimized=true]:hidden'}>
+            <UserNotifications userId={user.id} />
+          </div>
+        </div>
+      </SidebarHeader>
+
+      <SidebarContent>
+        <SidebarNavigation config={personalAccountNavigationConfig} />
+      </SidebarContent>
+
+      <SidebarFooter>
+        <ProfileAccountDropdownContainer user={user} account={workspace} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

app/home/(user)/_components/user-notifications.tsx

@@ -0,0 +1,16 @@
+import { NotificationsPopover } from '@kit/notifications/components';
+
+import featuresFlagConfig from '~/config/feature-flags.config';
+
+export function UserNotifications(props: { userId: string }) {
+  if (!featuresFlagConfig.enableNotifications) {
+    return null;
+  }
+
+  return (
+    <NotificationsPopover
+      accountIds={[props.userId]}
+      realtime={featuresFlagConfig.realtimeNotifications}
+    />
+  );
+}

app/home/(user)/_lib/server/load-user-workspace.ts

@@ -0,0 +1,42 @@
+import { cache } from 'react';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+const shouldLoadAccounts = featureFlagsConfig.enableTeamAccounts;
+
+export type UserWorkspace = Awaited<ReturnType<typeof loadUserWorkspace>>;
+
+/**
+ * @name loadUserWorkspace
+ * @description
+ * Load the user workspace data. It's a cached per-request function that fetches the user workspace data.
+ * It can be used across the server components to load the user workspace data.
+ */
+export const loadUserWorkspace = cache(workspaceLoader);
+
+async function workspaceLoader() {
+  const client = getSupabaseServerClient();
+  const api = createAccountsApi(client);
+
+  const accountsPromise = shouldLoadAccounts
+    ? () => api.loadUserAccounts()
+    : () => Promise.resolve([]);
+
+  const workspacePromise = api.getAccountWorkspace();
+
+  const [accounts, workspace, user] = await Promise.all([
+    accountsPromise(),
+    workspacePromise,
+    requireUserInServerComponent(),
+  ]);
+
+  return {
+    accounts,
+    workspace,
+    user,
+  };
+}

app/home/(user)/billing/_components/personal-account-checkout-form.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useState, useTransition } from 'react';
+
+import dynamic from 'next/dynamic';
+
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons';
+
+import { PlanPicker } from '@kit/billing-gateway/components';
+import { useAppEvents } from '@kit/shared/events';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@kit/ui/card';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+
+import { createPersonalAccountCheckoutSession } from '../_lib/server/server-actions';
+
+const EmbeddedCheckout = dynamic(
+  async () => {
+    const { EmbeddedCheckout } = await import('@kit/billing-gateway/checkout');
+
+    return {
+      default: EmbeddedCheckout,
+    };
+  },
+  {
+    ssr: false,
+  },
+);
+
+export function PersonalAccountCheckoutForm(props: {
+  customerId: string | null | undefined;
+}) {
+  const [pending, startTransition] = useTransition();
+  const [error, setError] = useState(false);
+  const appEvents = useAppEvents();
+
+  const [checkoutToken, setCheckoutToken] = useState<string | undefined>(
+    undefined,
+  );
+
+  // only allow trial if the user is not already a customer
+  const canStartTrial = !props.customerId;
+
+  // If the checkout token is set, render the embedded checkout component
+  if (checkoutToken) {
+    return (
+      <EmbeddedCheckout
+        checkoutToken={checkoutToken}
+        provider={billingConfig.provider}
+        onClose={() => setCheckoutToken(undefined)}
+      />
+    );
+  }
+
+  // Otherwise, render the plan picker component
+  return (
+    <div>
+      <Card>
+        <CardHeader>
+          <CardTitle>
+            <Trans i18nKey={'common:planCardLabel'} />
+          </CardTitle>
+
+          <CardDescription>
+            <Trans i18nKey={'common:planCardDescription'} />
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className={'space-y-4'}>
+          <If condition={error}>
+            <ErrorAlert />
+          </If>
+
+          <PlanPicker
+            pending={pending}
+            config={billingConfig}
+            canStartTrial={canStartTrial}
+            onSubmit={({ planId, productId }) => {
+              startTransition(async () => {
+                try {
+                  appEvents.emit({
+                    type: 'checkout.started',
+                    payload: { planId },
+                  });
+
+                  const { checkoutToken } =
+                    await createPersonalAccountCheckoutSession({
+                      planId,
+                      productId,
+                    });
+
+                  setCheckoutToken(checkoutToken);
+                } catch {
+                  setError(true);
+                }
+              });
+            }}
+          />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+function ErrorAlert() {
+  return (
+    <Alert variant={'destructive'}>
+      <ExclamationTriangleIcon className={'h-4'} />
+
+      <AlertTitle>
+        <Trans i18nKey={'common:planPickerAlertErrorTitle'} />
+      </AlertTitle>
+
+      <AlertDescription>
+        <Trans i18nKey={'common:planPickerAlertErrorDescription'} />
+      </AlertDescription>
+    </Alert>
+  );
+}

app/home/(user)/billing/_lib/schema/personal-account-checkout.schema.ts

@@ -0,0 +1,6 @@
+import { z } from 'zod';
+
+export const PersonalAccountCheckoutSchema = z.object({
+  planId: z.string().min(1),
+  productId: z.string().min(1),
+});

app/home/(user)/billing/_lib/server/personal-account-billing-page.loader.ts

@@ -0,0 +1,47 @@
+import 'server-only';
+
+import { cache } from 'react';
+
+import { z } from 'zod';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+/**
+ * The variable BILLING_MODE represents the billing mode for a service. It can
+ * have either the value 'subscription' or 'one-time'. If not provided, the default
+ * value is 'subscription'. The value can be overridden by the environment variable
+ * BILLING_MODE.
+ *
+ * If the value is 'subscription', we fetch the subscription data for the user.
+ * If the value is 'one-time', we fetch the orders data for the user.
+ * if none of these suits your needs, please override the below function.
+ */
+const BILLING_MODE = z
+  .enum(['subscription', 'one-time'])
+  .default('subscription')
+  .parse(process.env.BILLING_MODE);
+
+/**
+ * Load the personal account billing page data for the given user.
+ * @param userId
+ * @returns The subscription data or the orders data and the billing customer ID.
+ * This function is cached per-request.
+ */
+export const loadPersonalAccountBillingPageData = cache(
+  personalAccountBillingPageDataLoader,
+);
+
+function personalAccountBillingPageDataLoader(userId: string) {
+  const client = getSupabaseServerClient();
+  const api = createAccountsApi(client);
+
+  const data =
+    BILLING_MODE === 'subscription'
+      ? api.getSubscription(userId)
+      : api.getOrder(userId);
+
+  const customerId = api.getCustomerId(userId);
+
+  return Promise.all([data, customerId]);
+}

app/home/(user)/billing/_lib/server/server-actions.ts

@@ -0,0 +1,58 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+
+import { enhanceAction } from '@kit/next/actions';
+import { getSupabaseServerClient } from '@kit/supabase/server-client';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+
+import { PersonalAccountCheckoutSchema } from '../schema/personal-account-checkout.schema';
+import { createUserBillingService } from './user-billing.service';
+
+/**
+ * @name enabled
+ * @description This feature flag is used to enable or disable personal account billing.
+ */
+const enabled = featureFlagsConfig.enablePersonalAccountBilling;
+
+/**
+ * @name createPersonalAccountCheckoutSession
+ * @description Creates a checkout session for a personal account.
+ */
+export const createPersonalAccountCheckoutSession = enhanceAction(
+  async function (data) {
+    if (!enabled) {
+      throw new Error('Personal account billing is not enabled');
+    }
+
+    const client = getSupabaseServerClient();
+    const service = createUserBillingService(client);
+
+    return await service.createCheckoutSession(data);
+  },
+  {
+    schema: PersonalAccountCheckoutSchema,
+  },
+);
+
+/**
+ * @name createPersonalAccountBillingPortalSession
+ * @description Creates a billing Portal session for a personal account
+ */
+export const createPersonalAccountBillingPortalSession = enhanceAction(
+  async () => {
+    if (!enabled) {
+      throw new Error('Personal account billing is not enabled');
+    }
+
+    const client = getSupabaseServerClient();
+    const service = createUserBillingService(client);
+
+    // get url to billing portal
+    const url = await service.createBillingPortalSession();
+
+    return redirect(url);
+  },
+  {},
+);

app/home/(user)/billing/_lib/server/user-billing.service.ts

@@ -0,0 +1,202 @@
+import 'server-only';
+
+import { SupabaseClient } from '@supabase/supabase-js';
+
+import { z } from 'zod';
+
+import { createAccountsApi } from '@kit/accounts/api';
+import { getProductPlanPair } from '@kit/billing';
+import { getBillingGatewayProvider } from '@kit/billing-gateway';
+import { getLogger } from '@kit/shared/logger';
+import { requireUser } from '@kit/supabase/require-user';
+
+import appConfig from '~/config/app.config';
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+import { Database } from '~/lib/database.types';
+
+import { PersonalAccountCheckoutSchema } from '../schema/personal-account-checkout.schema';
+
+export function createUserBillingService(client: SupabaseClient<Database>) {
+  return new UserBillingService(client);
+}
+
+/**
+ * @name UserBillingService
+ * @description Service for managing billing for personal accounts.
+ */
+class UserBillingService {
+  private readonly namespace = 'billing.personal-account';
+
+  constructor(private readonly client: SupabaseClient<Database>) {}
+
+  /**
+   * @name createCheckoutSession
+   * @description Create a checkout session for the user
+   * @param planId
+   * @param productId
+   */
+  async createCheckoutSession({
+    planId,
+    productId,
+  }: z.infer<typeof PersonalAccountCheckoutSchema>) {
+    // get the authenticated user
+    const { data: user, error } = await requireUser(this.client);
+
+    if (error ?? !user) {
+      throw new Error('Authentication required');
+    }
+
+    const service = await getBillingGatewayProvider(this.client);
+
+    // in the case of personal accounts
+    // the account ID is the same as the user ID
+    const accountId = user.id;
+
+    // the return URL for the checkout session
+    const returnUrl = getCheckoutSessionReturnUrl();
+
+    // find the customer ID for the account if it exists
+    // (eg. if the account has been billed before)
+    const api = createAccountsApi(this.client);
+    const customerId = await api.getCustomerId(accountId);
+
+    const product = billingConfig.products.find(
+      (item) => item.id === productId,
+    );
+
+    if (!product) {
+      throw new Error('Product not found');
+    }
+
+    const { plan } = getProductPlanPair(billingConfig, planId);
+    const logger = await getLogger();
+
+    logger.info(
+      {
+        name: `billing.personal-account`,
+        planId,
+        customerId,
+        accountId,
+      },
+      `User requested a personal account checkout session. Contacting provider...`,
+    );
+
+    try {
+      // call the payment gateway to create the checkout session
+      const { checkoutToken } = await service.createCheckoutSession({
+        returnUrl,
+        accountId,
+        customerEmail: user.email,
+        customerId,
+        plan,
+        variantQuantities: [],
+        enableDiscountField: product.enableDiscountField,
+      });
+
+      logger.info(
+        {
+          userId: user.id,
+        },
+        `Checkout session created. Returning checkout token to client...`,
+      );
+
+      // return the checkout token to the client
+      // so we can call the payment gateway to complete the checkout
+      return {
+        checkoutToken,
+      };
+    } catch (error) {
+      logger.error(
+        {
+          name: `billing.personal-account`,
+          planId,
+          customerId,
+          accountId,
+          error,
+        },
+        `Checkout session not created due to an error`,
+      );
+
+      throw new Error(`Failed to create a checkout session`);
+    }
+  }
+
+  /**
+   * @name createBillingPortalSession
+   * @description Create a billing portal session for the user
+   * @returns The URL to redirect the user to the billing portal
+   */
+  async createBillingPortalSession() {
+    const { data, error } = await requireUser(this.client);
+
+    if (error ?? !data) {
+      throw new Error('Authentication required');
+    }
+
+    const service = await getBillingGatewayProvider(this.client);
+    const logger = await getLogger();
+
+    const accountId = data.id;
+    const api = createAccountsApi(this.client);
+    const customerId = await api.getCustomerId(accountId);
+    const returnUrl = getBillingPortalReturnUrl();
+
+    if (!customerId) {
+      throw new Error('Customer not found');
+    }
+
+    const ctx = {
+      name: this.namespace,
+      customerId,
+      accountId,
+    };
+
+    logger.info(
+      ctx,
+      `User requested a Billing Portal session. Contacting provider...`,
+    );
+
+    let url: string;
+
+    try {
+      const session = await service.createBillingPortalSession({
+        customerId,
+        returnUrl,
+      });
+
+      url = session.url;
+    } catch (error) {
+      logger.error(
+        {
+          error,
+          ...ctx,
+        },
+        `Failed to create a Billing Portal session`,
+      );
+
+      throw new Error(
+        `Encountered an error creating the Billing Portal session`,
+      );
+    }
+
+    logger.info(ctx, `Session successfully created.`);
+
+    // redirect user to billing portal
+    return url;
+  }
+}
+
+function getCheckoutSessionReturnUrl() {
+  return new URL(
+    pathsConfig.app.personalAccountBillingReturn,
+    appConfig.url,
+  ).toString();
+}
+
+function getBillingPortalReturnUrl() {
+  return new URL(
+    pathsConfig.app.personalAccountBilling,
+    appConfig.url,
+  ).toString();
+}

app/home/(user)/billing/error.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+// We reuse the page from the billing module
+// as there is no need to create a new one.
+import BillingErrorPage from '~/home/[account]/billing/error';
+
+export default BillingErrorPage;

app/home/(user)/billing/layout.tsx

@@ -0,0 +1,15 @@
+import { notFound } from 'next/navigation';
+
+import featureFlagsConfig from '~/config/feature-flags.config';
+
+function UserBillingLayout(props: React.PropsWithChildren) {
+  const isEnabled = featureFlagsConfig.enablePersonalAccountBilling;
+
+  if (!isEnabled) {
+    notFound();
+  }
+
+  return <>{props.children}</>;
+}
+
+export default UserBillingLayout;

app/home/(user)/billing/page.tsx

@@ -0,0 +1,92 @@
+import {
+  BillingPortalCard,
+  CurrentLifetimeOrderCard,
+  CurrentSubscriptionCard,
+} from '@kit/billing-gateway/components';
+import { AppBreadcrumbs } from '@kit/ui/app-breadcrumbs';
+import { If } from '@kit/ui/if';
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+import { requireUserInServerComponent } from '~/lib/server/require-user-in-server-component';
+
+// local imports
+import { HomeLayoutPageHeader } from '../_components/home-page-header';
+import { createPersonalAccountBillingPortalSession } from '../billing/_lib/server/server-actions';
+import { PersonalAccountCheckoutForm } from './_components/personal-account-checkout-form';
+import { loadPersonalAccountBillingPageData } from './_lib/server/personal-account-billing-page.loader';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('account:billingTab');
+
+  return {
+    title,
+  };
+};
+
+async function PersonalAccountBillingPage() {
+  const user = await requireUserInServerComponent();
+
+  const [data, customerId] = await loadPersonalAccountBillingPageData(user.id);
+
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'common:routes.billing'} />}
+        description={<AppBreadcrumbs />}
+      />
+
+      <PageBody>
+        <div className={'flex flex-col space-y-4'}>
+          <If condition={!data}>
+            <PersonalAccountCheckoutForm customerId={customerId} />
+
+            <If condition={customerId}>
+              <CustomerBillingPortalForm />
+            </If>
+          </If>
+
+          <If condition={data}>
+            {(data) => (
+              <div className={'flex w-full max-w-2xl flex-col space-y-6'}>
+                {'active' in data ? (
+                  <CurrentSubscriptionCard
+                    subscription={data}
+                    config={billingConfig}
+                  />
+                ) : (
+                  <CurrentLifetimeOrderCard
+                    order={data}
+                    config={billingConfig}
+                  />
+                )}
+
+                <If condition={!data}>
+                  <PersonalAccountCheckoutForm customerId={customerId} />
+                </If>
+
+                <If condition={customerId}>
+                  <CustomerBillingPortalForm />
+                </If>
+              </div>
+            )}
+          </If>
+        </div>
+      </PageBody>
+    </>
+  );
+}
+
+export default withI18n(PersonalAccountBillingPage);
+
+function CustomerBillingPortalForm() {
+  return (
+    <form action={createPersonalAccountBillingPortalSession}>
+      <BillingPortalCard />
+    </form>
+  );
+}

app/home/(user)/billing/return/page.tsx

@@ -0,0 +1,5 @@
+// We reuse the page from the billing module
+// as there is no need to create a new one.
+import ReturnCheckoutSessionPage from '~/home/[account]/billing/return/page';
+
+export default ReturnCheckoutSessionPage;

app/home/(user)/layout.tsx

@@ -0,0 +1,112 @@
+import { use } from 'react';
+
+import { cookies } from 'next/headers';
+
+import { z } from 'zod';
+
+import { UserWorkspaceContextProvider } from '@kit/accounts/components';
+import { Page, PageMobileNavigation, PageNavigation } from '@kit/ui/page';
+import { SidebarProvider } from '@kit/ui/shadcn-sidebar';
+
+import { AppLogo } from '~/components/app-logo';
+import { personalAccountNavigationConfig } from '~/config/personal-account-navigation.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// home imports
+import { HomeMenuNavigation } from './_components/home-menu-navigation';
+import { HomeMobileNavigation } from './_components/home-mobile-navigation';
+import { HomeSidebar } from './_components/home-sidebar';
+import { loadUserWorkspace } from './_lib/server/load-user-workspace';
+
+function UserHomeLayout({ children }: React.PropsWithChildren) {
+  const state = use(getLayoutState());
+
+  if (state.style === 'sidebar') {
+    return <SidebarLayout>{children}</SidebarLayout>;
+  }
+
+  return <HeaderLayout>{children}</HeaderLayout>;
+}
+
+export default withI18n(UserHomeLayout);
+
+function SidebarLayout({ children }: React.PropsWithChildren) {
+  const workspace = use(loadUserWorkspace());
+  const state = use(getLayoutState());
+
+  return (
+    <UserWorkspaceContextProvider value={workspace}>
+      <SidebarProvider defaultOpen={state.open}>
+        <Page style={'sidebar'}>
+          <PageNavigation>
+            <HomeSidebar workspace={workspace} />
+          </PageNavigation>
+
+          <PageMobileNavigation className={'flex items-center justify-between'}>
+            <MobileNavigation workspace={workspace} />
+          </PageMobileNavigation>
+
+          {children}
+        </Page>
+      </SidebarProvider>
+    </UserWorkspaceContextProvider>
+  );
+}
+
+function HeaderLayout({ children }: React.PropsWithChildren) {
+  const workspace = use(loadUserWorkspace());
+
+  return (
+    <UserWorkspaceContextProvider value={workspace}>
+      <Page style={'header'}>
+        <PageNavigation>
+          <HomeMenuNavigation workspace={workspace} />
+        </PageNavigation>
+
+        <PageMobileNavigation className={'flex items-center justify-between'}>
+          <MobileNavigation workspace={workspace} />
+        </PageMobileNavigation>
+
+        {children}
+      </Page>
+    </UserWorkspaceContextProvider>
+  );
+}
+
+function MobileNavigation({
+  workspace,
+}: {
+  workspace: Awaited<ReturnType<typeof loadUserWorkspace>>;
+}) {
+  return (
+    <>
+      <AppLogo />
+
+      <HomeMobileNavigation workspace={workspace} />
+    </>
+  );
+}
+
+async function getLayoutState() {
+  const cookieStore = await cookies();
+
+  const LayoutStyleSchema = z.enum(['sidebar', 'header', 'custom']);
+
+  const layoutStyleCookie = cookieStore.get('layout-style');
+  const sidebarOpenCookie = cookieStore.get('sidebar:state');
+
+  const sidebarOpen = sidebarOpenCookie
+    ? sidebarOpenCookie.value === 'false'
+    : !personalAccountNavigationConfig.sidebarCollapsed;
+
+  const parsedStyle = LayoutStyleSchema.safeParse(layoutStyleCookie?.value);
+
+  const style = parsedStyle.success
+    ? parsedStyle.data
+    : personalAccountNavigationConfig.style;
+
+  return {
+    open: sidebarOpen,
+    style,
+  };
+}

app/home/(user)/loading.tsx

@@ -0,0 +1,3 @@
+import { GlobalLoader } from '@kit/ui/global-loader';
+
+export default GlobalLoader;

app/home/(user)/page.tsx

@@ -0,0 +1,32 @@
+import { PageBody } from '@kit/ui/page';
+import { Trans } from '@kit/ui/trans';
+
+import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+// local imports
+import { HomeLayoutPageHeader } from './_components/home-page-header';
+
+export const generateMetadata = async () => {
+  const i18n = await createI18nServerInstance();
+  const title = i18n.t('account:homePage');
+
+  return {
+    title,
+  };
+};
+
+function UserHomePage() {
+  return (
+    <>
+      <HomeLayoutPageHeader
+        title={<Trans i18nKey={'common:routes.home'} />}
+        description={<Trans i18nKey={'common:homeTabDescription'} />}
+      />
+
+      <PageBody></PageBody>
+    </>
+  );
+}
+
+export default withI18n(UserHomePage);