From 7398b45ed1c7858e3a24c04c35fd32efc2bc54b2 Mon Sep 17 00:00:00 2001
From: Sophia Michelle Andren <20441876+sandren@users.noreply.github.com>
Date: Sun, 14 Jan 2024 16:38:57 -0800
Subject: [PATCH] feat(website): UI/UX improvements (#375)

---
 packages/website/contents/post-001.mdx        |   4 +-
 packages/website/package.json                 |   8 +-
 packages/website/src/atoms/index.ts           |   2 +
 packages/website/src/components/analytics.tsx |  24 ++++
 packages/website/src/components/button.tsx    |   2 +-
 packages/website/src/components/credits.tsx   |  58 +++-----
 packages/website/src/components/fade.tsx      |  27 ++++
 packages/website/src/components/mdx.tsx       |  10 +-
 packages/website/src/components/menu.tsx      |  99 ++++++-------
 packages/website/src/components/page.tsx      |  52 ++++---
 packages/website/src/components/providers.tsx |  16 +++
 packages/website/src/components/scroll.tsx    |  25 ++++
 packages/website/src/components/start.tsx     |  31 +++-
 packages/website/src/entries.tsx              |   2 +-
 packages/website/src/styles.css               |   1 +
 .../src/templates/blog-article-page.tsx       |  87 ++++++++----
 packages/website/src/templates/home-page.tsx  |  36 ++---
 .../website/src/templates/root-layout.tsx     |  46 ++----
 packages/website/tailwind.config.js           |   1 +
 pnpm-lock.yaml                                | 132 ++++++++++++++----
 20 files changed, 423 insertions(+), 240 deletions(-)
 create mode 100644 packages/website/src/components/analytics.tsx
 create mode 100644 packages/website/src/components/fade.tsx
 create mode 100644 packages/website/src/components/providers.tsx
 create mode 100644 packages/website/src/components/scroll.tsx

diff --git a/packages/website/contents/post-001.mdx b/packages/website/contents/post-001.mdx
index 8f043f5d1..8f85966d7 100644
--- a/packages/website/contents/post-001.mdx
+++ b/packages/website/contents/post-001.mdx
@@ -1,8 +1,10 @@
 ---
 slug: introducing-waku
 title: Introducing Waku
-description: Learn about the minimal React framework and how it enables the RSC features.
+description: Learn about the minimal React framework and how it enables RSC features.
 author: daishi
+release: 0.18
+date: 2023/12/12
 ---
 
 React, as a pure client UI library, has traditionally relied on frameworks like Next.js, Gatsby, and Remix to implement their own proprietary server-side functionalities. This pattern is evolving with the introduction of React Server Components (RSC) to the core library.
diff --git a/packages/website/package.json b/packages/website/package.json
index 3a7a755ee..9a5dbd69e 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -10,9 +10,9 @@
     "start": "waku start --with-ssr"
   },
   "dependencies": {
-    "@headlessui/react": "^1.7.17",
     "bright": "^0.8.4",
     "clsx": "^2.1.0",
+    "framer-motion": "^10.18.0",
     "jotai": "^2.6.1",
     "next-mdx-remote": "^4.4.1",
     "react": "18.3.0-canary-c5b937576-20231219",
@@ -23,9 +23,9 @@
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.16",
-    "prettier": "^3.1.1",
-    "prettier-plugin-tailwindcss": "^0.5.10",
-    "tailwindcss": "^3.4.0",
+    "prettier": "^3.2.2",
+    "prettier-plugin-tailwindcss": "^0.5.11",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vite": "5.0.10"
   }
diff --git a/packages/website/src/atoms/index.ts b/packages/website/src/atoms/index.ts
index de3af093f..c36805ae8 100644
--- a/packages/website/src/atoms/index.ts
+++ b/packages/website/src/atoms/index.ts
@@ -1,3 +1,5 @@
 import { atom } from 'jotai';
 
 export const menuAtom = atom(false);
+
+export const scrolledAtom = atom(false);
diff --git a/packages/website/src/components/analytics.tsx b/packages/website/src/components/analytics.tsx
new file mode 100644
index 000000000..37ab51518
--- /dev/null
+++ b/packages/website/src/components/analytics.tsx
@@ -0,0 +1,24 @@
+import { getEnv } from 'waku/server';
+
+export const Analytics = () => {
+  const trackingId = getEnv('TRACKING_ID');
+
+  if (!trackingId) return null;
+
+  return (
+    <>
+      <script
+        async={true}
+        src={`https://www.googletagmanager.com/gtag/js?id=${trackingId}`}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${trackingId}');`,
+        }}
+      />
+    </>
+  );
+};
diff --git a/packages/website/src/components/button.tsx b/packages/website/src/components/button.tsx
index dac1adc0f..711e57a67 100644
--- a/packages/website/src/components/button.tsx
+++ b/packages/website/src/components/button.tsx
@@ -19,7 +19,7 @@ export const Button = ({ href, children, ...rest }: ButtonProps) => {
 
   return (
     <Element
-      className="text-red-50 rounded-md bg-primary px-4 py-3 text-base font-black uppercase  leading-none transition duration-300 ease-in-out hover:bg-secondary focus:ring-4 focus:ring-primary-300"
+      className="text-red-50 rounded-md bg-primary px-4 py-3 text-base font-black uppercase leading-none transition-colors duration-300 ease-in-out hover:bg-secondary focus:ring-4 focus:ring-primary-300"
       {...props}
       {...rest}
     >
diff --git a/packages/website/src/components/credits.tsx b/packages/website/src/components/credits.tsx
index a86cfbbb0..3f926c34b 100644
--- a/packages/website/src/components/credits.tsx
+++ b/packages/website/src/components/credits.tsx
@@ -4,55 +4,35 @@ export const Credits = () => {
   if (getEnv('SHOW_CREDITS') !== 'YES') return null;
 
   return (
-    <div
-      style={{
-        position: 'fixed',
-        bottom: 0,
-        right: 0,
-        zIndex: '40',
-        padding: '96px 0 0 256px',
-        backgroundColor: 'transparent',
-        backgroundImage:
-          'url("https://storage.googleapis.com/candycode/bg.png")',
-        backgroundSize: '100% 100%',
-        backgroundRepeat: 'no-repeat',
-        lineHeight: 1,
-        pointerEvents: 'none',
-        overflow: 'clip',
-      }}
-    >
+    <div className="pointer-events-none fixed bottom-0 left-0 right-0 z-40 flex w-full items-center justify-between p-[16px]">
+      <a
+        href="https://vercel.com/home"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="group pointer-events-auto inline-flex origin-bottom-left scale-75 flex-col items-center rounded-md bg-black p-[16px] sm:scale-100"
+      >
+        <span className="mb-[4px] font-simple text-[11px] uppercase tracking-[0.125em] text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-white">
+          sponsored by
+        </span>
+        <img
+          src="https://cdn.candycode.com/waku/vercel.svg"
+          alt="Vercel"
+          className="h-[20px] w-auto object-contain"
+        />
+      </a>
       <a
         href="https://candycode.com/"
         target="_blank"
         rel="noopener noreferrer"
-        style={{
-          position: 'relative',
-          zIndex: '40',
-          display: 'inline-flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-          width: '100%',
-          padding: '16px 16px 16px 16px',
-          pointerEvents: 'auto',
-        }}
+        className="group pointer-events-auto inline-flex origin-bottom-right scale-75 flex-col items-center rounded-md bg-black p-[16px] sm:scale-100"
       >
-        <span
-          style={{
-            fontFamily: "'Arial', sans-serif",
-            fontSize: '11px',
-            letterSpacing: '0.125em',
-            textTransform: 'uppercase',
-            color: '#808080',
-            marginBottom: '4px',
-          }}
-        >
+        <span className="mb-[4px] font-simple text-[11px] text-xs uppercase tracking-[0.125em] text-gray-600 transition-colors duration-300 ease-in-out group-hover:text-white">
           website by
         </span>
         <img
           src="https://storage.googleapis.com/candycode/candycode.svg"
           alt="candycode, an alternative graphic design and web development agency based in San Diego"
-          style={{ width: '104px', height: '20px' }}
+          className="h-[20px] w-[104px]"
         />
       </a>
     </div>
diff --git a/packages/website/src/components/fade.tsx b/packages/website/src/components/fade.tsx
new file mode 100644
index 000000000..595fa86c6
--- /dev/null
+++ b/packages/website/src/components/fade.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import cx from 'clsx';
+import { useAtomValue } from 'jotai';
+
+import { scrolledAtom } from '../atoms/index.js';
+
+type FadeProps = {
+  always?: boolean;
+};
+
+export const Fade = ({ always = false }: FadeProps) => {
+  const hasScrolled = useAtomValue(scrolledAtom);
+
+  return (
+    <div
+      className={cx(
+        'pointer-events-none fixed inset-0 z-0 transition-opacity duration-500 ease-in-out',
+        always || hasScrolled ? 'opacity-100' : 'opacity-0',
+      )}
+    >
+      <div className="absolute inset-0 backdrop-blur" />
+      <div className="absolute inset-0 bg-gray-900/75" />
+      <div className="absolute inset-0 bg-gradient-to-b from-transparent to-black" />
+    </div>
+  );
+};
diff --git a/packages/website/src/components/mdx.tsx b/packages/website/src/components/mdx.tsx
index c0b2b5a8f..af7c06831 100644
--- a/packages/website/src/components/mdx.tsx
+++ b/packages/website/src/components/mdx.tsx
@@ -39,7 +39,11 @@ export const components = {
     </b>
   ),
   a: ({ children, ...rest }: any) => (
-    <a className="text-white/80 underline" target="_blank" {...rest}>
+    <a
+      className="text-white/80 underline transition-colors duration-300 ease-in-out hover:text-white"
+      target="_blank"
+      {...rest}
+    >
       {children}
     </a>
   ),
@@ -53,7 +57,7 @@ export const components = {
   ),
   code: ({ children, ...rest }: any) => (
     <span
-      className="-my-0.5 inline-block rounded bg-gray-800 px-1.5 py-px font-mono text-sm text-white/80 sm:text-base"
+      className="-my-0.5 inline-block rounded bg-gray-900 px-1.5 py-px font-mono text-sm text-white/80 sm:text-base"
       {...rest}
     >
       {children}
@@ -62,7 +66,7 @@ export const components = {
   pre: ({ children, ...rest }: any) => (
     <Code
       code={children.props.children}
-      className="max-w-full !overflow-clip overflow-x-scroll !rounded-xl !bg-gray-800 !p-0 !font-mono !text-sm sm:!-mx-[0.75em] sm:max-w-[calc(100%+1.5em)] sm:!p-[0.5em] sm:!text-base [&>*]:!bg-gray-800"
+      className="max-w-full !overflow-clip overflow-x-scroll !rounded-xl !bg-gray-900 !p-0 !font-mono !text-sm sm:!-mx-[0.75em] sm:max-w-[calc(100%+1.5em)] sm:!p-[0.5em] sm:!text-base [&>*]:!bg-gray-900"
       {...rest}
     />
   ),
diff --git a/packages/website/src/components/menu.tsx b/packages/website/src/components/menu.tsx
index ba1805db6..2aec29012 100644
--- a/packages/website/src/components/menu.tsx
+++ b/packages/website/src/components/menu.tsx
@@ -16,12 +16,12 @@ export const Menu = () => {
 
   return (
     <>
-      <div className="fixed bottom-0 left-0 z-100 p-8 sm:left-auto xl:bottom-auto xl:right-0 xl:top-0">
+      <div className="fixed right-0 top-0 z-100 p-5 lg:left-0 lg:right-auto lg:p-8">
         <button
           onClick={() => setIsMenuOpen(!isMenuOpen)}
-          className="inline-flex aspect-square h-16 w-16 items-center justify-center overflow-clip rounded-full border-4 border-gray-950 bg-gray-900 text-3xl transition duration-300 ease-in-out hover:bg-gray-800 focus:ring-4 focus:ring-primary-300"
+          className="inline-flex aspect-square h-[3.5rem] w-[3.5rem] items-center justify-center overflow-clip rounded-full border-4 border-gray-950 bg-gray-900 text-3xl transition-colors duration-300 ease-in-out hover:bg-gray-800 focus:ring-4 focus:ring-primary-300"
         >
-          <div className="h-full w-full p-3">
+          <div className="h-full w-full p-2.5">
             {!isMenuOpen ? (
               <img
                 key="menu"
@@ -45,12 +45,14 @@ export const Menu = () => {
           isMenuOpen
             ? 'pointer-events-auto opacity-100'
             : 'pointer-events-none opacity-0',
-          'fixed inset-0 z-90 flex items-center justify-center overscroll-none bg-gray-950/90 pb-32 text-white backdrop-blur transition-opacity duration-700 ease-in-out lg:pb-0',
+          'fixed inset-0 z-90 flex items-center justify-center overscroll-none text-white transition-opacity duration-500 ease-in-out',
         )}
       >
-        <ul className="flex flex-col gap-6 sm:gap-8">
+        <div className="absolute inset-0 backdrop-blur" />
+        <div className="absolute inset-0 bg-gray-950/90" />
+        <ul className="relative z-100 flex-col gap-6 text-center last:flex sm:gap-8">
           {links.map((link) => {
-            return <MenuLink key={link.href} link={link} />;
+            return <MenuLink key={link.to} link={link} />;
           })}
         </ul>
       </nav>
@@ -60,7 +62,7 @@ export const Menu = () => {
 
 type MenuLinkProps = {
   link: {
-    href: string;
+    to?: string;
     label: string;
     disabled?: boolean;
   };
@@ -69,62 +71,53 @@ type MenuLinkProps = {
 export const MenuLink = ({ link }: MenuLinkProps) => {
   const setIsMenuOpen = useSetAtom(menuAtom);
 
-  const props = {
-    onClick: () => setIsMenuOpen(false),
-    className: cx(
-      'flex items-center gap-4 rounded-md focus:ring-4 focus:ring-primary-300',
-      !link.disabled
-        ? 'text-white transition-colors duration-300 ease-in-out hover:text-primary'
-        : 'cursor-not-allowed text-white/40',
-    ),
-  };
-
-  const label = (
-    <span className="text-4xl font-bold sm:text-6xl">{link.label}</span>
-  );
+  let Element: any = 'button';
+  const props: any = {};
 
-  if (link.disabled) {
-    return (
-      <li>
-        <div {...props}>
-          {label}
-          <span className="inline-block rounded-md bg-white px-2 py-1 text-[0.625rem] font-black uppercase tracking-wide text-black sm:text-xs">
-            Coming soon
-          </span>
-        </div>
-      </li>
-    );
+  if (link.to) {
+    if (link.to.startsWith('http')) {
+      Element = 'a';
+      props.href = link.to;
+      props.target = '_blank';
+      props.rel = 'noopener noreferrer';
+    } else {
+      Element = Link;
+      props.to = link.to;
+    }
   }
 
-  if (link.href.startsWith('http')) {
-    return (
-      <li>
-        <a
-          {...props}
-          target="_blank"
-          rel="noopener noreferrer"
-          href={link.href}
-        >
-          {label}
-        </a>
-      </li>
-    );
+  if (link.disabled) {
+    Element = 'div';
   }
 
   return (
     <li>
-      <Link {...props} to={link.href}>
-        {label}
-      </Link>
+      <Element
+        {...props}
+        onClick={() => setIsMenuOpen(false)}
+        className={cx(
+          'flex items-center gap-4 rounded-md focus:ring-4 focus:ring-primary-300',
+          !link.disabled
+            ? 'text-white transition-colors duration-300 ease-in-out hover:text-primary'
+            : 'cursor-not-allowed text-white/40',
+        )}
+      >
+        <span className="text-4xl font-bold sm:text-6xl">{link.label}</span>
+        {link.disabled && (
+          <span className="inline-block rounded-md bg-white px-2 py-1 text-[0.625rem] font-black uppercase tracking-wide text-black sm:text-xs">
+            Coming soon
+          </span>
+        )}
+      </Element>
     </li>
   );
 };
 
 const links = [
-  { href: '/', label: 'Home' },
-  { href: '/docs', label: 'Docs', disabled: true },
-  { href: 'https://github.com/dai-shi/waku/issues/24', label: 'Roadmap' },
-  { href: '/blog', label: 'Blog', disabled: true },
-  { href: 'https://github.com/dai-shi/waku', label: 'GitHub' },
-  { href: 'https://discord.gg/MrQdmzd', label: 'Discord' },
+  { to: '/', label: 'Home' },
+  { to: '/docs', label: 'Docs', disabled: true },
+  { to: 'https://github.com/dai-shi/waku/issues/24', label: 'Roadmap' },
+  { to: '/blog', label: 'Blog', disabled: true },
+  { to: 'https://github.com/dai-shi/waku', label: 'GitHub' },
+  { to: 'https://discord.gg/MrQdmzd', label: 'Discord' },
 ];
diff --git a/packages/website/src/components/page.tsx b/packages/website/src/components/page.tsx
index dfb17127f..72e8095ff 100644
--- a/packages/website/src/components/page.tsx
+++ b/packages/website/src/components/page.tsx
@@ -1,27 +1,47 @@
 import type { ReactNode } from 'react';
 
+import { Menu } from '../components/menu.js';
+import { Fade } from './fade.js';
+import { Credits } from '../components/credits.js';
+import { Scroll } from './scroll.js';
+
 type PageProps = {
-  hero?: ReactNode;
+  isFaded?: boolean;
   children: ReactNode;
 };
 
-export const Page = ({ hero = null, children }: PageProps) => {
+export const Page = ({ isFaded = true, children }: PageProps) => {
   return (
     <>
-      {hero}
-      <div className="relative pb-32">
-        <div className="sticky top-0 z-10 h-0 w-full overflow-visible">
-          <div className="left-0 right-0 top-0 z-10 flex h-[100svh] w-full bg-gradient-to-b from-transparent via-gray-950/75 to-gray-950" />
-        </div>
-        <div className="relative z-20 flex justify-center px-4">
-          <div
-            id="content"
-            className="mx-auto mt-4 inline-block max-w-full scroll-mt-4 overflow-clip rounded-2xl border-4 border-gray-950 bg-gray-900/90 p-4 text-white backdrop-blur sm:p-8 lg:mt-32 lg:scroll-mt-32 lg:p-12"
-          >
-            <div className="w-full max-w-[80ch]">{children}</div>
-          </div>
-        </div>
-      </div>
+      <Menu />
+      <Background />
+      <Fade always={isFaded} />
+      <Main>{children}</Main>
+      <Credits />
+      <Scroll />
     </>
   );
 };
+
+type MainProps = {
+  children: ReactNode;
+};
+
+const Main = ({ children }: MainProps) => {
+  return <main className="px-8 pb-24 lg:pb-32">{children}</main>;
+};
+
+const Background = () => {
+  return (
+    <div className="fixed inset-0 z-0">
+      <div className="absolute inset-0 z-0 sm:-inset-8">
+        <img
+          src="https://cdn.candycode.com/waku/background.jpg"
+          alt=""
+          className="h-full w-full object-cover object-center"
+        />
+      </div>
+      <div className="absolute inset-0 z-10 bg-gradient-radial from-transparent to-black/25" />
+    </div>
+  );
+};
diff --git a/packages/website/src/components/providers.tsx b/packages/website/src/components/providers.tsx
new file mode 100644
index 000000000..461660f84
--- /dev/null
+++ b/packages/website/src/components/providers.tsx
@@ -0,0 +1,16 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { createStore, Provider } from 'jotai';
+
+import { menuAtom, scrolledAtom } from '../atoms/index.js';
+
+type ProvidersProps = { children: ReactNode };
+
+const store = createStore();
+store.set(menuAtom, false);
+store.set(scrolledAtom, false);
+
+export const Providers = ({ children }: ProvidersProps) => {
+  return <Provider store={store}>{children}</Provider>;
+};
diff --git a/packages/website/src/components/scroll.tsx b/packages/website/src/components/scroll.tsx
new file mode 100644
index 000000000..25c5b0bdd
--- /dev/null
+++ b/packages/website/src/components/scroll.tsx
@@ -0,0 +1,25 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import { useEffect } from 'react';
+import { useSetAtom } from 'jotai';
+import { useScroll } from 'framer-motion';
+
+import { scrolledAtom } from '../atoms/index.js';
+
+export const Scroll = () => {
+  const { scrollY } = useScroll();
+  const setHasScrolled = useSetAtom(scrolledAtom);
+
+  useEffect(() => {
+    return scrollY.on('change', (latest) => {
+      if (latest >= 100) {
+        setHasScrolled(true);
+      } else {
+        setHasScrolled(false);
+      }
+    });
+  }, []);
+
+  return null;
+};
diff --git a/packages/website/src/components/start.tsx b/packages/website/src/components/start.tsx
index c3166b6f3..1a3584582 100644
--- a/packages/website/src/components/start.tsx
+++ b/packages/website/src/components/start.tsx
@@ -1,14 +1,35 @@
 'use client';
 
+import cx from 'clsx';
+import { useAtomValue } from 'jotai';
+
+import { scrolledAtom } from '../atoms/index.js';
 import { scrollTo } from '../utils/index.js';
 
 export const Start = () => {
+  const hasScrolled = useAtomValue(scrolledAtom);
+
   return (
-    <button
-      onClick={() => scrollTo('content')}
-      className="text-red-50 rounded-md bg-primary-700 px-6 py-3 text-xl font-black uppercase leading-none tracking-wide transition duration-300 ease-in-out hover:bg-primary-500 focus:ring-4 focus:ring-primary-300 sm:px-8 sm:py-4 sm:text-2xl"
+    <div
+      className={cx(
+        'pt-8 text-center text-white transition-opacity duration-500 ease-in-out',
+        !hasScrolled ? 'opacity-100' : 'opacity-0',
+      )}
     >
-      Start
-    </button>
+      <h1 className="text-shadow -ml-4 font-serif text-8xl font-extrabold leading-none sm:text-[10rem]">
+        Waku
+      </h1>
+      <h3 className="text-shadow text-xl font-bold leading-none text-white/80 sm:-mt-2 sm:text-3xl">
+        The minimal React framework
+      </h3>
+      <div className="mt-4 px-12 sm:mt-4 sm:px-0">
+        <button
+          onClick={() => scrollTo('content')}
+          className="text-red-50 rounded-md bg-primary-700 px-6 py-3 text-xl font-black uppercase leading-none tracking-wide transition-colors duration-300 ease-in-out hover:bg-primary-500 focus:ring-4 focus:ring-primary-300 sm:px-8 sm:py-4 sm:text-2xl"
+        >
+          Start
+        </button>
+      </div>
+    </div>
   );
 };
diff --git a/packages/website/src/entries.tsx b/packages/website/src/entries.tsx
index 51d78f00e..3c8a98d30 100644
--- a/packages/website/src/entries.tsx
+++ b/packages/website/src/entries.tsx
@@ -1,5 +1,5 @@
 import { readdirSync, readFileSync } from 'node:fs';
-import { createPages } from 'waku/router/server';
+import { createPages } from 'waku';
 // @ts-expect-error no exported member
 import { compileMDX } from 'next-mdx-remote/rsc';
 
diff --git a/packages/website/src/styles.css b/packages/website/src/styles.css
index 587d266af..fd3732b3c 100644
--- a/packages/website/src/styles.css
+++ b/packages/website/src/styles.css
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=block');
+@import url('https://fonts.googleapis.com/css2?family=Inter&display=block');
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&display=block');
 @tailwind base;
 :root {
diff --git a/packages/website/src/templates/blog-article-page.tsx b/packages/website/src/templates/blog-article-page.tsx
index f3f01c5b8..127fecc97 100644
--- a/packages/website/src/templates/blog-article-page.tsx
+++ b/packages/website/src/templates/blog-article-page.tsx
@@ -2,8 +2,8 @@ import { readdirSync, readFileSync } from 'node:fs';
 // @ts-expect-error no exported member
 import { compileMDX } from 'next-mdx-remote/rsc';
 
-import { components } from '../components/mdx.js';
 import { Page } from '../components/page.js';
+import { components } from '../components/mdx.js';
 
 type BlogArticlePageProps = {
   slug: string;
@@ -22,40 +22,62 @@ export const BlogArticlePage = async ({ slug }: BlogArticlePageProps) => {
     options: { parseFrontmatter: true },
   });
   const { frontmatter, content } = mdx;
+
   const author = getAuthor(frontmatter.author);
+  const date = new Date(frontmatter.date).toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
 
   return (
-    <>
+    <Page>
       <title>{frontmatter.title}</title>
-      <Page>
-        <div className=" text-white">
-          <h1 className="font-serif text-3xl font-extrabold leading-none sm:text-6xl">
-            {frontmatter.title}
-          </h1>
-          <h3 className="mt-2 text-lg font-normal leading-snug text-white/60 sm:mt-0 sm:text-xl sm:font-bold">
-            {frontmatter.description}
-          </h3>
-          <a
-            href={author.url}
-            target="_blank"
-            rel="noreferrer"
-            className="text-red-400 mx-auto mb-8 mt-4 inline-flex items-center justify-center gap-2 hover:underline sm:mb-12 sm:mt-4"
-          >
-            <div className="relative h-8 w-8 overflow-clip rounded-full border border-gray-500">
-              <img
-                src={author.avatar}
-                alt=""
-                className="absolute inset-0 h-full w-full object-cover"
-              />
+      <div className="relative z-10 mx-auto w-full max-w-[80ch] pt-16 text-white lg:pt-64">
+        <div className="mb-8 flex items-center gap-4">
+          {frontmatter.release && (
+            <div>
+              <div className="inline-block rounded-md bg-white px-2 py-1 text-[0.625rem] font-black uppercase tracking-wide text-black sm:text-xs">
+                Waku v{frontmatter.release}
+              </div>
             </div>
-            <div className="text-sm font-normal text-white/80 sm:text-lg lg:text-xl">
-              by {author.name}, {author.biography}
-            </div>
-          </a>
+          )}
+          <div className="font-simple text-[11px] uppercase tracking-[0.125em] text-gray-400">
+            {date}
+          </div>
         </div>
+        <h1 className="font-serif text-3xl font-extrabold leading-none sm:text-6xl">
+          {frontmatter.title}
+        </h1>
+        <h3 className="mt-2 text-lg font-normal leading-snug text-white/60 sm:mt-0 sm:text-xl sm:font-bold">
+          {frontmatter.description}
+        </h3>
+        <a
+          href={author.url}
+          target="_blank"
+          rel="noreferrer"
+          className="group mx-auto mt-4 flex items-center gap-2 sm:mt-4"
+        >
+          <div className="relative size-8 overflow-clip rounded-full border border-gray-800 transition-colors duration-300 ease-in-out group-hover:border-white sm:size-6">
+            <img
+              src={author.avatar}
+              alt=""
+              className="absolute inset-0 h-full w-full object-cover"
+            />
+          </div>
+          <div className="font-simple text-[11px] uppercase tracking-[0.125em] text-gray-400 transition-colors duration-300 ease-in-out group-hover:text-white">
+            by {author.name}
+            <span className="hidden sm:inline">, </span>
+            <br className="sm:hidden" />
+            {author.biography}
+          </div>
+        </a>
+        <hr className="mt-2 h-px border-none bg-gray-800" />
+      </div>
+      <div className="relative z-10 mx-auto w-full max-w-[80ch] pt-8 lg:pt-16">
         {content}
-      </Page>
-    </>
+      </div>
+    </Page>
   );
 };
 
@@ -65,9 +87,16 @@ const getAuthor = (author: string) => {
       return {
         name: `Daishi Kato`,
         biography: `author of Zustand and Jotai`,
-        avatar: `https://storage.googleapis.com/candycode/jotai/daishi.png`,
+        avatar: `https://cdn.candycode.com/waku/daishi.png`,
         url: `https://x.com/dai_shi`,
       };
+    case 'sophia':
+      return {
+        name: `Sophia Andren`,
+        biography: `technical director of candycode`,
+        avatar: `https://cdn.candycode.com/waku/sophia.png`,
+        url: `https://x.com/razorbelle`,
+      };
     default:
       return {
         name: ``,
diff --git a/packages/website/src/templates/home-page.tsx b/packages/website/src/templates/home-page.tsx
index 1b2fa7f95..4d4fdc347 100644
--- a/packages/website/src/templates/home-page.tsx
+++ b/packages/website/src/templates/home-page.tsx
@@ -2,9 +2,9 @@ import { readFileSync } from 'node:fs';
 // @ts-expect-error no exported member
 import { compileMDX } from 'next-mdx-remote/rsc';
 
+import { Page } from '../components/page.js';
 import { components } from '../components/mdx.js';
 import { Start } from '../components/start.js';
-import { Page } from '../components/page.js';
 
 export const HomePage = async () => {
   const fileName = '../../README.md';
@@ -20,30 +20,20 @@ export const HomePage = async () => {
   const { content } = mdx;
 
   return (
-    <>
+    <Page isFaded={false}>
       <title>Waku</title>
-      <Page
-        hero={
-          <div className="relative flex h-[100svh] w-full flex-col items-center justify-center overflow-clip font-sans">
-            <div className="pt-8 text-center text-white">
-              <h1 className="text-shadow -ml-4 font-serif text-8xl font-extrabold leading-none sm:text-[10rem]">
-                Waku
-              </h1>
-              <h3 className="text-shadow text-xl font-bold leading-none text-white/80 sm:-mt-2 sm:text-3xl">
-                The minimal React framework
-              </h3>
-              <div className="mt-4 px-12 sm:mt-4 sm:px-0">
-                <Start />
-              </div>
-            </div>
-            <div className="sr-only" suppressHydrationWarning>
-              {new Date().toISOString()}
-            </div>
-          </div>
-        }
+      <div className="relative flex h-svh w-full flex-col items-center justify-center overflow-clip font-sans">
+        <Start />
+        <div className="sr-only" suppressHydrationWarning>
+          {new Date().toISOString()}
+        </div>
+      </div>
+      <div
+        id="content"
+        className="relative z-10 mx-auto w-full max-w-[80ch] scroll-mt-16 lg:scroll-mt-32"
       >
         {content}
-      </Page>
-    </>
+      </div>
+    </Page>
   );
 };
diff --git a/packages/website/src/templates/root-layout.tsx b/packages/website/src/templates/root-layout.tsx
index edc3bf0bb..5de8dba7c 100644
--- a/packages/website/src/templates/root-layout.tsx
+++ b/packages/website/src/templates/root-layout.tsx
@@ -2,36 +2,29 @@ import '../styles.css';
 
 import type { ReactNode } from 'react';
 
-import { Menu } from '../components/menu.js';
-import { Credits } from '../components/credits.js';
+import { Providers } from '../components/providers.js';
+import { Analytics } from '../components/analytics.js';
 
 type RootLayoutProps = { children: ReactNode };
 
 export const RootLayout = async ({ children }: RootLayoutProps) => {
   return (
-    <>
+    <Providers>
       <Meta />
-      <div id="__waku">
-        <Menu />
-        <Background />
-        <Main>{children}</Main>
-        <Credits />
-      </div>
-    </>
+      <div id="__waku">{children}</div>
+      <Analytics />
+    </Providers>
   );
 };
 
 const Meta = () => {
   return (
     <>
-      <meta property="description" content="⛩️ The minimal React framework" />
+      <meta property="description" content="The minimal React framework" />
       <meta property="og:locale" content="en" />
       <meta property="og:site_name" content="Waku" />
       <meta property="og:title" content="Waku" />
-      <meta
-        property="og:description"
-        content="⛩️ The minimal React framework"
-      />
+      <meta property="og:description" content="The minimal React framework" />
       <meta property="og:type" content="website" />
       <meta
         property="og:image"
@@ -57,26 +50,3 @@ const Meta = () => {
     </>
   );
 };
-
-type MainProps = {
-  children: ReactNode;
-};
-
-const Main = ({ children }: MainProps) => {
-  return <main className="relative z-10">{children}</main>;
-};
-
-const Background = () => {
-  return (
-    <div className="fixed left-0 right-0 top-0 z-0 h-svh">
-      <div className="absolute inset-0 z-0 sm:-inset-8">
-        <img
-          src="https://cdn.candycode.com/waku/background.jpg"
-          alt=""
-          className="h-full w-full object-cover object-center"
-        />
-      </div>
-      <div className="absolute inset-0 z-10 h-full w-full bg-gradient-radial from-transparent to-black/25" />
-    </div>
-  );
-};
diff --git a/packages/website/tailwind.config.js b/packages/website/tailwind.config.js
index b2daff3ac..fe8f60330 100644
--- a/packages/website/tailwind.config.js
+++ b/packages/website/tailwind.config.js
@@ -43,6 +43,7 @@ export default {
       serif: ['"Alegreya"', 'serif'],
       sans: ['"Nunito"', 'sans-serif'],
       mono: ['"Fira Code"', 'monospace'],
+      simple: ['"Inter"', 'sans-serif'],
     },
     extend: {
       backgroundImage: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ac3c2c4a..dd3207807 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -580,15 +580,15 @@ importers:
 
   packages/website:
     dependencies:
-      '@headlessui/react':
-        specifier: ^1.7.17
-        version: 1.7.17(react-dom@18.3.0-canary-c5b937576-20231219)(react@18.3.0-canary-c5b937576-20231219)
       bright:
         specifier: ^0.8.4
         version: 0.8.4(react@18.3.0-canary-c5b937576-20231219)
       clsx:
         specifier: ^2.1.0
         version: 2.1.0
+      framer-motion:
+        specifier: ^10.18.0
+        version: 10.18.0(react-dom@18.3.0-canary-c5b937576-20231219)(react@18.3.0-canary-c5b937576-20231219)
       jotai:
         specifier: ^2.6.1
         version: 2.6.1(@types/react@18.2.46)(react@18.3.0-canary-c5b937576-20231219)
@@ -615,14 +615,14 @@ importers:
         specifier: ^10.4.16
         version: 10.4.16(postcss@8.4.32)
       prettier:
-        specifier: ^3.1.1
-        version: 3.1.1
+        specifier: ^3.2.2
+        version: 3.2.2
       prettier-plugin-tailwindcss:
-        specifier: ^0.5.10
-        version: 0.5.10(prettier@3.1.1)
+        specifier: ^0.5.11
+        version: 0.5.11(prettier@3.2.2)
       tailwindcss:
-        specifier: ^3.4.0
-        version: 3.4.0
+        specifier: ^3.4.1
+        version: 3.4.1
       typescript:
         specifier: ^5.3.3
         version: 5.3.3
@@ -886,6 +886,20 @@ packages:
   /@emotion/hash@0.9.1:
     resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
 
+  /@emotion/is-prop-valid@0.8.8:
+    resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==}
+    requiresBuild: true
+    dependencies:
+      '@emotion/memoize': 0.7.4
+    dev: false
+    optional: true
+
+  /@emotion/memoize@0.7.4:
+    resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /@esbuild/aix-ppc64@0.19.11:
     resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==}
     engines: {node: '>=12'}
@@ -1305,18 +1319,6 @@ packages:
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     dev: true
 
-  /@headlessui/react@1.7.17(react-dom@18.3.0-canary-c5b937576-20231219)(react@18.3.0-canary-c5b937576-20231219):
-    resolution: {integrity: sha512-4am+tzvkqDSSgiwrsEpGWqgGo9dz8qU5M3znCkC4PgkpY4HcCZzEDEvozltGGGHIKl9jbXbZPSH5TWn4sWJdow==}
-    engines: {node: '>=10'}
-    peerDependencies:
-      react: ^16 || ^17 || ^18
-      react-dom: ^16 || ^17 || ^18
-    dependencies:
-      client-only: 0.0.1
-      react: 18.3.0-canary-c5b937576-20231219
-      react-dom: 18.3.0-canary-c5b937576-20231219(react@18.3.0-canary-c5b937576-20231219)
-    dev: false
-
   /@hono/node-server@1.4.0:
     resolution: {integrity: sha512-bhDkhldW7w9VgjrX0gG1vJ2YyvTxFWd5WG9nHjSR4UauhVECQZC3qy7mVVuQ054I5NWhKttHfKzYfoPzmUzAjw==}
     engines: {node: '>=18.14.1'}
@@ -2639,10 +2641,6 @@ packages:
     resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
     dev: false
 
-  /client-only@0.0.1:
-    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
-    dev: false
-
   /clone-response@1.0.3:
     resolution: {integrity: sha512-ROoL94jJH2dUVML2Y/5PEDNaSHgeOdSDicUyS7izcF63G6sTc/FTjLub4b8Il9S8S0beOfYt0TaA5qvFK+w0wA==}
     dependencies:
@@ -3625,6 +3623,24 @@ packages:
     resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==}
     dev: true
 
+  /framer-motion@10.18.0(react-dom@18.3.0-canary-c5b937576-20231219)(react@18.3.0-canary-c5b937576-20231219):
+    resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+    peerDependenciesMeta:
+      react:
+        optional: true
+      react-dom:
+        optional: true
+    dependencies:
+      react: 18.3.0-canary-c5b937576-20231219
+      react-dom: 18.3.0-canary-c5b937576-20231219(react@18.3.0-canary-c5b937576-20231219)
+      tslib: 2.6.2
+    optionalDependencies:
+      '@emotion/is-prop-valid': 0.8.8
+    dev: false
+
   /fresh@0.5.2:
     resolution: {integrity: sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==}
     engines: {node: '>= 0.6'}
@@ -5385,12 +5401,70 @@ packages:
       prettier: 3.1.1
     dev: true
 
+  /prettier-plugin-tailwindcss@0.5.11(prettier@3.2.2):
+    resolution: {integrity: sha512-AvI/DNyMctyyxGOjyePgi/gqj5hJYClZ1avtQvLlqMT3uDZkRbi4HhGUpok3DRzv9z7Lti85Kdj3s3/1CeNI0w==}
+    engines: {node: '>=14.21.3'}
+    peerDependencies:
+      '@ianvs/prettier-plugin-sort-imports': '*'
+      '@prettier/plugin-pug': '*'
+      '@shopify/prettier-plugin-liquid': '*'
+      '@trivago/prettier-plugin-sort-imports': '*'
+      prettier: ^3.0
+      prettier-plugin-astro: '*'
+      prettier-plugin-css-order: '*'
+      prettier-plugin-import-sort: '*'
+      prettier-plugin-jsdoc: '*'
+      prettier-plugin-marko: '*'
+      prettier-plugin-organize-attributes: '*'
+      prettier-plugin-organize-imports: '*'
+      prettier-plugin-style-order: '*'
+      prettier-plugin-svelte: '*'
+      prettier-plugin-twig-melody: '*'
+    peerDependenciesMeta:
+      '@ianvs/prettier-plugin-sort-imports':
+        optional: true
+      '@prettier/plugin-pug':
+        optional: true
+      '@shopify/prettier-plugin-liquid':
+        optional: true
+      '@trivago/prettier-plugin-sort-imports':
+        optional: true
+      prettier-plugin-astro:
+        optional: true
+      prettier-plugin-css-order:
+        optional: true
+      prettier-plugin-import-sort:
+        optional: true
+      prettier-plugin-jsdoc:
+        optional: true
+      prettier-plugin-marko:
+        optional: true
+      prettier-plugin-organize-attributes:
+        optional: true
+      prettier-plugin-organize-imports:
+        optional: true
+      prettier-plugin-style-order:
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      prettier-plugin-twig-melody:
+        optional: true
+    dependencies:
+      prettier: 3.2.2
+    dev: true
+
   /prettier@3.1.1:
     resolution: {integrity: sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==}
     engines: {node: '>=14'}
     hasBin: true
     dev: true
 
+  /prettier@3.2.2:
+    resolution: {integrity: sha512-HTByuKZzw7utPiDO523Tt2pLtEyK7OibUD9suEJQrPUCYQqrHr74GGX6VidMrovbf/I50mPqr8j/II6oBAuc5A==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dev: true
+
   /prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
@@ -6084,8 +6158,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /tailwindcss@3.4.0:
-    resolution: {integrity: sha512-VigzymniH77knD1dryXbyxR+ePHihHociZbXnLZHUyzf2MMs2ZVqlUrZ3FvpXP8pno9JzmILt1sZPD19M3IxtA==}
+  /tailwindcss@3.4.1:
+    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
     engines: {node: '>=14.0.0'}
     hasBin: true
     dependencies:
@@ -6243,6 +6317,10 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /tslib@2.6.2:
+    resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
+    dev: false
+
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}