Skip to content

Commit fe3ed31

Browse files
antonscapantonscap
committed
index links
1 parent 66db8e6 commit fe3ed31

File tree

2 files changed

+115
-30
lines changed

2 files changed

+115
-30
lines changed

‎src/pages/index.tsx‎

Lines changed: 101 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export default function Home() {
1111
<title>LuckyUI — Home</title>
1212
<meta name="description" content="Welcome to LuckyUI, Waveful's official design system." />
1313
</Head>
14-
<main className="flex flex-col gap-[20px] row-start-2 items-center text-center max-w-2xl">
14+
<main className="flex flex-col gap-[20px] row-start-2 items-center text-center w-full max-w-3xl">
1515
<Image
1616
src="/lucky_ui_logo.png"
1717
alt="Lucky UI logo"
@@ -25,36 +25,107 @@ export default function Home() {
2525
Waveful&apos;s official design system. Accessible, themeable components, design tokens,
2626
and tooling to build consistent, high‑quality interfaces across Waveful products.
2727
</p>
28-
<nav className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-sm">
29-
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2 text-left">
30-
Components · UI
31-
</Link>
32-
<Link href="#layout" className="rounded-md border border-gray-100 px-3 py-2 text-left">
33-
Components · Layout
34-
</Link>
35-
<Link href="#feedback" className="rounded-md border border-gray-100 px-3 py-2 text-left">
36-
Components · Feedback
37-
</Link>
38-
<Link href="#data-display" className="rounded-md border border-gray-100 px-3 py-2 text-left">
39-
Components · Data Display
40-
</Link>
41-
<Link href="#navigation" className="rounded-md border border-gray-100 px-3 py-2 text-left">
42-
Components · Navigation
43-
</Link>
44-
<Link href="#form" className="rounded-md border border-gray-100 px-3 py-2 text-left">
45-
Components · Form
46-
</Link>
47-
<Link href="/flutter" className="rounded-md border border-gray-100 px-3 py-2 text-left">
48-
Frameworks · Flutter
49-
</Link>
50-
<Link href="#theme" className="rounded-md border px-3 py-2 text-left hover:bg-black/5 dark:hover:bg-white/5 sm:col-span-2">
51-
Theme · Tokens (colors, typography, spacing, shadows, radii, breakpoints)
52-
</Link>
53-
</nav>
28+
29+
<div className="w-full text-left mt-10">
30+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Layout</h2>
31+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
32+
Building blocks to structure pages and content. Grid, Stack, Container and more.
33+
</p>
34+
<div className="mt-4 w-full flex gap-2">
35+
<Link href="/flutter" className="rounded-md border border-gray-100 px-3 py-2 text-left">
36+
Flutter (Coming Soon)
37+
</Link>
38+
<Link href="/nextjs" className="rounded-md border border-gray-100 px-3 py-2 text-left">
39+
NextJS (Coming Soon)
40+
</Link>
41+
</div>
42+
</div>
43+
44+
{/* Sections */}
45+
<section id="layout" className="w-full text-left mt-10">
46+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Layout</h2>
47+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
48+
Building blocks to structure pages and content. Grid, Stack, Container and more.
49+
</p>
50+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
51+
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
52+
Browse all UI components
53+
</Link>
54+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
55+
Grid · Coming soon
56+
</button>
57+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
58+
Stack · Coming soon
59+
</button>
60+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
61+
Container · Coming soon
62+
</button>
63+
</div>
64+
</section>
65+
66+
<section id="feedback" className="w-full text-left mt-10">
67+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Feedback</h2>
68+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
69+
Components that communicate progress, state and outcomes.
70+
</p>
71+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
72+
<Link href="/buttons" className="rounded-md border border-gray-100 px-3 py-2">
73+
Buttons
74+
</Link>
75+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
76+
Toast · Coming soon
77+
</button>
78+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
79+
Alert · Coming soon
80+
</button>
81+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
82+
Progress · Coming soon
83+
</button>
84+
</div>
85+
</section>
86+
87+
<section id="navigation" className="w-full text-left mt-10">
88+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Navigation</h2>
89+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
90+
Menus, tabs and navigational patterns to move through the app.
91+
</p>
92+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
93+
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
94+
Explore navigation patterns
95+
</Link>
96+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
97+
Tabs · Coming soon
98+
</button>
99+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
100+
Sidebar · Coming soon
101+
</button>
102+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
103+
Breadcrumbs · Coming soon
104+
</button>
105+
</div>
106+
</section>
107+
108+
<section id="form" className="w-full text-left mt-10">
109+
<h2 className="text-xl sm:text-2xl font-semibold mb-2">Form</h2>
110+
<p className="text-sm text-black/70 dark:text-white/70 mb-4">
111+
Inputs, validation and controls for capturing user data.
112+
</p>
113+
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-sm">
114+
<Link href="/ui" className="rounded-md border border-gray-100 px-3 py-2">
115+
View form components
116+
</Link>
117+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
118+
TextField · Coming soon
119+
</button>
120+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
121+
Select · Coming soon
122+
</button>
123+
<button disabled className="rounded-md border border-gray-100 px-3 py-2 text-left text-black/50 dark:text-white/50">
124+
Checkbox · Coming soon
125+
</button>
126+
</div>
127+
</section>
54128
</main>
55-
<footer className="row-start-3 text-xs text-black/50 dark:text-white/50">
56-
Built with Next.js and Tailwind CSS
57-
</footer>
58129
</div>
59130
);
60131
}

‎src/pages/nextjs.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import Head from 'next/head';
2+
3+
export default function FlutterPage() {
4+
return (
5+
<div className="py-10">
6+
<Head>
7+
<title>LuckyUI — Flutter</title>
8+
<meta name="description" content="Flutter bindings and widgets for LuckyUI (coming soon)." />
9+
</Head>
10+
<h1 className="text-2xl font-semibold mb-2">Flutter</h1>
11+
<p className="text-gray-600 dark:text-gray-300">Coming soon</p>
12+
</div>
13+
);
14+
}

0 commit comments

Comments
 (0)