NFCycle - Eco-Friendly Today, Grey-Free Tomorrow

🌍 Project Overview

NFCycle is a modern, eco-conscious web application designed to promote sustainable hydration solutions. Our flagship product is a smart, recycled eco-bottle that integrates with a wellness ecosystem to track hydration, reduce plastic waste, and support healthier habits.

This project showcases a premium, responsive landing page with advanced UI/UX features, including glassmorphism effects, sticky navigation, and interactive elements.

✨ Key Features

• Responsive Design: Fully optimized for desktop, tablet, and mobile devices.
• Modern UI/UX:
  • Glassmorphism: Premium frosted glass effects on cards and overlays.
  • Sticky Navigation: Smart header that transitions from transparent to solid on scroll.
  • Interactive Elements: Hover effects, smooth scrolling, and AOS (Animate On Scroll) animations.
• Smart Forms:
  • Real-time validation with visual feedback.
  • Accessible form controls and focus states.
  • Toast notification system for user feedback.
• Dynamic Content:
  • "How It Works" visual guide with custom assets.
  • "Our Impact" section with engaging statistics.

🛠️ Tech Stack

• HTML5: Semantic structure and accessibility.
• CSS3: Custom properties (variables), Flexbox, Grid, and media queries.
• JavaScript (ES6+): DOM manipulation, event handling, and scroll logic.
• Libraries:
  • AOS (Animate On Scroll)
  • FontAwesome (Icons)
  • Google Fonts (Poppins & Open Sans)

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge).
• Basic knowledge of HTML/CSS for customization.

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/nfcycle.git
   cd nfcycle

2. Run locally: You can open index.html directly in your browser, or use a simple local server for the best experience (especially for loading assets).

   Using Python:

   python3 -m http.server 8000

   Then visit http://localhost:8000 in your browser.

   Using VS Code Live Server:

   • Install the "Live Server" extension.
   • Right-click index.html and select "Open with Live Server".

📂 Project Structure

nfcycle/
├── assets/              # Images and static assets
├── index.html           # Main landing page
├── how-it-works.html    # Detailed process page
├── blog.html            # Blog listing page
├── style.css            # Global styles and variables
├── toast-styles.css     # Toast notification styles
├── script.js            # (Optional) External JS logic
└── README.md            # Project documentation

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

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