Aquarium Landing Page SPA

Welcome to the Marine Aquatics Landing Page Single Page Application (SPA)! This project is a visually engaging and responsive web application designed to showcase the services and features of Marine Aquatics Kenya. Built with React, Vite, and a modern tech stack, it delivers a sleek and user-friendly experience.

Features

• Responsive Design: Ensures the SPA looks great on all devices.
• Hero Section: Includes a background video with a fallback image for seamless loading.
• Interactive Navbar: A fixed navigation bar with a dropdown menu for small screens.
• Service Highlights: Dedicated sections to display various services offered.
• Dynamic Animations: Smooth animations powered by AOS (Animate On Scroll).
• Modular Structure: Organized codebase with reusable components for scalability.

---

Getting Started

Follow these instructions to set up the project locally.

Prerequisites

Make sure you have the following installed on your system:

• Node.js (v16 or above)
• npm or yarn

Installation

1. Clone the Repository:

   git clone https://github.com/AustinMusuya/marine-aquatics-site.git
   cd marine-aquatics-site

2. Install Dependencies:

   Using npm:

   npm install

   Or using yarn:

   yarn install

3. Start the Development Server:

   Using npm:

   npm run dev

   Or using yarn:

   yarn dev

   The application will be available at http://localhost:5173.

4. Build for Production:

   To create an optimized production build:

   Using npm:

   npm run build

   Or using yarn:

   yarn build

5. Preview the Production Build:

   Using npm:

   npm run preview

   Or using yarn:

   yarn preview

---

Project Structure

src/
├── assets/          # Images, videos, and other static files
├── components/      # Reusable React components
│   ├── Navbar/      # Navigation bar
│   ├── Hero/        # Hero section
│   ├── Services/    # Services section
│   ├── Banner/      # Multiple banners
│   └── Footer/      # Footer component
├── App.jsx          # Main application file
├── main.jsx         # Entry point
└── index.css        # Global styles

---

SPA Overview

The Aquarium Landing Page SPA serves as an elegant introduction to Marine Aquatics Kenya's offerings. It features a vibrant hero section with a captivating underwater video, dynamically animated service highlights, and an easy-to-navigate UI. The design prioritizes simplicity and clarity to ensure a seamless user experience.

Tech Stack

• React: For building the UI components.
• Vite: For blazing-fast development and bundling.
• Tailwind CSS: For utility-first, responsive styling.
• AOS (Animate On Scroll): For smooth scroll animations.
• React Icons: For visually appealing icons.

---

Contributions

Contributions are welcome! If you'd like to improve this project, feel free to fork the repository and create a pull request.

1. Fork the repository.
2. Create a new branch (git checkout -b feature-branch).
3. Make your changes and commit them (git commit -m 'Add a new feature').
4. Push to the branch (git push origin feature-branch).
5. Open a pull request.

---

License

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

---

Acknowledgments

Special thanks to Marine Aquatics Kenya for the inspiration behind this project.