Website Redesign: Product Page Enhancements

[JasonMun7]

Summary

This PR addresses the following changes for the products page

• Utilized reduce Motion to de-activate the animations within the page including the hover/ line fill animation
• Reduced the overall sticker border for a more cleaner/sleeker look
• Made Icons of each display a little bigger and Increased space between the View Product and text
• Fixed overflow issue with images and decreased line usage for descriptions
• Adjusted width at Have any ideas section

Notion/Figma Link

This was updated after talking with @Bookie0!!
Reduce Motion
Replace logos

Test Plan

• See svg differences below

Before sizing and spacing:


After Sizing and spacing:

Notes

• Might need to reach out to Carriage to see if they can send us any designs we can use to update else we can just put cornell go back to the coming soon screen we had before
• Added an Image classname prop to ProductDisplay component since each image in the figma has different width limits

[dti-github-bot]

[diff-counting] Significant lines: 25.

[andrew032011]

Might need to reach out to Carriage to see if they can send us any designs we can use to update else we can just put cornell go back to the coming soon screen we had before

Oh is this CornellGo or Carriage? If we need something feel free to tag the PM in one of their channels and cc me + PM’s + designers.

[JasonMun7]

Might need to reach out to Carriage to see if they can send us any designs we can use to update else we can just put cornell go back to the coming soon screen we had before

Oh is this CornellGo or Carriage? If we need something feel free to tag the PM in one of their channels and cc me + PM’s + designers.

This is for Carriage. Right now Carriage has the Coming Soon/blurred image as a place holder and Clement suggested that we should keep it consistent and maybe revert the Cornell Go back to it's blurred image instead of the components we have right now. I was thinking if we could get some images of their features we could switch out the blurred coming soon with those new features (After we've structured it). Also again @Bookie0 feel free to add on/modify this and if either you @andrew032011 or @cchrischen! Have any ideas!

Also that sounds like a great Idea!

[andrew032011]

Noticed that a few of these icons aren't aligned with the product name? It looks like they were slightly off in the original too, but if it's easy to adjust that'd be nice!

[andrew032011]

Might need to reach out to Carriage to see if they can send us any designs we can use to update else we can just put cornell go back to the coming soon screen we had before

Oh is this CornellGo or Carriage? If we need something feel free to tag the PM in one of their channels and cc me + PM’s + designers.

This is for Carriage. Right now Carriage has the Coming Soon/blurred image as a place holder and Clement suggested that we should keep it consistent and maybe revert the Cornell Go back to it's blurred image instead of the components we have right now. I was thinking if we could get some images of their features we could switch out the blurred coming soon with those new features (After we've structured it). Also again @Bookie0 feel free to add on/modify this and if either you @andrew032011 or @cchrischen! Have any ideas!

Also that sounds like a great Idea!

Reached out on Slack. https://cornelldti.slack.com/archives/CJCDQKR0X/p1732888246400639

[Bookie0]

thanks looking good!

just a little problem with the images in the Product page that keep animating even with Reduce Motion on

[Bookie0]

hmm for me it seems like the images still hover slightly even when with Reduce Motion settings on?

the lines don't animate which is expected but i still see the images move around a bit

Screen.Recording.2024-11-30.at.12.53.12.AM.mov

[JasonMun7]

Will look into this! Thanks for catching that!

[Bookie0]

sure! lmk when u'd like me to re-review :)

[Bookie0]

hmm ok so for the sticker effect, James, Vannessa, and I were discussing in this thread here about the sticker effect. I think we all agree that thinner in general is the good direction but we haven't aligned yet on how thin to reduce the stroke.

This is def an improvement, so we can go ahead with your PR, but just wanted to let you know that we might modify it a bit more too.

[JasonMun7]

Might need to reach out to Carriage to see if they can send us any designs we can use to update else we can just put cornell go back to the coming soon screen we had before

Oh is this CornellGo or Carriage? If we need something feel free to tag the PM in one of their channels and cc me + PM’s + designers.

This is for Carriage. Right now Carriage has the Coming Soon/blurred image as a place holder and Clement suggested that we should keep it consistent and maybe revert the Cornell Go back to it's blurred image instead of the components we have right now. I was thinking if we could get some images of their features we could switch out the blurred coming soon with those new features (After we've structured it). Also again @Bookie0 feel free to add on/modify this and if either you @andrew032011 or @cchrischen! Have any ideas!

Also that sounds like a great Idea!

Awesome I think I might wait on the new design and address it within this PR! Thank you so much for doing that Andrew!

[andrew032011]

Might need to reach out to Carriage to see if they can send us any designs we can use to update else we can just put cornell go back to the coming soon screen we had before

Oh is this CornellGo or Carriage? If we need something feel free to tag the PM in one of their channels and cc me + PM’s + designers.

This is for Carriage. Right now Carriage has the Coming Soon/blurred image as a place holder and Clement suggested that we should keep it consistent and maybe revert the Cornell Go back to it's blurred image instead of the components we have right now. I was thinking if we could get some images of their features we could switch out the blurred coming soon with those new features (After we've structured it). Also again @Bookie0 feel free to add on/modify this and if either you @andrew032011 or @cchrischen! Have any ideas!
Also that sounds like a great Idea!

Awesome I think I might wait on the new design and address it within this PR! Thank you so much for doing that Andrew!

I think depending on when the design gets out we could merge this in first and take it as a follow-up PR! Just to keep the PR’s small and focused and new.cornelldti.org as close to launch ready as possible.