👌 IMPROVE: Landing page mobile UI (#92)

* 👌 IMPROVE: Landing page mobile design

* 👌 IMPROVE: Margin

* 👌 IMPROVE: UI

Author: msaaddev

apps/baseai.dev/src/components/home/hero.tsx

@@ -12,8 +12,8 @@ const inter = Inter({ subsets: ['latin'] });
 
 export default function Hero({ }) {
 	return (
-		<div className="flex align-center min-h-[91vh] flex-col items-center justify-center relative">
-			<div className="xmin-h-screen h-full webgl absolute -top-[17vh] flex w-full sm:-top-10">
+		<div className="flex h-full flex-col items-center justify-between relative mt-[74px] sm:mt-0">
+			<div className="h-full webgl absolute -top-[26vh] flex w-full sm:-top-16">
 				<WebGLInitializer />
 			</div>
 			<Content />
@@ -23,7 +23,7 @@ export default function Hero({ }) {
 
 function Content() {
 	return (
-		<div className="z-10 grid min-h-[75vh] w-[90vw] grid-rows-[auto_1fr_auto] gap-4 px-6 sm:p-6 sm:mt-28 sm:min-h-[85vh] sm:w-[76vw]">
+		<div className="z-10 grid min-h-[80vh] w-[90vw] grid-rows-[auto_1fr_auto] gap-4 px-6 sm:p-6 sm:mt-[104px] sm:min-h-[85vh] sm:w-[76vw]">
 			<div className="col-span-2 flex items-center justify-between">
 				<div className={cn('flex items-center', inter.className)}>
 					<div className="mr-4 hidden size-4 rounded-full bg-muted-foreground/70 sm:block"></div>