Skip to content

Revamping the footer with a fresh, modern and clean look#101

Open
ananya-09 wants to merge 4 commits intoOWASP-BLT:mainfrom
ananya-09:main
Open

Revamping the footer with a fresh, modern and clean look#101
ananya-09 wants to merge 4 commits intoOWASP-BLT:mainfrom
ananya-09:main

Conversation

@ananya-09
Copy link
Copy Markdown
Contributor

@ananya-09 ananya-09 commented Mar 29, 2026

Summary

Revamps the website footer with a refreshed visual structure, improved content hierarchy, and a more modern glass-style presentation while maintaining consistency with BLT branding.

Related Issues

Changes

  • ✅ Reworked footer layout into a clearer, multi-section structure
  • ✅ Introduced a polished hero-style top strip (Heard enough? -> Connect with us) for stronger CTA visibility
  • ✅ Added enhanced visual styling with layered gradients, borders, and blur/glass effects
  • ✅ Improved organization of link groups (OWASP, Project, Report) for faster navigation
  • ✅ Refined branding area with logo, project description, and social links
  • ✅ Updated legal/license row styling for cleaner readability and balance

Features

  • Modernized UI: Distinct visual hierarchy and stronger footer identity
  • Glassmorphism styling: Backdrop blur + gradient layers for a premium look
  • Structured navigation: Better grouped links and clearer section headings
  • Responsive layout: Footer remains readable and balanced across screen sizes

Testing

  • Verified footer renders correctly on desktop and mobile breakpoints
  • Checked all footer links and CTA targets
  • Confirmed visual consistency with existing BLT typography/colors
  • Tested both light and dark mode presentation for readability and contrast

Snapshots

Desktop

image
image

Mobile

image image
image image

Summary by CodeRabbit

  • Style

    • Redesigned footer with a rounded, semi‑transparent/blurred container and refreshed visual styling
    • Added "Heard enough?" call-to-action and a "Connect with us" header with consolidated social links (GitHub, X, LinkedIn)
    • Reorganized footer navigation into clearer sections (OWASP / Project / Report) and removed the old social icon row
    • Improved dark‑mode footer appearance and updated visible "Last updated" timestamp
  • Documentation

    • Restored visible AGPLv3 license text to the footer bottom row

@owasp-blt
Copy link
Copy Markdown

owasp-blt bot commented Mar 29, 2026

📊 Monthly Leaderboard

Hi @ananya-09! Here's how you rank for March 2026:

Rank User Open PRs PRs (merged) PRs (closed) Reviews Comments Total
14 azizrebhi @azizrebhi 3 17 1 1 9 194
15 ananya-09 @ananya-09 5 13 6 5 14 176
16 swaparup36 @swaparup36 6 15 0 2 4 174

Scoring this month (across OWASP-BLT org): Open PRs (+1 each), Merged PRs (+10), Closed (not merged) (−2), Reviews (+5; first two per PR in-month), Comments (+2, excludes CodeRabbit). Run /leaderboard on any issue or PR to see your rank!

@owasp-blt owasp-blt bot added unresolved-conversations: 0 PR has 0 unresolved conversations 2 checks pending needs-peer-review PR needs peer review labels Mar 29, 2026
@owasp-blt
Copy link
Copy Markdown

owasp-blt bot commented Mar 29, 2026

👋 Hi @ananya-09!

This pull request needs a peer review before it can be merged. Please request a review from a team member who is not:

  • The PR author
  • coderabbitai
  • copilot

Once a valid peer review is submitted, this check will pass automatically. Thank you!

⚠️ Peer review enforcement is active.

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 29, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: af9019c8-2ffe-4cff-8e9d-54d08af91a2f

📥 Commits

Reviewing files that changed from the base of the PR and between c9260e4 and a5ae8ae.

📒 Files selected for processing (1)
  • index.html
🚧 Files skipped from review as they are similar to previous changes (1)
  • index.html

Walkthrough

Updated the homepage footer: replaced the multi-column grid with a rounded, semi-transparent blurred container, changed dark:bg-dark-surfacedark:bg-dark-base, added a “Heard enough? →” prompt, “Connect with us” card + social links, consolidated link lists, restored AGPLv3 to bottom row, updated timestamp, and removed UTF‑8 BOM.

Changes

Cohort / File(s) Summary
Footer Update
index.html
Replaced multi-column footer with a rounded, semi-transparent blurred container; changed dark:bg-dark-surfacedark:bg-dark-base; removed old column layout and social icon row; added “Heard enough? →” prompt, “Connect with us” card with external GitHub link and additional social icons (GitHub/X/LinkedIn); reorganized link sections (OWASP, Project, Report); restored AGPLv3 license to bottom row; updated “Last updated” to Apr 7, 2026, 9:21 PM UTC with commit 20a4026; removed UTF‑8 BOM before <!DOCTYPE html>; diff +68/−53.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

quality: medium

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the main change: revamping the footer with a fresh, modern and clean look, which is the primary focus of the changeset.
Linked Issues check ✅ Passed The PR successfully implements all objectives from issue #90: footer interactive improvements, all social media handles added (GitHub, X, LinkedIn), and UI/UX updates with modern glass-morphism styling and improved layout.
Out of Scope Changes check ✅ Passed All changes are directly related to footer revamping. The only tangential change is removing the UTF-8 BOM, which is a minor technical cleanup appropriate for a file modification.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🧹 Nitpick comments (2)
index.html (2)

699-773: Add Playwright coverage for the new footer structure.

This PR rewrites the footer, but current tests don’t assert footer headings/links/CTA at all (tests/homepage.spec.js:1-40). Add a focused test to lock expected labels and critical href targets.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 699 - 773, Update tests/homepage.spec.js to add
Playwright assertions for the rewritten footer: verify the CTA title "Connect
with us" (h2 text), the CTA button anchor linking to
"https://github.com/OWASP-BLT" (the rounded anchor with aria-label "Explore
OWASP BLT"), presence of key footer headings "OWASP", "Project", and "Report"
(their h3 texts), and that the copyright year element with id "footer-year"
exists; locate these elements by visible text, aria-labels, or ids (e.g., h2
text "Connect with us", aria-label "Explore OWASP BLT", h3 texts, and
`#footer-year`) and add focused expects on text content and href targets rather
than brittle class selectors. Ensure the new test is small, deterministic, and
placed in tests/homepage.spec.js alongside existing homepage checks.

737-757: Footer link styling is heavily duplicated; extract a reusable class.

The same long utility chain is repeated across all grouped links, which increases drift risk during future style edits. Consider a footer-link utility/class and reuse it.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@index.html` around lines 737 - 757, Extract the repeated anchor utility chain
(text-primary hover:text-primary-hover hover:underline dark:text-primary
dark:hover:text-red-200) into a single reusable CSS class named footer-link, add
that class to your stylesheet with equivalent rules (including hover and dark
variants), and then replace the long class attribute on each <a> (e.g., the
links using the svg icons and labels like "owasp.org", "Source code", "Public
bug", etc.) with class="footer-link" so all footer links reuse the new class.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@index.html`:
- Line 730: The LinkedIn icon reference uses a missing SVG symbol
(href="#fa-linkedin") so the <use> element won’t render; fix by either adding a
symbol with id="fa-linkedin" to your SVG sprite (matching the expected path data
and viewBox) or replace the <use href="#fa-linkedin"> element inside the anchor
(aria-label="OWASP BLT on LinkedIn") with an inline SVG for the LinkedIn logo
that preserves the existing classes (fa-icon text-xl), aria-hidden attribute,
and styling (text-gray-600 transition hover:text-primary dark:text-gray-300
dark:hover:text-red-300).

---

Nitpick comments:
In `@index.html`:
- Around line 699-773: Update tests/homepage.spec.js to add Playwright
assertions for the rewritten footer: verify the CTA title "Connect with us" (h2
text), the CTA button anchor linking to "https://github.com/OWASP-BLT" (the
rounded anchor with aria-label "Explore OWASP BLT"), presence of key footer
headings "OWASP", "Project", and "Report" (their h3 texts), and that the
copyright year element with id "footer-year" exists; locate these elements by
visible text, aria-labels, or ids (e.g., h2 text "Connect with us", aria-label
"Explore OWASP BLT", h3 texts, and `#footer-year`) and add focused expects on text
content and href targets rather than brittle class selectors. Ensure the new
test is small, deterministic, and placed in tests/homepage.spec.js alongside
existing homepage checks.
- Around line 737-757: Extract the repeated anchor utility chain (text-primary
hover:text-primary-hover hover:underline dark:text-primary
dark:hover:text-red-200) into a single reusable CSS class named footer-link, add
that class to your stylesheet with equivalent rules (including hover and dark
variants), and then replace the long class attribute on each <a> (e.g., the
links using the svg icons and labels like "owasp.org", "Source code", "Public
bug", etc.) with class="footer-link" so all footer links reuse the new class.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Repository: OWASP-BLT/coderabbit/.coderabbit.yml

Review profile: CHILL

Plan: Pro

Run ID: e77cb8fb-bb2c-427e-be2b-5d9c2af53dcb

📥 Commits

Reviewing files that changed from the base of the PR and between 46360d1 and 8571d3e.

📒 Files selected for processing (1)
  • index.html

@owasp-blt owasp-blt bot added unresolved-conversations: 1 PR has 1 unresolved conversation and removed unresolved-conversations: 0 PR has 0 unresolved conversations labels Mar 29, 2026
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@github-actions github-actions bot added unresolved-conversations: 0 PR has 0 unresolved conversations and removed unresolved-conversations: 1 PR has 1 unresolved conversation labels Mar 29, 2026
@owasp-blt owasp-blt bot added unresolved-conversations: 0 PR has 0 unresolved conversations and removed unresolved-conversations: 0 PR has 0 unresolved conversations labels Mar 29, 2026
Copy link
Copy Markdown

@Jayant2908 Jayant2908 left a comment

Choose a reason for hiding this comment

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

LGTM, Nice work!

@owasp-blt owasp-blt bot added has-peer-review PR has received peer review unresolved-conversations: 0 PR has 0 unresolved conversations and removed needs-peer-review PR needs peer review unresolved-conversations: 0 PR has 0 unresolved conversations labels Mar 29, 2026
@ananya-09
Copy link
Copy Markdown
Contributor Author

LGTM, Nice work!

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

has-peer-review PR has received peer review quality: medium unresolved-conversations: 0 PR has 0 unresolved conversations

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Feature: Let's update the footer

2 participants