Skip to content

Commit e6a68ad

Browse files
MeMMa137MeMMa137
committed
UPDATE - landing page items + website lock removed
1 parent 6f2d1a9 commit e6a68ad

8 files changed

Lines changed: 195 additions & 81 deletions

File tree

‎client/src/components/BrickModel.jsx‎

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,14 @@ import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
44
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
55
import brickMtlUrl from "@assets/mainPage/section_1/3D_brick_fusion/brick_main.mtl?url";
66
import brickObjUrl from "@assets/mainPage/section_1/3D_brick_fusion/brick_main.obj?url";
7-
export function BrickModel() {
7+
8+
const DEFAULT_BRICK_ROTATION = { x: -0.52, y: 0.38, z: 0.02 };
9+
10+
export function BrickModel({ rotation = DEFAULT_BRICK_ROTATION }) {
811
const containerRef = useRef(null);
12+
const rotationX = Number.isFinite(rotation?.x) ? rotation.x : DEFAULT_BRICK_ROTATION.x;
13+
const rotationY = Number.isFinite(rotation?.y) ? rotation.y : DEFAULT_BRICK_ROTATION.y;
14+
const rotationZ = Number.isFinite(rotation?.z) ? rotation.z : DEFAULT_BRICK_ROTATION.z;
915

1016
useEffect(() => {
1117
const container = containerRef.current;
@@ -23,7 +29,7 @@ export function BrickModel() {
2329

2430
const modelRoot = new THREE.Group();
2531
modelRoot.position.set(-0.28, 0.22, 0);
26-
modelRoot.rotation.set(-0.18, -0.38, 0.02);
32+
modelRoot.rotation.set(rotationX, rotationY, rotationZ);
2733
scene.add(modelRoot);
2834

2935
const ambient = new THREE.AmbientLight(0xffffff, 1.25);
@@ -37,8 +43,8 @@ export function BrickModel() {
3743
fillLight.position.set(-4, 1.5, 3);
3844
scene.add(fillLight);
3945

40-
const targetRotation = new THREE.Vector2(-0.38, -0.52);
41-
const currentRotation = new THREE.Vector2(-0.38, -0.52);
46+
const targetRotation = new THREE.Vector2(rotationY, rotationX);
47+
const currentRotation = new THREE.Vector2(rotationY, rotationX);
4248
const dragState = {
4349
active: false,
4450
pointerId: null,
@@ -130,6 +136,7 @@ export function BrickModel() {
130136
currentRotation.y += (targetRotation.y - currentRotation.y) * 0.08;
131137
modelRoot.rotation.y = currentRotation.x;
132138
modelRoot.rotation.x = currentRotation.y;
139+
modelRoot.rotation.z = rotationZ;
133140

134141
renderer.render(scene, camera);
135142
frameId = window.requestAnimationFrame(animate);
@@ -155,7 +162,7 @@ export function BrickModel() {
155162
}
156163
});
157164
};
158-
}, []);
165+
}, [rotationX, rotationY, rotationZ]);
159166

160167
return <div ref={containerRef} className="hero__brick-model" aria-label="Interactive LEGO brick model" />;
161168
}

‎client/src/components/FaqList.css‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
.stack-faq-list {
2+
display: grid;
3+
gap: clamp(0.8rem, 2svh, 1.3rem);
4+
color: #8d1f38;
5+
}
6+
7+
.stack-faq-list__item {
8+
border-bottom: clamp(4px, 0.65vw, 8px) solid #f7f53d;
9+
padding-bottom: clamp(0.45rem, 1svh, 0.75rem);
10+
}
11+
12+
.stack-faq-list__item summary {
13+
cursor: pointer;
14+
list-style: none;
15+
color: #fff;
16+
font-size: clamp(1.1rem, min(2vw, 2.8svh), 1.8rem);
17+
line-height: 1.15;
18+
-webkit-text-stroke: clamp(1px, 0.035em, 2px) #162456;
19+
paint-order: stroke fill;
20+
filter: drop-shadow(2px 3px 0 rgba(22, 36, 86, 0.18));
21+
}
22+
23+
.stack-faq-list__item summary::-webkit-details-marker {
24+
display: none;
25+
}
26+
27+
.stack-faq-list__item summary::after {
28+
content: " +";
29+
}
30+
31+
.stack-faq-list__item[open] summary::after {
32+
content: " -";
33+
}
34+
35+
.stack-faq-list__answer {
36+
margin-top: 0.7rem;
37+
border: 3px solid #8d1f38;
38+
border-radius: 14px;
39+
padding: 0.85rem 1rem;
40+
background: rgba(255, 248, 216, 0.92);
41+
color: #7a1b2d;
42+
font-size: clamp(0.9rem, min(1.25vw, 2svh), 1.12rem);
43+
line-height: 1.35;
44+
text-align: left;
45+
box-shadow: 5px 5px 0 rgba(141, 31, 56, 0.35);
46+
}
47+
48+
.stack-faq-list__answer p {
49+
margin: 0 0 0.65rem;
50+
}
51+
52+
.stack-faq-list__answer p:last-child {
53+
margin-bottom: 0;
54+
}
55+
56+
.stack-faq-list__answer ul {
57+
margin: 0.35rem 0 0.75rem;
58+
padding-left: 1.1rem;
59+
}
60+
61+
.stack-faq-list__answer li {
62+
margin: 0.22rem 0;
63+
}
64+
65+
.stack-faq-list__answer a {
66+
color: #1b4cc0;
67+
font-weight: 800;
68+
}

‎client/src/components/FaqList.jsx‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import "./FaqList.css";
2+
3+
export function FaqList({ className = "" }) {
4+
return (
5+
<div className={`stack-faq-list ${className}`.trim()}>
6+
<details className="stack-faq-list__item">
7+
<summary>Where can I get support or more information?</summary>
8+
<div className="stack-faq-list__answer">
9+
<p>Join us on Slack!</p>
10+
<ul>
11+
<li>
12+
Questions &amp; support {"->"}{" "}
13+
<a href="https://hackclub.enterprise.slack.com/archives/C0B6AFEA2J3" target="_blank" rel="noreferrer">
14+
#stack-help
15+
</a>
16+
</li>
17+
<li>
18+
Important updates &amp; announcements {"->"}{" "}
19+
<a href="https://hackclub.enterprise.slack.com/archives/C0B6PSX2YR4" target="_blank" rel="noreferrer">
20+
#stack-bulletin
21+
</a>
22+
</li>
23+
<li>
24+
General chatting {"->"}{" "}
25+
<a href="https://hackclub.enterprise.slack.com/archives/C0B6RUQJ1EW" target="_blank" rel="noreferrer">
26+
#stack
27+
</a>
28+
</li>
29+
</ul>
30+
</div>
31+
</details>
32+
33+
<details className="stack-faq-list__item">
34+
<summary>What can be classified as "fun"?</summary>
35+
<div className="stack-faq-list__answer">
36+
<p>
37+
The idea is simple: don't build something overly serious or productivity-focused. We're looking for projects that
38+
are goofy, chaotic, entertaining, or just genuinely funny.
39+
</p>
40+
<p>Some examples of projects that are probably too serious:</p>
41+
<ul>
42+
<li>❌ Portfolio website</li>
43+
<li>❌ AI shopping list</li>
44+
<li>❌ Pomodoro timer</li>
45+
<li>❌ Habit tracker</li>
46+
</ul>
47+
<p>And examples of projects that fit perfectly:</p>
48+
<ul>
49+
<li>✅ An app made to annoy your brother</li>
50+
<li>✅ A stupid little game</li>
51+
<li>✅ A meme website</li>
52+
<li>✅ Something completely useless but hilarious</li>
53+
</ul>
54+
<p>There's no strict checklist, usually, you can just feel when a project has the right vibe :)</p>
55+
</div>
56+
</details>
57+
58+
<details className="stack-faq-list__item">
59+
<summary>How do I receive my LEGO set?</summary>
60+
<div className="stack-faq-list__answer">
61+
<p>To reduce shipping costs, taxes, and customs issues, prizes are distributed differently depending on where you live:</p>
62+
<p>
63+
🇺🇸 In the US: We'll try to send a physical LEGO gift card when possible. Otherwise, you'll receive a virtual gift
64+
card for the{" "}
65+
<a href="https://www.lego.com/en-us/gift-cards/buy" target="_blank" rel="noreferrer">
66+
official LEGO website
67+
</a>
68+
.
69+
</p>
70+
<p>
71+
🌍 Outside the US: You'll usually receive a virtual gift card for the{" "}
72+
<a href="https://www.lego.com/en-us/gift-cards/buy" target="_blank" rel="noreferrer">
73+
official LEGO website
74+
</a>
75+
. If that isn't possible in your country, we'll send the reward through an HCB grant instead.
76+
</p>
77+
</div>
78+
</details>
79+
</div>
80+
);
81+
}

‎client/src/components/FaqPage.css‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
position: relative;
33
width: 100%;
44
min-height: 100vh;
5-
overflow: hidden;
5+
overflow-x: hidden;
6+
overflow-y: auto;
67
background: #73a5ca;
78
}
89

@@ -18,8 +19,8 @@
1819
.faq-page__content {
1920
position: relative;
2021
z-index: 2;
21-
max-width: 36rem;
22-
margin: 10rem auto 0;
22+
max-width: 52rem;
23+
margin: 8rem auto 7rem;
2324
padding: 0 1.5rem;
2425
color: #162456;
2526
text-align: center;
@@ -39,6 +40,15 @@
3940
text-shadow: 0 2px 0 #f6c65a;
4041
}
4142

43+
.faq-page .stack-faq-list__item summary {
44+
color: #8d1f38;
45+
-webkit-text-stroke-color: #f6c65a;
46+
}
47+
48+
.faq-page .stack-faq-list__answer {
49+
color: #7a1b2d;
50+
}
51+
4252
.faq-page__back {
4353
position: absolute;
4454
left: 1.2rem;

‎client/src/components/FaqPage.jsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ const platformBackground = "https://cdn.hackclub.com/019e3e5a-908f-707d-9790-91f
22
const backBtn = "https://cdn.hackclub.com/019e3e5a-8541-7927-b209-5cca8c932fe6/Back_btn.png";
33
const stackTitle = "https://cdn.hackclub.com/019e3e5a-8745-7bee-a1ab-07b5743f98c7/Stack_title.png";
44
import { useAuth } from "../auth/AuthContext.jsx";
5+
import { FaqList } from "./FaqList.jsx";
56
import { PlatformStatusBar } from "./PlatformStatusBar.jsx";
67
import "./FaqPage.css";
78

@@ -16,7 +17,7 @@ export function FaqPage() {
1617

1718
<section className="faq-page__content">
1819
<h1 className="faq-page__heading">FAQ</h1>
19-
<p className="faq-page__note">Full FAQ content coming soon.</p>
20+
<FaqList />
2021
</section>
2122

2223
<a className="faq-page__back" href="/main" aria-label="Back to main menu">

‎client/src/components/Hero.css‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -714,12 +714,15 @@
714714
left: 50%;
715715
top: clamp(110rem, 62svh, 42rem);
716716
z-index: 4;
717-
display: grid;
718-
gap: clamp(1rem, 3svh, 1.8rem);
719-
width: min(38vw, 520px);
717+
width: min(62vw, 780px);
720718
transform: translateX(-50%);
721719
}
722720

721+
.section-four__questions .stack-faq-list__answer {
722+
max-height: 34svh;
723+
overflow: auto;
724+
}
725+
723726
.section-four__question {
724727
width: 100%;
725728
padding: 0 0 clamp(0.35rem, 1svh, 0.65rem);
@@ -992,7 +995,7 @@
992995

993996
.section-four__questions {
994997
top: clamp(23rem, 56svh, 31rem);
995-
width: min(50vw, 390px);
998+
width: min(72vw, 560px);
996999
}
9971000

9981001
.section-four__question {
@@ -1216,8 +1219,7 @@
12161219

12171220
.section-four__questions {
12181221
top: clamp(17rem, 48svh, 24rem);
1219-
width: min(72vw, 310px);
1220-
gap: clamp(0.8rem, 2.4svh, 1.3rem);
1222+
width: min(82vw, 360px);
12211223
}
12221224

12231225
.section-four__question {

‎client/src/components/Hero.jsx‎

Lines changed: 10 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,18 @@ const pageBkg = "https://cdn.hackclub.com/019e3e5a-3ad0-7120-8fb4-50638b3c0362/B
1010
const shelf = "https://cdn.hackclub.com/019e3e5a-680b-700c-8428-8360f7195bf4/Shelf.png";
1111
const joinButton = "https://cdn.hackclub.com/019e3e5a-6a7a-7e1a-b945-aa27b1fc4108/join_btn.png";
1212
const legoChar1 = "https://cdn.hackclub.com/019e3e5a-6d71-79f0-9633-8668b69f464d/legoChar_1.png";
13-
const shopButton = "https://cdn.hackclub.com/019e3e5a-6f68-719e-a33c-0592db4abd12/shop_btn.png";
1413
const sectionThreeChar2 = "https://cdn.hackclub.com/019e3e5a-7373-7925-95c9-6d7b841e2004/Char2.png";
1514
const sectionThreeChar3 = "https://cdn.hackclub.com/019e3e5a-76d6-79b5-9ed5-9ffe5ba40aa3/Char3.png";
1615
const sectionThreeProject1 = "https://cdn.hackclub.com/019e3e5a-79ab-7a35-9061-cc0302e01074/prj1.png";
1716
const sectionThreeProject2 = "https://cdn.hackclub.com/019e3e5a-7c73-72e3-8fdc-e2b73b735bc4/prj2.png";
1817
const sectionThreeProject3 = "https://cdn.hackclub.com/019e3e5a-80e5-71be-8d1f-3017f5349089/prj3.png";
1918
const faqText = "https://cdn.hackclub.com/019e3e5a-82d7-7105-a023-231cdb1aa700/faq_txt.png";
2019
import { BrickModel } from "./BrickModel.jsx";
20+
import { FaqList } from "./FaqList.jsx";
2121
import "./Hero.css";
2222

23+
const landingBrickRotation = { x: -1.10, y: -0.30, z: -0.55 };
24+
2325
export function Hero() {
2426
return (
2527
<section className="hero" aria-label="Stack hero">
@@ -52,9 +54,9 @@ export function Hero() {
5254
<nav className="hero__nav" aria-label="Primary">
5355
<img className="hero__nav-bg" src={toolbar} alt="" width={420} height={56} />
5456
<div className="hero__nav-links">
55-
<a href="#build">Build</a>
56-
<a href="#prizes">Prizes</a>
57-
<a href="#learn">Learn</a>
57+
<a href="#project-examples">Build</a>
58+
<a href="/faq">FAQ</a>
59+
<a href="https://hackclub.com" target="_blank" rel="noopener noreferrer">Hack Club</a>
5860
</div>
5961
</nav>
6062

@@ -102,7 +104,7 @@ export function Hero() {
102104
alt=""
103105
aria-hidden="true"
104106
/>
105-
<BrickModel />
107+
<BrickModel rotation={landingBrickRotation} />
106108
</div>
107109

108110
<img
@@ -128,9 +130,6 @@ export function Hero() {
128130

129131
<div className="section-two__shelf">
130132
<img className="section-two__shelf-image" src={shelf} width={768} height={640} alt="Shelf of LEGO prizes" />
131-
<a className="section-two__shop" href="/shop" aria-label="See the full prize listing">
132-
<img src={shopButton} width={536} height={113} alt="See the full listing..." />
133-
</a>
134133
</div>
135134

136135
<a className="section-two__join" href="/login" aria-label="Sign up or log in with Hack Club to join Stack">
@@ -175,7 +174,7 @@ export function Hero() {
175174
</p>
176175
</section>
177176

178-
<section className="section-three" aria-label="Project examples">
177+
<section id="project-examples" className="section-three" aria-label="Project examples">
179178
<a
180179
href="https://what-the-duck-ten.vercel.app/"
181180
aria-label="Open joke website example"
@@ -234,7 +233,7 @@ export function Hero() {
234233
/>
235234
</section>
236235

237-
<section className="section-four" aria-labelledby="faq-heading">
236+
<section id="faq" className="section-four" aria-labelledby="faq-heading">
238237
<div className="section-four__faq-strip" aria-hidden="true">
239238
<img className="section-four__faq-title section-four__faq-title--left" src={faqText} width={623} height={380} alt="" />
240239
<img className="section-four__faq-title section-four__faq-title--center" src={faqText} width={623} height={380} alt="" />
@@ -245,17 +244,7 @@ export function Hero() {
245244
FAQ
246245
</h2>
247246

248-
<div className="section-four__questions">
249-
<button className="section-four__question" type="button">
250-
What can I build for Stack?
251-
</button>
252-
<button className="section-four__question" type="button">
253-
How do I submit my project?
254-
</button>
255-
<button className="section-four__question" type="button">
256-
When do I get my LEGO set?
257-
</button>
258-
</div>
247+
<FaqList className="section-four__questions" />
259248
</section>
260249
</section>
261250
);

0 commit comments

Comments
 (0)