diff --git a/new-dti-website/components/products/FloatingImages.tsx b/new-dti-website/components/products/FloatingImages.tsx index 59b867649..bed91b2e1 100644 --- a/new-dti-website/components/products/FloatingImages.tsx +++ b/new-dti-website/components/products/FloatingImages.tsx @@ -2,6 +2,7 @@ import Image from 'next/image'; import React, { CSSProperties } from 'react'; +import useMediaReduce from '../../src/hooks/useMediaReduce'; export interface ImageData { src: string; @@ -20,6 +21,8 @@ interface FloatingImagesProps { } export default function FloatingImages({ images }: FloatingImagesProps) { + const [reduceMotion, isReady] = useMediaReduce(); + const getFloatClass = (dir?: string) => { switch (dir) { case 'up': @@ -56,8 +59,8 @@ export default function FloatingImages({ images }: FloatingImagesProps) {
{img.alt} diff --git a/new-dti-website/components/products/imageCarousel.tsx b/new-dti-website/components/products/imageCarousel.tsx index 8f9a90b64..97af1dd62 100644 --- a/new-dti-website/components/products/imageCarousel.tsx +++ b/new-dti-website/components/products/imageCarousel.tsx @@ -14,7 +14,7 @@ interface carouselItem { } const ImageCarousel = (props: { items: carouselItem[] }) => { - const reduceMotion = useMediaReduce(); + const [reduceMotion] = useMediaReduce(); const { width } = useScreenSize(); const { isPlaying, togglePlayPause, currentSlide, setCarouselApi, plugin } = useCarouselControls({ delay: 5000, @@ -24,13 +24,9 @@ const ImageCarousel = (props: { items: carouselItem[] }) => { const highlightIndex = React.useMemo(() => (width < 1024 ? 1 : 3), [width]); return ( -
e.preventDefault()} - onTouchStart={(e) => e.preventDefault()} - > +
= (props: ConnectorProps) => { + const [reduceMotion] = useMediaReduce(); const connectorRef = useRef(null); const { scrollY } = useScrollPosition(); @@ -93,7 +95,11 @@ const Connector: React.FC = (props: ConnectorProps) => { strokeLinecap="square" strokeDasharray={`${props.width + props.height} ${props.width + props.height}`} strokeDashoffset={ - props.width + props.height - (getOffset() / props.height) * (props.width + props.height) + reduceMotion + ? 0 + : props.width + + props.height - + (getOffset() / props.height) * (props.width + props.height) } /> diff --git a/new-dti-website/components/products/products.json b/new-dti-website/components/products/products.json index 815e7abfd..b61f1a376 100644 --- a/new-dti-website/components/products/products.json +++ b/new-dti-website/components/products/products.json @@ -6,7 +6,8 @@ "description": "CU Reviews is a course review website. You can browse classes and view their metrics, read about other students' experiences, and submit your own course reviews for others.", "link": "https://cureviews.org/", "iconPath": "icons/cureviews_icon.svg", - "iconDimensions": 67, + "iconDimensions": 90, + "imageClassName": "-translate-x-2", "blobs": [ { "className": "left-3/4 -top-32 scale-50 md:scale-100", @@ -38,7 +39,8 @@ "description": "Start your college career here with us. CoursePlan has everything you need to fulfill your requirements, all in one place. You can design your 4-year plan by simply dragging them into your schedule.", "link": "https://courseplan.io/", "iconPath": "icons/courseplan_icon.svg", - "iconDimensions": 63, + "iconDimensions": 90, + "imageClassName": "-translate-x-2", "blobs": [ { "className": "left-2/4 -top-48 scale-50 md:scale-100", @@ -79,7 +81,8 @@ "description": "Office hours are too crowded and unorganized. Queue Me In removes the frustration from office hours by helping students get support and professors better understand their classes.", "link": "https://queueme.in/", "iconPath": "icons/qmi_icon.svg", - "iconDimensions": 63, + "iconDimensions": 90, + "imageClassName": "-translate-x-2", "blobs": [ { "className": "left-0 -top-48 scale-50 md:scale-100", @@ -119,7 +122,8 @@ "description": "Design@Cornell is a centralized repository that contains all the resources and information needed for faculty, staff, current and future students interested in design at Cornell.", "link": "https://www.cudesign.io/", "iconPath": "icons/dac_icon.svg", - "iconDimensions": 73, + "iconDimensions": 100, + "imageClassName": "-translate-x-0", "blobs": [ { "className": "left-1/3 scale-50 md:scale-100", @@ -151,9 +155,9 @@ { "src": "/images/products/dcc/dcc4.png", "alt": "DCC Image 4", - "top": "9%", - "right": "-18%", - "width": "45%", + "top": "10%", + "right": "-16%", + "width": "43%", "direction": "right" } ] @@ -164,7 +168,8 @@ "description": "Collaborating with The Learning Strategies Center (LSC) at Cornell, Zing is an all-in-one web interface to create optimal groups for class projects based on students' study preferences.", "link": "https://zing-lsc-prod.web.app/", "iconPath": "icons/zing_icon.svg", - "iconDimensions": 63, + "iconDimensions": 80, + "imageClassName": "-translate-x-2", "blobs": [ { "className": "left-2/3 scale-50 md:scale-100", @@ -205,7 +210,7 @@ "description": "The search for off-campus housing in Ithaca is insane. CU Apts helps you search for off-campus housing, share apartment reviews, and explore your best options.", "link": "https://cuapts.org/", "iconPath": "icons/cuapts_icon.svg", - "iconDimensions": 79, + "iconDimensions": 110, "blobs": [ { "className": "left-3/4 scale-50 md:scale-100", @@ -238,7 +243,7 @@ "description": "Carriage is dedicated to making Cornell accessible for all students and work directly with CULift, Cornell's paratransit service for students with disabilities. \n \n Launching next semester.", "link": "", "iconPath": "icons/carriage_icon.svg", - "iconDimensions": 63, + "iconDimensions": 100, "blobs": [ { "className": "left-1/3 scale-50 md:scale-100", @@ -258,7 +263,7 @@ "description": "Navigating Campus for the first time is confusing. CornellGO is a scavenger hunt app that makes discovering campus easy and fun through interactive, location-based challenges. \n \n Launching this semester", "link": "", "iconPath": "icons/cornellgo_icon.svg", - "iconDimensions": 63, + "iconDimensions": 90, "blobs": [ { "className": "left-2/3 scale-50 md:scale-100", diff --git a/new-dti-website/components/team/TeamHero.tsx b/new-dti-website/components/team/TeamHero.tsx index 2b40abc48..5af979e94 100644 --- a/new-dti-website/components/team/TeamHero.tsx +++ b/new-dti-website/components/team/TeamHero.tsx @@ -106,7 +106,7 @@ const TeamHero = () => { const [focusableElements, setFocusableElements] = useState>(); const modalRef = useRef(null); const { width } = useScreenSize(); - const reduceMotion = useMediaReduce(); + const [reduceMotion] = useMediaReduce(); const { isPlaying, togglePlayPause, carouselApi, setCarouselApi, plugin } = useCarouselControls({ delay: 5000, reduceMotion, diff --git a/new-dti-website/public/icons/carriage_icon.svg b/new-dti-website/public/icons/carriage_icon.svg index 3ab4c40f2..085fda417 100644 --- a/new-dti-website/public/icons/carriage_icon.svg +++ b/new-dti-website/public/icons/carriage_icon.svg @@ -1,9 +1,9 @@ - - - - + + + + - + diff --git a/new-dti-website/public/icons/courseplan_icon.svg b/new-dti-website/public/icons/courseplan_icon.svg index a5dd09e4c..46126a7b0 100644 --- a/new-dti-website/public/icons/courseplan_icon.svg +++ b/new-dti-website/public/icons/courseplan_icon.svg @@ -1,5 +1,5 @@ - + diff --git a/new-dti-website/public/icons/cuapts_icon.svg b/new-dti-website/public/icons/cuapts_icon.svg index 11fed0fb2..3c28fc86f 100644 --- a/new-dti-website/public/icons/cuapts_icon.svg +++ b/new-dti-website/public/icons/cuapts_icon.svg @@ -1,26 +1,26 @@ - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/new-dti-website/public/icons/cureviews_icon.svg b/new-dti-website/public/icons/cureviews_icon.svg index b479a8a05..6eaee8f0b 100644 --- a/new-dti-website/public/icons/cureviews_icon.svg +++ b/new-dti-website/public/icons/cureviews_icon.svg @@ -1,11 +1,12 @@ - - - - - + + + + + + - + diff --git a/new-dti-website/public/icons/dac_icon.svg b/new-dti-website/public/icons/dac_icon.svg index 88edeeaf7..5cba2386c 100644 --- a/new-dti-website/public/icons/dac_icon.svg +++ b/new-dti-website/public/icons/dac_icon.svg @@ -1,10 +1,10 @@ - - - - - + + + + + - + diff --git a/new-dti-website/public/icons/qmi_icon.svg b/new-dti-website/public/icons/qmi_icon.svg index bd4a9f7ad..fc401103a 100644 --- a/new-dti-website/public/icons/qmi_icon.svg +++ b/new-dti-website/public/icons/qmi_icon.svg @@ -1,7 +1,7 @@ - - - + + + diff --git a/new-dti-website/public/icons/zing_icon.svg b/new-dti-website/public/icons/zing_icon.svg index 501b228e7..419fcffd1 100644 --- a/new-dti-website/public/icons/zing_icon.svg +++ b/new-dti-website/public/icons/zing_icon.svg @@ -1,9 +1,21 @@ - - - + + + + + + + + + + + + + + + diff --git a/new-dti-website/public/images/products/qmi/qmi3.png b/new-dti-website/public/images/products/qmi/qmi3.png index 6064ac524..1490a284e 100644 Binary files a/new-dti-website/public/images/products/qmi/qmi3.png and b/new-dti-website/public/images/products/qmi/qmi3.png differ diff --git a/new-dti-website/src/app/products/page.tsx b/new-dti-website/src/app/products/page.tsx index bc6e2e2ed..a15fd302d 100644 --- a/new-dti-website/src/app/products/page.tsx +++ b/new-dti-website/src/app/products/page.tsx @@ -95,7 +95,7 @@ export default function Page() { className={'-right-52 bottom-0 scale-50 sm:scale-75 md:scale-100'} intensity={0.3} /> -
+

Have Any Ideas?

We've learned that tackling the hardest problems is the only way to truly create value @@ -119,6 +119,7 @@ const ProductDisplay = (props: { link: string; iconPath: string; iconDimensions: number; + imageClassName?: string; blobs?: { className: string; intensity: number }[]; images?: ImageData[]; }; @@ -146,20 +147,21 @@ const ProductDisplay = (props: {

-
+
{props.product.alt}

{props.product.name}

{props.product.description}

-