@@ -12,52 +12,46 @@ import {
12
12
Input ,
13
13
Textarea ,
14
14
} from "@/packages/ui" ;
15
+ import { GithubIcon , MessageCircle } from "lucide-react" ;
15
16
import Image from "next/image" ;
16
17
import Link from "next/link" ;
17
18
18
19
export default function Home ( ) {
19
20
return (
20
21
< main className = "space-y-36" >
21
- < section className = "container max-w-6xl mx-auto mt-36 text-center text-gray-900" >
22
- < H1 > Make your projects</ H1 >
23
- < H1 className = "text-outlined" > stand out!</ H1 >
22
+ < section className = "container max-w-6xl mx-auto mt-36 text-gray-900 flex justify-center items-center" >
23
+ < div className = "w-2/3" >
24
+ < H1 > Make your projects</ H1 >
25
+ < H1 className = "text-outlined" > stand out!</ H1 >
24
26
25
- < p className = "text-lg text-gray-600 mb-8 mt-4 max-w-2xl mx-auto " >
26
- Retro styled component library for modern web apps. Comes with 20+
27
- free UI components that you can just copy paste into your projects.{ " " }
28
- { /* <br /> Now available for both HTML and React! */ }
29
- </ p >
27
+ < p className = "text-lg text-muted mb-8 mt-4" >
28
+ Retro styled component library for modern web apps. Comes with 20+
29
+ free UI components that you can just copy paste into your projects.{ " " }
30
+ { /* <br /> Now available for both HTML and React! */ }
31
+ </ p >
30
32
31
- < div className = "max-w-96 grid gap-4 mx-auto grid-cols-2" >
32
- < Link href = "/docs" passHref >
33
- < Button className = "w-full" aria-label = "Get Started with RetroUI" >
34
- Get Started
35
- </ Button >
36
- </ Link >
37
- < Link
38
- href = "https://github.com/ariflogs/retroui"
39
- target = "_blank"
40
- passHref
41
- >
42
- < Button
43
- className = "w-full"
44
- variant = "outline"
45
- aria-label = "Get Started with RetroUI"
33
+ < div className = "max-w-96 grid gap-4 grid-cols-2" >
34
+ < Link href = "/docs" passHref >
35
+ < Button className = "w-full" aria-label = "Get Started with RetroUI" >
36
+ Get Started
37
+ </ Button >
38
+ </ Link >
39
+ < Link
40
+ href = "https://github.com/ariflogs/retroui"
41
+ target = "_blank"
42
+ passHref
46
43
>
47
- Github
48
- </ Button >
49
- </ Link >
50
- </ div >
51
- </ section >
52
-
53
- { /* Features Section */ }
54
- < section className = "container max-w-6xl mx-auto " >
55
- < div className = "grid gird-cols-1 lg:grid-cols-2 items-center" >
56
- < div >
57
- < H3 > Why Use RetroUI?</ H3 >
58
- < H1 className = "mt-4" > Coz We C000l!!</ H1 >
44
+ < Button
45
+ className = "w-full"
46
+ variant = "outline"
47
+ aria-label = "Get Started with RetroUI"
48
+ >
49
+ Github
50
+ </ Button >
51
+ </ Link >
59
52
</ div >
60
-
53
+ </ div >
54
+ < div className = "w-1/3" >
61
55
< img
62
56
alt = "orange cool cat"
63
57
src = "/images/orange_boos.png"
@@ -66,9 +60,8 @@ export default function Home() {
66
60
</ div >
67
61
</ section >
68
62
69
- { /* Component Previews Section */ }
70
63
< section className = "container max-w-6xl mx-auto " >
71
- < H2 className = "mb-16" >
64
+ < H2 className = "mb-16 text-center " >
72
65
Our components look both old school and modern! ✨
73
66
</ H2 >
74
67
@@ -110,7 +103,7 @@ export default function Home() {
110
103
</ section >
111
104
112
105
< section className = "container max-w-6xl mx-auto" >
113
- < H2 className = "mb-16" >
106
+ < H2 className = "mb-16 text-center " >
114
107
And NO! We didn't just copy Gumroad!
115
108
< br />
116
109
Inspired, if you will... 💅
@@ -140,7 +133,30 @@ export default function Home() {
140
133
</ div >
141
134
</ section >
142
135
143
- < JoinNewsletter />
136
+ < section className = "container max-w-6xl mx-auto border-2 bg-primary-300 border-black p-16" >
137
+ < H2 className = "mb-8 text-center" >
138
+ And did I mention it's Free and Open Source?
139
+ </ H2 >
140
+ < div className = "flex justify-center space-x-4" >
141
+ < Link
142
+ href = "https://github.com/ariflogs/retroui"
143
+ target = "_blank"
144
+ passHref
145
+ >
146
+ < Button className = "flex items-center bg-white" variant = "outline" >
147
+ < GithubIcon size = "16" className = "mr-2" />
148
+ Star on GitHub
149
+ </ Button >
150
+ </ Link >
151
+ < Link href = "https://discord.gg/Jum3NJxK6Q" target = "_blank" passHref >
152
+ < Button className = "flex items-center bg-white" variant = "outline" >
153
+ < MessageCircle size = "16" className = "mr-2" />
154
+ Join Community
155
+ </ Button >
156
+ </ Link >
157
+ </ div >
158
+ </ section >
159
+
144
160
< footer className = "bg-black py-8" >
145
161
< 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" >
146
162
< div className = "flex justify-center space-x-4" >
0 commit comments