From 6963f9fc32680f389b3ae388a5f559e14ec18050 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Mon, 20 Apr 2026 09:40:21 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 487 +++++++++++++++--------------------------------
 1 file changed, 150 insertions(+), 337 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index e6228d8..589c0b3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -19,354 +19,167 @@ export default function LandingPage() {
         defaultButtonVariant="text-stagger"
         defaultTextAnimation="background-highlight"
         borderRadius="rounded"
+        contentWidth="medium"
+        sizing="medium"
+        background="circleGradient"
+        cardStyle="glass-elevated"
+        primaryButtonStyle="gradient"
+        secondaryButtonStyle="glass"
+        headingFontWeight="normal"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleFullscreen
-      navItems={[
-        {
-          name: "About",
-          id: "#about",
-        },
-        {
-          name: "Courses",
-          id: "#courses",
-        },
-        {
-          name: "Mentors",
-          id: "#team",
-        },
-        {
-          name: "Contact",
-          id: "#contact",
-        },
-      ]}
-      brandName="CodeStart"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleFullscreen
+            navItems={[
+              { name: "Home", id: "/" },
+              { name: "About", id: "#about" },
+              { name: "Courses", id: "#courses" },
+              { name: "Mentors", id: "#team" },
+              { name: "Contact", id: "#contact" }
+            ]}
+            brandName="CodeStart"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroLogoBillboard
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      logoText="CodeStart"
-      description="Empowering students to launch their IT careers through mentorship and project-based learning. Learn Python, HTML, and JavaScript with ease."
-      buttons={[
-        {
-          text: "Start Learning",
-          href: "#courses",
-        },
-        {
-          text: "See Our Mentors",
-          href: "#team",
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/concentrated-blonde-group-young-people-casual-clothes-working-modern-office_146671-16500.jpg?_wi=1"
-      imageAlt="student coding laptop"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <HeroLogoBillboard
+            background={{ variant: "sparkles-gradient" }}
+            logoText="CodeStart"
+            description="Empowering students to launch their IT careers through mentorship and project-based learning. Learn Python, HTML, and JavaScript with ease."
+            buttons={[
+              { text: "Start Learning", href: "#courses" },
+              { text: "See Our Mentors", href: "#team" }
+            ]}
+            imageSrc="http://img.b2bpic.net/free-photo/concentrated-blonde-group-young-people-casual-clothes-working-modern-office_146671-16500.jpg"
+            imageAlt="student coding laptop"
+            mediaAnimation="slide-up"
+          />
+        </div>
 
-  <div id="about" data-section="about">
-      <InlineImageSplitTextAbout
-      useInvertedBackground={false}
-      heading={[
-        {
-          type: "text",
-          content: "Our Mission: ",
-        },
-        {
-          type: "image",
-          src: "http://img.b2bpic.net/free-photo/people-coworking-concept-mixed-race-youngsters-work-school-project_273609-44839.jpg",
-          alt: "mentor and student coding",
-        },
-        {
-          type: "text",
-          content: " Making IT careers accessible to every student.",
-        },
-      ]}
-    />
-  </div>
+        <div id="about" data-section="about">
+          <InlineImageSplitTextAbout
+            useInvertedBackground={false}
+            heading={[
+              { type: "text", content: "Our Mission: " },
+              { type: "image", src: "http://img.b2bpic.net/free-photo/people-coworking-concept-mixed-race-youngsters-work-school-project_273609-44839.jpg", alt: "mentor and student coding" },
+              { type: "text", content: " Making IT careers accessible to every student." }
+            ]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardSixteen
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      negativeCard={{
-        items: [
-          "No stressful academic pressure",
-          "No outdated learning materials",
-          "No feeling lost during exercises",
-          "No one-size-fits-all approach",
-          "No hidden subscription fees",
-        ],
-      }}
-      positiveCard={{
-        items: [
-          "Personalized 1-on-1 mentor support",
-          "Hands-on project-based curriculum",
-          "Industry-relevant skill training",
-          "Community networking opportunities",
-          "Portfolio building exercises",
-        ],
-      }}
-      title="Why Choose CodeStart?"
-      description="We bridge the gap between classroom theory and industry-ready projects."
-    />
-  </div>
+        <div id="features" data-section="features">
+          <FeatureCardSixteen
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            negativeCard={{
+              items: [
+                "No stressful academic pressure",                "No outdated learning materials",                "No feeling lost during exercises",                "No one-size-fits-all approach",                "No hidden subscription fees"
+              ]
+            }}
+            positiveCard={{
+              items: [
+                "Personalized 1-on-1 mentor support",                "Hands-on project-based curriculum",                "Industry-relevant skill training",                "Community networking opportunities",                "Portfolio building exercises"
+              ]
+            }}
+            title="Why Choose CodeStart?"
+            description="We bridge the gap between classroom theory and industry-ready projects."
+          />
+        </div>
 
-  <div id="courses" data-section="courses">
-      <ProductCardFour
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      products={[
-        {
-          id: "p1",
-          name: "Python Fundamentals",
-          price: "$99",
-          variant: "Course",
-          imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg",
-        },
-        {
-          id: "p2",
-          name: "HTML & CSS Basics",
-          price: "$79",
-          variant: "Course",
-          imageSrc: "http://img.b2bpic.net/free-vector/flat-design-graphic-designer-vertical-business-card_23-2150814184.jpg",
-        },
-        {
-          id: "p3",
-          name: "JavaScript Pro",
-          price: "$129",
-          variant: "Course",
-          imageSrc: "http://img.b2bpic.net/free-photo/software-programming-web-development-concept_53876-176752.jpg",
-        },
-        {
-          id: "p4",
-          name: "First Website Project",
-          price: "$149",
-          variant: "Workshop",
-          imageSrc: "http://img.b2bpic.net/free-photo/mockup-object-imitate-model-replica-design-reproduce-concept_53876-134069.jpg",
-        },
-        {
-          id: "p5",
-          name: "First App Development",
-          price: "$199",
-          variant: "Workshop",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-holding-smartphone_23-2148389008.jpg",
-        },
-        {
-          id: "p6",
-          name: "Student Internship Program",
-          price: "FREE",
-          variant: "Mentorship",
-          imageSrc: "http://img.b2bpic.net/free-photo/call-center-onboarding-specialist-providing-training-new-agent-recruit_482257-125824.jpg",
-        },
-      ]}
-      title="Our Programs"
-      description="Start your journey today with our curated tracks."
-    />
-  </div>
+        <div id="courses" data-section="courses">
+          <ProductCardFour
+            animationType="slide-up"
+            textboxLayout="default"
+            gridVariant="three-columns-all-equal-width"
+            useInvertedBackground={false}
+            products={[
+              { id: "p1", name: "Python Fundamentals", price: "$99", variant: "Course", imageSrc: "http://img.b2bpic.net/free-photo/double-exposure-caucasian-man-virtual-reality-vr-headset-is-presumably-gamer-hacker-cracking-code-into-secure-network-server-with-lines-code_146671-18938.jpg" },
+              { id: "p2", name: "HTML & CSS Basics", price: "$79", variant: "Course", imageSrc: "http://img.b2bpic.net/free-vector/flat-design-graphic-designer-vertical-business-card_23-2150814184.jpg" },
+              { id: "p3", name: "JavaScript Pro", price: "$129", variant: "Course", imageSrc: "http://img.b2bpic.net/free-photo/software-programming-web-development-concept_53876-176752.jpg" }
+            ]}
+            title="Our Programs"
+            description="Start your journey today with our curated tracks."
+          />
+        </div>
 
-  <div id="team" data-section="team">
-      <TeamCardEleven
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      groups={[
-        {
-          id: "g1",
-          groupTitle: "Lead Mentors",
-          members: [
-            {
-              id: "m1",
-              title: "Alex Rivers",
-              subtitle: "Software Engineer",
-              detail: "Expert in Python with 5 years of industry experience.",
-              imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
-            },
-            {
-              id: "m2",
-              title: "Sarah Chen",
-              subtitle: "Web Developer",
-              detail: "Frontend guru who helped 50+ students land jobs.",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg",
-            },
-            {
-              id: "m3",
-              title: "Jordan Lee",
-              subtitle: "Mobile Specialist",
-              detail: "Passionate about teaching and mobile UX design.",
-              imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg",
-            },
-          ],
-          imageSrc: "http://img.b2bpic.net/free-photo/concentrated-blonde-group-young-people-casual-clothes-working-modern-office_146671-16500.jpg?_wi=2",
-          imageAlt: "mentor portrait",
-        },
-      ]}
-      title="Our Mentors"
-      description="Experienced professionals dedicated to your student success."
-    />
-  </div>
+        <div id="team" data-section="team">
+          <TeamCardEleven
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            groups={[
+              {
+                id: "g1",                groupTitle: "Lead Mentors",                members: [
+                  { id: "m1", title: "Alex Rivers", subtitle: "Software Engineer", detail: "Expert in Python with 5 years of industry experience.", imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg" },
+                  { id: "m2", title: "Sarah Chen", subtitle: "Web Developer", detail: "Frontend guru who helped 50+ students land jobs.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-beautiful-brunette-girl-glasses-smiling_176420-8501.jpg" },
+                  { id: "m3", title: "Jordan Lee", subtitle: "Mobile Specialist", detail: "Passionate about teaching and mobile UX design.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-man-desk_329181-14546.jpg" }
+                ]
+              }
+            ]}
+            title="Our Mentors"
+            description="Experienced professionals dedicated to your student success."
+          />
+        </div>
 
-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardSix
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "t1",
-          name: "John Doe",
-          handle: "@johndoe",
-          testimonial: "CodeStart helped me build my very first website in just two weeks!",
-          imageSrc: "http://img.b2bpic.net/free-photo/student-online-cute-guy-checked-shirt-with-glasses-studying-computer-happy-excited_140725-164461.jpg",
-        },
-        {
-          id: "t2",
-          name: "Alice Smith",
-          handle: "@alicesmith",
-          testimonial: "The mentor I was paired with made Python so easy to understand.",
-          imageSrc: "http://img.b2bpic.net/free-photo/inspired-designer_1098-13353.jpg",
-        },
-        {
-          id: "t3",
-          name: "Mark Wilson",
-          handle: "@markw",
-          testimonial: "The internship program was the highlight of my learning journey.",
-          imageSrc: "http://img.b2bpic.net/free-photo/happy-positive-african-american-college-student-with-cheerful-cute-smile-using-wireless-internet-connection-laptop-computer-coffee-shop-while-looking-information-online-research-project_273609-7476.jpg",
-        },
-        {
-          id: "t4",
-          name: "Elena Rodriguez",
-          handle: "@elena_r",
-          testimonial: "I never thought I could code an app, but here I am with my first project!",
-          imageSrc: "http://img.b2bpic.net/free-photo/student-stretching-while-doing-homework_23-2147669065.jpg",
-        },
-        {
-          id: "t5",
-          name: "Kevin Zhang",
-          handle: "@kzhang",
-          testimonial: "Highly recommend to any student looking to break into IT.",
-          imageSrc: "http://img.b2bpic.net/free-photo/male-female-graphic-designers-using-digital-tablet_1170-1029.jpg",
-        },
-      ]}
-      title="Success Stories"
-      description="See how CodeStart has transformed the careers of students just like you."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+          <TestimonialCardSix
+            animationType="slide-up"
+            textboxLayout="default"
+            useInvertedBackground={false}
+            testimonials={[
+              { id: "t1", name: "John Doe", handle: "@johndoe", testimonial: "CodeStart helped me build my very first website in just two weeks!", imageSrc: "http://img.b2bpic.net/free-photo/student-online-cute-guy-checked-shirt-with-glasses-studying-computer-happy-excited_140725-164461.jpg" },
+              { id: "t2", name: "Alice Smith", handle: "@alicesmith", testimonial: "The mentor I was paired with made Python so easy to understand.", imageSrc: "http://img.b2bpic.net/free-photo/inspired-designer_1098-13353.jpg" }
+            ]}
+            title="Success Stories"
+            description="See how CodeStart has transformed the careers of students just like you."
+          />
+        </div>
 
-  <div id="faq" data-section="faq">
-      <FaqBase
-      textboxLayout="default"
-      useInvertedBackground={false}
-      faqs={[
-        {
-          id: "f1",
-          title: "Do I need prior experience?",
-          content: "No, our courses are designed for complete beginners.",
-        },
-        {
-          id: "f2",
-          title: "How does mentorship work?",
-          content: "You are paired with a mentor who reviews your code and helps with obstacles.",
-        },
-        {
-          id: "f3",
-          title: "Are courses online?",
-          content: "Yes, all our courses and meetings are held online.",
-        },
-        {
-          id: "f4",
-          title: "What tools do I need?",
-          content: "A stable internet connection and a laptop or desktop computer.",
-        },
-        {
-          id: "f5",
-          title: "Can I get a certificate?",
-          content: "Yes, you receive a digital certificate upon course completion.",
-        },
-      ]}
-      title="Common Questions"
-      description="Here is what you need to know about our courses and mentorship."
-      faqsAnimation="slide-up"
-    />
-  </div>
+        <div id="faq" data-section="faq">
+          <FaqBase
+            textboxLayout="default"
+            useInvertedBackground={false}
+            faqs={[
+              { id: "f1", title: "Do I need prior experience?", content: "No, our courses are designed for complete beginners." },
+              { id: "f2", title: "How does mentorship work?", content: "You are paired with a mentor who reviews your code and helps with obstacles." }
+            ]}
+            title="Common Questions"
+            description="Here is what you need to know about our courses and mentorship."
+            faqsAnimation="slide-up"
+          />
+        </div>
 
-  <div id="contact" data-section="contact">
-      <ContactCenter
-      useInvertedBackground={false}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Get Started"
-      title="Launch Your IT Career"
-      description="Sign up for our newsletter to get tips and information on new internships."
-    />
-  </div>
+        <div id="contact" data-section="contact">
+          <ContactCenter
+            useInvertedBackground={false}
+            background={{ variant: "sparkles-gradient" }}
+            tag="Get Started"
+            title="Launch Your IT Career"
+            description="Sign up for our newsletter to get tips and information on new internships."
+          />
+        </div>
 
-  <div id="footer" data-section="footer">
-      <FooterMedia
-      imageSrc="http://img.b2bpic.net/free-photo/side-shot-code-editor-using-react-js_181624-61842.jpg"
-      logoText="CodeStart"
-      columns={[
-        {
-          title: "Learn",
-          items: [
-            {
-              label: "Python",
-              href: "#",
-            },
-            {
-              label: "JavaScript",
-              href: "#",
-            },
-            {
-              label: "HTML",
-              href: "#",
-            },
-            {
-              label: "CSS",
-              href: "#",
-            },
-            {
-              label: "Web Development",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Mentorship",
-              href: "#team",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Careers",
-              href: "#",
-            },
-            {
-              label: "Blog",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterMedia
+            imageSrc="http://img.b2bpic.net/free-photo/side-shot-code-editor-using-react-js_181624-61842.jpg"
+            logoText="CodeStart"
+            columns={[
+              {
+                title: "Learn",                items: [
+                  { label: "Python", href: "#" },
+                  { label: "JavaScript", href: "#" }
+                ]
+              },
+              {
+                title: "Company",                items: [
+                  { label: "About", href: "#about" },
+                  { label: "Contact", href: "#contact" }
+                ]
+              }
+            ]}
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-- 
2.49.1