Skip to content

feat: added an about page on the website #177

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
anujsharma8d wants to merge 1 commit into
base: main
Choose a base branch
from
+127 −0
Open

feat: added an about page on the website #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,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>
Expand Down Expand Up @@ -115,6 +117,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={<About />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</MainLayout>
Expand Down
6 changes: 6 additions & 0 deletions frontend/src/components/shared/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -463,6 +463,9 @@ export default function Navbar() {
<Link to="/contact" className={navLinkCls("/contact")}>
Contact Us
</Link>
<Link to="/about" className={navLinkCls("/about")}>
About
</Link>
</div>

{/* ── Desktop Right Controls ────────────────────────────────────── */}
Expand Down Expand Up @@ -589,6 +592,9 @@ export default function Navbar() {
<Link to="/contact" onClick={closeMenu} className={mobileLinkCls}>
Contact Us <span className="text-zinc-300 text-sm">→</span>
</Link>
<Link to="/about" onClick={closeMenu} className={mobileLinkCls}>
About <span className="text-zinc-300 text-sm">→</span>
</Link>

{isAuthenticated && (
<Link to="/codeforces" onClick={closeMenu} className={mobileLinkCls}>
Expand Down
118 changes: 118 additions & 0 deletions frontend/src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
import React from 'react'

const About = () => {
return (
<main className="border-b-4 border-black px-6 sm:px-10 lg:px-16 lg:py-10">
<title>About - CodeLens</title>
<meta
name="description"
content="Learn about CodeLens, our mission, vision, and values. Discover how we're building developer-first tools that transform coding data into actionable insights and empower intelligent growth."
/>
<section className="flex flex-col sm:flex-row gap-10 max-w-6xl mx-auto px-6 border-b-2 border-black p-10 ">
<div className="flex flex-col gap-3">
<h1 className="text-4xl font-black uppercase leading-none tracking-tight text-black sm:text-7xl lg:text-7xl">
About Codelens
</h1>
<p className="mb-5 text-xs font-black uppercase tracking-[0.28em] text-black">
UNIFIED DEVELOPER TELEMETRY ENGINE
</p>
<p className="text-xs font-black tracking-[0.28em] text-black">
Stop Guessing. Start Growing.
</p>
<p>Codelens aggregates your GitHub, Leetcode, and Codeforces data into a single AI-powered command center that tells you what to learn neext.</p>

@coderabbitai coderabbitai Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix typos in content text.

Three spelling errors in user-facing text:

  • Line 22: "neext" → "next"
  • Line 32: "enginnering" → "engineering"
  • Line 35: "everthing" → "everything"
📝 Proposed fixes 
-          <p>Codelens aggregates your GitHub, Leetcode, and Codeforces data into a single AI-powered command center that tells you what to learn neext.</p>
+          <p>Codelens aggregates your GitHub, Leetcode, and Codeforces data into a single AI-powered command center that tells you what to learn next.</p>
-            We believe best enginnering happens when developers have the right tool, the right data and the right context.
+            We believe best engineering happens when developers have the right tool, the right data and the right context.
-            From platform tracking to privacy by design, everthing we build is centered around clarity, control and performance.
+            From platform tracking to privacy by design, everything we build is centered around clarity, control and performance.

Also applies to: 32-32, 35-35

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/About.jsx` at line 22, In the About component update the
user-facing copy to correct three typos: change "neext" to "next" in the
sentence that begins "Codelens aggregates...", change "enginnering" to
"engineering", and change "everthing" to "everything" wherever those strings
appear in frontend/src/pages/About.jsx so the About.jsx component renders the
corrected text.

</div>
<div className='border border-black'></div>

@coderabbitai coderabbitai Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Divider won't render without explicit dimensions.

The empty <div> intended as a vertical divider has no width or height. In the flex layout, this element will collapse and not be visible. The PR screenshots show a visible divider in this location.

🎨 Proposed fix for visible vertical divider 
-        <div className='border border-black'></div>
+        <div className='w-px self-stretch bg-black'></div>

Or if you want to keep the border approach:

-        <div className='border border-black'></div>
+        <div className='w-px h-full border-r border-black'></div>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/About.jsx` at line 24, The divider <div> in About.jsx is
empty so it collapses; update the element (the div with className 'border
border-black') to give it explicit dimensions or use a vertical border utility
so it renders — for example apply a fixed height and thin width (or replace with
a left-border style) via className or inline style (e.g., add a height like
h-8/h-16 and set width to 1px or use border-l utilities) so the vertical divider
becomes visible in the flex layout.

<div className='flex flex-col gap-5 items-center justify-center'>
<div>
<span className='font-extrabold'>
Codelens is the developer-first platform </span>
that transforms complex data into clear, actionable insights.
</div>
<div>
We believe best enginnering happens when developers have the right tool, the right data and the right context.
</div>
<div>
From platform tracking to privacy by design, everthing we build is centered around clarity, control and performance.
</div>
</div>
</section>
<section className="flex flex-col sm:flex-row gap-10 max-w-6xl mx-auto px-6 p-10">
<div className='flex flex-col gap-3 justify-center items-start'>
<div className='bg-black p-2 inline-flex justify-center items-center'>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2"
className="w-8 h-8"
>
<ellipse cx="12" cy="5" rx="7" ry="3" />
<path d="M5 5v6c0 1.7 3.1 3 7 3s7-1.3 7-3V5" />
<path d="M5 11v6c0 1.7 3.1 3 7 3s7-1.3 7-3v-6" />
</svg>
</div>
<h2 className="text-xs font-black uppercase tracking-[0.28em] text-black">
What we do
</h2>
<p>Unify data from Github, LeetCode, and Codeforces to create a single comprehensive developer profile.</p>
</div>
<div className='border-1 border-black'></div>

@coderabbitai coderabbitai Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Invalid Tailwind class border-1 and non-functional dividers.

The border-1 class is not valid Tailwind CSS syntax. Tailwind uses border for 1px borders, or border-2, border-4, etc. for other widths. Additionally, like line 24, these empty divs lack explicit dimensions and won't render as visible separators between feature cards. The PR screenshots show these dividers should be visible.

🎨 Proposed fix for visible dividers 
-        <div className='border-1 border-black'></div>
+        <div className='w-px self-stretch bg-black hidden sm:block'></div>

Note: Added hidden sm:block since these dividers appear only in the row layout (desktop), not the stacked column layout (mobile).

Also applies to: 80-80

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/About.jsx` at line 60, Replace the invalid Tailwind class
and make the divider visible: in About.jsx locate the divider elements (the divs
with className 'border-1 border-black') and change them to a proper Tailwind
breakpoint-aware visible divider such as className='hidden sm:block w-px
bg-black mx-4' for vertical separators in the desktop row layout (or 'hidden
sm:block h-px bg-black my-4' for horizontal separators if used between stacked
cards), replacing both occurrences (the one around line 60 and the one around
line 80); ensure you keep the responsive 'hidden sm:block' so dividers only
appear in the row layout.

<div className='flex flex-col gap-3 justify-center items-start'>
<div className='bg-black p-2 inline-flex justify-center items-center'>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="w-8 h-8"
>
<path d="M12 2L13.8 10.2L22 12L13.8 13.8L12 22L10.2 13.8L2 12L10.2 10.2L12 2Z" />
</svg>
</div>
<h2 className="text-xs font-black uppercase tracking-[0.28em] text-black">How it works
</h2>
<p>AI (Gemini) analyzes your data, identifies strengths and gaps, and builds a personalized learning roadmap.</p>
</div>
<div className='border-1 border-black'></div>
<div className='flex flex-col gap-3 justify-center items-start'>
<div className='bg-black p-2 inline-flex justify-center items-center'>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="white"
strokeWidth="2"
className="w-8 h-8"
>
<circle cx="12" cy="12" r="8" />
<circle cx="12" cy="12" r="4" />
<circle cx="12" cy="12" r="1" />
</svg>
</div>
<h2 className="text-xs font-black uppercase tracking-[0.28em] text-black">What you get
</h2>
<p>Actionable insights and a step-by-step path to improve, grow, and achieve your engineering goals faster. </p>
</div>
</section>
<section className='max-w-6xl px-6 p-10 mx-auto flex justify-center items-center'>
<div className="w-full border-4 border-black bg-white p-6 shadow-[6px_6px_0_0_rgba(0,0,0,1)] flex flex-col sm:flex-row justify-between items-center">
<div>
<h2 className="text-2xl font-black uppercase leading-none tracking-tight text-black sm:text-2xl lg:text-2xl">Build by developers, for developers</h2>

@coderabbitai coderabbitai Bot Jun 9, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Fix grammatical error in heading.

"Build by developers" should be "Built by developers" (past participle form).

📝 Proposed fix 
-            <h2 className="text-2xl font-black uppercase leading-none tracking-tight text-black sm:text-2xl lg:text-2xl">Build by developers, for developers</h2>
+            <h2 className="text-2xl font-black uppercase leading-none tracking-tight text-black sm:text-2xl lg:text-2xl">Built by developers, for developers</h2>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<h2 className="text-2xl font-black uppercase leading-none tracking-tight text-black sm:text-2xl lg:text-2xl">Build by developers, for developers</h2>
<h2 className="text-2xl font-black uppercase leading-none tracking-tight text-black sm:text-2xl lg:text-2xl">Built by developers, for developers</h2>
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@frontend/src/pages/About.jsx` at line 104, In About.jsx update the heading
text in the <h2> element from "Build by developers, for developers" to the
correct past-participle form "Built by developers, for developers" (locate the
<h2> element with className "text-2xl font-black uppercase leading-none
tracking-tight text-black sm:text-2xl lg:text-2xl" and change the string only).

<p className="text-base font-bold leading-relaxed text-black sm:text-lg">
We're remote-first team of builders, thinkers, and problem solvers.
</p>
</div>
<a
href="https://github.com/kunalverma2512/CodeLens/issues"
className="w-full sm:w-auto px-8 sm:px-8 py-4 sm:py-3 bg-black text-white text-xl sm:text-xl md:text-xl font-black uppercase tracking-widest hover:bg-gray-800 transition-colors border-4 border-black sm:border-l-[0px] 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 the community</a>
</div>
</section>
</main>
)
}

export default About
Loading