Skip to content

Commit 6b4a4c8

Browse files
Iron-56Iron-56
committed
Added component
1 parent 6481763 commit 6b4a4c8

File tree

10 files changed

+530
-12
lines changed

10 files changed

+530
-12
lines changed

‎src/App.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ import './App.css';
33
import Footer from './components/Footer';
44
import Header from './components/Header/Header';
55
import Description from './components/description';
6-
6+
import HeroStats from './components/HeroStats/HeroStats';
77
import RegistrationForm from './components/RegistrationForm/RegistrationForm';
8+
import ParticleBackground from './components/ParticleBackground/ParticleBackground';
89

910
function App() {
1011
return (
1112
<div className="App scroll-container">
13+
<ParticleBackground />
1214
<Header />
1315
<Description />
14-
{/* <Prizes/> */}
16+
<HeroStats />
1517
<RegistrationForm />
1618
<Footer />
1719
</div>

‎src/components/Footer.js‎

Lines changed: 10 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/HeroStats/HeroStats.css‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
.hero-stats-container {
2+
width: 90%;
3+
padding: 4rem 2rem;
4+
/* background: linear-gradient(135deg, #1a1a1a 0%, transparent); */
5+
position: relative;
6+
overflow: hidden;
7+
}
8+
9+
.hero-stats-container::before {
10+
content: '';
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
right: 0;
15+
bottom: 0;
16+
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
17+
opacity: 0.3;
18+
pointer-events: none;
19+
}
20+
21+
.stats-grid {
22+
max-width: 1200px;
23+
margin: 0 auto;
24+
display: grid;
25+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
26+
gap: 2rem;
27+
position: relative;
28+
z-index: 1;
29+
}
30+
31+
.stat-card {
32+
background: rgba(255, 255, 255, 0.1);
33+
backdrop-filter: blur(10px);
34+
border: 1px solid rgba(255, 255, 255, 0.2);
35+
border-radius: 16px;
36+
padding: 2rem 1.5rem;
37+
text-align: center;
38+
transition: all 0.3s ease;
39+
position: relative;
40+
overflow: hidden;
41+
}
42+
43+
.stat-card::before {
44+
content: '';
45+
position: absolute;
46+
top: 0;
47+
left: -100%;
48+
width: 100%;
49+
height: 100%;
50+
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
51+
transition: left 0.6s ease;
52+
}
53+
54+
.stat-card:hover {
55+
transform: translateY(-8px);
56+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
57+
border-color: var(--primary-color);
58+
}
59+
60+
.stat-card:hover::before {
61+
left: 100%;
62+
}
63+
64+
.stat-icon {
65+
width: 60px;
66+
height: 60px;
67+
margin: 0 auto 1rem;
68+
padding: 12px;
69+
background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
70+
border-radius: 50%;
71+
display: flex;
72+
align-items: center;
73+
justify-content: center;
74+
transition: all 0.3s ease;
75+
}
76+
77+
.stat-card:hover .stat-icon {
78+
transform: scale(1.1) rotate(5deg);
79+
background: linear-gradient(135deg, var(--primary-color), var(--primary-color));
80+
}
81+
82+
.icon {
83+
width: 100%;
84+
height: 100%;
85+
color: white;
86+
}
87+
88+
.stat-number {
89+
font-size: 3rem;
90+
font-weight: 900;
91+
color: #ffffff;
92+
margin-bottom: 0.5rem;
93+
background: linear-gradient(135deg, var(--primary-color), #ffffff);
94+
-webkit-background-clip: text;
95+
-webkit-text-fill-color: transparent;
96+
background-clip: text;
97+
/* text-shadow: 0 2px 10px var(--primary-color); */
98+
transition: all 0.3s ease;
99+
}
100+
101+
.stat-card:hover .stat-number {
102+
transform: scale(1.05);
103+
text-shadow: 0 4px 20px rgba(107, 142, 255, 0.5);
104+
}
105+
106+
.stat-label {
107+
font-size: 1rem;
108+
color: rgba(255, 255, 255, 0.9);
109+
font-weight: 500;
110+
line-height: 1.4;
111+
text-transform: uppercase;
112+
letter-spacing: 0.5px;
113+
transition: color 0.3s ease;
114+
}
115+
116+
.stat-card:hover .stat-label {
117+
color: #ffffff;
118+
}
119+
120+
/* Responsive Design */
121+
@media (max-width: 768px) {
122+
.hero-stats-container {
123+
padding: 3rem 1rem;
124+
}
125+
126+
.stats-grid {
127+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
128+
gap: 1.5rem;
129+
}
130+
131+
.stat-card {
132+
padding: 1.5rem 1rem;
133+
}
134+
135+
.stat-number {
136+
font-size: 2.5rem;
137+
}
138+
139+
.stat-label {
140+
font-size: 0.9rem;
141+
}
142+
143+
.stat-icon {
144+
width: 50px;
145+
height: 50px;
146+
padding: 10px;
147+
}
148+
}
149+
150+
@media (max-width: 480px) {
151+
.hero-stats-container {
152+
padding: 2rem 1rem;
153+
}
154+
155+
.stats-grid {
156+
grid-template-columns: 1fr;
157+
gap: 1rem;
158+
}
159+
160+
.stat-number {
161+
font-size: 2rem;
162+
}
163+
164+
.stat-label {
165+
font-size: 0.8rem;
166+
}
167+
}
168+
169+
/* Animation for stats appearing */
170+
.stat-card {
171+
opacity: 0;
172+
transform: translateY(30px);
173+
animation: fadeInUp 0.6s ease forwards;
174+
}
175+
176+
.stat-card:nth-child(1) { animation-delay: 0.1s; }
177+
.stat-card:nth-child(2) { animation-delay: 0.2s; }
178+
.stat-card:nth-child(3) { animation-delay: 0.3s; }
179+
.stat-card:nth-child(4) { animation-delay: 0.4s; }
180+
181+
@keyframes fadeInUp {
182+
to {
183+
opacity: 1;
184+
transform: translateY(0);
185+
}
186+
}

‎src/components/HeroStats/HeroStats.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import './HeroStats.css';
3+
4+
function HeroStats() {
5+
return (
6+
<div className="hero-stats-container">
7+
<div className="stats-grid">
8+
<div className="stat-card">
9+
<div className="stat-icon">
10+
<svg viewBox="0 0 24 24" fill="currentColor" className="icon">
11+
<path d="M12 0C5.374 0 0 5.373 0 12 0 17.302 3.438 21.8 8.207 23.387c.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/>
12+
</svg>
13+
</div>
14+
<div className="stat-number">31</div>
15+
<div className="stat-label">Days of Open Source</div>
16+
</div>
17+
18+
<div className="stat-card">
19+
<div className="stat-icon">
20+
<svg viewBox="0 0 24 24" fill="currentColor" className="icon">
21+
<path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z"/>
22+
</svg>
23+
</div>
24+
<div className="stat-number">4</div>
25+
<div className="stat-label">Pull Requests to Win</div>
26+
</div>
27+
28+
<div className="stat-card">
29+
<div className="stat-icon">
30+
<svg viewBox="0 0 24 24" fill="currentColor" className="icon">
31+
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-1 16H9V7h9v14z"/>
32+
</svg>
33+
</div>
34+
<div className="stat-number">100+</div>
35+
<div className="stat-label">Participating Repositories</div>
36+
</div>
37+
38+
<div className="stat-card">
39+
<div className="stat-icon">
40+
<svg viewBox="0 0 24 24" fill="currentColor" className="icon">
41+
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
42+
</svg>
43+
</div>
44+
<div className="stat-number">500+</div>
45+
<div className="stat-label">Expected Participants</div>
46+
</div>
47+
</div>
48+
</div>
49+
);
50+
}
51+
52+
export default HeroStats;

0 commit comments

Comments
 (0)