Fix gh pages (#23)

Author: yowainwright

bun.lock

@@ -126,7 +126,6 @@
   background: rgba(0, 0, 0, 0.5);
 }
 
-/* Scrolling animation for log lines */
 @keyframes scroll-up {
   0% {
     transform: translateY(100%);

site/app/globals.css

@@ -0,0 +1,46 @@
+import { ImageResponse } from "next/og";
+
+export const runtime = "edge";
+
+export const size = {
+  width: 32,
+  height: 32,
+};
+
+export const contentType = "image/png";
+
+export default function Icon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          background: "white",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: 6,
+        }}
+      >
+        <div
+          style={{
+            background: "linear-gradient(135deg, #2563eb 0%, #9333ea 100%)",
+            WebkitBackgroundClip: "text",
+            backgroundClip: "text",
+            color: "transparent",
+            fontSize: 23,
+            fontWeight: 900,
+            fontFamily: "system-ui, -apple-system, sans-serif",
+            letterSpacing: "-0.05em",
+          }}
+        >
+          Dx
+        </div>
+      </div>
+    ),
+    {
+      ...size,
+    },
+  );
+}

site/app/icon.tsx

@@ -1,11 +1,13 @@
 "use client";
 
 import { useState, useEffect } from "react";
+import { ChevronRight } from "lucide-react";
+import { FaGithub } from "react-icons/fa";
 import { ThemeShowcase } from "@/components/theme-showcase";
 import { ProblemSection } from "@/components/solutionDemo";
 import { SetupSection } from "@/components/setup-section";
 import { InteractiveExamplesSection } from "@/components/interactive";
-import { ThemeToggle } from "@/components/theme-toggle";
+import { Navbar } from "@/components/navbar";
 import { CustomThemeCreator } from "@/components/themegenerator";
 
 export default function Home() {
@@ -33,9 +35,7 @@ export default function Home() {
 
   return (
     <main className="min-h-screen">
-      <div className="fixed top-4 right-4 z-50">
-        <ThemeToggle />
-      </div>
+      <Navbar />
       {/* New Theme Showcase with Headline Overlay */}
       <ThemeShowcase
         themes={themes}
@@ -45,26 +45,44 @@ export default function Home() {
       >
         {/* Headline content positioned over the dimmed animation */}
         <div className="mx-auto max-w-3xl">
-          <h1 className="mb-6 text-6xl font-bold tracking-tight">
-            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+          <h1
+            className="mb-6 text-8xl md:text-9xl font-bold tracking-tight leading-tight flex items-center justify-center"
+            style={{
+              filter:
+                "drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3))",
+              lineHeight: "1.2",
+            }}
+          >
+            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent pr-2">
               logsDx
             </span>
+            <span
+              className="inline-block animate-pulse"
+              style={{
+                width: "0.08em",
+                height: "0.8em",
+                backgroundColor: "#ef4444",
+                marginLeft: "0.1em",
+              }}
+            ></span>
           </h1>
-          <p className="mb-8 text-xl text-slate-600 dark:text-slate-400">
+          <p className="mb-8 text-2xl md:text-3xl text-slate-600 dark:text-slate-400">
             Schema-based styling layer that makes logs look identical between
             terminal and browser environments
           </p>
           <div className="flex flex-wrap justify-center gap-4">
             <a
               href="#setup"
-              className="rounded-lg bg-slate-900 px-6 py-3 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200"
+              className="inline-flex items-center gap-2 rounded-lg bg-slate-900 px-6 py-3 text-white hover:bg-slate-800 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200"
             >
               Get Started
+              <ChevronRight className="h-4 w-4" />
             </a>
             <a
               href="https://github.com/yowainwright/logsdx"
-              className="rounded-lg border border-slate-300 bg-white px-6 py-3 text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
+              className="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-6 py-3 text-slate-900 hover:bg-slate-50 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700"
             >
+              <FaGithub className="h-4 w-4" />
               View on GitHub
             </a>
           </div>