Skip to content

Commit 76d6fd5

Browse files
DuskyElfDuskyElf
committed
Refactor landing page into Main and Members sections
1 parent 45d9ce1 commit 76d6fd5

File tree

5 files changed

+98
-73
lines changed

5 files changed

+98
-73
lines changed

src/assets/Linux-user-Room.webp renamed to public/assets/Linux-user-Room.webp

File renamed without changes.

‎src/components/Background.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
interface BackgroundProps {
2+
src: string;
3+
}
4+
5+
export default function Background(props: BackgroundProps) {
6+
return (
7+
<>
8+
<img
9+
src={props.src}
10+
alt="Linux user room"
11+
class="fixed -z-50 h-screen w-screen object-cover"
12+
/>
13+
<div class="fixed inset-0 -z-50 bg-gradient-to-b from-slate-950/40 to-slate-950" />
14+
</>
15+
);
16+
}

‎src/index.tsx‎

Lines changed: 7 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,15 @@
1-
import type { Component } from "solid-js";
21
import { render } from "solid-js/web";
32
import "./index.css";
43

5-
import User from "./components/User";
4+
import Background from "./components/Background";
5+
import Main from "./sections/Main";
6+
import Members from "./sections/Members";
67

7-
import linuxRoom from "./assets/Linux-user-Room.webp";
8-
const App: Component = () => (
8+
const App = () => (
99
<>
10-
<img
11-
src={linuxRoom}
12-
alt="Linux user room"
13-
class="fixed z-0 h-screen w-screen object-cover"
14-
/>
15-
<div class="fixed inset-0 z-0 bg-gradient-to-b from-slate-950/40 to-slate-950" />
16-
17-
<section class="relative z-10 flex h-[90vh] snap-start items-center px-[8%] text-white">
18-
<main class="space-y-7">
19-
<h1 class="font-logo text-7xl text-violet-50">
20-
Seg
21-
<span class="text-red-400 underline decoration-red-400 decoration-wavy decoration-2">
22-
fault
23-
</span>{" "}
24-
Club
25-
</h1>
26-
<div class="space-y-4 font-mono text-lg">
27-
<p>Linux, Debugging, Chaos and legendary segfaults</p>
28-
<a
29-
class="rounded bg-slate-700 p-2 transition hover:bg-slate-600"
30-
href="https://discord.gg/gohar"
31-
target="_blank"
32-
>
33-
Join{" "}
34-
<span class="underline decoration-blue-400 decoration-2">
35-
@discord.gg/gohar
36-
</span>
37-
</a>
38-
</div>
39-
</main>
40-
</section>
41-
42-
<section class="relative z-10 h-screen w-full snap-start">
43-
<article class="h-screen w-full overflow-y-scroll bg-slate-800/60 p-4 text-white backdrop-blur-sm [scrollbar-width:none]">
44-
<h2 class="m-4 text-center text-4xl text-slate-300">Our Members</h2>
45-
<ul class="mx-auto my-10 grid max-w-3xl grid-cols-2 gap-5 max-md:grid-cols-1">
46-
<li>
47-
<User
48-
username="Thatmagicalcat"
49-
avatarUrl="https://cdn.discordapp.com/avatars/815189874478546954/fba107a0a4978c1e11063386102ba7ff.png?size=1024"
50-
/>
51-
</li>
52-
<li>
53-
<User
54-
username="Wicks"
55-
avatarUrl="https://cdn.discordapp.com/avatars/1159829981803860009/80e4790205157fa6b4152f07c4f27ecf.png?size=1024"
56-
/>
57-
</li>
58-
<li>
59-
<User
60-
username="DuskyElf"
61-
avatarUrl="https://cdn.discordapp.com/avatars/820957214264000513/fed1f113e379ef2b2921afb54b154394.png?size=1024"
62-
/>
63-
</li>
64-
<li>
65-
<User
66-
username="ItsCoral"
67-
avatarUrl="https://cdn.discordapp.com/avatars/950347120962064464/460f6977493399d10b689174924db21f.png?size=1024"
68-
/>
69-
</li>
70-
<li>
71-
<User
72-
username="The master of rick rolls"
73-
avatarUrl="https://cdn.discordapp.com/avatars/950521169432432700/92b68d623d59a2be9650b80999d0e345.png?size=1024"
74-
/>
75-
</li>
76-
</ul>
77-
</article>
78-
</section>
10+
<Background src="/assets/Linux-user-Room.webp" />
11+
<Main className="h-[90vh]" />
12+
<Members />
7913
</>
8014
);
8115

‎src/sections/Main.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
interface MainProps {
2+
className?: string;
3+
}
4+
5+
export default function Main(props: MainProps) {
6+
return (
7+
<section
8+
class={`flex snap-start items-center px-[8%] text-white ${props.className}`}
9+
>
10+
<main class="space-y-7">
11+
<h1 class="font-logo text-7xl text-violet-50">
12+
Seg
13+
<span class="text-red-400 underline decoration-red-400 decoration-wavy decoration-2">
14+
fault
15+
</span>{" "}
16+
Club
17+
</h1>
18+
<div class="space-y-4 font-mono text-lg">
19+
<p>Linux, Debugging, Chaos and legendary segfaults</p>
20+
<a
21+
class="rounded bg-slate-700 p-2 transition hover:bg-slate-600"
22+
href="https://discord.gg/gohar"
23+
target="_blank"
24+
>
25+
Join{" "}
26+
<span class="underline decoration-blue-400 decoration-2">
27+
@discord.gg/gohar
28+
</span>
29+
</a>
30+
</div>
31+
</main>
32+
</section>
33+
);
34+
}

‎src/sections/Members.tsx‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import User from "../components/User";
2+
3+
export default function Members() {
4+
return (
5+
<section class="h-screen w-full snap-start overflow-y-scroll bg-slate-900/60 p-4 text-white backdrop-blur-sm [scrollbar-width:none]">
6+
<h2 class="m-4 text-center text-4xl text-slate-300">Our Members</h2>
7+
<ul class="mx-auto my-10 grid max-w-3xl grid-cols-2 gap-5 max-md:grid-cols-1">
8+
<li>
9+
<User
10+
username="Thatmagicalcat"
11+
avatarUrl="https://cdn.discordapp.com/avatars/815189874478546954/fba107a0a4978c1e11063386102ba7ff.png?size=1024"
12+
/>
13+
</li>
14+
<li>
15+
<User
16+
username="Wicks"
17+
avatarUrl="https://cdn.discordapp.com/avatars/1159829981803860009/80e4790205157fa6b4152f07c4f27ecf.png?size=1024"
18+
/>
19+
</li>
20+
<li>
21+
<User
22+
username="DuskyElf"
23+
avatarUrl="https://cdn.discordapp.com/avatars/820957214264000513/fed1f113e379ef2b2921afb54b154394.png?size=1024"
24+
/>
25+
</li>
26+
<li>
27+
<User
28+
username="ItsCoral"
29+
avatarUrl="https://cdn.discordapp.com/avatars/950347120962064464/460f6977493399d10b689174924db21f.png?size=1024"
30+
/>
31+
</li>
32+
<li>
33+
<User
34+
username="The master of rick rolls"
35+
avatarUrl="https://cdn.discordapp.com/avatars/950521169432432700/92b68d623d59a2be9650b80999d0e345.png?size=1024"
36+
/>
37+
</li>
38+
</ul>
39+
</section>
40+
);
41+
}

0 commit comments

Comments
 (0)