Added hero section ✌🏾

Author: ariflogs

app/(marketing)/page.tsx

@@ -0,0 +1,36 @@
+import { Button, H1 } from "@/packages/ui";
+import Link from "next/link";
+
+export default function Home() {
+  return (
+    <main>
+      <section className="max-w-5xl mx-auto mt-36 px-4 text-center">
+        <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-md 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"
+            >
+              Browse Components
+            </Button>
+          </Link>
+        </div>
+      </section>
+    </main>
+  );
+}

app/page.tsx app/demo.tsxapp/page.tsx renamed to 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 */
+  }

packages/ui/Buttons/Button.tsx

@@ -3,23 +3,32 @@ import React, { ButtonHTMLAttributes } from "react";
 interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   size?: "sm" | "md" | "lg";
   className?: string;
+  variant?: "primary" | "outline" | "link";
 }
 
 export function Button({
   children,
   size = "md",
   className = "",
+  variant = "primary",
   ...props
 }: ButtonProps) {
   const sizeClasses = {
-    sm: "px-4 py-1 text-sm",
-    md: "px-6 py-2 text-base",
-    lg: "px-8 py-3 text-lg",
+    sm: "px-2 py-1 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-6 py-3 text-lg",
+  };
+
+  const variantClasses = {
+    primary:
+      "bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
+    outline: "bg-transparent text-black border-2 border-black",
+    link: "bg-transparent text-primary-400 hover:underline",
   };
 
   return (
     <button
-      className={`font-head bg-primary-400 text-primary-foreground border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${className}`}
+      className={`border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
       {...props}
     >
       {children}

packages/ui/Typography/H1.tsx

@@ -1,5 +1,11 @@
-import React, { ReactNode } from "react";
+import React, { HTMLAttributes, ReactNode } from "react";
 
-export function H1({ children }: { children: ReactNode }) {
-  return <h1 className="font-head text-6xl font-bold">{children}</h1>;
+interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  className?: string;
+}
+
+export function H1({ children, className }: HeadingProps) {
+  return (
+    <h1 className={`font-head text-6xl font-bold ${className}`}>{children}</h1>
+  );
 }