Marketing site

app/(marketing)/page.tsx

@@ -0,0 +1,166 @@
+import {
+  Accordion,
+  Avatar,
+  Badge,
+  BasicCard,
+  Button,
+  H1,
+  H2,
+  H3,
+  H4,
+  Input,
+  ProductCard,
+  Textarea,
+} from "@/packages/ui";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <main className="space-y-36">
+      <section className="container max-w-6xl mx-auto mt-36 text-center text-gray-900">
+        <H1>Make your projects</H1>
+        <H1 className="text-outlined">stand out!</H1>
+
+        <p className="text-lg text-gray-600 mb-8 mt-4 max-w-2xl mx-auto">
+          Retro styled component library for modern web apps. Comes with 20+
+          free UI components that you can just copy paste into your projects.{" "}
+          {/* <br /> Now available for both HTML and React! */}
+        </p>
+
+        <div className="max-w-96 grid gap-4 mx-auto grid-cols-2">
+          <Link href="/components" passHref>
+            <Button className="w-full" aria-label="Get Started with RetroUI">
+              Get Started
+            </Button>
+          </Link>
+          <Link href="/components" passHref>
+            <Button
+              className="w-full"
+              variant="outline"
+              aria-label="Get Started with RetroUI"
+            >
+              Github
+            </Button>
+          </Link>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="container max-w-6xl mx-auto ">
+        <div className="grid gird-cols-1 lg:grid-cols-2 items-center">
+          <div>
+            <H3>Why Use RetroUI?</H3>
+            <H1 className="mt-4">Coz We C00l!!</H1>
+          </div>
+
+          <img
+            alt="orange cool cat"
+            src="/images/orange_boos.png"
+            className="h-full w-full"
+          />
+        </div>
+      </section>
+
+      {/* Component Previews Section */}
+      <section className="container max-w-6xl mx-auto ">
+        <H2 className="mb-16">
+          Our components look both old school and modern! ✨
+        </H2>
+
+        <div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
+          <div className="space-y-4">
+            <H4>Button</H4>
+            <Button>Click Me</Button>
+          </div>
+          <div className="space-y-4">
+            <H4>Badge</H4>
+            <div className="space-x-2">
+              <Badge>Default Badge</Badge>
+              <Badge variant="error">Error Badge</Badge>
+            </div>
+          </div>
+          <div className="space-y-4">
+            <H4>Avatar</H4>
+            <Avatar />
+          </div>
+          <div className="space-y-4">
+            <H4>Input</H4>
+            <Input />
+          </div>
+        </div>
+        <div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
+          <div className="space-y-4">
+            <H4>Textarea</H4>
+            <Textarea />
+          </div>
+          <div className="space-y-4">
+            <H4>Basic Card</H4>
+            <BasicCard />
+          </div>
+          <div className="space-y-4">
+            <H4>Accordion</H4>
+            <Accordion />
+          </div>
+        </div>
+      </section>
+
+      <section className="container max-w-6xl mx-auto ">
+        <H2 className="mb-16">
+          And NO! We didn't just copy Gumroad!
+          <br />
+          Inspired, if you will... 💅
+        </H2>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 items-center">
+          <img
+            src="/images/our_product_card.png"
+            alt="our product card"
+            className="w-80"
+          />
+          <H3 className="lg:hidden mt-2 mb-12">👆 RetroUI Card</H3>
+
+          <div className="hidden lg:block space-y-4">
+            <H3>👈 RetroUI Card</H3>
+            <H3>Gumroad's Card 👉</H3>
+          </div>
+          <img
+            src="/images/gumroad_product_card.png"
+            alt="our product card"
+            className="w-80"
+          />
+          <H3 className="lg:hidden mt-2">👆 Gumroad's Card</H3>
+        </div>
+      </section>
+
+      <footer className="bg-black py-8">
+        <div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
+          <div className="flex justify-center space-x-4">
+            <a
+              href="https://twitter.com/ariflogs"
+              className="text-primary-500 mx-2"
+            >
+              Twitter
+            </a>
+            <a
+              href="https://github.com/ariflogs/retroui"
+              className="text-primary-500 mx-2"
+            >
+              GitHub
+            </a>
+            <a href="/docs" className="text-primary-500 mx-2">
+              Documentation
+            </a>
+          </div>
+
+          <p className="text-gray-300 text-sm">
+            Built by{" "}
+            <a href="https://twitter.com/ariflogs" className="text-primary-500">
+              Arif Hossain
+            </a>
+            .
+          </p>
+        </div>
+      </footer>
+    </main>
+  );
+}

app/page.tsx → app/demo.tsx

@@ -25,7 +25,6 @@ export default function page() {
       <div className="space-y-8 mt-12">
         <div>
           <H3>Typography</H3>
-
           <H1>This is H1</H1>
           <H2>This is H2</H2>
           <H3>This is H3</H3>

app/global.css

@@ -1,3 +1,9 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+.text-outlined {
+    @apply relative text-primary-400 font-bold;
+    letter-spacing: 2px;
+    text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black outline */
+  }

app/layout.tsx

@@ -1,32 +1,40 @@
-import "./global.css"
+import TopNav from "@/components/TopNav";
+import "./global.css";
 import { Archivo_Black, Share_Tech, Share_Tech_Mono } from "next/font/google";
 
 const archivoBlack = Archivo_Black({
   subsets: ["latin"],
   weight: "400",
-  variable: '--font-head',
+  variable: "--font-head",
 });
 
 const shareTech = Share_Tech({
   subsets: ["latin"],
   weight: "400",
-  variable: '--font-sans',
+  variable: "--font-sans",
 });
 
 const shareTechMono = Share_Tech_Mono({
   subsets: ["latin"],
   weight: "400",
-  variable: '--font-mono',
+  variable: "--font-mono",
 });
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}>{children}</body>
+      <body
+        className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
+      >
+        <div className="mb-8 relative z-10">
+          <TopNav />
+        </div>
+        {children}
+      </body>
     </html>
-  )
+  );
 }

components/HamburgerMenu.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { useState } from "react";
+import SideNav from "./SideNav";
+import { AlignJustify, X } from "lucide-react";
+import { Button } from "@/packages/ui";
+
+export default function HamburgerMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div>
+      <Button
+        size="sm"
+        variant="outline"
+        onClick={() => setIsOpen((prev) => !prev)}
+      >
+        {isOpen ? <X /> : <AlignJustify />}
+      </Button>
+      {isOpen && <SideNav />}
+    </div>
+  );
+}

components/SideNav.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link";
+
+const navItems = [
+  { title: "Getting Started", route: "/components" },
+  { title: "Accordions", route: "/components/accordions" },
+  { title: "Avatars", route: "/components/avatars" },
+  // { title: "Badges", route: "/components/badges" },
+  { title: "Buttons", route: "/components/buttons" },
+  { title: "Cards", route: "/components/cards" },
+  { title: "Inputs", route: "/components/inputs" },
+  { title: "Textareas", route: "/components/textareas" },
+  { title: "Typography", route: "/components/typography" },
+];
+
+export default function SideNav() {
+  return (
+    <div
+      className={`fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50`}
+    >
+      <nav className="flex flex-col items-start p-6 space-y-2">
+        {navItems.map((item) => (
+          <Link key={item.route} href={item.route}>
+            {item.title}
+          </Link>
+        ))}
+      </nav>
+    </div>
+  );
+}

components/TopNav.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import Link from "next/link";
+import { GitBranchIcon, GithubIcon } from "lucide-react";
+import HamburgerMenu from "./HamburgerMenu";
+import { Button } from "@/packages/ui";
+
+export default function TopNav() {
+  return (
+    <nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
+      <div className="container max-w-6xl mx-auto">
+        <div className="flex justify-between items-center h-16">
+          {/* Logo Section */}
+          <div className="flex-shrink-0">
+            <a
+              href="/"
+              className="text-black font-head text-2xl flex items-end"
+            >
+              <img
+                src="/images/logo_full.png"
+                alt="retro ui logo"
+                className="w-16 mr-2"
+              />
+              RetroUI
+            </a>
+          </div>
+
+          {/* Navigation Links */}
+          <div className="hidden md:flex space-x-8">
+            <a
+              href="/components"
+              className="hover:text-primary-500 transition-all"
+            >
+              Documentation
+            </a>
+            <a
+              href="/components/buttons"
+              className="hover:text-primary-500 transition-all"
+            >
+              Components
+            </a>
+          </div>
+
+          <div className="flex items-center space-x-4 lg:hidden">
+            <Link
+              href="https://github.com/ariflogs/retroui"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+                <GithubIcon />
+            </Link>
+            <HamburgerMenu />
+          </div>
+          <div className="hidden lg:flex items-center">
+            <Link
+              href="https://github.com/ariflogs/retroui"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <Button className="flex items-center" variant="outline" size="sm">
+                <GithubIcon size="16" className="mr-2" />
+                Star on GitHub
+              </Button>
+            </Link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}

package.json

@@ -9,18 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "lucide-react": "^0.445.0",
+    "next": "14.2.7",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.7"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.7",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.7"
+    "typescript": "^5"
   }
 }