diff --git a/frontend/public/about-commitment-image.png b/frontend/public/about-commitment-image.png new file mode 100644 index 0000000..f3b9b99 Binary files /dev/null and b/frontend/public/about-commitment-image.png differ diff --git a/frontend/public/about-component-image.png b/frontend/public/about-component-image.png new file mode 100644 index 0000000..198a938 Binary files /dev/null and b/frontend/public/about-component-image.png differ diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 4e1b5ce..3df49c6 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -8,7 +8,6 @@ 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"; @@ -28,6 +27,8 @@ import ProtectedRoute from "./components/shared/ProtectedRoute"; import PublicRoute from "./components/shared/PublicRoute"; import BugReportsPage from "./pages/BugReportsPage"; import Contact from "./pages/Contact"; +import About from "./pages/About"; + export default function App() { return ( @@ -115,7 +116,7 @@ export default function App() { } /> } /> } /> - } /> + } /> } /> diff --git a/frontend/src/components/about/AboutCTA.jsx b/frontend/src/components/about/AboutCTA.jsx new file mode 100644 index 0000000..d75c37a --- /dev/null +++ b/frontend/src/components/about/AboutCTA.jsx @@ -0,0 +1,14 @@ +import { Link } from 'react-router-dom'; + +export default function AboutCTA() { + return ( +
+

+ Stop Guessing.
Start Growing. +

+ + Create Your Account + +
+ ); +} diff --git a/frontend/src/components/about/AboutCarousel.jsx b/frontend/src/components/about/AboutCarousel.jsx deleted file mode 100644 index 89cb4e0..0000000 --- a/frontend/src/components/about/AboutCarousel.jsx +++ /dev/null @@ -1,119 +0,0 @@ -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); - 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 -

- -

- {slides[current].title} -

- -

- {slides[current].description} -

-
-
- -
- {slides.map((slide, index) => ( -
-
- ); -} \ No newline at end of file diff --git a/frontend/src/components/about/Commitment.jsx b/frontend/src/components/about/Commitment.jsx new file mode 100644 index 0000000..04e7c4b --- /dev/null +++ b/frontend/src/components/about/Commitment.jsx @@ -0,0 +1,31 @@ +import React from 'react' +import { Check } from "lucide-react"; + +const Commitment = () => { + return ( +
+
+
+

Built in the open. For everyone.

+
+
+

CodeLens is 100% open source and will always remain so.

+
+
+
    +
  • MIT Licensed
    • +
  • Transparent Development
    • +
  • Community Driven
    • +
  • No Vendor Lock-in
    • +
  • Built by Developers, for Developers
    • +
+
+
+
+ CodeLens ecosystem +
+
+ ) +} + +export default Commitment diff --git a/frontend/src/components/about/Community.jsx b/frontend/src/components/about/Community.jsx new file mode 100644 index 0000000..4f8155e --- /dev/null +++ b/frontend/src/components/about/Community.jsx @@ -0,0 +1,50 @@ +import React from 'react' +import { GitFork, Star, UserRoundPlus, GitPullRequest } from "lucide-react"; + +const Community = () => { + return ( +
+
+

A community that builds together

+

CodeLens is more than a platform - it's a community of builders, learners, and problem solvers.

+ +
+
+
+ +
+

20+

+

Contributors

+
+
+ +
+ +
+

20+

+

Stars

+
+
+ +
+ +
+

45+

+

Forks

+
+
+ +
+ +
+

50+

+

Pull Requests

+
+
+
+ +
+ ) +} + +export default Community diff --git a/frontend/src/components/about/Ecosystem.jsx b/frontend/src/components/about/Ecosystem.jsx new file mode 100644 index 0000000..3b0bb0e --- /dev/null +++ b/frontend/src/components/about/Ecosystem.jsx @@ -0,0 +1,141 @@ +import React from 'react' +import { BadgeCheck, ChartNoAxesCombined, Route, Lightbulb, Zap } from "lucide-react"; +import { LeetCodeIcon, CodeforcesIcon, GitHubIcon } from '../icons/PlatformIcons'; + +const Ecosystem = () => { + return ( +
+

One ecosystem. Complete visibility.

+
+
+
+ +
+

LeetCode

+

Your Practice

+
+
+
+ +
+

Codeforces

+

Your competitions

+
+
+
+ +
+

GitHub

+

Your Projects

+
+
+
+ + + + + + + + +
+ + + + + CL + + +

+ CodeLens +

+

Intelligence Engine

+

AI Powered

+
+ + + + + + + + +
+

Unified Profile

+

Complete Analysis

+

AI Roadmap

+

Actionable insights

+
+
+
+ ) +} + +export default Ecosystem diff --git a/frontend/src/components/about/Growth.jsx b/frontend/src/components/about/Growth.jsx new file mode 100644 index 0000000..f6d922e --- /dev/null +++ b/frontend/src/components/about/Growth.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import { Target, CodeXml, ChartNoAxesCombined, Users } from "lucide-react"; + +const Growth = () => { + return ( +
+

Our growth philosophy

+
+
+ +

Consistency Beats Intensity

+

Small, consistent actions compound into extraordinary results.

+
+
+ +

Solve. Build. Ship.

+

Problems build skills. Projects build identity. We value both equally

+
+
+ +

Data Should Drive Growth

+

We can't improve what you don't measure.

+
+
+ +

Learning is a Lifelong Game

+

The journey never ends, and neither does growth.

+
+
+
+ ) +} + +export default Growth diff --git a/frontend/src/components/about/Hero.jsx b/frontend/src/components/about/Hero.jsx new file mode 100644 index 0000000..3ebd360 --- /dev/null +++ b/frontend/src/components/about/Hero.jsx @@ -0,0 +1,20 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +const Hero = () => { + return ( +
+
+

Engineering growth should not be fragmented

+

CodeLens unifies your competitive programming, projects, and learning journey into one intelligent platform that shows you what to do next.

+
+ Explore platform ➜ + +
+
+
CodeLens ecosystem
+
+ ) +} + +export default Hero diff --git a/frontend/src/components/about/Privacy.jsx b/frontend/src/components/about/Privacy.jsx new file mode 100644 index 0000000..c9b7393 --- /dev/null +++ b/frontend/src/components/about/Privacy.jsx @@ -0,0 +1,42 @@ +import React from 'react' +import { + ShieldCheck, + Lock, + EyeOff +} from "lucide-react"; + +const Privacy = () => { + return ( +
+
+
+

Your Privacy. Our Priority.

+
+
+
+ +

We never sell, rent, or share your personal data.

+
+
+ +

All account connections are encrypted and protected.

+
+
+ +

Your data is used solely to power insights and recommendations.

+
+
+
+
+
+ +
+

You Own Your Data

+

Disconnect accounts or delete your data whenever you choose.

+
+ +
+ ) +} + +export default Privacy diff --git a/frontend/src/components/about/Problem.jsx b/frontend/src/components/about/Problem.jsx new file mode 100644 index 0000000..fb41fcd --- /dev/null +++ b/frontend/src/components/about/Problem.jsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { LeetCodeIcon, CodeforcesIcon, GitHubIcon } from '../icons/PlatformIcons'; + +const Problem = () => { + return ( +
+
+
+

The problem with fragmentation

+

Developers track progress across multiple platforms but get an incomplete + picture of their overall growth.

+
+
+
+ +
+

LeetCode

+

Shows interview preparation but not real-world building.

+
+
+
+ +
+

Codeforces

+

Shows competitive programming but not for development skills.

+
+
+
+ +
+

GitHub

+

Shows building ability but no problem-solving skills.

+
+
+
+
+
+

+ No single platform tells the complete story. +

+
+
+ ) +} + +export default Problem diff --git a/frontend/src/components/about/WhyCodelens.jsx b/frontend/src/components/about/WhyCodelens.jsx new file mode 100644 index 0000000..4046bd6 --- /dev/null +++ b/frontend/src/components/about/WhyCodelens.jsx @@ -0,0 +1,38 @@ +import React from 'react' +import { CircleUserRound,Users,TrendingUp } from "lucide-react"; + +const WhyCodelens = () => { + return ( +
+
+

Why we built Codelens

+

We were developers who faced same problems. Multiple platforms, scattered progress, unclear next steps.

+
+

Codelens was created to unify everything and give developers a single source of clarity.

+
+
+
+ +

One Profile

+

All your progress in one place.

+
+
+
+ +

AI Guidance

+

Personalised roadmap based on your data.

+
+
+
+ +

Actionable Growth

+

Focus on what matters for real improvement.

+
+
+
+ +
+ ) +} + +export default WhyCodelens diff --git a/frontend/src/components/about/Working.jsx b/frontend/src/components/about/Working.jsx new file mode 100644 index 0000000..acb063d --- /dev/null +++ b/frontend/src/components/about/Working.jsx @@ -0,0 +1,76 @@ +import { Database, RefreshCw, Brain, Rocket } from 'lucide-react' +import React from 'react' + +const Working = () => { + return ( +
+

How Codelens Works

+
+
+
+ +
+

1. Connect

+

Link your GitHub, LeetCode and Codeforces accounts securely.

+
+ + + + +
+
+ +
+

2. Sync

+

We fetch and normalize your data in real-time.

+
+ + + +
+
+ +
+

3. Analyze

+

Our AI engine analyzes your strengths, weaknesses, and growth patterns.

+
+ + + +
+
+ +
+

4. Guide

+

Get a personalised roadmap and actionable steps to improve.

+
+
+
+ ) +} + +export default Working diff --git a/frontend/src/components/icons/PlatformIcons.jsx b/frontend/src/components/icons/PlatformIcons.jsx new file mode 100644 index 0000000..0c9d43b --- /dev/null +++ b/frontend/src/components/icons/PlatformIcons.jsx @@ -0,0 +1,21 @@ +export const LeetCodeIcon = ({ size = 50, ...props }) => ( + +); + +export const CodeforcesIcon = ({ size = 50, ...props }) => ( + +); + +export const GitHubIcon = ({ size = 50, ...props }) => ( + +); diff --git a/frontend/src/components/shared/Navbar.jsx b/frontend/src/components/shared/Navbar.jsx index 7237a20..3d29f95 100644 --- a/frontend/src/components/shared/Navbar.jsx +++ b/frontend/src/components/shared/Navbar.jsx @@ -402,10 +402,6 @@ export default function Navbar() { FAQ - - - About - {isAuthenticated && ( @@ -477,6 +473,9 @@ export default function Navbar() { Contact Us + + About + {/* ── Desktop Right Controls ────────────────────────────────────── */} @@ -595,12 +594,12 @@ export default function Navbar() { FAQ → - - About → - Contact Us → + + About → + {isAuthenticated && ( diff --git a/frontend/src/pages/About.jsx b/frontend/src/pages/About.jsx new file mode 100644 index 0000000..de908aa --- /dev/null +++ b/frontend/src/pages/About.jsx @@ -0,0 +1,34 @@ +import React from 'react' +import Hero from '../components/about/Hero.jsx' +import Problem from '../components/about/Problem.jsx' +import WhyCodelens from '../components/about/WhyCodelens.jsx' +import Growth from '../components/about/Growth.jsx' +import Ecosystem from '../components/about/Ecosystem.jsx' +import Commitment from '../components/about/Commitment.jsx' +import Community from '../components/about/Community.jsx' +import Working from '../components/about/Working.jsx' +import Privacy from '../components/about/Privacy.jsx' +import FAQSection from '../components/explore/FAQSection.jsx' +import AboutCTA from '../components/about/AboutCTA.jsx' + +const About = () => { + return ( + <> + About — CodeLens + + + + + + + + + + + + + + ) +} + +export default About