fix(landing): stop hero code window widening the page on mobile; tighten navbar

The hero section is a flex column, so its content wrapper had
min-width:auto and inherited the longest unbreakable line of the code
window's <pre> (~384px) — the whole page laid out wider than the
viewport and looked shifted/clipped on phones. Add min-w-0/w-full on
the wrapper and code window, clip the card, keep the <pre> scrolling,
html{overflow-x:clip}. Headline 2.5rem on <640px. Navbar: nowrap CTAs,
tighter gaps/padding on small screens so "Log in / Get Started" stay on
one row at 360px. Visible hero snippet now shows the real X-API-Key
header and API base URL.

Author: Cyberking99

frontend/src/app/globals.css

@@ -43,6 +43,7 @@
 }
 
 html {
+  overflow-x: clip; /* mobile browsers ignore body-only overflow-x; never let a wide element widen the viewport */
   scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

frontend/src/components/CodeWindow.tsx

@@ -5,7 +5,8 @@ import { useState } from 'react';
 export default function CodeWindow() {
   const [copied, setCopied] = useState(false);
 
-  const codeString = `curl -X POST ${process.env.NEXT_PUBLIC_API_URL || 'https://api.qiflow.io'}/v1/payments \\
+  const apiBase = process.env.NEXT_PUBLIC_API_URL || 'https://api.qiflow.io';
+  const codeString = `curl -X POST ${apiBase}/v1/payments \\
   -H "X-API-Key: qiflow_live_9a8f..." \\
   -H "Content-Type: application/json" \\
   -d '{
@@ -21,15 +22,15 @@ export default function CodeWindow() {
   };
 
   return (
-    <div className="w-full max-w-3xl mx-auto group perspective-1000">
-      <div className="relative rounded-2xl bg-[#141033] border border-violet/40 p-4 sm:p-6 shadow-card-lg backdrop-blur-xl transform sm:rotate-x-3 group-hover:rotate-x-0 group-hover:border-violet/70 group-hover:shadow-glow-violet transition-all duration-500 ease-out">
+    <div className="w-full min-w-0 max-w-3xl mx-auto group perspective-1000">
+      <div className="relative min-w-0 overflow-hidden rounded-2xl bg-[#141033] border border-violet/40 p-4 sm:p-6 shadow-card-lg backdrop-blur-xl transform sm:rotate-x-3 group-hover:rotate-x-0 group-hover:border-violet/70 group-hover:shadow-glow-violet transition-all duration-500 ease-out">
         {/* macOS Dots Header */}
-        <div className="flex items-center justify-between border-b border-violet/20 pb-3 mb-4">
-          <div className="flex items-center gap-2">
+        <div className="flex flex-wrap items-center justify-between gap-2 border-b border-violet/20 pb-3 mb-4">
+          <div className="flex items-center gap-2 min-w-0">
             <span className="w-3 h-3 rounded-full bg-rose-500 inline-block" />
             <span className="w-3 h-3 rounded-full bg-amber-500 inline-block" />
             <span className="w-3 h-3 rounded-full bg-emerald-500 inline-block" />
-            <span className="ml-3 text-xs text-slate-400 font-mono">bash — POST /v1/payments</span>
+            <span className="ml-3 text-xs text-slate-400 font-mono truncate">bash — POST /v1/payments</span>
           </div>
           <button
             onClick={copyToClipboard}
@@ -56,13 +57,13 @@ export default function CodeWindow() {
         </div>
 
         {/* Syntax-Highlighted Code Body */}
-        <pre className="font-mono text-xs sm:text-sm text-left overflow-x-auto leading-relaxed p-2">
+        <pre className="font-mono text-xs sm:text-sm text-left overflow-x-auto max-w-full leading-relaxed p-2 [-webkit-overflow-scrolling:touch]">
           <code>
             <span className="text-mint font-semibold">curl</span>{' '}
             <span className="text-blue-400 font-medium">-X POST</span>{' '}
-            <span className="text-[#D4C7FC]">https://api.qiflow.io/v1/payments</span>{' '}\{'\n'}
+            <span className="text-[#D4C7FC]">{apiBase}/v1/payments</span>{' '}\{'\n'}
             {'  '}<span className="text-blue-400 font-medium">-H</span>{' '}
-            <span className="text-[#D4C7FC]">&quot;Authorization: Bearer qiflow_sec_9a8f...&quot;</span>{' '}\{'\n'}
+            <span className="text-[#D4C7FC]">&quot;X-API-Key: qiflow_live_9a8f...&quot;</span>{' '}\{'\n'}
             {'  '}<span className="text-blue-400 font-medium">-H</span>{' '}
             <span className="text-[#D4C7FC]">&quot;Content-Type: application/json&quot;</span>{' '}\{'\n'}
             {'  '}<span className="text-blue-400 font-medium">-d</span>{' '}

frontend/src/components/Navbar.tsx

@@ -22,10 +22,10 @@ export default function Navbar() {
           : 'bg-ink/40 backdrop-blur-xl border-b border-violet/5 py-5'
       }`}
     >
-      <div className="max-w-7xl mx-auto px-6 flex items-center justify-between">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 flex items-center justify-between gap-3">
         {/* Logo */}
-        <Link href="/" className="flex items-center gap-3 group">
-          <div className="w-10 h-10 rounded-full border-2 border-violet flex items-center justify-center shadow-glow-violet group-hover:scale-105 transition-transform bg-indigo/40">
+        <Link href="/" className="flex items-center gap-2.5 sm:gap-3 group shrink-0">
+          <div className="w-9 h-9 sm:w-10 sm:h-10 rounded-full border-2 border-violet flex items-center justify-center shadow-glow-violet group-hover:scale-105 transition-transform bg-indigo/40">
             {/* Mint Upward Triangle Arrow */}
             <svg
               className="w-4 h-4 text-mint transform group-hover:-translate-y-0.5 transition-transform"
@@ -35,7 +35,7 @@ export default function Navbar() {
               <polygon points="12,4 22,20 2,20" />
             </svg>
           </div>
-          <span className="text-xl font-bold tracking-tight text-white font-sans">
+          <span className="text-lg sm:text-xl font-bold tracking-tight text-white font-sans whitespace-nowrap">
             Qi<span className="text-mint">Flow</span>
           </span>
         </Link>
@@ -60,16 +60,16 @@ export default function Navbar() {
         </nav>
 
         {/* Action CTAs */}
-        <div className="flex items-center gap-4">
+        <div className="flex items-center gap-2 sm:gap-4 shrink-0">
           <Link
             href="/auth/login"
-            className="md:hidden text-sm text-[#A5A3B8] hover:text-white font-medium transition-colors px-2 py-1"
+            className="md:hidden text-sm text-[#A5A3B8] hover:text-white font-medium transition-colors px-2 py-1 whitespace-nowrap"
           >
             Log in
           </Link>
           <Link
             href="/auth/register"
-            className="bg-mint text-ink font-semibold text-sm px-5 py-2.5 rounded-xl shadow-glow-mint hover:bg-[#26eed2] hover:scale-[1.02] active:scale-[0.98] transition-all"
+            className="bg-mint text-ink font-semibold text-sm px-4 sm:px-5 py-2.5 rounded-xl shadow-glow-mint hover:bg-[#26eed2] hover:scale-[1.02] active:scale-[0.98] transition-all whitespace-nowrap"
           >
             Get Started
           </Link>

frontend/src/sections/Hero.tsx

@@ -8,7 +8,7 @@ export default function Hero() {
       <div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[550px] h-[550px] bg-violet/25 rounded-full blur-[120px] pointer-events-none animate-drift" />
       <div className="absolute top-1/3 left-1/3 w-[450px] h-[450px] bg-mint/20 rounded-full blur-[120px] pointer-events-none animate-drift-reverse" />
 
-      <div className="relative z-10 max-w-4xl mx-auto space-y-8">
+      <div className="relative z-10 w-full min-w-0 max-w-4xl mx-auto space-y-8">
         {/* Badge Pill */}
         <div className="inline-flex items-center gap-2.5 px-4 py-2 rounded-full bg-indigo/90 border border-violet/40 shadow-card backdrop-blur-md">
           <span className="w-2.5 h-2.5 rounded-full bg-mint pulse-dot" />
@@ -18,7 +18,7 @@ export default function Hero() {
         </div>
 
         {/* H1 Headline */}
-        <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold tracking-tight text-white leading-[1.1]">
+        <h1 className="text-[2.5rem] sm:text-6xl md:text-7xl font-bold tracking-tight text-white leading-[1.1] text-balance">
           The payment gateway for{' '}
           <span className="bg-gradient-to-r from-mint via-[#60ffe0] to-[#80ffdb] bg-clip-text text-transparent drop-shadow">
             Qi
@@ -47,7 +47,7 @@ export default function Hero() {
         </div>
 
         {/* Code Window Container */}
-        <div className="pt-10">
+        <div className="pt-10 w-full min-w-0">
           <CodeWindow />
         </div>
       </div>