enhance onboarding

Author: deocagunot

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

@@ -54,18 +54,21 @@ export default function ExpectSection() {
   }, []);
 
   return (
-    <section className="flex w-full items-center justify-center bg-[#10131a] px-6 py-24 text-white lg:min-h-screen">
+    <section className="relative flex w-full items-center justify-center overflow-hidden bg-gradient-to-br from-zinc-900 via-zinc-950 to-black px-6 py-24 text-white lg:min-h-screen">
+      {/* soft pastel glows for light motif */}
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(900px_520px_at_85%_20%,rgba(236,72,153,0.15),transparent_60%),radial-gradient(800px_480px_at_10%_80%,rgba(20,184,166,0.15),transparent_60%)]" />
+
       <div className="w-full max-w-5xl">
         {/* Heading */}
         <motion.h2
           initial={{ opacity: 0, y: 30 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8 }}
           viewport={{ once: true }}
-          className="mb-20 text-center text-4xl font-bold leading-tight md:text-5xl"
+          className="mb-20 text-center text-4xl font-bold leading-tight text-purple-500 md:text-5xl"
         >
           What we expect from{" "}
-          <span className="text-[3.5rem] font-black text-pink-400 drop-shadow-lg md:text-[4.5rem]">
+          <span className="bg-gradient-to-r from-pink-400 via-purple-500 to-teal-600 bg-clip-text text-[3.5rem] font-black text-transparent drop-shadow-lg md:text-[4.5rem]">
             YOU
           </span>
         </motion.h2>

apps/codebility/app/auth/onboarding/_components/ExpectFromUs/ExpectFromUsSection.tsx

@@ -14,13 +14,19 @@ const expectations = [
 
 export default function ExpectFromUs() {
   return (
-    <section className="relative z-10 min-h-screen w-full bg-gradient-to-br from-white via-slate-100 to-gray-200 px-6 py-20 text-gray-800">
+    <section className="relative z-10 min-h-screen w-full overflow-hidden bg-gradient-to-br from-white via-slate-100 to-gray-200 px-6 py-20 text-gray-800">
+      {/* soft vignette + motif glow */}
+      <div className="pointer-events-none absolute inset-0">
+        <div className="absolute -left-24 -top-24 h-72 w-72 rounded-full bg-teal-400/30 blur-3xl" />
+        <div className="absolute -right-32 top-1/2 h-80 w-80 rounded-full bg-teal-500/25 blur-3xl" />
+        <div className="absolute bottom-0 left-1/2 h-32 w-[120%] -translate-x-1/2 bg-gradient-to-t from-purple-400 to-transparent" />
+      </div>
       <div className="mx-auto flex min-h-[calc(100vh-160px)] max-w-6xl flex-col items-center justify-center">
         {/* Heading */}
         <div className="text-center">
           <h2 className="mb-20 text-center text-4xl font-bold leading-tight md:text-5xl">
             What you can{" "}
-            <span className="text-[3.5rem] font-black text-pink-600 drop-shadow-lg md:text-[4.5rem]">
+            <span className="text-[3.5rem] font-black text-purple-600 drop-shadow-lg md:text-[4.5rem]">
               EXPECT
             </span>
           </h2>
@@ -31,7 +37,7 @@ export default function ExpectFromUs() {
             className="mb-10 flex justify-center"
           >
             <Sparkles
-              className="h-12 w-12 text-pink-400 drop-shadow-[0_0_20px_rgba(236,72,153,0.6)]"
+              className="h-12 w-12 text-purple-400 drop-shadow-[0_0_20px_rgba(236,72,153,0.6)]"
               strokeWidth={1.5}
             />
           </m.div>
@@ -48,7 +54,7 @@ export default function ExpectFromUs() {
               transition={{ duration: 0.5, delay: index * 0.1 }}
               className="group relative rounded-xl border border-gray-200 bg-white p-6 shadow-md transition hover:shadow-xl"
             >
-              <span className="absolute -left-3 -top-3 flex h-10 w-10 items-center justify-center rounded-full bg-pink-500 font-bold text-white shadow-lg ring-4 ring-white">
+              <span className="absolute -left-3 -top-3 flex h-10 w-10 items-center justify-center rounded-full bg-purple-500 font-bold text-white shadow-lg ring-4 ring-white">
                 {`0${index + 1}`}
               </span>
               <p className="mt-4 text-[15px] font-medium leading-relaxed text-gray-700">