Starting implementation of new docs UI

Studio384 · Dec 10, 2024 · c0158f0 · c0158f0
1 parent e431b4c
commit c0158f0
Show file tree

Hide file tree

Showing 11 changed files with 355 additions and 136 deletions.
diff --git a/amicons-docs/app/icons/page.tsx b/amicons-docs/app/icons/page.tsx
@@ -0,0 +1,7 @@
+export default function Icons() {
+  return (
+    <div>
+      <p>All the icons</p>
+    </div>
+  );
+}
diff --git a/amicons-docs/app/layout.tsx b/amicons-docs/app/layout.tsx
@@ -1,20 +1,17 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import Link from "next/link";
+import Amicon, { aiAmicons, aiGithub } from "@studio384/amaranth";
+import { Lexend } from "next/font/google";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const lexend = Lexend({
+  variable: "--font-lexend",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Amicons Next",
+  description: "A brand new Amicons documentation website.",
 };
 
 export default function RootLayout({
@@ -24,9 +21,40 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className={`${lexend.variable}`}>
+        <header className="sticky top-3">
+          <div className="container max-w-[1160px] mx-auto">
+            <div className="bg-indigo-900/50 backdrop-blur-md rounded-md my-3 ps-5 p-3 grid grid-cols-[1fr_auto_1fr] items-center">
+              <h1 className="flex gap-2 items-center text-lg">
+                <Amicon icon={aiAmicons} className="size-4" />
+                <span className="leading-3">Amicons</span>
+              </h1>
+              <nav className="flex">
+                <Link
+                  className="hover:bg-indigo-700/50 px-3 rounded-sm py-1.5 flex gap-2 items-center text-sm"
+                  href="/"
+                >
+                  Home
+                </Link>
+                <Link
+                  className="hover:bg-indigo-700/50 px-3 rounded-sm py-1.5 flex gap-2 items-center text-sm"
+                  href="/icons"
+                >
+                  Icons
+                </Link>
+              </nav>
+              <div className="flex justify-end">
+                <Link
+                  className="hover:bg-indigo-700/50 px-3 rounded-sm py-1.5 flex gap-2 items-center text-sm"
+                  href="https://github.com/studio384/amicons"
+                >
+                  <Amicon icon={aiGithub} className="size-4" />
+                  GitHub
+                </Link>
+              </div>
+            </div>
+          </div>
+        </header>
         {children}
       </body>
     </html>

diff --git a/amicons-docs/app/page.tsx b/amicons-docs/app/page.tsx
@@ -1,3 +1,163 @@
+import Amicon, { aiAmicons, aiTriangleExclamation } from "@studio384/amaranth";
+
 export default function Home() {
-  return <div>Welcome to the next gen docs</div>;
+  return (
+    <div>
+      <div className="bg-indigo-950/50 border-b border-indigo-800/50 -mt-20 pt-20 pb-3 mb-3">
+        <div className="container max-w-[1160px] mx-auto">
+          <div className="grid grid-cols-[1fr_auto] my-12 items-center">
+            <h1 className="text-5xl my-16 font-[family-name:var(--font-lexend)] font-medium">
+              <span className="text-indigo-400">450+</span> amicable icons for{" "}
+              <span className="text-indigo-400">your</span> designs
+            </h1>
+            <div className="aspect-square border border-indigo-800/50 bg-indigo-950/50 rounded-xl p-12 w-80">
+              <Amicon icon={aiAmicons} />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="container max-w-[1160px] mx-auto">
+        <div className="rounded-md bg-red-900/50 p-4">
+          <div className="flex gap-3 items-center">
+            <Amicon
+              icon={aiTriangleExclamation}
+              aria-hidden="true"
+              className="size-4 text-red-600"
+            />
+            <h3 className="text-sm font-medium text-red-600">
+              Pardon our dust as we built out this documentation.
+            </h3>
+          </div>
+        </div>
+
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+        <p>Welcome to the next gen docs</p>
+      </div>
+    </div>
+  );
 }
diff --git a/amicons-docs/package-lock.json b/amicons-docs/package-lock.json
diff --git a/amicons-docs/package.json b/amicons-docs/package.json
@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@studio384/amaranth": "file:../amicons/",
     "next": "15.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

diff --git a/amicons-docs/public/file.svg b/amicons-docs/public/file.svg
diff --git a/amicons-docs/public/globe.svg b/amicons-docs/public/globe.svg
diff --git a/amicons-docs/public/next.svg b/amicons-docs/public/next.svg
diff --git a/amicons-docs/public/vercel.svg b/amicons-docs/public/vercel.svg
diff --git a/amicons-docs/public/window.svg b/amicons-docs/public/window.svg