Merge pull request #99 from brainhack-vandy/Newthemeidea

Newthemeidea

Author: Ankith-Cirgir

public/assets/New_Home_bg.webp

@@ -14,7 +14,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #051a0a;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

public/assets/landing.svg

@@ -33,7 +33,7 @@
 }
 
 .project-card-view {
-  box-shadow: 0 4px 5px 3px rgba(119, 53, 136, 0.459);
+  box-shadow: 0 4px 5px 3px rgba(252, 255, 255, 0.3);
   color: white;
   background-color: transparent;
   opacity: 0.9;
@@ -45,7 +45,7 @@
 
 .project-card-view:hover {
   transform: scale(1.02);
-  box-shadow: 0 4px 8px 4px rgba(119, 53, 136, 0.6);
+  box-shadow: 0 4px 8px 4px rgba(252, 255, 255, 0.5);
 }
 
 /* Media Content Styles */
@@ -110,11 +110,13 @@
 .project-card-view .btn-primary {
   background-color: var(--imp-text-color);
   border-color: var(--imp-text-color);
+  color: #051a0a;
 }
 
 .project-card-view .btn-primary:hover {
-  background-color: #a94cce;
-  border-color: #a94cce;
+  background-color: #15803d;
+  border-color: #15803d;
+  color: #fff;
 }
 
 /* Section Spacing */

public/assets/logo.png

@@ -12,28 +12,18 @@ function Introduction() {
             <h1 className="introduction-heading">
               <span className="purple">A Quick Dive into Brainhack</span>
             </h1>
-            <p className="introduction-body">
-              So, you've heard of hackathons, right? Now, imagine that vibe but tailored specifically for the brainy world of neuroscience. That's Brainhack for you!
-              <br />
-              <br />
+            <div className="introduction-body">
+              <p>So, you've heard of hackathons, right? Now, imagine that vibe but tailored specifically for the brainy world of neuroscience. That's Brainhack for you!</p>
               <h2 className="introduction-subheading purple">
                 Why the Buzz Around Brainhack?
               </h2>
-              Neuroscience has some big questions on its plate. To tackle them (we're talking about massive datasets and some serious analytical firepower) Brainhack steps in. It's like a global rendezvous for brain enthusiasts, data geeks, and everyone in between.
-              <br />
-              <br />
+              <p>Neuroscience has some big questions on its plate. To tackle them (we're talking about massive datasets and some serious analytical firepower) Brainhack steps in. It's like a global rendezvous for brain enthusiasts, data geeks, and everyone in between.</p>
               <h2 className="introduction-subheading purple">
                 What's Cooking at Brainhack?
               </h2>
-              Brainhack isn't just another science conference. Picture a global playground where researchers from all corners and fields come together. They roll up their sleeves and dive headfirst into some cool neuroscience projects.
-              <br />
-              <br />
-              Brainhack has this groovy mix of Hackathon energy with Unconference spontaneity. Workshops? Check. Brainstorming data science tools for neuroscience? Double-check. A major chunk is all about open collaboration. Imagine teams from different disciplines geeking out and brainstorming solutions for neuroscience puzzles.
-              <br />
-              <br />
-              And because learning never stops, Brainhack has a side of tutorials. Dive into Python, get friendly with GitHub, float around in cloud computing, or dive deep into some fresh statistical methods. To wrap it up, Brainhack isn't just an event—it's a vibe. A place where data science flirts with neuroscience, all in the name of unlocking the secrets of the brain. Cool, right?
-              <br />
-              <br />
+              <p>Brainhack isn't just another science conference. Picture a global playground where researchers from all corners and fields come together. They roll up their sleeves and dive headfirst into some cool neuroscience projects.</p>
+              <p>Brainhack has this groovy mix of Hackathon energy with Unconference spontaneity. Workshops? Check. Brainstorming data science tools for neuroscience? Double-check. A major chunk is all about open collaboration. Imagine teams from different disciplines geeking out and brainstorming solutions for neuroscience puzzles.</p>
+              <p>And because learning never stops, Brainhack has a side of tutorials. Dive into Python, get friendly with GitHub, float around in cloud computing, or dive deep into some fresh statistical methods. To wrap it up, Brainhack isn't just an event—it's a vibe. A place where data science flirts with neuroscience, all in the name of unlocking the secrets of the brain. Cool, right?</p>
               <div className="introduction-notice">
                 Brainhack Vanderbilt is dedicated to ensuring a welcoming, harassment-free experience for everyone. We adhere to the Global Brainhack {" "}
                 <a href="https://brainhack.org/code-of-conduct.html"
@@ -42,7 +32,7 @@ function Introduction() {
                   className="purple introduction-link">
                   Code of Conduct.</a>
               </div>
-            </p>
+            </div>
           </Col>
           <Col md={4} className="introduction-image">
             <Tilt>

public/assets/science1.svg

@@ -70,8 +70,8 @@ function Sponsors() {
                         {sponsors.filter(s => s.gold).map((sponsor, index) => (
                             <Col
                                 key={index}
-                                lg={3}
-                                className="sponsor-icons sponsor-gold"
+                                lg={4}
+                                className="sponsor-icons sponsor-glow"
                             >
                                 <a href={sponsor.href} target="_blank" rel="noopener noreferrer">
                                     <img src={sponsor.imgSrc} alt={sponsor.alt} className="sponsor-image" />

src/App.css

@@ -2,7 +2,7 @@
 .home-section {
     position: relative;
     z-index: 0;
-    background-image: var(--image-gradient), url(../../../public/assets/home-bg.jpg);
+    background-image: var(--image-gradient), url(../../../public/assets/New_Home_bg.webp);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
@@ -48,7 +48,7 @@
 }
 
 .main-name {
-    color: #cd5ff8;
+    color: #347338;
 }
 
 .event-date {
@@ -73,19 +73,19 @@
 
 .btn-primary {
     color: #fff !important;
-    background-color: #623686 !important;
-    border-color: #623686 !important;
+    background-color: #134023 !important;
+    border-color: #134023 !important;
 }
 
 .btn-primary:hover:not(:disabled) {
     color: #fff !important;
-    background-color: #6d20c5d7 !important;
-    border-color: #6d20c5d7 !important;
+    background-color: #15803dd7 !important;
+    border-color: #15803dd7 !important;
 }
 
 .btn-primary:disabled {
-    background-color: #623686 !important;
-    border-color: #623686 !important;
+    background-color: #134023 !important;
+    border-color: #134023 !important;
     opacity: 0.7 !important;
     cursor: not-allowed !important;
     color: #fff !important;
@@ -220,14 +220,14 @@
 
 .Typewriter__wrapper {
     font-size: 1.5em;
-    color: #be6adf;
+    color: #347338;
     font-weight: 600;
     white-space: nowrap;
 }
 
 .Typewriter__cursor {
     font-size: 1.5em;
-    color: #b562d6;
+    color: #347338;
 }
 
 @media (max-width: 767px) {
@@ -393,7 +393,7 @@
   --------- */
 .hosts-section {
     padding: 4rem 0;
-    background-color: rgba(98, 54, 134, 0.3);
+    background-color: rgba(22, 101, 52, 0.3);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
 }
 
@@ -446,7 +446,7 @@
     padding: 4rem 0;
     margin-top: 2rem;
     margin-bottom: 2rem;
-    background-image: linear-gradient(to left, rgb(27 20 41), rgb(20 15 35));
+    background-image: linear-gradient(to left, rgb(5, 30, 12), rgb(3, 20, 8));
     overflow: hidden;
 }
 
@@ -455,20 +455,20 @@
     margin: 15px !important;
     padding: 10px !important;
     opacity: 0.93 !important;
-    border: 1.7px solid rgba(200, 137, 230, 0.637) !important;
+    border: 1.7px solid rgba(252, 255, 255, 0.4) !important;
     vertical-align: middle !important;
     text-align: center !important;
     border-radius: 5px !important;
     display: table !important;
-    box-shadow: 2px 2px 2px 2px rgba(89, 4, 168, 0.137);
+    box-shadow: 2px 2px 2px 2px rgba(39, 180, 60, 0.137);
     overflow: hidden !important;
     transition: all 0.4s ease 0s !important;
 }
 
 .sponsor-icons:hover {
     transform: scale(1.05) !important;
     overflow: hidden !important;
-    border: 2.2px solid rgba(197, 115, 230, 0.883) !important;
+    border: 2.2px solid rgba(252, 255, 255, 0.7) !important;
 }
 
 .sponsor-icon-images {
@@ -477,14 +477,9 @@
 
 }
 
-.sponsor-gold {
-    box-shadow: 0px 0px 10px 8px rgba(255, 215, 0, 0.5);
-    border: 1.7px solid rgba(255, 255, 0, 1) !important;
-}
-
-.sponsor-silver {
-    box-shadow: 0px 0px 10px 8px rgba(192, 192, 192, 0.5);
-    border: 1.7px solid rgba(192, 192, 192, 1) !important;
+.sponsor-glow {
+    box-shadow: 0px 0px 10px 8px rgba(178,234,186, 0.5);
+    border: 1.7px solid rgba(178,234,186, 1) !important;
 }
 
 @media (max-width: 767px) {

src/components/Educationals/educationals.css

@@ -21,7 +21,7 @@
     content: "•";
     position: absolute;
     left: 0;
-    color: #c770f0;
+    color: #347338;
 }
 
 .project-section {
@@ -41,7 +41,7 @@
 }
 
 .project-card-view {
-    box-shadow: 0 4px 5px 3px rgba(119, 53, 136, 0.459) !important;
+    box-shadow: 0 4px 5px 3px rgba(252, 255, 255, 0.3) !important;
     color: white !important;
     background-color: transparent !important;
     opacity: 1 !important;
@@ -52,7 +52,7 @@
 .project-card-view:hover {
     transform: scale(1.02) !important;
     overflow: hidden !important;
-    box-shadow: 0 4px 4px 5px rgba(129, 72, 144, 0.561) !important;
+    box-shadow: 0 4px 4px 5px rgba(252, 255, 255, 0.5) !important;
 }
 
 .project-card-row {
@@ -99,7 +99,7 @@
 
 .year-select-container select {
     width: 100px !important;
-    background-color: #623686 !important;
+    background-color: #134023 !important;
     color: white !important;
     border: 1px solid rgba(255, 255, 255, 0.2) !important;
     cursor: pointer !important;
@@ -112,7 +112,7 @@
 
 
 .year-select-container select:hover {
-    background-color: #6d20c5d7 !important;
+    background-color: #15803d !important;
 }
 
 .year-select-container select:focus {
@@ -122,14 +122,14 @@
 
 /* Style the dropdown options */
 .year-select-container select option {
-    background-color: #623686 !important;
+    background-color: #134023 !important;
     color: white !important;
     padding: 8px 12px !important;
 }
 
 /* Year Select Styles */
 .year-select {
-    background-color: #0c0513 !important;
+    background-color: #030d05 !important;
     color: white !important;
     border: 1px solid var(--imp-text-color) !important;
     cursor: pointer !important;
@@ -149,17 +149,17 @@
 }
 
 .year-select:hover {
-    border-color: #a94cce !important;
+    border-color: #347338 !important;
 }
 
 .year-select:focus {
     box-shadow: none !important;
-    border-color: #a94cce !important;
+    border-color: #347338 !important;
 }
 
 /* Ensure dropdown options are visible */
 .year-select option {
-    background-color: #0c0513 !important;
+    background-color: #030d05 !important;
     color: white !important;
     padding: 8px 12px !important;
 }
@@ -168,7 +168,7 @@
 .coming-soon {
     text-align: center;
     padding: 40px 20px;
-    background-color: rgba(15, 6, 33, 0.9);
+    background-color: rgba(3, 18, 7, 0.9);
     border-radius: 10px;
     margin-top: 20px;
 }