Skip to content

Commit 0af14f8

Browse files
godinezsteven1godinezsteven1
authored
place holder for main site
Mainsite placeholder - Frontend :D
2 parents 02130e7 + fb094d1 commit 0af14f8

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+10369
-855
lines changed

‎apps/main/src/app/(landing)/Sections/About.tsx‎

Lines changed: 52 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,12 @@ import Journal from "../../lib/Assets/SVG/AboutAssets/Journal";
1111
import Thumbtack1 from "../../lib/Assets/SVG/AboutAssets/Thumbtack1";
1212
import Thumbtack2 from "../../lib/Assets/SVG/AboutAssets/Thumbtack2";
1313
import Thumbtack3 from "../../lib/Assets/SVG/AboutAssets/Thumbtack3";
14-
import useWindowSize from "@repo/util/hooks/useWindowSize";
14+
// import useWindowSize from "@repo/util/hooks/useWindowSize";
1515
import AboutParagraph from "../../lib/Assets/SVG/AboutAssets/AboutParagraph";
1616

1717
export default function About(): React.ReactNode {
18-
const { width } = useWindowSize();
19-
const isMobile = width != undefined && width < 2000;
18+
// const { width } = useWindowSize();
19+
// const isMobile = width != undefined && width < 2000;
2020

2121
return (
2222
<div className="w-full h-[100vh] bg-[#F3E7D7] flex flex-col flex-none">
@@ -29,65 +29,83 @@ export default function About(): React.ReactNode {
2929
<div className="w-[100vw] mt-auto">
3030
<BottomAboutBar />
3131
</div>
32-
<div className="absolute transform
32+
<div
33+
className="absolute transform
3334
w-[373.15px] h-[220.91px] left-[28px] top-[1630px]
3435
scale-[1.9] rotate-[0] origin-left
3536
tablet:absolute tablet:w-[45vw] tablet:left-[58vw] tablet:right-0
36-
tablet:transform tablet:-rotate-[7.5deg] tablet:top-[210vh] tablet:scale-[2.2]">
37-
<Journal/>
37+
tablet:transform tablet:-rotate-[7.5deg] tablet:top-[210vh] tablet:scale-[2.2]"
38+
>
39+
<Journal />
3840
</div>
3941
{/* the journal parts*/}
40-
<div className="absolute
42+
<div
43+
className="absolute
4144
left-[280px] scale-[1.15] rotate-[0] top-[1550px] mt-0
42-
tablet:left-[94%] tablet:scale-[2.7] tablet:-rotate-[7.5deg] tablet:top-[185vh] tablet:mt-24">
45+
tablet:left-[94%] tablet:scale-[2.7] tablet:-rotate-[7.5deg] tablet:top-[185vh] tablet:mt-24"
46+
>
4347
<Image alt="AboutPicture" src="/about_1.png" width={250} height={100} />
4448
</div>
45-
<div className="absolute
49+
<div
50+
className="absolute
4651
left-[245px] scale-[0.75] rotate-[0] top-[1645px]
47-
tablet:absolute tablet:left-[96%] tablet:mt-96 tablet:scale-[3.8] tablet:-rotate-[7.5deg] tablet:top-[175vh]">
52+
tablet:absolute tablet:left-[96%] tablet:mt-96 tablet:scale-[3.8] tablet:-rotate-[7.5deg] tablet:top-[175vh]"
53+
>
4854
<Image alt="AboutPicture" src="/about_2.png" width={350} height={200} />
4955
</div>
50-
<div className="absolute
56+
<div
57+
className="absolute
5158
w-[148.2px] h-[94.89px] left-[50.46px] top-[1575px] scale-[1.08] rotate-[7.5deg]
52-
tablet:absolute tablet:w-[45vw] tablet:h-auto tablet:left-[60vw] tablet:top-[173vh] tablet:mt-48 tablet:scale-100 tablet:rotate-0">
59+
tablet:absolute tablet:w-[45vw] tablet:h-auto tablet:left-[60vw] tablet:top-[173vh] tablet:mt-48 tablet:scale-100 tablet:rotate-0"
60+
>
5361
<Image alt="AboutPicture" src="/about_3.png" width={300} height={300} />
5462
</div>
5563

56-
<div className="absolute
64+
<div
65+
className="absolute
5766
left-[80.46px] top-[1555px] scale-[0.45]
58-
tablet:absolute tablet:left-[63vw] tablet:top-[173vh] tablet:mt-48 tablet:scale-100">
59-
<Thumbtack1 />
60-
</div>
61-
<div className="absolute
67+
tablet:absolute tablet:left-[63vw] tablet:top-[173vh] tablet:mt-48 tablet:scale-100"
68+
>
69+
<Thumbtack1 />
70+
</div>
71+
<div
72+
className="absolute
6273
left-[294px] scale-[0.45] top-[1630px]
63-
tablet:absolute tablet:left-[94%] tablet:top-[163vh] tablet:mt-96 tablet:scale-100">
64-
<Thumbtack2 />
65-
</div>
66-
<div className="absolute
74+
tablet:absolute tablet:left-[94%] tablet:top-[163vh] tablet:mt-96 tablet:scale-100"
75+
>
76+
<Thumbtack2 />
77+
</div>
78+
<div
79+
className="absolute
6780
left-[300px] scale-[0.45] top-[1520px]
68-
tablet:absolute tablet:left-[94%] tablet:top-[177vh] tablet:mt-28 tablet:scale-100">
69-
<Thumbtack3 />
70-
</div>
71-
<div className="absolute h-full w-[50vw] ml-24 mr-auto mt-5 tablet:mt-24 flex text-[1.8vw]">
81+
tablet:absolute tablet:left-[94%] tablet:top-[177vh] tablet:mt-28 tablet:scale-100"
82+
>
83+
<Thumbtack3 />
84+
</div>
85+
<div className="absolute h-full w-[50vw] ml-24 mr-auto mt-5 tablet:mt-24 flex text-[1.8vw]">
7286
<div className="w-[50vw]">
7387
<StreetSign streetName={"ABOUT"} suffix="HBP" />
7488
<div>
7589
<AboutParagraph />
76-
</div>
77-
<button className="mt-0 absolute top-[30%] bg-[#02877F] text-white rounded-[64px] text-xs flex items-center justify-center
90+
</div>
91+
<button
92+
className="mt-0 absolute top-[30%] bg-[#02877F] text-white rounded-[64px] text-xs flex items-center justify-center
7893
relative top-[265px] w-[162.48px] h-[31.59px] right-[50px]
7994
tablet:mt-12 tablet:top-auto tablet:w-auto tablet:h-auto tablet:right-auto
80-
tablet:w-[278.17px] tablet:h-[67.69px] tablet:!text-[26.5px]">
81-
{"View Past Photos"}
82-
</button>
83-
</div>
84-
<div className="absolute pb-0 top-[77vh]
95+
tablet:w-[278.17px] tablet:h-[67.69px] tablet:!text-[26.5px]"
96+
>
97+
{"View Past Photos"}
98+
</button>
99+
</div>
100+
<div
101+
className="absolute pb-0 top-[77vh]
85102
w-[560.34px] h-[132.06px] left-[-160.67px] top-[447.5px]
86103
tablet:absolute tablet:w-[312px] tablet:h-auto tablet:left-[66%]
87-
tablet:bottom-auto tablet:top-[70vh] tablet:scale-[3.3] ">
104+
tablet:bottom-auto tablet:top-[70vh] tablet:scale-[3.3] "
105+
>
88106
<Cities />
89107
</div>
90108
</div>
91109
</div>
92110
);
93-
}
111+
}

‎apps/main/src/app/(landing)/Sections/Apply.tsx‎

Lines changed: 25 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,45 +10,52 @@ import ApplyRightBush from "../../lib/Assets/SVG/ApplyAssets/ApplyRightBush";
1010
const Apply = () => {
1111
return (
1212
<>
13-
<div className="relative w-full mt-44 flex flex-col flex-none h-[559px]">
14-
<div className="w-full h-full z-0">
15-
<ApplyBackground height={555} preserveAspectRatio="none"/>
13+
<div className="relative w-full h-[40vh] -mt-2 -mb-20 tablet:mb-5 flex flex-col flex-none">
14+
<div className="overflow-hidden -mb-10">
15+
<div className="w-[300%] tablet:w-full -translate-x-10 tablet:-translate-x-0 h-full z-0">
16+
<ApplyBackground preserveAspectRatio="xMidYMid meet" />
17+
</div>
1618
</div>
1719

18-
<div className="relative top-[-480px] z-10 flex justify-center items-center w-full h-full">
19-
<div className="w-1/2 text-center">
20-
<p className="text-[20px] tablet:desktop:text-2xl desktop:text-3xl font-GT-Walsheim-Regular">
21-
Applications have not been released for HackBeanpot 2026. Check in with us again this fall!
20+
<div className="absolute transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-[40%] tablet:top-[60%] z-10 flex items-center text-center">
21+
<div className="max-w-2xl">
22+
<p className=" text-md tablet:text-[20px] tablet:desktop:text-2xl desktop:text-3xl font-GT-Walsheim-Regular">
23+
Applications have not been released for HackBeanpot 2026. Check in
24+
with us again this fall!
2225
</p>
2326
<div className="pt-8">
2427
<button
25-
onClick={() => alert("Applications for HackBeanpot 2026 have not been released. Check in with us again this fall!")}
26-
className="p-3 bg-[#84AF67] text-text-light rounded-full drop-shadow-md w-44 h-14 text-2xl"
28+
onClick={() =>
29+
alert(
30+
"Applications for HackBeanpot 2026 have not been released. Check in with us again this fall!",
31+
)
32+
}
33+
className="p-3 bg-[#84AF67] text-text-light rounded-full drop-shadow-md w-32 tablet:w-44 h-12 tablet:h-14 text-md tablet:text-2xl"
2734
>
2835
Apply here
2936
</button>
3037
</div>
3138
</div>
3239
</div>
3340

34-
<div className="absolute top-[-60px] left-0 w-[40%] h-[120%] z-31 invisible desktop:visible">
41+
<div className="absolute mobile:top-[20%] tablet:-top-[15%] left-[-48%] tablet:left-[-20%] mobile:w-[80%] tablet:w-[55%] tablet:max-w-[120%] z-20 desktop:visible">
3542
<ApplyLeftBush className="w-full h-full" />
3643
</div>
37-
38-
<div className="absolute top-[-140px] -right-16 w-[40%] h-[120%] z-31 invisible desktop:visible">
44+
45+
<div className="absolute tablet:top-[-35%] mobile:right-[-40%] tablet:right-[-2%] mobile:w-[75%] tablet:w-[42%] tablet:max-w-[120%] z-20 desktop:visible">
3946
<ApplyRightBush className="w-full h-full" />
40-
</div>
47+
</div>
4148

42-
<div className="absolute top-[30px] left-0 w-[40%] h-[120%] z-31 invisible desktop:visible">
43-
<ApplyLeftLog />
49+
<div className="absolute mobile:top-[30%] tablet:top-[20%] mobile:left-[-15%] tablet:left-0 mobile:w-[40%] tablet:max-w-[30%] tablet:h-[120%] z-30 desktop:visible">
50+
<ApplyLeftLog className="w-full h-full" />
4451
</div>
4552

46-
<div className="absolute top-[40px] -right-40 w-[40%] h-[120%] z-31 invisible desktop:visible">
47-
<ApplyRightLog />
53+
<div className="absolute mobile:top-[30%] tablet:top-[20%] mobile:right-[-15%] tablet:right-0 mobile:w-[40%] tablet:max-w-[30%] tablet:h-[120%] z-30 desktop:visible">
54+
<ApplyRightLog className="w-full h-full" />
4855
</div>
4956
</div>
5057
</>
5158
);
5259
};
5360

54-
export default Apply;
61+
export default Apply;

‎apps/main/src/app/(landing)/Sections/Keynote.tsx‎

Lines changed: 88 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,38 +3,81 @@
33
import React from "react";
44
import StreetSign from "@repo/ui/StreetSign";
55
import Image from "next/image";
6-
import useIsMobile from "@repo/util/hooks/useIsMobile";
6+
import useIsLargeMobile from "@repo/util/hooks/useIsMobileLgScreen";
77
import Typography from "@repo/ui/Typography";
88

9-
function SpeakerPhoto(): JSX.Element {
9+
interface AdditionalClassesProps {
10+
additionalClasses?: string;
11+
}
12+
13+
interface SpeakerPhotoProps {
14+
newWidth?: number;
15+
newHeight?: number;
16+
newPadding?: string;
17+
newMinWidth?: string;
18+
newClasses?: string;
19+
}
20+
21+
interface SpeakerDetailsProps {
22+
textAlign?: string;
23+
scaleFactor?: string;
24+
}
25+
26+
function SpeakerPhoto({
27+
newWidth,
28+
newHeight,
29+
newPadding,
30+
newMinWidth,
31+
newClasses,
32+
}: SpeakerPhotoProps): JSX.Element {
33+
const padding = newPadding ?? "p-4";
34+
const width = newWidth ?? 400;
35+
const height = newHeight ?? 500;
36+
const minWidth = newMinWidth ?? "min-w-200px";
37+
1038
return (
11-
<div className="bg-white rounded-md inline-block p-4 pb-[5vw] shadow-lg">
39+
<div
40+
className={`bg-white rounded-sm inline-block pb-[5vw] shadow-lg ${padding} ${newClasses ?? ""}`}
41+
>
1242
<Image
1343
alt="Aidan"
1444
src="/aidan.png"
15-
width={400}
16-
height={500}
17-
className="min-w-[200px]"
45+
width={width}
46+
height={height}
47+
className={minWidth}
1848
/>
1949
</div>
2050
);
2151
}
2252

23-
function SpeakerDetails(): JSX.Element {
53+
function SpeakerDetails({
54+
textAlign,
55+
scaleFactor,
56+
}: SpeakerDetailsProps): JSX.Element {
2457
return (
25-
<div className="mt-4 font-GT-Walsheim-Regular">
26-
<p className="text-[1.75vw] font-bold mb-2">Aidan Ouckama</p>
27-
<p className="text-[1.5vw] text-lightBrown">
58+
<div className={`mt-[15%] font-GT-Walsheim-Regular ${textAlign ?? ""}`}>
59+
<p
60+
className={`text-[1.75vw] scale-[${scaleFactor ?? "1"}] font-bold mb-[30%]`}
61+
>
62+
Aidan Ouckama
63+
</p>
64+
<p
65+
className={`text-[1.5vw] scale-[${scaleFactor ?? "1"}] text-lightBrown`}
66+
>
2867
3rd year Computer Science student, Stevens Institute of Technology |
2968
Tech Content Creator
3069
</p>
3170
</div>
3271
);
3372
}
3473

35-
function SpeakerAbout(): JSX.Element {
74+
function SpeakerAbout({
75+
additionalClasses,
76+
}: AdditionalClassesProps): JSX.Element {
3677
return (
37-
<Typography.Body className="font-GT-Walsheim-Regular mt-8">
78+
<Typography.Body
79+
className={`font-GT-Walsheim-Regular mt-8 ${additionalClasses ?? ""}`}
80+
>
3881
<span className="font-GT-Walsheim-Bold">Aidan Ouckama </span>is a a
3982
prominent tech content creator, known for engaging, informative, and
4083
humorous content across multiple social media platforms. By sharing
@@ -58,25 +101,43 @@ function SpeakerAbout(): JSX.Element {
58101
}
59102

60103
export default function Keynote(): React.ReactNode {
61-
const isMobile = useIsMobile();
104+
const isMobile = useIsLargeMobile();
105+
106+
const conditionalAlignment = `h-full mx-auto my-auto gap-5 ${
107+
isMobile
108+
? "flex flex-col items-center justify-center min-h-screen text-center"
109+
: "flex items-center"
110+
}`;
111+
62112
return (
63-
<div className="w-full h-[120vh] bg-cream">
64-
<div
65-
className={`h-full max-w-[80vw] mx-auto my-auto gap-5 ${
66-
isMobile
67-
? "flex flex-col items-center justify-center min-h-screen text-center"
68-
: "flex items-center"
69-
}`}
70-
>
71-
<div className="w-[45vw]">
72-
{isMobile && <StreetSign streetName="KEYNOTE" suffix="SPEAKER" />}
73-
<SpeakerPhoto />
74-
<SpeakerDetails />
113+
<div className={`w-full bg-cream ${isMobile ? "h-auto" : "h-[120vh]"}`}>
114+
<div className={conditionalAlignment}>
115+
<div className={`${isMobile ? "w-[80vw]" : "w-[55vw]"}`}>
116+
{isMobile && (
117+
<div
118+
className={`relative ${isMobile ? "mb-[5%] mt-10 justify-self-center scale-[0.7]" : "mb-[10%]"}`}
119+
>
120+
<StreetSign streetName="KEYNOTE" suffix="SPEAKER" />
121+
</div>
122+
)}
123+
124+
<div
125+
className={`${isMobile ? "flex flex-row gap-x-12 mb-[-5%]" : ""}`}
126+
>
127+
<SpeakerPhoto
128+
newClasses={`${isMobile ? "left-[-10%]" : ""}`}
129+
newPadding={`${isMobile ? "p-2" : ""}`}
130+
/>
131+
<SpeakerDetails
132+
textAlign={`${isMobile ? "text-left text-wrap p-[5%]" : ""}`}
133+
scaleFactor={`${isMobile ? "2" : ""}`}
134+
/>
135+
</div>
75136
</div>
76137

77-
<div className="w-[55vw]">
138+
<div className={`${isMobile ? "w-[80vw]" : "w-[55vw]"}`}>
78139
{!isMobile && <StreetSign streetName="KEYNOTE" suffix="SPEAKER" />}
79-
<SpeakerAbout />
140+
<SpeakerAbout additionalClasses={`${isMobile ? "text-left" : ""}`} />
80141
</div>
81142
</div>
82143
</div>

‎apps/main/src/app/(landing)/Sections/Landing.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,23 @@ import Bus from "../../lib/Assets/SVG/RoadAssets/Bus";
88

99
export default function Landing(): JSX.Element {
1010
return (
11-
<div className="w-full h-[60vh] relative">
12-
<LandingBackground />
13-
<div className="absolute top-[85%] w-full z-1">
11+
<div className="w-full h-[50vh] tablet:h-[90vh] relative overflow-hidden">
12+
<div className="w-[230%] tablet:w-auto -translate-x-1/3 tablet:-translate-x-0">
13+
<LandingBackground />
14+
</div>
15+
<div className="absolute -mt-[9vh] tablet:-mt-[20vh] w-[200%] tablet:w-full z-1">
1416
<Guardrail />
1517
</div>
16-
<div className="absolute top-[110%] w-full">
18+
<div className="absolute -mt-[2vh] tablet:-mt-[5vh] w-[300%] tablet:w-full">
1719
<Road />
1820
</div>
19-
<div className="absolute w-[40vw] left-1/2 top-[90%] transform -translate-x-1/2 -translate-y-1/2">
21+
<div
22+
className="absolute -mt-[10vh] tablet:-mt-[20vh] w-[70vw] tablet:w-[40vw] left-1/2 top-[90%]
23+
transform -translate-x-1/2 -translate-y-1/2 scale-125 tablet:scale-100"
24+
>
2025
<Bus />
2126
</div>
22-
<div className="absolute transform -translate-x-1/2 -translate-y-1/2 left-1/2 top-[30%]">
27+
<div className="absolute transform -translate-x-1/2 -translate-y-1/2 left-1/2 scale-110 tablet:scale-100 top-[30%]">
2328
<Image
2429
alt="LicensePlate"
2530
src="/license_plate.png"

‎apps/main/src/app/(landing)/Sections/SponsorUs.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import React from "react";
2+
3+
const SponsorUs = () => {
4+
return (
5+
<div>
6+
<h1 className="text-3xl font-bold mb-6">Sponsor Us</h1>
7+
<p className="text-lg text-gray-600">Sponsor Us page placeholder.</p>
8+
</div>
9+
);
10+
};
11+
12+
export default SponsorUs;

0 commit comments

Comments
 (0)