From 1e650256e01e430a0f7587a167fb218468882ec1 Mon Sep 17 00:00:00 2001
From: darkicewolf50 <darkicewolf50@gmail.com>
Date: Sat, 15 Mar 2025 11:42:11 -0600
Subject: [PATCH] feat(homePage): css done, need to add perminant photos

---
 src/Home/Home.css | 79 +++++++++++++++++++++++++++++++++++++++++++++--
 src/Home/Home.jsx | 20 +++++++++---
 2 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/src/Home/Home.css b/src/Home/Home.css
index db83c1f..3bdd49d 100644
--- a/src/Home/Home.css
+++ b/src/Home/Home.css
@@ -35,11 +35,86 @@
 /* #HomeTop div h2 {
 } */
 
-#HomePageLayout div {
+.HomePageLayout div {
 	display: flex;
+	padding-top: 2.5svh;
+	padding-bottom: 2.5svh;
+	margin-left: 15svh;
+	margin-right: 15svh;
 }
 
-#HomePageLayout div div {
+.HomePageLayout img {
+	/* height: 5svh;
+	width: 5svw; */
+	flex-grow: 1;
+}
+
+.HomePageLayout a {
+	/* text-decoration: none; */
+	color: inherit;
+
+	border: solid 2px black;
+	padding: 10px;
+
+	text-align: center;
+}
+
+.HomePageLayout h2 {
+	border-bottom: solid 3px black;
+	padding-left: 2svw;
+	/* margin-left: 2svw; */
+	/* margin-right: 2svw; */
+}
+
+.HomePageLayout div div {
 	display: flex;
 	flex-direction: column;
+	width: 50%;
+	justify-content: space-between;
+	padding: 0px;
+}
+
+#HomeBottomGallery {
+	flex-grow: 0;
+	width: inherit;
+
+	height: 40svh;
+}
+
+#HomeSponsors {
+	display: flex;
+	flex-direction: column;
+
+	border-radius: 15px;
+	border: solid 2px black;
+
+	padding: 30px;
+}
+
+#HomeSponsors div {
+	width: inherit;
+}
+
+#HomeSponsors div div {
+	display: flex;
+	flex-direction: row;
+
+	width: inherit;
+
+	justify-content: space-around;
+	padding: 0px;
+}
+
+#HomeSponsorLinks {
+	display: flex;
+	flex-direction: row;
+	width: inherit;
+
+	justify-content: space-around;
+	background-color: aqua;
+}
+
+#HomeSponsorLinks a {
+	padding-left: 5svw;
+	padding-right: 5svw;
 }
diff --git a/src/Home/Home.jsx b/src/Home/Home.jsx
index 085ddb5..cb4e1f8 100644
--- a/src/Home/Home.jsx
+++ b/src/Home/Home.jsx
@@ -45,7 +45,7 @@ export default function Home() {
 					<h2>Catchphase goes here</h2>
 				</div>
 			</div>
-			<div id="HomePageLayout">
+			<div className="HomePageLayout">
 				<div>
 					<img
 						src="https://picsum.photos/200"
@@ -99,9 +99,21 @@ export default function Home() {
 						alt="possibly a montage mainly showcasing team members working"
 					/>
 				</div>
-				<div>
-					Sponsor Section
+				<div id="HomeSponsors">
+					<h2>Sponsor Section</h2>
 					<div>
+						<div>
+							<p>Sponsor 1</p>
+							<p>Sponsor 2</p>
+							<p>Sponsor 3</p>
+						</div>
+						<div>
+							<p>Sponsor 4</p>
+							<p>Sponsor 5</p>
+							<p>Sponsor 6</p>
+						</div>
+					</div>
+					<div id="HomeSponsorLinks">
 						<Link to={"/OurSponsors"}>See All</Link>
 						<Link to={"/OurSponsors"}>Support Us</Link>
 					</div>
@@ -123,7 +135,7 @@ export default function Home() {
 						<Link to={"/OurSponsors"}>Learn More</Link>
 					</div>
 				</div>
-				<div>
+				<div id="HomeBottomGallery">
 					<img
 						src="https://picsum.photos/200"
 						alt="(If we do a rotating images thing for the top, and still want to keep this on the bottom, maybe we can change it to a more collage type thing for this box)"