add website with animated CLI terminal landing page

aidenybai · amiagent · aidenybai · commit 996587183271 · 2026-02-16T05:35:45.000-08:00
Generated with [Ami](https://ami.dev) Co-Authored-By: Ami <noreply@ami.dev>
diff --git a/packages/website/.oxlintrc.json b/packages/website/.oxlintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["../.oxlintrc.json"],
+  "extends": ["../../.oxlintrc.json"],
   "plugins": ["typescript", "react", "import", "nextjs", "jsx-a11y"],
   "rules": {}
 }
diff --git a/packages/website/package.json b/packages/website/package.json
@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "lucide-react": "^0.564.0",
     "next": "16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3"
diff --git a/packages/website/src/app/api/score/route.ts b/packages/website/src/app/api/score/route.ts
@@ -31,9 +31,7 @@ const calculateScore = (diagnostics: DiagnosticInput[]): number => {
     }
   }
 
-  const penalty =
-    errorRules.size * ERROR_RULE_PENALTY +
-    warningRules.size * WARNING_RULE_PENALTY;
+  const penalty = errorRules.size * ERROR_RULE_PENALTY + warningRules.size * WARNING_RULE_PENALTY;
 
   return Math.max(0, Math.round(PERFECT_SCORE - penalty));
 };
@@ -54,8 +52,7 @@ const CORS_HEADERS = {
   "Access-Control-Allow-Headers": "Content-Type",
 };
 
-export const OPTIONS = (): Response =>
-  new Response(null, { status: 204, headers: CORS_HEADERS });
+export const OPTIONS = (): Response => new Response(null, { status: 204, headers: CORS_HEADERS });
 
 export const POST = async (request: Request): Promise<Response> => {
   const body = await request.json().catch(() => null);
@@ -67,21 +64,19 @@ export const POST = async (request: Request): Promise<Response> => {
     );
   }
 
-  const isValidPayload = body.diagnostics.every(
-    (entry: unknown) => isValidDiagnostic(entry),
-  );
+  const isValidPayload = body.diagnostics.every((entry: unknown) => isValidDiagnostic(entry));
 
   if (!isValidPayload) {
     return Response.json(
-      { error: "Each diagnostic must have 'plugin' (string), 'rule' (string), and 'severity' ('error' | 'warning')" },
+      {
+        error:
+          "Each diagnostic must have 'plugin' (string), 'rule' (string), and 'severity' ('error' | 'warning')",
+      },
       { status: 400, headers: CORS_HEADERS },
     );
   }
 
   const score = calculateScore(body.diagnostics);
 
-  return Response.json(
-    { score, label: getScoreLabel(score) },
-    { headers: CORS_HEADERS },
-  );
+  return Response.json({ score, label: getScoreLabel(score) }, { headers: CORS_HEADERS });
 };
diff --git a/packages/website/src/app/globals.css b/packages/website/src/app/globals.css
@@ -1 +1,20 @@
 @import "tailwindcss";
+
+@theme {
+  --font-mono: var(--font-mono), ui-monospace, monospace;
+  --animate-fade-in: fade-in 200ms ease-out both;
+}
+
+@keyframes fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+html,
+body {
+  background: #0a0a0a;
+  height: 100%;
+  overflow: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: #333 transparent;
+}
diff --git a/packages/website/src/app/layout.tsx b/packages/website/src/app/layout.tsx
@@ -1,20 +1,16 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { IBM_Plex_Mono } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const ibmPlexMono = IBM_Plex_Mono({
+  variable: "--font-mono",
   subsets: ["latin"],
+  weight: ["400", "500"],
 });
 
 export const metadata: Metadata = {
   title: "React Doctor",
-  description: "",
+  description: "Let coding agents diagnose and fix your React code.",
 };
 
 export default function RootLayout({
@@ -24,7 +20,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+      <body className={`${ibmPlexMono.variable} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/packages/website/src/app/page.tsx b/packages/website/src/app/page.tsx
@@ -1,5 +1,5 @@
-import Image from "next/image";
+import Terminal from "@/components/terminal";
 
-export default function Home() {
-  return <div>hi</div>;
-}
+const Home = () => <Terminal />;
+
+export default Home;
diff --git a/packages/website/src/components/terminal.tsx b/packages/website/src/components/terminal.tsx
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`{`
`2`		`- "extends": ["../.oxlintrc.json"],`
	`2`	`+ "extends": ["../../.oxlintrc.json"],`
`3`	`3`	`"plugins": ["typescript", "react", "import", "nextjs", "jsx-a11y"],`
`4`	`4`	`"rules": {}`
`5`	`5`	`}`