Skip to content

Commit 0d43d5e

Browse files
ariflogsariflogs
committed
new homepage
1 parent 60378be commit 0d43d5e

File tree

13 files changed

+312
-149
lines changed

13 files changed

+312
-149
lines changed

‎app/(marketing)/page.tsx‎

Lines changed: 190 additions & 126 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,221 @@
1-
import {
2-
Avatar,
3-
Badge,
4-
BasicCard,
5-
Button,
6-
Text,
7-
Input,
8-
Textarea,
9-
} from "@/packages/ui";
1+
"use server";
2+
3+
import { Button, Text, Input, Textarea, Card, Avatar } from "@/packages/ui";
104
import AccordionStyleDefault from "@/preview/components/accordion-style-default";
5+
import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon";
6+
import AvatarStyleCircle from "@/preview/components/avatar-style-circle-sizes";
117
import BadgeStyleVariants from "@/preview/components/badge-style-variants";
12-
import { GithubIcon, MessageCircle } from "lucide-react";
8+
import { GithubIcon, HeartIcon, MessageCircle } from "lucide-react";
139
import Image from "next/image";
1410
import Link from "next/link";
1511

16-
export default function Home() {
17-
return (
18-
<main className="space-y-36">
19-
<section className="container max-w-6xl mx-auto px-4 lg:px-0 mt-36 text-gray-900 flex justify-center items-center">
20-
<div className="text-center lg:text-left w-full lg:w-2/3">
21-
<Text as="h1">Make your projects</Text>
22-
<Text as="h1" className="text-outlined">
23-
stand out!
24-
</Text>
12+
async function getContributors(): Promise<
13+
{ avatar: string; username: string; url: string }[]
14+
> {
15+
let request = await fetch(
16+
`https://api.github.com/repos/Logging-Stuff/RetroUI/contributors`,
17+
{
18+
method: "GET",
19+
headers: {
20+
"Content-Type": "application/json",
21+
},
22+
}
23+
);
2524

26-
<p className="text-lg text-muted mb-8 mt-4">
27-
Retro styled component library for modern web apps. Comes with 20+
28-
free UI components that you can just copy paste into your projects.{" "}
29-
{/* <br /> Now available for both HTML and React! */}
30-
</p>
25+
let contributorsList = await request.json();
26+
return [
27+
{
28+
avatar: "https://avatars.githubusercontent.com/u/58097221?v=4",
29+
username: "MeherabHossain007",
30+
url: "https://github.com/MeherabHossain007",
31+
},
32+
...contributorsList.map(
33+
(c: { avatar_url: string; login: string; html_url: string }) => ({
34+
avatar: c.avatar_url,
35+
username: c.login,
36+
url: c.html_url,
37+
})
38+
),
39+
];
40+
}
3141

32-
<div className="max-w-96 grid gap-4 grid-cols-2 mx-auto lg:mx-0">
33-
<Link href="/docs" passHref>
34-
<Button className="w-full" aria-label="Get Started with RetroUI">
35-
Get Started
36-
</Button>
37-
</Link>
38-
<Link
39-
href="https://github.com/Logging-Stuff/retroui"
40-
target="_blank"
41-
passHref
42-
>
43-
<Button
44-
className="w-full"
45-
variant="outline"
46-
aria-label="Get Started with RetroUI"
47-
>
48-
Github
49-
</Button>
50-
</Link>
51-
</div>
52-
</div>
53-
<div className="hidden lg:block lg:w-1/3">
54-
<img
55-
alt="orange cool cat"
56-
src="/images/orange_boos.png"
57-
className="h-full w-full"
58-
/>
59-
</div>
60-
</section>
42+
export default async function Home() {
43+
const contributors = await getContributors();
6144

62-
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
63-
<Text as="h2" className="mb-16 text-center">
64-
Our components look both old school and modern! ✨
65-
</Text>
45+
return (
46+
<main>
47+
<div className="bg-[url('/images/banner_void_2.svg')] bg-cover bg-no-repeat bg-center flex flex-col items-center h-[1400px]">
48+
<section className="container max-w-6xl mx-auto px-4 lg:px-0 text-gray-900 flex justify-center items-center lg:gap-28 xl:gap-32 my-28">
49+
<div className="text-center lg:text-left w-full lg:w-2/3">
50+
<Text as="h1">Make your projects</Text>
51+
<Text as="h1" className="text-outlined">
52+
stand out!
53+
</Text>
6654

67-
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
68-
<div className="space-y-4">
69-
<Text as="h4">Button</Text>
70-
<Button>Click Me</Button>
71-
</div>
72-
<div className="space-y-4">
73-
<Text as="h4">Badge</Text>
74-
<div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
75-
<BadgeStyleVariants />
55+
<p className="text-lg text-muted mb-8 mt-4">
56+
Retro styled component library for modern web apps. Comes with 20+
57+
free UI components that you can just copy paste into your
58+
projects. {/* <br /> Now available for both HTML and React! */}
59+
</p>
60+
61+
<div className="max-w-96 grid gap-4 grid-cols-2 mx-auto lg:mx-0">
62+
<Link href="/docs" passHref>
63+
<Button
64+
className="w-full"
65+
aria-label="Get Started with RetroUI"
66+
>
67+
Get Started
68+
</Button>
69+
</Link>
70+
<Link
71+
href="https://github.com/Logging-Stuff/retroui"
72+
target="_blank"
73+
passHref
74+
>
75+
<Button
76+
className="w-full"
77+
variant="outline"
78+
aria-label="Get Started with RetroUI"
79+
>
80+
Github
81+
</Button>
82+
</Link>
7683
</div>
7784
</div>
78-
<div className="space-y-4">
79-
<Text as="h4">Avatar</Text>
80-
<Avatar />
81-
</div>
82-
<div className="space-y-4">
83-
<Text as="h4">Input</Text>
84-
<Input />
85-
</div>
86-
</div>
87-
<div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
88-
<div className="space-y-4">
89-
<Text as="h4">Textarea</Text>
90-
<Textarea />
91-
</div>
92-
<div className="space-y-4">
93-
<Text as="h4">Basic Card</Text>
94-
<BasicCard />
95-
</div>
96-
<div className="space-y-4">
97-
<Text as="h4">Accordion</Text>
98-
<AccordionStyleDefault />
85+
<div className="hidden lg:block lg:w-1/3">
86+
<img
87+
alt="orange cool cat"
88+
src="/images/tv_radio.png"
89+
className="h-full w-full"
90+
/>
9991
</div>
100-
</div>
101-
</section>
102-
103-
<section className="container max-w-6xl mx-auto px-4 lg:px-0">
104-
<Text as="h2" className="mb-16 text-center">
105-
And NO! We didn&apos;t just copy Gumroad!
106-
<br />
107-
Inspired, if you will... 💅
108-
</Text>
92+
</section>
93+
<section className="container max-w-6xl mx-auto px-4 lg:px-0 my-36">
94+
{/* <Text as="h2" className="mb-16 text-center">
95+
Old school with modern twist! ✨
96+
</Text> */}
97+
<div className="grid gap-6 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 mb-8">
98+
<Card className="w-full bg-white shadow-none">
99+
<Card.Header>
100+
<Card.Title>Button</Card.Title>
101+
</Card.Header>
102+
<Card.Content>
103+
<div className="flex flex-wrap gap-4">
104+
<Button>Primary</Button>
105+
<Button variant="outline">Outline</Button>
106+
</div>
107+
</Card.Content>
108+
</Card>
109+
<Card className="w-full bg-white shadow-none">
110+
<Card.Header>
111+
<Card.Title>Badge</Card.Title>
112+
</Card.Header>
113+
<Card.Content>
114+
<BadgeStyleVariants />
115+
</Card.Content>
116+
</Card>
117+
<Card className="w-full bg-white shadow-none">
118+
<Card.Header>
119+
<Card.Title>Avatar</Card.Title>
120+
</Card.Header>
121+
<Card.Content>
122+
<AvatarStyleCircle />
123+
</Card.Content>
124+
</Card>
125+
<Card className="w-full bg-white shadow-none">
126+
<Card.Header>
127+
<Card.Title>Accordion</Card.Title>
128+
</Card.Header>
129+
<Card.Content>
130+
<AccordionStyleDefault />
131+
</Card.Content>
132+
</Card>
133+
<Card className="w-full bg-white shadow-none">
134+
<Card.Header>
135+
<Card.Title>Input & Textarea</Card.Title>
136+
</Card.Header>
137+
<Card.Content>
138+
<Input />
139+
<div className="h-4"></div>
140+
<Textarea />
141+
</Card.Content>
142+
</Card>
109143

110-
<div className="grid grid-cols-1 lg:grid-cols-3 items-center">
111-
<Image
112-
src="/images/our_product_card.png"
113-
alt="our product card"
114-
width={300}
115-
height={500}
116-
/>
117-
<Text as="h3" className="lg:hidden mt-2 mb-12">
118-
👆 RetroUI Card
119-
</Text>
144+
<Card className="w-full bg-white shadow-none">
145+
<Card.Header>
146+
<Card.Title>Alert</Card.Title>
147+
</Card.Header>
148+
<Card.Content>
149+
<AlertStyleDefaultIcon />
150+
</Card.Content>
151+
</Card>
152+
</div>
153+
</section>
154+
</div>
120155

121-
<div className="hidden lg:block space-y-4">
122-
<Text as="h2" className="text-left">
123-
👈 RetroUI Card
156+
<section className="container max-w-6xl mx-auto px-4 lg:px-0 flex lg:gap-16 lg:grid-cols-2 my-36">
157+
<div className="w-3/5">
158+
<Text as="h2">Easily Customize to Your Own Needs! 🛠️</Text>
159+
<div className="flex flex-col space-y-1 mt-6 mb-8 text-muted">
160+
<Text className="text-xl">
161+
Copy-Paste Ready: Components that you can just copy paste.
162+
</Text>
163+
<Text className="text-xl">
164+
Tailwind Based: Customizable with Tailwind CSS.
124165
</Text>
125-
<Text as="h2" className="text-right">
126-
Gumroad&apos;s Card 👉
166+
<Text className="text-xl">
167+
Type Safe: Typescript support for all components.
127168
</Text>
128169
</div>
170+
<Link href="/docs/components/button" passHref>
171+
<Button>See Examples</Button>
172+
</Link>
173+
</div>
174+
<div className="w-2/5">
129175
<Image
130-
src="/images/gumroad_product_card.png"
131-
alt="our product card"
132-
className="mr-auto lg:ml-auto"
133-
width={300}
134-
height={600}
176+
src="/images/code_show.svg"
177+
width={600}
178+
height={400}
179+
alt="retroui code showcase"
135180
/>
136-
<Text as="h3" className="lg:hidden mt-2">
137-
👆 Gumroad&apos;s Card
138-
</Text>
139181
</div>
140182
</section>
141183

142-
<section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16">
143-
<Text as="h2" className="mb-8 text-center">
144-
And did I mention it&apos;s Free and Open Source?
184+
<section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16 my-36">
185+
<Text as="h2" className="text-center mb-2">
186+
Community Contributors
187+
</Text>
188+
<Text className="text-xl text-center text-muted mb-8">
189+
RetroUI core is free and open-source, and it is made possible by our
190+
awesome contributors.
145191
</Text>
146-
<div className="flex flex-col lg:flex-row items-center justify-center space-y-4 lg:space-y-0 lg:space-x-4">
192+
<div className="flex flex-wrap justify-center gap-4">
193+
{contributors.map((contributor) => (
194+
<Link
195+
key={contributor.username}
196+
href={contributor.url}
197+
target="_blank"
198+
passHref
199+
className="flex flex-col items-center"
200+
>
201+
<Avatar className="h-16 w-16">
202+
<Avatar.Image
203+
src={contributor.avatar}
204+
alt={contributor.username}
205+
/>
206+
</Avatar>
207+
</Link>
208+
))}
209+
</div>
210+
<div className="flex flex-col lg:flex-row items-center justify-center gap-4 mt-12">
147211
<Link
148-
href="https://github.com/Logging-Stuff/retroui"
212+
href="https://opencollective.com/retroui"
149213
target="_blank"
150214
passHref
151215
>
152216
<Button className="flex items-center bg-white" variant="outline">
153-
<GithubIcon size="16" className="mr-2" />
154-
Star on GitHub
217+
<HeartIcon size="16" className="mr-2" />
218+
Sponsor RetroUI
155219
</Button>
156220
</Link>
157221
<Link href="https://discord.gg/Jum3NJxK6Q" target="_blank" passHref>

0 commit comments

Comments
 (0)