Skip to content

Commit 5d29ae1

Browse files
quaid-perkinsquaid-perkins
authored
style: restructure index hero section
1 parent 14d6e46 commit 5d29ae1

2 files changed

Lines changed: 140 additions & 136 deletions

File tree

‎src/routes/__root.tsx‎

Lines changed: 54 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -5,63 +5,63 @@ import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
55
import appCss from "../styles.css?url";
66

77
export const Route = createRootRoute({
8-
head: () => ({
9-
meta: [
10-
{
11-
charSet: "utf-8",
12-
},
13-
{
14-
name: "viewport",
15-
content: "width=device-width, initial-scale=1",
16-
},
17-
{
18-
title: "Void Modding",
19-
},
20-
],
21-
links: [
22-
{
23-
rel: "stylesheet",
24-
href: appCss,
25-
},
26-
],
27-
}),
8+
head: () => ({
9+
meta: [
10+
{
11+
charSet: "utf-8",
12+
},
13+
{
14+
name: "viewport",
15+
content: "width=device-width, initial-scale=1",
16+
},
17+
{
18+
title: "Void Modding",
19+
},
20+
],
21+
links: [
22+
{
23+
rel: "stylesheet",
24+
href: appCss,
25+
},
26+
],
27+
}),
2828

29-
shellComponent: RootDocument,
29+
shellComponent: RootDocument,
3030
});
3131

3232
function RootDocument({ children }: { children: React.ReactNode }) {
33-
return (
34-
<html lang="en">
35-
<head>
36-
<HeadContent />
37-
<meta name="og:title" content="Void modding" />
38-
<meta name="og:description" content="The new home of modding (maybe)" />
39-
<meta name="og:url" content="https://voidmodding.org" />
40-
<meta name="og:image" content="/preview.png" />
33+
return (
34+
<html lang="en">
35+
<head>
36+
<HeadContent />
37+
<meta name="og:title" content="Void modding" />
38+
<meta name="og:description" content="The new home of modding (maybe)" />
39+
<meta name="og:url" content="https://voidmodding.org" />
40+
<meta name="og:image" content="/preview.png" />
4141

42-
<meta name="twitter:title" content="Void modding" />
43-
<meta
44-
name="twitter:description"
45-
content="The new home of modding (maybe)"
46-
/>
47-
<meta name="twitter:image" content="/preview.png" />
48-
<meta name="twitter:url" content="https://voidmodding.org" />
49-
</head>
50-
<body>
51-
{children}
52-
<TanStackDevtools
53-
config={{
54-
position: "bottom-right",
55-
}}
56-
plugins={[
57-
{
58-
name: "Tanstack Router",
59-
render: <TanStackRouterDevtoolsPanel />,
60-
},
61-
]}
62-
/>
63-
<Scripts />
64-
</body>
65-
</html>
66-
);
42+
<meta name="twitter:title" content="Void modding" />
43+
<meta
44+
name="twitter:description"
45+
content="The new home of modding (maybe)"
46+
/>
47+
<meta name="twitter:image" content="/preview.png" />
48+
<meta name="twitter:url" content="https://voidmodding.org" />
49+
</head>
50+
<body data-theme="system">
51+
{children}
52+
<TanStackDevtools
53+
config={{
54+
position: "bottom-right",
55+
}}
56+
plugins={[
57+
{
58+
name: "Tanstack Router",
59+
render: <TanStackRouterDevtoolsPanel />,
60+
},
61+
]}
62+
/>
63+
<Scripts />
64+
</body>
65+
</html>
66+
);
6767
}

‎src/routes/index.tsx‎

Lines changed: 86 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,98 @@
11
import { createFileRoute } from "@tanstack/react-router";
22
import { DownloadIcon, GithubIcon } from "lucide-react";
3+
import { Button } from "@/components/ui/button";
34

45
export const Route = createFileRoute("/")({ component: App });
56

67
function App() {
7-
return (
8-
<div className="h-screen overflow-y-auto scroll-smooth bg-[#0f1115] text-white font-sans">
9-
<header className="sticky top-0 z-50 flex justify-between items-center px-8 py-6 bg-[#0f1115]/90 backdrop-blur border-b border-white/5">
10-
<div className="flex items-center gap-2">
11-
<img src="/logo512.png" alt="Void Mod Manager" className="h-10" />
12-
<span className="text-sm opacity-80">Void Mod Manager</span>
13-
</div>
14-
<nav>
15-
<a
16-
href="https://github.com/void-modding/web"
17-
className="text-sm opacity-80 hover:opacity-100 transition"
18-
>
19-
Documentation
20-
</a>
21-
{/*We need to add the docs page, github has a wiki we could use that*/}
22-
</nav>
23-
</header>
8+
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>
2425

25-
<main className="flex flex-col items-center text-center mt-10 px-4">
26-
<img src="/logo512.png" alt="Logo" className="h-50" />
27-
<h1 className="text-4xl font-bold mb-2">
28-
The new <span className="text-cyan-400">home</span> of Modding
29-
</h1>
30-
<p className="opacity-70 max-w-md mb-6">
31-
Welcome to the new home of Modding for any game, fully Open-Sourced.
32-
</p>
26+
<main className="flex flex-col items-center gap-16 py-16 text-center">
27+
<div className="flex flex-col items-center gap-6">
28+
<img src="/logo512.png" alt="Logo" className="h-50" />
29+
<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
32+
</h1>
33+
<p className="mb-6 max-w-md opacity-70">
34+
Welcome to the new home of Modding for any game, fully
35+
Open-Sourced.
36+
</p>
37+
</div>
38+
</div>
3339

34-
<div className="flex gap-4 mb-20">
35-
<a
36-
href="/download"
37-
target="_blank"
38-
rel="noopener noreferrer"
39-
className="bg-cyan-500 hover:bg-cyan-600 px-6 py-2 rounded-md font-medium transition inline-flex items-center gap-2"
40-
>
41-
<DownloadIcon size={20} />
42-
Download
43-
</a>
44-
<a
45-
href="https://github.com/void-modding/"
46-
target="_blank"
47-
rel="noopener noreferrer"
48-
className="bg-[#1a1d23] hover:bg-[#22262d] px-6 py-2 rounded-md font-medium transition border border-white/10 inline-flex items-center gap-2"
49-
>
50-
<GithubIcon size={20} />
51-
Source Code
52-
</a>
53-
</div>
54-
<section className="w-full max-w-5xl flex flex-col md:flex-row items-center justify-between mt-20">
55-
<div className="max-w-lg text-left">
56-
<h2 className="text-3xl font-semibold mb-2">
57-
Find what you need,
58-
<br />
59-
<span className="text-cyan-400">whenever you need</span>
60-
</h2>
61-
<p className="opacity-70 text-sm">
62-
Search through thousands of mods spanning across hundreds of games
63-
instantly. Filter by category, popularity and more.
64-
</p>
65-
</div>
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>
46+
</Button>
47+
<Button size="lg" asChild>
48+
<a
49+
href="https://github.com/void-modding/"
50+
target="_blank"
51+
rel="noopener noreferrer"
52+
>
53+
<GithubIcon />
54+
Source Code
55+
</a>
56+
</Button>
57+
</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>
6670

67-
<div>
68-
<img src="Placeholder.png"></img>
69-
{/* I guess we adding an image here */}
70-
</div>
71-
</section>
71+
<div>
72+
<img src="Placeholder.png"></img>
73+
{/* I guess we adding an image here */}
74+
</div>
75+
</section>
7276

73-
<section className="w-full max-w-5xl flex flex-col md:flex-row items-center justify-between mt-20">
74-
<div>
75-
<img src="Placeholder.png"></img>
76-
{/* I guess we adding an image here */}
77-
</div>
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>
7882

79-
<div className="max-w-lg text-left">
80-
<h2 className="text-3xl font-semibold mb-2">
81-
Automaticlly installs
82-
<br />
83-
<span className="text-cyan-400">for you</span>
84-
</h2>
85-
<p className="opacity-70 text-sm">
86-
Automaticly installs mods for you with a single click. No more
87-
manual installs, no more broken mods.
88-
</p>
89-
</div>
90-
</section>
91-
</main>
92-
</div>
93-
);
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>
97+
);
9498
}

0 commit comments

Comments
 (0)