ResumeIQ — Fictional Resume Optimization SaaS Landing Page 📝🧠

A fictional SaaS landing page for an AI-powered resume optimization tool. Built as a frontend portfolio project to demonstrate real-world React skills, modern UI/UX patterns, and production-level component architecture.

---

🔗 Live Demo

🌐View Live Site

---

📸 Preview

Desktop View 🖥

Mobile View 📱

---

💡 About The Project

ResumeIQ is a fictional SaaS marketing landing page designed to mirror the quality and structure of real-world startup landing pages. The project covers a full user journey — from hero section to pricing, registration, and FAQ — with attention to responsiveness, animations, and user experience.

---

⚙️ Tech Stack

Technology	Version	Purpose
React	19	Component-based UI
Vite	6	Build tool & dev server
Tailwind CSS	4	Utility-first styling
Framer Motion	12	Scroll & entrance animations
React Hook Form	7	Form state & validation
Swiper.js	11	Testimonials carousel
Random User API	—	Testimonial profile pictures
React International Phone	3	Phone input with dial codes
React Icons	5	Icon library

---

✨ Key Features

• Fully Responsive — Mobile-first design across all screen sizes
• Scroll Animations — Entrance animations triggered on scroll using Framer Motion
• Active Section Detection — Navbar highlights current section using scroll position
• Form Validation — Full validation using React Hook Form + manual validation for custom inputs
• Floating Label Inputs — Custom animated floating labels on all form fields
• Custom Animated Checkbox — Morphing checkbox animation for Terms & Conditions
• Testimonials Carousel — Auto-playing carousel with custom navigation using Swiper.js
• Live API Integration — Fetches real profile pictures from Random User API for testimonials
• FAQ Accordion — Smooth animated accordion using CSS grid technique
• Pricing → Register Flow — Plan selection pre-selects the form dropdown via lifted state
• Mobile Hamburger Menu — Animated hamburger with full-screen overlay
• Scroll To Top Button — Animated floating button with entrance/exit transitions

---

🧠 React Concepts Demonstrated

Concept	Where Used
useState	All components
useEffect	Scroll detection, API fetch, plan sync
useRef + useInView	Scroll-triggered animations
Lifting State Up	Pricing → App → Register
Controlled Inputs	Plan select dropdown
Cross-component Communication	selectedPlan prop
Custom Hooks Pattern	useSwiper in Testimonials
Form Validation	React Hook Form + manual
AnimatePresence	Scroll to top button enter/exit
Third Party Integration	Swiper, PhoneInput, React Hook Form
Stagger Animations	Card entrance animations in all sections

---

📁 Project Structure

src/
└── assets/
    └── components/
        ├── Navbar.jsx        # Fixed navbar with active section detection
        ├── Hero.jsx          # Landing section with animated stats
        ├── HowItWorks.jsx    # 3-step process cards
        ├── Features.jsx      # 6 feature cards with hover effects
        ├── Pricing.jsx       # 3 pricing plans with plan selection
        ├── Testimonials.jsx  # Auto-playing Swiper carousel
        ├── Register.jsx      # Form with full validation
        ├── FAQ.jsx           # Animated accordion
        └── Footer.jsx        # Links and social icons
public/
└── images/
    ├── logo.png
    └── resume-logo.png
index.html                    # SEO meta tags

---

🚀 Getting Started

Prerequisites

• Node.js v18+
• npm

Installation

# Clone the repository
git clone https://github.com/jega1312/resumeiq.git

# Navigate into the project
cd resumeiq

# Install dependencies
npm install

# Start development server
npm run dev

Build for Production

npm run build

---

📦 NPM Packages Used

npm install tailwindcss @tailwindcss/vite
npm install react-hook-form
npm install swiper
npm install react-international-phone
npm install react-icons
npm install motion

Note: React, ReactDOM, and Vite are scaffolded automatically via npm create vite@latest and do not require separate installation.

---

🎨 Design Decisions

• Dark Theme — Deep navy gradient #03001C → #1b1042 for a modern SaaS feel
• Purple/Blue Accent — Consistent purple-500 → blue-600 gradient for CTAs and highlights
• Inter Font — Clean, professional typeface loaded via local font files
• CSS Grid Accordion — Smooth height animation using grid-template-rows transition
• JS Floating Labels — Custom floating label pattern compatible with React Hook Form

---

👨‍💻 Author

Jegathiswaran Thiaghu

---

📝 License

This project is open source and available under the MIT License ⚖.