diff --git a/new-dti-website/components/hero.tsx b/new-dti-website/components/hero.tsx new file mode 100644 index 000000000..6ac64cb1b --- /dev/null +++ b/new-dti-website/components/hero.tsx @@ -0,0 +1,41 @@ +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) => ( + + {image.alt} +
+
+

+ {title} +

+

{description}

+
+ {action && + (action.disabled ? ( + + ) : ( + + {action.buttonText} + + ))} +
+ +); + +export default Hero; diff --git a/new-dti-website/components/team/TeamHero.tsx b/new-dti-website/components/team/TeamHero.tsx deleted file mode 100644 index d3e6156e0..000000000 --- a/new-dti-website/components/team/TeamHero.tsx +++ /dev/null @@ -1,239 +0,0 @@ -import { - Dispatch, - KeyboardEvent, - RefObject, - SetStateAction, - useEffect, - useRef, - useState -} from 'react'; -import Image from 'next/image'; -import { ibm_plex_mono } from '../../src/app/layout'; -import { Carousel, CarouselContent, CarouselItem, type CarouselApi } from '../ui/carousel/carousel'; -import carouselImages from './data/carousel.json'; -import useCarouselControls from '../ui/carousel/useCarouselControls'; -import useScreenSize from '../../src/hooks/useScreenSize'; -import useMediaReduce from '../../src/hooks/useMediaReduce'; -import SectionWrapper from '../hoc/SectionWrapper'; -import { TABLET_BREAKPOINT } from '../../src/consts'; - -type ImageModalProps = { - onClose: () => void; - carouselIndex: number; - setCarouselIndex: Dispatch>; - carouselApi: CarouselApi; - modalRef: RefObject; - isShown: boolean; -}; - -const ImageModal: React.FC = ({ - onClose, - carouselIndex, - carouselApi, - modalRef, - isShown -}) => { - const handleNext = () => carouselApi?.scrollNext(); - const handlePrev = () => carouselApi?.scrollPrev(); - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === 'Escape') { - onClose(); - } - }; - - return ( -
-
- - - - {carouselImages.images.map((image) => ( - -
-
- {image.alt} -
- - icon -

- {`${ - carouselImages.images[carouselIndex % carouselImages.images.length].alt - }.jpg`} -

-
- - ))} - - - -
-
- ); -}; - -const TeamHero = () => { - const [carouselIndex, setCarouselIndex] = useState(0); - const [modalShown, setModalShown] = useState(false); - const [focusableElements, setFocusableElements] = useState>(); - const modalRef = useRef(null); - const { width } = useScreenSize(); - const [reduceMotion] = useMediaReduce(); - const { isPlaying, togglePlayPause, carouselApi, setCarouselApi, plugin } = useCarouselControls({ - delay: 5000, - reduceMotion, - width - }); - const carouselLength = carouselImages.images.length; - - useEffect(() => { - setFocusableElements(document.querySelectorAll('button, a')); - }, []); - - useEffect(() => { - if (carouselApi) { - carouselApi.on('select', () => { - setCarouselIndex(carouselApi.selectedScrollSnap()); - }); - } - }, [carouselIndex, carouselApi]); - - useEffect(() => { - focusableElements?.forEach((el) => el.setAttribute('tabIndex', modalShown ? '-1' : '0')); - if (modalShown) { - modalRef.current?.focus(); - } - }, [focusableElements, modalShown]); - - return ( -
- {modalShown && ( - setModalShown(false)} - carouselIndex={carouselIndex} - setCarouselIndex={setCarouselIndex} - carouselApi={carouselApi} - modalRef={modalRef} - isShown={modalShown} - /> - )} -
- -
-
-

- OUR TEAM -

-
-
-

- Working together -

-

- 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. -

-
-
- -
- -
-

- {`${carouselImages.images[carouselIndex % carouselLength].alt}.jpg`} -

-
-
-
e.preventDefault()} onTouchStart={(e) => e.preventDefault()}> - - - {carouselImages.images.map((image, index) => ( - - - - ))} - - -
-
- -
- ); -}; - -export default TeamHero; diff --git a/new-dti-website/components/team/data/carousel.json b/new-dti-website/components/team/data/carousel.json deleted file mode 100644 index f6f30752e..000000000 --- a/new-dti-website/components/team/data/carousel.json +++ /dev/null @@ -1,46 +0,0 @@ -{ - "images": [ - { - "src": "/images/full-team.png", - "alt": "full-team", - "icon": "/icons/full-team_sticker.svg", - "iconWidth": 50, - "iconHeight": 50 - }, - { - "src": "/images/team/leads.png", - "alt": "leads", - "icon": "/icons/leads_sticker.svg", - "iconWidth": 50, - "iconHeight": 50 - }, - { - "src": "/images/team/design.png", - "alt": "design", - "icon": "/icons/design_sticker.svg", - "iconWidth": 50, - "iconHeight": 50 - }, - { - "src": "/images/team/development.png", - "alt": "development", - "icon": "/icons/dev_sticker.svg", - "iconWidth": 53, - "iconHeight": 50 - }, - { - "src": "/images/team/product.png", - "alt": "product", - "icon": "/icons/product_sticker.svg", - "iconWidth": 50, - "iconHeight": 50 - }, - { - "src": "/images/team/business.png", - "alt": "business", - "icon": "/icons/business_sticker.svg", - "iconWidth": 50, - "iconHeight": 50 - } - ] -} diff --git a/new-dti-website/public/images/about-hero.png b/new-dti-website/public/images/about-hero.png new file mode 100644 index 000000000..d951c0413 Binary files /dev/null and b/new-dti-website/public/images/about-hero.png differ diff --git a/new-dti-website/public/images/apply-hero.png b/new-dti-website/public/images/apply-hero.png new file mode 100644 index 000000000..b857bd517 Binary files /dev/null and b/new-dti-website/public/images/apply-hero.png differ diff --git a/new-dti-website/public/images/carousel-frame.png b/new-dti-website/public/images/carousel-frame.png deleted file mode 100644 index 9a68ecd42..000000000 Binary files a/new-dti-website/public/images/carousel-frame.png and /dev/null differ diff --git a/new-dti-website/public/images/course-hero.png b/new-dti-website/public/images/course-hero.png new file mode 100644 index 000000000..797f81ccf Binary files /dev/null and b/new-dti-website/public/images/course-hero.png differ diff --git a/new-dti-website/public/images/initiatives-hero.png b/new-dti-website/public/images/initiatives-hero.png new file mode 100644 index 000000000..f4f85cbe6 Binary files /dev/null and b/new-dti-website/public/images/initiatives-hero.png differ diff --git a/new-dti-website/public/images/outreach_1.svg b/new-dti-website/public/images/outreach_1.svg deleted file mode 100644 index 4bbe878ca..000000000 --- a/new-dti-website/public/images/outreach_1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/new-dti-website/public/images/outreach_2.svg b/new-dti-website/public/images/outreach_2.svg deleted file mode 100644 index 40b60402a..000000000 --- a/new-dti-website/public/images/outreach_2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/new-dti-website/public/images/outreach_3.svg b/new-dti-website/public/images/outreach_3.svg deleted file mode 100644 index 9890720ba..000000000 --- a/new-dti-website/public/images/outreach_3.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/new-dti-website/public/images/products-hero.png b/new-dti-website/public/images/products-hero.png new file mode 100644 index 000000000..3ea23ebfd Binary files /dev/null and b/new-dti-website/public/images/products-hero.png differ diff --git a/new-dti-website/public/images/sponsor-hero.png b/new-dti-website/public/images/sponsor-hero.png new file mode 100644 index 000000000..55d43db43 Binary files /dev/null and b/new-dti-website/public/images/sponsor-hero.png differ diff --git a/new-dti-website/public/images/teaching_1.svg b/new-dti-website/public/images/teaching_1.svg deleted file mode 100644 index c132d2654..000000000 --- a/new-dti-website/public/images/teaching_1.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/new-dti-website/public/images/teaching_2.svg b/new-dti-website/public/images/teaching_2.svg deleted file mode 100644 index b0fb3d18a..000000000 --- a/new-dti-website/public/images/teaching_2.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/new-dti-website/public/images/teaching_3.svg b/new-dti-website/public/images/teaching_3.svg deleted file mode 100644 index 1fa67000b..000000000 --- a/new-dti-website/public/images/teaching_3.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/new-dti-website/public/images/team/business.png b/new-dti-website/public/images/team/business.png deleted file mode 100644 index c845eb20f..000000000 Binary files a/new-dti-website/public/images/team/business.png and /dev/null differ diff --git a/new-dti-website/public/images/team/design.png b/new-dti-website/public/images/team/design.png deleted file mode 100644 index 06e910045..000000000 Binary files a/new-dti-website/public/images/team/design.png and /dev/null differ diff --git a/new-dti-website/public/images/team/development.png b/new-dti-website/public/images/team/development.png deleted file mode 100644 index 5fee3f13a..000000000 Binary files a/new-dti-website/public/images/team/development.png and /dev/null differ diff --git a/new-dti-website/public/images/team/leads.png b/new-dti-website/public/images/team/leads.png deleted file mode 100644 index 17adafaa8..000000000 Binary files a/new-dti-website/public/images/team/leads.png and /dev/null differ diff --git a/new-dti-website/public/images/team/product.png b/new-dti-website/public/images/team/product.png deleted file mode 100644 index e17c894b8..000000000 Binary files a/new-dti-website/public/images/team/product.png and /dev/null differ diff --git a/new-dti-website/src/app/apply/page.tsx b/new-dti-website/src/app/apply/page.tsx index 5febbcbea..ed99afbd9 100644 --- a/new-dti-website/src/app/apply/page.tsx +++ b/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 ( -
+
{!isApplicationOpen && ( )} - -
-

-
- JOIN OUR COMMUNITY -
-

-
-

- Down to innovate? -

-

- We strive for inclusivity, and encourage passionate applicants to apply regardless of - experience. We'd love to work with someone like you. -

- {isApplicationOpen ? ( - - Apply now - - ) : ( - - )} -
-
- -
+
+ +
); }; diff --git a/new-dti-website/src/app/course/page.tsx b/new-dti-website/src/app/course/page.tsx index 544fc5716..6575f2516 100644 --- a/new-dti-website/src/app/course/page.tsx +++ b/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 */} -
-
- -
-
-
-

- OUR
- COURSE -

-
-
- -
-

- Teaching the community -

-

- 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. -

-
-
- -
-
+
+ +
{/* WRAPPER */}
( -
- -
-

-
- INSPIRING INNOVATION -
-

-
-

- Making impact -

-

- 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. -

-
-
- -
-); +import Hero from '../../../components/hero'; const InitiativePage = () => { useTitle('Initiatives'); return (
- +
+ +
diff --git a/new-dti-website/src/app/products/page.tsx b/new-dti-website/src/app/products/page.tsx index a1961a77c..9cc67687a 100644 --- a/new-dti-website/src/app/products/page.tsx +++ b/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 ( -
- -
-
-

- OUR PRODUCTS -

-
-
-

- Real impact -

-

- Each of our projects address an unfulfilled need that exists in our community using - human-centered design and software engineering. -

-
-
- +
+ diff --git a/new-dti-website/src/app/sponsor/page.tsx b/new-dti-website/src/app/sponsor/page.tsx index 023e02a85..c7cd83300 100644 --- a/new-dti-website/src/app/sponsor/page.tsx +++ b/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 = () => ( -
- -
-
-

- SUPPORT
- OUR TEAM -

-
-
-

- Let's collaborate -

-

- 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. -

- - Donate now - -
-
- +
+
); diff --git a/new-dti-website/src/app/team/page.tsx b/new-dti-website/src/app/team/page.tsx index 5a7b91567..ad2155b97 100644 --- a/new-dti-website/src/app/team/page.tsx +++ b/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 ( <> - +