feat: add Privacy Policy and Terms & Conditions pages#426
Open
vv-verse wants to merge 1 commit into
Open
Conversation
- Add reusable LegalPageLayout component (src/components/legal/) - Add PrivacyPolicy page at /privacy-policy - Add TermsAndConditions page at /terms-and-conditions - Register both routes in Router.tsx - Add footer navigation links with FaShieldAlt and FaFileContract icons - Consistent design with existing pages (motion, dark mode, Tailwind)
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughThe PR adds Privacy Policy and Terms & Conditions pages to the application. A reusable ChangesLegal Pages Feature
🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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 |
![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: 1
🧹 Nitpick comments (1)
src/components/Footer.tsx (1)
86-100: 💤 Low valueInconsistent indentation in new footer links.
The new Privacy Policy and Terms & Conditions links (lines 86-100) appear to have inconsistent indentation compared to the existing Contact Us and About links (lines 70-84). While this doesn't affect functionality, maintaining consistent formatting improves code readability and maintainability.
♻️ Proposed fix for consistent formatting
Adjust the indentation to match the existing links:
- - <Link - to="/privacy-policy" - className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" -> - <FaShieldAlt className="h-3.5 w-3.5" /> - Privacy Policy -</Link> - -<Link - to="/terms-and-conditions" - className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" -> - <FaFileContract className="h-3.5 w-3.5" /> - Terms & Conditions -</Link> + + <Link + to="/privacy-policy" + className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" + > + <FaShieldAlt className="h-3.5 w-3.5" /> + Privacy Policy + </Link> + + <Link + to="/terms-and-conditions" + className="inline-flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" + > + <FaFileContract className="h-3.5 w-3.5" /> + Terms & Conditions + </Link>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/Footer.tsx` around lines 86 - 100, The new Link blocks for Privacy Policy and Terms & Conditions in the Footer component have inconsistent indentation; reformat the JSX so the <Link ...> elements (the ones using FaShieldAlt and FaFileContract) match the same indentation/style as the existing Contact Us and About links—align opening tags, props, and children lines consistently, preserve the className and icon usages, and ensure closing tags line up with the other link blocks for readability.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/legal/LegalPageLayout.tsx`:
- Around line 34-40: The LegalPageLayout component currently computes the "Last
updated" date with new Date(), which is misleading; update the LegalPageLayout
props/interface to accept a lastUpdated: string prop, replace the new Date()
usage in the render (the motion.p that prints "Last updated") to display the
passed lastUpdated prop instead, and update the page components that use
LegalPageLayout (e.g., PrivacyPolicy.tsx and TermsAndConditions.tsx) to pass the
canonical last updated string (e.g., "January 1, 2025") when rendering the
layout.
---
Nitpick comments:
In `@src/components/Footer.tsx`:
- Around line 86-100: The new Link blocks for Privacy Policy and Terms &
Conditions in the Footer component have inconsistent indentation; reformat the
JSX so the <Link ...> elements (the ones using FaShieldAlt and FaFileContract)
match the same indentation/style as the existing Contact Us and About
links—align opening tags, props, and children lines consistently, preserve the
className and icon usages, and ensure closing tags line up with the other link
blocks for readability.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: b1d21773-a601-483f-a6e5-b8bd5dab9ae3
📒 Files selected for processing (5)
src/Routes/Router.tsxsrc/components/Footer.tsxsrc/components/legal/LegalPageLayout.tsxsrc/pages/PrivacyPolicy/PrivacyPolicy.tsxsrc/pages/TermsAndConditions/TermsAndConditions.tsx
Comment on lines
+34
to
+40
| Last updated:{" "} | ||
| {new Date().toLocaleDateString("en-US", { | ||
| year: "numeric", | ||
| month: "long", | ||
| day: "numeric", | ||
| })} | ||
| </motion.p> |
Contributor
There was a problem hiding this comment.
Dynamic date computation is misleading for legal pages.
Computing "Last updated" using new Date() means the date will always show today, not the actual last update date of the legal content. This is misleading for users and potentially problematic for legal compliance, as these dates should reflect when the policy was genuinely last modified.
📅 Proposed fix: Accept lastUpdated as a prop
Update the interface to accept a lastUpdated string:
interface LegalPageLayoutProps {
title: string;
intro: string;
sections: Section[];
+ lastUpdated: string;
}Then use the prop instead of computing the date:
- Last updated:{" "}
- {new Date().toLocaleDateString("en-US", {
- year: "numeric",
- month: "long",
- day: "numeric",
- })}
+ Last updated: {lastUpdated}Update both page components to pass the actual last updated date:
// In PrivacyPolicy.tsx and TermsAndConditions.tsx
<LegalPageLayout
title="..."
intro="..."
sections={sections}
lastUpdated="January 1, 2025"
/>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/legal/LegalPageLayout.tsx` around lines 34 - 40, The
LegalPageLayout component currently computes the "Last updated" date with new
Date(), which is misleading; update the LegalPageLayout props/interface to
accept a lastUpdated: string prop, replace the new Date() usage in the render
(the motion.p that prints "Last updated") to display the passed lastUpdated prop
instead, and update the page components that use LegalPageLayout (e.g.,
PrivacyPolicy.tsx and TermsAndConditions.tsx) to pass the canonical last updated
string (e.g., "January 1, 2025") when rendering the layout.
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
1 participant
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.
Summary
Adds Privacy Policy and Terms & Conditions pages with reusable layout architecture and footer navigation links.
Closes #420
Changes Made
Added reusable layout component:
src/components/legal/LegalPageLayout.tsxAdded Privacy Policy page:
src/pages/PrivacyPolicy/PrivacyPolicy.tsxAdded Terms & Conditions page:
src/pages/TermsAndConditions/TermsAndConditions.tsxAdded routes for:
/privacy-policy/terms-and-conditionssrc/Routes/Router.tsxAdded footer navigation links:
src/components/Footer.tsxAdded responsive layout, dark mode support, and Framer Motion animations consistent with the existing UI
Architecture Decision
Both legal pages shared nearly identical:
layout structure
hero section
animations
responsive styling
Instead of duplicating large JSX blocks across multiple files, a reusable:
component was introduced to improve:
maintainability
consistency
readability
component reuse
Each page now only contains page-specific content and configuration.
Design Consistency
Consistent with existing Tailwind styling
Framer Motion animations aligned with existing pages
Full dark mode support
Responsive layout across screen sizes
Testing
/privacy-policyrenders correctly/terms-and-conditionsrenders correctlyFooter links navigate properly
Dark mode works on both pages
npm run buildcompletes successfullyScreenshots
##Before :
##After :
Type of Change
New feature
UI enhancement
Code refactor
Summary by CodeRabbit