Skip to content

Commit dea632b

Browse files
Musiker15Musiker15
committed
Home, Footer
1 parent ccc1d5f commit dea632b

5 files changed

Lines changed: 666 additions & 29 deletions

File tree

‎docs/intro.md‎

Lines changed: 48 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,55 @@ sidebar_position: 1
33
slug: /
44
---
55

6-
# Welcome
6+
# Welcome to Chezza Documentation
77

8-
Welcome to the **Unofficial** Chezza Studios documentation.
8+
Welcome to the **unofficial** documentation for [Chezza Studios](https://www.chezza.dev) — your reference for integrating and extending Chezza's FiveM resources.
9+
10+
Here you'll find installation guides, event references, exports, and event handler documentation for all supported scripts.
11+
12+
---
13+
14+
## Resources
15+
16+
Click on a resource below to get started:
917

1018
[![Inventory v4](/img/inventory.png)](inventory-v4/getting-started)
1119
[![Phone v2](/img/phone.png)](phone-v2/getting-started)
20+
21+
---
22+
23+
## Inventory v4
24+
25+
A feature-rich inventory system built for **ESX Legacy** (v1.7.5+). Inventory v4 provides a fully-fledged item management UI with support for stashes, trunks, gloveboxes, shops, crafting, and more.
26+
27+
| Section | Description |
28+
|---|---|
29+
| [Getting Started](inventory-v4/getting-started) | Installation, dependencies & icon setup |
30+
| [Events](inventory-v4/Events/inventory-openinventory) | Client/server events to control the inventory |
31+
| [Exports](inventory-v4/Exports/additemtoplayer) | Lua exports to interact with inventories programmatically |
32+
| [Event Handler](inventory-v4/Event%20Handler/inventory-open) | Hook into inventory lifecycle events |
33+
34+
---
35+
36+
## Phone v2
37+
38+
A modern in-game smartphone for FiveM, compatible with popular voice and database solutions. Phone v2 supports contacts, dispatch, notifications, custom ringtones, backgrounds, and more.
39+
40+
| Section | Description |
41+
|---|---|
42+
| [Getting Started](phone-v2/getting-started) | Installation, SQL setup & customisation |
43+
| [Events](phone-v2/Events/phone-notify) | Trigger phone notifications, emails & dispatch alerts |
44+
| [Exports](phone-v2/Exports/lockphone) | Control the phone state via Lua exports |
45+
46+
---
47+
48+
## Community & Support
49+
50+
Need help or want to stay up to date?
51+
52+
- 🌐 **Dashboard** — [chezza.dev](https://www.chezza.dev)
53+
- 💬 **Discord** — [discord.com/invite/Cm9NNk2486](https://discord.com/invite/Cm9NNk2486)
54+
55+
:::info
56+
This is an **unofficial** community documentation. For official support, please visit the Chezza Discord server.
57+
:::

‎src/pages/index.module.css‎

Lines changed: 221 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,233 @@
1-
/**
2-
* CSS files with the .module.css suffix will be treated as CSS modules
3-
* and scoped locally.
4-
*/
1+
/* ─── Hero ─────────────────────────────────────────────────────────────────── */
52

6-
.heroBanner {
7-
padding: 4rem 0;
3+
.hero {
4+
background: linear-gradient(160deg, var(--ifm-color-primary-darkest) 0%, var(--ifm-color-primary-dark) 100%);
5+
padding: 5rem 1rem 4rem;
86
text-align: center;
97
position: relative;
108
overflow: hidden;
119
}
1210

13-
@media screen and (max-width: 996px) {
14-
.heroBanner {
15-
padding: 2rem;
11+
.hero::before {
12+
content: '';
13+
position: absolute;
14+
inset: 0;
15+
background: radial-gradient(ellipse at 60% 0%, rgba(255,255,255,0.07) 0%, transparent 70%);
16+
pointer-events: none;
17+
}
18+
19+
.heroInner {
20+
position: relative;
21+
max-width: 720px;
22+
margin: 0 auto;
23+
}
24+
25+
.heroLogo {
26+
width: 80px;
27+
height: 80px;
28+
object-fit: contain;
29+
margin-bottom: 1.25rem;
30+
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
31+
}
32+
33+
.heroTitle {
34+
font-size: 3rem;
35+
font-weight: 800;
36+
color: #fff;
37+
margin-bottom: 0.5rem;
38+
line-height: 1.15;
39+
}
40+
41+
.heroSubtitle {
42+
font-size: 1.2rem;
43+
color: rgba(255, 255, 255, 0.8);
44+
margin-bottom: 2rem;
45+
}
46+
47+
.heroButtons {
48+
display: flex;
49+
gap: 1rem;
50+
justify-content: center;
51+
flex-wrap: wrap;
52+
}
53+
54+
@media (max-width: 768px) {
55+
.heroTitle {
56+
font-size: 2rem;
1657
}
1758
}
1859

19-
.buttons {
60+
/* ─── Section Titles ────────────────────────────────────────────────────────── */
61+
62+
.sectionTitle {
63+
text-align: center;
64+
font-size: 1.9rem;
65+
font-weight: 700;
66+
margin-bottom: 0.4rem;
67+
}
68+
69+
.sectionSubtitle {
70+
text-align: center;
71+
color: var(--ifm-color-emphasis-600);
72+
margin-bottom: 2.5rem;
73+
}
74+
75+
/* ─── Resources ─────────────────────────────────────────────────────────────── */
76+
77+
.resources {
78+
padding: 4rem 0 3rem;
79+
}
80+
81+
.cardGrid {
82+
display: grid;
83+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
84+
gap: 1.75rem;
85+
max-width: 900px;
86+
margin: 0 auto;
87+
}
88+
89+
/* ─── Card ──────────────────────────────────────────────────────────────────── */
90+
91+
.card {
92+
display: flex;
93+
flex-direction: column;
94+
border: 1px solid var(--ifm-color-emphasis-200);
95+
border-radius: 12px;
96+
overflow: hidden;
97+
background: var(--ifm-card-background-color, var(--ifm-background-surface-color));
98+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
99+
transition: transform 0.2s ease, box-shadow 0.2s ease;
100+
}
101+
102+
.card:hover {
103+
transform: translateY(-4px);
104+
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
105+
}
106+
107+
.cardImage {
108+
width: 100%;
109+
aspect-ratio: 16 / 7;
110+
overflow: hidden;
111+
background: var(--ifm-color-emphasis-100);
112+
}
113+
114+
.cardImage img {
115+
width: 100%;
116+
height: 100%;
117+
object-fit: cover;
118+
display: block;
119+
}
120+
121+
.cardBody {
122+
padding: 1.25rem 1.5rem 0.75rem;
123+
flex: 1;
124+
}
125+
126+
.cardHeader {
20127
display: flex;
21128
align-items: center;
22-
justify-content: center;
129+
gap: 0.75rem;
130+
margin-bottom: 0.6rem;
131+
}
132+
133+
.cardTitle {
134+
font-size: 1.3rem;
135+
font-weight: 700;
136+
margin: 0;
137+
}
138+
139+
.cardBadge {
140+
font-size: 0.7rem;
141+
font-weight: 600;
142+
padding: 0.2rem 0.55rem;
143+
border-radius: 999px;
144+
background: var(--ifm-color-primary-lightest);
145+
color: var(--ifm-color-primary-darkest);
146+
white-space: nowrap;
147+
text-transform: uppercase;
148+
letter-spacing: 0.04em;
149+
}
150+
151+
[data-theme='dark'] .cardBadge {
152+
background: var(--ifm-color-primary-darkest);
153+
color: var(--ifm-color-primary-lightest);
154+
}
155+
156+
.cardDescription {
157+
font-size: 0.95rem;
158+
color: var(--ifm-color-emphasis-700);
159+
margin-bottom: 1rem;
160+
line-height: 1.55;
161+
}
162+
163+
.cardTags {
164+
display: flex;
165+
gap: 0.4rem;
166+
flex-wrap: wrap;
167+
margin-bottom: 0.5rem;
168+
}
169+
170+
.cardTag {
171+
font-size: 0.75rem;
172+
padding: 0.2rem 0.6rem;
173+
border-radius: 6px;
174+
background: var(--ifm-color-emphasis-100);
175+
color: var(--ifm-color-emphasis-800);
176+
border: 1px solid var(--ifm-color-emphasis-200);
177+
}
178+
179+
.cardFooter {
180+
padding: 1rem 1.5rem 1.25rem;
181+
}
182+
183+
/* ─── Info Banner ───────────────────────────────────────────────────────────── */
184+
185+
.infoBanner {
186+
background: var(--ifm-color-emphasis-100);
187+
border-top: 1px solid var(--ifm-color-emphasis-200);
188+
padding: 3.5rem 1rem;
189+
}
190+
191+
.infoBannerInner {
192+
display: flex;
193+
align-items: center;
194+
justify-content: space-between;
195+
gap: 2rem;
196+
flex-wrap: wrap;
197+
}
198+
199+
.infoBannerText {
200+
flex: 1;
201+
min-width: 240px;
202+
}
203+
204+
.infoBannerText h3 {
205+
font-size: 1.4rem;
206+
font-weight: 700;
207+
margin-bottom: 0.5rem;
208+
}
209+
210+
.infoBannerText p {
211+
color: var(--ifm-color-emphasis-700);
212+
margin: 0;
213+
max-width: 520px;
214+
line-height: 1.6;
215+
}
216+
217+
.infoBannerActions {
218+
display: flex;
219+
gap: 0.75rem;
220+
flex-wrap: wrap;
221+
flex-shrink: 0;
222+
}
223+
224+
@media (max-width: 768px) {
225+
.infoBannerInner {
226+
flex-direction: column;
227+
text-align: center;
228+
}
229+
230+
.infoBannerActions {
231+
justify-content: center;
232+
}
23233
}

0 commit comments

Comments
 (0)