Skip to content

Commit 8d6b0cf

Browse files
quaid-perkinsquaid-perkins
authored
feat: home page redesign
1 parent 3da6269 commit 8d6b0cf

File tree

4 files changed

+57
-78
lines changed

4 files changed

+57
-78
lines changed

‎src/components/ui/button.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ const buttonVariants = cva(
1010
variants: {
1111
variant: {
1212
default:
13-
"bg-slate-200 text-slate-950 shadow-xs hover:bg-slate-200/90 dark:bg-slate-700 dark:text-slate-50 dark:hover:bg-slate-700/90",
14-
primary: "bg-primary text-slate-950 hover:bg-primary/90",
13+
"bg-surface-200 text-surface-950 shadow-xs hover:bg-surface-200/90 dark:bg-surface-800 dark:text-surface-50 dark:hover:bg-surface-800/90",
14+
primary: "bg-primary text-surface-950 hover:bg-primary/90",
1515
outline:
16-
"border-2 border-slate-300 bg-slate-100 text-slate-950 shadow-xs hover:bg-slate-100/90 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-50 dark:hover:bg-slate-700/90",
16+
"border-2 border-surface-300 bg-surface-200 text-surface-950 shadow-xs hover:bg-surface-200/90 dark:border-surface-700 dark:bg-surface-800 dark:text-surface-50 dark:hover:bg-surface-800/90",
1717
ghost:
18-
"text-slate-950 hover:bg-slate-200 dark:text-slate-50 dark:hover:bg-slate-700",
19-
link: "text-slate-950 underline-offset-4 hover:underline dark:text-slate-50",
18+
"text-surface-950 hover:bg-surface-200 dark:text-surface-50 dark:hover:bg-surface-800",
19+
link: "text-surface-950 underline-offset-4 hover:underline dark:text-surface-50",
2020
},
2121
size: {
2222
default: "h-9 px-4 py-2 has-[>svg]:px-3",

‎src/routes/__root.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,10 @@ function RootDocument({ children }: { children: React.ReactNode }) {
4747
<meta name="twitter:image" content="/preview.png" />
4848
<meta name="twitter:url" content="https://voidmodding.org" />
4949
</head>
50-
<body data-theme="system">
50+
<body
51+
data-theme="system"
52+
className="bg-surface-100 text-surface-950 dark:bg-surface-900 dark:text-surface-50"
53+
>
5154
{children}
5255
<TanStackDevtools
5356
config={{

‎src/routes/index.tsx‎

Lines changed: 29 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,37 @@ export const Route = createFileRoute("/")({ component: App });
66

77
function App() {
88
return (
9-
<div className="h-screen overflow-y-auto scroll-smooth bg-[#0f1115] font-sans text-white">
10-
<header className="sticky top-0 z-50 flex items-center justify-between border-white/5 border-b bg-[#0f1115]/90 px-8 py-6 backdrop-blur">
11-
<div className="flex items-center gap-2">
12-
<img src="/logo512.png" alt="Void Mod Manager" className="h-10" />
13-
<span className="text-sm opacity-80">Void Mod Manager</span>
14-
</div>
15-
<nav>
16-
<a
17-
href="https://github.com/void-modding/web"
18-
className="text-sm opacity-80 transition hover:opacity-100"
19-
>
20-
Documentation
21-
</a>
22-
{/*We need to add the docs page, github has a wiki we could use that*/}
23-
</nav>
24-
</header>
25-
26-
<main className="flex flex-col items-center gap-16 py-16 text-center">
9+
<main className="flex w-full flex-col items-center justify-center">
10+
<section className="flex flex-col items-center gap-12 py-12 text-center sm:gap-16 sm:py-16">
2711
<div className="flex flex-col items-center gap-6">
28-
<img src="/logo512.png" alt="Logo" className="h-50" />
12+
<img src="/logo512.png" alt="Logo" className="h-48" />
2913
<div className="flex flex-col items-center gap-3">
30-
<h1 className="font-bold text-5xl">
31-
The new <span className="text-cyan-400">home</span> of Modding
14+
<h1 className="font-extrabold text-6xl">
15+
Meet{" "}
16+
<span className="text-primary-tint dark:text-primary">
17+
Modding
18+
</span>
19+
's new home
3220
</h1>
33-
<p className="mb-6 max-w-md opacity-70">
34-
Welcome to the new home of Modding for any game, fully
21+
<p className="max-w-88 font-medium text-surface-700 text-xl dark:text-surface-300">
22+
Welcome to the new home of Modding for any game, forever
3523
Open-Sourced.
3624
</p>
3725
</div>
3826
</div>
39-
40-
<div className="mb-20 flex gap-4">
41-
<Button variant="primary" size="lg" asChild>
42-
<a href="/download" target="_blank" rel="noopener noreferrer">
43-
<DownloadIcon />
44-
Download
45-
</a>
27+
<div className="flex gap-4">
28+
<Button variant="primary" size="lg" disabled>
29+
<DownloadIcon />
30+
Download*
4631
</Button>
32+
{/*
33+
<Button variant="primary" size="lg" asChild>
34+
<a href="/download" target="_blank" rel="noopener noreferrer">
35+
<DownloadIcon />
36+
Download
37+
</a>
38+
</Button>
39+
*/}
4740
<Button size="lg" asChild>
4841
<a
4942
href="https://github.com/void-modding/"
@@ -55,44 +48,11 @@ function App() {
5548
</a>
5649
</Button>
5750
</div>
58-
<section className="mt-20 flex w-full max-w-5xl flex-col items-center justify-between md:flex-row">
59-
<div className="max-w-lg text-left">
60-
<h2 className="mb-2 font-semibold text-3xl">
61-
Find what you need,
62-
<br />
63-
<span className="text-cyan-400">whenever you need</span>
64-
</h2>
65-
<p className="text-sm opacity-70">
66-
Search through thousands of mods spanning across hundreds of games
67-
instantly. Filter by category, popularity and more.
68-
</p>
69-
</div>
70-
71-
<div>
72-
<img src="Placeholder.png"></img>
73-
{/* I guess we adding an image here */}
74-
</div>
75-
</section>
76-
77-
<section className="mt-20 flex w-full max-w-5xl flex-col items-center justify-between md:flex-row">
78-
<div>
79-
<img src="Placeholder.png"></img>
80-
{/* I guess we adding an image here */}
81-
</div>
82-
83-
<div className="max-w-lg text-left">
84-
<h2 className="mb-2 font-semibold text-3xl">
85-
Automaticlly installs
86-
<br />
87-
<span className="text-cyan-400">for you</span>
88-
</h2>
89-
<p className="text-sm opacity-70">
90-
Automaticly installs mods for you with a single click. No more
91-
manual installs, no more broken mods.
92-
</p>
93-
</div>
94-
</section>
95-
</main>
96-
</div>
51+
<span className="text-surface-600 dark:text-surface-400">
52+
*No release has been made available yet, the project is still in early
53+
development.
54+
</span>
55+
</section>
56+
</main>
9757
);
9858
}

‎src/styles.css‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,27 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
12
@import "tailwindcss";
2-
@import "tw-animate-css";
33

4-
@custom-variant dark (&:is(.dark *));
4+
* {
5+
font-family: 'Lato', Arial, Helvetica, sans-serif;
6+
}
57

68
@theme {
7-
/* primary colours */
9+
/* brand colours */
810
--color-primary: oklch(0.83 0.131 206.07);
11+
--color-primary-tint: oklch(0.652 0.108 205.98);
12+
13+
/* surface colours */
14+
--color-surface-50: oklch(0.983 0.003 309.08);
15+
--color-surface-100: oklch(0.94 0.007 304.48);
16+
--color-surface-200: oklch(0.847 0.016 310.18);
17+
--color-surface-300: oklch(0.761 0.022 306.82);
18+
--color-surface-400: oklch(0.667 0.028 308.04);
19+
--color-surface-500: oklch(0.58 0.029 307.95);
20+
--color-surface-600: oklch(0.493 0.022 309.6);
21+
--color-surface-700: oklch(0.398 0.016 305.74);
22+
--color-surface-800: oklch(0.31 0.01 312.19);
23+
--color-surface-900: oklch(0.22 0.004 308.35);
24+
--color-surface-950: oklch(0.151 0.003 325.83);
925
}
1026

1127
@custom-variant dark {

0 commit comments

Comments
 (0)