mobile responsive

Author: deocagunot

apps/codebility/app/auth/onboarding/_components/Expect/ExpectSection.tsx

@@ -54,7 +54,7 @@ export default function ExpectSection() {
   }, []);
 
   return (
-    <section className="flex min-h-screen w-full items-center justify-center bg-[#10131a] px-6 py-24 text-white">
+    <section className="flex w-full items-center justify-center bg-[#10131a] px-6 py-24 text-white lg:min-h-screen">
       <div className="w-full max-w-5xl">
         {/* Heading */}
         <motion.h2
@@ -104,7 +104,7 @@ export default function ExpectSection() {
 
                   {/* Content wrapper with flex gap */}
                   <div
-                    className={`z-10 flex flex-col items-center gap-4 md:w-[calc(50%-1.5rem)] md:flex-row ${
+                    className={`z-10 flex w-full flex-col items-center gap-4 md:w-[calc(50%-1.5rem)] md:flex-row ${
                       isLeft
                         ? "md:order-2 md:ml-0 md:mr-auto"
                         : "flex-row-reverse md:order-1 md:ml-auto md:mr-0"
@@ -119,7 +119,7 @@ export default function ExpectSection() {
 
                     {/* Card */}
                     <div
-                      className={`mt-4 w-full rounded-xl bg-white/5 p-5 text-left text-sm md:mt-0 ${
+                      className={`mt-4 w-full rounded-xl bg-white/5 p-5 text-center text-sm md:mt-0 lg:text-left ${
                         isLeft ? "md:text-left" : "md:text-right"
                       }`}
                     >

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/AboutSlides.tsx

@@ -19,16 +19,16 @@ export default function AboutSlides({ slidesRef }: AboutSlidesProps) {
       ref={slidesRef}
       className="flex h-auto transform-gpu flex-col will-change-transform lg:h-full lg:w-[400vw] lg:flex-row"
     >
-      <div className="w-full flex-shrink-0 lg:min-h-screen lg:w-screen">
+      <div className="w-full flex-shrink-0 pb-20 lg:min-h-screen lg:w-screen lg:pb-0">
         <AboutUsSlide />
       </div>
-      <div className="w-full flex-shrink-0 lg:min-h-screen lg:w-screen">
+      <div className="w-full flex-shrink-0 pb-20 lg:min-h-screen lg:w-screen lg:pb-0">
         <LaunchpadSlide />
       </div>
-      <div className="w-full flex-shrink-0 lg:min-h-screen lg:w-screen">
+      <div className="w-full flex-shrink-0 pb-20 lg:min-h-screen lg:w-screen lg:pb-0">
         <MissionVisionSlide />
       </div>
-      <div className="w-full flex-shrink-0 lg:min-h-screen lg:w-screen">
+      <div className="w-full flex-shrink-0 pb-20 lg:min-h-screen lg:w-screen lg:pb-0">
         <WhyChooseUsSlide />
       </div>
     </div>

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/AboutUs.tsx

@@ -8,7 +8,7 @@ const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 export default function AboutUsSlide() {
   return (
-    <div className="slide flex h-screen w-screen flex-col items-center justify-center px-6 md:flex-row md:px-16">
+    <div className="slide flex lg:h-screen w-screen flex-col items-center justify-center px-6 md:flex-row md:px-16">
       {/* LEFT: Lottie Animation */}
       <div className="flex w-full items-center justify-center md:w-1/2">
         <Lottie

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/Launchpad.tsx

@@ -8,7 +8,7 @@ const Lottie = dynamic(() => import("lottie-react"), { ssr: false });
 
 export default function LaunchpadSlide() {
   return (
-    <div className="slide relative flex h-screen w-screen items-center justify-center">
+    <div className="slide relative flex lg:h-screen w-screen items-center justify-center">
       {/* Background Lottie */}
       <div className="pointer-events-none absolute inset-0 opacity-30">
         <Lottie

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/MissionVisionSlide.tsx

@@ -4,16 +4,16 @@
 
 export default function MissionVisionSlide() {
   return (
-    <div className="slide justify-cente flex h-screen w-screen items-center px-6 py-10 text-stone-900">
+    <div className="slide justify-cente flex w-screen items-center px-6 text-stone-900 lg:h-screen">
       <div className="mx-auto flex max-w-7xl flex-col justify-center gap-10 lg:flex-row lg:gap-16">
         {/* LEFT: Header and Vision */}
         <div className="flex flex-col justify-center">
-          <h2 className="max-w-lg text-3xl font-extrabold leading-tight sm:text-4xl md:text-5xl">
-            to be the world’s most impactful developer community
+          <h2 className="w-full text-center text-3xl font-bold leading-tight sm:text-4xl md:text-5xl lg:max-w-lg lg:text-left">
+            To be the world's most impactful developer community
           </h2>
 
           {/* Vision Card */}
-          <div className="mt-10 max-w-lg rounded-xl bg-gradient-to-br from-purple-100 to-purple-200 p-6 shadow-md">
+          <div className="mt-10 w-full rounded-xl bg-gradient-to-br from-purple-100 to-purple-200 p-6 shadow-md lg:max-w-lg">
             <div className="mb-2 flex items-center gap-3">
               <VisionIcon />
               <h3 className="text-3xl font-bold">vision</h3>
@@ -30,7 +30,7 @@ export default function MissionVisionSlide() {
 
         {/* RIGHT: Mission */}
         <div className="flex flex-col justify-between gap-6">
-          <div className="max-w-xl rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 p-6 shadow-md">
+          <div className="w-full rounded-xl bg-gradient-to-br from-slate-100 to-slate-200 p-6 shadow-md lg:max-w-xl">
             <div className="mb-2 flex items-center gap-3">
               <MissionIcon />
               <h3 className="text-3xl font-bold">mission</h3>

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/Slides/WhyChooseUsSlide.tsx

@@ -30,7 +30,7 @@ export default function WhyChooseUsSlide() {
   ];
 
   return (
-    <div className="slide relative flex h-screen w-screen flex-col justify-center text-stone-900">
+    <div className="slide relative flex w-screen flex-col justify-center text-stone-900 lg:h-screen">
       {/* Features Grid */}
       <div className="z-0 flex flex-col items-center justify-center px-6 md:px-12 lg:px-24">
         <h2 className="mb-16 text-4xl font-bold tracking-tight text-[#130a3d] md:text-5xl">

apps/codebility/app/auth/onboarding/_components/HeroWithAboutEffect/index.tsx

@@ -4,7 +4,7 @@
 
 import { useRef, useState } from "react";
 
-import { useOnboardingAnimations } from "../../hooks/useOnboardingAnimations";
+import useOnboardingAnimations from "../../hooks/useOnboardingAnimations";
 import AboutSlides from "./AboutSlides";
 import { BubbleBackground } from "./BubbleBackground";
 import { FloatingCodeTags } from "./FloatingCodeTags";
@@ -38,7 +38,7 @@ export default function HeroWithAboutEffect() {
 
       <section
         ref={heroRef}
-        className="relative flex min-h-screen items-center justify-center bg-gradient-to-br from-[#017780] via-[#441e70] to-[#130a3d] px-10 py-10 text-white lg:h-screen"
+        className="relative flex items-center justify-center bg-gradient-to-br from-[#017780] via-[#441e70] to-[#130a3d] px-10 py-10 text-white lg:h-screen lg:min-h-screen"
       >
         <div className="relative mx-auto flex w-full flex-col items-center justify-start overflow-hidden rounded-3xl bg-[#130a3d]/80 p-10 lg:h-[calc(100vh-80px)]">
           <LottieBackground />

apps/codebility/app/auth/onboarding/_components/IsAndIsnt/IsAndIsntSection.tsx

@@ -26,7 +26,7 @@ const items = [
 
 export default function IsAndIsntSection() {
   return (
-    <section className="flex min-h-screen w-full items-center justify-center bg-gradient-to-br from-white via-gray-50 to-white px-6 py-24 text-black">
+    <section className="flex w-full items-center justify-center bg-gradient-to-br from-white via-gray-50 to-white px-6 py-20 text-black lg:min-h-screen">
       <div className="w-full max-w-6xl text-center">
         <h2 className="mb-16 text-4xl font-bold tracking-tight text-[#130a3d] md:text-5xl">
           What <span className="text-indigo-600">Codebility</span> Is and Isn’t?

apps/codebility/app/auth/onboarding/_components/IsNot/IsNotSection.tsx

@@ -34,7 +34,7 @@ const items = [
 
 export default function IsNotSection() {
   return (
-    <section className="flex min-h-screen w-full items-center justify-center bg-[#10131a] px-6 py-24 text-white">
+    <section className="flex w-full items-center justify-center bg-[#10131a] px-6 py-20 text-white lg:min-h-screen">
       <div className="w-full max-w-6xl text-center">
         {/* Heading */}
         <motion.h2

apps/codebility/app/auth/onboarding/_components/Mindset/MindsetSection.tsx

@@ -35,7 +35,7 @@ const cards = [
 export default function MindsetSection() {
   return (
     <LazyMotion features={domAnimation}>
-      <section className="relative flex min-h-screen w-full items-center justify-center bg-white px-6 py-16 text-black">
+      <section className="relative flex w-full items-center justify-center bg-white px-6 py-20 text-black lg:min-h-screen">
         <div className="mx-auto grid w-full max-w-7xl grid-cols-1 items-center gap-12 md:grid-cols-2">
           {/* LEFT: Heading + Lightbulb (Centered) */}
           <m.div