feat(#803): add footer section to landing page for better navigation and user experience#809
feat(#803): add footer section to landing page for better navigation and user experience#809divyanshmrawal wants to merge 5 commits into
Conversation
📝 WalkthroughWalkthroughThe changes add a comprehensive footer to the landing page with three-column responsive grid displaying about information, quick links, and social media connections. Smooth scrolling behavior is implemented globally, the Download control is converted from button to anchor semantics, and scrolling behavior is made conditional based on the current route. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: defaults Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
landing-page/src/Pages/Footer/Footer.tsx (1)
19-19: Change Discord channel links to public invite URL.The Discord links at lines 19 and 104 use a channel-specific format (
https://discord.com/channels/1022871757289422898/1311271974630330388) that requires users to already be server members to access. Replace with the public invite link:https://discord.com/invite/C8wHmwtczs.All GitHub URLs (lines 50, 60, 70, 95) are valid and publicly accessible. The email link (line 88) is correctly formatted. Twitter and LinkedIn URLs follow standard format.
🧹 Nitpick comments (4)
frontend/src/layout/layout.tsx (1)
23-25: Consider documenting the conditional overflow behavior.The conditional
overflow-hiddenon the/homeroute likely supports full-page sections or fixed layouts, but the intent isn't immediately clear from the code alone.🔎 Suggested clarification
<div + {/* Disable scroll on home route for full-page anchor navigation */} className={`m-4 w-full ${location.pathname === '/home' ? 'overflow-hidden' : 'overflow-y-auto'}`} >landing-page/src/Pages/Footer/Footer.tsx (1)
30-134: Footer structure looks good; consider centralizing URLs.The three-column responsive grid with About, Quick Links, and Connect sections aligns well with the PR objectives. All external links correctly use
rel="noopener noreferrer"for security, and social icons includearia-labelattributes for accessibility.To improve maintainability, consider extracting the hardcoded URLs into constants at the top of the file:
🔎 Optional refactor to centralize URLs
+const FOOTER_LINKS = { + repository: 'https://github.com/AOSSIE-Org/PictoPy', + docs: 'https://github.com/AOSSIE-Org/PictoPy/blob/main/README.md', + contributing: 'https://github.com/AOSSIE-Org/PictoPy/blob/main/CONTRIBUTING.md', + email: 'mailto:aossie.oss@gmail.com', + github: 'https://github.com/AOSSIE-Org', + discord: 'https://discord.com/channels/1022871757289422898/1311271974630330388', + twitter: 'https://twitter.com/aossie_org', + linkedin: 'https://www.linkedin.com/company/aossie', +} as const; const Footer: React.FC = () => { return ( <footer className="relative bg-black text-white py-8 overflow-hidden"> {/* ... */} - <a href="https://github.com/AOSSIE-Org/PictoPy" target="_blank" rel="noopener noreferrer"> + <a href={FOOTER_LINKS.repository} target="_blank" rel="noopener noreferrer"> {/* Apply similar changes to other links */}landing-page/index.html (1)
7-7: Consider a more descriptive page title.The title "Landing-page" is functional but could be more descriptive and brand-focused for better SEO and user experience.
🔎 Suggested improvement
- <title>Landing-page</title> + <title>PictoPy - Intelligent Gallery Management</title>landing-page/src/index.css (1)
6-8: Add support forprefers-reduced-motionto respect user accessibility preferences.The global smooth scrolling enhances navigation but should respect users' motion preferences for accessibility.
🔎 Recommended accessibility enhancement
html { scroll-behavior: smooth; } + + @media (prefers-reduced-motion: reduce) { + html { + scroll-behavior: auto; + } + }
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
frontend/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (7)
docs/backend/backend_python/openapi.json(1 hunks)frontend/src/layout/layout.tsx(1 hunks)landing-page/index.html(1 hunks)landing-page/src/Pages/Footer/Footer.tsx(2 hunks)landing-page/src/Pages/Landing page/Home1.tsx(2 hunks)landing-page/src/Pages/pictopy-landing.tsx(1 hunks)landing-page/src/index.css(1 hunks)
🔇 Additional comments (6)
docs/backend/backend_python/openapi.json (2)
2204-2214: Verify the metadata schema change is intentional.The
metadataproperty in theImageInClusterschema is defined as a generic object or null with no explicit property constraints. According to the AI summary,additionalProperties: truewas removed from this definition.This schema change loosens the metadata structure validation and may impact API contract expectations. Since this OpenAPI backend schema change appears unrelated to the PR objective of adding a landing page footer, please confirm:
- Is this metadata schema change intentional and required?
- Does the frontend footer feature depend on this backend modification?
- Are there corresponding backend Python model changes that triggered this schema regeneration?
1120-1128: Theopenapi.jsonfile has not been modified in this PR. The schema structure at lines 1120-1128 (including theallOfwrapping) already existed in the previous commit and remains unchanged. This review comment does not apply to the current changes, which are limited to website footer modifications.Likely an incorrect or invalid review comment.
landing-page/src/Pages/Footer/Footer.tsx (1)
2-2: LGTM: Icon imports are appropriate.The expanded icon imports support the new footer sections effectively.
landing-page/src/Pages/pictopy-landing.tsx (1)
22-22: LGTM: Anchor target properly established.The
id="Download"attribute correctly enables in-page anchor navigation from the hero section, aligning with the global smooth scrolling behavior and improving user experience.landing-page/src/Pages/Landing page/Home1.tsx (2)
38-48: LGTM: Download anchor correctly targets in-page section.The conversion from button to anchor with
href="#Download"properly enables in-page navigation while preserving all motion interactions.Minor note: The
cursor-pointerclass is redundant since anchors have pointer cursor by default, but this is harmless and may be intentional for consistency.
51-63: LGTM: External docs link properly secured.The anchor correctly links to the documentation site with appropriate security attributes (
target="_blank"andrel="noopener noreferrer").
|
Hi, I’m a prospective GSoC contributor. |
github-actions
Bot
added
documentation
|
Thank you for the review! |
|
I tried to reproduce this issue on the current main branch by running the landing page locally, but the text clipping no longer appears. It seems this may already be resolved. Please let me know if there is a specific page or screen where the problem is still visible. |
3 participants
📄 PR Description
📝 Summary
This pull request adds a footer section to the landing page of PictoPy.
Previously, users reaching the bottom of the page had no way to find contact details, social links, or project-related information.
The new footer improves usability, credibility, and overall user experience.
❌ Problem (Current Behavior)
The landing page had no footer
Users could not find:
Navigation felt incomplete at the end of the page
✅ Solution (What I Did)
Added a responsive footer at the bottom of the landing page
Included:
Ensured the footer aligns with the existing UI and layout
🖼️ Screenshots / Demo
👉 Before Screenshot:
👉 After Screenshot:
🧪 How to Test
📌 Related Issue
Closes #803
Summary by CodeRabbit
Release Notes
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.