fix(style): update landing page for light mode

src/pages/bootcamp/components/Features.tsx

@@ -74,13 +74,15 @@ export default function Features() {
                 className="group relative bg-white dark:bg-gray-800 border-2 border-gray-200 dark:border-gray-800 rounded-lg p-6 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors drop-shadow-lg"
               >
                 <div className="relative">
-                  <div className="inline-flex items-center justify-center w-12 h-12 mb-4">
+                  <div className="flex items-center mb-4 gap-2">
                     <Icon className="w-6 h-6 text-[var(--accent-9)]" />
+                    <h3 className="text-lg font-semibold dark:text-white text-gray-900">
+                      {feature.title}
+                    </h3>
                   </div>
-                  <h3 className="text-lg font-semibold text-white mb-2">
-                    {feature.title}
-                  </h3>
-                  <p className="text-gray-400">{feature.description}</p>
+                  <p className="text-gray-500 dark:text-gray-400">
+                    {feature.description}
+                  </p>
                 </div>
               </motion.div>
             )

src/pages/bootcamp/components/Hero.tsx

@@ -5,6 +5,8 @@ import {fadeInUp, scaleIn} from './animations'
 import {useState, useEffect} from 'react'
 import '../styles.css'
 import {ArrowCircleDownIcon} from '@heroicons/react/solid'
+import {useTheme} from 'next-themes'
+import {cn} from '@/ui/utils'
 
 const phrases = [
   'Level Up Your Skills With',
@@ -35,6 +37,7 @@ function scrollToSignup(e: React.MouseEvent<HTMLAnchorElement>) {
 }
 
 export default function Hero() {
+  const {theme} = useTheme()
   const [phraseIndex, setPhraseIndex] = useState(0)
 
   useEffect(() => {
@@ -46,11 +49,17 @@ export default function Hero() {
 
   return (
     <section className="py-12 md:py-20 text-center relative overflow-hidden">
-      <div className="absolute inset-0 pattern-dots" />
+      <div
+        className={cn(
+          'absolute inset-0',
+          theme === 'light' && 'pattern-dots-light',
+          theme === 'dark' && 'pattern-dots',
+        )}
+      />
       <motion.div {...scaleIn} className="relative max-w-4xl mx-auto px-4">
         <motion.h1
           {...fadeInUp}
-          className="relative mb-6 text-4xl font-extrabold tracking-tight text-white sm:text-5xl md:text-6xl leading-tight"
+          className="relative mb-6 text-4xl font-extrabold tracking-tight dark:text-white sm:text-5xl md:text-6xl leading-tight"
         >
           <span className="relative h-[1.2em] block mb-2">
             <AnimatePresence mode="wait">
@@ -69,15 +78,20 @@ export default function Hero() {
         <motion.p
           {...fadeInUp}
           transition={{delay: 0.1}}
-          className="relative mb-8 text-lg md:text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed"
+          className="relative mb-8 text-lg md:text-xl text-gray-500 max-w-3xl mx-auto leading-relaxed"
         >
-          Join <span className="emphasis-text">John Lindquist</span>, founder of{' '}
-          egghead.io, for an immersive, hands-on program that will revolutionize
-          your dev workflow. In just{' '}
-          <span className="emphasis-text">20 days</span>, you&apos;ll master
-          building real-world AI applications that automate the tedious, amplify
-          your capabilities, and{' '}
-          <span className="emphasis-text">
+          Join{' '}
+          <span className="text-gray-900 dark:text-white font-medium">
+            John Lindquist
+          </span>
+          , founder of egghead.io, for an immersive, hands-on program that will
+          revolutionize your dev workflow. In just{' '}
+          <span className="text-gray-900 dark:text-white font-medium">
+            20 days
+          </span>
+          , you&apos;ll master building real-world AI applications that automate
+          the tedious, amplify your capabilities, and{' '}
+          <span className="text-gray-900 dark:text-white font-medium">
             transform how your team ships software
           </span>
           .

src/pages/bootcamp/components/Instructor.tsx

@@ -10,7 +10,7 @@ export default function Instructor() {
         <motion.div {...fadeInUp} className="max-w-3xl mx-auto">
           <div className="mx-auto flex w-full max-w-3xl flex-col-reverse items-center justify-between gap-10 px-6 sm:gap-20 md:flex-row">
             <div>
-              <h2 className="mb-8 text-3xl font-bold text-white flex flex-col items-center sm:items-start">
+              <h2 className="mb-8 text-3xl font-bold dark:text-white flex flex-col items-center sm:items-start">
                 <span className="font-heading dark:text-primary text-sm uppercase tracking-widest">
                   {' '}
                   Your Instructor
@@ -19,15 +19,15 @@ export default function Instructor() {
                   John Lindquist
                 </span>
               </h2>
-              <p className="mb-8 text-lg text-gray-400 text-left bg-white dark:bg-gray-900/80">
+              <p className="mb-8 text-lg text-gray-500 dark:text-gray-400 text-left bg-white dark:bg-gray-900/80">
                 John Lindquist is a recognized leader in developer education. He
                 founded egghead.io—an innovative platform that has guided
                 thousands of coders from novices to industry experts. With years
                 of practical teaching experience and a genuine passion for
                 helping others succeed, John will provide the clarity and
                 support you need to master AI development.
               </p>
-              <p className="text-md text-gray-400 text-left bg-white dark:bg-gray-900/80">
+              <p className="text-md text-gray-500 dark:text-gray-400 text-left bg-white dark:bg-gray-900/80">
                 Join John and a supportive community of developers as you build
                 the skills needed to create impactful AI solutions.
               </p>

src/pages/bootcamp/components/SignUpForm.tsx

@@ -63,10 +63,10 @@ export default function SignUpForm() {
           viewport={{once: true}}
           className="max-w-2xl mx-auto"
         >
-          <h2 className="mb-4 text-3xl font-bold text-center text-white">
+          <h2 className="mb-4 text-3xl font-bold text-center dark:text-white text-gray-900">
             Ready to Build a Team of AI Devs?
           </h2>
-          <p className="mb-8 text-center text-gray-400 mx-auto">
+          <p className="mb-8 text-center text-gray-500 dark:text-gray-400 mx-auto">
             Secure your spot in this unique, 20-day cohort-based workshop.
             You&apos;ll learn alongside a supportive community of developers,
             all on the same journey to master AI. Enter your email below and be
@@ -81,12 +81,12 @@ export default function SignUpForm() {
                 onChange={(e) => setEmail(e.target.value)}
                 required
                 disabled={isSubmitting}
-                className="flex-grow bg-[#0A0A0A] border-gray-800 text-white placeholder:text-gray-500"
+                className="flex-grow bg-gray-50 dark:bg-gray-800/50 dark:border-gray-800 border-gray-200 text-gray-900 dark:text-white placeholder:text-gray-500"
               />
               <Button
                 type="submit"
                 disabled={isSubmitting}
-                className="bg-gray-50 dark:bg-gray-800/50  dark:text-white text-black font-semibold transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="bg-blue-500  text-white  font-semibold transition-all duration-200 hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 {isSubmitting ? 'Joining...' : 'Join Waitlist'}
               </Button>

src/pages/bootcamp/components/WorkshopStructure.tsx

@@ -59,10 +59,12 @@ export default function WorkshopStructure() {
               <div className="text-[var(--accent-9)] font-medium mb-2">
                 {week.week}
               </div>
-              <h3 className="text-lg font-semibold text-white mb-2">
+              <h3 className="text-lg font-semibold dark:text-white text-gray-900 mb-2">
                 {week.title}
               </h3>
-              <p className="text-gray-300">{week.description}</p>
+              <p className="text-gray-500 dark:text-gray-400">
+                {week.description}
+              </p>
             </motion.div>
           ))}
         </motion.div>

src/pages/bootcamp/index.tsx

@@ -5,8 +5,11 @@ import Instructor from './components/Instructor'
 import SignUpForm from './components/SignUpForm'
 import {motion} from 'framer-motion'
 import type {NextPage} from 'next'
+import {cn} from '@/ui/utils'
+import {useTheme} from 'next-themes'
 
 const BootcampPage: NextPage = () => {
+  const {theme} = useTheme()
   console.log(
     '[BootcampPage] Rendering on',
     typeof window === 'undefined' ? 'server' : 'client',
@@ -26,7 +29,11 @@ const BootcampPage: NextPage = () => {
 
         <div className="relative bg-[#111111]">
           <div
-            className={`absolute inset-0 bg-white dark:bg-gray-900 pattern-dots-dense`}
+            className={cn(
+              'absolute inset-0 bg-white dark:bg-gray-900',
+              theme === 'dark' && 'pattern-dots-dense',
+              theme === 'light' && 'pattern-dots-dense-light',
+            )}
           />
           <Features />
         </div>
@@ -37,7 +44,11 @@ const BootcampPage: NextPage = () => {
 
         <div className="relative bg-[#111111]">
           <div
-            className={`absolute inset-0 bg-white dark:bg-gray-900 pattern-dots-dense`}
+            className={cn(
+              'absolute inset-0 bg-white dark:bg-gray-900',
+              theme === 'dark' && 'pattern-dots-dense',
+              theme === 'light' && 'pattern-dots-dense-light',
+            )}
           />
           <Instructor />
         </div>

src/pages/bootcamp/styles.css

@@ -21,12 +21,26 @@
   background-position: 0 0, 15px 15px;
 }
 
+.pattern-dots-light {
+  background-image: 
+    linear-gradient(to bottom, rgba(255, 255, 255, 0.9), transparent),
+    radial-gradient(rgba(0, 0, 0, 0.1) 2px, transparent 2px);
+  background-size: 100% 100%, 30px 30px;
+  background-position: 0 0, 15px 15px;
+}
+
 .pattern-dots-dense {
   background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 1px);
   background-size: 16px 16px;
   background-position: 8px 8px;
 }
 
+.pattern-dots-dense-light {
+  background-image: radial-gradient(rgba(0, 0, 0, 0.2) 1px, transparent 1px);
+  background-size: 16px 16px;
+  background-position: 8px 8px;
+}
+
 .gradient-text {
   /* Temporarily remove gradient for testing */
   color: #61DAFB;