From 0fda37a80399674ed7a9b5857121c0573fb73a21 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 22 Dec 2025 22:03:22 -0800
Subject: [PATCH 1/5] full width on the features in mobile

---
 .../FeaturesSection/components/FeatureDemo/FeatureDemo.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
index aa65c25a074..455d446b2f4 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
@@ -16,7 +16,7 @@ export function FeatureDemo({
 }: FeatureDemoProps) {
 	return (
 		<div
-			className={`relative w-full aspect-4/3 rounded-2xl overflow-hidden ${className}`}
+			className={`relative w-full min-h-[300px] lg:aspect-4/3 rounded-2xl overflow-hidden ${className}`}
 		>
 			{/* Background gradient */}
 			<MeshGradient

From a0bfd25bb1f0443a2ffdf6944bb0dcfcde0c853c Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 22 Dec 2025 22:06:29 -0800
Subject: [PATCH 2/5] rounded

---
 .../FeaturesSection/components/FeatureDemo/FeatureDemo.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
index 455d446b2f4..8626f5a0f4c 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
@@ -16,7 +16,7 @@ export function FeatureDemo({
 }: FeatureDemoProps) {
 	return (
 		<div
-			className={`relative w-full min-h-[300px] lg:aspect-4/3 rounded-2xl overflow-hidden ${className}`}
+			className={`relative w-full min-h-[300px] lg:aspect-4/3 rounded overflow-hidden ${className}`}
 		>
 			{/* Background gradient */}
 			<MeshGradient

From 2874bf06aae214569d16106eb501c3c4910d9cb1 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 22 Dec 2025 22:10:09 -0800
Subject: [PATCH 3/5] fix mobile

---
 .../FeaturesSection/components/FeatureDemo/FeatureDemo.tsx    | 4 ++--
 .../components/IsolationDemo/IsolationDemo.tsx                | 2 +-
 .../ParallelExecutionDemo/ParallelExecutionDemo.tsx           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
index 8626f5a0f4c..dc965e44d95 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
@@ -21,11 +21,11 @@ export function FeatureDemo({
 			{/* Background gradient */}
 			<MeshGradient
 				colors={colors}
-				className="absolute inset-0 w-full h-full"
+				className="absolute inset-0 w-full h-full rounded"
 			/>
 
 			{/* Content overlay */}
-			<div className="relative z-10 w-full h-full flex items-center justify-center p-6">
+			<div className="relative z-10 w-full h-full flex items-center justify-start lg:justify-center p-4 lg:p-6">
 				{children}
 			</div>
 		</div>
diff --git a/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
index 5e5d5ee910e..1d2e377a75a 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
@@ -100,7 +100,7 @@ export function IsolationDemo() {
 	return (
 		<motion.div
 			ref={ref}
-			className="w-full max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
+			className="w-full min-w-[500px] max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
 			initial={{ opacity: 0, y: 20 }}
 			animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
 			transition={{ duration: 0.5 }}
diff --git a/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
index cc8991de5d6..e74765dc4a3 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/ParallelExecutionDemo/ParallelExecutionDemo.tsx
@@ -142,7 +142,7 @@ export function ParallelExecutionDemo() {
 	return (
 		<motion.div
 			ref={ref}
-			className="w-full max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
+			className="w-full min-w-[500px] max-w-2xl bg-[#1a1a1a]/90 backdrop-blur-sm rounded-lg border border-white/10 shadow-2xl overflow-hidden"
 			initial={{ opacity: 0, y: 20 }}
 			animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
 			transition={{ duration: 0.5 }}

From b3eab529d2c2247ae549647a77e9a7429efa85ca Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 22 Dec 2025 22:12:51 -0800
Subject: [PATCH 4/5] sizing

---
 .../FeaturesSection/components/FeatureDemo/FeatureDemo.tsx      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
index dc965e44d95..c5179d1b0fa 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/FeatureDemo/FeatureDemo.tsx
@@ -25,7 +25,7 @@ export function FeatureDemo({
 			/>
 
 			{/* Content overlay */}
-			<div className="relative z-10 w-full h-full flex items-center justify-start lg:justify-center p-4 lg:p-6">
+			<div className="relative z-10 w-full h-full flex items-center justify-start sm:justify-center p-4 sm:p-6">
 				{children}
 			</div>
 		</div>

From 14418f0897c12afab843b86667c5f563baf65783 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Mon, 22 Dec 2025 22:17:20 -0800
Subject: [PATCH 5/5] good

---
 .../components/IsolationDemo/IsolationDemo.tsx                | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx b/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
index 1d2e377a75a..02530a0ccf1 100644
--- a/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
+++ b/apps/marketing/src/app/components/FeaturesSection/components/IsolationDemo/IsolationDemo.tsx
@@ -117,10 +117,10 @@ export function IsolationDemo() {
 						components/HeroSection/HeroSection.tsx
 					</span>
 				</div>
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-2 mx-2">
 					<button
 						type="button"
-						className="px-2 py-1 text-xs text-white/60 hover:text-white/80 bg-white/5 rounded transition-colors"
+						className="px-2 py-1 text-xs text-white/60 hover:text-white/80 bg-white/5 rounded transition-colors whitespace-nowrap"
 					>
 						Side by Side
 					</button>