Airea - Smart Lung Cancer IoT Detection Platform

Airea is a modern, responsive React-based landing page designed for a Smart Lung Cancer Detection system using IoT technology. The interface features a high-end "Glassmorphism" aesthetic, interactive elements, complex CSS animations, and a fully functional Dark/Light mode.

🚀 Key Features

🎨 Dynamic UI/UX:

Glassmorphism: Navigation bar, buttons, and content cards feature a frosted glass effect with backdrop blur.

Live Backgrounds: * Light Mode: Floating gradient blobs with a breathing animation.

Dark Mode: Deep slate gradients with subtle wave animations.

Splash Screen: Custom "breathing" lung animation sequence upon initial load.

📱 Interactive Elements:

CSS-Only iPhone Demo: A fully interactive mobile phone mockup in the Hero section. Users can click tabs inside the virtual phone (Home, Trends, Alerts) to see different app states.

Scroll Animations: Elements fade in and slide up as the user scrolls down the page using the custom RevealOnScroll component.

🌗 Dark Mode Support:

Full support for light and dark themes.

Toggle button located in the navigation bar (and mobile menu).

Context-aware changes: The interactive phone and all glass cards adapt their colors based on the selected theme.

⚡ Tech Stack:

React.js: Core framework.

Tailwind CSS: Utility-first styling for responsiveness and dark mode handling.

Lucide React: Modern, lightweight icon set.

🛠️ Installation & Setup

Follow these steps to get the project running locally.

Prerequisites

Node.js (v14 or higher)

npm or yarn

Steps

Clone the repository

git clone https://github.com/your-username/airea-web.git cd airea-web

Install Dependencies

npm install

or

yarn install

Make sure to install the icon library:

npm install lucide-react

Run the Development Server

npm run dev

or

yarn start

Build for Production

npm run build

📂 Project Structure

src/ ├── App.jsx # Main application logic ├── index.css # Tailwind directives and base styles ├── components/ # (Recommended structure for refactoring) │ ├── InteractivePhone.jsx │ ├── RevealOnScroll.jsx │ └── ... public/ ├── logo.png # Project Logo ├── patientWearingIoT.png # Asset ├── connect.png # Asset └── doc_pat.png # Asset

🎨 Customizations

Animations

The project uses custom CSS keyframes injected via styled-jsx within App.jsx.

@keyframes breathe: Controls the pulsing effect on the splash screen.

@keyframes wave: Controls the background wave movement.

@keyframes blob: Controls the floating background gradients.

Assets

To customize the images, replace the files in the /public folder:

logo.png

patientWearingIoT.png

connect.png

doc_pat.png

👥 The Team

Ashfaq - Lead Developer

Siddhiha - AI Research Scientist

Kaneshwar - IoT Hardware Engineer

Kirththigan - Frontend Architect

Mathushihan - Backend Security

Dharshika - UI/UX Designer

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Made with ❤️ by the Airea Dev Team