done

HackDavis · Feb 9, 2025 · 1685a6b · 1685a6b
1 parent 5d547ab
commit 1685a6b
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 40 deletions.
diff --git a/app/(pages)/about-us/_components/Archives/Archives.tsx b/app/(pages)/about-us/_components/Archives/Archives.tsx
@@ -85,9 +85,11 @@ export default function Archives() {
   return (
     <CarouselContextProvider>
       <div className={styles.container}>
-        <div className={styles.header}>
-          <h2 className={styles.title}>From the archive</h2>
-          <div className={styles.arrows_desktop}>
+        <div className="flex flex-row items-center justify-between px-16">
+          <h2 className="font-metropolis text-xl font-bold text-[#123041] sm:text-[2.25rem]">
+            From the archive
+          </h2>
+          <div className="hidden sm:block">
             <CarouselArrows />
           </div>
         </div>

diff --git a/app/(pages)/about-us/_components/CelebrateWrapper/CelebrateWrapper.tsx b/app/(pages)/about-us/_components/CelebrateWrapper/CelebrateWrapper.tsx
@@ -4,11 +4,11 @@ export default function CelebrateWrapper({
   children: React.ReactNode;
 }) {
   return (
-    <main className="pt-12 text-background-dark">
+    <main className="text-background-dark sm:p-[15%]">
       <div className="flex flex-col gap-4 rounded-3xl bg-gray-100/50 backdrop-blur-sm">
-        <div className="flex flex-col items-start justify-center gap-4 p-8 pb-0 pt-12 text-start">
+        <div className="flex flex-col items-start justify-center gap-4 p-8 pb-0 pl-16 pr-16 pt-12 text-start">
           <div className="w-[90%]">
-            <h1 className="text-5xl font-bold">Celebrate our past with us!</h1>
+            <h1 className="text-4xl font-bold">Celebrate our past with us!</h1>
           </div>
           <p className="text-lg font-semibold">
             We could not have done any of this without you. Your support means

diff --git a/app/(pages)/about-us/_components/CloudBackground/CloudBackground.module.scss b/app/(pages)/about-us/_components/CloudBackground/CloudBackground.module.scss
@@ -1,28 +1,5 @@
 @import '@globals/styles/mixins.scss';
 
-// @include desktop {
-//     .container {
-//         background-image: 
-//             url('/images/cloud_background/TopClouds.svg'),
-//             linear-gradient(to bottom, var(--sky-background) 0%, #D5FCD1 100%);
-//         background-repeat: no-repeat;
-//         background-size: contain; 
-//         background-position: top center; 
-//         padding-top: 15%;
-//         padding-bottom: 5%;
-//         display: flex; 
-//         align-items: stretch;
-//         height: 100vh; /* Full screen height */
-//         width: 100%;
-
-//         .child1, .child2 {
-//             width: 50%;
-//             position: relative; /* Required for Next.js Image fill */
-//             border: 3px solid black;
-//         }
-//     }
-// }
-
 .container {
     background-image: 
         url('/images/cloud_background/TopClouds.svg'),
@@ -35,8 +12,9 @@
     padding-bottom: 75%;
     display: flex; 
     align-items: stretch;
-    height: 100vh; /* Full screen height */
+    height: 1976px; /* Full screen height */
     width: 100%;
+    position: relative;
 
     .child1 {
         background-image: url('/images/cloud_background/LeftClouds.svg');

diff --git a/app/(pages)/about-us/_components/CloudBackground/CloudBackground.tsx b/app/(pages)/about-us/_components/CloudBackground/CloudBackground.tsx
@@ -1,11 +1,16 @@
 import styles from './CloudBackground.module.scss';
 // import Image from 'next/image';
 
-export default function CloudBackground() {
+export default function CloudBackground({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
     <div className={styles.container}>
       <div className={styles.child1}></div>
       <div className={styles.child2}></div>
+      <div className="absolute inset-0 w-full">{children}</div>
     </div>
   );
 }
diff --git a/app/(pages)/about-us/_components/Recap/Recap.tsx b/app/(pages)/about-us/_components/Recap/Recap.tsx
@@ -3,10 +3,10 @@ import RecapAwards from './recap_awards';
 
 export default function Recap() {
   return (
-    <main className="flex flex-col justify-center bg-transparent text-background-dark">
+    <main className="flex flex-col justify-center bg-transparent pl-16 pr-16 text-background-dark">
       <div className="flex flex-col">
-        <div className="w-[90%] p-8">
-          <h2 className="text-4xl font-bold">HackDavis 2024 Recap</h2>
+        <div className="w-[90%]">
+          <h2 className="text-2xl font-bold">HackDavis 2024 Recap</h2>
         </div>
         <div className="flex flex-col gap-4 sm:-mt-8 sm:flex-row sm:items-center">
           <div className="w-full">

diff --git a/app/(pages)/about-us/_components/Recap/recap_awards.tsx b/app/(pages)/about-us/_components/Recap/recap_awards.tsx
@@ -3,7 +3,7 @@ import trophies_image from '@public/images/recap/trophies.svg';
 
 export default function RecapAwards() {
   return (
-    <div className="flex w-full flex-col items-center justify-center p-8">
+    <div className="flex w-full flex-col items-center justify-center">
       <Image
         src={trophies_image}
         alt="trophies"
@@ -13,9 +13,9 @@ export default function RecapAwards() {
         href="https://hackdavis-2024.devpost.com/project-gallery"
         target="_blank"
         rel="noopener noreferrer"
-        className="mt-8 flex w-full items-center justify-center rounded-full bg-[#FFC53D] px-6 py-2 font-semibold text-[#58452B] transition-opacity hover:opacity-90"
+        className="mt-4 flex max-h-[50px] w-full items-center justify-center overflow-hidden text-ellipsis whitespace-nowrap rounded-full bg-[#FFC53D] px-6 py-3 font-semibold text-[#58452B] transition-opacity hover:opacity-90 sm:mt-8"
       >
-        VIEW 2024 WINNERS
+        <span className="text-xs sm:text-base">VIEW 2024 WINNERS</span>
       </a>
     </div>
   );

diff --git a/app/(pages)/about-us/page.tsx b/app/(pages)/about-us/page.tsx
@@ -4,19 +4,19 @@ import OurTeam from './_components/OurTeam/OurTeam';
 import Archives from './_components/Archives/Archives';
 import CelebrateWrapper from './_components/CelebrateWrapper/CelebrateWrapper';
 import Recap from './_components/Recap/Recap';
-
+import CloudBackground from './_components/CloudBackground/CloudBackground';
 export default function AboutUs() {
   return (
     <div className="overflow-hidden">
       <Hero />
       <Values />
       <OurTeam />
-      <div className="bg-blue-300 sm:p-[10%]">
+      <CloudBackground>
         <CelebrateWrapper>
           <Recap />
           <Archives />
         </CelebrateWrapper>
-      </div>
+      </CloudBackground>
     </div>
   );
 }