feature(public,docs): new public website and docs

2024-11-13 21:15:46 +01:00
parent fc2a019e1d
commit a022cb4831
234 changed files with 9341 additions and 6154 deletions
--- a/apps/public/app/(content)/[...pages]/page.tsx
+++ b/apps/public/app/(content)/[...pages]/page.tsx
@@ -0,0 +1,96 @@
+import { url } from '@/app/layout.config';
+import { pageSource } from '@/lib/source';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { pages: string[] };
+}): Promise<Metadata> {
+  const { pages } = await params;
+  const page = await pageSource.getPage(pages);
+
+  if (!page) {
+    return {
+      title: 'Page Not Found',
+    };
+  }
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+    alternates: {
+      canonical: url(page.url),
+    },
+    openGraph: {
+      title: page.data.title,
+      description: page.data.description,
+      type: 'website',
+      url: url(page.url),
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: page.data.title,
+      description: page.data.description,
+    },
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: { pages: string[] };
+}) {
+  const { pages } = await params;
+  const page = await pageSource.getPage(pages);
+  const Body = page?.data.body;
+
+  if (!page || !Body) {
+    return notFound();
+  }
+
+  // Create the JSON-LD data
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: page.data.title,
+    publisher: {
+      '@type': 'Organization',
+      name: 'OpenPanel',
+      logo: {
+        '@type': 'ImageObject',
+        url: url('/logo.png'),
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': url(page.url),
+    },
+  };
+
+  return (
+    <div>
+      <Script
+        id="page-schema"
+        strategy="beforeInteractive"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <article className="container max-w-4xl col">
+        <div className="py-16 col gap-3">
+          <h1 className="text-5xl font-bold">{page.data.title}</h1>
+          {page.data.description && (
+            <p className="text-muted-foreground text-xl">
+              {page.data.description}
+            </p>
+          )}
+        </div>
+        <div className="prose">
+          <Body />
+        </div>
+      </article>
+    </div>
+  );
+}
--- a/apps/public/app/(content)/articles/[articleSlug]/page.tsx
+++ b/apps/public/app/(content)/articles/[articleSlug]/page.tsx
@@ -0,0 +1,179 @@
+import { url, getAuthor } from '@/app/layout.config';
+import { SingleSwirl } from '@/components/Swirls';
+import { Logo } from '@/components/logo';
+import { SectionHeader } from '@/components/section';
+import { Toc } from '@/components/toc';
+import { Button } from '@/components/ui/button';
+import { articleSource } from '@/lib/source';
+import { ArrowLeftIcon } from 'lucide-react';
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import Script from 'next/script';
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { articleSlug: string };
+}): Promise<Metadata> {
+  const { articleSlug } = await params;
+  const article = await articleSource.getPage([articleSlug]);
+  const author = getAuthor(article?.data.team);
+
+  if (!article) {
+    return {
+      title: 'Article Not Found',
+    };
+  }
+
+  return {
+    title: article.data.title,
+    description: article.data.description,
+    authors: [{ name: author.name }],
+    alternates: {
+      canonical: url(article.url),
+    },
+    openGraph: {
+      title: article.data.title,
+      description: article.data.description,
+      type: 'article',
+      publishedTime: article.data.date.toISOString(),
+      authors: author.name,
+      images: url(article.data.cover),
+      url: url(article.url),
+    },
+    twitter: {
+      card: 'summary_large_image',
+      title: article.data.title,
+      description: article.data.description,
+      images: url(article.data.cover),
+    },
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: { articleSlug: string };
+}) {
+  const { articleSlug } = await params;
+  const article = await articleSource.getPage([articleSlug]);
+  const Body = article?.data.body;
+  const author = getAuthor(article?.data.team);
+  const goBackUrl = '/articles';
+
+  if (!Body) {
+    return notFound();
+  }
+
+  // Create the JSON-LD data
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'Article',
+    headline: article?.data.title,
+    datePublished: article?.data.date.toISOString(),
+    author: {
+      '@type': 'Person',
+      name: author.name,
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'OpenPanel',
+      logo: {
+        '@type': 'ImageObject',
+        url: url('/logo.png'),
+      },
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': url(article.url),
+    },
+    image: {
+      '@type': 'ImageObject',
+      url: url(article.data.cover),
+    },
+  };
+
+  return (
+    <div>
+      <Script
+        strategy="beforeInteractive"
+        id="article-schema"
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <article className="container max-w-5xl col">
+        <div className="py-16">
+          <Link
+            href={goBackUrl}
+            className="flex items-center gap-2 mb-4 text-muted-foreground"
+          >
+            <ArrowLeftIcon className="w-4 h-4" />
+            <span>Back to all articles</span>
+          </Link>
+          <div className="flex-col-reverse col md:row gap-8">
+            <div className="col flex-1">
+              <h1 className="text-5xl font-bold leading-tight">
+                {article?.data.title}
+              </h1>
+
+              <div className="row gap-4 items-center mt-8">
+                <div className="size-10 center-center bg-black rounded-full">
+                  <Logo className="w-6 h-6 fill-white" />
+                </div>
+                <div className="col">
+                  <p className="font-medium">{author.name}</p>
+                  <p className="text-muted-foreground text-sm">
+                    {article?.data.date.toLocaleDateString()}
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="col">
+              <Image
+                src={article?.data.cover}
+                alt={article?.data.title}
+                width={323}
+                height={181}
+                className="rounded-lg w-full md:w-auto"
+              />
+            </div>
+          </div>
+        </div>
+        <div className="relative">
+          <div className="bg-gradient-to-b from-background to-transparent">
+            <div className="float-right pl-12 pb-12 hidden md:block article:hidden">
+              <Toc toc={article?.data.toc} />
+            </div>
+            <div className="prose">
+              <Body />
+            </div>
+          </div>
+          <div className="absolute top-0 -right-[300px] w-[300px] pl-12 h-full article:block hidden">
+            <div className="sticky top-32 col gap-8">
+              <Toc toc={article?.data.toc} />
+
+              <section className="overflow-hidden relative bg-foreground dark:bg-background-dark text-background dark:text-foreground rounded-xl py-16">
+                <SingleSwirl className="pointer-events-none absolute top-0 bottom-0 left-0 size-[300px]" />
+                <SingleSwirl className="pointer-events-none rotate-180 absolute top-0 bottom-0 -right-0 opacity-50 size-[300px]" />
+                <div className="container center-center col">
+                  <SectionHeader
+                    className="mb-8"
+                    title="Try it"
+                    description="Give it a spin for free. No credit card required."
+                  />
+                  <Button size="lg" variant="secondary" asChild>
+                    <Link href="https://dashboard.openpanel.dev/register">
+                      Get started today!
+                    </Link>
+                  </Button>
+                </div>
+              </section>
+            </div>
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}
--- a/apps/public/app/(content)/articles/page.tsx
+++ b/apps/public/app/(content)/articles/page.tsx
@@ -0,0 +1,72 @@
+import { url } from '@/app/layout.config';
+import { articleSource } from '@/lib/source';
+import type { Metadata } from 'next';
+import Image from 'next/image';
+import Link from 'next/link';
+
+const title = 'Articles';
+const description = 'Read our latest articles';
+
+export const metadata: Metadata = {
+  title,
+  description,
+  alternates: {
+    canonical: url('/articles'),
+  },
+  openGraph: {
+    title,
+    description,
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title,
+    description,
+  },
+};
+
+export default async function Page() {
+  const articles = (await articleSource.getPages()).sort(
+    (a, b) => b.data.date.getTime() - a.data.date.getTime(),
+  );
+  return (
+    <div>
+      <div className="container col">
+        <div className="py-16">
+          <h1 className="text-center text-7xl font-bold">Articles</h1>
+        </div>
+        <div className="grid grid-cols-3 gap-8">
+          {articles.map((item) => (
+            <Link
+              href={item.url}
+              key={item.url}
+              className="border rounded-lg overflow-hidden bg-background-light col hover:scale-105 transition-all duration-300 hover:shadow-lg hover:shadow-background-dark"
+            >
+              <Image
+                src={item.data.cover}
+                alt={item.data.title}
+                width={323}
+                height={181}
+              />
+              <span className="p-4 col flex-1">
+                {item.data.tag && (
+                  <span className="font-mono text-xs mb-2">
+                    {item.data.tag}
+                  </span>
+                )}
+                <span className="flex-1 mb-6">
+                  <h2 className="text-xl font-semibold">{item.data.title}</h2>
+                </span>
+                <p className="text-sm text-muted-foreground">
+                  {[item.data.team, item.data.date.toLocaleDateString()]
+                    .filter(Boolean)
+                    .join(' · ')}
+                </p>
+              </span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/apps/public/app/(content)/layout.tsx
+++ b/apps/public/app/(content)/layout.tsx
@@ -0,0 +1,20 @@
+import { Footer } from '@/components/footer';
+import { HeroContainer } from '@/components/hero';
+import Navbar from '@/components/navbar';
+import type { ReactNode } from 'react';
+
+export default function Layout({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <main className="overflow-hidden">
+      <HeroContainer className="h-screen pointer-events-none" />
+      <div className="absolute h-screen inset-0 radial-gradient-dot-pages select-none pointer-events-none" />
+      <div className="-mt-[calc(100vh-100px)] relative min-h-[500px] pb-12">
+        {children}
+      </div>
+    </main>
+  );
+}
--- a/apps/public/app/api/search/route.ts
+++ b/apps/public/app/api/search/route.ts
@@ -0,0 +1,4 @@
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export const { GET } = createFromSource(source);
--- a/apps/public/app/docs/[[...slug]]/page.tsx
+++ b/apps/public/app/docs/[[...slug]]/page.tsx
@@ -0,0 +1,46 @@
+import { source } from '@/lib/source';
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={{ ...defaultMdxComponents }} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}
--- a/apps/public/app/docs/layout.tsx
+++ b/apps/public/app/docs/layout.tsx
@@ -0,0 +1,12 @@
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import type { ReactNode } from 'react';
+import { baseOptions } from '@/app/layout.config';
+import { source } from '@/lib/source';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}
--- a/apps/public/app/global.css
+++ b/apps/public/app/global.css
@@ -0,0 +1,200 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --green: 156 71% 67%;
+    --red: 351 89% 72%;
+    --background: 0 0% 98%;
+    --background-light: 0 0% 100%;
+    --background-dark: 0 0% 96%;
+    --foreground: 0 0% 9%;
+    --foreground-dark: 0 0% 7.5%;
+    --foreground-light: 0 0% 11%;
+    --card: 0 0% 98%;
+    --card-foreground: 0 0% 9%;
+    --popover: 0 0% 98%;
+    --popover-foreground: 0 0% 9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 9%;
+    --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%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 9%;
+    --background-dark: 0 0% 7.5%;
+    --background-light: 0 0% 11%;
+    --foreground: 0 0% 98%;
+    --foreground-light: 0 0% 100%;
+    --foreground-dark: 0 0% 96%;
+    --card: 0 0% 9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply !bg-[hsl(var(--background))] text-foreground font-sans text-base antialiased flex flex-col min-h-screen;
+  }
+}
+
+@layer components {
+  .container {
+    @apply max-w-6xl mx-auto px-6 md:px-10 lg:px-14 w-full;
+  }
+
+  .pulled {
+    @apply -mx-2 md:-mx-6 lg:-mx-10 xl:-mx-20;
+  }
+
+  .row {
+    @apply flex flex-row;
+  }
+
+  .col {
+    @apply flex flex-col;
+  }
+
+  .center-center {
+    @apply flex items-center justify-center text-center;
+  }
+}
+
+strong {
+  @apply font-semibold;
+}
+
+
+.radial-gradient {
+  background: #BECCDF;
+  background: radial-gradient(at bottom, hsl(var(--background-light)), hsl(var(--background)));
+}
+
+.radial-gradient-dot-1 {
+  background: #BECCDF;
+  background: radial-gradient(at 50% 20%, hsl(var(--background-light)), transparent);
+}
+
+.radial-gradient-dot-pages {
+  background: #BECCDF;
+  background: radial-gradient(at 50% 50%, hsl(var(--background)), hsl(var(--background)/0.2));
+}
+
+.animated-iframe-gradient {
+  position: relative;
+  overflow: hidden;
+  background: transparent;
+}
+
+.animated-iframe-gradient:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 1600px;
+  height: 1600px;
+  background: linear-gradient(250deg, hsl(var(--foreground)/0.9), transparent);
+  
+  animation: GradientRotate 8s linear infinite;
+}
+@keyframes GradientRotate {
+  0% { transform: translate(-50%, -50%) rotate(0deg); }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+.line-before {
+  position: relative;
+  padding: 16px;
+}
+.line-before:before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(4px*-32);
+  bottom: calc(4px*-32);
+  left: 0;
+  width: 1px;
+  background: hsl(var(--foreground)/0.1);
+}
+.line-after {
+  position: relative;
+  padding: 16px;
+}
+.line-after:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: calc(4px*-32);
+  bottom: calc(4px*-32);
+  right: 0;
+  width: 1px;
+  background: hsl(var(--foreground)/0.1);
+}
+
+.animate-fade-up {
+  animation: animateFadeUp 0.5s ease-in-out;
+  animation-fill-mode: both; 
+}
+
+@keyframes animateFadeUp {
+  0% { transform: translateY(0.5rem); scale: 0.95; }
+  100% { transform: translateY(0); scale: 1; }
+}
+
+.animate-fade-down {
+  animation: animateFadeDown 0.5s ease-in-out;
+  animation-fill-mode: both;
+}
+
+@keyframes animateFadeDown {
+  0% { transform: translateY(-1rem); }
+  100% { transform: translateY(0); }
+}
+
+/* Docs */
+
+h1 code, h2 code, h3 code, h4 code, h5 code, h6 code {
+  font-size: inherit !important;
+}
--- a/apps/public/app/layout.config.tsx
+++ b/apps/public/app/layout.config.tsx
@@ -0,0 +1,55 @@
+import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+
+/**
+ * Shared layout configurations
+ *
+ * you can configure layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+
+export const siteName = 'OpenPanel';
+export const baseUrl = 'https://openpanel.dev';
+export const url = (path: string) => `${baseUrl}${path}`;
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: siteName,
+  },
+  links: [
+    {
+      type: 'main',
+      text: 'Home',
+      url: '/',
+      active: 'nested-url',
+    },
+    {
+      type: 'main',
+      text: 'Pricing',
+      url: '/pricing',
+      active: 'nested-url',
+    },
+    {
+      type: 'main',
+      text: 'Documentation',
+      url: '/docs',
+      active: 'nested-url',
+    },
+    {
+      type: 'main',
+      text: 'Articles',
+      url: '/articles',
+      active: 'nested-url',
+    },
+  ],
+} as const;
+
+export const authors = [
+  {
+    name: 'OpenPanel Team',
+    url: 'https://openpanel.com',
+  },
+];
+
+export const getAuthor = (author?: string) => {
+  return authors.find((a) => a.name === author)!;
+};
--- a/apps/public/app/layout.tsx
+++ b/apps/public/app/layout.tsx
@@ -0,0 +1,72 @@
+import './global.css';
+import { RootProvider } from 'fumadocs-ui/provider';
+import type { ReactNode } from 'react';
+
+import { Footer } from '@/components/footer';
+import Navbar from '@/components/navbar';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { getGithubRepoInfo } from '@/lib/github';
+import { cn } from 'fumadocs-ui/components/api';
+import { GeistMono } from 'geist/font/mono';
+import { GeistSans } from 'geist/font/sans';
+import type { Metadata, Viewport } from 'next';
+import { url, baseUrl, siteName } from './layout.config';
+
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  userScalable: true,
+  themeColor: [
+    { media: '(prefers-color-scheme: light)', color: '#fafafa' },
+    { media: '(prefers-color-scheme: dark)', color: '#171717' },
+  ],
+};
+
+const description = `${siteName} is a simple, affordable open-source alternative to Mixpanel for web and product analytics. Get powerful insights without the complexity.`;
+
+export const metadata: Metadata = {
+  title: {
+    default: siteName,
+    template: `%s | ${siteName}`,
+  },
+  description,
+  alternates: {
+    canonical: baseUrl,
+  },
+  icons: {
+    apple: '/apple-touch-icon.png',
+    icon: '/favicon.ico',
+  },
+  manifest: '/site.webmanifest',
+  openGraph: {
+    title: siteName,
+    description,
+    siteName: siteName,
+    url: baseUrl,
+    type: 'website',
+    images: [
+      {
+        url: url('/ogimage.jpg'),
+        width: 1200,
+        height: 630,
+        alt: siteName,
+      },
+    ],
+  },
+};
+
+export default async function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body className={cn(GeistSans.variable, GeistMono.variable)}>
+        <RootProvider>
+          <TooltipProvider>
+            <Navbar />
+            {children}
+            <Footer />
+          </TooltipProvider>
+        </RootProvider>
+      </body>
+    </html>
+  );
+}
--- a/apps/public/app/manifest.ts
+++ b/apps/public/app/manifest.ts
@@ -0,0 +1,22 @@
+import type { MetadataRoute } from 'next';
+
+import { metadata } from './layout';
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: metadata.title as string,
+    short_name: 'Openpanel.dev',
+    description: metadata.description!,
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#fff',
+    theme_color: '#fff',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  };
+}
--- a/apps/public/app/not-found.tsx
+++ b/apps/public/app/not-found.tsx
@@ -0,0 +1,28 @@
+import { baseOptions } from '@/app/layout.config';
+import { Footer } from '@/components/footer';
+import { HeroContainer } from '@/components/hero';
+import Navbar from '@/components/navbar';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import type { ReactNode } from 'react';
+
+export default function NotFound({
+  children,
+}: {
+  children: ReactNode;
+}): React.ReactElement {
+  return (
+    <div>
+      <HeroContainer className="h-screen center-center">
+        <div className="relative z-10 col gap-2">
+          <div className="text-[150px] font-mono font-bold opacity-5 -mb-4">
+            404
+          </div>
+          <h1 className="text-6xl font-bold">Not Found</h1>
+          <p className="text-xl text-muted-foreground">
+            Awkward, we couldn&apos;t find what you were looking for.
+          </p>
+        </div>
+      </HeroContainer>
+    </div>
+  );
+}
--- a/apps/public/app/page.tsx
+++ b/apps/public/app/page.tsx
@@ -0,0 +1,28 @@
+import { Hero } from '@/components/hero';
+import { Faq } from '@/components/sections/faq';
+import { Features } from '@/components/sections/features';
+import { Pricing } from '@/components/sections/pricing';
+import { Sdks } from '@/components/sections/sdks';
+import { Stats } from '@/components/sections/stats';
+import { Testimonials } from '@/components/sections/testimonials';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'An open-source alternative to Mixpanel',
+};
+
+export const revalidate = 3600;
+
+export default function HomePage() {
+  return (
+    <main>
+      <Hero />
+      <Features />
+      <Testimonials />
+      <Stats />
+      <Faq />
+      <Pricing />
+      <Sdks />
+    </main>
+  );
+}
--- a/apps/public/app/sitemap.ts
+++ b/apps/public/app/sitemap.ts
@@ -0,0 +1,40 @@
+import { articleSource, source } from '@/lib/source';
+import type { MetadataRoute } from 'next';
+import { url } from './layout.config';
+const articles = await articleSource.getPages();
+const docs = await source.getPages();
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: url('/'),
+      lastModified: new Date(),
+      changeFrequency: 'yearly',
+      priority: 1,
+    },
+    {
+      url: url('/docs'),
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+      priority: 0.8,
+    },
+    {
+      url: url('/articles'),
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 0.5,
+    },
+    ...articles.map((item) => ({
+      url: url(item.url),
+      lastModified: item.data.lastModified,
+      changeFrequency: 'yearly' as const,
+      priority: 0.5,
+    })),
+    ...docs.map((item) => ({
+      url: url(item.url),
+      lastModified: item.data.lastModified,
+      changeFrequency: 'monthly' as const,
+      priority: 0.3,
+    })),
+  ];
+}