Update src/app/page.tsx

src/app/globals.css

@@ -6,10 +6,10 @@
 
   --background: #ffffff;
   --card: #fcfcfc;
-  --foreground: #120006e6;
+  --foreground: #000000e6;
-  --primary-cta: #e63946;
+  --primary-cta: #ff0000;
   --secondary-cta: #ffffff;
-  --accent: #e2e2e2;
+  --accent: #bebebe;
   --background-accent: #c4c4c4;
 
   /* text sizing - set by ThemeProvider */

src/app/page.tsx

@@ -17,134 +17,147 @@ export default function LandingPage() {
       headingFontWeight="extrabold"
     >
       <div className="min-h-screen bg-background text-foreground">
-        <div className="container mx-auto px-4 py-16">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
           <div className="text-center">
-            <h1 className="text-4xl font-bold mb-4">Code with me</h1>
+            <h1 className="text-4xl font-extrabold sm:text-5xl lg:text-6xl mb-8">
-            <p className="text-xl text-muted-foreground mb-8">
+              Learn Coding from Industry Experts
-              Learn Web Development & Programming from Industry Experts
+            </h1>
+            <p className="text-xl mb-8 text-foreground/80 max-w-3xl mx-auto">
+              Join thousands of students transforming their careers with our comprehensive coding programs. From beginner to advanced, we guide you every step of the way.
             </p>
-            <p className="text-lg mb-6">
+            <div className="space-y-4 sm:space-y-0 sm:space-x-4 sm:flex sm:justify-center">
-              Join 2,500+ students learning coding from industry experts. Web development, React, Full Stack courses with 1-on-1 mentorship.
-            </p>
-            <div className="flex justify-center gap-4 mb-12">
               <a
-                href="#courses" 
+                href="#pricing"
-                className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors"
+                className="inline-block px-8 py-4 bg-primary-cta text-white rounded-full font-semibold hover:opacity-90 transition-opacity"
               >
-                Browse Courses
+                Continue to IT
               </a>
               <a
                 href="#contact"
-                className="px-6 py-3 border border-border rounded-lg hover:bg-accent transition-colors"
+                className="inline-block px-8 py-4 border-2 border-primary-cta text-primary-cta rounded-full font-semibold hover:bg-primary-cta hover:text-white transition-colors"
               >
                 Schedule Demo
               </a>
             </div>
           </div>
 
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
+          <div className="mt-24 grid gap-12">
-            <div className="bg-card p-6 rounded-lg border border-border">
+            <section id="about" className="text-center">
-              <h3 className="text-xl font-semibold mb-3">Web Development Bootcamp</h3>
+              <h2 className="text-3xl font-extrabold mb-6">Empowering the Next Generation of Developers</h2>
-              <p className="text-muted-foreground mb-4">
+              <p className="text-lg text-foreground/80 max-w-2xl mx-auto">
-                Start with HTML, CSS, and JavaScript. Build responsive websites and understand the fundamentals.
+                Code with me is dedicated to making quality coding education accessible to everyone. Our expert instructors bring real-world experience to every lesson.
               </p>
-              <p className="text-2xl font-bold text-primary">$299</p>
+            </section>
-            </div>
 
-            <div className="bg-card p-6 rounded-lg border border-border">
+            <section id="courses" className="">
-              <h3 className="text-xl font-semibold mb-3">React Mastery Course</h3>
+              <div className="text-center mb-12">
-              <p className="text-muted-foreground mb-4">
+                <h2 className="text-3xl font-extrabold mb-4">Our Popular Courses</h2>
-                Master React, Node.js, and databases. Build full-stack applications ready for production.
+                <p className="text-lg text-foreground/80">Discover our most sought-after coding courses designed to accelerate your career.</p>
-              </p>
-              <p className="text-2xl font-bold text-primary">$249</p>
               </div>
+              <div className="grid md:grid-cols-3 gap-8">
+                <div className="bg-card rounded-lg p-6 shadow-lg">
+                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494975050-7ahm4emg.jpg" alt="Web Development Bootcamp" className="w-full h-48 object-cover rounded-lg mb-4" />
+                  <h3 className="text-xl font-semibold mb-2">Web Development Bootcamp</h3>
+                  <p className="text-2xl font-bold text-primary-cta mb-4">$299</p>
+                  <p className="text-foreground/80">Master HTML, CSS, JavaScript and build responsive websites.</p>
+                </div>
+                <div className="bg-card rounded-lg p-6 shadow-lg">
+                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766494976181-onrupp9y.jpg" alt="React Mastery Course" className="w-full h-48 object-cover rounded-lg mb-4" />
+                  <h3 className="text-xl font-semibold mb-2">React Mastery Course</h3>
+                  <p className="text-2xl font-bold text-primary-cta mb-4">$249</p>
+                  <p className="text-foreground/80">Learn React from basics to advanced concepts and hooks.</p>
+                </div>
+                <div className="bg-card rounded-lg p-6 shadow-lg">
+                  <img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766765157105-rpvnj8as.jpg" alt="Full Stack Development" className="w-full h-48 object-cover rounded-lg mb-4" />
+                  <h3 className="text-xl font-semibold mb-2">Full Stack Development</h3>
+                  <p className="text-2xl font-bold text-primary-cta mb-4">$399</p>
+                  <p className="text-foreground/80">Complete full-stack development with React and Node.js.</p>
+                </div>
+              </div>
+            </section>
 
-            <div className="bg-card p-6 rounded-lg border border-border">
+            <section id="pricing" className="">
-              <h3 className="text-xl font-semibold mb-3">Full Stack Development</h3>
+              <div className="text-center mb-12">
-              <p className="text-muted-foreground mb-4">
+                <h2 className="text-3xl font-extrabold mb-4">Simple, Transparent Pricing</h2>
-                Learn server-side programming, API development, and database architecture for scalable applications.
+                <p className="text-lg text-foreground/80">Choose the perfect plan for your learning journey. No hidden fees, cancel anytime.</p>
-              </p>
-              <p className="text-2xl font-bold text-primary">$399</p>
               </div>
-          </div>
+              <div className="grid md:grid-cols-3 gap-8">
-          
+                <div className="bg-card rounded-lg p-8 shadow-lg">
-          <div className="mt-16 text-center">
+                  <div className="text-center">
-            <h2 className="text-3xl font-bold mb-6">Simple, Transparent Pricing</h2>
+                    <h3 className="text-2xl font-bold mb-2">Starter</h3>
-            <div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+                    <p className="text-4xl font-bold text-primary-cta mb-4">$49<span className="text-lg text-foreground/60">/month</span></p>
-              <div className="bg-card p-8 rounded-lg border border-border">
+                    <p className="text-foreground/80 mb-6">Perfect for beginners</p>
-                <h3 className="text-xl font-semibold mb-2">Starter</h3>
+                    <a href="#" className="block w-full py-3 px-6 bg-primary-cta text-white rounded-full font-semibold hover:opacity-90 transition-opacity mb-6">
-                <p className="text-3xl font-bold mb-4">$49/month</p>
-                <p className="text-muted-foreground mb-6">Perfect for beginners</p>
-                <ul className="text-left space-y-2 mb-6">
-                  <li>• Access to 3 core courses</li>
-                  <li>• Community forum access</li>
-                  <li>• Email support</li>
-                  <li>• Certificate of completion</li>
-                </ul>
-                <button className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
                       Get Started
-                </button>
+                    </a>
-              </div>
+                    <ul className="text-left space-y-3">
-              
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Access to 3 core courses</li>
-              <div className="bg-card p-8 rounded-lg border border-border">
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Community forum access</li>
-                <h3 className="text-xl font-semibold mb-2">Professional</h3>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Email support</li>
-                <p className="text-3xl font-bold mb-4">$99/month</p>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Certificate of completion</li>
-                <p className="text-muted-foreground mb-6">Best for serious learners</p>
-                <ul className="text-left space-y-2 mb-6">
-                  <li>• Access to 15+ advanced courses</li>
-                  <li>• 1-on-1 mentorship sessions</li>
-                  <li>• Priority support</li>
-                  <li>• Exclusive job board</li>
-                  <li>• Portfolio review sessions</li>
                     </ul>
-                <button className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
+                  </div>
+                </div>
+                <div className="bg-card rounded-lg p-8 shadow-lg border-2 border-primary-cta">
+                  <div className="text-center">
+                    <h3 className="text-2xl font-bold mb-2">Professional</h3>
+                    <p className="text-4xl font-bold text-primary-cta mb-4">$99<span className="text-lg text-foreground/60">/month</span></p>
+                    <p className="text-foreground/80 mb-6">Best for serious learners</p>
+                    <a href="#" className="block w-full py-3 px-6 bg-primary-cta text-white rounded-full font-semibold hover:opacity-90 transition-opacity mb-6">
                       Get Started
-                </button>
+                    </a>
-              </div>
+                    <ul className="text-left space-y-3">
-              
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Access to 15+ advanced courses</li>
-              <div className="bg-card p-8 rounded-lg border border-border">
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>1-on-1 mentorship sessions</li>
-                <h3 className="text-xl font-semibold mb-2">Enterprise</h3>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Priority support</li>
-                <p className="text-3xl font-bold mb-4">Custom</p>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Exclusive job board</li>
-                <p className="text-muted-foreground mb-6">For teams and organizations</p>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Portfolio review sessions</li>
-                <ul className="text-left space-y-2 mb-6">
-                  <li>• All Professional features</li>
-                  <li>• Custom curriculum design</li>
-                  <li>• Team management tools</li>
-                  <li>• Dedicated account manager</li>
-                  <li>• Advanced analytics and reporting</li>
                     </ul>
-                <button className="w-full px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
+                  </div>
+                </div>
+                <div className="bg-card rounded-lg p-8 shadow-lg">
+                  <div className="text-center">
+                    <h3 className="text-2xl font-bold mb-2">Enterprise</h3>
+                    <p className="text-4xl font-bold text-primary-cta mb-4">Custom</p>
+                    <p className="text-foreground/80 mb-6">For teams and organizations</p>
+                    <a href="#" className="block w-full py-3 px-6 bg-primary-cta text-white rounded-full font-semibold hover:opacity-90 transition-opacity mb-6">
                       Contact Sales
-                </button>
+                    </a>
+                    <ul className="text-left space-y-3">
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>All Professional features</li>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Custom curriculum design</li>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Team management tools</li>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Dedicated account manager</li>
+                      <li className="flex items-center"><span className="w-2 h-2 bg-primary-cta rounded-full mr-3"></span>Advanced analytics and reporting</li>
+                    </ul>
                   </div>
                 </div>
               </div>
+            </section>
 
-          <div id="contact" className="mt-16 text-center">
+            <section id="contact" className="text-center">
-            <h2 className="text-3xl font-bold mb-6">Stay Updated on New Courses</h2>
+              <h2 className="text-3xl font-extrabold mb-6">Stay Updated on New Courses</h2>
-            <p className="text-lg text-muted-foreground mb-8">
+              <p className="text-lg text-foreground/80 mb-8">Subscribe to get updates on new courses, exclusive tips, and special offers delivered to your inbox.</p>
-              Subscribe to get updates on new courses, exclusive tips, and special offers delivered to your inbox.
+              <div className="max-w-md mx-auto flex gap-4">
-            </p>
-            <div className="flex justify-center gap-4 max-w-md mx-auto">
                 <input 
                   type="email" 
                   placeholder="your@email.com" 
-                className="flex-1 px-4 py-3 border border-border rounded-lg bg-background"
+                  className="flex-1 px-4 py-3 rounded-full border-2 border-gray-300 focus:border-primary-cta focus:outline-none"
                 />
-              <button className="px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors">
+                <button className="px-8 py-3 bg-primary-cta text-white rounded-full font-semibold hover:opacity-90 transition-opacity">
                   Subscribe
                 </button>
               </div>
-            <p className="text-sm text-muted-foreground mt-4">
+              <p className="text-sm text-foreground/60 mt-4">We respect your privacy. Unsubscribe anytime.</p>
-              We respect your privacy. Unsubscribe anytime.
+            </section>
-            </p>
           </div>
 
-          <div className="mt-16 pt-8 border-t border-border text-center">
+          <footer className="mt-24 pt-12 border-t border-gray-200">
-            <p className="text-muted-foreground">
+            <div className="text-center">
-              © 2025 Code with me. All rights reserved.
+              <div className="text-2xl font-bold mb-4">Code with me</div>
-            </p>
+              <p className="text-foreground/60">© 2025 Code with me. All rights reserved.</p>
             </div>
+          </footer>
         </div>
       </div>
     </ThemeProvider>