Skip to content

Commit 710b2e6

Browse files
sashamilenkovicsashamilenkovic
committed
style: changes inline styles to css classes in react
1 parent 52e9629 commit 710b2e6

File tree

5 files changed

+533
-339
lines changed

5 files changed

+533
-339
lines changed

‎frameworks/react/JS/src/pages/HomePage.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
.homepage {
2+
background-color: #efebe7;
3+
min-height: 100vh;
4+
padding: 2rem 0;
5+
}
6+
7+
.homepage-container {
8+
max-width: 1200px;
9+
margin: 0 auto;
10+
padding: 0 2rem;
11+
}
12+
13+
.homepage-logo {
14+
text-align: center;
15+
margin-bottom: 2rem;
16+
}
17+
18+
.homepage-logo svg {
19+
max-width: 208px;
20+
margin: 0 auto;
21+
}
22+
23+
.homepage-header {
24+
text-align: center;
25+
margin-bottom: 3rem;
26+
}
27+
28+
.homepage-title {
29+
font-size: 2.5rem;
30+
font-weight: 600;
31+
margin: 0 0 2rem 0;
32+
color: #1a1414;
33+
}
34+
35+
.homepage-tech-stack {
36+
margin-bottom: 2rem;
37+
}
38+
39+
.tech-item {
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
gap: 0.75rem;
44+
margin-bottom: 1rem;
45+
}
46+
47+
.react-title {
48+
margin: 0;
49+
font-size: 1.8rem;
50+
color: #61dafb;
51+
}
52+
53+
.nutrient-title {
54+
margin: 0;
55+
font-size: 1.8rem;
56+
color: #1a1414;
57+
}
58+
59+
.tech-plus-container {
60+
display: flex;
61+
justify-content: center;
62+
align-items: center;
63+
margin: 1.5rem 0;
64+
}
65+
66+
.tech-plus {
67+
font-size: 2rem;
68+
font-weight: 300;
69+
color: #888;
70+
}
71+
72+
.homepage-subtitle {
73+
font-size: 1.1rem;
74+
color: #666;
75+
margin-bottom: 3rem;
76+
}
77+
78+
.examples-grid {
79+
display: grid;
80+
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
81+
gap: 2rem;
82+
}
83+
84+
.example-card {
85+
border: 1px solid #ddd;
86+
border-radius: 12px;
87+
padding: 2rem;
88+
background-color: white;
89+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
90+
transition: all 0.3s ease;
91+
display: flex;
92+
flex-direction: column;
93+
height: 100%;
94+
}
95+
96+
.example-card:hover {
97+
transform: translateY(-4px);
98+
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
99+
}
100+
101+
.example-title {
102+
margin: 0 0 1rem 0;
103+
}
104+
105+
.example-description {
106+
color: #666;
107+
margin-bottom: 1rem;
108+
}
109+
110+
.features-title {
111+
font-size: 0.9rem;
112+
margin: 1rem 0 0.5rem 0;
113+
}
114+
115+
.features-list {
116+
font-size: 0.9rem;
117+
color: #555;
118+
}
119+
120+
.button-container {
121+
margin-top: auto;
122+
padding-top: 1rem;
123+
}
124+
125+
.view-button {
126+
display: inline-block;
127+
width: 100%;
128+
padding: 0.75rem 1rem;
129+
background-color: #c2b8ae;
130+
color: white;
131+
text-decoration: none;
132+
border-radius: 8px;
133+
font-size: 0.9rem;
134+
font-weight: 500;
135+
text-align: center;
136+
transition: all 0.2s ease;
137+
border: none;
138+
box-sizing: border-box;
139+
}
140+
141+
.view-button:hover {
142+
background-color: #d4cbc4;
143+
transform: translateY(-1px);
144+
}
145+
146+
.homepage-footer {
147+
text-align: center;
148+
margin-top: 3rem;
149+
color: #666;
150+
}

‎frameworks/react/JS/src/pages/HomePage.jsx‎

Lines changed: 23 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Link } from "react-router-dom";
2+
import "./HomePage.css";
23

34
function HomePage() {
45
const examples = [
@@ -33,28 +34,15 @@ function HomePage() {
3334
];
3435

3536
return (
36-
<div
37-
style={{
38-
backgroundColor: "#efebe7",
39-
minHeight: "100vh",
40-
padding: "2rem 0",
41-
}}
42-
>
43-
<div
44-
style={{
45-
maxWidth: "1200px",
46-
margin: "0 auto",
47-
padding: "0 2rem",
48-
}}
49-
>
50-
<div style={{ textAlign: "center", marginBottom: "2rem" }}>
37+
<div className="homepage">
38+
<div className="homepage-container">
39+
<div className="homepage-logo">
5140
<svg
5241
width="100%"
5342
height="36"
5443
viewBox="0 0 208 36"
5544
fill="none"
5645
xmlns="http://www.w3.org/2000/svg"
57-
style={{ maxWidth: "208px", margin: "0 auto" }}
5846
role="img"
5947
aria-label="Nutrient logo"
6048
>
@@ -68,27 +56,10 @@ function HomePage() {
6856
/>
6957
</svg>
7058
</div>
71-
<header style={{ textAlign: "center", marginBottom: "3rem" }}>
72-
<h1
73-
style={{
74-
fontSize: "2.5rem",
75-
fontWeight: "600",
76-
margin: "0 0 2rem 0",
77-
color: "#1A1414",
78-
}}
79-
>
80-
JavaScript Examples
81-
</h1>
82-
<div style={{ marginBottom: "2rem" }}>
83-
<div
84-
style={{
85-
display: "flex",
86-
alignItems: "center",
87-
justifyContent: "center",
88-
gap: "0.75rem",
89-
marginBottom: "1rem",
90-
}}
91-
>
59+
<header className="homepage-header">
60+
<h1 className="homepage-title">JavaScript Examples</h1>
61+
<div className="homepage-tech-stack">
62+
<div className="tech-item">
9263
<svg
9364
width="40"
9465
height="40"
@@ -103,38 +74,14 @@ function HomePage() {
10374
<ellipse rx="11" ry="4.2" transform="rotate(120)" />
10475
</g>
10576
</svg>
106-
<h2 style={{ margin: 0, fontSize: "1.8rem", color: "#61dafb" }}>
107-
React
108-
</h2>
77+
<h2 className="react-title">React</h2>
10978
</div>
11079

111-
<div
112-
style={{
113-
display: "flex",
114-
justifyContent: "center",
115-
alignItems: "center",
116-
margin: "1.5rem 0",
117-
}}
118-
>
119-
<div
120-
style={{
121-
fontSize: "2rem",
122-
fontWeight: "300",
123-
color: "#888",
124-
}}
125-
>
126-
+
127-
</div>
80+
<div className="tech-plus-container">
81+
<div className="tech-plus">+</div>
12882
</div>
12983

130-
<div
131-
style={{
132-
display: "flex",
133-
alignItems: "center",
134-
justifyContent: "center",
135-
gap: "0.75rem",
136-
}}
137-
>
84+
<div className="tech-item">
13885
<svg
13986
width="60"
14087
height="45"
@@ -153,98 +100,35 @@ function HomePage() {
153100
fill="#1A1414"
154101
/>
155102
</svg>
156-
<h2 style={{ margin: 0, fontSize: "1.8rem", color: "#1A1414" }}>
157-
Nutrient
158-
</h2>
103+
<h2 className="nutrient-title">Nutrient</h2>
159104
</div>
160105
</div>
161-
<p
162-
style={{ fontSize: "1.1rem", color: "#666", marginBottom: "3rem" }}
163-
>
164-
Select an example to get started
165-
</p>
106+
<p className="homepage-subtitle">Select an example to get started</p>
166107
</header>
167108

168-
<div
169-
style={{
170-
display: "grid",
171-
gridTemplateColumns: "repeat(auto-fit, minmax(350px, 1fr))",
172-
gap: "2rem",
173-
}}
174-
>
109+
<div className="examples-grid">
175110
{examples.map((example) => (
176-
<div
177-
key={example.path}
178-
style={{
179-
border: "1px solid #ddd",
180-
borderRadius: "12px",
181-
padding: "2rem",
182-
backgroundColor: "white",
183-
boxShadow: "0 4px 20px rgba(0,0,0,0.08)",
184-
transition: "all 0.3s ease",
185-
display: "flex",
186-
flexDirection: "column",
187-
height: "100%",
188-
}}
189-
onMouseEnter={(e) => {
190-
e.currentTarget.style.transform = "translateY(-4px)";
191-
e.currentTarget.style.boxShadow = "0 8px 30px rgba(0,0,0,0.12)";
192-
}}
193-
onMouseLeave={(e) => {
194-
e.currentTarget.style.transform = "translateY(0)";
195-
e.currentTarget.style.boxShadow = "0 4px 20px rgba(0,0,0,0.08)";
196-
}}
197-
>
198-
<h3 style={{ margin: "0 0 1rem 0" }}>{example.title}</h3>
199-
<p style={{ color: "#666", marginBottom: "1rem" }}>
200-
{example.description}
201-
</p>
111+
<div key={example.path} className="example-card">
112+
<h3 className="example-title">{example.title}</h3>
113+
<p className="example-description">{example.description}</p>
202114

203-
<h4 style={{ fontSize: "0.9rem", margin: "1rem 0 0.5rem 0" }}>
204-
Features:
205-
</h4>
206-
<ul style={{ fontSize: "0.9rem", color: "#555" }}>
115+
<h4 className="features-title">Features:</h4>
116+
<ul className="features-list">
207117
{example.features.map((feature) => (
208118
<li key={feature}>{feature}</li>
209119
))}
210120
</ul>
211121

212-
<div style={{ marginTop: "auto", paddingTop: "1rem" }}>
213-
<Link
214-
to={example.path}
215-
style={{
216-
display: "inline-block",
217-
width: "100%",
218-
padding: "0.75rem 1rem",
219-
backgroundColor: "#c2b8ae",
220-
color: "white",
221-
textDecoration: "none",
222-
borderRadius: "8px",
223-
fontSize: "0.9rem",
224-
fontWeight: "500",
225-
textAlign: "center",
226-
transition: "all 0.2s ease",
227-
border: "none",
228-
}}
229-
onMouseEnter={(e) => {
230-
e.currentTarget.style.backgroundColor = "#d4cbc4";
231-
e.currentTarget.style.transform = "translateY(-1px)";
232-
}}
233-
onMouseLeave={(e) => {
234-
e.currentTarget.style.backgroundColor = "#c2b8ae";
235-
e.currentTarget.style.transform = "translateY(0)";
236-
}}
237-
>
122+
<div className="button-container">
123+
<Link to={example.path} className="view-button">
238124
View
239125
</Link>
240126
</div>
241127
</div>
242128
))}
243129
</div>
244130

245-
<footer
246-
style={{ textAlign: "center", marginTop: "3rem", color: "#666" }}
247-
>
131+
<footer className="homepage-footer">
248132
<p>
249133
Learn more:{" "}
250134
<a

0 commit comments

Comments
 (0)