feat: implement neubrutalist UI design and modular component architecture#12
feat: implement neubrutalist UI design and modular component architecture#12kjarir wants to merge 4 commits intoAOSSIE-Org:mainfrom
Conversation
github-actions
bot
added
no-issue-linked
configuration
dependencies
documentation
📝 WalkthroughWalkthroughThis PR introduces a comprehensive UI overhaul for OrgExplorer, adding a Neubrutalist design system with Tailwind CSS v4, component-based architecture (layout and home page sections), global styling refactoring with CSS custom properties, Tailwind tooling integration, documentation updates for OrgExplorer branding, and font/icon resource optimization. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Tip Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 8
🤖 Fix all issues with AI agents
In `@CONTRIBUTING.md`:
- Around line 17-24: TOC links are flagged because heading slugs include emojis
(e.g., "## 🤝 How Can I Contribute?") but the TOC uses plain text anchors; fix
by either removing emojis from the headings (rename headings like "## How Can I
Contribute?" and "## Getting Started" etc.) so their slugs match the TOC, or
regenerate the TOC anchors to match GitHub's actual slug generation for the
headings with emojis (update the links to the exact slug strings for headings
such as "🤝 How Can I Contribute?", "📋 Table of Contents", "GSoC & AOSSIE
specifics", etc.). Ensure whichever approach you pick, the heading text symbols
(the emoji-bearing headings) and the TOC link fragments are consistent.
- Line 50: Update the heading text "local Setup" to "Local Setup" in
CONTRIBUTING.md by capitalizing the first letter of the word "local" so the
section heading reads "Local Setup".
In `@package.json`:
- Line 13: The package "@tailwindcss/vite" is a build-time Vite plugin and
should be moved out of runtime dependencies into devDependencies; remove the
"@tailwindcss/vite" entry from the dependencies object in package.json and add
the same entry under devDependencies (or run npm/yarn/pnpm add --save-dev
`@tailwindcss/vite` and remove the runtime install), then reinstall to update the
lockfile so production installs are not bloated by this build plugin.
In `@src/components/home/CTA.tsx`:
- Around line 10-17: The input in the CTA component is missing an accessible
label and neither the input nor the SCAN button have any handlers; add an
explicit <label> (or an aria-label) tied to the input via an id (e.g., give the
input id="repoInput" and add <label htmlFor="repoInput">Repo URL</label>) or add
aria-label="Repository URL" on the input, and make the SCAN <button> interactive
by wiring minimal handlers (e.g., onChange for the input and onClick for the
button) that call provided props or a noop callback so the form is not inert
(update the CTA component to accept and use onChange/onScan props or attach
placeholder handlers). Ensure the button has an explicit type (type="button" or
type="submit") to avoid unexpected form submissions.
In `@src/components/home/Testimonials.tsx`:
- Line 19: In the Testimonials component replace the non-descriptive alt
attributes on the avatar <img> elements with each testimonial author's name to
improve accessibility; locate the <img> tags in Testimonials.tsx (the ones
currently using alt="Dev" around the two avatar images) and update their alt
values to the corresponding person's name (e.g., the testimonial author shown
next to each image) so the alt text is meaningful and unique.
In `@src/components/layout/Footer.tsx`:
- Line 24: In the Footer component (Footer.tsx) update the link text to correct
the typo: change the anchor content "Terms Service" to "Terms of Service" (the
<li><a ...> element rendering the terms link) so the displayed label is
accurate.
In `@src/components/layout/Navbar.tsx`:
- Around line 16-18: The hamburger <button> in the Navbar component is
non-functional and missing accessibility attributes; add a boolean state (e.g.,
isMenuOpen) in the Navbar, implement a toggle handler (e.g., toggleMenu) and
wire it to the button's onClick; add aria-label (e.g., "Toggle navigation") and
aria-expanded={isMenuOpen} to the <button>, and render a conditional mobile menu
panel (e.g., a <div> or <nav> with className "mobile-menu") that shows when
isMenuOpen is true; ensure the button icon updates or remains descriptive for
screen readers and that the mobile menu panel has appropriate role/aria-hidden
based on isMenuOpen.
In `@src/index.css`:
- Around line 3-11: The accent green variable --color-accent-green is set to
pure neon `#00FF00` which has extremely poor contrast against white; update the
CSS variable --color-accent-green to a darker green (e.g., `#00CC00` or `#00B300`)
to meet WCAG contrast for backgrounds and text, then verify usages in components
that reference bg-accent-green (e.g., Testimonials.tsx and Hero.tsx) still look
correct and adjust any text color to ensure sufficient contrast.
🧹 Nitpick comments (9)
package.json (1)
23-23:autoprefixeris unnecessary with Tailwind CSS v4.Tailwind v4 uses Lightning CSS internally, which handles vendor prefixing automatically. This dependency can be removed.
Proposed fix
"devDependencies": { - "autoprefixer": "^10.4.24",index.html (1)
9-10: Consider self-hosting or lazy-loading icon fonts to avoid render-blocking requests.Both the Space Grotesk font and Material Icons stylesheets are loaded synchronously from Google's CDN. The font uses
display=swap(good), but the Material Icons stylesheet on Line 10 has no such optimization and can delay first paint. If only a few icons are used, consider inlining the icon SVGs or using a tree-shakeable icon library (e.g.,@material-design-icons/svg) to reduce network dependency and improve loading performance.src/components/layout/Footer.tsx (1)
33-37: Social icon placeholders lack accessible labels and meaningful content.Each icon block renders a generic
north_eastarrow with noaria-label, link semantics (<a>), or indication of what it represents. Screen readers will not convey any useful information. Consider using<a>elements witharia-label(e.g., "GitHub", "Twitter") instead of<div>withcursor-pointer.src/components/home/Features.tsx (1)
2-6: Consider hoisting the staticfeaturesarray outside the component.Since the array is constant and doesn't depend on props or state, defining it at module scope avoids recreating it on every render. Minor optimization but good practice.
Proposed refactor
+const features = [ + { title: "Org Visualizer", desc: "Deep dive into complex repo structures with our proprietary forced-graph layout engine.", icon: "hub", color: "bg-primary text-white" }, + { title: "Heatmaps", desc: "Bold, color-coded activity tracking that highlights burnouts and bottlenecks before they happen.", icon: "local_fire_department", color: "bg-accent-pink text-black" }, + { title: "Dependency Graphs", desc: "High-contrast relationship mapping for cross-repo dependencies and shared libraries.", icon: "account_tree", color: "bg-white text-black" } +]; + export default function Features() { - const features = [ - { title: "Org Visualizer", desc: "Deep dive into complex repo structures with our proprietary forced-graph layout engine.", icon: "hub", color: "bg-primary text-white" }, - { title: "Heatmaps", desc: "Bold, color-coded activity tracking that highlights burnouts and bottlenecks before they happen.", icon: "local_fire_department", color: "bg-accent-pink text-black" }, - { title: "Dependency Graphs", desc: "High-contrast relationship mapping for cross-repo dependencies and shared libraries.", icon: "account_tree", color: "bg-white text-black" } - ];src/index.css (2)
29-35: Consider using Tailwind v4@utilitydirective instead of plain CSS classes.In Tailwind v4, custom utilities should use the
@utilitydirective so they participate in the utility layer and can be composed with variants (e.g.,md:border-heavy). Plain CSS classes won't work with Tailwind variants.♻️ Suggested refactor
-.border-heavy { - border: 4px solid `#000000`; -} - -.border-medium { - border: 2px solid `#000000`; -} +@utility border-heavy { + border: 4px solid `#000`; +} + +@utility border-medium { + border: 2px solid `#000`; +}Same applies to
.shape-bloband.btn-press:activeif you want variant support.
37-50: WebKit-only scrollbar styling — no Firefox fallback.
::-webkit-scrollbaris not supported in Firefox. Consider addingscrollbar-widthandscrollbar-colorfor cross-browser coverage.♻️ Add Firefox fallback
+/* Firefox */ +* { + scrollbar-width: thin; + scrollbar-color: `#000` `#fff`; +} + /* Custom Scrollbar */ ::-webkit-scrollbar {src/components/home/Hero.tsx (2)
27-33: Buttons are non-functional placeholders."Get Started" and "View Demo" buttons have no
onClickhandlers. This is fine for an initial UI scaffold, but consider addingdisabledoraria-disabledattributes (or TODO comments) so it's clear these are pending implementation and screen readers don't mislead users.
49-53: External image has no fallback for load failures.The Unsplash image URL is hardcoded. If the CDN is unreachable, users see a broken image. Consider adding an
onErrorfallback or a placeholder background.src/components/home/Testimonials.tsx (1)
1-49: Testimonial data is duplicated in markup — consider extracting to an array.With two cards already and likely more coming, extracting testimonial data into an array (similar to how
Features.tsxhandles its items) would reduce duplication and make additions easier.
| ## 📋 Table of Contents | ||
|
|
||
| - [How Can I Contribute?](#how-can-i-contribute) | ||
| - [Getting Started](#getting-started) | ||
| - [Development Workflow](#development-workflow) | ||
| - [Pull Request Guidelines](#pull-request-guidelines) | ||
| - [Code Style Guidelines](#code-style-guidelines) | ||
| - [Community Guidelines](#community-guidelines) | ||
| - [GSoC & AOSSIE specifics](#gsoc--aossie-specifics) |
There was a problem hiding this comment.
Table of Contents link fragments may not resolve correctly.
The markdownlint tool flags all TOC links as having invalid fragments (MD051). For instance, the heading ## 🤝 How Can I Contribute? generates a slug that includes the emoji, but the anchor #how-can-i-contribute omits it. Verify these links work on GitHub's renderer, or remove the emojis from headings to ensure reliable anchoring.
🧰 Tools
🪛 markdownlint-cli2 (0.20.0)
[warning] 19-19: Link fragments should be valid
(MD051, link-fragments)
[warning] 20-20: Link fragments should be valid
(MD051, link-fragments)
[warning] 21-21: Link fragments should be valid
(MD051, link-fragments)
[warning] 22-22: Link fragments should be valid
(MD051, link-fragments)
[warning] 23-23: Link fragments should be valid
(MD051, link-fragments)
[warning] 24-24: Link fragments should be valid
(MD051, link-fragments)
🤖 Prompt for AI Agents
In `@CONTRIBUTING.md` around lines 17 - 24, TOC links are flagged because heading
slugs include emojis (e.g., "## 🤝 How Can I Contribute?") but the TOC uses
plain text anchors; fix by either removing emojis from the headings (rename
headings like "## How Can I Contribute?" and "## Getting Started" etc.) so their
slugs match the TOC, or regenerate the TOC anchors to match GitHub's actual slug
generation for the headings with emojis (update the links to the exact slug
strings for headings such as "🤝 How Can I Contribute?", "📋 Table of Contents",
"GSoC & AOSSIE specifics", etc.). Ensure whichever approach you pick, the
heading text symbols (the emoji-bearing headings) and the TOC link fragments are
consistent.
| ``` | ||
|
|
||
| 2. **Clone Your Fork** | ||
| ### local Setup |
There was a problem hiding this comment.
Capitalize "local" → "Local" in the heading.
-### local Setup
+### Local Setup📝 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.
| ### local Setup | |
| ### Local Setup |
🤖 Prompt for AI Agents
In `@CONTRIBUTING.md` at line 50, Update the heading text "local Setup" to "Local
Setup" in CONTRIBUTING.md by capitalizing the first letter of the word "local"
so the section heading reads "Local Setup".
| "preview": "vite preview" | ||
| }, | ||
| "dependencies": { | ||
| "@tailwindcss/vite": "^4.1.18", |
There was a problem hiding this comment.
@tailwindcss/vite should be a devDependency, not a runtime dependency.
This is a Vite build plugin used only at compile time. Placing it in dependencies bloats production installs unnecessarily.
Proposed fix
Move it from dependencies to devDependencies:
"dependencies": {
- "@tailwindcss/vite": "^4.1.18",
"react": "^19.2.0",
"react-dom": "^19.2.0"
},
"devDependencies": {
+ "@tailwindcss/vite": "^4.1.18",
"@eslint/js": "^9.39.1",📝 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.
| "@tailwindcss/vite": "^4.1.18", | |
| "dependencies": { | |
| "react": "^19.2.0", | |
| "react-dom": "^19.2.0" | |
| }, | |
| "devDependencies": { | |
| "@tailwindcss/vite": "^4.1.18", | |
| "@eslint/js": "^9.39.1", |
🤖 Prompt for AI Agents
In `@package.json` at line 13, The package "@tailwindcss/vite" is a build-time
Vite plugin and should be moved out of runtime dependencies into
devDependencies; remove the "@tailwindcss/vite" entry from the dependencies
object in package.json and add the same entry under devDependencies (or run
npm/yarn/pnpm add --save-dev `@tailwindcss/vite` and remove the runtime install),
then reinstall to update the lockfile so production installs are not bloated by
this build plugin.
| <input | ||
| className="flex-grow p-8 text-3xl font-black focus:outline-none placeholder:text-gray-300" | ||
| placeholder="github.com/your-org" | ||
| type="text" | ||
| /> | ||
| <button className="bg-primary text-white font-black uppercase px-16 py-8 text-3xl border-l-4 border-black hover:bg-blue-700 transition-colors cursor-pointer"> | ||
| SCAN | ||
| </button> |
There was a problem hiding this comment.
Input lacks an accessible label and neither the input nor button have any interactivity.
The <input> has no <label>, aria-label, or id — screen readers won't convey its purpose. The SCAN button and input have no handlers, so this form is currently inert. At minimum, add an accessible label now even if functionality is deferred.
Accessibility fix
<input
+ aria-label="GitHub organization URL"
className="flex-grow p-8 text-3xl font-black focus:outline-none placeholder:text-gray-300"
placeholder="github.com/your-org"
type="text"
/>📝 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.
| <input | |
| className="flex-grow p-8 text-3xl font-black focus:outline-none placeholder:text-gray-300" | |
| placeholder="github.com/your-org" | |
| type="text" | |
| /> | |
| <button className="bg-primary text-white font-black uppercase px-16 py-8 text-3xl border-l-4 border-black hover:bg-blue-700 transition-colors cursor-pointer"> | |
| SCAN | |
| </button> | |
| <input | |
| aria-label="GitHub organization URL" | |
| className="flex-grow p-8 text-3xl font-black focus:outline-none placeholder:text-gray-300" | |
| placeholder="github.com/your-org" | |
| type="text" | |
| /> | |
| <button className="bg-primary text-white font-black uppercase px-16 py-8 text-3xl border-l-4 border-black hover:bg-blue-700 transition-colors cursor-pointer"> | |
| SCAN | |
| </button> |
🤖 Prompt for AI Agents
In `@src/components/home/CTA.tsx` around lines 10 - 17, The input in the CTA
component is missing an accessible label and neither the input nor the SCAN
button have any handlers; add an explicit <label> (or an aria-label) tied to the
input via an id (e.g., give the input id="repoInput" and add <label
htmlFor="repoInput">Repo URL</label>) or add aria-label="Repository URL" on the
input, and make the SCAN <button> interactive by wiring minimal handlers (e.g.,
onChange for the input and onClick for the button) that call provided props or a
noop callback so the form is not inert (update the CTA component to accept and
use onChange/onScan props or attach placeholder handlers). Ensure the button has
an explicit type (type="button" or type="submit") to avoid unexpected form
submissions.
| </p> | ||
| <div className="flex items-center gap-6"> | ||
| <div className="w-16 h-16 border-medium bg-accent-green"> | ||
| <img className="w-full h-full object-cover grayscale" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80" alt="Dev" /> |
There was a problem hiding this comment.
Use meaningful alt text for testimonial images.
Both avatar images use alt="Dev" which is not descriptive. Use the person's name for better accessibility.
- <img className="w-full h-full object-cover grayscale" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80" alt="Dev" />
+ <img className="w-full h-full object-cover grayscale" src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?auto=format&fit=crop&w=200&q=80" alt="Alex Rivers" />- <img className="w-full h-full object-cover grayscale" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80" alt="Dev" />
+ <img className="w-full h-full object-cover grayscale" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?auto=format&fit=crop&w=200&q=80" alt="Sarah Chen" />Also applies to: 37-37
🤖 Prompt for AI Agents
In `@src/components/home/Testimonials.tsx` at line 19, In the Testimonials
component replace the non-descriptive alt attributes on the avatar <img>
elements with each testimonial author's name to improve accessibility; locate
the <img> tags in Testimonials.tsx (the ones currently using alt="Dev" around
the two avatar images) and update their alt values to the corresponding person's
name (e.g., the testimonial author shown next to each image) so the alt text is
meaningful and unique.
| <h5 className="font-black uppercase mb-8 text-primary tracking-widest">Legal</h5> | ||
| <ul className="space-y-4 font-black uppercase"> | ||
| <li><a className="hover:text-accent-pink" href="#">Privacy Policy</a></li> | ||
| <li><a className="hover:text-accent-pink" href="#">Terms Service</a></li> |
There was a problem hiding this comment.
Typo: "Terms Service" → "Terms of Service".
Proposed fix
-<li><a className="hover:text-accent-pink" href="#">Terms Service</a></li>
+<li><a className="hover:text-accent-pink" href="#">Terms of Service</a></li>📝 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.
| <li><a className="hover:text-accent-pink" href="#">Terms Service</a></li> | |
| <li><a className="hover:text-accent-pink" href="#">Terms of Service</a></li> |
🤖 Prompt for AI Agents
In `@src/components/layout/Footer.tsx` at line 24, In the Footer component
(Footer.tsx) update the link text to correct the typo: change the anchor content
"Terms Service" to "Terms of Service" (the <li><a ...> element rendering the
terms link) so the displayed label is accurate.
| <button className="md:hidden"> | ||
| <span className="material-icons text-4xl">menu</span> | ||
| </button> |
There was a problem hiding this comment.
Hamburger menu button is non-functional and missing accessibility attributes.
The button renders a menu icon but has no onClick handler, no state to toggle a mobile menu, and no corresponding mobile menu panel. It also lacks aria-label and aria-expanded for screen readers. This leaves mobile users with no navigation.
Minimum accessibility fix (even if menu logic is deferred)
-<button className="md:hidden">
+<button className="md:hidden" aria-label="Open navigation menu" aria-expanded={false}>
<span className="material-icons text-4xl">menu</span>
</button>📝 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.
| <button className="md:hidden"> | |
| <span className="material-icons text-4xl">menu</span> | |
| </button> | |
| <button className="md:hidden" aria-label="Open navigation menu" aria-expanded={false}> | |
| <span className="material-icons text-4xl">menu</span> | |
| </button> |
🤖 Prompt for AI Agents
In `@src/components/layout/Navbar.tsx` around lines 16 - 18, The hamburger
<button> in the Navbar component is non-functional and missing accessibility
attributes; add a boolean state (e.g., isMenuOpen) in the Navbar, implement a
toggle handler (e.g., toggleMenu) and wire it to the button's onClick; add
aria-label (e.g., "Toggle navigation") and aria-expanded={isMenuOpen} to the
<button>, and render a conditional mobile menu panel (e.g., a <div> or <nav>
with className "mobile-menu") that shows when isMenuOpen is true; ensure the
button icon updates or remains descriptive for screen readers and that the
mobile menu panel has appropriate role/aria-hidden based on isMenuOpen.
| @theme { | ||
| --color-primary: #0000ff; | ||
| --color-background-light: #ffffff; | ||
| --color-accent-green: #00FF00; | ||
| --color-accent-pink: #ff60b5; | ||
|
|
||
| font-synthesis: none; | ||
| text-rendering: optimizeLegibility; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| --shadow-neubrutal: 8px 8px 0px 0px #000; | ||
| --shadow-neubrutal-hover: 4px 4px 0px 0px #000; | ||
| } |
There was a problem hiding this comment.
#00FF00 has extremely poor contrast against white backgrounds.
Pure green (#00FF00) yields a contrast ratio of ~1.2:1 against white, far below WCAG AA minimums. Looking at the components (e.g., Testimonials.tsx Line 18, Hero.tsx Line 5), bg-accent-green is used as a background, which is borderline. If it's ever used for text or borders against white, it will be illegible. Consider a darker green like #00CC00 or #00B300 to improve visibility while keeping the neon aesthetic.
- --color-accent-green: `#00FF00`;
+ --color-accent-green: `#00cc44`;📝 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.
| @theme { | |
| --color-primary: #0000ff; | |
| --color-background-light: #ffffff; | |
| --color-accent-green: #00FF00; | |
| --color-accent-pink: #ff60b5; | |
| font-synthesis: none; | |
| text-rendering: optimizeLegibility; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| --shadow-neubrutal: 8px 8px 0px 0px #000; | |
| --shadow-neubrutal-hover: 4px 4px 0px 0px #000; | |
| } | |
| `@theme` { | |
| --color-primary: `#0000ff`; | |
| --color-background-light: `#ffffff`; | |
| --color-accent-green: `#00cc44`; | |
| --color-accent-pink: `#ff60b5`; | |
| --shadow-neubrutal: 8px 8px 0px 0px `#000`; | |
| --shadow-neubrutal-hover: 4px 4px 0px 0px `#000`; | |
| } |
🧰 Tools
🪛 Biome (2.3.14)
[error] 3-11: Tailwind-specific syntax is disabled.
Enable tailwindDirectives in the css parser options, or remove this if you are not using Tailwind CSS.
(parse)
🪛 Stylelint (17.2.0)
[error] 4-4: Expected "#0000ff" to be "#00f" (color-hex-length)
(color-hex-length)
[error] 5-5: Expected "#ffffff" to be "#fff" (color-hex-length)
(color-hex-length)
[error] 6-6: Expected "#00FF00" to be "#0F0" (color-hex-length)
(color-hex-length)
[error] 9-9: Unexpected empty line before custom property (custom-property-empty-line-before)
(custom-property-empty-line-before)
[error] 3-3: Unexpected unknown at-rule "@theme" (scss/at-rule-no-unknown)
(scss/at-rule-no-unknown)
🤖 Prompt for AI Agents
In `@src/index.css` around lines 3 - 11, The accent green variable
--color-accent-green is set to pure neon `#00FF00` which has extremely poor
contrast against white; update the CSS variable --color-accent-green to a darker
green (e.g., `#00CC00` or `#00B300`) to meet WCAG contrast for backgrounds and text,
then verify usages in components that reference bg-accent-green (e.g.,
Testimonials.tsx and Hero.tsx) still look correct and adjust any text color to
ensure sufficient contrast.
1 participant
Summary of Changes
Summary by CodeRabbit
New Features
Style
Documentation
Chores