CommunityRule/community-rule
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Footer Component #2

Merged
an.di merged 5 commits from adilallo/FooterStart into main 2025-07-29 18:36:19 +00:00
Conversation 0 Commits 5 Files Changed 11
+977 -542
an.di commented 2025-07-29 16:39:20 +00:00
Owner
Copy Link
Copy Source

Add Responsive Footer Component

Overview

This PR adds a responsive, accessible footer for CommunityRule. The footer adapts across mobile, tablet, and desktop breakpoints, serving as the primary navigation anchor and contact section. It uses design tokens for all styling and includes branding, navigation, and legal sections.

Changes

  • Implemented Footer, Logo, and Separator components
  • Cleared out default Next.js footer content
  • Added branding section: CommunityRule logo, subtitle, contact email, social links (Bluesky + GitLab)
  • Added navigation section: Use cases, Learn, About (placeholder links)
  • Added legal section: © All rights reserved, Privacy Policy, Terms of Service, Cookies Settings
  • Integrated responsive layout system:
    • Mobile (320–639px): stacked vertical layout with touch-friendly spacing
    • Tablet (640–1023px): horizontal layout with adjusted spacing/typography
    • Desktop (1024px+): horizontal layout, side-by-side sections
  • Styled entirely with design tokens (--color-*, --spacing-*, --typography-*)
  • Ensured WCAG 2.1 AA compliance: semantic structure, ARIA labels, focus states, 44px+ touch targets
  • Optimized assets: SVG logo + Bluesky, PNG GitLab (with hover/focus states)

Screenshots

Screenshot 2025-07-29 at 10.37.37 AM.png Screenshot 2025-07-29 at 10.38.07 AM.png Screenshot 2025-07-29 at 10.38.27 AM.png

How to Test

  1. Run the app and scroll to the bottom — verify Footer renders on all pages.
  2. Resize the browser window and check breakpoints:
    • Mobile: stacked layout, centered branding
    • Tablet: hybrid layout with adjusted spacing
    • Desktop: horizontal sections side-by-side
  3. Verify links and icons: hover, focus, and active states.
  4. Confirm accessibility:
    • Keyboard navigation works across all links
    • Screen reader labels present
    • Color contrast meets WCAG AA
    • Touch targets ≥44px

Notes

  • Footer is self-contained and can be used in both marketing and application layouts.
  • Future-ready for additional links or theming (e.g. dark mode).
# Add Responsive Footer Component ## Overview This PR adds a **responsive, accessible footer** for CommunityRule. The footer adapts across mobile, tablet, and desktop breakpoints, serving as the primary navigation anchor and contact section. It uses design tokens for all styling and includes branding, navigation, and legal sections. ## Changes - Implemented **Footer**, **Logo**, and **Separator** components - Cleared out default Next.js footer content - Added **branding section**: CommunityRule logo, subtitle, contact email, social links (Bluesky + GitLab) - Added **navigation section**: Use cases, Learn, About (placeholder links) - Added **legal section**: © All rights reserved, Privacy Policy, Terms of Service, Cookies Settings - Integrated **responsive layout system**: - Mobile (320–639px): stacked vertical layout with touch-friendly spacing - Tablet (640–1023px): horizontal layout with adjusted spacing/typography - Desktop (1024px+): horizontal layout, side-by-side sections - Styled entirely with **design tokens** (`--color-*`, `--spacing-*`, `--typography-*`) - Ensured **WCAG 2.1 AA compliance**: semantic structure, ARIA labels, focus states, 44px+ touch targets - Optimized assets: SVG logo + Bluesky, PNG GitLab (with hover/focus states) ## Screenshots <img width="1445" alt="Screenshot 2025-07-29 at 10.37.37 AM.png" src="attachments/423b3b25-c1aa-408f-93a3-8c11b3adfe99"> <img width="976" alt="Screenshot 2025-07-29 at 10.38.07 AM.png" src="attachments/6cb4b3f6-bdde-49fc-b32a-123a0a92b842"> <img width="602" alt="Screenshot 2025-07-29 at 10.38.27 AM.png" src="attachments/7e592836-38eb-4d6c-ba42-a5f0c72b3e46"> ## How to Test 1. Run the app and scroll to the bottom — verify **Footer** renders on all pages. 2. Resize the browser window and check breakpoints: - Mobile: stacked layout, centered branding - Tablet: hybrid layout with adjusted spacing - Desktop: horizontal sections side-by-side 3. Verify **links and icons**: hover, focus, and active states. 4. Confirm **accessibility**: - Keyboard navigation works across all links - Screen reader labels present - Color contrast meets WCAG AA - Touch targets ≥44px ## Notes - Footer is self-contained and can be used in both **marketing** and **application** layouts. - Future-ready for additional links or theming (e.g. dark mode).
Screenshot 2025-07-29 at 10.37.37 AM.png
168 KiB
Screenshot 2025-07-29 at 10.38.07 AM.png
93 KiB
Screenshot 2025-07-29 at 10.38.27 AM.png
109 KiB
an.di self-assigned this 2025-07-29 16:39:20 +00:00
an.di added 5 commits 2025-07-29 16:39:20 +00:00
Desktop Footer 0539989be6
Tablet breakpoint added 47b0b0c48f
Mobile breakpoint added 4cf5034736
Added accessibility and interaction e0815084c2
Add postinstall script 79325f8f1b
an.di changed title from adilallo/FooterStart to Footer Component 2025-07-29 17:11:34 +00:00
an.di merged commit 6d0d51ee21 into main 2025-07-29 18:36:19 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
an.di (Andy DiLallo) ntnsndr (Nathan Schneider)
No Assignees an.di
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: CommunityRule/community-rule#2