Screens

axhl · Mar 19, 2024 · fa95e7f · fa95e7f
1 parent f95ca37
commit fa95e7f
Show file tree

Hide file tree

Showing 30 changed files with 468 additions and 322 deletions.
diff --git a/apps/dashboard/src/components/twitter-share.tsx b/apps/dashboard/src/components/twitter-share.tsx
@@ -58,7 +58,7 @@ export function TwitterShare() {
     setLoading(true);
 
     const popup = popupCenter({
-      url: "https://twitter.com/intent/tweet?text=",
+      url: "https://twitter.com/intent/tweet?text=I just signed up for @middayai, excited to try this out!",
       title: "Share",
       w: 800,
       h: 400,

diff --git a/apps/website/package.json b/apps/website/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@logsnag/next": "^1.0.3",
     "@midday/ui": "workspace:*",
+    "@notion-render/client": "^0.0.2",
     "@notionhq/client": "^2.2.14",
     "@openstatus/react": "^0.0.3",
     "@vercel/analytics": "^1.2.2",

diff --git a/apps/website/public/screen-5-light.png b/apps/website/public/screen-5-light.png
diff --git a/apps/website/public/screen-5.png b/apps/website/public/screen-5.png
diff --git a/apps/website/src/app/[locale]/download/page.tsx b/apps/website/src/app/[locale]/download/page.tsx
@@ -25,9 +25,9 @@ export default function Page({
   setStaticParamsLocale(locale);
 
   return (
-    <div className="container flex flex-col items-center mb-48 text-center">
-      <BlurryCircle className="fixed top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
-      <BlurryCircle className="fixed top-[70%] left-0 bg-[#3633D0]/10 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
+    <div className="container flex flex-col items-center mb-12 md:mb-48 text-center">
+      <BlurryCircle className="absolute top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
+      <BlurryCircle className="absolute top-[70%] left-0 bg-[#3633D0]/10 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
 
       <h1 className="mt-24 font-medium text-center text-5xl mb-24">
         Always at your fingertips.
@@ -65,10 +65,10 @@ export default function Page({
         quality={100}
         className="w-[80px] h-[80px] mt-12 md:mt-0 md:h-auto md:w-auto"
       />
-      <p className="mb-4 text-2xl	font-medium mt-8">Midday for mac</p>
+      <p className="mb-4 text-2xl	font-medium mt-8">Midday for Mac</p>
       <p className="text-[#878787] font-sm max-w-[500px]">
-        Donec risus mi, elementum eu mi vel, ultricies porttitor augue. Interdum
-        et malesuada fames ac ante ipsum primis in faucibus.
+        With Midday on Mac you have everything <br />
+        accessible just one click away.
       </p>
 
       <a href="https://go.midday.ai/d" download>

diff --git a/apps/website/src/app/[locale]/engine/page.tsx b/apps/website/src/app/[locale]/engine/page.tsx
@@ -59,7 +59,7 @@ export default function Page({
           src={require("public/engine.png")}
           width={419}
           height={421}
-          className="mt-12"
+          className="mt-16"
           quality={100}
           alt="Midday Engine"
         />
@@ -70,10 +70,8 @@ export default function Page({
       <div className="text-center flex flex-col items-center mt-24">
         <h3 className="mb-4 text-2xl font-medium">Unlimted bank connections</h3>
         <p className="text-[#878787] font-sm max-w-[600px]">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta
-          ipsum dui, lacinia ullamcorper purus cursus vel. Vivamus scelerisque
-          felis a efficitur porttitor. Donec scelerisque erat purus, sit amet
-          pretium felis hendrerit a.
+          Expand your market reach by enabling multiple banking providers with
+          just one click. We add even more providers in the future.
         </p>
 
         <Image
@@ -90,18 +88,16 @@ export default function Page({
           One SDK, implement in minutes
         </h3>
         <p className="text-[#878787] font-sm max-w-[600px]">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean porta
-          ipsum dui, lacinia ullamcorper purus cursus vel. Vivamus scelerisque
-          felis a efficitur porttitor. Donec scelerisque erat purus, sit amet
-          pretium felis hendrerit a.
+          With Midday Engine SDK you can implement banking providers in matter
+          of minutes.
         </p>
 
         <Image
           src={engineSDK}
           alt="Engine SDK"
           width={740}
           height={420}
-          className="mt-16"
+          className="mt-8"
         />
       </div>
     </div>

diff --git a/apps/website/src/app/[locale]/pricing/page.tsx b/apps/website/src/app/[locale]/pricing/page.tsx
@@ -30,8 +30,8 @@ export default function Page({
   return (
     <>
       <div className="container max-w-[800px]">
-        <div className="h-screen">
-          <h1 className="mt-24 font-medium text-center text-5xl mb-8">
+        <div className="h-screen min-h-[850px]">
+          <h1 className="mt-24 font-medium text-center text-5xl mb-2">
             What it cost.
           </h1>
 
@@ -40,13 +40,13 @@ export default function Page({
               30
             </h3>
 
-            <p className="font-medium text-xl">
+            <p className="font-medium text-xl mt-4">
               Claim $30/mo early adopter plan
             </p>
 
-            <span className="mt-2">Free while in beta</span>
+            <span className="mt-2 text-[#878787]">Free while in beta</span>
 
-            <div className="mt-6">
+            <div className="mt-8">
               <div className="flex items-center space-x-4">
                 <Link href="/talk-to-us">
                   <Button
@@ -72,13 +72,6 @@ export default function Page({
         <div className="-mt-[200px]">
           <div className="text-center">
             <h4 className="text-4xl">Frequently asked questions</h4>
-            <p className="text-[#878787] text-sm mt-4">
-              Integer quis vestibulum lorem. Curabitur consectetur nulla nec
-              justo
-              <br />
-              congue mattis. Nulla tincidunt ante eros, nec interdum dui varius
-              quis.
-            </p>
           </div>
 
           <Accordion type="single" collapsible className="w-full mt-10 mb-48">

diff --git a/apps/website/src/app/[locale]/story/page.tsx b/apps/website/src/app/[locale]/story/page.tsx
@@ -24,44 +24,43 @@ export default function Page({
   setStaticParamsLocale(locale);
 
   return (
-    <div className="container max-w-[800px]">
-      <BlurryCircle className="fixed top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
-      <BlurryCircle className="fixed top-[70%] left-0 bg-[#3633D0]/10 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
+    <div className="container max-w-[750px]">
+      <BlurryCircle className="absolute top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
+      <BlurryCircle className="absolute top-[70%] left-0 bg-[#3633D0]/10 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
 
-      <h1 className="mt-24 font-medium text-center text-5xl mb-8">Why?</h1>
-
-      <p className="text-2xl font-normal mb-4">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tincidunt,
-        nunc non efficitur interdum, mauris tellus maximus dolor.
-      </p>
+      <h1 className="mt-24 font-medium text-center text-5xl mb-16 leading-snug">
+        This is why we’re building <br />
+        Midday.
+      </h1>
 
+      <h3 className="font-medium text-xl mb-2">Problem</h3>
       <p className="text-[#878787] mb-8">
-        Suspendisse mattis libero vitae eros tincidunt porttitor in eget nulla.
-        Nulla at justo blandit, facilisis dui at, porttitor sapien. Sed vitae
-        nulla ac sapien ornare iaculis. Nunc in accumsan lorem. Curabitur et
-        ligula metus.
+        After years of running our own businesses, we've always felt something
+        was broken, especially when it came to the mundane tasks. Your monthly
+        routine typically involves tracking time, sending invoices, collecting
+        receipts, and organizing documents. All which are scattered across
+        various platforms. We've observed that these tools are often provided by
+        large industry giants that struggle to adapt and innovate quickly.
       </p>
 
-      <p className="text-[#878787] mb-4">
-        Donec risus mi, elementum eu mi vel, ultricies porttitor augue. Interdum
-        et malesuada fames ac ante ipsum primis in faucibus. Aenean vel cursus
-        metus, non convallis mauris. Integer a sodales leo.
-      </p>
-
-      <p className="text-[#878787] mb-4">
-        Nullam ut risus quis elit suscipit efficitur. Nam rhoncus posuere
-        mauris, vel porttitor elit mattis at. In sodales odio non erat bibendum
-        eleifend. Pellentesque ornare fermentum elit at facilisis. Orci varius
-        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
-        mus. In eu mollis ipsum. Suspendisse luctus lobortis libero malesuada.
+      <h3 className="font-medium text-xl mb-2">Solution</h3>
+      <p className="text-[#878787] mb-8">
+        So, we asked ourselves, why not create one comprehensive tool for all
+        these tasks? Inspired by companies like Notion that revolutionized
+        all-in-one tools, we embarked on developing an all-in-one business OS.
+        Our goal is to help entrepreneurs gain deeper business insights,
+        streamline tedious tasks, and serve as a bridge between you and your
+        accountant, allowing you to focus on the enjoyable aspects of your
+        work."
       </p>
 
+      <h3 className="font-medium text-xl mb-2">Open source</h3>
       <p className="text-[#878787] mb-12">
-        Nullam ut risus quis elit suscipit efficitur. Nam rhoncus posuere
-        mauris, vel porttitor elit mattis at. In sodales odio non erat bibendum
-        eleifend. Pellentesque ornare fermentum elit at facilisis. Orci varius
-        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
-        mus. In eu mollis ipsum. Suspendisse luctus lobortis libero malesuada.
+        We've always admired companies that prioritize transparency and
+        collaboration with users to build the best possible product. Whether
+        it's through 15-minute user calls, building in public, or open-sourcing
+        our system, these are values we hold dear and will continue to uphold,
+        regardless of how far or big we go."
       </p>
 
       <Image src={founders} width={800} height={514} alt="Pontus & Viktor" />

diff --git a/apps/website/src/app/[locale]/talk-to-us/page.tsx b/apps/website/src/app/[locale]/talk-to-us/page.tsx
@@ -18,5 +18,9 @@ export default function Page({
 }) {
   setStaticParamsLocale(locale);
 
-  return <CalEmbed />;
+  return (
+    <div className="mt-24">
+      <CalEmbed />
+    </div>
+  );
 }
diff --git a/apps/website/src/app/[locale]/updates/[slug]/page.tsx b/apps/website/src/app/[locale]/updates/[slug]/page.tsx
@@ -1,11 +1,17 @@
 import { BlurryCircle } from "@/components/blurry-circle";
 import { PostMeta } from "@/components/post-meta";
 import { PostStatus } from "@/components/post-status";
-import { fetchPageBlocks, fetchPageBySlug, fetchPages } from "@/lib/notion";
+import {
+  fetchPageBlocks,
+  fetchPageBySlug,
+  fetchPages,
+  notion,
+} from "@/lib/notion";
 import { getStaticParams } from "@/locales/server";
+import { NotionRenderer } from "@notion-render/client";
+import "@notion-render/client/dist/theme.css";
 import { format } from "date-fns";
 import { setStaticParamsLocale } from "next-international/server";
-import Image from "next/image";
 import Link from "next/link";
 
 export const revalidate = 0;
@@ -31,6 +37,8 @@ export async function generateMetadata({
   };
 }
 
+const renderer = new NotionRenderer();
+
 export default async function Page({
   params: { locale, slug },
 }: {
@@ -42,10 +50,22 @@ export default async function Page({
   const blocks = await fetchPageBlocks(post.id);
   const slugWithPrefix = `/updates/${slug}`;
 
+  const content = async () => {
+    const blocks = await fetchPageBlocks(post.id);
+    const html = await renderer.render(...blocks);
+
+    return (
+      <div
+        className="notion-render"
+        dangerouslySetInnerHTML={{ __html: html }}
+      />
+    );
+  };
+
   return (
     <div className="container max-w-[1140px] flex">
-      <BlurryCircle className="fixed top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
-      <BlurryCircle className="fixed top-[70%] right-[30%] bg-[#3633D0]/5 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
+      <BlurryCircle className="absolute top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
+      <BlurryCircle className="absolute top-[70%] right-[30%] bg-[#3633D0]/5 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
 
       <aside className="sticky h-screen min-w-[260px] pt-[150px] flex-col space-y-4 hidden md:flex">
         <Link href="/updates" className="text-sm font-normal text-[#878787]">
@@ -62,30 +82,7 @@ export default async function Page({
           {post.properties.Title.title.at(0)?.plain_text}
         </h2>
 
-        {blocks.map((block) => {
-          switch (block.type) {
-            case "image":
-              return (
-                <Image
-                  className="mb-6"
-                  key={block.id}
-                  width={800}
-                  height={520}
-                  src={block.image.file.url}
-                />
-              );
-
-            case "paragraph":
-              return (
-                <p className="mb-6 text-[#878787]" key={block.id}>
-                  {block.paragraph.rich_text.at(0)?.plain_text}
-                </p>
-              );
-
-            default:
-              return null;
-          }
-        })}
+        {content()}
 
         <PostMeta
           author={post.properties.Author.people.at(0)}

diff --git a/apps/website/src/app/[locale]/updates/page.tsx b/apps/website/src/app/[locale]/updates/page.tsx
@@ -4,10 +4,11 @@ import { PostMeta } from "@/components/post-meta";
 import { PostStatus } from "@/components/post-status";
 import { fetchPageBlocks, fetchPages } from "@/lib/notion";
 import { getStaticParams } from "@/locales/server";
+import { NotionRenderer } from "@notion-render/client";
+import "@notion-render/client/dist/theme.css";
 import format from "date-fns/format";
 import type { Metadata } from "next";
 import { setStaticParamsLocale } from "next-international/server";
-import Image from "next/image";
 import Link from "next/link";
 
 export const revalidate = 0;
@@ -21,6 +22,8 @@ export function generateStaticParams() {
   return getStaticParams();
 }
 
+const renderer = new NotionRenderer();
+
 export default async function Page({
   params: { locale },
 }: {
@@ -38,6 +41,7 @@ export default async function Page({
 
   const posts = data.results.map(async (post, index) => {
     const blocks = await fetchPageBlocks(post.id);
+    const html = await renderer.render(...blocks);
     const slug = `/updates/${post.properties.Slug.url}`;
 
     return (
@@ -54,32 +58,10 @@ export default async function Page({
           </h2>
         </Link>
 
-        {blocks.map((block) => {
-          switch (block.type) {
-            case "image":
-              return (
-                <Image
-                  priority={index === 0}
-                  className="mb-6"
-                  key={block.id}
-                  width={800}
-                  height={520}
-                  src={block.image.file.url}
-                  alt={block.image?.caption.at(0)?.plain_text ?? "Image"}
-                />
-              );
-
-            case "paragraph":
-              return (
-                <p className="mb-6 text-[#878787]" key={block.id}>
-                  {block.paragraph.rich_text.at(0)?.plain_text}
-                </p>
-              );
-
-            default:
-              return null;
-          }
-        })}
+        <div
+          className="notion-render"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
 
         <PostMeta author={post.properties.Author.people.at(0)} slug={slug} />
       </div>
@@ -88,8 +70,8 @@ export default async function Page({
 
   return (
     <div className="container max-w-[1140px] flex scroll-smooth">
-      <BlurryCircle className="fixed top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
-      <BlurryCircle className="fixed top-[70%] right-[30%] bg-[#3633D0]/5 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
+      <BlurryCircle className="absolute top-[40%] -right-6 bg-[#F59F95]/30 dark:bg-[#F59F95]/10 -z-10 hidden md:block" />
+      <BlurryCircle className="absolute top-[70%] right-[30%] bg-[#3633D0]/5 dark:bg-[#3633D0]/10 -z-10 hidden md:block" />
 
       <PostLinks links={links} />
       <div className="max-w-[680px] pt-[80px] md:pt-[150px] w-full">

diff --git a/apps/website/src/components/cal-embed.tsx b/apps/website/src/components/cal-embed.tsx
@@ -16,12 +16,10 @@ export function CalEmbed() {
   }, []);
 
   return (
-    <div className="mt-24">
-      <Cal
-        calLink="pontus-midday/15min"
-        style={{ width: "100%", height: "100%", overflow: "scroll" }}
-        config={{ layout: "month_view" }}
-      />
-    </div>
+    <Cal
+      calLink="pontus-midday/15min"
+      style={{ width: "100%", height: "100%", overflow: "scroll" }}
+      config={{ layout: "month_view" }}
+    />
   );
 }