Added blog navigation and fixed rive types.

app/blog/[slug]/layout.css

@@ -30,4 +30,8 @@
 
 .markdown-content p {
   margin-bottom: 1rem;
+}
+
+html {
+  scroll-behavior: smooth;
 }

app/blog/[slug]/page.tsx

@@ -1,13 +1,13 @@
 import fs from 'fs'
-import { Source_Serif_4 } from 'next/font/google'
+import { Inter } from 'next/font/google'
 import { getPostData } from '@/lib/posts'
 import formatDate from '@/lib/format'
 import Link from 'next/link'
 import path from 'path'
 import { DINish } from '@/app/fonts'
+import PageNavigator from '@/components/pageNavigator'
 
-const sourceSerifPro = Source_Serif_4({ subsets: ['latin'], weight: ['400', '500', '600'] })
-
+const inter = Inter({ subsets: ['latin'], weight: ['400', '500', '600'] })
 type Params = {
   slug: string
 }
@@ -80,25 +80,28 @@ export default async function Post({ params }: Props) {
   const { date, time, author } = postData;
 
   return (
-    <section className='m-auto max-w-lg px-5 py-14 lg:max-w-8xl'>
+    <section className='m-auto max-w-lg px-5 py-14 lg:max-w-6xl'>
       {/* Post Title */}
-      <div className='m-auto max-w-2xl'>
+      <div className='m-auto max-w-3xl'>
         <Link href="/blog" className='flex items-center pb-6'>
           <svg viewBox="0 0 24 24" width={17} height={17} fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M3 9H16.5C18.9853 9 21 11.0147 21 13.5C21 15.9853 18.9853 18 16.5 18H12M3 9L7 5M3 9L7 13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"></path>
           </svg>
           <span className='px-2'>Back to posts</span>
         </Link>
-        <h1 className={`${DINish.className} text-3xl font-semibold text-zinc-700 md:text-4xl md:leading-11`}>{postData.title}</h1>
+        <h1 className={`${DINish.className} text-3xl font-semibold text-zinc-700 md:text-5xl md:leading-11`}>{postData.title}</h1>
         <Meta date={date} time={time} author={author} />
 
         {/* Post Content */}
         <div
           // eslint-disable-next-line tailwindcss/no-custom-classname
-          className={`markdown-content pt-4 ${sourceSerifPro.className} text-lg leading-8`}
+          className={`markdown-content pt-4 ${inter.className} text-base leading-normal`}
           dangerouslySetInnerHTML={{ __html: postData.contentHtml }}
         />
       </div>
+
+      {/* Page Navigator */}
+      <PageNavigator />
     </section>
   )
 }

app/blog/page.tsx

@@ -1,13 +1,13 @@
 import { getSortedPostsData } from '@/lib/posts'
-import { Source_Serif_4 } from 'next/font/google'
+import { Source_Serif_4, Inter } from 'next/font/google'
 import Link from 'next/link'
 import { DateTime } from 'luxon'
 import Image from 'next/image'
 import { DINish } from '../fonts'
 
 
 const sourceSerifPro = Source_Serif_4({ subsets: ['latin'], weight: ['400', '500', '600'] })
-
+const inter = Inter({ subsets: ['latin'], weight: ['400', '500', '600'] })
 
 type AllPostsData = {
   date: string
@@ -54,7 +54,7 @@ export default function Blog() {
               <Link className='mb-1 mt-5 grid grid-cols-12 gap-4 border-b pb-6 font-medium' href={`/blog/${id}`}>
                 <div className='order-1 col-span-12 flex flex-col justify-center lg:col-span-6'>
                   <h1 className={`${DINish.className} text-3xl font-semibold text-zinc-700 leading-8 md:leading-11 lg:text-4xl`}>{title}</h1>
-                  <p className={`max-w-lg py-8 text-left text-base text-gray-600 md:text-base ${sourceSerifPro.className}`}>
+                  <p className={`max-w-lg py-8 text-left text-base text-gray-600 md:text-base ${inter.className}`}>
                     {description}
                   </p>
                   <Meta date={date} time={time} author={author} />

app/hero_v2.tsx

@@ -1,15 +1,15 @@
 "use client";
 
 // @ts-ignore
-import riveWASMResource from '@rive-app/canvas/rive.wasm';
+// import riveWASMResource from '@rive-app/canvas/rive.wasm';
 import Rive, { useRive, Layout, Fit, Alignment, RuntimeLoader } from "@rive-app/react-canvas";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { DINish } from './fonts';
 import { createPortal } from 'react-dom';
 import Modal from '@/components/modal';
 import { CSSTransition } from 'react-transition-group';
 
-RuntimeLoader.setWasmUrl(riveWASMResource);
+// RuntimeLoader.setWasmUrl(riveWASMResource);
 
 const Hero = () => {
   const [artboard, setArtboard] = useState('Artboard_sm');
@@ -26,7 +26,6 @@ const Hero = () => {
     const ro = new ResizeObserver((entries) => {
       const { width, height } = entries[0].contentRect;
       if (width >= 1024) {
-        console.log('update')
         setArtboard('Artboard')
         setStateMachine('hero_sme')
       } else {
@@ -39,8 +38,6 @@ const Hero = () => {
     }
   }, []);
 
-  console.log('stateMachine', stateMachine)
-
   return (
     <section className="grid grid-cols-12 gap-8 pt-8 md:pt-16 md:gap-12 relative" ref={containerRef}>
       <h1 className={`text-4xl font-bold col-start-2 col-span-8 ${DINish.className} leading-[40px] xs:col-span-10 xs:col-start-2 md:text-5xl md:leading-[56px] md:text-center`}>Finally, business metrics at your fingertips</h1>

app/interactive.tsx

@@ -29,31 +29,6 @@ export default function Interactive() {
   }, []);
 
   return (
-    // <section id="container" className="z-[1]" ref={interactiveRef}>
-    //   <div className="container mx-auto pb-20 pt-0" >
-    //     <div className="grid grid-cols-16">
-    //       <div className="relative col-start-3 col-end-[-1] flex justify-between">
-    //         <div className="flex flex-col">
-    //           <div className="flex w-full justify-start">
-    //             <svg className="max-w-[40px] text-primary" fill="currentColor" viewBox="0 -2 32 28">
-    //               <path d="M10 14v8h-4v-8h4zM16 6v16h-4v-16h4zM32 24v2h-32v-24h2v22h30zM22 10v12h-4v-12h4zM28 4v18h-4v-18h4z"></path>
-    //             </svg>
-    //             <h2 className={`text-4xl font-bold text-primary ${DINish.className} pl-4`}>Interactive analytics</h2>
-    //           </div>
-    //           <p className={`${DINish.className} max-w-xl pt-5 text-xl`}>
-    //             Quickly slice and dice your data to uncover key business insights.
-    //           </p>
-    //           <p className={`${DINish.className} max-w-xl pt-5 text-xl`}>
-    //             EdgeSet supports a variety of visualizations, offering flexibility in how data can be displayed.
-    //           </p>
-    //         </div>
-    //         <div className="relative">
-    //           <video src="/assets/area_zoom.mp4" loop muted playsInline className="h-[400px] w-[600px] object-cover" />
-    //         </div>
-    //       </div>
-    //     </div>
-    //   </div>
-    // </section>
     <section id="container" className="z-[1]" ref={interactiveRef}>
       <div className="grid grid-cols-12 py-8 max-w-[1490px] mx-auto pb-16">
         <div className="col-start-2 col-span-10 grid [grid-template-columns:subgrid]">

app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import { Inter, Work_Sans } from 'next/font/google'
+import riveWASMResource from '@rive-app/canvas/rive.wasm';
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'], weight: ['400', '500', '600'] })
@@ -29,6 +30,9 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
+      <head>
+        <link rel="preload" href={riveWASMResource} as="fetch" crossOrigin="anonymous" />
+      </head>
       <body>
         {children}
         <script defer data-api="https://analytics.tetmon.com/api/event" src="/assets/plausible.js"></script>

app/page.tsx

@@ -1,10 +1,6 @@
 import Navbar from '@/components/navbar';
 import Footer from '@/components/footer';
 
-// import Radar from '../components/radar';
-// import SinglePane from './singlePane';
-// import ThreeV from './threeV';
-// import Hero from './hero';
 import Platform from './platform';
 import Summary from './summary';
 import Security from './security';