Make both pages fully responsive (mobile-first)

frontend/src/index.css

@@ -6,12 +6,13 @@
 
 body {
   margin: 0;
-  background: #ffffff; /* Pure white as requested */
-  color: #0f172a; /* navy */
+  background: #ffffff;
+  color: #0f172a;
   font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 #root { min-height: 100vh; }

frontend/src/pages/AppPage.jsx

@@ -273,9 +273,9 @@ export default function AppPage() {
   };
 
   return (
-    <div className="bg-bg font-sans text-navy">
-      
-      {/* Main Content Area (Fills at least 1 screen height to push footer down) */}
+    <div className="bg-bg font-sans text-navy overflow-x-hidden">
+
+      {/* Main Content Area */}
       <div className="min-h-[100dvh] relative flex flex-col">
         {/* Floating Home Button (No Navbar) */}
         <button onClick={() => navigate('/')}
@@ -287,11 +287,11 @@ export default function AppPage() {
           Home
         </button>
 
-        <main className="flex-1 w-full max-w-5xl mx-auto px-4 sm:px-6 py-20 sm:py-24 flex flex-col gap-5 sm:gap-7">
+        <main className="flex-1 w-full max-w-5xl mx-auto px-3 sm:px-6 pt-16 sm:pt-20 pb-10 sm:pb-14 flex flex-col gap-4 sm:gap-6">
 
 
         {/* INPUT PANELS */}
-        <div className="grid grid-cols-1 md:grid-cols-[1fr_32px_1fr] items-start gap-4 md:gap-0">
+        <div className="grid grid-cols-1 sm:grid-cols-[1fr_28px_1fr] items-start gap-3 sm:gap-0">
 
           {/* SOURCE */}
           <SpotlightCard className="bg-white border border-border shadow-sm rounded-2xl p-4 sm:p-6 flex flex-col gap-4">
@@ -354,12 +354,13 @@ export default function AppPage() {
             )}
           </SpotlightCard>
 
-          {/* arrow */}
-          <div className="hidden md:flex items-center justify-center pt-24 text-border2">
+          {/* arrow — shown on sm+ */}
+          <div className="hidden sm:flex items-center justify-center pt-20 text-border2">
             <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
           </div>
 
-          <div className="md:hidden flex items-center gap-3">
+          {/* divider — mobile only */}
+          <div className="sm:hidden flex items-center gap-3">
             <div className="flex-1 h-px bg-border" />
             <span className="text-slate text-xs font-bold tracking-widest">THEN</span>
             <div className="flex-1 h-px bg-border" />
@@ -452,7 +453,7 @@ export default function AppPage() {
               <h2 className="text-lg sm:text-xl font-extrabold text-navy text-center">Results</h2>
 
               {/* 3-panel comparison */}
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-3 sm:gap-4">
+              <div className="grid grid-cols-1 xs:grid-cols-3 sm:grid-cols-3 gap-2 sm:gap-3">
                 {[
                   { label: 'Source',  src: srcFile ? URL.createObjectURL(srcFile) : srcB64 },
                   { label: 'Target',  src: tgtFile ? URL.createObjectURL(tgtFile) : tgtB64 },

frontend/src/pages/LandingPage.jsx

@@ -1,6 +1,4 @@
-import { useNavigate, Link } from 'react-router-dom';
-import { motion } from 'framer-motion';
-import SplitText from '../components/ui/SplitText';
+import { useNavigate } from 'react-router-dom';
 import BlurText from '../components/ui/BlurText';
 import AnimatedContent from '../components/ui/AnimatedContent';
 import Magnet from '../components/ui/Magnet';
@@ -11,114 +9,107 @@ export default function LandingPage() {
   const navigate = useNavigate();
 
   return (
-    // min-h-screen and overflow-x-hidden allow normal scrolling, but we make the Hero 100vh
     <div className="min-h-screen w-full bg-bg font-sans overflow-x-hidden flex flex-col text-navy">
 
-      {/* ═══════════════ TOP LOGOS (No Navbar) ═══════════════ */}
-      <div className="absolute top-0 left-0 right-0 z-50 flex items-start justify-between px-3 sm:px-8 pt-3 sm:pt-4 pointer-events-none gap-2">
-        {/* Left — Marwadi University */}
-        <div className="shrink-0 pointer-events-auto max-w-[48%]">
+      {/* ═══ TOP LOGOS ═══ */}
+      <div className="absolute top-0 left-0 right-0 z-50 flex items-start justify-between px-3 sm:px-6 pt-3 sm:pt-4 pointer-events-none gap-2">
+        <div className="shrink-0 pointer-events-auto max-w-[45%]">
           <img src="/logos/marwadi_university.jpeg" alt="Marwadi University"
-            className="h-10 sm:h-14 md:h-20 w-auto object-contain mix-blend-multiply" />
+            className="h-8 sm:h-12 md:h-16 w-auto max-w-full object-contain mix-blend-multiply" />
         </div>
-
-        {/* Right — Faculty of Engineering */}
-        <div className="shrink-0 pointer-events-auto mt-1 sm:mt-2 max-w-[48%] flex justify-end">
+        <div className="shrink-0 pointer-events-auto mt-1 sm:mt-2 max-w-[45%] flex justify-end">
           <img src="/logos/engineering_faculty.jpeg" alt="Faculty of Engineering"
-            className="h-7 sm:h-12 md:h-16 w-auto object-contain mix-blend-multiply" />
+            className="h-6 sm:h-10 md:h-14 w-auto max-w-full object-contain mix-blend-multiply" />
         </div>
       </div>
 
-
-      {/* ═══════════════════════════ HERO (Takes up exactly 100vh) ═══════════════════════════ */}
-      <main className="h-screen min-h-[550px] relative flex flex-col items-center justify-center px-4 sm:px-6">
-        {/* Subtle grid background */}
+      {/* ═══ HERO ═══ */}
+      <main className="flex-1 relative flex flex-col items-center justify-center px-4 sm:px-6 py-24 sm:py-28 min-h-screen">
+        {/* Grid background */}
         <div className="absolute inset-0 pointer-events-none" style={{
           backgroundImage: 'linear-gradient(rgba(14,116,144,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(14,116,144,0.02) 1px,transparent 1px)',
           backgroundSize: '60px 60px',
         }} />
 
-        <div className="relative z-10 w-full max-w-4xl mx-auto text-center flex flex-col items-center gap-6 sm:gap-8 -mt-10 sm:-mt-16 md:-mt-20">
+        <div className="relative z-10 w-full max-w-3xl mx-auto text-center flex flex-col items-center gap-5 sm:gap-7">
 
-          {/* ICT Logo - Fixed */}
+          {/* ICT Logo */}
           <AnimatedContent delay={0} direction="down" distance={20}>
-            <div className="inline-flex px-4">
-              <img src="/logos/ict_logo.png" alt="ICT Department"
-                className="w-[180px] sm:w-[280px] md:w-[380px] max-w-full h-auto object-contain mix-blend-multiply" />
-            </div>
+            <img src="/logos/ict_logo.png" alt="ICT Department"
+              className="w-[140px] sm:w-[220px] md:w-[300px] max-w-[70vw] h-auto object-contain mix-blend-multiply mx-auto" />
           </AnimatedContent>
 
           {/* Headline */}
-          <div className="w-full">
-            <h1 className="text-[clamp(2.2rem,6vw,4.5rem)] font-black leading-[1.05] tracking-[-0.04em] text-navy flex flex-col md:flex-row items-center justify-center md:gap-x-1">
-              <span className="inline-flex items-center justify-center md:justify-start h-[1.2em] overflow-visible whitespace-nowrap w-full md:w-[6.4em]">
+          <div className="w-full px-2">
+            <h1 className="font-black leading-tight tracking-tight text-navy flex flex-col items-center gap-1 sm:gap-2"
+                style={{ fontSize: 'clamp(1.8rem, 6vw, 4rem)' }}>
+              {/* Typewriter — allow wrap on tiny screens */}
+              <span className="block w-full text-center overflow-hidden">
                 <Typewriter words={[
-                  "Your Future",       // English
-                  "તમારું ભવિષ્ય",       // Gujarati
-                  "మీ భవిష్యత్తు",          // Telugu
-                  "आपका भविष्य",         // Hindi
-                  "Seu Futuro"         // Portuguese
+                  'Your Future',
+                  'તમારું ભવિ��્ય',
+                  'మీ భవిష్యత్తు',
+                  'आपका भविष्य',
+                  'Seu Futuro',
                 ]} />
               </span>
-              <ShinyText text="Starts Here" className="inline-block mt-2 md:mt-4 text-[clamp(1.4rem,4vw,2.5rem)] opacity-90" />
+              <ShinyText text="Starts Here"
+                className="block text-[0.65em] sm:text-[0.7em] opacity-90" />
             </h1>
           </div>
 
           {/* Subtitle */}
           <BlurText
             text="Visualize your potential. Experience campus life virtually and see yourself wearing our colors in just one click."
-            className="text-sm sm:text-base text-slate max-w-2xl leading-relaxed px-2 font-medium"
+            className="text-xs sm:text-sm md:text-base text-slate max-w-xl leading-relaxed px-2 font-medium"
             delay={0.3}
           />
 
-          {/* CTA Button */}
-          <AnimatedContent delay={0.45} direction="up" distance={20} className="w-full max-w-xs sm:max-w-none mt-2">
-            <div className="flex justify-center">
-              <Magnet className="w-full sm:w-auto">
+          {/* CTA */}
+          <AnimatedContent delay={0.45} direction="up" distance={20} className="w-full mt-1">
+            <div className="flex justify-center px-4 sm:px-0">
+              <Magnet className="w-full sm:w-auto max-w-xs sm:max-w-none">
                 <button onClick={() => navigate('/app')}
-                  className="w-full sm:w-auto flex items-center justify-center gap-2.5 bg-teal text-white px-10 py-3.5 sm:py-4 rounded-xl font-bold text-sm sm:text-base shadow-lg shadow-teal/20 hover:shadow-xl hover:shadow-teal/30 hover:-translate-y-0.5 active:scale-95 transition-all duration-200">
-                  <svg className="w-5 h-5 shrink-0" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3" fill="currentColor" /></svg>
+                  className="w-full sm:w-auto flex items-center justify-center gap-2.5 bg-teal text-white px-8 sm:px-10 py-3.5 rounded-xl font-bold text-sm sm:text-base shadow-lg shadow-teal/20 hover:shadow-xl hover:shadow-teal/30 hover:-translate-y-0.5 active:scale-95 transition-all duration-200">
+                  <svg className="w-4 h-4 sm:w-5 sm:h-5 shrink-0" viewBox="0 0 24 24">
+                    <polygon points="5 3 19 12 5 21 5 3" fill="currentColor" />
+                  </svg>
                   Enter Studio
                 </button>
               </Magnet>
             </div>
           </AnimatedContent>
 
-          {/* Excellence Trust Bar */}
-          <AnimatedContent delay={0.6} direction="up" distance={10} className="mt-6 sm:mt-10 w-full">
-            <div className="flex items-center justify-center opacity-90 px-4">
-              <img src="/logos/qs_ranking.png" alt="QS Ranking" className="h-12 sm:h-16 md:h-20 w-auto object-contain mix-blend-multiply" />
+          {/* QS Ranking badge */}
+          <AnimatedContent delay={0.6} direction="up" distance={10} className="mt-2 sm:mt-6 w-full">
+            <div className="flex items-center justify-center px-4">
+              <img src="/logos/qs_ranking.png" alt="QS Ranking"
+                className="h-10 sm:h-14 md:h-18 w-auto max-w-[80vw] object-contain mix-blend-multiply opacity-90" />
             </div>
           </AnimatedContent>
         </div>
       </main>
 
-
-      {/* ═══════════════════════════ BOTTOM AREA (Scrollable) ═══════════════════════════ */}
-      <div className="flex flex-col bg-white">
-
-        {/* Footer Strip */}
-        <footer className="bg-bg3 border-t border-border py-2 px-4">
-          <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-3 text-xs sm:text-sm text-slate">
-            <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 text-center sm:text-left w-full sm:w-auto">
-              <img src="/logos/ict_logo_black.png" alt="ICT Department" className="h-6 sm:h-8 w-auto opacity-70" />
-              <div className="w-12 h-px sm:w-px sm:h-8 bg-border" />
-              <div className="flex flex-col leading-tight">
-                <strong className="text-navy">DeepFace Studio</strong>
-                <span>Dept. of ICT, Marwadi University</span>
-              </div>
-            </div>
-            <div className="flex items-center gap-2 sm:gap-3 flex-wrap justify-center font-medium">
-              <span>Educational use only</span>
-              <span className="text-border2">·</span>
-              <span>Local processing</span>
-              <span className="text-border2">·</span>
-              <span>© Aditya Raj 2026</span>
+      {/* ═══ FOOTER ═══ */}
+      <footer className="bg-bg3 border-t border-border py-3 px-4">
+        <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-center justify-between gap-2 sm:gap-4 text-xs sm:text-sm text-slate">
+          <div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-4 text-center sm:text-left w-full sm:w-auto">
+            <img src="/logos/ict_logo_black.png" alt="ICT Department" className="h-6 sm:h-8 w-auto opacity-70" />
+            <div className="w-10 h-px sm:w-px sm:h-7 bg-border" />
+            <div className="flex flex-col leading-tight">
+              <strong className="text-navy">DeepFace Studio</strong>
+              <span>Dept. of ICT, Marwadi University</span>
             </div>
           </div>
-        </footer>
-
-      </div>
+          <div className="flex items-center gap-2 flex-wrap justify-center font-medium text-[11px] sm:text-xs">
+            <span>Educational use only</span>
+            <span className="text-border2">·</span>
+            <span>Local processing</span>
+            <span className="text-border2">·</span>
+            <span>© Aditya Raj 2026</span>
+          </div>
+        </div>
+      </footer>
 
     </div>
   );

frontend/tailwind.config.js

@@ -2,6 +2,14 @@
 export default {
   content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
+    screens: {
+      xs:  '480px',
+      sm:  '640px',
+      md:  '768px',
+      lg:  '1024px',
+      xl:  '1280px',
+      '2xl': '1536px',
+    },
     extend: {
       colors: {
         // Premium Light Academic Theme - White Background