Skip to content
This repository was archived by the owner on Aug 10, 2025. It is now read-only.

Commit e15b761

Browse files
jesperrichertjesperrichert
committed
Refactor sidebar configuration and enhance homepage layout; update styles and add feature descriptions
1 parent c671c9d commit e15b761

File tree

4 files changed

+201
-16
lines changed

4 files changed

+201
-16
lines changed

‎sidebars.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
1+
import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';
22

33
// This runs in Node.js - Don't use client-side code here (browser APIs, JSX...)
44

@@ -14,7 +14,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
1414
*/
1515
const sidebars: SidebarsConfig = {
1616
// By default, Docusaurus generates a sidebar from the docs folder structure
17-
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
17+
tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
1818

1919
// But you can create a sidebar manually
2020
/*

‎src/pages/index.module.css‎

Lines changed: 56 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,70 @@
1-
/**
2-
* CSS files with the .module.css suffix will be treated as CSS modules
3-
* and scoped locally.
4-
*/
5-
61
.heroBanner {
72
padding: 4rem 0;
83
text-align: center;
94
position: relative;
105
overflow: hidden;
6+
background: linear-gradient(135deg, #5865f2 0%, #404eed 100%);
117
}
128

13-
@media screen and (max-width: 996px) {
14-
.heroBanner {
15-
padding: 2rem;
16-
}
9+
.heroLogo {
10+
margin-bottom: 1rem;
11+
border-radius: 50%;
12+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
1713
}
1814

1915
.buttons {
2016
display: flex;
2117
align-items: center;
2218
justify-content: center;
19+
gap: 1rem;
20+
margin-top: 1rem;
21+
}
22+
23+
.features {
24+
display: flex;
25+
align-items: center;
26+
padding: 2rem 0;
27+
width: 100%;
28+
background-color: var(--ifm-background-surface-color);
29+
}
30+
31+
.feature {
32+
padding: 2rem;
33+
}
34+
35+
.featureIcon {
36+
font-size: 2.5rem;
37+
margin-bottom: 1rem;
38+
}
39+
40+
.stats {
41+
padding: 4rem 0;
42+
background-color: var(--ifm-color-primary-lightest);
43+
text-align: center;
44+
}
45+
46+
.statNumber {
47+
font-size: 3rem;
48+
color: var(--ifm-color-primary);
49+
margin-bottom: 0.5rem;
50+
}
51+
52+
.statLabel {
53+
font-size: 1.2rem;
54+
color: var(--ifm-color-primary-dark);
55+
}
56+
57+
.cta {
58+
padding: 4rem 0;
59+
text-align: center;
60+
}
61+
62+
@media screen and (max-width: 996px) {
63+
.heroBanner {
64+
padding: 2rem;
65+
}
66+
67+
.feature {
68+
padding: 1rem;
69+
}
2370
}

‎src/pages/index.tsx‎

Lines changed: 141 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,169 @@ import Link from "@docusaurus/Link";
44
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
55
import Layout from "@theme/Layout";
66
import Heading from "@theme/Heading";
7+
import DisBotLogo from "../../static/img/disbot.png";
78

89
import styles from "./index.module.css";
910

1011
function HomepageHeader() {
1112
const { siteConfig } = useDocusaurusContext();
1213
return (
13-
<header className={clsx("hero hero--primary", styles.heroBanner)}>
14+
<header className={clsx("hero hero--dark", styles.heroBanner)}>
1415
<div className="container">
16+
<img
17+
src={DisBotLogo}
18+
alt="DisBot Logo"
19+
className={styles.heroLogo}
20+
width="150"
21+
height="150"
22+
/>
1523
<Heading as="h1" className="hero__title">
1624
{siteConfig.title}
1725
</Heading>
1826
<p className="hero__subtitle">{siteConfig.tagline}</p>
27+
<div className={styles.buttons}>
28+
<Link className="button button--primary button--lg" to="/docs/intro">
29+
Documentation
30+
</Link>
31+
<Link
32+
className="button button--secondary button--lg margin-left--sm"
33+
href="https://disbot.xyz/invite"
34+
>
35+
Invite to Discord
36+
</Link>
37+
</div>
1938
</div>
2039
</header>
2140
);
2241
}
2342

43+
interface FeatureItem {
44+
title: string;
45+
icon: string;
46+
description: ReactNode;
47+
}
48+
49+
const FeatureList: FeatureItem[] = [
50+
{
51+
title: "Easy to Use",
52+
icon: "⚡",
53+
description: (
54+
<>
55+
DisBot is designed to be simple to set up and use, with intuitive
56+
commands and comprehensive documentation.
57+
</>
58+
),
59+
},
60+
{
61+
title: "Powerful Moderation",
62+
icon: "🛡️",
63+
description: (
64+
<>
65+
Advanced moderation tools to keep your server safe including
66+
auto-moderation, warning systems, and customizable filters.
67+
</>
68+
),
69+
},
70+
{
71+
title: "Customizable",
72+
icon: "🎨",
73+
description: (
74+
<>
75+
Fully customizable to fit your server's needs with configurable
76+
commands, responses, and behavior.
77+
</>
78+
),
79+
},
80+
];
81+
82+
function Feature({ title, icon, description }: FeatureItem) {
83+
return (
84+
<div className={clsx("col col--4", styles.feature)}>
85+
<div className="text--center">
86+
<div className={styles.featureIcon}>{icon}</div>
87+
</div>
88+
<div className="text--center padding-horiz--md">
89+
<Heading as="h3">{title}</Heading>
90+
<p>{description}</p>
91+
</div>
92+
</div>
93+
);
94+
}
95+
96+
function HomepageFeatures(): ReactNode {
97+
return (
98+
<section className={styles.features}>
99+
<div className="container">
100+
<div className="row">
101+
{FeatureList.map((props, idx) => (
102+
<Feature key={idx} {...props} />
103+
))}
104+
</div>
105+
</div>
106+
</section>
107+
);
108+
}
109+
110+
function StatsSection(): ReactNode {
111+
return (
112+
<section className={styles.stats}>
113+
<div className="container">
114+
<div className="row">
115+
<div className="col col--4 text--center">
116+
<Heading as="h2" className={styles.statNumber}>
117+
10,000+
118+
</Heading>
119+
<p className={styles.statLabel}>Servers</p>
120+
</div>
121+
<div className="col col--4 text--center">
122+
<Heading as="h2" className={styles.statNumber}>
123+
5M+
124+
</Heading>
125+
<p className={styles.statLabel}>Users</p>
126+
</div>
127+
<div className="col col--4 text--center">
128+
<Heading as="h2" className={styles.statNumber}>
129+
24/7
130+
</Heading>
131+
<p className={styles.statLabel}>Uptime</p>
132+
</div>
133+
</div>
134+
</div>
135+
</section>
136+
);
137+
}
138+
139+
function CtaSection(): ReactNode {
140+
return (
141+
<section className={styles.cta}>
142+
<div className="container text--center">
143+
<Heading as="h2">Ready to enhance your Discord server?</Heading>
144+
<div className={styles.buttons}>
145+
<Link
146+
className="button button--primary button--lg"
147+
href="https://discord.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&permissions=8&scope=bot"
148+
>
149+
Add to Discord
150+
</Link>
151+
</div>
152+
</div>
153+
</section>
154+
);
155+
}
156+
24157
export default function Home(): ReactNode {
25158
const { siteConfig } = useDocusaurusContext();
26159
return (
27160
<Layout
28-
title={`Hello from ${siteConfig.title}`}
29-
description="Description will go into a meta tag in <head />"
161+
title={`Home`}
162+
description="DisBot - The ultimate Discord bot for moderation, utilities, and fun features"
30163
>
31164
<HomepageHeader />
32-
<main></main>
165+
<main>
166+
<HomepageFeatures />
167+
<StatsSection />
168+
<CtaSection />
169+
</main>
33170
</Layout>
34171
);
35172
}

‎src/theme/Icon/ExternalLink/index.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
export default function IconExternalLink({ width = 13.5, height = 13.5 }) {
1+
export default function IconExternalLink({ width = 15.0, height = 15.0 }) {
22
return (
33
<div
44
style={{
@@ -8,6 +8,7 @@ export default function IconExternalLink({ width = 13.5, height = 13.5 }) {
88
verticalAlign: "middle",
99
marginLeft: "0.25rem",
1010
marginRight: "0.25rem",
11+
marginTop: "-1.0rem",
1112
}}
1213
>
1314
<svg

0 commit comments

Comments
 (0)