Skip to content

Commit 9ee2796

Browse files
NachichuriNachichuri
committed
feat: add new landing page
1 parent 540f7ad commit 9ee2796

File tree

5 files changed

+641
-303
lines changed

5 files changed

+641
-303
lines changed

‎css/styles.css‎

Lines changed: 287 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,307 @@
1-
html {
2-
background-color: #000;
3-
color: #ccc;
1+
:root {
2+
--terminal-bg: #000000;
3+
--text-color: #ffffff;
4+
--accent-color: #ffffff;
5+
--secondary-color: #666666;
6+
--font-mono: 'Courier New', monospace;
7+
--font-sans: -apple-system, system-ui, sans-serif;
8+
}
9+
10+
* {
411
margin: 0;
5-
font-family: "Courier New", Courier, monospace;
6-
font-size: 20px;
7-
line-height: 26px;
12+
padding: 0;
13+
box-sizing: border-box;
814
}
915

1016
body {
11-
margin: 0;
12-
padding: 16px;
17+
background: var(--terminal-bg);
18+
color: var(--text-color);
19+
font-family: var(--font-mono);
20+
line-height: 1.6;
21+
}
22+
23+
/* Terminal Header */
24+
.terminal-header {
25+
background: rgba(26, 26, 26, 0.95);
26+
padding: 1rem;
27+
position: fixed;
28+
width: 100%;
29+
top: 0;
30+
z-index: 1000;
31+
border-bottom: 1px solid var(--text-color);
32+
display: flex;
33+
align-items: center;
34+
}
35+
36+
.prompt {
37+
color: var(--text-color);
38+
margin-right: 1rem;
39+
}
40+
41+
.command-input {
42+
background: transparent;
43+
border: none;
44+
color: var(--text-color);
45+
font-family: var(--font-mono);
46+
font-size: 1rem;
47+
width: calc(100% - 120px);
48+
outline: none;
1349
}
1450

15-
a, a.visited, a.active {
16-
color: #ccc;
17-
font-weight: bold;
18-
text-decoration: none;
51+
.lang-option {
52+
color: gray;
1953
}
2054

21-
h1 {
55+
.lang-option a {
56+
color: var(--text-color);
57+
text-decoration: none;
58+
}
59+
60+
/* Hero Section */
61+
.hero {
62+
min-height: 100vh;
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
2266
text-align: center;
23-
font-size: 14px;
24-
font-weight: normal;
67+
padding: 6rem 2rem 2rem;
68+
position: relative;
69+
overflow: hidden;
2570
}
2671

27-
section {
28-
margin-bottom: 32px;
72+
.hero-background {
73+
position: absolute;
74+
top: 0;
75+
left: 0;
76+
width: 100%;
77+
height: 100%;
78+
background-size: cover;
79+
background-position: center;
80+
filter: grayscale(100%) brightness(0.3);
81+
opacity: 0;
82+
transition: opacity 1s ease-in-out;
2983
}
3084

31-
section > h2 {
32-
margin: 0;
33-
margin-bottom: 16px;
34-
font-size: 1rem;
85+
.hero-background.active {
86+
opacity: 1;
3587
}
3688

37-
section p {
38-
padding-left: 64px;
39-
margin: 0;
89+
.hero-overlay {
90+
position: absolute;
91+
top: 0;
92+
left: 0;
93+
width: 100%;
94+
height: 100%;
95+
background: rgba(0, 0, 0, 0.7);
96+
z-index: 1;
97+
}
98+
99+
.hero::before {
100+
content: '';
101+
position: absolute;
102+
top: 0;
103+
left: 0;
104+
width: 100%;
105+
height: 100%;
106+
background: repeating-linear-gradient(0deg,
107+
rgba(255, 255, 255, 0.03) 0px,
108+
rgba(255, 255, 255, 0.03) 1px,
109+
transparent 1px,
110+
transparent 2px);
111+
pointer-events: none;
112+
z-index: 2;
113+
}
114+
115+
.hero-content {
116+
max-width: 800px;
117+
z-index: 1;
40118
}
41119

42-
section > ul {
43-
list-style: none;
120+
.hero-logo {
121+
width: 40em;
122+
height: auto;
123+
margin-bottom: 2rem;
44124
}
45125

46-
section li {
47-
margin-bottom: 32px;
126+
.hero h1 {
127+
font-size: 2.5rem;
128+
margin-bottom: 1rem;
129+
font-family: var(--font-mono);
130+
}
131+
132+
.social-links-hero a i {
133+
padding-top: 1rem;
134+
font-size: 2rem;
135+
}
136+
137+
/* Features Grid */
138+
.features {
139+
padding: 4rem 2rem;
140+
background: var(--terminal-bg);
141+
}
142+
143+
.features-container {
144+
max-width: 1200px;
145+
margin: 0 auto;
146+
display: grid;
147+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
148+
gap: 2rem;
149+
}
150+
151+
.feature-card {
152+
border: 1px solid var(--text-color);
153+
padding: 2rem;
154+
transition: all 0.3s ease;
155+
position: relative;
156+
overflow: hidden;
157+
text-decoration: none;
158+
color: inherit;
159+
}
160+
161+
.feature-card::before {
162+
content: '';
163+
position: absolute;
164+
top: 0;
165+
left: 0;
166+
width: 100%;
167+
height: 4px;
168+
background: var(--accent-color);
169+
transform: scaleX(0);
170+
transform-origin: left;
171+
transition: transform 0.3s ease;
172+
}
173+
174+
.feature-card:hover::before {
175+
transform: scaleX(1);
176+
}
177+
178+
.feature-card h3 {
179+
margin-bottom: 1rem;
180+
color: var(--accent-color);
181+
}
182+
183+
/* Community Stats */
184+
.stats {
185+
padding: 4rem 2rem;
186+
text-align: center;
187+
background: rgba(255, 255, 255, 0.03);
188+
}
189+
190+
.stats-grid {
191+
display: grid;
192+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
193+
gap: 2rem;
194+
max-width: 1200px;
195+
margin: 0 auto;
196+
}
197+
198+
.stat-item h4 {
199+
font-size: 2.5rem;
200+
color: var(--accent-color);
201+
margin-bottom: 0.5rem;
202+
}
203+
204+
/* Nerdearla hero */
205+
.nerdearla-hero {
206+
min-height: 60vh;
207+
margin: 2rem 0;
208+
}
209+
210+
.nerdearla-bg {
211+
position: absolute;
212+
top: 0;
213+
left: 0;
214+
width: 100%;
215+
height: 100%;
216+
background-size: cover;
217+
background-position: center;
218+
filter: grayscale(100%) brightness(0.3);
219+
opacity: 0;
220+
transition: opacity 1s ease-in-out;
221+
}
222+
223+
.nerdearla-bg.active {
224+
opacity: 1;
225+
}
226+
227+
/* Call to Action */
228+
.cta {
229+
padding: 4rem 2rem;
230+
text-align: center;
231+
background: var(--terminal-bg);
232+
}
233+
234+
.cta-buttons {
235+
display: flex;
236+
gap: 1rem;
237+
justify-content: center;
238+
flex-wrap: wrap;
239+
margin-top: 2rem;
240+
}
241+
242+
.cta-button {
243+
padding: 1rem 2rem;
244+
background: transparent;
245+
border: 1px solid var(--text-color);
246+
color: var(--text-color);
247+
text-decoration: none;
248+
font-family: var(--font-mono);
249+
transition: all 0.3s ease;
250+
position: relative;
251+
overflow: hidden;
252+
}
253+
254+
.cta-button:hover {
255+
background: var(--text-color);
256+
color: var(--terminal-bg);
257+
}
258+
259+
/* Footer */
260+
footer {
261+
padding: 2rem;
262+
text-align: center;
263+
border-top: 1px solid var(--text-color);
264+
}
265+
266+
.social-links {
267+
display: flex;
268+
gap: 2rem;
269+
justify-content: center;
270+
margin-top: 2rem;
271+
}
272+
273+
.social-links a {
274+
transition: transform 0.3s ease;
275+
}
276+
277+
.social-links a:hover {
278+
transform: translateY(-3px);
279+
}
280+
281+
.social-links a {
282+
color: var(--text-color);
283+
text-decoration: none;
284+
transition: color 0.3s ease;
285+
}
286+
287+
.social-links a:hover {
288+
color: var(--accent-color);
289+
}
290+
291+
@media (max-width: 768px) {
292+
.hero h1 {
293+
font-size: 1.8rem;
294+
}
295+
296+
.features-container {
297+
grid-template-columns: 1fr;
298+
}
299+
300+
.stats-grid {
301+
grid-template-columns: 1fr;
302+
}
303+
304+
.hero-logo {
305+
max-width: 90vw;
306+
}
48307
}

0 commit comments

Comments
 (0)