Skip to content

Commit a8a4a47

Browse files
MeMMa137MeMMa137
authored
Merge pull request #10 from hackclub/main_ui
ADD - prj and shop assets
2 parents 6acdc83 + 4891776 commit a8a4a47

20 files changed

Lines changed: 897 additions & 1 deletion

‎client/src/App.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import { Hero } from "./components/Hero.jsx";
22
import { MainPage } from "./components/MainPage.jsx";
3+
import { ProjectsPage } from "./components/ProjectsPage.jsx";
4+
import { ShopPage } from "./components/ShopPage.jsx";
35
import { TestPage } from "./components/TestPage.jsx";
46

57
export default function App() {
@@ -13,5 +15,13 @@ export default function App() {
1315
return <TestPage />;
1416
}
1517

18+
if (pathname === "/projects") {
19+
return <ProjectsPage />;
20+
}
21+
22+
if (pathname === "/shop") {
23+
return <ShopPage />;
24+
}
25+
1626
return <Hero />;
1727
}

‎client/src/components/MainPage.css‎

Lines changed: 225 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,232 @@
77
}
88

99
.platform-main__background {
10-
display: block;
10+
position: absolute;
11+
inset: 0;
1112
width: 100%;
1213
height: 100%;
1314
object-fit: cover;
15+
z-index: 0;
16+
}
17+
18+
.platform-main__status {
19+
position: absolute;
20+
top: 1.2rem;
21+
left: 1.2rem;
22+
width: min(30rem, 42vw);
23+
z-index: 3;
24+
}
25+
26+
.platform-main__status-frame {
27+
width: 100%;
28+
display: block;
29+
}
30+
31+
.platform-main__status-avatar {
32+
position: absolute;
33+
width: 14%;
34+
aspect-ratio: 1 / 1;
35+
top: 18%;
36+
left: 4%;
37+
border-radius: 999px;
38+
object-fit: cover;
39+
}
40+
41+
.platform-main__status-content {
42+
position: absolute;
43+
top: 20%;
44+
left: 21%;
45+
right: 6%;
46+
display: grid;
47+
gap: 0.45rem;
48+
}
49+
50+
.platform-main__status-row {
51+
display: flex;
52+
align-items: center;
53+
}
54+
55+
.platform-main__icon {
56+
display: block;
57+
max-width: 100%;
58+
}
59+
60+
.platform-main__icon--coin {
61+
width: 7.8rem;
62+
}
63+
64+
.platform-main__icon--hearts {
65+
width: 8.5rem;
66+
}
67+
68+
.platform-main__status-text {
69+
margin-left: 0.45rem;
70+
color: #4bb3ff;
71+
font-size: clamp(1.1rem, 1.5vw, 1.55rem);
72+
line-height: 1;
73+
}
74+
75+
.platform-main__nav {
76+
position: absolute;
77+
inset: 0;
78+
z-index: 2;
79+
}
80+
81+
.platform-main__block {
82+
position: absolute;
83+
display: inline-flex;
84+
align-items: center;
85+
justify-content: center;
86+
text-decoration: none;
87+
color: #f7cf57;
88+
font-size: clamp(1.6rem, 3vw, 3rem);
89+
letter-spacing: 0.02em;
90+
text-shadow: 0 2px 0 #8d1f38;
91+
border-radius: 16px;
92+
background: linear-gradient(140deg, #ffe9bd 0%, #d8d2c8 100%);
93+
border: 4px dashed rgba(109, 104, 98, 0.85);
94+
box-shadow: 0 14px 0 rgba(85, 81, 76, 0.4);
95+
transform: rotate(-14deg);
96+
transition: transform 150ms ease, box-shadow 150ms ease;
97+
}
98+
99+
.platform-main__block span {
100+
transform: rotate(0deg);
101+
}
102+
103+
.platform-main__block:hover {
104+
transform: rotate(-14deg) translateY(-4px);
105+
box-shadow: 0 18px 0 rgba(85, 81, 76, 0.36);
106+
}
107+
108+
.platform-main__block:focus-visible {
109+
outline: 3px solid #1d55c9;
110+
outline-offset: 4px;
111+
}
112+
113+
.platform-main__block--shop {
114+
top: 30%;
115+
left: 20%;
116+
width: min(18rem, 24vw);
117+
height: min(10rem, 15vw);
118+
}
119+
120+
.platform-main__block--user {
121+
top: 28%;
122+
left: 57%;
123+
width: min(18rem, 24vw);
124+
height: min(10rem, 15vw);
125+
}
126+
127+
.platform-main__block--projects {
128+
top: 56%;
129+
left: 39%;
130+
width: min(18rem, 24vw);
131+
height: min(10rem, 15vw);
132+
}
133+
134+
.platform-main__block--faq {
135+
top: 55%;
136+
left: 73%;
137+
width: min(18rem, 24vw);
138+
height: min(10rem, 15vw);
139+
}
140+
141+
@media (max-width: 900px) {
142+
.platform-main__status {
143+
width: min(26rem, 72vw);
144+
}
145+
146+
.platform-main__block {
147+
font-size: clamp(1.3rem, 5vw, 2.4rem);
148+
}
149+
150+
.platform-main__block--shop {
151+
top: 29%;
152+
left: 11%;
153+
width: 36vw;
154+
height: 18vw;
155+
}
156+
157+
.platform-main__block--user {
158+
top: 29%;
159+
left: 53%;
160+
width: 36vw;
161+
height: 18vw;
162+
}
163+
164+
.platform-main__block--projects {
165+
top: 55%;
166+
left: 29%;
167+
width: 36vw;
168+
height: 18vw;
169+
}
170+
171+
.platform-main__block--faq {
172+
top: 55%;
173+
left: 63%;
174+
width: 33vw;
175+
height: 18vw;
176+
}
177+
}
178+
179+
@media (max-width: 640px) {
180+
.platform-main {
181+
min-height: 100dvh;
182+
}
183+
184+
.platform-main__status {
185+
width: min(22rem, 85vw);
186+
top: 0.8rem;
187+
left: 0.8rem;
188+
}
189+
190+
.platform-main__status-content {
191+
gap: 0.2rem;
192+
}
193+
194+
.platform-main__icon--coin {
195+
width: 6rem;
196+
}
197+
198+
.platform-main__icon--hearts {
199+
width: 6.6rem;
200+
}
201+
202+
.platform-main__block {
203+
transform: rotate(-9deg);
204+
box-shadow: 0 10px 0 rgba(85, 81, 76, 0.4);
205+
}
206+
207+
.platform-main__block:hover {
208+
transform: rotate(-9deg) translateY(-2px);
209+
}
210+
211+
.platform-main__block--shop,
212+
.platform-main__block--user,
213+
.platform-main__block--projects,
214+
.platform-main__block--faq {
215+
width: 43vw;
216+
height: 20vw;
217+
}
218+
219+
.platform-main__block--shop {
220+
top: 27%;
221+
left: 6%;
222+
}
223+
224+
.platform-main__block--user {
225+
top: 27%;
226+
left: 51%;
227+
}
228+
229+
.platform-main__block--projects {
230+
top: 52%;
231+
left: 14%;
232+
}
233+
234+
.platform-main__block--faq {
235+
top: 52%;
236+
left: 57%;
237+
}
14238
}

‎client/src/components/MainPage.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import platformBackground from "@assets/platform/main/bkg.png";
2+
import profileFrame from "@assets/platform/main/pfp_bar_square.png";
3+
import profilePicture from "@assets/platform/main/pfp.png";
4+
import coinIcon from "@assets/platform/main/coin.png";
5+
import heartsIcon from "@assets/platform/main/hearts.png";
26
import "./MainPage.css";
37

8+
const navBlocks = [
9+
{ label: "Shop", path: "/shop", className: "platform-main__block--shop" },
10+
{ label: "User Area", path: "/user", className: "platform-main__block--user" },
11+
{ label: "Projects", path: "/projects", className: "platform-main__block--projects" },
12+
{ label: "FAQ", path: "/faq", className: "platform-main__block--faq" },
13+
];
14+
415
export function MainPage() {
516
return (
617
<main className="platform-main" aria-label="Platform main page">
@@ -10,6 +21,26 @@ export function MainPage() {
1021
alt=""
1122
aria-hidden="true"
1223
/>
24+
<section className="platform-main__status" aria-label="User status">
25+
<img className="platform-main__status-frame" src={profileFrame} alt="" aria-hidden="true" />
26+
<img className="platform-main__status-avatar" src={profilePicture} alt="User avatar" />
27+
<div className="platform-main__status-content">
28+
<div className="platform-main__status-row">
29+
<img className="platform-main__icon platform-main__icon--coin" src={coinIcon} alt="" aria-hidden="true" />
30+
<span className="platform-main__status-text">1234</span>
31+
</div>
32+
<div className="platform-main__status-row">
33+
<img className="platform-main__icon platform-main__icon--hearts" src={heartsIcon} alt="" aria-hidden="true" />
34+
</div>
35+
</div>
36+
</section>
37+
<nav className="platform-main__nav" aria-label="Main navigation">
38+
{navBlocks.map((block) => (
39+
<a key={block.path} className={`platform-main__block ${block.className}`} href={block.path}>
40+
<span>{block.label}</span>
41+
</a>
42+
))}
43+
</nav>
1344
</main>
1445
);
1546
}

0 commit comments

Comments
 (0)