From f5fa7040a1b834172ef93e8ba2e740c6e4107f13 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Tue, 24 Sep 2024 00:13:38 +0600 Subject: [PATCH 1/5] =?UTF-8?q?Added=20hero=20section=20=E2=9C=8C?= =?UTF-8?q?=F0=9F=8F=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(marketing)/page.tsx | 36 + app/{page.tsx => demo.tsx} | 1 - app/global.css | 8 +- packages/ui/Buttons/Button.tsx | 17 +- packages/ui/Typography/H1.tsx | 12 +- pnpm-lock.yaml | 3475 ++++++++++++++++++-------------- tailwind.config.ts | 2 +- 7 files changed, 1987 insertions(+), 1564 deletions(-) create mode 100644 app/(marketing)/page.tsx rename app/{page.tsx => demo.tsx} (99%) diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx new file mode 100644 index 0000000..9dcd56f --- /dev/null +++ b/app/(marketing)/page.tsx @@ -0,0 +1,36 @@ +import { Button, H1 } from "@/packages/ui"; +import Link from "next/link"; + +export default function Home() { + return ( +
+
+

Make your projects

+

stand out!

+ +

+ Retro styled component library for modern web apps. Comes with 20+ + free UI components that you can just copy paste into your projects.{" "} +
Now available for both HTML and React! +

+ +
+ + + + + + +
+
+
+ ); +} diff --git a/app/page.tsx b/app/demo.tsx similarity index 99% rename from app/page.tsx rename to app/demo.tsx index 400496c..5f9a3ad 100644 --- a/app/page.tsx +++ b/app/demo.tsx @@ -25,7 +25,6 @@ export default function page() {

Typography

-

This is H1

This is H2

This is H3

diff --git a/app/global.css b/app/global.css index bd6213e..1eb7138 100644 --- a/app/global.css +++ b/app/global.css @@ -1,3 +1,9 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@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 */ + } \ No newline at end of file diff --git a/packages/ui/Buttons/Button.tsx b/packages/ui/Buttons/Button.tsx index 697e418..9b17c0d 100644 --- a/packages/ui/Buttons/Button.tsx +++ b/packages/ui/Buttons/Button.tsx @@ -3,23 +3,32 @@ import React, { ButtonHTMLAttributes } from "react"; interface ButtonProps extends ButtonHTMLAttributes { 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 (
+ + {/* Features Section */} +
+
+
+

Why Use RetroUI?

+

Coz We C0000l!!

+
+ + orange cool cat +
+
+ + {/* Component Previews Section */} +
+

+ Our components look both old school and modern! ✨ +

+ +
+
+

Button

+ +
+
+

Badge

+
+ Default Badge + Error Badge +
+
+
+

Avatar

+ +
+
+

Input

+ +
+
+
+
+

Textarea

+