💄 Mobile and iPad UI Improvements

[isaaclombardssw]

🩸 Pain

The tablet site is really bad (massive sections of spacing and other issues).
(1) Spacing
(2) Video size (should be stacked)
(3) Text sizing
(4) Features component and testimonials should resolve nicely. Feature component likely won't be able to render videos on iPad so but should look natural without them (right now it's all squished to one side). Testimonials should exist in a single stack on tablet (as on mobile).

Some refactoring is also needed for conditional logic (specifically in the testimonials and features carousel):
(1) The functionality of this kind of 'show all' list should be extracted into it's own class and passed to the mappings as a wrapper.
(2) The mobile detection functionality should be centralised.
(3) Image mask wasn't being applied when included in the tailwind config, this should be resolved.

💡 Suggested Solution

Conditional styling optimised for tablet size devices, there's some of this kind of detection logic in the feature carousel component that can be used as a basis.

📸 Screenshots

Cc:

[joshbermanssw]

For #3 in refactoring consider using the empty div strat from Recipe.tsx

<div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black opacity-60 lg:rounded-bl-xl pointer-events-none"></div>