Merge pull request #117 from midday-ai/feature/website-v1

Feature/website v1

apps/website/package.json

@@ -16,6 +16,8 @@
     "@midday/supabase": "workspace:*",
     "@midday/ui": "workspace:*",
     "@openstatus/react": "^0.0.3",
+    "@splinetool/react-spline": "^2.2.6",
+    "@splinetool/runtime": "^1.3.4",
     "@team-plain/typescript-sdk": "3.9.0",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/analytics": "^1.2.2",

apps/website/src/actions/fetch-stats.ts

@@ -68,7 +68,7 @@ export async function fetchStats() {
     },
     ["stats"],
     {
-      revalidate: 300,
+      revalidate: 800,
       tags: ["stats"],
     }
   )();

apps/website/src/app/download/page.tsx

@@ -1,10 +1,8 @@
-import { BlurryCircle } from "@/components/blurry-circle";
 import { CopyInput } from "@/components/copy-input";
 import { Button } from "@midday/ui/button";
 import type { Metadata } from "next";
 import Image from "next/image";
 import appIcon from "public/app-icon.png";
-import panelLight from "public/panel-light.png";
 import panel from "public/panel.png";
 
 export const metadata: Metadata = {
@@ -14,9 +12,6 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <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.
       </h1>
@@ -27,23 +22,10 @@ export default function Page() {
           alt="Download Midday"
           width={1223}
           height={462}
-          className="z-10 relative hidden dark:block"
-          quality={100}
-          priority
-        />
-
-        <Image
-          src={panelLight}
-          alt="Download Midday"
-          width={1223}
-          height={462}
-          className="z-10 relative dark:hidden"
+          className="z-10 relative"
           quality={100}
           priority
         />
-
-        <BlurryCircle className="absolute bottom-[50px] -left-6 bg-[#A1F5CD]/5" />
-        <BlurryCircle className="absolute bottom-0 right-[150px] bg-[#FFECBB]/5" />
       </div>
       <Image
         src={appIcon}

apps/website/src/app/engine/page.tsx

@@ -1,4 +1,3 @@
-import { SparklesCore } from "@/components/sparkles";
 import { WaitlistInput } from "@/components/waitlist-input";
 import type { Metadata } from "next";
 import Image from "next/image";
@@ -12,51 +11,25 @@ export const metadata: Metadata = {
 export default function Page() {
   return (
     <div className="w-full bg-[#0C0C0C] flex flex-col items-center justify-center mt-24">
-      <h1 className="text-6xl font-medium text-center text-white relative z-20">
-        One API to rule them all.
+      <h1 className="text-[175px] font-medium text-center text-white relative z-20 leading-none">
+        One API
       </h1>
 
-      <p className="text-[#707070] mt-4 mb-8 text-center max-w-[550px] font-mono">
-        Midday Engine streamlines banking integrations with a single API,
-        effortlessly connecting to multiple providers and get one unified
-        format.
-      </p>
-      <div className="max-w-[800px] w-full h-40 relative">
-        {/* Gradients */}
-        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-[#D9D9D9] to-transparent h-[2px] md:w-3/4 blur-sm" />
-        <div className="absolute inset-x-20 top-0 bg-gradient-to-r from-transparent via-[#D9D9D9] to-transparent h-px md:w-3/4" />
-        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-[#D9D9D9] to-transparent h-[5px] md:w-1/4 blur-sm" />
-        <div className="absolute inset-x-60 top-0 bg-gradient-to-r from-transparent via-[#D9D9D9] to-transparent h-px md:w-1/4" />
+      <h2 className="text-[175px] leading-none text-dotted">
+        to rule them all
+      </h2>
 
-        {/* Core component */}
-        <SparklesCore
-          background="transparent"
-          minSize={0.4}
-          maxSize={1.2}
-          particleDensity={800}
-          className="w-full h-full"
-          particleColor="#FFFFFF"
-        />
-
-        {/* Radial Gradient to prevent sharp edges */}
-        <div className="absolute inset-0 w-full h-full bg-[#0C0C0C] [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]" />
+      <div className="mb-2 mt-6">
+        <p className="text-[#707070] mt-4 mb-8 text-center max-w-[550px]">
+          Midday engine streamlines banking integrations with a single API
+          effortlessly connecting to multiple providers and get one unified
+          format.
+        </p>
       </div>
 
-      <div className="-mt-[160px] w-full flex items-center flex-col z-10">
-        <Image
-          src={require("public/engine.png")}
-          width={419}
-          height={421}
-          className="mt-16"
-          quality={100}
-          alt="Midday Engine"
-          priority
-        />
-
-        <WaitlistInput />
-      </div>
+      <WaitlistInput />
 
-      <div className="text-center flex flex-col items-center mt-24">
+      <div className="text-center flex flex-col items-center mt-[140px]">
         <h3 className="mb-4 text-2xl font-medium">
           Unlimited bank connections
         </h3>
@@ -71,6 +44,7 @@ export default function Page() {
           width={1026}
           height={552}
           className="mt-16"
+          quality={100}
         />
       </div>
 

apps/website/src/app/layout.tsx

@@ -45,10 +45,7 @@ export const metadata: Metadata = {
 };
 
 export const viewport = {
-  themeColor: [
-    { media: "(prefers-color-scheme: light)" },
-    { media: "(prefers-color-scheme: dark)" },
-  ],
+  themeColor: [{ media: "(prefers-color-scheme: dark)" }],
 };
 
 export default function Layout({ children }: { children: ReactElement }) {
@@ -64,17 +61,16 @@ export default function Layout({ children }: { children: ReactElement }) {
       <body
         className={cn(
           `${GeistSans.variable} ${GeistMono.variable}`,
-          "bg-[#F6F6F3] dark:bg-[#0C0C0C] overflow-x-hidden"
+          "bg-[#0C0C0C] overflow-x-hidden dark antialiased"
         )}
       >
-        <Provider>
-          <Header />
-          <main className="container mx-auto px-4 overflow-hidden md:overflow-visible">
-            {children}
-          </main>
-          <FooterCTA />
-          <Footer />
-        </Provider>
+        <Header />
+        <main className="container mx-auto px-4 overflow-hidden md:overflow-visible">
+          {children}
+        </main>
+        <FooterCTA />
+        <Footer />
+
         <Analytics />
         <DevMessage />
       </body>

apps/website/src/app/not-found.tsx

@@ -2,7 +2,7 @@ import { NotFoundTerminal } from "@/components/not-found-terminal";
 
 export default function NotFound() {
   return (
-    <div className="fixed bg-[#F6F6F3] dark:bg-[#0C0C0C] top-0 right-0 bottom-0 left-0 z-10">
+    <div className="fixed bg-[#0C0C0C] top-0 right-0 bottom-0 left-0 z-10">
       <h1 className="font-mono md:text-[300px] text-[140px] font-medium text-center mt-20">
         404
       </h1>

apps/website/src/app/oss-friends/page.tsx

@@ -41,7 +41,7 @@ export default async function Page() {
           return (
             <div
               key={friend.name}
-              className="border border-border rounded-2xl dark:bg-[#121212] p-4"
+              className="border border-border bg-[#121212] p-4"
             >
               <div className="flex justify-between items-center mb-2">
                 <a href={friend.href} target="_blank" rel="noreferrer">