feat: hide mobile warning box on all screen sizes (#2757)

* feat: hide mobile warning box on all screen sizes

- Changed className from 'sm:hidden' to 'hidden' in Hero component
- This hides the mobile warning box on mobile devices as requested
- Maintains existing behavior on larger screens (already hidden)
- Warning text: 'Onlook isn't designed for Mobile – Please open on a larger screen'

Co-Authored-By: [email protected] <[email protected]>

* fix: remove conflicting flex class to ensure hidden works properly

- Removed 'flex' class that conflicts with 'hidden' class
- Addresses Diamond AI code review feedback about CSS display conflicts
- Ensures mobile warning box is properly hidden on all screen sizes

Co-Authored-By: [email protected] <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: [email protected] <[email protected]>

Author: devin-ai-integration[bot]

apps/web/client/src/app/_components/hero/index.tsx

@@ -84,7 +84,7 @@ export function Hero() {
                     </motion.div>
 
                 </div>
-                <motion.div className="sm:hidden text-balance flex flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4"
+                <motion.div className="hidden text-balance flex-col gap-4 items-center relative z-20 mx-10 text-foreground-secondary bg-foreground-secondary/10 backdrop-blur-lg rounded-lg border-[0.5px] border-foreground-secondary/20 p-4"
                     initial={{ opacity: 0, filter: "blur(4px)" }}
                     animate={{ opacity: 1, filter: "blur(0px)" }}
                     transition={{ duration: 0.6, delay: 0.6, ease: "easeOut" }}