make mobile better

src/components/UnderConstruction/UnderConstruction.tsx

@@ -3,7 +3,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '~/ui';
 
 export const UnderConstruction: React.FC = () => {
   return (
-    <Card className='shadow-xl md:max-w-xl my-4 mx-12 sm:mx-4 md:mx-auto'>
+    <Card className='shadow-xl md:max-w-xl my-4 mx-12 sm:mx-2 md:mx-auto'>
       <CardHeader>
         <CardTitle className='text-center text-2xl sm:text-3xl'>
           Hold on a second!
@@ -15,7 +15,7 @@ export const UnderConstruction: React.FC = () => {
           color='#e4ec75'
           strokeWidth={1.2}
         />
-        <p className='text-base sm:text-lg text-center'>
+        <p className='text-base text-center'>
           This page is under construction, check back soon
         </p>
       </CardContent>

src/lib/utils.ts

@@ -1,4 +1,14 @@
 import { type ClassValue, clsx } from 'clsx';
+import { headers } from 'next/headers';
+import { userAgentFromString } from 'next/server';
 import { twMerge } from 'tailwind-merge';
 
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
+
+export const isMobile = async (): Promise<boolean> => {
+  const headersList = await headers();
+  const userAgent = headersList.get('user-agent') || '';
+  const agent = userAgentFromString(userAgent);
+
+  return agent?.device?.type === 'mobile';
+};

src/routes/Home.tsx

@@ -1,13 +1,19 @@
 import { UnderConstruction } from '~/components';
+import { isMobile } from '~/lib/utils';
 import { VantaNet } from '~/ui';
 
-export const Home = () => {
+export const Home = async () => {
+  const mobile = await isMobile();
+
   return (
     <VantaNet
       backgroundColor='var(--primary)'
       className='flex flex-col items-center justify-center h-screen'
-      maxDistance={20.0}
-      spacing={15.0}
+      gyroControls={mobile}
+      maxDistance={mobile ? 20.0 : 18}
+      mouseControls={!mobile}
+      spacing={mobile ? 18.0 : 15.0}
+      touchControls={mobile}
     >
       <UnderConstruction />
     </VantaNet>