feat: added an about page on the website

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 (
     <AuthProvider>
@@ -115,7 +116,7 @@ export default function App() {
             <Route path="/bug-reports" element={<BugReportsPage />} />
             <Route path="/faq" element={<FAQPage />} />
             <Route path="/contact" element={<Contact />} />
-            <Route path="/about" element={<AboutCodeLensPage />} />
+            <Route path="/about" element={<About />} />
             <Route path="*" element={<NotFoundPage />} />
           </Routes>
         </MainLayout>

frontend/src/components/about/AboutCTA.jsx

@@ -0,0 +1,14 @@
+import { Link } from 'react-router-dom';
+
+export default function AboutCTA() {
+  return (
+    <div className="w-full px-4 sm:px-6 py-16 sm:py-20 md:py-32 min-h-screen border-b-4 border-black bg-black text-center text-white flex flex-col items-center justify-center overflow-hidden">
+      <h2 className="text-3xl sm:text-5xl md:text-7xl lg:text-9xl font-black uppercase tracking-tighter mb-8 sm:mb-12 md:mb-16 leading-none max-w-6xl break-words w-full">
+        Stop Guessing. <br className="hidden md:block"/> Start Growing.
+      </h2>
+      <Link to="/signup" className="w-full sm:w-auto px-8 sm:px-16 py-5 sm:py-8 bg-white text-black text-base sm:text-xl md:text-2xl font-black uppercase tracking-widest md:hover:-translate-y-2 hover:bg-gray-200 transition-all border-4 sm:border-[6px] border-white rounded-none shadow-[4px_4px_0_0_rgba(255,255,255,0.2)] sm:shadow-[8px_8px_0_0_rgba(255,255,255,0.2)] md:shadow-[16px_16px_0_0_rgba(255,255,255,0.2)]">
+        Create Your Account
+      </Link>
+    </div>
+  );
+}

frontend/src/components/about/Commitment.jsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { Check } from "lucide-react";
+
+const Commitment = () => {
+    return (
+        <div className='w-full min-h-screen border-b-4 px-4 sm:px-6 py-16 sm:py-20 md:py-32 flex justify-center items-center'>
+            <div className='flex flex-col gap-10'>
+                <div>
+                    <h2 className="text-4xl font-black uppercase leading-none tracking-tight text-black sm:text-7xl lg:text-8xl text-center sm:text-start ">Built in the open. For everyone.</h2>
+                </div>
+                <div>
+                    <p className='text-2xl sm:text-3xl font-bold leading-none tracking-tight text-black text-center sm:text-start max-w-2xl'>CodeLens is 100% open source and will always remain so.</p>
+                </div>
+                <div className='text-2xl'>
+                    <ul className='list-none'>
+                        <li className='flex gap-2'><Check />MIT Licensed</li>
+                        <li className='flex gap-2'><Check />Transparent Development</li>
+                        <li className='flex gap-2'><Check />Community Driven</li>
+                        <li className='flex gap-2'><Check />No Vendor Lock-in</li>
+                        <li className='flex gap-2'><Check />Built by Developers, for Developers</li>
+                    </ul>
+                </div>
+            </div>
+            <div>
+                <img src="/about-commitment-image.png" alt="CodeLens ecosystem" className="hidden lg:block" />
+            </div>
+        </div>
+    )
+}
+
+export default Commitment

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 (
+        <div className='w-full min-h-screen border-b-4 px-4 sm:px-6 py-16 sm:py-20 md:py-32 flex flex-col lg:flex-row justify-center items-center gap-20'>
+            <div className='flex flex-col gap-10 justify-center items-center lg:items-start'>
+                    <h2 className="text-4xl font-black uppercase leading-none tracking-tight text-black sm:text-7xl lg:text-8xl text-center lg:text-start max-w-3xl">A community that builds together</h2>
+                    <p className='text-2xl sm:text-3xl font-bold leading-none tracking-tight text-black text-center lg:text-start max-w-2xl'>CodeLens is more than a platform - it's a community of builders, learners, and problem solvers.</p>
+                <button onClick={() => { const win = window.open("https://github.com/kunalverma2512/CodeLens", "_blank"); if (win) win.opener = null;}} className='cursor-pointer w-full sm:w-auto px-8 sm:px-12 py-4 sm:py-3 bg-white text-black text-lg font-black uppercase hover:bg-gray-300 transition-colors border-4 border-black rounded-none shadow-[4px_4px_0_0_rgba(0,0,0,1)] sm:shadow-[8px_8px_0_0_rgba(0,0,0,1)] sm:shadow-none sm:hover:-translate-y-1 sm:hover:shadow-[8px_8px_0_0_rgba(0,0,0,1)]'>Join Community ➜</button>
+            </div>
+            <div className="grid grid-cols-2 grid-rows-2 w-full max-w-[420px] aspect-square border border-black">
+                <div className="p-6 border-r border-b flex flex-col justify-between">
+                    <UserRoundPlus size={56} />
+                    <div>
+                        <p className="font-extrabold text-4xl">20+</p>
+                        <p className="font-bold text-xl">Contributors</p>
+                    </div>
+                </div>
+
+                <div className="p-6 border-b flex flex-col justify-between">
+                    <Star size={56} />
+                    <div>
+                        <p className="font-extrabold text-4xl">20+</p>
+                        <p className="font-bold text-xl">Stars</p>
+                    </div>
+                </div>
+
+                <div className="p-6 border-r flex flex-col justify-between">
+                    <GitFork size={56} />
+                    <div>
+                        <p className="font-extrabold text-4xl">45+</p>
+                        <p className="font-bold text-xl">Forks</p>
+                    </div>
+                </div>
+
+                <div className="p-6 flex flex-col justify-between">
+                    <GitPullRequest  size={56} />
+                    <div>
+                        <p className="font-extrabold text-4xl">50+</p>
+                        <p className="font-bold text-xl">Pull Requests</p>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default Community

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 (
+        <div className='w-full min-h-screen border-b-4 px-4 sm:px-6 py-16 sm:py-20 md:py-32 flex flex-col justify-center items-center gap-10'>
+            <h2 className="text-4xl font-black uppercase leading-none tracking-tight text-black sm:text-7xl lg:text-8xl text-center">One ecosystem. Complete visibility.</h2>
+            <div className='flex flex-col min-[1250px]:flex-row justify-center items-center gap-5'>
+                <div className='border-2 border-black '>
+                    <div className='border-b p-3 px-10 flex items-center gap-5'>
+                        <LeetCodeIcon/>
+                        <div>
+                            <h2 className='font-bold text-2xl'>LeetCode</h2>
+                            <p>Your Practice</p>
+                        </div>
+                    </div>
+                    <div className='border-b p-3 px-10 flex items-center gap-5'>
+                        <CodeforcesIcon/>
+                        <div>
+                            <h2 className='font-bold text-2xl'>Codeforces</h2>
+                            <p>Your competitions</p>
+                        </div>
+                    </div>
+                    <div className='p-3 px-10 flex items-center gap-5'>
+                        <GitHubIcon/>
+                        <div>
+                            <h2 className='font-bold text-2xl'>GitHub</h2>
+                            <p>Your Projects</p>
+                        </div>
+                    </div>
+                </div>
+                <svg className='hidden min-[1250px]:block' width="180" height="80">
+                    <path
+                        d="M10 40 C60 40, 120 40, 170 40"
+                        stroke="black"
+                        strokeWidth="4"
+                        fill="none"
+                        strokeDasharray="8 8"
+                    />
+                    <path
+                        d="M160 25 L175 40 L160 55"
+                        stroke="black"
+                        strokeWidth="4"
+                        fill="none"
+                    />
+                </svg>
+                <svg className='min-[1250px]:hidden' width="40" height="80" viewBox="0 0 40 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M20 10V60"
+                        stroke="black"
+                        strokeWidth="4"
+                        strokeDasharray="8 8"
+                        strokeLinecap="round"
+                    />
+                    <path
+                        d="M10 50L20 60L30 50"
+                        stroke="black"
+                        strokeWidth="4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+                <div className='flex flex-col justify-center items-center border-4 border-black bg-black text-white p-10 gap-2 shadow-[10px_10px_0_0_rgba(0,0,0,1)]'>
+                    <svg
+                        width="80"
+                        height="80"
+                        viewBox="0 0 80 80"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <rect
+                            x="1"
+                            y="1"
+                            width="78"
+                            height="78"
+                            rx="10"
+                            fill="#000"
+                        />
+
+                        <text
+                            x="40"
+                            y="40"
+                            fill="#FFF"
+                            fontSize="38"
+                            fontFamily="Inter, Arial, sans-serif"
+                            fontWeight="800"
+                            textAnchor="middle"
+                            dominantBaseline="middle"
+                        >
+                            CL
+                        </text>
+                    </svg>
+                    <p className='font-bold'>
+                        CodeLens
+                    </p>
+                    <p className='font-bold'>Intelligence Engine</p>
+                    <p className='border-2 p-1 border-black flex font-bold justify-center items-center'><Zap />AI Powered</p>
+                </div>
+                <svg className='hidden min-[1250px]:block' width="180" height="80">
+                    <path
+                        d="M10 40 C60 40, 120 40, 170 40"
+                        stroke="black"
+                        strokeWidth="4"
+                        fill="none"
+                        strokeDasharray="8 8"
+                    />
+                    <path
+                        d="M160 25 L175 40 L160 55"
+                        stroke="black"
+                        strokeWidth="4"
+                        fill="none"
+                    />
+                </svg>
+                <svg className='min-[1250px]:hidden' width="40" height="80" viewBox="0 0 40 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        d="M20 10V60"
+                        stroke="black"
+                        strokeWidth="4"
+                        strokeDasharray="8 8"
+                        strokeLinecap="round"
+                    />
+                    <path
+                        d="M10 50L20 60L30 50"
+                        stroke="black"
+                        strokeWidth="4"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                    />
+                </svg>
+                <div className='border-2 border-black p-5 flex flex-col gap-5'>
+                    <p className='flex gap-3 font-bold'><BadgeCheck />Unified Profile</p>
+                    <p className='flex gap-3 font-bold'><ChartNoAxesCombined />Complete Analysis</p>
+                    <p className='flex gap-3 font-bold'><Route />AI Roadmap</p>
+                    <p className='flex gap-3 font-bold'><Lightbulb />Actionable insights</p>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Ecosystem