Add responsive contact form with animated background

[SHIVA00202]

User description

Description

This pull request adds a fully responsive contact form with an animated background. The form includes fields for Name, Email, and Message, along with a submit button that shows a loading state when sending messages. The design is visually enhanced with gradient and glow effects, blurred overlays, and a mobile-friendly layout, ensuring a smooth and modern user experience across all screen sizes.

---

Type of Change

• Bug fix
• New feature
• Code refactor
• Documentation update
• ✅Test addition or update
• ⚙️Other (please describe):

---

Screenshots (if applicable)

Add screenshots or recordings to help reviewers understand the change.

---

Additional Context

@kris70lesgo I have designed the contact form
and please add the desired Labels like Hacktoberfest
#Hacktoberfest #Hacktoberfest-accepted #frontend #bugfix #UI

---

PR Type

Enhancement

---

Description

• Add responsive contact form page with animated Aurora background

• Implement form state management with success/error feedback

• Update navigation and footer to link to new contact form page

• Add react-router-dom dependency to package.json

---

Diagram Walkthrough

flowchart LR
  A["New Contact Form Page"] -->|"Uses"| B["Aurora Background Component"]
  A -->|"Manages"| C["Form State & Validation"]
  D["Navigation Component"] -->|"Links to"| A
  E["Footer Component"] -->|"Links to"| A
  F["package.json"] -->|"Adds"| G["react-router-dom Dependency"]

Loading

File Walkthrough

	Relevant files
Enhancement	page.tsx Create responsive contact form page                                            src/app/contact-form/page.tsx New contact form page with Name, Email, and Message fields Implements form submission with loading and success states Integrates Aurora animated background component Styled with dark theme, backdrop blur, and gradient button +123/-0  footer.tsx Update footer with contact form link                                          src/components/footer.tsx Convert to client component with "use client" directive Replace hardcoded links with dynamic navigation items mapping Add Link component from next/link for proper routing Add contact form link to navigation items Improve code organization with section comments +57/-12  nav.tsx Link Contact nav item to form page                                              src/components/nav.tsx Update Contact navigation link from empty string to /contact-form Enable navigation to the new contact form page +1/-1
Dependencies	package.json Add react-router-dom dependency                                                    package.json Add react-router-dom dependency version ^7.9.4 +1/-0
Bug fix	button.tsx Fix use client directive typo                                                        src/components/button.tsx Fix typo in 'use client' directive (remove leading 'd') +1/-1
Formatting	usage-tracker.tsx Minor formatting adjustment                                                            src/components/usage-tracker.tsx Add blank line in useEffect hook for code formatting +1/-0

---

[vercel]

@SHIVA00202 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	Sensitive information exposure Description: The form submission currently logs user-provided name, email, and message to the console, which can leak sensitive PII in production logs. page.tsx [23-29] Referred Code console.log({ name, email, message }); setTimeout(() => { setSuccess(true); setName(""); setEmail(""); setMessage(""); }, 1000);
Ticket Compliance
⚪	🎫 No ticket provided - [ ] Create ticket/issue <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Remove the unnecessary react-router-dom dependency The PR adds the react-router-dom dependency, which is redundant in a Next.js application. This dependency should be removed to avoid increasing bundle size and potential conflicts, as the project already uses Next.js's native routing. Examples: package.json [44] "react-router-dom": "^7.9.4", src/components/footer.tsx [4-62] import Link from "next/link"; import { Twitter, Facebook, Linkedin } from "lucide-react"; const Footer: React.FC = () => { const navItems = [ { name: "Features", link: "/" }, { name: "AI Generator", link: "/ai-generator" }, { name: "Contact", link: "/contact-form" }, ]; ... (clipped 49 lines) Solution Walkthrough: Before: // package.json "dependencies": { ... "react": "^19.0.0", "react-dom": "^19.0.0", "react-router-dom": "^7.9.4", // Unnecessary dependency "react-use-measure": "^2.1.7", ... } // src/components/footer.tsx import Link from "next/link"; ... <Link href="/contact-form">Contact Us</Link> // Using Next.js routing After: // package.json "dependencies": { ... "react": "^19.0.0", "react-dom": "^19.0.0", // react-router-dom is removed "react-use-measure": "^2.1.7", ... } // src/components/footer.tsx // No changes needed, as the project already correctly uses Next.js routing. import Link from "next/link"; ... <Link href="/contact-form">Contact Us</Link> Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that react-router-dom is a redundant dependency in a Next.js project, which has its own built-in routing, and its removal improves bundle size and maintainability.	Medium
Possible issue	Fix race condition in form submission Refactor the form submission logic by wrapping setTimeout in a Promise and using await to ensure the loading state is managed correctly and prevent race conditions. src/app/contact-form/page.tsx [22-34] try { - console.log({ name, email, message }); - setTimeout(() => { - setSuccess(true); - setName(""); - setEmail(""); - setMessage(""); - }, 1000); + await new Promise((resolve, reject) => { + // This simulates an API call. + // In a real scenario, you would replace this with a fetch() call. + console.log({ name, email, message }); + setTimeout(() => { + // You can simulate an error by uncommenting the next line + // if (Math.random() > 0.5) return reject(new Error("Simulated API error")); + resolve(true); + }, 1000); + }); + + setSuccess(true); + setName(""); + setEmail(""); + setMessage(""); } catch { setError("Something went wrong."); } finally { setLoading(false); } Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a race condition where the loading state is reset prematurely due to incorrect asynchronous handling, and the proposed fix using a Promise is accurate.	Medium
Update

[SHIVA00202]

@kris70lesgo I’ve successfully implemented the latest changes, including the responsive contact form with the animated background.
I’d really appreciate it if you could review the pull request, and if everything looks good, kindly add the hacktoberfest-accepted label.

[kris70lesgo]

@SHIVA00202 i have added the labels there few checks i have to do before merging

[SHIVA00202]

@kris70lesgo ok sir

[SHIVA00202]

@kris70lesgo if Everything appears to be working correctly then, Please merge the changes.

[kris70lesgo]

@SHIVA00202 there few checks i have to do before merging
if u are worried about hacktoberfest dont worry it will be accepted

[SHIVA00202]

@kris70lesgo pls merge it as it is 30th of oct

[kris70lesgo]

@SHIVA00202 the design is different for what we had in our minds we are designing rn in figma so it will take time
i assume u are in hurry because of hactoberfest dont worry i have added the hacktoberfest labels if it doesnt show accepeted then tell me and after being accepted they have review period of 7 days so just wait