Skip to content

Commit 08bca0e

Browse files
crim50ncrim50n
committed
feat: redesign index and policy pages with improved layout and styling
1 parent 4df1706 commit 08bca0e

File tree

3 files changed

+480
-287
lines changed

3 files changed

+480
-287
lines changed

‎docs/css/style.css‎

Lines changed: 262 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,262 @@
1+
:root {
2+
--primary-color: #667eea;
3+
--secondary-color: #764ba2;
4+
--accent-color: #ffd700;
5+
--bg-color: #0f172a;
6+
--text-color: #e2e8f0;
7+
--card-bg: rgba(30, 41, 59, 0.7);
8+
--card-border: rgba(148, 163, 184, 0.1);
9+
--font-main: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
10+
}
11+
12+
* {
13+
margin: 0;
14+
padding: 0;
15+
box-sizing: border-box;
16+
}
17+
18+
body {
19+
font-family: var(--font-main);
20+
background-color: var(--bg-color);
21+
color: var(--text-color);
22+
line-height: 1.6;
23+
overflow-x: hidden;
24+
}
25+
26+
/* Background Gradient Animation */
27+
body::before {
28+
content: '';
29+
position: fixed;
30+
top: 0;
31+
left: 0;
32+
width: 100%;
33+
height: 100%;
34+
background: radial-gradient(circle at 50% 0%, #2d1b4e 0%, var(--bg-color) 50%);
35+
z-index: -1;
36+
}
37+
38+
.container {
39+
max-width: 1200px;
40+
margin: 0 auto;
41+
padding: 0 20px;
42+
}
43+
44+
/* Header */
45+
header {
46+
padding: 20px 0;
47+
position: fixed;
48+
width: 100%;
49+
top: 0;
50+
z-index: 100;
51+
backdrop-filter: blur(10px);
52+
background: rgba(15, 23, 42, 0.8);
53+
border-bottom: 1px solid var(--card-border);
54+
}
55+
56+
nav {
57+
display: flex;
58+
justify-content: space-between;
59+
align-items: center;
60+
}
61+
62+
.logo {
63+
font-size: 1.5rem;
64+
font-weight: 700;
65+
color: white;
66+
text-decoration: none;
67+
display: flex;
68+
align-items: center;
69+
gap: 10px;
70+
}
71+
72+
.logo img {
73+
height: 32px;
74+
width: auto;
75+
}
76+
77+
.nav-links a {
78+
color: var(--text-color);
79+
text-decoration: none;
80+
margin-left: 20px;
81+
font-weight: 500;
82+
transition: color 0.3s;
83+
}
84+
85+
.nav-links a:hover {
86+
color: var(--primary-color);
87+
}
88+
89+
.btn-primary {
90+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
91+
color: white;
92+
padding: 10px 24px;
93+
border-radius: 50px;
94+
text-decoration: none;
95+
font-weight: 600;
96+
transition: transform 0.2s, box-shadow 0.2s;
97+
display: inline-block;
98+
}
99+
100+
.btn-primary:hover {
101+
transform: translateY(-2px);
102+
box-shadow: 0 4px 12px rgba(118, 75, 162, 0.4);
103+
}
104+
105+
/* Hero Section */
106+
.hero {
107+
padding: 160px 0 80px;
108+
text-align: center;
109+
display: flex;
110+
flex-direction: column;
111+
align-items: center;
112+
}
113+
114+
.hero-icon {
115+
width: 120px;
116+
height: 120px;
117+
border-radius: 24px;
118+
margin-bottom: 30px;
119+
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
120+
animation: float 6s ease-in-out infinite;
121+
}
122+
123+
@keyframes float {
124+
0% { transform: translateY(0px); }
125+
50% { transform: translateY(-10px); }
126+
100% { transform: translateY(0px); }
127+
}
128+
129+
.hero h1 {
130+
font-size: 3.5rem;
131+
font-weight: 800;
132+
margin-bottom: 20px;
133+
background: linear-gradient(to right, #fff, #a5b4fc);
134+
-webkit-background-clip: text;
135+
-webkit-text-fill-color: transparent;
136+
line-height: 1.2;
137+
}
138+
139+
.hero p {
140+
font-size: 1.25rem;
141+
color: #94a3b8;
142+
max-width: 600px;
143+
margin: 0 auto 40px;
144+
}
145+
146+
.hero-buttons {
147+
display: flex;
148+
gap: 20px;
149+
justify-content: center;
150+
margin-bottom: 60px;
151+
}
152+
153+
.btn-secondary {
154+
background: rgba(255, 255, 255, 0.1);
155+
color: white;
156+
padding: 10px 24px;
157+
border-radius: 50px;
158+
text-decoration: none;
159+
font-weight: 600;
160+
transition: background 0.3s;
161+
border: 1px solid rgba(255, 255, 255, 0.1);
162+
}
163+
164+
.btn-secondary:hover {
165+
background: rgba(255, 255, 255, 0.2);
166+
}
167+
168+
.hero-image {
169+
max-width: 100%;
170+
border-radius: 20px;
171+
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
172+
border: 1px solid var(--card-border);
173+
margin-top: 40px;
174+
}
175+
176+
/* Features Grid */
177+
.features {
178+
padding: 80px 0;
179+
}
180+
181+
.section-title {
182+
text-align: center;
183+
font-size: 2.5rem;
184+
margin-bottom: 60px;
185+
color: white;
186+
}
187+
188+
.features-grid {
189+
display: grid;
190+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
191+
gap: 30px;
192+
}
193+
194+
.feature-card {
195+
background: var(--card-bg);
196+
border: 1px solid var(--card-border);
197+
padding: 30px;
198+
border-radius: 20px;
199+
transition: transform 0.3s;
200+
}
201+
202+
.feature-card:hover {
203+
transform: translateY(-5px);
204+
border-color: var(--primary-color);
205+
}
206+
207+
.feature-icon {
208+
font-size: 2rem;
209+
margin-bottom: 20px;
210+
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
211+
-webkit-background-clip: text;
212+
-webkit-text-fill-color: transparent;
213+
}
214+
215+
.feature-card h3 {
216+
font-size: 1.5rem;
217+
margin-bottom: 15px;
218+
color: white;
219+
}
220+
221+
.feature-card p {
222+
color: #94a3b8;
223+
}
224+
225+
/* Footer */
226+
footer {
227+
padding: 60px 0 30px;
228+
border-top: 1px solid var(--card-border);
229+
margin-top: 80px;
230+
text-align: center;
231+
color: #64748b;
232+
}
233+
234+
.footer-links {
235+
margin-bottom: 30px;
236+
}
237+
238+
.footer-links a {
239+
color: #94a3b8;
240+
text-decoration: none;
241+
margin: 0 15px;
242+
transition: color 0.3s;
243+
}
244+
245+
.footer-links a:hover {
246+
color: var(--primary-color);
247+
}
248+
249+
/* Responsive */
250+
@media (max-width: 768px) {
251+
.hero h1 {
252+
font-size: 2.5rem;
253+
}
254+
255+
.hero-buttons {
256+
flex-direction: column;
257+
}
258+
259+
.nav-links {
260+
display: none; /* Simple mobile menu hide for now */
261+
}
262+
}

0 commit comments

Comments
 (0)