Merge pull request #3 from cyying28/curtis-globe-title-redesign

Globe + Welcome Msg/Buttons Redesign (according to FIGMA)
fullstackatbrown · Nov 15, 2024 · 5b7b542 · 5b7b542
2 parents 5f25e8f + caac7c4
commit 5b7b542
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git a/fullstack-devcontainer/home/frontend/src/components/hero/globe-wrapper.tsx b/fullstack-devcontainer/home/frontend/src/components/hero/globe-wrapper.tsx
@@ -5,8 +5,8 @@ import Globe from "@/components/hero/globe-source";
 
 export default function GlobeAndStars() {
   return (
-    <div className="w-full h-full">
-    <Particles className="absolute inset-0 z-1" quantity={150} ease={80} color={"#808080"} refresh />
+    <div className="particle-container relative w-full h-full">
+      <Particles className="absolute inset-0 z-1" quantity={150} ease={80} color={"#808080"} refresh />
     <div className="globe-container relative w-full h-full">
       <Globe className="absolute inset-0 z-2"/>
     </div>

diff --git a/fullstack-devcontainer/home/frontend/src/pages/Home.css b/fullstack-devcontainer/home/frontend/src/pages/Home.css
@@ -78,15 +78,15 @@
 
 .title-text {
   font-weight: bold;
-  font-size: 3vw;
-  line-height: 3.5vw;
+  font-size: 15vh;
+  line-height: 17vh;
   padding-bottom: 1.5vw;
 }
 
-.body-text {
+/* .body-text {
   font-size: 1.5vw;
   line-height: 2vw;
-}
+} */
 
 .side-by-side {
   display: flex;
@@ -98,8 +98,43 @@
   height: 90vh;
 }
 
-.intro-text {
+.welcome {
   padding-top: 5vh;
   width: 100%;
   height: 100%;
+}
+
+.welcome-buttons {
+  display: flex;
+  flex-direction: row;
+  gap: 10vh;
+  padding-left: 10vh;
+  padding-top: 2vh;
+  align-items: center;
+}
+
+.join-button {
+  color: rgba(255, 255, 255, 0.85);
+  padding: 1vh 1vw;
+  background-color: #07223e; /* Set default color */
+  border-radius: 1vh;
+  border-width: 0.1vh;
+  border-color: rgba(255, 255, 255, 0.5);
+  box-shadow: 0vw 0vh 1vh 0.5vh rgba(255, 255, 255, 0.1);
+  font-size: 2vw;
+}
+
+.join-button:hover {
+  background-color: #092e55;
+  box-shadow: 0vw 0vh 1vh 0.5vh rgba(255, 255, 255, 0.2);
+  color: rgba(255, 255, 255, 0.95);
+}
+
+.contact-button {
+  color: rgba(255, 255, 255, 0.75);
+  font-size: 2vw;
+}
+
+.contact-button:hover {
+  color: rgba(255, 255, 255, 0.95);
 }
diff --git a/fullstack-devcontainer/home/frontend/src/pages/Home.tsx b/fullstack-devcontainer/home/frontend/src/pages/Home.tsx
@@ -8,14 +8,14 @@ function Home() {
     <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">  
       <Navbar />
       <div className="side-by-side">
-        <div className="intro-text">
+        <div className="welcome">
           <div className="title-text">
-            <h1>Welcome to Brown Space Engineering!</h1>
+            <h1>Brown<br />Space<br />Engineering</h1>
+          </div>
+          <div className="welcome-buttons">
+            <button className="join-button">Join BSE</button>
+            <button className="contact-button">Contact Us</button>
           </div>
-          <p className="body-text">
-            Explore all that the most successful space engineering club
-            has to offer! Here is where innovation is at its finest.
-          </p>
         </div>
           <GlobeAndStars/>
       </div>