Move events and publications sections to top of home page

Author: rosemary-ai

pages/index.tsx

@@ -109,48 +109,6 @@ const Home = ({
             </div>
           </div>
           {/* End of Description */}
-          {/* Start of Quotes */}
-          <div
-            data-aos={isMobile ? 'fade' : 'fade-up'}
-            className={styles.quotes}
-          >
-            <h1>HEAR FROM US</h1>
-            <div className={[styles.carousel, styles.quoteCarousel].join(' ')}>
-              <QuoteSlideshow
-                height={450}
-                data={execQuotes}
-                homeLeftArrow={styles.homeLeftArrow}
-                homeRightArrow={styles.homeRightArrow}
-              />
-            </div>
-          </div>
-          {/* End of Quotes */}
-          {/* Start of Statistics */}
-          <div className={styles.stats}>
-            <Image
-              src="/stats-background-1.png"
-              className={styles.statsBackground}
-              alt="banner"
-              fill
-            />
-            <div>
-              <div data-aos="fade" className={styles.number}>
-                <div>
-                  <span>74</span>
-                  <p>Team Members</p>
-                </div>
-                <div>
-                  <span>32</span>
-                  <p>Sponsors</p>
-                </div>
-                <div>
-                  <span>3507</span>
-                  <p>Facebook Followers</p>
-                </div>
-              </div>
-            </div>
-          </div>
-          {/* End of Statistics */}
           {/* Start of What we've been up to */}
           <div
             data-aos={isMobile ? 'fade' : 'fade-up'}
@@ -204,6 +162,48 @@ const Home = ({
             </button>
           </div>
           {/* End of Publications */}
+          {/* Start of Statistics */}
+          <div className={styles.stats}>
+            <Image
+              src="/stats-background-1.png"
+              className={styles.statsBackground}
+              alt="banner"
+              fill
+            />
+            <div>
+              <div data-aos="fade" className={styles.number}>
+                <div>
+                  <span>74</span>
+                  <p>Team Members</p>
+                </div>
+                <div>
+                  <span>32</span>
+                  <p>Sponsors</p>
+                </div>
+                <div>
+                  <span>3507</span>
+                  <p>Facebook Followers</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          {/* End of Statistics */}
+          {/* Start of Quotes */}
+          <div
+            data-aos={isMobile ? 'fade' : 'fade-up'}
+            className={styles.quotes}
+          >
+            <h1>HEAR FROM US</h1>
+            <div className={[styles.carousel, styles.quoteCarousel].join(' ')}>
+              <QuoteSlideshow
+                height={450}
+                data={execQuotes}
+                homeLeftArrow={styles.homeLeftArrow}
+                homeRightArrow={styles.homeRightArrow}
+              />
+            </div>
+          </div>
+          {/* End of Quotes */}
           {/* Start of Sponsors & Affliations */}
           <div
             data-aos={isMobile ? 'fade' : 'fade-up'}

styles/Home.module.css

@@ -565,7 +565,6 @@ div .headline {
   margin: auto;
   padding-top: 100px;
   padding-bottom: 100px;
-  background-color: var(--section);
 }
 
 .publications h1 {
@@ -591,9 +590,9 @@ div .headline {
 .pubBtn {
   border: 1.5px solid var(--red);
   box-sizing: border-box;
-  background-color: var(--section);
   padding: 6px 6px;
   transition: 0.3s;
+  background-color: #fff;
 }
 
 .pubBtn a {
@@ -646,6 +645,7 @@ div .headline {
   margin: auto;
   padding-top: 100px;
   padding-bottom: 60px;
+  background-color: var(--section);
 }
 
 .beenUpTo h1 {

styles/HomeEventsCard.module.css

@@ -2,7 +2,7 @@
 
 .card {
   display: inline-block;
-  background-color: #f5f5f5;
+  background-color: #fff;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   width: 320px;