fix:new design

still need to fix the mobile sizing
HacktheHill · Sep 26, 2023 · 0c79496 · 0c79496
1 parent ed1d1e5
commit 0c79496
Show file tree

Hide file tree

Showing 4 changed files with 376 additions and 55 deletions.
diff --git a/public/SVGs/2024/Sponsors/Maple Leaves/rectangle.svg b/public/SVGs/2024/Sponsors/Maple Leaves/rectangle.svg
diff --git a/src/components/App/App.jsx b/src/components/App/App.jsx
@@ -29,8 +29,8 @@ function App() {
 			{/* <Stats /> */}
 			{/* <Testimonials /> */}
 			{/* <Schedule /> */}
-			{/* <Sponsors /> */}
-			{/* <Collaborators /> */}
+			{<Sponsors/>}
+			{<Collaborators/>}
 			{/* <FAQ /> */}
 			{/* <Footer /> */}
 			{/* <Notification /> */}

diff --git a/src/components/Sponsors/Sponsors.jsx b/src/components/Sponsors/Sponsors.jsx
@@ -24,6 +24,9 @@ import uOttawa from "/Logos/uOttawa.svg";
 import uOttawaEsports from "/Logos/uOttawaEsports.svg";
 import uOGDC from "/Logos/uOttawaGDC.svg";
 import voiceflow from "/Logos/voiceflow.svg";
+import maple1 from "/SVGs/2024/Sponsors/Maple Leaves/mapleleaf-1.svg";
+import maple2 from "/SVGs/2024/Sponsors/Maple Leaves/mapleleaf-2.svg";
+import rectangle from "/SVGs/2024/Sponsors/Maple Leaves/rectangle.svg";
 
 function Sponsors() {
 	const data = {
@@ -67,59 +70,90 @@ function Sponsors() {
 	return (
 		<>
 			<section id="sponsors" className={styles["sponsors"]}>
-				<h1>{t("sponsors.title")}</h1>
-				<div>
-					<p className={styles["sponsors-text"]}>{t("sponsors.p")}</p>
-					<Button href="/assets/Hack-the-Hill-Sponsorship.pdf">{t("sponsors.button")}</Button>
-				</div>
-
-				<div className={styles["sponsor-icons"]}>
-					{Object.values(data.sponsors).map((tier, i) => (
-						<div key={i} className={styles["sponsor-icons-row"]}>
-							{tier.map((sponsor, j) => (
-								<a
-									key={j}
-									href={sponsor.href}
-									target="_blank"
-									rel="noreferrer"
-									className={styles["sponsor-icon-box"]}
-								>
-									<img
-										className={`${styles["sponsor-icon"]} ${
-											styles[`icon-${Object.keys(data.sponsors)[i]}`]
-										}`}
-										alt={`${sponsor.alt} logo`}
-										src={sponsor.src}
-									></img>
-								</a>
-							))}
+				<div className={styles["content-container"]}>
+					<img src={maple1} className={styles["image-size"]} />
+					<div className={styles["image-container"]}></div>
+					<div className={styles["text-container"]}>
+						<h1>{t("sponsors.title")}</h1>
+						<div className={styles["sponsorss"]}>
+							<p className={styles["sponsors-text"]}>{t("sponsors.p")}</p>
+							<Button href="/assets/Hack-the-Hill-Sponsorship.pdf">{t("sponsors.button")}</Button>
 						</div>
-					))}
+					</div>
+					<img src={maple2} className={styles["image2"]} />
 				</div>
 			</section>
+			<section id="container-rectangle" className={styles["container-sponsors"]}>
+  <div className={styles["white-rectangle"]}></div>
+  <div className={styles["yellow-rectangle"]}></div>
+</section>
+<section id="container-rectangle1" className={styles["container-sponsors1"]}>
+				<div className={styles["white-rectangle1"]}></div>
+				<div className={styles["white-rectangle1"]}></div>
+			</section>
+			<section id="container-rectangle2" className={styles["container-rectangle2"]}>
+				<div className={styles["yellow-rectangle2"]}></div>
+				<div className={styles["yellow-rectangle2"]}></div>
+</section>
+			<section id="container-rectangle3" className={styles["container-rectangle3"]}>
+
+				<div className={styles["yellow-rectangle3"]}></div>
+				<div className={styles["yellow-rectangle3"]}></div>
+				<div className={styles["yellow-rectangle3"]}></div>
+
+			</section>
+			<section id="container-rectangle3" className={styles["container-sponsors3"]}>
+				<div className={styles["white-rectangle3"]}></div>
+				<div className={styles["white-rectangle3"]}></div>
+				<div className={styles["white-rectangle3"]}></div>
+			</section>
+			<section id="container-rectangle4" className={styles["container-rectangle4"]}>
+
+				<div className={styles["yellow-rectangle4"]}></div>
+				<div className={styles["yellow-rectangle4"]}></div>
+				<div className={styles["yellow-rectangle4"]}></div>
+				<div className={styles["yellow-rectangle4"]}></div>
+			</section>
+			<section id="container-sponsors4" className={styles["container-sponsors4"]}>
+				<div className={styles["white-rectangle4"]}></div>
+				<div className={styles["white-rectangle4"]}></div>
+				<div className={styles["white-rectangle4"]}></div>
+				<div className={styles["white-rectangle4"]}></div>
+			</section>
 
 			<section id="community" className={styles["sponsors"]}>
 				<h1 id="community">{t("partners.title")}</h1>
-				<div className={styles["sponsor-icons-row"]}>
-					{data.collaborators.map((sponsor, i) => (
-						<a
-							key={i}
-							href={sponsor.href}
-							target="_blank"
-							rel="noreferrer"
-							className={styles["sponsor-icon-box"]}
-						>
-							<img
-								className={`${styles["sponsor-icon"]} ${styles["icon-medium"]}`}
-								alt={t("partners.icon_alt")}
-								src={sponsor.src}
-							></img>
-						</a>
-					))}
-				</div>
+				<section id="container-rectangle1-collab" className={styles["container-rectangle1-collab"]}>
+				<div className={styles["white-rectangle1-collab"]}></div>
+				<div className={styles["white-rectangle1-collab"]}></div>
+				<div className={styles["white-rectangle1-collab"]}></div>
+				<div className={styles["white-rectangle1-collab"]}></div>
+				</section>
+
+				<section id="container-rectangle2-collab" className={styles["container-rectangle2-collab"]}>
+					<div className={styles["yellow-rectangle1-collab"]}></div>
+					<div className={styles["yellow-rectangle1-collab"]}></div>
+					<div className={styles["yellow-rectangle1-collab"]}></div>
+					<div className={styles["yellow-rectangle1-collab"]}></div>
+				</section>
+
+				<section id="container-rectangle3-collab" className={styles["container-rectangle3-collab"]}>
+					<div className={styles["white-rectangle2-collab"]}></div>
+					<div className={styles["white-rectangle2-collab"]}></div>
+					<div className={styles["white-rectangle2-collab"]}></div>
+					<div className={styles["white-rectangle2-collab"]}></div>
+				</section>
+
+
+				<section id="container-rectangle4-collab" className={styles["container-rectangle4-collab"]}>
+					<div className={styles["yellow-rectangle2-collab"]}></div>
+					<div className={styles["yellow-rectangle2-collab"]}></div>
+					<div className={styles["yellow-rectangle2-collab"]}></div>
+					<div className={styles["yellow-rectangle2-collab"]}></div>
+			    </section>
 			</section>
 		</>
 	);
 }
 
-export default Sponsors;
+export default Sponsors;