Add Contact Page with Social Links and Message Form #75
Conversation
WalkthroughA new Contact page is introduced to the frontend, featuring social links and a feedback form. Supporting components for navigation, footer, and notifications are added, and routing is updated to include the Contact page. The HomePage is refactored to use the new navigation and footer components. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TopNav
participant App
participant ContactPage
participant FeedbackForm
participant Toaster
User->>TopNav: Navigates to /contact via navigation
TopNav->>App: Route change to /contact
App->>ContactPage: Render ContactPage
ContactPage->>FeedbackForm: Render FeedbackForm
User->>FeedbackForm: Submits feedback form
FeedbackForm->>Toaster: Show success/error notification
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Possibly related issues
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![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
🧹 Nitpick comments (5)
Frontend/src/components/TopNav.tsx (1)
5-5: Remove unused import.The
Usersicon is imported but not used in this component.- Users,Frontend/src/pages/HomePage.tsx (1)
13-15: Remove unused imports after refactoring.These imports are no longer needed since they're now handled by the TopNav component:
-import { MainNav } from "../components/main-nav"; -import { ModeToggle } from "../components/mode-toggle"; -import { UserNav } from "../components/user-nav";Frontend/src/components/FeedbackForm.tsx (2)
32-35: Fix typo in role option and improve consistency.There's a typo in the role option - "creater" should be "creator". Also, consider adding icons to role options for visual consistency with feedback types.
const rolesTypes = [ - { value: "creater", label: "Content Creator" }, + { value: "creator", label: "Content Creator" }, { value: "brand/agency", label: "Brand/Agency" }, ]
148-148: Incorrect placeholder text in role selection.The placeholder text for the role selection says "Select message type" but should say "Select your role" or similar to match the field purpose.
<SelectTrigger> - <SelectValue placeholder="Select message type" /> + <SelectValue placeholder="Select your role" /> </SelectTrigger>Frontend/src/pages/Contact.tsx (1)
59-59: Consider extracting magic number for better maintainability.The
mt-30class uses a large spacing value that might be better defined as a CSS custom property or design token for consistency across the application.
📜 Review details
Configuration used: CodeRabbit UI
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 (8)
Frontend/package.json(1 hunks)Frontend/src/App.tsx(2 hunks)Frontend/src/components/FeedbackForm.tsx(1 hunks)Frontend/src/components/Footer.tsx(1 hunks)Frontend/src/components/TopNav.tsx(1 hunks)Frontend/src/main.tsx(1 hunks)Frontend/src/pages/Contact.tsx(1 hunks)Frontend/src/pages/HomePage.tsx(4 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
Frontend/src/components/FeedbackForm.tsx (6)
Frontend/src/components/ui/card.tsx (5)
Card(80-80)CardHeader(81-81)CardTitle(83-83)CardDescription(84-84)CardContent(85-85)Frontend/src/components/ui/label.tsx (1)
Label(25-25)Frontend/src/components/ui/input.tsx (1)
Input(21-21)Frontend/src/components/ui/select.tsx (5)
Select(150-150)SelectTrigger(153-153)SelectValue(152-152)SelectContent(154-154)SelectItem(156-156)Frontend/src/components/ui/textarea.tsx (1)
Textarea(18-18)Frontend/src/components/ui/button.tsx (1)
Button(54-54)
🔇 Additional comments (14)
Frontend/package.json (1)
41-41: Verify the sonner package version and security.The addition of the
sonnerpackage for toast notifications looks good and aligns with the PR objectives. However, please verify that version^2.0.5is the latest stable version and check for any known security vulnerabilities.What is the latest version of the sonner npm package and are there any known security vulnerabilities in version 2.0.5?Frontend/src/components/TopNav.tsx (1)
13-41: Well-structured navigation component.The TopNav component implementation is clean and follows React best practices. The fixed positioning with backdrop blur creates a modern navigation experience, and the responsive design with conditional button visibility is well-implemented.
Frontend/src/components/Footer.tsx (1)
5-55: Excellent implementation with proper cleanup.The Footer component is well-architected with:
- Proper use of IntersectionObserver for scroll-based animations
- Correct cleanup logic to prevent memory leaks
- Smooth transition animations
- Responsive design
The implementation follows React best practices and handles edge cases appropriately.
Frontend/src/pages/HomePage.tsx (2)
17-18: Great refactoring to use reusable components.The integration of TopNav and Footer components significantly improves code maintainability and consistency across the application.
83-83: Clean component integration.The replacement of inline header and footer markup with reusable components makes the HomePage cleaner and more maintainable.
Also applies to: 164-164
Frontend/src/App.tsx (1)
18-18: Proper route integration for the new Contact page.The ContactPage import and route addition are correctly implemented and placed in the appropriate public routes section.
Also applies to: 34-34
Frontend/src/main.tsx (1)
7-7: Clean integration of toast notifications.The Toaster component is properly imported and positioned in the component tree, enabling toast notifications for the new feedback form functionality.
Also applies to: 12-12
Frontend/src/components/FeedbackForm.tsx (3)
38-67: Well-implemented form submission with proper error handling.The form submission logic is well-structured with proper async/await handling, loading states, success/error feedback via toasts, and form reset on success. The validation approach using required attributes is appropriate for this use case.
100-181: Excellent form accessibility and user experience.The form implementation follows accessibility best practices with proper labels, controlled components, and clear validation. The UI is well-structured with responsive design and appropriate visual feedback during submission.
43-43: The previousrginvocation failed due to an unrecognized file type flag. Let’s search for both variants of the env var name across all files instead:#!/bin/bash # Search across the entire repo for both the potentially misspelled and correct env var names rg "VITE_FROMSPEE_ID|VITE_FORMSPREE_ID"Frontend/src/pages/Contact.tsx (4)
17-50: Well-implemented scroll-based animation component.The AnimatedSection component properly uses framer-motion hooks with appropriate performance optimizations like
once: trueand margin-based triggering. The animation variants are smooth and well-configured.
106-116: Excellent implementation of social media links with proper security attributes.The social media links are well-implemented with proper security attributes (
target="_blank",rel="noopener noreferrer"), smooth animations, and good visual design with hover effects and external link indicators.Also applies to: 122-132, 138-148, 154-164
53-182: Well-structured contact page with excellent user experience.The contact page implementation demonstrates excellent structure with proper component composition, responsive design, accessibility features, and smooth animations. The integration of TopNav, Footer, and FeedbackForm components creates a cohesive user experience.
103-103: Verify social media links are accessible.Please verify that these social media links are valid and accessible. Some appear to be placeholder URLs that should be updated with actual company/project links.
#!/bin/bash # Test accessibility of social media links echo "Testing social media link accessibility..." # Test GitHub link curl -I -s "https://github.com/AOSSIE-Org/InPactAI" | head -1 # Test Discord link (may require authentication) curl -I -s "https://discord.com/channels/1022871757289422898/1345044736515379210" | head -1 # Test Twitter link curl -I -s "https://twitter.com/inpact_ai" | head -1 # Test LinkedIn link curl -I -s "https://linkedin.com/company/inpact-ai" | head -1Also applies to: 119-119, 135-135, 151-151
Closes #72
📝 Description
The current website includes a Contact page route, but it is currently blank and non-functional. To enhance user engagement and provide a way to reach out or connect with the team/community, we need to implement a meaningful Contact page. This page should serve as a central hub for social connections and direct communication.
🔧 Changes Made
-> Introduce a new landing layout for the Contact page that includes:
-> GitHub link (for viewing/contributing to the codebase)
-> Discord link (to join the community)
-> Embed a form allowing users to send messages directly:
-> The submitted message will be relayed to a Discord channel via webhook or bot integration.
-> Include basic fields: Name, Email (optional), Message.
-> Validation and error handling should be implemented for form submission.
📷 Screenshots or Visual Changes (if applicable)
Screen.Recording.2025-06-26.at.00.06.47.mov
🤝 Collaboration
N/A
✅ Checklist
Summary by CodeRabbit
New Features
Refactor