Redesign about page with improved timeline and better styling#1013
Open
Flashl3opard wants to merge 9 commits intoalphaonelabs:mainfrom
Open
Redesign about page with improved timeline and better styling#1013Flashl3opard wants to merge 9 commits intoalphaonelabs:mainfrom
Flashl3opard wants to merge 9 commits intoalphaonelabs:mainfrom
Conversation
Contributor
WalkthroughReplaces the two-column About layout with a hero-first design (teal gradient title and updated paragraph), consolidated hoverable icon pills, and a vertical, card-based timeline with year badges and a highlighted 2025–Today milestone; adjusts typography, spacing, colors, borders, and transitions. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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 |
There was a problem hiding this comment.
Pull request overview
Redesigns the About page template to a modern hero + vertical timeline layout with updated Tailwind styling for light/dark modes.
Changes:
- Replaces the previous About content layout with a gradient hero section and icon “value” cards.
- Implements a left-aligned vertical timeline with styled milestone cards and special emphasis for the current year (2025).
- Updates light/dark mode styling, spacing, borders, shadows, and hover/transition effects across the page.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/about.html`:
- Around line 47-53: Wrap the timeline items block in semantic list markup:
replace the current timeline container's non-semantic divs that hold the items
(the "Timeline Container" / "Timeline Items" region) with an <ol> and make each
milestone a <li>; convert the visual year chip element inside each milestone
into a <time datetime="YYYY"> element and keep existing classes for styling so
layout is preserved; ensure the vertical line remains outside or alongside the
<ol> (not inside each <li>) and update any aria/role attributes if present to
maintain accessibility and reading order for screen readers.
- Around line 21-35: The icon <i> elements used in the cards are decorative but
currently include redundant title attributes (and in some cases mismatched
titles); remove the title attributes from each <i class="fas ..."> element and
mark them as decorative by adding aria-hidden="true" and role="presentation" so
assistive tech ignores the icon and only the visible <span
class="font-semibold"> label is announced (apply the same change to the other
occurrences mentioned).
- Around line 9-17: The hero container using class "bg-gradient-to-br
from-teal-300 via-teal-400 to-teal-500 ... text-white" has insufficient contrast
in light mode; remove the hardcoded text-white and instead apply a light-mode
readable foreground (e.g. text-gray-900) with a dark-mode override
(dark:text-white) on that container and any small "year" badge elements and icon
labels (the year pills and icon label spans referenced in the same template).
Concretely: replace text-white with "text-gray-900 dark:text-white" on the main
hero <div> (the element with bg-gradient-to-br from-teal-300...) and on the
small badge elements (year pills/icon labels), and if needed slightly darken the
gradient stops (bump from teal-300/400/500 to teal-400/500/600) to ensure WCAG
contrast.
- Line 161: The pulsing marker forces animation for all users; update the div
that currently uses the animate-pulse class to respect reduced-motion
preferences by replacing it with motion-safe:animate-pulse and
motion-reduce:animate-none (or add motion-reduce:animate-none alongside
animate-pulse) so users who opt out won’t see the pulse, and mark the decorative
badge as non-informative (add aria-hidden="true") if it conveys no additional
semantic information; target the exact div element with the classes including
"animate-pulse" to make the change.
- Around line 12-17: Replace the hardcoded phrase "Now, in 2025, we've fully
evolved into an education platform" with evergreen copy: either rewrite to a
milestone like "Since 2025, we've fully evolved into an education platform" or
"By 2025, we had evolved…" or render the year from template/context (e.g., use a
template variable such as current_year or milestone_year) so the sentence in the
about.html snippet remains correct over time; update the sentence that currently
contains "Now, in 2025" accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 74ac75d7-41bd-4451-9225-fefee64310e4
📒 Files selected for processing (1)
web/templates/about.html
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
web/templates/about.html (2)
9-35:⚠️ Potential issue | 🟠 MajorRestore readable light-mode text in the hero.
The parent
text-whitestill puts the hero copy and icon labels on ateal-300/400/500gradient, which remains too low-contrast in light mode.As per coding guidelines, "Ensure sufficient color contrast for accessibility."🎨 Minimal fix
- <div class="bg-gradient-to-br from-teal-300 via-teal-400 to-teal-500 dark:from-teal-600 dark:via-teal-700 dark:to-teal-800 rounded-2xl shadow-2xl p-8 md:p-12 mb-12 text-white"> + <div class="bg-gradient-to-br from-teal-300 via-teal-400 to-teal-500 dark:from-teal-600 dark:via-teal-700 dark:to-teal-800 rounded-2xl shadow-2xl p-8 md:p-12 mb-12 text-gray-900 dark:text-white">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/templates/about.html` around lines 9 - 35, The hero wrapper currently forces light-mode text via the parent class "text-white", causing low contrast in light mode—remove "text-white" from the parent div and instead apply explicit light/dark color classes to the hero text and icon labels (e.g., set h1, p and the icon label spans to a light-mode color like "text-gray-900" and add "dark:text-white" or similar dark-mode overrides) so text is readable in light mode while remaining white in dark mode; update any icon <i> elements or their container classes (the elements with "fas fa-*" and the spans with "font-semibold") to include matching "text-..." and "dark:text-..." classes.
164-172:⚠️ Potential issue | 🟡 MinorThe “current year” milestone is already stale.
As of March 8, 2026, labeling this entry
2025 - Todayand calling it the current year is incorrect. Make the milestone evergreen (Since 2025) or render the year from template context if it is meant to track the present.🗓️ Minimal fix
- <!-- 2025 - Current Year (Special Styling) --> + <!-- Since 2025 milestone --> ... - <time datetime="2025" - class="inline-block bg-gradient-to-r from-teal-700 to-teal-600 text-white font-bold px-5 py-1.5 rounded-full text-sm shadow-lg">2025 - Today</time> + <time datetime="2025" + class="inline-block bg-gradient-to-r from-teal-700 to-teal-600 text-white font-bold px-5 py-1.5 rounded-full text-sm shadow-lg">Since 2025</time>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/templates/about.html` around lines 164 - 172, Update the hardcoded "2025 - Today" milestone inside the <time datetime="2025"> element to be evergreen: either change the visible label to "Since 2025" (keeping datetime="2025") or render the label dynamically from template context (e.g., use your template's current-year variable to show the actual current year or a "Since 2025" string). Locate the <time datetime="2025"> node in the milestone block (the list item with the star icon and classes shown) and replace the inner text accordingly; ensure the datetime attribute remains correct for accessibility.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/about.html`:
- Around line 6-7: Replace the hand-rolled container on the about page with the
repo-standard Tailwind container classes: in the template where the div uses
"max-w-6xl mx-auto", change that div's class to "container mx-auto px-4" so it
matches the other templates (leave the surrounding <main> and its classes
untouched).
---
Duplicate comments:
In `@web/templates/about.html`:
- Around line 9-35: The hero wrapper currently forces light-mode text via the
parent class "text-white", causing low contrast in light mode—remove
"text-white" from the parent div and instead apply explicit light/dark color
classes to the hero text and icon labels (e.g., set h1, p and the icon label
spans to a light-mode color like "text-gray-900" and add "dark:text-white" or
similar dark-mode overrides) so text is readable in light mode while remaining
white in dark mode; update any icon <i> elements or their container classes (the
elements with "fas fa-*" and the spans with "font-semibold") to include matching
"text-..." and "dark:text-..." classes.
- Around line 164-172: Update the hardcoded "2025 - Today" milestone inside the
<time datetime="2025"> element to be evergreen: either change the visible label
to "Since 2025" (keeping datetime="2025") or render the label dynamically from
template context (e.g., use your template's current-year variable to show the
actual current year or a "Since 2025" string). Locate the <time datetime="2025">
node in the milestone block (the list item with the star icon and classes shown)
and replace the inner text accordingly; ensure the datetime attribute remains
correct for accessibility.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 19e1d2d1-1309-457a-a04a-a55de196ff83
📒 Files selected for processing (1)
web/templates/about.html
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
github-actions
bot
dismissed
their stale review
All review conversations have been resolved.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Contributor
👀 Peer Review RequiredHi @Flashl3opard! This pull request does not yet have a peer review. Before this PR can be merged, please request a review from one of your peers:
Thank you for contributing! 🎉 |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
web/templates/about.html (1)
7-7:⚠️ Potential issue | 🟠 MajorLight-mode contrast issue persists.
The hero section still uses
text-whiteonteal-300/400/500gradients. White text on these light teal backgrounds does not meet WCAG AA contrast requirements (~2.5:1 vs required 4.5:1).As per coding guidelines, "Ensure sufficient color contrast for accessibility."
🎨 Recommended fix: darken gradients or adjust text
- <div class="bg-gradient-to-br from-teal-300 via-teal-400 to-teal-500 dark:from-teal-600 dark:via-teal-700 dark:to-teal-800 rounded-2xl shadow-2xl p-8 md:p-12 mb-12 text-white"> + <div class="bg-gradient-to-br from-teal-600 via-teal-700 to-teal-800 dark:from-teal-700 dark:via-teal-800 dark:to-teal-900 rounded-2xl shadow-2xl p-8 md:p-12 mb-12 text-white">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/templates/about.html` at line 7, The hero div using the class string starting with "bg-gradient-to-br from-teal-300 via-teal-400 to-teal-500 ... text-white" has insufficient contrast; update that element by either darkening the gradient (e.g., change from-teal-300/400/500 to a darker stop set such as from-teal-700 via-teal-800 to-teal-900) or replace text-white with a dark text color (e.g., text-gray-900) so the foreground/background meets WCAG AA contrast; locate the div by the unique class fragment "bg-gradient-to-br ... rounded-2xl ... p-8 ... text-white" and apply one of these fixes, then verify contrast meets 4.5:1.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/templates/about.html`:
- Line 55: The card div currently uses dark:bg-gray-700 which deviates from the
project's card guideline; update the class list on the card element (the div
with classes starting "bg-white dark:bg-gray-700 rounded-xl p-6 shadow-md ...")
to use dark:bg-gray-800 and adjust to the guideline classes (e.g., rounded-lg
and shadow-lg if desired) so the card background and shape match the specified
Tailwind card styles.
- Line 103: The timeline cards for years 2015, 2018, 2020, and 2023 are missing
the reduced-motion utility classes; update each card's outer div (the element
with class fragment "bg-white ... transform hover:-translate-y-1") to include
motion-reduce:transition-none and motion-reduce:transform-none so they match the
2009/2010/2012 cards and ensure consistent reduced-motion behavior and
accessibility.
---
Duplicate comments:
In `@web/templates/about.html`:
- Line 7: The hero div using the class string starting with "bg-gradient-to-br
from-teal-300 via-teal-400 to-teal-500 ... text-white" has insufficient
contrast; update that element by either darkening the gradient (e.g., change
from-teal-300/400/500 to a darker stop set such as from-teal-700 via-teal-800
to-teal-900) or replace text-white with a dark text color (e.g., text-gray-900)
so the foreground/background meets WCAG AA contrast; locate the div by the
unique class fragment "bg-gradient-to-br ... rounded-2xl ... p-8 ... text-white"
and apply one of these fixes, then verify contrast meets 4.5:1.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 9c61e0dc-e72e-4d39-a7e3-03ab608cfd0c
📒 Files selected for processing (1)
web/templates/about.html
github-actions
bot
dismissed
their stale review
All review conversations have been resolved.
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (1)
web/templates/about.html (1)
7-15:⚠️ Potential issue | 🟠 MajorFix the remaining light-mode contrast failures.
text-whitestill sits on top of very light teal gradients in the hero and on several year chips, so these states will miss accessible contrast in light mode. Use a darker light-mode foreground or darker light-mode teal stops before merging.As per coding guidelines, "Ensure sufficient color contrast for accessibility."
Also applies to: 19-33, 58-58, 74-74, 90-90, 106-106, 122-122, 138-138, 154-154, 170-170
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/templates/about.html` around lines 7 - 15, The hero and several year-chip elements use text-white on very light teal gradients (see the div with class "bg-gradient-to-br ... text-white" and the year chip elements), causing insufficient contrast in light mode; replace text-white with a darker light-mode foreground (e.g., a dark gray utility) OR darken the light-mode gradient stops (e.g., increase teal stop shades) for the hero and all year-chip elements referenced (the same pattern repeated near the year chips) so that foreground vs background contrast meets accessibility guidelines; update the classes on the hero container, the h1/p/span elements and each year-chip element accordingly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@web/templates/about.html`:
- Around line 7-15: The hero and several year-chip elements use text-white on
very light teal gradients (see the div with class "bg-gradient-to-br ...
text-white" and the year chip elements), causing insufficient contrast in light
mode; replace text-white with a darker light-mode foreground (e.g., a dark gray
utility) OR darken the light-mode gradient stops (e.g., increase teal stop
shades) for the hero and all year-chip elements referenced (the same pattern
repeated near the year chips) so that foreground vs background contrast meets
accessibility guidelines; update the classes on the hero container, the
h1/p/span elements and each year-chip element accordingly.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: d0084c28-646e-4e8f-a4e3-6825587d5990
📒 Files selected for processing (1)
web/templates/about.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Redesigned the About page with a modern, professional timeline layout and improved styling for both light and dark modes.
Changes Made
Hero Section:
Timeline Section:
Improvements:
Screenshots
Before
After
Summary by CodeRabbit