refactor(about): decompose AboutCodeLensPage into per-section components and enforce full-viewport section heights

[coderabbitai]

Overview

PR #196 introduced the About CodeLens page (frontend/src/pages/AboutCodeLensPage.jsx) as a single monolithic file containing all sections inline. This issue tracks two follow-up improvements requested by @kunalverma2512:

1. Each section must occupy 100% viewport width and 100% viewport height (i.e., w-full min-h-screen) so the page feels like a full-screen experience per section, with proper responsiveness on all device sizes.
2. Each section must be extracted into its own .jsx component under frontend/src/components/about/, and then all those components must be imported and composed inside AboutCodeLensPage.jsx.

---

Sections to Extract

The following sections currently exist inline in AboutCodeLensPage.jsx and must each become an independent component file:

Component File	Section Description
HeroSection.jsx	Full-screen hero with headline, bullet list, and intro copy
StatsSection.jsx	Four platform pillars (All-in-One, Growth, Community, Future)
OurStorySection.jsx	Two-column Challenge (01) / Solution (02) cards
ProblemsSection.jsx	4-card grid — Problems We Solve
MissionVisionSection.jsx	Side-by-side Mission and Vision cards
PlatformHighlightsSection.jsx	3×2 grid of feature cards
CarouselSection.jsx	Wraps the existing AboutCarousel component with its heading
CoreValuesSection.jsx	Core Values pills row
CommunitySection.jsx	Community Driven Development dark section
CTASection.jsx	Call-to-action with "Start Your Learning Journey" and Explore button

Note: AboutCarousel.jsx already exists and should remain as-is; CarouselSection.jsx simply wraps it with the section heading and layout.

---

Structural Requirements

1. Full-viewport section heights

Every section component must use min-h-screen w-full so that each section fills the full visible viewport height. Content inside should be centered vertically and horizontally:

// Example pattern for every section
export default function HeroSection() {
  return (
    <section className="w-full min-h-screen flex items-center justify-center bg-black px-6 py-20">
      {/* section content */}
    </section>
  );
}

2. Responsiveness

Each section must be fully responsive across:

• Mobile (< 640px)
• Tablet (640px – 1024px)
• Desktop (> 1024px)

Use Tailwind responsive prefixes (sm:, md:, lg:) throughout. Test all breakpoints before submitting.

3. Resulting AboutCodeLensPage.jsx structure

After the refactor, AboutCodeLensPage.jsx should be a clean composition file with no inline section JSX:

import HeroSection from "../components/about/HeroSection";
import StatsSection from "../components/about/StatsSection";
import OurStorySection from "../components/about/OurStorySection";
import ProblemsSection from "../components/about/ProblemsSection";
import MissionVisionSection from "../components/about/MissionVisionSection";
import PlatformHighlightsSection from "../components/about/PlatformHighlightsSection";
import CarouselSection from "../components/about/CarouselSection";
import CoreValuesSection from "../components/about/CoreValuesSection";
import CommunitySection from "../components/about/CommunitySection";
import CTASection from "../components/about/CTASection";

export default function AboutCodeLensPage() {
  return (
    <main>
      <HeroSection />
      <StatsSection />
      <OurStorySection />
      <ProblemsSection />
      <MissionVisionSection />
      <PlatformHighlightsSection />
      <CarouselSection />
      <CoreValuesSection />
      <CommunitySection />
      <CTASection />
    </main>
  );
}

4. Data arrays at module scope

Each section component that needs static data (e.g., ProblemsSection, PlatformHighlightsSection, CoreValuesSection) must define its data arrays at module scope (outside the function body) to avoid recreation on every render.

---

Acceptance Criteria

• frontend/src/components/about/ contains exactly the 10 component files listed above (plus the existing AboutCarousel.jsx)
• Every section uses w-full min-h-screen and content is vertically/horizontally centered
• Page is fully responsive — no horizontal scroll, no layout breakage on mobile/tablet/desktop
• AboutCodeLensPage.jsx contains only imports and component composition (no inline JSX sections)
• No regressions to existing routes or Navbar navigation
• <Link to="/explore"> is preserved in CTASection (not reverted to <a href>)
• All carousel accessibility attributes from PR feat: add About CodeLens page with carousel and platform overview #196 are preserved (aria-live, aria-hidden, aria-label, pause on hover, keyboard navigation)

---

References

• PR feat: add About CodeLens page with carousel and platform overview #196: feat: add About CodeLens page with carousel and platform overview #196
• Linked issue: [Feature]: Create Dedicated "About CodeLens" Page #193
• Live preview: https://codelensx.vercel.app/about
• Requested by: @kunalverma2512