Add mobile mockup preview to workflow solution sections

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

Author: drfarrell

apps/web/client/src/app/workflows/claude-code/page.tsx

@@ -164,14 +164,26 @@ export default function ClaudeCodeWorkflowPage() {
                         </motion.p>
                     </div>
 
-                    {/* Editor Mockup */}
+                    {/* Editor Mockup - Desktop */}
                     <motion.div
                         className="hidden md:block w-screen h-[44rem] items-center justify-center mb-24"
                         {...getBlurAnimationProps(0.2)}
                     >
                         <OnlookInterfaceMockup />
                     </motion.div>
 
+                    {/* Editor Mockup - Mobile */}
+                    <motion.div
+                        className="md:hidden w-screen relative overflow-hidden mb-16"
+                        {...getBlurAnimationProps(0.2)}
+                    >
+                        <div className="relative h-[400px] w-full">
+                            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[600px] w-[900px]">
+                                <OnlookInterfaceMockup />
+                            </div>
+                        </div>
+                    </motion.div>
+
                     <div className="mx-auto max-w-6xl px-8">
                         <div className="grid gap-8 md:grid-cols-4">
                             {[

apps/web/client/src/app/workflows/vibe-coding/page.tsx

@@ -239,14 +239,26 @@ export default function VibeCodingWorkflowPage() {
                         </motion.p>
                     </div>
 
-                    {/* Editor Mockup */}
+                    {/* Editor Mockup - Desktop */}
                     <motion.div
                         className="hidden md:block w-screen h-[44rem] items-center justify-center mb-24"
                         {...getBlurAnimationProps(0.2)}
                     >
                         <OnlookInterfaceMockup />
                     </motion.div>
 
+                    {/* Editor Mockup - Mobile */}
+                    <motion.div
+                        className="md:hidden w-screen relative overflow-hidden mb-16"
+                        {...getBlurAnimationProps(0.2)}
+                    >
+                        <div className="relative h-[400px] w-full">
+                            <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[600px] w-[900px]">
+                                <OnlookInterfaceMockup />
+                            </div>
+                        </div>
+                    </motion.div>
+
                     <div className="mx-auto max-w-6xl px-8">
                         <div className="grid gap-8 md:grid-cols-4">
                             {[