B2B-88: add starter kit structure and elements

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,182 @@
+import Image from 'next/image';
+import Link from 'next/link';
+
+import { ArrowRightIcon, LayoutDashboard } from 'lucide-react';
+
+import { PricingTable } from '@kit/billing-gateway/marketing';
+import {
+  CtaButton,
+  FeatureCard,
+  FeatureGrid,
+  FeatureShowcase,
+  FeatureShowcaseIconContainer,
+  Hero,
+  Pill,
+  PillActionButton,
+  SecondaryHero,
+} from '@kit/ui/marketing';
+import { Trans } from '@kit/ui/trans';
+
+import billingConfig from '~/config/billing.config';
+import pathsConfig from '~/config/paths.config';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+function Home() {
+  return (
+    <div className={'mt-4 flex flex-col space-y-24 py-14'}>
+      <div className={'container mx-auto'}>
+        <Hero
+          pill={
+            <Pill label={'New'}>
+              <span>The SaaS Starter Kit for ambitious developers</span>
+              <PillActionButton asChild>
+                <Link href={'/auth/sign-up'}>
+                  <ArrowRightIcon className={'h-4 w-4'} />
+                </Link>
+              </PillActionButton>
+            </Pill>
+          }
+          title={
+            <>
+              <span>The ultimate SaaS Starter</span>
+              <span>for your next project</span>
+            </>
+          }
+          subtitle={
+            <span>
+              Build and Ship a SaaS faster than ever before with the next-gen
+              SaaS Starter Kit. Ship your SaaS in days, not months.
+            </span>
+          }
+          cta={<MainCallToActionButton />}
+          image={
+            <Image
+              priority
+              className={
+                'dark:border-primary/10 rounded-xl border border-gray-200'
+              }
+              width={3558}
+              height={2222}
+              src={`/images/dashboard.webp`}
+              alt={`App Image`}
+            />
+          }
+        />
+      </div>
+
+      <div className={'container 2 mx-auto'}>
+        <div
+          className={'flex flex-col space-y-16 xl:space-y-32 2xl:space-y-36'}
+        >
+          <FeatureShowcase
+            heading={
+              <>
+                <b className="font-medium tracking-tighter dark:text-white">
+                  The ultimate SaaS Starter Kit
+                </b>
+                .{' '}
+                <span className="text-muted-foreground font-normal tracking-tighter">
+                  Unleash your creativity and build your SaaS faster than ever
+                  with Makerkit.
+                </span>
+              </>
+            }
+            icon={
+              <FeatureShowcaseIconContainer>
+                <LayoutDashboard className="h-5" />
+                <span>All-in-one solution</span>
+              </FeatureShowcaseIconContainer>
+            }
+          >
+            <FeatureGrid>
+              <FeatureCard
+                className={'relative col-span-1 overflow-hidden'}
+                label={'Beautiful Dashboard'}
+                description={`Makerkit provides a beautiful dashboard to manage your SaaS business.`}
+              ></FeatureCard>
+
+              <FeatureCard
+                className={'relative col-span-1 w-full overflow-hidden'}
+                label={'Authentication'}
+                description={`Makerkit provides a variety of providers to allow your users to sign in.`}
+              ></FeatureCard>
+
+              <FeatureCard
+                className={'relative col-span-1 overflow-hidden'}
+                label={'Multi Tenancy'}
+                description={`Multi tenant memberships for your SaaS business.`}
+              />
+
+              <FeatureCard
+                className={'relative col-span-1 overflow-hidden md:col-span-2'}
+                label={'Billing'}
+                description={`Makerkit supports multiple payment gateways to charge your customers.`}
+              />
+
+              <FeatureCard
+                className={'relative col-span-1 overflow-hidden'}
+                label={'Plugins'}
+                description={`Extend your SaaS with plugins that you can install using the CLI.`}
+              />
+            </FeatureGrid>
+          </FeatureShowcase>
+        </div>
+      </div>
+
+      <div className={'container mx-auto'}>
+        <div
+          className={
+            'flex flex-col items-center justify-center space-y-16 py-16'
+          }
+        >
+          <SecondaryHero
+            pill={<Pill label="Start for free">No credit card required.</Pill>}
+            heading="Fair pricing for all types of businesses"
+            subheading="Get started on our free plan and upgrade when you are ready."
+          />
+
+          <div className={'w-full'}>
+            <PricingTable
+              config={billingConfig}
+              paths={{
+                signUp: pathsConfig.auth.signUp,
+                return: pathsConfig.app.home,
+              }}
+            />
+          </div>
+        </div>
+      </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={'/contact'}>
+          <Trans i18nKey={'common:contactUs'} />
+        </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);