fix: setup font and update button join our discord

src/components/Blog/index.tsx

@@ -26,10 +26,11 @@ const Blog = () => {
           .map((post: BlogPostsThumbnail, i: number) => {
             return (
               <Link href={String(post.url)} key={i}>
-                <div className="py-4 border-b dark:border-gray-600 border-[#F0F0F0] flex justify-between items-center">
+                <div className="py-4 flex justify-between items-center gap-x-4">
                   <h6 className="text-base line-clamp-1 font-sans text-black/70 dark:text-white/70">
                     {post.title}
                   </h6>
+                  <div className="border-b w-full flex-1 dark:border-gray-600 border-[#F0F0F0]" />
                   <p className="text-sm font-medium text-black/60 dark:text-white/60">
                     {format(String(post.date), "MMMM do, yyyy")}
                   </p>

src/components/ShimmerButton/index.tsx

@@ -0,0 +1,96 @@
+import React, { CSSProperties } from "react";
+
+import { twMerge } from "tailwind-merge";
+
+export interface ShimmerButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  shimmerColor?: string;
+  shimmerSize?: string;
+  borderRadius?: string;
+  shimmerDuration?: string;
+  background?: string;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const ShimmerButton = React.forwardRef<HTMLButtonElement, ShimmerButtonProps>(
+  (
+    {
+      shimmerColor = "#ffffff",
+      shimmerSize = "0.05em",
+      shimmerDuration = "3s",
+      borderRadius = "100px",
+      background = "rgba(0, 0, 0, 1)",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        style={
+          {
+            "--spread": "90deg",
+            "--shimmer-color": shimmerColor,
+            "--radius": borderRadius,
+            "--speed": shimmerDuration,
+            "--cut": shimmerSize,
+            "--bg": background,
+          } as CSSProperties
+        }
+        className={twMerge(
+          "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden whitespace-nowrap border border-white/10 px-6 py-3 text-white [background:var(--bg)] [border-radius:var(--radius)] dark:text-black",
+          "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-[1px]",
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        {/* spark container */}
+        <div
+          className={twMerge(
+            "-z-30 blur-[2px]",
+            "absolute inset-0 overflow-visible [container-type:size]"
+          )}
+        >
+          {/* spark */}
+          <div className="absolute inset-0 h-[100cqh] animate-slide [aspect-ratio:1] [border-radius:0] [mask:none]">
+            {/* spark before */}
+            <div className="animate-spin-around absolute inset-[-100%] w-auto rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))] [translate:0_0]" />
+          </div>
+        </div>
+        {children}
+
+        {/* Highlight */}
+        <div
+          className={twMerge(
+            "insert-0 absolute h-full w-full",
+
+            "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
+
+            // transition
+            "transform-gpu transition-all duration-300 ease-in-out",
+
+            // on hover
+            "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
+
+            // on click
+            "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
+          )}
+        />
+
+        {/* backdrop */}
+        <div
+          className={twMerge(
+            "absolute -z-20 [background:var(--bg)] [border-radius:var(--radius)] [inset:var(--cut)]"
+          )}
+        />
+      </button>
+    );
+  }
+);
+
+ShimmerButton.displayName = "ShimmerButton";
+
+export default ShimmerButton;

src/pages/index.mdx

@@ -3,6 +3,7 @@ title : Home
 ---
 
 import Blog from "@/components/Blog"
+import ShimmerButton from "@/components/ShimmerButton"
 import fs from 'fs'
 import path from 'path'
 import matter from 'gray-matter'
@@ -22,8 +23,8 @@ We are the creators and lead maintainers of:
 
 - [Jan](https://jan.ai): Personal AI (>1 million downloads)
 - [Cortex](https://cortex.so): Modular AI Engine
-- Xanadu: GPU Cluster `coming soon`
-- Menlo: AI Cloud & Hardware `coming soon`
+- Xanadu: GPU Cluster <span className="rounded-full py-1 px-2 bg-yellow-200 border border-yellow-400 text-xs">coming soon</span>
+- Menlo: AI Cloud & Hardware <span className="rounded-full py-1 px-2 bg-yellow-200 border border-yellow-400 text-xs">coming soon</span>
 
 We also train models:
 
@@ -32,16 +33,12 @@ We also train models:
 We are a remote-first lab, with datacenters 
 in Hanoi, Taiwan, and Singapore.
 
-<a
-  href="https://discord.gg/FTk2MvZwJH"
-  target="_blank"
-  className="bg-[#5765F2] inline-flex px-4 py-3 rounded-lg mt-8 cursor-pointer justify-center items-start space-x-2 text-white"
->
+<ShimmerButton className="shadow-2xl shadow-[#5765F2] mt-8 flex gap-2 transition-all hover:scale-105" background="#5765F2" onClick={() => window.open('https://discord.gg/FTk2MvZwJH', '_blank')}>
   <FaDiscord className="text-2xl text-white" />
   <div>
     <p className="text-base font-sans text-white font-medium">Join our Discord</p>
   </div>
-</a>
+</ShimmerButton>
 
 <Blog/>
 

src/styles/general.scss

@@ -5,7 +5,7 @@
     p,
     li,
     span {
-      @apply text-black/70 dark:text-white/70;
+      @apply text-black dark:text-white;
     }
   }
 

src/styles/main.scss

@@ -3,7 +3,6 @@
 @import "tailwindcss/utilities";
 
 @import "./general.scss";
-@import "./fonts.scss";
 
 .logo-mobile {
   display: flex;
@@ -19,20 +18,12 @@
   @apply max-w-3xl;
 }
 
-// .nextra-menu-desktop {
-//   display: none;
-// }
-
-// .nextra-search {
-//   display: none;
-// }
-
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-family: "PPEditorialNew";
+  @apply font-serif;
   font-weight: 500 !important;
 }

tailwind.config.ts

@@ -16,7 +16,7 @@ const config: Config = {
     },
     fontFamily: {
       sans: [
-        "Inter",
+        "ui-sans-serif",
         "-apple-system",
         "BlinkMacSystemFont",
         "Segoe UI",
@@ -26,9 +26,42 @@ const config: Config = {
         "Helvetica",
         "sans-serif",
       ],
-      serif: ["PPEditorialNew"],
+      serif: [
+        "ui-serif",
+        "Georgia",
+        "Cambria",
+        "Times New Roman",
+        "Times",
+        "serif",
+      ],
+    },
+    extend: {
+      animation: {
+        "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
+        slide: "slide var(--speed) ease-in-out infinite alternate",
+      },
+      keyframes: {
+        "spin-around": {
+          "0%": {
+            transform: "translateZ(0) rotate(0)",
+          },
+          "15%, 35%": {
+            transform: "translateZ(0) rotate(90deg)",
+          },
+          "65%, 85%": {
+            transform: "translateZ(0) rotate(270deg)",
+          },
+          "100%": {
+            transform: "translateZ(0) rotate(360deg)",
+          },
+        },
+        slide: {
+          to: {
+            transform: "translate(calc(100cqw - 100%), 0)",
+          },
+        },
+      },
     },
-    extend: {},
   },
   plugins: [],
 };