feat(website): update branding, update blog posts, add vercel web analytics

packages/website/components/BlogSection.tsx

@@ -1,47 +1,47 @@
 const posts = [
   {
-    title: "Taiko Community Update — Q1/2023",
-    href: "https://taiko.mirror.xyz/IoEGEzlf0aJAtF31YgHHLOa5dSoetLfpIfb7lRaRiCE",
+    title: "Community invite: help craft the ZK-research digest",
+    href: "https://taiko.mirror.xyz/lezTMMMoog57VnYwiUWiw4Ng_mX19WCMOpPW-W-xcM0",
     description:
-      "Below is a summary of Taiko’s Q1 2023. Consider this Q1.5 as we’ll include updates that happened post-Q1 but before this update.",
-    date: "May 19, 2023",
-    datetime: "2023-05-19",
+      "We are starting an open research community to collaborate on the creation of the ZK research digest and share rare discoveries and valuable content to learn, grow and build together.",
+    date: "May 29, 2023",
+    datetime: "2023-05-29",
     imageUrl:
-      "https://mirror-media.imgix.net/publication-images/TOXeVr7_rtitwDoja4vFR.png?height=512&width=1024&h=512&w=1024&auto=compress",
-    readingTime: "6 min",
+      "https://mirror-media.imgix.net/publication-images/8RANXhY7FVaW8C9acbamg.png?height=512&width=1024&h=512&w=1024&auto=compress",
+    readingTime: "3 min",
     author: {
-      name: "finestone",
-      imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4",
+      name: "Lisa A.",
+      imageUrl: "https://avatars.githubusercontent.com/u/106527861?v=4",
     },
   },
   {
-    title: "ZK-Roller-Coaster #4",
-    href: "https://taiko.mirror.xyz/OCkE3gMDKixWYC-mlX7wAqDNJaUEpm3yeDAYJygyxkg",
+    title: "ZK-Roller-Coaster #5",
+    href: "https://taiko.mirror.xyz/D9hurhYWGpVbFosu8KYsr0FeYcbi4wB0rt67hbXD_zk",
     description:
-      "This is the 4th edition of ZK-Roller-Coaster where we track and investigate the most exciting, meaningful, and crazy ZK-stuff of the prior two weeks.",
-    date: "May 06, 2023",
-    datetime: "2023-05-06",
+      "This is the 5th edition of ZK-Roller-Coaster where we track and investigate the most exciting, meaningful, and crazy ZK-stuff of the prior two weeks.",
+    date: "May 22, 2023",
+    datetime: "2023-05-22",
     imageUrl:
-      "https://mirror-media.imgix.net/publication-images/Myf4VHMd1ACmqL0jmYHWe.png?height=512&width=1024&h=512&w=1024&auto=compress",
-    readingTime: "4 min",
+      "https://mirror-media.imgix.net/publication-images/aqZ6LByfP5NL675mThlf-.png?height=512&width=1024&h=512&w=1024&auto=compress",
+    readingTime: "3 min",
     author: {
       name: "Lisa A.",
       imageUrl: "https://avatars.githubusercontent.com/u/106527861?v=4",
     },
   },
   {
-    title: "Taiko Protocol Overview",
-    href: "https://taiko.mirror.xyz/y_47kIOL5kavvBmG0zVujD2TRztMZt-xgM5d4oqp4_Y",
+    title: "Taiko Community Update — Q1/2023",
+    href: "https://taiko.mirror.xyz/IoEGEzlf0aJAtF31YgHHLOa5dSoetLfpIfb7lRaRiCE",
     description:
-      "Taiko follows the “decentralized from day 1” approach. Below is the protocol description. Taiko protocol consists of three stages: block proposal, validation, and proving.",
-    date: "May 02, 2023",
-    datetime: "2023-05-02",
+      "Below is a summary of Taiko’s Q1 2023. Consider this Q1.5 as we’ll include updates that happened post-Q1 but before this update.",
+    date: "May 19, 2023",
+    datetime: "2023-05-19",
     imageUrl:
-      "https://mirror-media.imgix.net/publication-images/o_qvD7XIAPSjiqlvvodoj.png?height=512&width=1024&h=512&w=1024&auto=compress",
+      "https://mirror-media.imgix.net/publication-images/TOXeVr7_rtitwDoja4vFR.png?height=512&width=1024&h=512&w=1024&auto=compress",
     readingTime: "6 min",
     author: {
-      name: "Lisa A.",
-      imageUrl: "https://avatars.githubusercontent.com/u/106527861?v=4",
+      name: "finestone",
+      imageUrl: "https://avatars.githubusercontent.com/u/36642873?v=4",
     },
   },
 ];
@@ -54,7 +54,7 @@ export default function BlogSection() {
       </div>
       <div className="relative mx-auto max-w-7xl">
         <div className="text-center">
-          <h2 className="font-oxanium text-3xl font-bold tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-100">
+          <h2 className="font-grotesk text-3xl tracking-tight text-neutral-900 sm:text-4xl dark:text-neutral-100">
             Latest blog posts
           </h2>
           <div className="mx-auto mt-3 max-w-2xl text-xl text-neutral-500 sm:mt-4 dark:text-neutral-300">
@@ -107,7 +107,7 @@ export default function BlogSection() {
                       />
                     </div>
                     <div className="ml-3">
-                      <div className="text-sm font-medium text-[#fc0fc0]">
+                      <div className="text-sm font-medium text-[#e81899]">
                         {post.author.name}
                       </div>
                       <div className="flex space-x-1 text-sm text-neutral-500 dark:text-neutral-400">

packages/website/components/CareerSection.tsx

@@ -2,7 +2,7 @@ export default function CareerSection() {
   return (
     <div className="bg-white dark:bg-neutral-900">
       <div className="mx-auto max-w-7xl py-12 px-4 text-center sm:px-6 lg:py-16 lg:px-8">
-        <h2 className="font-oxanium text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl dark:text-neutral-100">
+        <h2 className="font-grotesk text-3xl tracking-tight text-gray-900 sm:text-4xl dark:text-neutral-100">
           <span className="block">Join the community 💪</span>
         </h2>
         <section className="bg-white dark:bg-neutral-900 py-12">
@@ -28,7 +28,7 @@ export default function CareerSection() {
                 href="https://taikoxyz.notion.site/Taiko-Jobs-828fd7232d2c4150a11e10c8baa910a2"
                 target={"_blank"}
                 rel={"noreferrer"}
-                className="inline-flex items-center justify-center w-64 md:w-72 px-4 md:px-6 py-2 md:py-3 mb-4 mx-2 text-base md:text-lg font-semibold text-white bg-[#fc0fc0] hover:bg-[#e30ead] dark:hover:bg-[#e30ead] rounded-md shadow-md"
+                className="inline-flex items-center justify-center w-64 md:w-72 px-4 md:px-6 py-2 md:py-3 mb-4 mx-2 text-base md:text-lg font-semibold text-white bg-[#e81899] hover:bg-[#d1168a] dark:hover:bg-[#ea2fa3] rounded-md shadow-md"
               >
                 Explore open positions &#8599;
               </a>

packages/website/components/FeaturesSection.tsx

@@ -6,7 +6,7 @@ import {
 
 const features = [
   {
-    name: "Type 1 (Ethereum-equivalent)",
+    name: "Ethereum-equivalent",
     description:
       "A Type 1 (Ethereum-equivalent) ZK-EVM aims for maximum compatibility. This results in a seamless developer experience.",
     icon: ArrowPathIcon,
@@ -42,7 +42,7 @@ export default function FeaturesSection() {
                       />
                     </span>
                   </div>
-                  <h3 className="font-oxanium mt-8 text-lg font-semibold leading-8 tracking-tight text-neutral-900 dark:text-neutral-100">
+                  <h3 className="font-groteskmedium mt-8 text-lg leading-8 tracking-tight text-neutral-900 dark:text-neutral-100">
                     {feature.name}
                   </h3>
                   <p className="mt-5 text-base leading-7 text-neutral-600 dark:text-neutral-300">

packages/website/components/Footer.tsx

@@ -4,7 +4,7 @@ export default function Footer() {
       <div className="mx-auto max-w-[90rem] pl-3">
         <div className="grid grid-cols-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)] py-8 md:grid-cols-3">
           <div>
-            <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300 pt-3">
+            <h2 className="font-grotesk mb-6 text-lg text-neutral-500 dark:text-neutral-300 pt-3">
               About
             </h2>
             <ul className="text-neutral-500 dark:text-neutral-400">
@@ -38,7 +38,7 @@ export default function Footer() {
             </ul>
           </div>
           <div>
-            <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300 pt-3">
+            <h2 className="font-grotesk mb-6 text-lg text-neutral-500 dark:text-neutral-300 pt-3">
               Developers
             </h2>
             <ul className="text-neutral-500 dark:text-neutral-400">
@@ -68,7 +68,7 @@ export default function Footer() {
             </ul>
           </div>
           <div>
-            <h2 className="mb-6 text-sm font-semibold text-neutral-500 uppercase dark:text-neutral-300 pt-3">
+            <h2 className="font-grotesk mb-6 text-lg text-neutral-500 dark:text-neutral-300 pt-3">
               Follow us
             </h2>
             <ul className="text-neutral-500 dark:text-neutral-400">
@@ -102,7 +102,7 @@ export default function Footer() {
             </ul>
           </div>
         </div>
-        <div className="text-md text-center text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-900 px-4 py-6">
+        <div className="font-groteskmedium text-md text-center text-neutral-500 dark:text-neutral-300 bg-neutral-100 dark:bg-neutral-900 px-4 py-6">
           © {new Date().getFullYear()} Taiko Labs
         </div>
       </div>

packages/website/components/Hero.tsx

@@ -42,19 +42,19 @@ export default function Hero() {
         <main className="lg:relative">
           <div className="relative z-10 w-3/4 pt-16 pb-20 text-left lg:py-48">
             <div className="pl-[max(env(safe-area-inset-left),1.5rem)]">
-              <h1 className="font-oxanium text-4xl md:text-5xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100">
-                A <span className="text-[#fc0fc0]">Type 1</span> ZK-EVM
+              <h1 className="font-grotesk text-4xl md:text-5xl tracking-tight text-neutral-900 dark:text-neutral-100">
+                A <span className="text-[#e81899]">Type 1</span> ZK-EVM
               </h1>
-              <p className="font-oxanium mt-3 text-lg text-neutral-600 sm:text-xl md:mt-5 dark:text-neutral-100">
+              <p className="font-groteskmedium mt-3 text-lg text-neutral-600 sm:text-xl md:mt-5 dark:text-neutral-100">
                 Decentralized, Ethereum-equivalent ZK-Rollup.
               </p>
               <div className="mt-10 flex md:justify-left">
                 <div className="inline-flex rounded-md shadow">
                   <a
                     href="/docs"
-                    className="inline-flex items-center rounded-md border border-transparent bg-[#fc0fc0] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#e30ead] hover:no-underline hover:text-white"
+                    className="inline-flex items-center rounded-md border border-transparent bg-[#e81899] px-5 py-3 text-base font-semibold text-white dark:text-neutral-100 hover:bg-[#d1168a] hover:no-underline hover:text-white"
                   >
-                    Get started ✨
+                    Get started →
                   </a>
                 </div>
               </div>

packages/website/package.json

@@ -8,21 +8,22 @@
     "start": "pnpm next start"
   },
   "dependencies": {
-    "next": "^13.2.4",
+    "@vercel/analytics": "^1.0.1",
+    "next": "^13.4.4",
     "next-themes": "^0.2.1",
-    "nextra": "^2.2.19",
-    "nextra-theme-docs": "^2.2.19",
+    "nextra": "^2.6.2",
+    "nextra-theme-docs": "^2.6.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.31.3"
   },
   "devDependencies": {
-    "@heroicons/react": "^2.0.16",
-    "@types/node": "^18.15.1",
-    "@types/react": "^18.0.28",
+    "@heroicons/react": "^2.0.18",
+    "@types/node": "^18.16.16",
+    "@types/react": "^18.2.8",
     "autoprefixer": "^10.4.14",
-    "postcss": "^8.4.21",
-    "tailwindcss": "^3.2.7",
+    "postcss": "^8.4.24",
+    "tailwindcss": "^3.3.2",
     "typescript": "^4.9.5"
   }
 }

packages/website/pages/_app.tsx

@@ -1,15 +1,24 @@
 import "../styles.css";
-import { Oxanium } from "next/font/google";
+import localFont from "next/font/local";
+import { Analytics } from "@vercel/analytics/react";
 
-const oxanium = Oxanium({
-  subsets: ["latin"],
-  variable: "--font-oxanium",
+const grotesk = localFont({
+  src: "../fonts/ClashGrotesk-Semibold.woff2",
+  display: "swap",
+  variable: "--font-grotesk",
+});
+
+const groteskmedium = localFont({
+  src: "../fonts/ClashGrotesk-Medium.woff2",
+  display: "swap",
+  variable: "--font-groteskmedium",
 });
 
 export default function App({ Component, pageProps }) {
   return (
-    <main className={`${oxanium.variable}`}>
+    <main className={`${grotesk.variable} ${groteskmedium.variable}`}>
       <Component {...pageProps} />
+      <Analytics />
     </main>
   );
 }

packages/website/pages/_meta.json

@@ -12,9 +12,15 @@
     "type": "page"
   },
   "blog": {
-    "title": "Blog ↗",
+    "title": "Blog",
     "type": "page",
     "href": "https://mirror.xyz/labs.taiko.eth",
     "newWindow": true
+  },
+  "forum": {
+    "title": "Forum",
+    "type": "page",
+    "href": "https://community.taiko.xyz/",
+    "newWindow": true
   }
 }

packages/website/tailwind.config.js

@@ -7,7 +7,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        oxanium: ["var(--font-oxanium)"],
+        grotesk: ["var(--font-grotesk)"],
+        groteskmedium: ["var(--font-groteskmedium)"],
       },
     },
   },

packages/website/theme.config.tsx

@@ -44,15 +44,15 @@ export default {
             "A decentralized, Ethereum-equivalent ZK-Rollup."
           }
         />
-        <link rel="icon" href="/images/favicon.png" />
+        <link rel="icon" href="/images/favicon.svg" />
       </>
     );
   },
   logo: <ThemedImage />,
   nextThemes: {
     defaultTheme: "light",
   },
-  primaryHue: 315,
+  primaryHue: 323,
   project: {
     link: "https://github.com/taikoxyz",
   },