[Giving Day] New Heros

new-dti-website/components/hero.tsx

@@ -0,0 +1,42 @@
+import SectionWrapper from './hoc/SectionWrapper';
+
+type HeroProps = {
+  title: string;
+  description: string;
+  image: {
+    src: string;
+    alt: string;
+  };
+  action?: {
+    buttonText: string;
+    link: string;
+    disabled?: boolean;
+  };
+};
+
+const Hero = ({ title, description, image, action }: HeroProps) => (
+  <SectionWrapper id={`${title} hero`}>
+    <img src={image.src} alt={image.alt} height={600} className="w-[100%] rounded-[16px]" />
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <h1 className="md:text-[40px] md:leading-[46px] font-bold mt-4 xs:text-[32px] xs:leading-[36.8px] text-[#ffffff]">
+          {title}
+        </h1>
+        <p className="md:text-[18px] text-hero-secondary leading-[28.8px]">{description}</p>
+      </div>
+      {action && (
+        <a
+          className={`primary-button ${
+            action.disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
+          }`}
+          href={action.disabled ? '' : action.link}
+          onClick={action.disabled ? (e) => e.preventDefault() : undefined}
+        >
+          {action.buttonText}
+        </a>
+      )}
+    </div>
+  </SectionWrapper>
+);
+
+export default Hero;

new-dti-website/src/app/apply/page.tsx

@@ -8,57 +8,36 @@ import Banner from '../../../components/apply/Banner';
 import SectionWrapper from '../../../components/hoc/SectionWrapper';
 import { isAppOpen } from '../../utils/dateUtils';
 import useTitle from '../../hooks/useTitle';
+import Hero from '../../../components/hero';
 
 const ApplyHero = () => {
   const isApplicationOpen = isAppOpen();
 
   return (
-    <section
-      id="Apply Hero"
-      className="text-[#FEFEFE] min-h-[calc(100vh-136px)] flex items-center relative"
-    >
+    <section id="Apply Hero" className="text-[#FEFEFE] flex items-center relative">
       {!isApplicationOpen && (
         <Banner
           message={`We're no longer accepting applications for ${config.semester}. Stay tuned for opportunities next semester!`}
           variant={'accent'}
         />
       )}
-      <SectionWrapper id={'Apply Page Hero Section'} className="translate-y-8">
-        <div className="flex lg:flex-row xs:flex-col gap-x-[60px]">
-          <h1 className="flex items-center md:text-header md:leading-header xs:text-[48px] xs:leading-header-xs font-semibold">
-            <div>
-              JOIN OUR <span className="text-[#FF4C4C]">COMMUNITY</span>
-            </div>
-          </h1>
-          <div className="flex flex-col gap-6">
-            <h2
-              className="font-bold md:text-subheader xs:text-[24px] md:leading-subheader
-          xs:leading-[29px] text-hero-primary"
-            >
-              Down to innovate?
-            </h2>
-            <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-              We strive for inclusivity, and encourage passionate applicants to apply regardless of
-              experience. We'd love to work with someone like you.
-            </p>
-            {isApplicationOpen ? (
-              <a key="Apply Page" href={config.applicationLink} className="primary-button">
-                Apply now
-              </a>
-            ) : (
-              <button
-                key="Apply Page"
-                className="primary-button opacity-50 cursor-not-allowed"
-                onClick={(e) => e.preventDefault()}
-                aria-disabled="true"
-              >
-                Apply now
-              </button>
-            )}
-          </div>
-        </div>
-      </SectionWrapper>
-      <div className="relative"></div>
+      <div className="flex items-center pt-12 w-[100%]">
+        <Hero
+          title={'Join our community'}
+          description={
+            "We strive for inclusivity, and encourage passionate applicants to apply regardless of experience. We'd love to work with someone like you."
+          }
+          image={{
+            src: '/images/apply-hero.png',
+            alt: 'DTI members hosting a recruitment event with prospective applicants'
+          }}
+          action={{
+            buttonText: 'Apply now',
+            link: config.applicationLink,
+            disabled: true
+          }}
+        />
+      </div>
     </section>
   );
 };

new-dti-website/src/app/course/page.tsx

@@ -23,6 +23,7 @@ import DDProjects from '../../../components/course/DDProjects';
 import { TestimonialCardProps } from '../../../components/course/TestimonialCard';
 import SectionWrapper from '../../../components/hoc/SectionWrapper';
 import useTitle from '../../hooks/useTitle';
+import Hero from '../../../components/hero';
 
 //* DATA
 const { key_experiences } = experiencesData;
@@ -61,37 +62,18 @@ export default function Courses() {
             setSelectedMember(undefined);
         }}
       >
-        {/* Hero Section */}
-        <section id="Hero Section">
-          <div
-            className="bg-black text-white md:my-[100px] xs:my-9 min-h-[calc(100vh-300px)] 
-    flex items-center w-full overflow-hidden"
-          >
-            <SectionWrapper id={'Product Page Hero Section'}>
-              <div className="flex justify-around gap-y-10 md:gap-x-20 lg:flex-row flex-col relative z-10 md:gap-y-20">
-                <div className="flex flex-col gap-y-8 md:gap-y-0">
-                  <div>
-                    <h1 className="font-semibold md:text-header xs:text-[52px] md:leading-header xs:leading-header-xs whitespace-pre">
-                      OUR <br />
-                      <span className="text-[#FF4C4C]">COURSE</span>
-                    </h1>
-                  </div>
-                </div>
-
-                <div className="flex flex-col justify-center gap-6 ">
-                  <h2 className="font-bold md:text-subheader xs:text-2xl text-hero-primary md:leading-subheader">
-                    Teaching the community
-                  </h2>
-                  <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-                    A project team is meant, above all, to be a learning experience. Given our
-                    mission of community impact, we want to help everyone learn and grow through our
-                    training course in product development.
-                  </p>
-                </div>
-              </div>
-            </SectionWrapper>
-          </div>
-        </section>
+        <div className="lg:pb-24 pb-12">
+          <Hero
+            title={'Our course'}
+            description={
+              'A project team is meant, above all, to be a learning experience. Given our mission of community impact, we want to help everyone learn and grow through our training course in product development.'
+            }
+            image={{
+              src: '/images/course-hero.png',
+              alt: 'DTI member presenting a course to an auditorium'
+            }}
+          />
+        </div>
 
         {/* WRAPPER */}
         <div

new-dti-website/src/app/initiatives/page.tsx

@@ -3,45 +3,24 @@
 import InitiativeDisplay from '../../../components/initiatives/InitiativeDisplay';
 import SectionWrapper from '../../../components/hoc/SectionWrapper';
 import useTitle from '../../hooks/useTitle';
-
-const InitiativeHero = () => (
-  <section
-    id="initiative-hero"
-    className="bg-black text-[#FEFEFE] min-h-[calc(100vh-100px)] h-full flex items-center
-    relative overflow-hidden"
-  >
-    <SectionWrapper id={'Initiatives Pages Hero Section'}>
-      <div className="flex lg:flex-row xs:flex-col gap-x-[60px] relative z-10 md:items-center">
-        <h1
-          className="flex items-center md:text-header md:leading-header xs:leading-header-xs 
-        xs:text-[48px] font-semibold"
-        >
-          <div>
-            INSPIRING <span className="text-[#FF4C4C]">INNOVATION</span>
-          </div>
-        </h1>
-        <div className="flex flex-col gap-6">
-          <h2
-            className="font-bold md:text-subheader xs:text-[24px] md:leading-subheader
-          xs:leading-[29px] text-hero-primary"
-          >
-            Making impact
-          </h2>
-          <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-            What sets us apart from other project teams is our desire to share our discoveries with
-            other students and members of the greater Ithaca community.
-          </p>
-        </div>
-      </div>
-    </SectionWrapper>
-  </section>
-);
+import Hero from '../../../components/hero';
 
 const InitiativePage = () => {
   useTitle('Initiatives');
   return (
     <div className="bg-white flex flex-col">
-      <InitiativeHero />
+      <div className="lg:pb-24 pb-12 bg-[#000000]">
+        <Hero
+          title={'Inspiring innovation'}
+          description={
+            'What sets us apart from other project teams is our desire to share our discoveries with other students and members of the greater Ithaca community.'
+          }
+          image={{
+            src: '/images/initiatives-hero.png',
+            alt: 'DTI member engaging in a workshop with a child'
+          }}
+        />
+      </div>
       <SectionWrapper id={'Initiatives Display'}>
         <InitiativeDisplay />
       </SectionWrapper>

new-dti-website/src/app/products/page.tsx

@@ -5,8 +5,8 @@ import Image from 'next/image';
 import ImageCarousel from '../../../components/products/imageCarousel';
 import Connector from '../../../components/products/lines';
 import products from '../../../components/products/products.json';
-import SectionWrapper from '../../../components/hoc/SectionWrapper';
 import useTitle from '../../hooks/useTitle';
+import Hero from '../../../components/hero';
 
 export default function Page() {
   const productIcons = [...products.current, ...products.upcoming].map((product) => ({
@@ -17,25 +17,17 @@ export default function Page() {
   useTitle('Products');
 
   return (
-    <div className="overflow-x-hidden md:pt-[100px] xs:pt-9">
-      <SectionWrapper id={'Products Page Hero Section'} className="mb-20 lg:mb-20">
-        <div className="flex lg:flex-row xs:flex-col relative z-10">
-          <div className="mr-24">
-            <h1 className="font-semibold text-white md:text-header xs:text-[52px] md:leading-header xs:leading-header-xs">
-              OUR <span className="text-[#FF4C4C]">PRODUCTS</span>
-            </h1>
-          </div>
-          <div className="flex flex-col justify-center gap-6">
-            <h2 className="font-bold md:text-subheader xs:text-2xl text-hero-primary md:leading-subheader">
-              Real impact
-            </h2>
-            <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-              Each of our projects address an unfulfilled need that exists in our community using
-              human-centered design and software engineering.
-            </p>
-          </div>
-        </div>
-      </SectionWrapper>
+    <div className="overflow-x-hidden">
+      <Hero
+        title={'Our products'}
+        description={
+          'Each of our projects address an unfulfilled need that exists in our community using human-centered design and software engineering.'
+        }
+        image={{
+          src: '/images/products-hero.png',
+          alt: 'DTI students brainstorming with sticky notes'
+        }}
+      />
 
       <ImageCarousel items={productIcons} />
 

new-dti-website/src/app/sponsor/page.tsx

@@ -8,40 +8,27 @@ import SponsorshipTable from '../../../components/sponsor/SponsorshipTable';
 import SectionWrapper from '../../../components/hoc/SectionWrapper';
 import config from '../../../config.json';
 import useTitle from '../../hooks/useTitle';
+import Hero from '../../../components/hero';
 
 const { impacts } = impactData;
 const { companies } = companyData;
 
 const SponsorHero = () => (
-  <div
-    className="bg-black text-white md:my-[100px] xs:my-9 min-h-[calc(100vh-300px)] 
-    flex items-center w-full overflow-hidden"
-  >
-    <SectionWrapper id={'Sponsors Page Hero Section'}>
-      <div className="flex lg:flex-row xs:flex-col gap-y-9 gap-x-24 relative z-10">
-        <div className="flex items-center">
-          <h1
-            className="font-semibold md:text-header xs:text-[52px] md:leading-header
-          xs:leading-header-xs whitespace-pre"
-          >
-            SUPPORT <br />
-            <span className="text-[#FF4C4C]">OUR TEAM</span>
-          </h1>
-        </div>
-        <div className="flex flex-col justify-center gap-6">
-          <h2 className="font-bold md:text-subheader xs:text-2xl text-hero-primary md:leading-subheader">
-            Let's collaborate
-          </h2>
-          <p className="md:text-lg xs:text-sm text-hero-secondary md:leading-body-text">
-            The generous contributions of our supporters and sponsors allow our team to continue
-            building products and hosting initiatives to help the Cornell and Ithaca communities.
-          </p>
-          <a href={config.donationLink} className="primary-button">
-            Donate now
-          </a>
-        </div>
-      </div>
-    </SectionWrapper>
+  <div className="bg-black text-white lg:pb-24 pb-12 items-center w-full overflow-hidden">
+    <Hero
+      title={'Support our team'}
+      description={
+        'The generous contributions of our supporters and sponsors allow our team to continue building products and hosting initiatives to help the Cornell and Ithaca communities.'
+      }
+      image={{
+        src: '/images/sponsor-hero.png',
+        alt: 'DTI members collaborating together'
+      }}
+      action={{
+        buttonText: 'Donate now',
+        link: config.donationLink
+      }}
+    />
   </div>
 );
 

new-dti-website/src/app/team/page.tsx

@@ -1,16 +1,25 @@
 'use client';
 
-import TeamHero from '../../../components/team/TeamHero';
 import TeamAbout from '../../../components/team/TeamAbout';
 import MemberDisplay from '../../../components/team/MemberDisplay';
 import TeamFooter from '../../../components/team/TeamFooter';
 import useTitle from '../../hooks/useTitle';
+import Hero from '../../../components/hero';
 
 const TeamPage = () => {
   useTitle('Team');
   return (
     <>
-      <TeamHero />
+      <Hero
+        title={'Working together'}
+        description={
+          'We are Cornell DTI. But individually, we are a talented, diverse group of students from different colleges and countries striving to make a difference in the Cornell community and beyond.'
+        }
+        image={{
+          src: '/images/about-hero.png',
+          alt: 'DTI students posing in front of Gates Hall'
+        }}
+      />
       <TeamAbout />
       <MemberDisplay />
       <TeamFooter />