🚀 Care Connect UI Platform

Compassionate, professional caregiving — presented as a modern, animated landing experience.

🌟 Overview

Care Connect is a single‑page React application that showcases caregiving services with a polished, mobile‑first UI. It features rich animations, a responsive layout, and a WhatsApp‑enabled request form so families can quickly connect with a caregiver.

✨ Key Features

• Beautiful, animated hero with synchronized loading experience
• Sticky, transforming navbar (glass → solid) with smooth mobile slide‑out menu
• About, Services, Team, and Gallery sections with micro‑interactions (Framer Motion)
• Responsive team carousel with autoplay, pause on hover, and breakpoints
• “Request a Caregiver” form that composes a structured WhatsApp message
• Custom cursor/tooltip trail for subtle delight
• Tailwind CSS v4 theme tokens with custom brand colors

🛠 Tech Stack

• Frontend
  • React 19, Vite 6
  • React DOM 19, Strict Mode rendering
• UI & Styles
  • Tailwind CSS v4 with @tailwindcss/vite plugin
  • Material Tailwind (Typography in Footer)
  • Font Awesome, lucide‑react icon sets
• Animations & UX
  • Framer Motion
  • react‑intersection‑observer (in‑view animations)
• Tooling
  • ESLint 9
  • Vite dev/build/preview scripts

🧠 Architecture / How It Works

The app is a client‑only SPA. It renders a sequence of themed sections and enhances them with intersection‑based and hover animations.

High‑level flow:

1. index.html mounts #root → src/main.jsx bootstraps React and global styles.
2. src/App.jsx composes sections: Tooltip, Navbar, Hero, AboutUs, OurServices, People, RequestCareGiver, Footer.
3. The Request form builds a structured message and opens a WhatsApp deep link (wa.me) to contact the team.

There is no backend in this repository; contact requests are sent via WhatsApp to a configured number.

📂 Project Structure

F:/CareGiverWebApp
├─ index.html                 # App entry (Vite)
├─ package.json               # Scripts and dependencies
├─ vite.config.js             # Vite + Tailwind plugin config
├─ eslint.config.js           # ESLint configuration
├─ public/
│  └─ vite.svg
└─ src/
   ├─ main.jsx               # React bootstrap (StrictMode)
   ├─ App.jsx                # Page composition
   ├─ index.css              # Tailwind v4 + custom theme tokens
   ├─ assets/                # Images, video, logo
   └─ components/
      ├─ Navbar.jsx          # Sticky/animated navbar + mobile drawer
      ├─ Hero.jsx            # Video background hero + loader
      ├─ AboutUs.jsx         # Mission, stats, animated imagery
      ├─ OurServices.jsx     # Services grid with motion cards
      ├─ People.jsx          # Responsive team carousel
      ├─ Gallery.jsx         # (If used) visual gallery section
      ├─ RequestCareGiver.jsx# WhatsApp‑enabled request form
      ├─ Footer.jsx          # Footer with link groups and socials
      ├─ Tooltip.jsx         # Custom cursor/tooltip accent
      └─ AnimatedImage.jsx   # Reusable in‑view animated image wrapper

⚙️ Setup & Installation

Prerequisites

• Node.js 18+ (or 20+ recommended)
• npm 9+

Install

npm install

Run in development

npm run dev

Build for production

npm run build

Preview the production build

npm run preview

🚀 Usage

• Start the dev server and open the printed local URL.
• Navigate using the navbar (anchors: #about, #services, #knowus, #contact).
• In “Request a Care Giver”, fill in details and click the button — a WhatsApp chat opens with a pre‑filled, formatted request.

Note: Update the WhatsApp number in src/components/RequestCareGiver.jsx (whatsappNumber) to your organization’s contact.

📈 What Makes This Project Unique

• Synchronized loader that respects both a minimum display time and actual hero‑video readiness
• Rich, accessible micro‑interactions powered by Framer Motion (staggered entrances, hover states, shine effects)
• Transforming navbar with glassmorphism → solid state based on scroll
• Responsive team carousel with autoplay, pause, and dynamic slides‑per‑view based on breakpoints
• Zero‑backend contact via WhatsApp deep link for instant reachability
• Tailwind v4 theming with custom tokens (thisBlue, thisWhite) for consistent branding

🔮 Future Improvements

• Hook the request form to a backend API (email/SMS/CRM) while keeping WhatsApp as a fallback
• Add real social links and Google Analytics/Meta Pixel
• Form validation with a11y hints and masked inputs; success/error toast states
• Internationalization (i18n) and RTL support
• Unit/UI tests for critical components (Navbar behavior, form assembly, carousel logic)

👨‍💻 Author / Contact

• Author: Your Name
• Email: your.email@example.com
• LinkedIn: https://www.linkedin.com/in/your‑profile

— If you use or fork this project, feel free to reach out. Feedback and contributions are welcome!