Skip to content

Commit cecea64

Browse files
ariflogsariflogs
committed
added initial marketing site
1 parent f5fa704 commit cecea64

File tree

6 files changed

+143
-13
lines changed

6 files changed

+143
-13
lines changed

‎app/(marketing)/page.tsx‎

Lines changed: 128 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,33 @@
1-
import { Button, H1 } from "@/packages/ui";
1+
import {
2+
Accordion,
3+
Avatar,
4+
Badge,
5+
BasicCard,
6+
Button,
7+
H1,
8+
H2,
9+
H3,
10+
H4,
11+
Input,
12+
ProductCard,
13+
Textarea,
14+
} from "@/packages/ui";
215
import Link from "next/link";
316

417
export default function Home() {
518
return (
6-
<main>
7-
<section className="max-w-5xl mx-auto mt-36 px-4 text-center">
19+
<main className="space-y-36">
20+
<section className="container max-w-6xl mx-auto mt-36 px-4 text-center text-gray-900">
821
<H1>Make your projects</H1>
922
<H1 className="text-outlined">stand out!</H1>
1023

1124
<p className="text-lg text-gray-600 mb-8 mt-4 max-w-2xl mx-auto">
1225
Retro styled component library for modern web apps. Comes with 20+
1326
free UI components that you can just copy paste into your projects.{" "}
14-
<br /> Now available for both HTML and React!
27+
{/* <br /> Now available for both HTML and React! */}
1528
</p>
1629

17-
<div className="max-w-md grid gap-4 mx-auto grid-cols-2">
30+
<div className="max-w-96 grid gap-4 mx-auto grid-cols-2">
1831
<Link href="/components" passHref>
1932
<Button className="w-full" aria-label="Get Started with RetroUI">
2033
Get Started
@@ -26,11 +39,120 @@ export default function Home() {
2639
variant="outline"
2740
aria-label="Get Started with RetroUI"
2841
>
29-
Browse Components
42+
Github
3043
</Button>
3144
</Link>
3245
</div>
3346
</section>
47+
48+
{/* Features Section */}
49+
<section className="container max-w-6xl mx-auto ">
50+
<div className="grid grid-cols-2 gap-6 items-center">
51+
<div>
52+
<H3>Why Use RetroUI?</H3>
53+
<H2 className="text-9xl mt-4">Coz We C0000l!! </H2>
54+
</div>
55+
56+
<img
57+
alt="orange cool cat"
58+
src="/images/orange_boos.png"
59+
className="h-full w-full"
60+
/>
61+
</div>
62+
</section>
63+
64+
{/* Component Previews Section */}
65+
<section className="container max-w-6xl mx-auto ">
66+
<H2 className="mb-16">
67+
Our components look both old school and modern! ✨
68+
</H2>
69+
70+
<div className="grid gap-4 grid-cols-4 mb-8">
71+
<div className="space-y-4">
72+
<H4>Button</H4>
73+
<Button>Click Me</Button>
74+
</div>
75+
<div className="space-y-4">
76+
<H4>Badge</H4>
77+
<div className="space-x-2">
78+
<Badge>Default Badge</Badge>
79+
<Badge variant="error">Error Badge</Badge>
80+
</div>
81+
</div>
82+
<div className="space-y-4">
83+
<H4>Avatar</H4>
84+
<Avatar />
85+
</div>
86+
<div className="space-y-4">
87+
<H4>Input</H4>
88+
<Input />
89+
</div>
90+
</div>
91+
<div className="grid gap-8 grid-cols-3">
92+
<div className="space-y-4">
93+
<H4>Textarea</H4>
94+
<Textarea />
95+
</div>
96+
<div className="space-y-4">
97+
<H4>Basic Card</H4>
98+
<BasicCard />
99+
</div>
100+
<div className="space-y-4">
101+
<H4>Accordion</H4>
102+
<Accordion />
103+
</div>
104+
</div>
105+
</section>
106+
107+
<section className="container max-w-6xl mx-auto ">
108+
<H2 className="mb-16">
109+
And NO! We didn't just copy Gumroad!
110+
<br />
111+
Inspired, if you will... 💅
112+
</H2>
113+
114+
<div className="grid grid-cols-3 items-center">
115+
<img
116+
src="/images/our_product_card.png"
117+
alt="our product card"
118+
className="w-80"
119+
/>
120+
<div className="space-y-4">
121+
<H3>👈 RetroUI Card</H3>
122+
<H3>Gumroad's Card 👉</H3>
123+
</div>
124+
<img
125+
src="/images/gumroad_product_card.png"
126+
alt="our product card"
127+
className="w-80"
128+
/>
129+
</div>
130+
</section>
131+
132+
<footer className="bg-black py-8">
133+
<div className="container max-w-6xl mx-auto flex justify-between items-center">
134+
<p className="text-gray-300 text-sm">
135+
Built by <a className="text-primary-500">Arif Hossain</a>.
136+
</p>
137+
<div className="flex justify-center space-x-4 mb-6">
138+
<a
139+
href="https://twitter.com/ariflogs"
140+
className="text-primary-500 mx-2"
141+
>
142+
Twitter
143+
</a>
144+
<a
145+
href="https://github.com/ariflogs/retroui"
146+
className="text-primary-500 mx-2"
147+
>
148+
GitHub
149+
</a>
150+
<a href="/docs" className="text-primary-500 mx-2">
151+
Documentation
152+
</a>
153+
</div>
154+
</div>
155+
</footer>
34156
</main>
35157
);
36158
}

‎packages/ui/Buttons/Button.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,9 @@ export function Button({
1414
...props
1515
}: ButtonProps) {
1616
const sizeClasses = {
17-
sm: "px-2 py-1 text-sm",
18-
md: "px-4 py-2 text-base",
19-
lg: "px-6 py-3 text-lg",
17+
sm: "px-4 py-1 text-sm",
18+
md: "px-6 py-2 text-base",
19+
lg: "px-8 py-3 text-lg",
2020
};
2121

2222
const variantClasses = {
@@ -28,7 +28,7 @@ export function Button({
2828

2929
return (
3030
<button
31-
className={`border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
31+
className={`font-head border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
3232
{...props}
3333
>
3434
{children}

‎packages/ui/Typography/H2.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1-
import React, { ReactNode } from "react";
1+
import React, { HTMLAttributes, ReactNode } from "react";
22

3-
export function H2({ children }: { children: ReactNode }) {
4-
return <h2 className="font-head text-4xl font-semibold">{children}</h2>;
3+
interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
4+
className?: string;
5+
}
6+
7+
export function H2({ children, className }: HeadingProps) {
8+
return (
9+
<h2 className={`font-head text-4xl font-semibold ${className}`}>
10+
{children}
11+
</h2>
12+
);
513
}

‎public/images/gumroad_product_card.png‎

245 KB
Loading

‎public/images/orange_boos.png‎

1.23 MB
Loading

‎public/images/our_product_card.png‎

463 KB
Loading

0 commit comments

Comments
 (0)