added about page

[Samridhi-2007]

issue #44

User description

Description:
This PR introduces a new About page (/about/page.tsx) to the application with the following updates:

Features Added:
Fully responsive About page compatible with desktop and mobile layouts.
Smooth entrance and hover animations on all sections using Framer Motion for a professional look.
Feature cards with icon rotation, lift, and glow effects on hover.
Gradient header text and consistent color theme matching the app’s dark mode palette.
Mission section with smooth fade-in animation for emphasis.

CTA buttons:
"Get Started →" with gradient styling.
"Go to Home" button with icon and subtle hover scaling.

Added a crisp footer:
Thin border separation.
Light gray text consistent with theme.
Responsive and minimalistic design.

Purpose:
Enhances user experience by providing a visually engaging, informative About page while maintaining the app’s responsive and dark-themed UI.

Files Added/Modified
app/about/page.tsx – main About page component

Testing Notes:
Page tested across multiple screen sizes for responsiveness.
Animations verified for smooth transitions and hover effects.
CTA buttons navigate correctly.

Screenshot:

if any changes needed let me know

---

PR Type

Enhancement, Documentation

---

Description

• Added new About page with animated sections and feature cards

• Updated navigation to include About page link

• Upgraded dependencies (@supabase/supabase-js, @lottiefiles/dotlottie-react)

• Added react-icons package for icon components

---

Diagram Walkthrough

flowchart LR
  A["New About Page"] --> B["Feature Cards"]
  A --> C["Mission Section"]
  A --> D["CTA Buttons"]
  E["Navigation"] --> F["About Link Added"]
  G["Dependencies"] --> H["Package Updates"]

Loading

File Walkthrough

	Relevant files
Enhancement	page.tsx New About page with animated features and mission                src/app/about/page.tsx Created new About page component with Framer Motion animations Implemented four feature cards with hover effects and icon rotations Added mission section with fade-in animation Included CTA buttons for navigation and footer with copyright +144/-0  nav.tsx Added About page link to navigation                                            src/components/nav.tsx Updated About navigation item to link to /about route Fixed code formatting and spacing inconsistencies Improved auth state change listener cleanup +21/-10
Dependencies	package.json Updated dependencies and added react-icons package              package.json Upgraded @supabase/supabase-js from v2.50.0 to v2.75.0 Upgraded @lottiefiles/dotlottie-react from v0.14.2 to v0.14.4 Added react-icons v5.5.0 dependency +3/-2
Formatting	page.tsx Code formatting improvements in sign page                                src/app/sign/page.tsx Fixed code formatting and indentation Cleaned up whitespace and improved code consistency +10/-8

---

[vercel]

Someone 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
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
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
Possible issue	Use Next.js Link for navigation Replace standard tags with Next.js's Link component for internal navigation to prevent full page reloads and enable client-side routing. src/app/about/page.tsx [94-109] -<a +import Link from "next/link"; +... +<Link href="/" className="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full text-lg font-semibold shadow-lg hover:shadow-pink-500/30 transition-all" > Get Started → -</a> +</Link> -<motion.a - href="/" - whileHover={{ scale: 1.05 }} - whileTap={{ scale: 0.95 }} - className="flex items-center gap-2 px-6 py-3 border border-purple-400/60 rounded-full text-lg font-semibold text-purple-300 hover:bg-purple-500/10 hover:text-white transition-all" -> - <FaHome className="text-purple-400" /> - Go to Home -</motion.a> +<Link href="/" passHref legacyBehavior> + <motion.a + whileHover={{ scale: 1.05 }} + whileTap={{ scale: 0.95 }} + className="flex items-center gap-2 px-6 py-3 border border-purple-400/60 rounded-full text-lg font-semibold text-purple-300 hover:bg-purple-500/10 hover:text-white transition-all" + > + <FaHome className="text-purple-400" /> + Go to Home + </motion.a> +</Link> [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that using <a> tags for internal navigation in Next.js is an anti-pattern and proposes using the Link component, which is a crucial performance and UX best practice.	Medium
High-level	Separate page content from presentation To improve maintainability and scalability, move the hardcoded text content from the new About page's JSX into a separate data structure or configuration file. This separates the page's content from its presentation logic. Examples: src/app/about/page.tsx [22-30] <h1 className="text-4xl md:text-5xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-500"> About AsHelp </h1> <p className="text-lg text-gray-300 leading-relaxed"> AsHelp is your one-stop platform for seamless assignment and presentation assistance. We deliver verified, plagiarism-free, and AI-free solutions with a professional touch — designed for students and professionals who value quality and authenticity. </p> src/app/about/page.tsx [78-84] <h2 className="text-3xl md:text-4xl font-semibold mb-4">Our Mission</h2> <p className="text-gray-300 leading-relaxed"> Our mission is to empower learners and professionals through authentic and high-quality academic support. With a secure system, interactive forms, and expert guidance, AsHelp makes it easier to focus on what matters most — learning and creativity. </p> Solution Walkthrough: Before: const About = () => { return ( <section> <motion.div> <h1>About AsHelp</h1> <p> AsHelp is your one-stop platform for seamless assignment and presentation assistance... </p> </motion.div> <div className="grid"> {features.map((feature) => ( ... ))} </div> <motion.div> <h2>Our Mission</h2> <p>Our mission is to empower learners and professionals...</p> </motion.div> </section> ); }; After: const pageContent = { header: { title: "About AsHelp", description: "AsHelp is your one-stop platform...", }, mission: { title: "Our Mission", description: "Our mission is to empower learners...", }, // ... other content }; const About = () => { return ( <section> <h1>{pageContent.header.title}</h1> <p>{pageContent.header.description}</p> {/* ... render other content from the data object */} </section> ); }; Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies hardcoded text in the new About page and proposes a valid architectural improvement by separating content from presentation, which enhances maintainability.	Low
Update