Fix mobile layout for cloud/self-hosted/run-locally toggle and content sections

Toggle buttons are now smaller on mobile. Content sections no longer use
negative top offset on mobile, preventing text from hiding behind the toggle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bidah

apps/web/components/landing-features-toggle.tsx

@@ -15,49 +15,49 @@ export function LandingFeaturesToggle() {
   return (
     <div className="w-full">
       {/* Toggle Group - positioned to overlap with hero section */}
-      <div className="flex justify-center mt-16 md:-mt-24 mb-8 md:mb-0 relative z-10">
-        <div className="inline-flex items-center bg-background/80 backdrop-blur-sm rounded-full p-1.5 border border-border shadow-lg absolute -top-[30px] md:-top-[240px]">
+      <div className="flex justify-center mt-8 md:-mt-24 mb-8 md:mb-0 relative z-10">
+        <div className="inline-flex items-center bg-background/80 backdrop-blur-sm rounded-full p-1 md:p-1.5 border border-border shadow-lg absolute -top-[30px] md:-top-[240px]">
           <button
             onClick={() => setViewMode('cloud')}
             className={cn(
-              "flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-200",
+              "flex items-center gap-1.5 md:gap-2 px-3 md:px-5 py-2 md:py-2.5 rounded-full text-xs md:text-sm font-medium transition-all duration-200",
               viewMode === 'cloud'
                 ? "bg-foreground text-background shadow-sm"
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
-            <Cloud className="w-4 h-4" />
+            <Cloud className="w-3.5 h-3.5 md:w-4 md:h-4" />
             Cloud
           </button>
           <button
             onClick={() => setViewMode('self-hosted')}
             className={cn(
-              "flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-200",
+              "flex items-center gap-1.5 md:gap-2 px-3 md:px-5 py-2 md:py-2.5 rounded-full text-xs md:text-sm font-medium transition-all duration-200",
               viewMode === 'self-hosted'
                 ? "bg-foreground text-background shadow-sm"
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
-            <Server className="w-4 h-4" />
+            <Server className="w-3.5 h-3.5 md:w-4 md:h-4" />
             Self Hosted
           </button>
           <button
             onClick={() => setViewMode('run-locally')}
             className={cn(
-              "flex items-center gap-2 px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-200",
+              "flex items-center gap-1.5 md:gap-2 px-3 md:px-5 py-2 md:py-2.5 rounded-full text-xs md:text-sm font-medium transition-all duration-200",
               viewMode === 'run-locally'
                 ? "bg-foreground text-background shadow-sm"
                 : "text-muted-foreground hover:text-foreground"
             )}
           >
-            <Terminal className="w-4 h-4" />
+            <Terminal className="w-3.5 h-3.5 md:w-4 md:h-4" />
             Run Locally
           </button>
         </div>
       </div>
 
       {/* Content based on view mode */}
-      <div className="transition-all duration-300 mt-20">
+      <div className="transition-all duration-300 mt-12 md:mt-20">
         {viewMode === 'cloud' ? (
           <LandingFeatures />
         ) : viewMode === 'self-hosted' ? (

apps/web/components/landing-features.tsx

@@ -27,7 +27,7 @@ const INTEGRATION_ICONS_ROW2 = [
 
 export function LandingFeatures() {
   return (
-    <section className="w-full bg-background py-20 md:py-32 md:pt-0 -top-240px] md:-top-[240px] relative">
+    <section className="w-full bg-background py-20 md:py-32 md:pt-0 md:-top-[240px] md:relative">
       <div className="max-w-6xl mx-auto px-4 md:px-8">
         {/* Hero Headline */}
         <div className="text-center mb-2 md:mb-4 max-w-4xl m-auto">

apps/web/components/run-locally.tsx

@@ -14,7 +14,7 @@ export function RunLocally() {
   }
 
   return (
-    <section className="w-full bg-background py-20 md:py-32 md:pt-0 -top-[240px] relative">
+    <section className="w-full bg-background py-20 md:py-32 md:pt-0 md:-top-[240px] md:relative">
       <div className="max-w-6xl mx-auto px-4 md:px-8">
         {/* Headline */}
         <div className="text-center mb-8 md:mb-12 max-w-4xl m-auto">

apps/web/components/self-hosted-packages.tsx

@@ -53,10 +53,10 @@ const packages: PackageInfo[] = [
     docsPath: 'https://github.com/react-native-vibe-code/react-native-vibe-code-sdk/tree/main/packages/sandbox',
   },
   {
-    id: 'starter-kit',
-    name: 'starter-kit',
-    shortDescription: 'Complete Expo template with 67+ packages for AI-powered mobile development',
-    icon: <Sparkles className="w-5 h-5" />,
+    id: 'create-rnvibecode',
+    name: 'create-rnvibecode',
+    shortDescription: 'CLI to scaffold Expo projects with 67+ packages and Claude Code system prompt',
+    icon: <Terminal className="w-5 h-5" />,
     color: 'emerald',
     docsPath: 'https://github.com/react-native-vibe-code/react-native-vibe-code-sdk/tree/main/packages/starter-kit',
   },
@@ -217,7 +217,7 @@ const colorClasses: Record<string, { bg: string; text: string; border: string }>
 
 export function SelfHostedPackages() {
   return (
-    <section className="w-full bg-background py-20 md:py-32 md:pt-0 -top-[240px] relative">
+    <section className="w-full bg-background py-20 md:py-32 md:pt-0 md:-top-[240px] md:relative">
       <div className="max-w-6xl mx-auto px-4 md:px-8">
         {/* Hero Headline */}
         <div className="text-center mb-8 md:mb-12 max-w-4xl m-auto">