restlying

DSC-McMaster-U · Dec 17, 2024 · eb1f815 · eb1f815
1 parent c897459
commit eb1f815
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -5,7 +5,6 @@ import Icon from '@/app/icon.svg';
 
 const Footer = () => {
   const pages = [
-    { name: 'Home', href: '/home' },
     { name: 'Events', href: 'https://gdg.community.dev/gdg-on-campus-mcmaster-university-hamilton-canada/' },
     { name: 'Newsletters', href: '/newsletters' },
     { name: 'Team', href: '/team' },

diff --git a/app/globals.css b/app/globals.css
@@ -36,11 +36,12 @@ p {
 }
 
 main {
-  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pt-16 md:pt-16 lg:pt-24;
+
 }
 
 section {
   @apply py-8 sm:py-12 lg:py-16;
+  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
 }
 
 header {
@@ -109,3 +110,10 @@ footer {
 .newsletter-number {
   @apply list-inside list-decimal text-base sm:text-lg lg:text-xl dark:text-google-lightGrey text-google-darkGrey;
 }
+
+.geometric-background-1 {
+  background-color: #FBBC04;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60'%3E%3Cg %3E%3Crect fill='%23FBBC04' width='11' height='11'/%3E%3Crect fill='%23fbbd0f' x='10' width='11' height='11'/%3E%3Crect fill='%23fbbe17' y='10' width='11' height='11'/%3E%3Crect fill='%23fbbf1d' x='20' width='11' height='11'/%3E%3Crect fill='%23fbc022' x='10' y='10' width='11' height='11'/%3E%3Crect fill='%23fbc127' y='20' width='11' height='11'/%3E%3Crect fill='%23fbc22b' x='30' width='11' height='11'/%3E%3Crect fill='%23fbc330' x='20' y='10' width='11' height='11'/%3E%3Crect fill='%23fbc433' x='10' y='20' width='11' height='11'/%3E%3Crect fill='%23fbc537' y='30' width='11' height='11'/%3E%3Crect fill='%23fbc53b' x='40' width='11' height='11'/%3E%3Crect fill='%23fbc63e' x='30' y='10' width='11' height='11'/%3E%3Crect fill='%23fbc742' x='20' y='20' width='11' height='11'/%3E%3Crect fill='%23fbc845' x='10' y='30' width='11' height='11'/%3E%3Crect fill='%23fcc948' y='40' width='11' height='11'/%3E%3Crect fill='%23fcca4b' x='50' width='11' height='11'/%3E%3Crect fill='%23fccb4e' x='40' y='10' width='11' height='11'/%3E%3Crect fill='%23fccc51' x='30' y='20' width='11' height='11'/%3E%3Crect fill='%23fccd54' x='20' y='30' width='11' height='11'/%3E%3Crect fill='%23fcce57' x='10' y='40' width='11' height='11'/%3E%3Crect fill='%23fccf5a' y='50' width='11' height='11'/%3E%3Crect fill='%23fccf5d' x='60' width='11' height='11'/%3E%3Crect fill='%23fcd060' x='50' y='10' width='11' height='11'/%3E%3Crect fill='%23fcd163' x='40' y='20' width='11' height='11'/%3E%3Crect fill='%23fcd265' x='30' y='30' width='11' height='11'/%3E%3Crect fill='%23fcd368' x='20' y='40' width='11' height='11'/%3E%3Crect fill='%23fcd46b' x='10' y='50' width='11' height='11'/%3E%3Crect fill='%23fcd56e' x='70' width='11' height='11'/%3E%3Crect fill='%23fcd671' x='60' y='10' width='11' height='11'/%3E%3Crect fill='%23fcd673' x='50' y='20' width='11' height='11'/%3E%3Crect fill='%23fcd776' x='40' y='30' width='11' height='11'/%3E%3Crect fill='%23fcd879' x='30' y='40' width='11' height='11'/%3E%3Crect fill='%23fcd97b' x='20' y='50' width='11' height='11'/%3E%3Crect fill='%23fcda7e' x='80' width='11' height='11'/%3E%3Crect fill='%23fcdb81' x='70' y='10' width='11' height='11'/%3E%3Crect fill='%23fddc84' x='60' y='20' width='11' height='11'/%3E%3Crect fill='%23fddc86' x='50' y='30' width='11' height='11'/%3E%3Crect fill='%23fddd89' x='40' y='40' width='11' height='11'/%3E%3Crect fill='%23fdde8c' x='30' y='50' width='11' height='11'/%3E%3Crect fill='%23fddf8e' x='90' width='11' height='11'/%3E%3Crect fill='%23fde091' x='80' y='10' width='11' height='11'/%3E%3Crect fill='%23fde194' x='70' y='20' width='11' height='11'/%3E%3Crect fill='%23fde196' x='60' y='30' width='11' height='11'/%3E%3Crect fill='%23fde299' x='50' y='40' width='11' height='11'/%3E%3Crect fill='%23fde39b' x='40' y='50' width='11' height='11'/%3E%3Crect fill='%23fde49e' x='90' y='10' width='11' height='11'/%3E%3Crect fill='%23fde5a1' x='80' y='20' width='11' height='11'/%3E%3Crect fill='%23fde5a3' x='70' y='30' width='11' height='11'/%3E%3Crect fill='%23fde6a6' x='60' y='40' width='11' height='11'/%3E%3Crect fill='%23fde7a9' x='50' y='50' width='11' height='11'/%3E%3Crect fill='%23fde8ab' x='90' y='20' width='11' height='11'/%3E%3Crect fill='%23fde9ae' x='80' y='30' width='11' height='11'/%3E%3Crect fill='%23fee9b1' x='70' y='40' width='11' height='11'/%3E%3Crect fill='%23feeab3' x='60' y='50' width='11' height='11'/%3E%3Crect fill='%23feebb6' x='90' y='30' width='11' height='11'/%3E%3Crect fill='%23feecb8' x='80' y='40' width='11' height='11'/%3E%3Crect fill='%23feedbb' x='70' y='50' width='11' height='11'/%3E%3Crect fill='%23feedbe' x='90' y='40' width='11' height='11'/%3E%3Crect fill='%23feeec0' x='80' y='50' width='11' height='11'/%3E%3Crect fill='%23FEEFC3' x='90' y='50' width='11' height='11'/%3E%3C/g%3E%3C/svg%3E");
+  background-attachment: fixed;
+  background-size: cover;
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -20,7 +20,7 @@ const HeroSection = async () => {
   );
 
   return (
-    <section id="hero" className="flex md:flex-row flex-col gap-y-8 md:gap-y-0">
+    <section id="hero" className="flex md:flex-row flex-col gap-y-8 md:gap-y-0 min-h-screen items-center">
       <div className="md:w-2/3 flex flex-col justify-start gap-y-4" id="hero-content">
         <h1 className="hero-title">{generalInfo.club && generalInfo.club}</h1>
         <h5>{generalInfo.school && generalInfo.school}</h5>
@@ -46,7 +46,7 @@ const HeroSection = async () => {
         <Image 
           src={hero}
           alt="Roundtable" 
-          className="object-cover w-full h-full"
+          className="object-contain w-full h-full"
         />
       </div>
     </section>
@@ -95,21 +95,23 @@ const AboutUsSection = async () => {
   }
 
   return (
-    <section id="about-us" className="flex flex-col gap-y-8">
-      <div className="flex flex-col gap-y-2">
-        <h2>{about.title}</h2>
-        <p>{about.description}</p>  
-      </div>
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        { about.cards && about.cards.map((card: { _key: string, title: string, description: string }) => (
-          <div key={card._key} className="flex flex-col gap-y-2">
-            <h4>{card.title}</h4>
-            <p>{card.description}</p>
-          </div>
-          ))
-        }
-      </div>
-    </section>
+    <div className="geometric-background-1 w-full">
+      <section id="about-us" className="flex flex-col gap-y-8">
+        <div className="flex flex-col gap-y-2">
+          <h2 className="text-google-darkGrey">{about.title}</h2>
+          <p className="text-google-darkGrey">{about.description}</p>  
+        </div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          { about.cards && about.cards.map((card: { _key: string, title: string, description: string }) => (
+            <div key={card._key} className="flex flex-col gap-y-2">
+              <h4 className="text-google-darkGrey">{card.title}</h4>
+              <p className="text-google-darkGrey">{card.description}</p>
+            </div>
+            ))
+          }
+        </div>
+      </section>
+    </div>
   );
 };
 
@@ -273,8 +275,8 @@ export default async function Index() {
       <Header />
       <main>
         <HeroSection />
-        <SponsorsSection />
         <AboutUsSection />
+        <SponsorsSection />
         <EventsSection />
         <NewslettersSection />
       </main>