Skip to content

Commit 118f530

Browse files
ariflogsariflogs
authored
Merge pull request #9 from ariflogs/marketing-site
Marketing site
2 parents 000fb83 + 6aab025 commit 118f530

File tree

23 files changed

+2336
-1580
lines changed

23 files changed

+2336
-1580
lines changed

‎app/(marketing)/page.tsx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
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";
15+
import Link from "next/link";
16+
17+
export default function Home() {
18+
return (
19+
<main className="space-y-36">
20+
<section className="container max-w-6xl mx-auto mt-36 text-center text-gray-900">
21+
<H1>Make your projects</H1>
22+
<H1 className="text-outlined">stand out!</H1>
23+
24+
<p className="text-lg text-gray-600 mb-8 mt-4 max-w-2xl mx-auto">
25+
Retro styled component library for modern web apps. Comes with 20+
26+
free UI components that you can just copy paste into your projects.{" "}
27+
{/* <br /> Now available for both HTML and React! */}
28+
</p>
29+
30+
<div className="max-w-96 grid gap-4 mx-auto grid-cols-2">
31+
<Link href="/components" passHref>
32+
<Button className="w-full" aria-label="Get Started with RetroUI">
33+
Get Started
34+
</Button>
35+
</Link>
36+
<Link href="/components" passHref>
37+
<Button
38+
className="w-full"
39+
variant="outline"
40+
aria-label="Get Started with RetroUI"
41+
>
42+
Github
43+
</Button>
44+
</Link>
45+
</div>
46+
</section>
47+
48+
{/* Features Section */}
49+
<section className="container max-w-6xl mx-auto ">
50+
<div className="grid gird-cols-1 lg:grid-cols-2 items-center">
51+
<div>
52+
<H3>Why Use RetroUI?</H3>
53+
<H1 className="mt-4">Coz We C00l!!</H1>
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-2 lg: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-1 lg: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-1 lg: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+
<H3 className="lg:hidden mt-2 mb-12">👆 RetroUI Card</H3>
121+
122+
<div className="hidden lg:block space-y-4">
123+
<H3>👈 RetroUI Card</H3>
124+
<H3>Gumroad's Card 👉</H3>
125+
</div>
126+
<img
127+
src="/images/gumroad_product_card.png"
128+
alt="our product card"
129+
className="w-80"
130+
/>
131+
<H3 className="lg:hidden mt-2">👆 Gumroad's Card</H3>
132+
</div>
133+
</section>
134+
135+
<footer className="bg-black py-8">
136+
<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">
137+
<div className="flex justify-center space-x-4">
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+
155+
<p className="text-gray-300 text-sm">
156+
Built by{" "}
157+
<a href="https://twitter.com/ariflogs" className="text-primary-500">
158+
Arif Hossain
159+
</a>
160+
.
161+
</p>
162+
</div>
163+
</footer>
164+
</main>
165+
);
166+
}

‎app/page.tsx‎ renamed to ‎app/demo.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@ export default function page() {
2525
<div className="space-y-8 mt-12">
2626
<div>
2727
<H3>Typography</H3>
28-
2928
<H1>This is H1</H1>
3029
<H2>This is H2</H2>
3130
<H3>This is H3</H3>

‎app/global.css‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
11
@tailwind base;
22
@tailwind components;
3-
@tailwind utilities;
3+
@tailwind utilities;
4+
5+
.text-outlined {
6+
@apply relative text-primary-400 font-bold;
7+
letter-spacing: 2px;
8+
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; /* Black outline */
9+
}

‎app/layout.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,40 @@
1-
import "./global.css"
1+
import TopNav from "@/components/TopNav";
2+
import "./global.css";
23
import { Archivo_Black, Share_Tech, Share_Tech_Mono } from "next/font/google";
34

45
const archivoBlack = Archivo_Black({
56
subsets: ["latin"],
67
weight: "400",
7-
variable: '--font-head',
8+
variable: "--font-head",
89
});
910

1011
const shareTech = Share_Tech({
1112
subsets: ["latin"],
1213
weight: "400",
13-
variable: '--font-sans',
14+
variable: "--font-sans",
1415
});
1516

1617
const shareTechMono = Share_Tech_Mono({
1718
subsets: ["latin"],
1819
weight: "400",
19-
variable: '--font-mono',
20+
variable: "--font-mono",
2021
});
2122

2223
export default function RootLayout({
2324
children,
2425
}: {
25-
children: React.ReactNode
26+
children: React.ReactNode;
2627
}) {
2728
return (
2829
<html lang="en">
29-
<body className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}>{children}</body>
30+
<body
31+
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
32+
>
33+
<div className="mb-8 relative z-10">
34+
<TopNav />
35+
</div>
36+
{children}
37+
</body>
3038
</html>
31-
)
39+
);
3240
}

‎components/HamburgerMenu.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import SideNav from "./SideNav";
5+
import { AlignJustify, X } from "lucide-react";
6+
import { Button } from "@/packages/ui";
7+
8+
export default function HamburgerMenu() {
9+
const [isOpen, setIsOpen] = useState(false);
10+
11+
return (
12+
<div>
13+
<Button
14+
size="sm"
15+
variant="outline"
16+
onClick={() => setIsOpen((prev) => !prev)}
17+
>
18+
{isOpen ? <X /> : <AlignJustify />}
19+
</Button>
20+
{isOpen && <SideNav />}
21+
</div>
22+
);
23+
}

‎components/SideNav.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import Link from "next/link";
2+
3+
const navItems = [
4+
{ title: "Getting Started", route: "/components" },
5+
{ title: "Accordions", route: "/components/accordions" },
6+
{ title: "Avatars", route: "/components/avatars" },
7+
// { title: "Badges", route: "/components/badges" },
8+
{ title: "Buttons", route: "/components/buttons" },
9+
{ title: "Cards", route: "/components/cards" },
10+
{ title: "Inputs", route: "/components/inputs" },
11+
{ title: "Textareas", route: "/components/textareas" },
12+
{ title: "Typography", route: "/components/typography" },
13+
];
14+
15+
export default function SideNav() {
16+
return (
17+
<div
18+
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`}
19+
>
20+
<nav className="flex flex-col items-start p-6 space-y-2">
21+
{navItems.map((item) => (
22+
<Link key={item.route} href={item.route}>
23+
{item.title}
24+
</Link>
25+
))}
26+
</nav>
27+
</div>
28+
);
29+
}

‎components/TopNav.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import React from "react";
2+
import Link from "next/link";
3+
import { GitBranchIcon, GithubIcon } from "lucide-react";
4+
import HamburgerMenu from "./HamburgerMenu";
5+
import { Button } from "@/packages/ui";
6+
7+
export default function TopNav() {
8+
return (
9+
<nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
10+
<div className="container max-w-6xl mx-auto">
11+
<div className="flex justify-between items-center h-16">
12+
{/* Logo Section */}
13+
<div className="flex-shrink-0">
14+
<a
15+
href="/"
16+
className="text-black font-head text-2xl flex items-end"
17+
>
18+
<img
19+
src="/images/logo_full.png"
20+
alt="retro ui logo"
21+
className="w-16 mr-2"
22+
/>
23+
RetroUI
24+
</a>
25+
</div>
26+
27+
{/* Navigation Links */}
28+
<div className="hidden md:flex space-x-8">
29+
<a
30+
href="/components"
31+
className="hover:text-primary-500 transition-all"
32+
>
33+
Documentation
34+
</a>
35+
<a
36+
href="/components/buttons"
37+
className="hover:text-primary-500 transition-all"
38+
>
39+
Components
40+
</a>
41+
</div>
42+
43+
<div className="flex items-center space-x-4 lg:hidden">
44+
<Link
45+
href="https://github.com/ariflogs/retroui"
46+
target="_blank"
47+
rel="noopener noreferrer"
48+
>
49+
<GithubIcon />
50+
</Link>
51+
<HamburgerMenu />
52+
</div>
53+
<div className="hidden lg:flex items-center">
54+
<Link
55+
href="https://github.com/ariflogs/retroui"
56+
target="_blank"
57+
rel="noopener noreferrer"
58+
>
59+
<Button className="flex items-center" variant="outline" size="sm">
60+
<GithubIcon size="16" className="mr-2" />
61+
Star on GitHub
62+
</Button>
63+
</Link>
64+
</div>
65+
</div>
66+
</div>
67+
</nav>
68+
);
69+
}

‎package.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,19 @@
99
"lint": "next lint"
1010
},
1111
"dependencies": {
12+
"lucide-react": "^0.445.0",
13+
"next": "14.2.7",
1214
"react": "^18",
13-
"react-dom": "^18",
14-
"next": "14.2.7"
15+
"react-dom": "^18"
1516
},
1617
"devDependencies": {
17-
"typescript": "^5",
1818
"@types/node": "^20",
1919
"@types/react": "^18",
2020
"@types/react-dom": "^18",
21+
"eslint": "^8",
22+
"eslint-config-next": "14.2.7",
2123
"postcss": "^8",
2224
"tailwindcss": "^3.4.1",
23-
"eslint": "^8",
24-
"eslint-config-next": "14.2.7"
25+
"typescript": "^5"
2526
}
2627
}

0 commit comments

Comments
 (0)