Skip to content

Commit 30240a0

Browse files
michelleyeohmichelleyeoh
authored
Z index fix (#58)
* moved social good hero to the right * update z index
1 parent 99072bc commit 30240a0

2 files changed

Lines changed: 138 additions & 140 deletions

File tree

‎app/(pages)/(index-page)/_components/heroInfo/heroInfo.tsx‎

Lines changed: 137 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -16,106 +16,105 @@ export default function HeroInfo() {
1616
const { bigShape, mediumShape, littleShape, extraTiniTiny } = PARALLAX_SPEEDS;
1717

1818
return (
19-
<>
19+
<div
20+
id="home"
21+
ref={containerRef}
22+
className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
23+
>
2024
<div
21-
id="home"
22-
ref={containerRef}
23-
className="flex flex-col pl-[9%] items-center -pl-5 p-5 w-full gap-6 md:flex-row md:items-stretch md:pr-[5%]"
25+
className="absolute -top-7 md:-top-24 left-[27%] md:left-[30%] -z-[-40]"
26+
// can't import getParallaxStyle here because it needs to spin at the same time
27+
style={{
28+
transform: `translateX(${
29+
mousePosition.x / extraTiniTiny
30+
}px) translateY(${mousePosition.y / extraTiniTiny}px)`,
31+
}}
2432
>
33+
<Image
34+
src="/Images/reghero/Green.svg"
35+
alt="green flower"
36+
width={300}
37+
height={300}
38+
className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
39+
style={{ animation: 'spin 30s linear infinite' }}
40+
/>
41+
</div>
42+
<div>
43+
<Image
44+
src="/Images/reghero/WaterTower.svg"
45+
alt="watertower"
46+
width={156.5}
47+
height={221.27}
48+
className="absolute top-29 left-27 z-[-40] hidden md:block"
49+
style={getParallaxStyle(mousePosition, bigShape)}
50+
/>
2551
<div
26-
className="absolute -top-24 left-[27%] md:left-[30%] z-0"
52+
className="absolute z-[-40] top-[56%] md:top-[50%] left-[2%]"
2753
// can't import getParallaxStyle here because it needs to spin at the same time
2854
style={{
2955
transform: `translateX(${
30-
mousePosition.x / extraTiniTiny
31-
}px) translateY(${mousePosition.y / extraTiniTiny}px)`,
56+
mousePosition.x / mediumShape
57+
}px) translateY(${mousePosition.y / mediumShape}px)`,
3258
}}
3359
>
3460
<Image
35-
src="/Images/reghero/Green.svg"
36-
alt="green flower"
37-
width={300}
38-
height={300}
39-
className="flex flex-row justify-center object-contain w-[40%] md:h-full md:w-full"
40-
style={{ animation: 'spin 30s linear infinite' }}
41-
/>
42-
</div>
43-
<div>
44-
<Image
45-
src="/Images/reghero/WaterTower.svg"
46-
alt="watertower"
47-
width={156.5}
48-
height={221.27}
49-
className="absolute top-29 left-27 z-0 hidden md:block"
50-
style={getParallaxStyle(mousePosition, bigShape)}
51-
/>
52-
<div
53-
className="absolute z-0 top-[56%] md:top-[50%] left-[2%]"
54-
// can't import getParallaxStyle here because it needs to spin at the same time
55-
style={{
56-
transform: `translateX(${
57-
mousePosition.x / mediumShape
58-
}px) translateY(${mousePosition.y / mediumShape}px)`,
59-
}}
60-
>
61-
<Image
62-
src="/Images/reghero/YellowDonut.svg"
63-
alt="yellow donut"
64-
width={100}
65-
height={100}
66-
className="justify-center object-contain"
67-
style={{ animation: 'spin 25s linear infinite reverse' }}
68-
/>
69-
</div>
70-
<Image
71-
src="/Images/reghero/BlueThing.svg"
72-
alt="blue shape"
61+
src="/Images/reghero/YellowDonut.svg"
62+
alt="yellow donut"
7363
width={100}
7464
height={100}
75-
className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center z-0 object-contain"
76-
style={getParallaxStyle(mousePosition, littleShape)}
77-
/>
78-
</div>
79-
{/* animals on couch */}
80-
<div className="order-2 md:order-none flex flex-row md:min-w-[360px] items-stretch gap-6">
81-
<Image
82-
src="/Images/reghero/Couch.svg"
83-
alt="Animals on couch"
84-
width={110}
85-
height={144}
86-
className="flex flex-row justify-center object-contain pr-[13%] md:p-0 md:h-full w-screen md:w-screen"
65+
className="justify-center object-contain"
66+
style={{ animation: 'spin 25s linear infinite reverse' }}
8767
/>
8868
</div>
69+
<Image
70+
src="/Images/reghero/BlueThing.svg"
71+
alt="blue shape"
72+
width={100}
73+
height={100}
74+
className="absolute order-2 md:order-none top-[85%] -left-[5%] md:left-[35%] justify-center -z-10 object-contain"
75+
style={getParallaxStyle(mousePosition, littleShape)}
76+
/>
77+
</div>
78+
{/* animals on couch */}
79+
<div className="order-2 md:order-none flex flex-row md:min-w-[360px] items-stretch gap-6">
80+
<Image
81+
src="/Images/reghero/Couch.svg"
82+
alt="Animals on couch"
83+
width={110}
84+
height={144}
85+
className="flex flex-row justify-center object-contain pr-[13%] md:p-0 md:h-full w-screen md:w-screen"
86+
/>
87+
</div>
8988

90-
{/* right side */}
91-
<div className="order-1 md:order-none flex w-full min-w-0 flex-col justify-between md:w-full md:pr-0 pr-[5%]">
92-
{/* here text + buttons */}
93-
<div className="flex flex-row justify-start items-start md:justify-end md:items-end">
94-
<div className="flex flex-col items-start gap-[22px] text-left md:items-end md:gap-[31px] md:text-right">
89+
{/* right side */}
90+
<div className="order-1 md:order-none flex w-full min-w-0 flex-col justify-between md:w-full md:pr-0 pr-[5%]">
91+
{/* here text + buttons */}
92+
<div className="flex flex-row justify-start items-start md:justify-end md:items-end">
93+
<div className="flex flex-col items-start gap-[22px] text-left md:items-end md:gap-[31px] md:text-right">
94+
<div className="flex flex-col items-start text-left md:items-end md:text-right w-full">
9595
<div className="flex flex-col items-start text-left md:items-end md:text-right w-full">
96-
<div className="flex flex-col items-start text-left md:items-end md:text-right w-full">
97-
<p className="flex gap-2 text-[30px] font-bold leading-[115%] tracking-[0.8px] break-625:text-[40px]">
98-
<span className="text-black">
99-
<WordCycle />
100-
</span>
101-
<span className="text-[#005271]">for</span>
102-
</p>
96+
<p className="flex gap-2 text-[30px] font-bold leading-[115%] tracking-[0.8px] break-625:text-[40px]">
97+
<span className="text-black">
98+
<WordCycle />
99+
</span>
100+
<span className="text-[#005271]">for</span>
101+
</p>
103102

104-
<h1 className="whitespace-nowrap text-[45px] font-bold leading-[115%] tracking-[0.9px] text-[var(--text-hero)] break-900:text-[50px] break-625:text-[66px] break-625:leading-[100%] break-625:tracking-[3.52px] md:text-[88px]">
105-
social good
106-
</h1>
103+
<h1 className="whitespace-nowrap text-[45px] font-bold leading-[115%] tracking-[0.9px] text-[var(--text-hero)] break-900:text-[50px] break-625:text-[66px] break-625:leading-[100%] break-625:tracking-[3.52px] md:text-[88px]">
104+
social good
105+
</h1>
107106

108-
<p className="mt-[10px] text-[16px] w-full tracking-[0.48px] text-black break-625:text-[20px]">
109-
May 9-10, 2026 @ UCenter
110-
</p>
111-
</div>
107+
<p className="mt-[10px] text-[16px] w-full tracking-[0.48px] text-black break-625:text-[20px]">
108+
May 9-10, 2026 @ UCenter
109+
</p>
112110
</div>
111+
</div>
113112

114-
<div className="flex flex-row items-start gap-[12px] break-625:flex-col break-625:items-end break-625:gap-[28px] sm:flex-row sm:items-center">
115-
<Link
116-
href="https://apply.hackdavis.io/"
117-
target="_blank"
118-
className="
113+
<div className="flex flex-row items-start gap-[12px] break-625:flex-col break-625:items-end break-625:gap-[28px] sm:flex-row sm:items-center">
114+
<Link
115+
href="https://apply.hackdavis.io/"
116+
target="_blank"
117+
className="
119118
rounded-full
120119
px-4 py-2
121120
md:px-6 md:py-2
@@ -133,85 +132,84 @@ export default function HeroInfo() {
133132
text-[var(--teal-1,#005271)]
134133
hover:text-white
135134
"
136-
>
137-
Register Now
138-
</Link>
135+
>
136+
Register Now
137+
</Link>
139138

140-
<div className="flex h-[40px] w-[138px] flex-shrink-0 items-center rounded-[100px] bg-black/15 text-center text-[18px] font-bold tracking-[0.4px] text-black break-625:h-[50px] break-625:w-[170px] break-625:py-0 break-625:text-[20px]">
141-
<HeartButton
142-
text="Sponsor"
143-
backgroundColor="#EDF2F3"
144-
href="mailto:team@hackdavis.io"
145-
/>
146-
</div>
139+
<div className="flex h-[40px] w-[138px] flex-shrink-0 items-center rounded-[100px] bg-black/15 text-center text-[18px] font-bold tracking-[0.4px] text-black break-625:h-[50px] break-625:w-[170px] break-625:py-0 break-625:text-[20px]">
140+
<HeartButton
141+
text="Sponsor"
142+
backgroundColor="#EDF2F3"
143+
href="mailto:team@hackdavis.io"
144+
/>
147145
</div>
146+
</div>
148147

149-
<div className="flex flex-col items-start gap-2 text-left break-625:flex-row break-625:items-end break-625:text-right">
150-
<span className="hidden text-[18px] font-normal tracking-[0.48px] text-black break-625:inline md:text-[20px]">
151-
Check out the{' '}
152-
</span>
153-
<div className="flex items-center gap-2 text-black text-[19px]">
154-
Apply to be a{' '}
155-
<FormLink
156-
href="https://forms.gle/rvMKjxw6GjiaKPjc7"
157-
includeComma={false}
158-
>
159-
<span style={{ color: '#FFC53D' }}>Judge</span>
160-
</FormLink>
161-
{/* <span style={{ color: '#FFC5AB' }}>Mentor</span>, or{' '}
148+
<div className="flex flex-col items-start gap-2 text-left break-625:flex-row break-625:items-end break-625:text-right">
149+
<span className="hidden text-[18px] font-normal tracking-[0.48px] text-black break-625:inline md:text-[20px]">
150+
Check out the{' '}
151+
</span>
152+
<div className="flex items-center gap-2 text-black text-[19px]">
153+
Apply to be a{' '}
154+
<FormLink
155+
href="https://forms.gle/rvMKjxw6GjiaKPjc7"
156+
includeComma={false}
157+
>
158+
<span style={{ color: '#FFC53D' }}>Judge</span>
159+
</FormLink>
160+
{/* <span style={{ color: '#FFC5AB' }}>Mentor</span>, or{' '}
162161
<span style={{ color: '#9EE7E5' }}>Volunteer</span> */}
163-
</div>
164162
</div>
165163
</div>
166164
</div>
167-
168-
{/* desktop numbers */}
169-
<div className="hidden md:flex items-end gap-0 pt-[15%] md:pl-[5%] lg:pl-[30%]">
170-
<Image
171-
src="/Images/reghero/One.svg"
172-
alt="1"
173-
width={130}
174-
height={130}
175-
className="object-contain w-[150px] h-[150px] lg:w-[170px] lg:h-[170px] shrink-0"
176-
/>
177-
<Image
178-
src="/Images/reghero/Zero.svg"
179-
alt="0"
180-
width={130}
181-
height={130}
182-
className="object-contain sm:w-[150px] sm:h-[150px] md:w-[150px] md:h-[150px] lg:w-[170px] lg:h-[170px] shrink-0 translate-y-[24px] -translate-x-[20px]"
183-
/>
184-
</div>
185165
</div>
186166

187-
{/* mobile numbers: 10 */}
188-
<div className="block md:hidden order-3 md:order-none relative ml-[25%] md:ml-0 pt-[9%] flex flex-row items-stretch sm:pl-0 md:pl-[25%]">
167+
{/* desktop numbers */}
168+
<div className="hidden md:flex items-end gap-0 pt-[15%] md:pl-[5%] lg:pl-[30%]">
189169
<Image
190170
src="/Images/reghero/One.svg"
191-
alt="Animals on couch"
192-
width={150}
193-
height={150}
194-
className="
195-
object-contain
196-
w-[180px] h-[180px]
197-
"
171+
alt="1"
172+
width={130}
173+
height={130}
174+
className="object-contain w-[150px] h-[150px] lg:w-[170px] lg:h-[170px] shrink-0"
198175
/>
199176
<Image
200177
src="/Images/reghero/Zero.svg"
201-
alt="Animals on couch"
202-
width={150}
203-
height={150}
204-
className="
178+
alt="0"
179+
width={130}
180+
height={130}
181+
className="object-contain sm:w-[150px] sm:h-[150px] md:w-[150px] md:h-[150px] lg:w-[170px] lg:h-[170px] shrink-0 translate-y-[24px] -translate-x-[20px]"
182+
/>
183+
</div>
184+
</div>
185+
186+
{/* mobile numbers: 10 */}
187+
<div className="block md:hidden order-3 md:order-none relative ml-[25%] md:ml-0 pt-[9%] flex flex-row items-stretch sm:pl-0 md:pl-[25%]">
188+
<Image
189+
src="/Images/reghero/One.svg"
190+
alt="Animals on couch"
191+
width={150}
192+
height={150}
193+
className="
194+
object-contain
195+
w-[180px] h-[180px]
196+
"
197+
/>
198+
<Image
199+
src="/Images/reghero/Zero.svg"
200+
alt="Animals on couch"
201+
width={150}
202+
height={150}
203+
className="
205204
object-contain
206205
w-[180px] h-[180px]
207206
translate-y-[30px]
208207
-translate-x-[20px]
209208
md:translate-y-[24px]
210209
"
211-
/>
212-
</div>
210+
/>
213211
</div>
214-
</>
212+
</div>
215213
);
216214
}
217215

‎app/(pages)/(index-page)/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import Sponsers from './_components/Sponsers/Sponsers';
88

99
export default function Home() {
1010
return (
11-
<div className="pt-40 flex flex-col w-full bg-[#FAFAFA] min-h-screen">
11+
<div className="pt-40 flex flex-col w-full min-h-screen">
1212
<HeroInfo />
1313
<TenYears />
1414
<Stats />

0 commit comments

Comments
 (0)