chore: improve home and pricing (#614)

apps/web/contentlayer.config.ts

···
 import remarkGfm from "remark-gfm";
 
 import { Changelog } from "./src/contentlayer/documents/changelog";
+import { FAQ } from "./src/contentlayer/documents/faq";
 import { LegalPost } from "./src/contentlayer/documents/legal";
 import { Post } from "./src/contentlayer/documents/post";
 import autolinkHeadings from "./src/contentlayer/plugins/autolink-headings";
···
 
 export default makeSource({
   contentDirPath: "src/content/",
-  documentTypes: [Post, LegalPost, Changelog],
+  documentTypes: [Post, LegalPost, Changelog, FAQ],
   mdx: {
     remarkPlugins: [remarkGfm],
     rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],

apps/web/src/app/(redirect)/cal/page.tsx

···
+import { redirect } from "next/navigation";
+
+export default function CalRedirect() {
+  return redirect("http://cal.com/team/openstatus/30min");
+}

apps/web/src/app/page.tsx

···
 import { MarketingLayout } from "@/components/layout/marketing-layout";
 import { AlertCard } from "@/components/marketing/alert/card";
-import { FAQs } from "@/components/marketing/faqs";
+import { BottomCTA } from "@/components/marketing/bottom-cta";
 import { Hero } from "@/components/marketing/hero";
+import { LatestChangelogs } from "@/components/marketing/lastest-changelogs";
 import { MonitoringCard } from "@/components/marketing/monitor/card";
 import { Partners } from "@/components/marketing/partners";
 import { Stats } from "@/components/marketing/stats";
···
         <Stats />
         <StatusPageCard />
         <AlertCard />
-        <FAQs />
+        <BottomCTA />
+        <LatestChangelogs />
       </div>
     </MarketingLayout>
   );

apps/web/src/app/pricing/page.tsx

···
 
 import { Shell } from "@/components/dashboard/shell";
 import { MarketingLayout } from "@/components/layout/marketing-layout";
+import { FAQs } from "@/components/marketing/faqs";
 import { EnterpricePlan } from "@/components/marketing/pricing/enterprice-plan";
 import { PricingWrapper } from "@/components/marketing/pricing/pricing-wrapper";
 
···
         <Shell>
           <EnterpricePlan />
         </Shell>
+        <FAQs />
       </div>
     </MarketingLayout>
   );

apps/web/src/components/content/mdx.tsx

···
 
   return (
     // FIXME: weird behaviour when `prose-headings:font-cal` and on mouse movement font gets bigger
-    <div className="prose prose-neutral dark:prose-invert prose-pre:border prose-pre:border-border prose-pre:rounded-lg prose-img:rounded-lg prose-img:border prose-img:border-border">
+    <div className="prose prose-slate dark:prose-invert prose-pre:border prose-pre:border-border prose-pre:rounded-lg prose-img:rounded-lg prose-img:border prose-img:border-border">
       <MDXComponent components={{ ...components }} />
     </div>
   );

apps/web/src/components/marketing/bottom-cta.tsx

···
+import Link from "next/link";
+
+import { Button } from "@openstatus/ui";
+
+export function BottomCTA() {
+  return (
+    <div className="my-8 flex flex-col items-center justify-between gap-6">
+      <p className="text-muted-foreground max-w-lg text-center text-lg">
+        Learn over time how your services are performing, and inform your users
+        when there are issues.
+      </p>
+      <div className="flex gap-2">
+        <Button className="rounded-full" asChild>
+          <Link href="/app/sign-up">Start for Free</Link>
+        </Button>
+        <Button className="rounded-full" variant="outline" asChild>
+          <Link href="/cal" target="_blank">
+            Schedule a Demo
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/marketing/card.tsx

···
 
 export function CardContainer({ children }: { children: React.ReactNode }) {
   return (
-    <Shell className="grid gap-6 bg-gradient-to-br from-[hsl(var(--muted))] from-0% to-transparent to-20%">
+    <Shell className="flex flex-col gap-6 bg-gradient-to-br from-[hsl(var(--muted))] from-0% to-transparent to-20%">
       {children}
     </Shell>
   );
···
 }
 
 export function CardDescription({ children }: { children: React.ReactNode }) {
-  return <p className="text-muted-foreground mt-2">{children}</p>;
+  return <p className="text-muted-foreground text-center">{children}</p>;
 }
 
 export function CardContent({

apps/web/src/components/marketing/faqs.tsx

···
+"use client";
+
+import { allFAQs } from "contentlayer/generated";
+
 import {
   Accordion,
   AccordionContent,
···
   AccordionTrigger,
 } from "@openstatus/ui";
 
-import { Shell } from "@/components/dashboard/shell";
-
-// REMINDER: we can create a contentlayer document and the faq into it
-const faqsConfig: Record<"q" | "a", string>[] = [
-  {
-    q: "What are the limits?",
-    a: "You will start with a free plan by default which includes a total of <strong>3 monitors</strong> and <strong>1 status</strong> page as well as cron jobs of either <code>10m</code>, <code>30m</code> or <code>1h</code>.<br />Learn more about our <a href='/pricing'>pricing</a>.",
-  },
-  {
-    q: "Who are we?",
-    a: "We are <a href='https://twitter.com/thibaultleouay' target='_blank'>Thibault</a> and <a href='https://twitter.com/mxkaske' target='_blank'>Max</a>.",
-  },
-  {
-    q: "How does it work?",
-    a: "We ping your endpoints from multiple regions to calculate uptime. We display the status on your status page.",
-  },
-  {
-    q: "What regions do we support?",
-    a: "We support one region for each continent to allow multi-regions monitoring.",
-  },
-  {
-    q: "How can I help?",
-    a: "You can star our project on <a href='https://github.com/openstatusHQ/openstatus'>GitHub</a>, or contribute to it. Or you can also become a <strong>Pro</strong> user.",
-  },
-];
+import { Mdx } from "../content/mdx";
+import {
+  CardContainer,
+  CardDescription,
+  CardHeader,
+  CardIcon,
+  CardTitle,
+} from "./card";
 
 export function FAQs() {
+  const faqs = allFAQs.sort((a, b) => a.order - b.order);
   return (
-    <Shell className="grid gap-1">
-      <h2 className="text-foreground font-cal text-center text-2xl">FAQ</h2>
-      <Accordion type="single" collapsible className="w-full">
-        {faqsConfig.map(({ q, a }, i) => (
-          <AccordionItem key={i} value={`item-${i}`}>
-            <AccordionTrigger>{q}</AccordionTrigger>
-            <AccordionContent>
-              <div
-                className="prose dark:prose-invert prose-sm"
-                dangerouslySetInnerHTML={{ __html: a }}
-              />
-            </AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </Shell>
+    <CardContainer>
+      <CardHeader>
+        <CardIcon icon="message-circle" />
+        <CardTitle>FAQs</CardTitle>
+        <CardDescription>
+          What you want to know about OpenStatus.
+        </CardDescription>
+      </CardHeader>
+      <div>
+        <Accordion type="single" collapsible className="w-full">
+          {faqs.map((faq, i) => (
+            <AccordionItem key={i} value={`item-${i}`}>
+              <AccordionTrigger>{faq.title}</AccordionTrigger>
+              <AccordionContent>
+                <Mdx code={faq.body.code} />
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </div>
+    </CardContainer>
   );
 }

apps/web/src/components/marketing/lastest-changelogs.tsx

···
+import Link from "next/link";
+import { allChangelogs } from "contentlayer/generated";
+
+import { Button } from "@openstatus/ui";
+
+import { formatDate } from "@/lib/utils";
+import {
+  CardContainer,
+  CardDescription,
+  CardHeader,
+  CardIcon,
+  CardTitle,
+} from "./card";
+
+export function LatestChangelogs() {
+  const latestChangelogs = allChangelogs
+    .sort((a, b) => (a.publishedAt > b.publishedAt ? -1 : 1))
+    .slice(0, 4);
+
+  return (
+    <CardContainer>
+      <CardHeader>
+        <CardIcon icon="zap" />
+        <CardTitle>We ship</CardTitle>
+        <CardDescription>
+          Check out the changelog to see our latest features.
+        </CardDescription>
+      </CardHeader>
+      <ul className="mx-auto w-full max-w-xs">
+        {latestChangelogs.map((changelog) => (
+          <li
+            key={changelog.slug}
+            className="border-accent group relative grid gap-2 border-l-2 px-4 py-2"
+          >
+            <Link href={`/changelog/${changelog.slug}`}>
+              <div className="bg-border group-hover:bg-muted-foreground absolute -left-1.5 top-4 h-2.5 w-2.5 rounded-full" />
+              <p className="text-muted-foreground">
+                {formatDate(new Date(changelog.publishedAt))}
+              </p>
+              <p className="line-clamp-1 text-lg font-medium">
+                {changelog.title}
+              </p>
+            </Link>
+          </li>
+        ))}
+      </ul>
+      <div className="flex justify-center">
+        <Button className="rounded-full" asChild>
+          <Link href="/changelog">Full changelog</Link>
+        </Button>
+      </div>
+    </CardContainer>
+  );
+}

apps/web/src/config/features.ts

···
       },
       {
         icon: "zap",
-        catchline: "Escalatation.",
+        catchline: "Escalation.",
         description: "Notify and escalate an alert to the right team member.",
         badge: "Coming soon",
       },

apps/web/src/content/faq/about-us.mdx

···
+---
+title: Who are we?
+order: 2
+---
+
+{/* TODO: write markdown */}
+
+We are <a href='https://twitter.com/thibaultleouay' target='_blank'>Thibault</a>
+and <a href='https://twitter.com/mxkaske' target='_blank'>Max</a>.

apps/web/src/content/faq/functioning.mdx

···
+---
+title: How does it work?
+order: 3
+---
+
+We ping your endpoints from multiple regions to calculate uptime. We display the
+status on your status page.

apps/web/src/content/faq/help.mdx

···
+---
+title: How can I help?
+order: 5
+---
+
+{/* TODO: write markdown */}
+
+You can star our project on
+<a href="https://github.com/openstatusHQ/openstatus">GitHub</a>, or contribute
+to it. Or you can also become a <strong>Pro</strong> user.

apps/web/src/content/faq/limits.mdx

···
+---
+title: What are the limits?
+order: 1
+---
+
+{/* TODO: write markdown */}
+
+You will start with a free plan by default which includes a total of <strong>3
+monitors</strong> and <strong>1 status</strong> page as well as cron jobs of
+either <code>10m</code>, <code>30m</code> or <code>1h</code>.<br />Learn more
+about our <a href='/pricing'>pricing</a>.

apps/web/src/content/faq/supported-regions.mdx

···
+---
+title: What regions do we support?
+order: 4
+---
+
+We support one region for each continent to allow multi-regions monitoring.

apps/web/src/contentlayer/documents/faq.ts

···
+import { defineDocumentType } from "contentlayer/source-files";
+
+export const FAQ = defineDocumentType(() => ({
+  name: "FAQ",
+  filePathPattern: `faq/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: {
+      type: "string",
+      required: true,
+    },
+    order: {
+      type: "number",
+      required: true,
+    },
+  },
+  computedFields: {
+    slug: {
+      type: "string",
+      resolve: (post) => post._raw.sourceFileName.replace(/\.mdx$/, ""),
+    },
+  },
+}));