Add mobile mockup preview to workflow pages

Added responsive mobile preview of the Onlook interface mockup to
"The Solution" sections on both /workflows/claude-code and
/workflows/vibe-coding pages. Uses absolute positioning to show a
cropped view of the editor from the right side, matching the approach
used on the /features page.

- Container height: 880px to prevent clipping the prototype
- Mockup positioned with right-10 offset for visual balance
- Hidden on desktop (md:hidden), desktop version unchanged

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

Author: drfarrell

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

@@ -174,10 +174,10 @@ export default function ClaudeCodeWorkflowPage() {
 
                     {/* Editor Mockup - Mobile */}
                     <motion.div
-                        className="md:hidden w-screen relative overflow-hidden h-[500px]"
+                        className="md:hidden w-screen relative overflow-hidden h-[880px]"
                         {...getBlurAnimationProps(0.2)}
                     >
-                        <div className="absolute top-0 right-10 h-[800px] w-[1000px]">
+                        <div className="absolute top-1/2 right-10 transform -translate-y-1/2 h-[800px] w-[1000px]">
                             <OnlookInterfaceMockup />
                         </div>
                     </motion.div>

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

@@ -249,10 +249,10 @@ export default function VibeCodingWorkflowPage() {
 
                     {/* Editor Mockup - Mobile */}
                     <motion.div
-                        className="md:hidden w-screen relative overflow-hidden h-[500px]"
+                        className="md:hidden w-screen relative overflow-hidden h-[880px]"
                         {...getBlurAnimationProps(0.2)}
                     >
-                        <div className="absolute top-0 right-10 h-[800px] w-[1000px]">
+                        <div className="absolute top-1/2 right-10 transform -translate-y-1/2 h-[800px] w-[1000px]">
                             <OnlookInterfaceMockup />
                         </div>
                     </motion.div>