From 80601d502415ab50ebadfc333de542d434e0ac61 Mon Sep 17 00:00:00 2001 From: Christina1507 Date: Sat, 13 Jun 2026 19:25:50 +0530 Subject: [PATCH 1/4] feat: add About CodeLens page with carousel and platform overview --- frontend/src/App.jsx | 3 +- .../src/components/about/AboutCarousel.jsx | 92 +++++ frontend/src/components/shared/Navbar.jsx | 7 + frontend/src/pages/AboutCodeLensPage.jsx | 354 ++++++++++++++++++ package-lock.json | 6 + 5 files changed, 461 insertions(+), 1 deletion(-) create mode 100644 frontend/src/components/about/AboutCarousel.jsx create mode 100644 frontend/src/pages/AboutCodeLensPage.jsx create mode 100644 package-lock.json diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 765a5a2..4e1b5ce 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -8,7 +8,7 @@ import DashboardPage from "./pages/DashboardPage"; import ExplorePage from "./pages/ExplorePage"; import CodeforcesPage from "./pages/CodeforcesPage"; import PracticePage from "./pages/PracticePage"; - +import AboutCodeLensPage from "./pages/AboutCodeLensPage"; import ApexAIPage from "./pages/ApexAIPage"; import ApexWorkspacePage from "./pages/ApexWorkspacePage"; import AlgoVersePage from "./pages/AlgoVersePage"; @@ -115,6 +115,7 @@ export default function App() { } /> } /> } /> + } /> } /> diff --git a/frontend/src/components/about/AboutCarousel.jsx b/frontend/src/components/about/AboutCarousel.jsx new file mode 100644 index 0000000..3b99453 --- /dev/null +++ b/frontend/src/components/about/AboutCarousel.jsx @@ -0,0 +1,92 @@ +import { useEffect, useState } from "react"; + +const slides = [ + { + title: "Competitive Programming", + description: + "Practice curated problems and strengthen problem-solving skills through structured learning.", + stat: "500+", + }, + { + title: "AlgoVerse", + description: + "Visualize algorithms and data structures with interactive learning experiences.", + stat: "DSA", + }, + { + title: "GitHub Intelligence", + description: + "Analyze repositories and gain deeper insights into development activity.", + stat: "GitHub", + }, + { + title: "APEX AI", + description: + "Leverage AI-powered tools to improve productivity and learning outcomes.", + stat: "AI", + }, + { + title: "Community Driven", + description: + "Built with community feedback and contributions to help learners grow together.", + stat: "Open", + }, +]; + +export default function AboutCarousel() { + const [current, setCurrent] = useState(0); + + useEffect(() => { + const timer = setInterval(() => { + setCurrent((prev) => (prev + 1) % slides.length); + }, 4500); + + return () => clearInterval(timer); + }, []); + + return ( +
+ +
+ +
+ {slides[current].stat} +
+ +
+ +

+ Platform Highlight +

+ +

+ {slides[current].title} +

+ +

+ {slides[current].description} +

+ +
+ +
+ +
+ + {slides.map((_, index) => ( +
+ +
+ ); +} \ No newline at end of file diff --git a/frontend/src/components/shared/Navbar.jsx b/frontend/src/components/shared/Navbar.jsx index 9ee9622..7237a20 100644 --- a/frontend/src/components/shared/Navbar.jsx +++ b/frontend/src/components/shared/Navbar.jsx @@ -402,6 +402,10 @@ export default function Navbar() { FAQ + + + About + {isAuthenticated && ( @@ -591,6 +595,9 @@ export default function Navbar() { FAQ → + + About → + Contact Us → diff --git a/frontend/src/pages/AboutCodeLensPage.jsx b/frontend/src/pages/AboutCodeLensPage.jsx new file mode 100644 index 0000000..2e7e768 --- /dev/null +++ b/frontend/src/pages/AboutCodeLensPage.jsx @@ -0,0 +1,354 @@ +import AboutCarousel from "../components/about/AboutCarousel"; + +export default function AboutCodeLensPage() { + const problems = [ + { + title: "Learning Inconsistency", + desc: "Learners often struggle to maintain a consistent learning routine.", + }, + { + title: "Lack of Structured Growth", + desc: "Without clear roadmaps, progress becomes difficult to measure.", + }, + { + title: "Progress Tracking", + desc: "Tracking growth across multiple platforms is challenging.", + }, + { + title: "Fragmented Resources", + desc: "Learning materials are scattered across countless websites.", + }, + ]; + + const values = [ + "Consistency", + "Growth", + "Simplicity", + "Accessibility", + "Community", + ]; + + const features = [ + { + title: "Learning Analytics", + desc: "Track your learning journey and understand your growth.", + }, + { + title: "Structured Roadmaps", + desc: "Follow clear pathways to master skills effectively.", + }, + { + title: "GitHub Intelligence", + desc: "Analyze repositories and improve development workflows.", + }, + { + title: "Competitive Programming", + desc: "Monitor coding progress and contest performance.", + }, + { + title: "AI Assistance", + desc: "Get intelligent support throughout your learning journey.", + }, + { + title: "Community Driven", + desc: "Grow together through collaboration and contributions.", + }, + ]; + + return ( +
+ + {/* HERO */} +
+
+ +
+

+ About CodeLens +

+ +

+ Empowering +
+ Consistent Learning +
+ & Growth +

+ +

+ CodeLens helps learners stay consistent, track progress, + build meaningful skills, and discover opportunities through + a structured ecosystem designed for long-term growth. +

+
+ +
+
+

{">"} Learn consistently

+

{">"} Build real skills

+

{">"} Measure growth

+

{">"} Discover opportunities

+

{">"} Join a thriving community

+
+
+ +
+
+ + {/* STATS */} +
+
+ +
+

All-in-One

+

Learning Platform

+
+ +
+

Growth

+

Focused Ecosystem

+
+ +
+

Community

+

Driven Development

+
+ +
+

Future

+

Ready Learning

+
+ +
+
+ + {/* STORY */} +
+
+ +

+ Our Story +

+ +
+ +
+ + 01 + + +

+ The Challenge +

+ +

+ Learning often feels fragmented. Resources are scattered, + progress is difficult to track, and consistency becomes + challenging. +

+
+ +
+ + 02 + + +

+ The Solution +

+ +

+ CodeLens brings learning, practice, analytics, and + opportunities into one unified experience. +

+
+ +
+ +
+
+ + {/* PROBLEMS */} +
+
+ +

+ Problems We Solve +

+ +
+ + {problems.map((item) => ( +
+

+ {item.title} +

+ +

+ {item.desc} +

+
+ ))} + +
+
+
+ + {/* MISSION VISION */} +
+
+ +
+

+ Our Mission +

+ +

+ To create an accessible, structured, and engaging learning + environment that enables learners to achieve consistent growth. +

+
+ +
+

+ Our Vision +

+ +

+ To build a global ecosystem where every learner can track + progress, unlock opportunities, and achieve their potential. +

+
+ +
+
+ + {/* FEATURES */} +
+
+ +

+ Platform Highlights +

+ +
+ + {features.map((feature) => ( +
+
+ +

+ {feature.title} +

+ +

+ {feature.desc} +

+
+ ))} + +
+ +
+
+ + {/* CAROUSEL */} +
+
+ +

+ Explore CodeLens +

+ + + +
+
+ + {/* VALUES */} +
+
+ +

+ Core Values +

+ +
+ + {values.map((value) => ( +
+ {value} +
+ ))} + +
+ +
+
+ + {/* COMMUNITY */} +
+ +
+ +

+ Community Driven Development +

+ +

+ CodeLens evolves through feedback, collaboration, and + contributions from learners and developers around the world. +

+ +
+ +
+ Open Source +
+ +
+ Collaboration +
+ +
+ Innovation +
+ +
+ +
+ +
+ + {/* CTA */} +
+ +

+ Start Your Learning Journey +

+ +

+ Explore CodeLens and unlock consistent growth. +

+ + + Explore Platform + + +
+ +
+ ); +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..4eb3ea5 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "CodeLens", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} From 1a715966ce222f2783dbeb615259c351fb97aed4 Mon Sep 17 00:00:00 2001 From: Christina1507 Date: Sat, 13 Jun 2026 22:28:57 +0530 Subject: [PATCH 2/4] fix: improve carousel accessibility --- .../src/components/about/AboutCarousel.jsx | 51 ++++++++++++++----- frontend/src/pages/AboutCodeLensPage.jsx | 12 ++--- 2 files changed, 45 insertions(+), 18 deletions(-) diff --git a/frontend/src/components/about/AboutCarousel.jsx b/frontend/src/components/about/AboutCarousel.jsx index 3b99453..4413dcb 100644 --- a/frontend/src/components/about/AboutCarousel.jsx +++ b/frontend/src/components/about/AboutCarousel.jsx @@ -35,26 +35,54 @@ const slides = [ export default function AboutCarousel() { const [current, setCurrent] = useState(0); + const [paused, setPaused] = useState(false); useEffect(() => { + if (paused) return; + const timer = setInterval(() => { setCurrent((prev) => (prev + 1) % slides.length); }, 4500); return () => clearInterval(timer); - }, []); + }, [paused]); return ( -
- +
setPaused(true)} + onMouseLeave={() => setPaused(false)} + onFocus={() => setPaused(true)} + onBlur={() => setPaused(false)} + tabIndex={0} + aria-roledescription="carousel" + aria-label="Platform highlights" + onKeyDown={(e) => { + if (e.key === "ArrowRight") { + setCurrent((prev) => (prev + 1) % slides.length); + } + + if (e.key === "ArrowLeft") { + setCurrent( + (prev) => (prev - 1 + slides.length) % slides.length + ); + } + }} + >
-
+ -
- +

Platform Highlight

@@ -66,17 +94,18 @@ export default function AboutCarousel() {

{slides[current].description}

-
-
- - {slides.map((_, index) => ( + {slides.map((slide, index) => (
-
); } \ No newline at end of file diff --git a/frontend/src/pages/AboutCodeLensPage.jsx b/frontend/src/pages/AboutCodeLensPage.jsx index 2e7e768..6efce62 100644 --- a/frontend/src/pages/AboutCodeLensPage.jsx +++ b/frontend/src/pages/AboutCodeLensPage.jsx @@ -1,7 +1,7 @@ import AboutCarousel from "../components/about/AboutCarousel"; +import { Link } from "react-router-dom"; -export default function AboutCodeLensPage() { - const problems = [ +const problems = [ { title: "Learning Inconsistency", desc: "Learners often struggle to maintain a consistent learning routine.", @@ -54,7 +54,7 @@ export default function AboutCodeLensPage() { desc: "Grow together through collaboration and contributions.", }, ]; - +export default function AboutCodeLensPage() { return (
@@ -340,12 +340,12 @@ export default function AboutCodeLensPage() { Explore CodeLens and unlock consistent growth.

- Explore Platform - + From 2870180fa93bf2e8a76045532f387501190c1829 Mon Sep 17 00:00:00 2001 From: Christina1507 Date: Sat, 13 Jun 2026 23:00:09 +0530 Subject: [PATCH 3/4] style: refine About page design and content --- frontend/src/pages/AboutCodeLensPage.jsx | 93 ++++++++++++++---------- 1 file changed, 55 insertions(+), 38 deletions(-) diff --git a/frontend/src/pages/AboutCodeLensPage.jsx b/frontend/src/pages/AboutCodeLensPage.jsx index 6efce62..f0a074d 100644 --- a/frontend/src/pages/AboutCodeLensPage.jsx +++ b/frontend/src/pages/AboutCodeLensPage.jsx @@ -30,28 +30,28 @@ const problems = [ const features = [ { - title: "Learning Analytics", - desc: "Track your learning journey and understand your growth.", + title: "Learning Inconsistency", + desc: "Learners often struggle to maintain a consistent learning routine. CodeLens brings learning tools, coding practice, and progress tracking into a single workflow to encourage long-term consistency.", }, { - title: "Structured Roadmaps", - desc: "Follow clear pathways to master skills effectively.", + title: "Lack of Structured Growth", + desc: "Without clear roadmaps, progress becomes difficult to measure. CodeLens helps learners follow organized pathways and build skills step by step.", }, { title: "GitHub Intelligence", - desc: "Analyze repositories and improve development workflows.", + desc: "Tracking growth across multiple platforms is challenging. Features like GitHub Intelligence and learning analytics help users understand their development journey.", }, { title: "Competitive Programming", - desc: "Monitor coding progress and contest performance.", + desc: "Track your coding progress, participate in contests, and strengthen problem-solving skills through structured practice. CodeLens helps learners stay consistent while monitoring their growth across competitive programming platforms.", }, { title: "AI Assistance", - desc: "Get intelligent support throughout your learning journey.", + desc: "Leverage intelligent tools that provide guidance, learning support, and productivity enhancements throughout your journey. APEX AI is designed to help learners overcome obstacles and accelerate skill development.", }, - { + { title: "Community Driven", - desc: "Grow together through collaboration and contributions.", + desc: "CodeLens evolves through collaboration, feedback, and contributions from learners and developers worldwide. By fostering an active community, the platform continuously improves and grows alongside its users.", }, ]; export default function AboutCodeLensPage() { @@ -67,7 +67,7 @@ export default function AboutCodeLensPage() { About CodeLens

-

+

Empowering
Consistent Learning @@ -82,7 +82,7 @@ export default function AboutCodeLensPage() {

-
+

{">"} Learn consistently

{">"} Build real skills

@@ -125,14 +125,16 @@ export default function AboutCodeLensPage() { {/* STORY */}
- -

+

+ 01 / +

+

Our Story

-
+
01 @@ -148,7 +150,7 @@ export default function AboutCodeLensPage() {

-
+
02 @@ -171,8 +173,10 @@ export default function AboutCodeLensPage() { {/* PROBLEMS */}
- -

+

+ 02 / +

+

Problems We Solve

@@ -181,7 +185,7 @@ export default function AboutCodeLensPage() { {problems.map((item) => (

{item.title} @@ -200,9 +204,11 @@ export default function AboutCodeLensPage() { {/* MISSION VISION */}
- -
-

+

+ 03 / +

+
+

Our Mission

@@ -212,8 +218,8 @@ export default function AboutCodeLensPage() {

-
-

+
+

Our Vision

@@ -229,8 +235,11 @@ export default function AboutCodeLensPage() { {/* FEATURES */}
+

+ 04 / +

-

+

Platform Highlights

@@ -239,7 +248,7 @@ export default function AboutCodeLensPage() { {features.map((feature) => (
@@ -261,8 +270,10 @@ export default function AboutCodeLensPage() { {/* CAROUSEL */}
- -

+

+ 05 / +

+

Explore CodeLens

@@ -274,8 +285,10 @@ export default function AboutCodeLensPage() { {/* VALUES */}
- -

+

+ 06 / +

+

Core Values

@@ -284,7 +297,7 @@ export default function AboutCodeLensPage() { {values.map((value) => (
{value}
@@ -299,8 +312,10 @@ export default function AboutCodeLensPage() {
- -

+

+ 07 / +

+

Community Driven Development

@@ -311,15 +326,15 @@ export default function AboutCodeLensPage() {
-
+
Open Source
-
+
Collaboration
-
+
Innovation
@@ -331,8 +346,10 @@ export default function AboutCodeLensPage() { {/* CTA */}
- -

+

+ 08 / +

+

Start Your Learning Journey

@@ -342,7 +359,7 @@ export default function AboutCodeLensPage() { Explore Platform From 67fe4c932b80dd3e905c13400601412ecb97c12c Mon Sep 17 00:00:00 2001 From: Christina1507 Date: Sat, 13 Jun 2026 23:17:07 +0530 Subject: [PATCH 4/4] style: address final design review feedback --- .../src/components/about/AboutCarousel.jsx | 2 +- frontend/src/pages/AboutCodeLensPage.jsx | 107 ++++++++++-------- 2 files changed, 58 insertions(+), 51 deletions(-) diff --git a/frontend/src/components/about/AboutCarousel.jsx b/frontend/src/components/about/AboutCarousel.jsx index 4413dcb..89cb4e0 100644 --- a/frontend/src/components/about/AboutCarousel.jsx +++ b/frontend/src/components/about/AboutCarousel.jsx @@ -69,7 +69,7 @@ export default function AboutCarousel() { } }} > -
+
+ +
+
{/* FEATURES */}