mob section

apps/landing/src/app/page-sections/explorer.tsx

@@ -45,7 +45,7 @@ export const Explorer = () => {
 						<br className="sm:hidden" /> like never before.
 					</span>
 				</h1>
-				<div className="grid w-full grid-cols-1 gap-10 md:grid-cols-3 md:gap-4">
+				<div className="grid w-full grid-cols-1 gap-16 md:grid-cols-3 md:gap-4">
 					{videos.map((video) => (
 						<div key={video.src}>
 							<Video

apps/landing/src/app/page-sections/mobile.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+
+const Mobile = () => {
+	return (
+		<div className="container mx-auto mt-10 flex flex-col flex-wrap items-center gap-10 px-4">
+			<Image
+				style={{
+					maxWidth: 635,
+					maxHeight: 530
+				}}
+				loading="eager"
+				quality={100}
+				width={636}
+				height={530}
+				layout="responsive"
+				className="object-contain"
+				src="/images/mobile.webp"
+				alt="Mobile"
+			/>
+			<div className="flex flex-col gap-1">
+				<h1 className="flex flex-col self-center text-center text-2xl font-semibold md:flex-row md:text-3xl">
+					Cross platform.&nbsp;
+					<span className="bg-gradient-to-r from-zinc-400 to-zinc-600 bg-clip-text text-transparent">
+						<br className="hidden lg:visible" />
+						Available on iOS and Android
+					</span>
+				</h1>
+				<p className="w-full max-w-[600px] text-center text-ink-faint">
+					Using the mobile app, you can sync your files across all your devices. Take your
+					personal data with you wherever you are!
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export default Mobile;

apps/landing/src/app/page-sections/tags.tsx

@@ -39,7 +39,7 @@ const Tags = () => {
 						quickly organize your files.
 					</span>
 				</h1>
-				<div className="grid w-full grid-cols-1 gap-10 md:grid-cols-2 md:gap-6">
+				<div className="grid w-full grid-cols-1 gap-16 md:grid-cols-2 md:gap-6">
 					{videos.map((video) => (
 						<div key={video.src}>
 							<Video

apps/landing/src/app/page.tsx

@@ -1,5 +1,6 @@
 import { Assistant, Explorer, Features, Github, Header, Search } from '~/app/page-sections';
 
+import Mobile from './page-sections/mobile';
 import Tags from './page-sections/tags';
 
 export const metadata = {
@@ -18,7 +19,8 @@ export default function Page() {
 	return (
 		<>
 			<Header />
-			<div className="flex flex-col gap-6 md:gap-[200px]">
+			<div className="flex flex-col gap-20 md:gap-[200px]">
+				<Mobile />
 				<Features />
 				<Explorer />
 				<Tags />