add industries grid component

[jesicasusanto]

Resolves Issue #7
This PR

• implements the industries grid component of the web page that is responsive to the screen size

• fixed the zoomed in screen when first opening the web page

• Before :

• After :

steps to reproduce
same as Getting Started in readme

[netlify]

✅ Deploy Preview for cosmic-klepon-3c693c ready!

Name	Link
🔨 Latest commit	da77d9f
🔍 Latest deploy log	https://app.netlify.com/sites/cosmic-klepon-3c693c/deploys/649c46daa873a9000855b4ba
😎 Deploy Preview	https://deploy-preview-15--cosmic-klepon-3c693c.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[jesicasusanto]

Made the cards responsive to screen size
Before :

After :

[jesicasusanto]

Change cards color to be dark purple then add card shadows.
Before :

After :

Would love to get feedback on this @abrichr . Thank you!

[dianzrong]

@jesicasusanto I really like the shadows! Do you think the card colours should be lighter to improve visibility?

[jesicasusanto]

@dianzrong thank you! i agree too. I've made the grids background lighter.

[jesicasusanto]

Ready for review @abrichr @Jonathan-Sendsen.

Summary :

• added industry grids
• added value proposition

[abrichr]

Please add "(For Developers)" after "Getting Started"

[abrichr]

Please modify grid styles so that padding is symmetrical horizontally/vertically between items

[abrichr]

@jesicasusanto can you please add an icon to each one, e.g. from https://thenounproject.com/ ? 🙏

Also please separate developers into a separate section altogether, and convert the CTA buttons from primary to secondary (make them smaller / less striking)

[abrichr]

https://openadapt.ai/ :

https://deploy-preview-15--cosmic-klepon-3c693c.netlify.app/:

Can you please restore the padding / margins around "AI for Humans", "Automate your workflows", "No programming required"?

What do you think about keeping the "Get Started" button, and having it scroll down to the industries grid?

[abrichr]

Also please feel free to implement #17 while you're at it 😄 (can be a seaprate PR, no pressure!)

[jesicasusanto]

Update @abrichr :

• Google Docs Link for industries usecases : https://docs.google.com/document/d/1l91o0bs0qtyRSGvtNPLVVNHcCajFhqzpYPaUR0GKRh8/edit?usp=sharing

• mention usecase for each grid ( addressed in 7fd0e06)

• maintain format as much as possible between descriptions (e.g. use a period at the end of sentences everywhere) (also addressed in 7fd0e06)

• modify the hover behavior so that the icon increases in size when the user hovers over anywhere in the grid, not just the icon (addressed in 41ec845)

• make it so that they can click on anywhere in the grid in order to achieve the exact same behavior as clicking on the button 😄

• use Gimp to automatically crop each image to contents 🙏

• Please modify header font to match the font used elsewhere (addressed in 98a20a8)

[jesicasusanto]

Hi @abrichr for cropping the logos to content, gimp doesn't support exporting the logo back to an svg file. As an alternative, I adjusted the width and height attributes inside the svg files according to the heightxwidth sized given by the gimp "crop to content" command. Please let me know what you think of this solution. Thank you!
Before :

After :

[abrichr]

Thanks @jesicasusanto !

Can you please remove the developer grid item? Then modify the "Getting Started" header to "For Developers".

Let's also remove this heading altogether:

Revolutionizing Industries with AI-First Automation for Growth and Transformation.

Also please rename "Freight" to "Logistics".

Also, is it possible to center grid content vertically? Consider e.g.

[jesicasusanto]

Update @abrichr

• remove the developer grid item (addressed in 00b66e1)
• modify the "Getting Started" header to "For Developers" (addressed in c54e26c)
• remove this heading altogether:
  Revolutionizing Industries with AI-First Automation for Growth and Transformation. (addressed in 0f44787)
• rename "Freight" to "Logistics" (addressed in 3eae0bf).
• center grid content vertically (addressed in d52ac59)

I also added a silver border around the cards when we hover them as you suggested on our last sprint in https://github.com/OpenAdaptAI/web/pull/15/files#diff-4130362d983b52ff81285caab923910466ada416e0ca9974ad2ffd36f674366e:~:text=%7D-,.card%3Ahover%20%7B,-border%3A%202 . But Im not sure if this aligns with your vision for the hover card animation. Would love to get a clarification in this. Looking forward to your feedback!

[abrichr]

Hi @jesicasusanto :

• It looks like the hover animation on the icons is no longer working. Can you please fix it?
• The border is too bright. Please make it much more subtle. It should be barely perceptible. It should also be animated.
• The background color of the grid component does not appear to change on hover. It should transition to a slightly brighter color over e.g. 0.5s.

Please let me know if anything is unclear!

[abrichr]

@jesicasusanto the updated border color looks better, and the background color animation looks good 👍

Todo:

• fix icon animation (make sure you are opening the page in incognito mode and/or clearing your cache to reproduce the issue. Right now icons just switch between small and large with no animation)
• set the "Join Waitlist" border color to transparent on hover rather than removing it altogether. This is necessary to prevent the rest of the grid content from moving down when the user hovers with their mouse due to the reduced size from the border being removed.

Please let me know if anything is unclear!

[jesicasusanto]

Thank you for the feedbacks. Here are my updates @abrichr

• make cards border subtle and animated (addressed in 4210f4d)
• change background color of grid component when hover (addressed in 400b754)
• fix icon animation (addressed in 9829095)
• set the "Join Waitlist" border color to transparent on hover rather than removing it altogether. (addressed in d824f8a)

[jesicasusanto]

Update @abrichr :

• added margin around logo (addressed in 9b212d6)
• added outline when the industry grid is hovered (addressed in 302fab4)
  Please let me know if there is anything else!