Luna Speaker Landing Page

A landing page for the Luna wireless speaker, created to showcase the product, its features, design, and technical capabilities.

Project Description

The Luna Speaker Landing Page is a single-page website designed to present the Luna wireless speaker and its main features. It includes sections describing the product design, speaker technology, connectivity, sound capabilities, and additional features. The page also includes responsive navigation, interactive sliders, product images, social links, and a contact form.

Technical Requirements

To run this project, you will need:

• Node.js (version 14.x or newer): A JavaScript runtime used for running the development environment and project scripts.
• NPM (version 6.x or newer): The Node.js package manager used for installing and managing project dependencies.

Installation and Setup

To install the project and run it locally, follow these steps:

1. Clone the repository:

   git clone https://github.com/AntonyShaga/kickstarter-landing.git

2. Navigate to the project directory:

   cd kickstarter-landing

3. Install dependencies:

   npm install

4. Start the local development server:

   npm start

Usage

After starting the project, it will be available at http://localhost:8080. You can use this URL to preview the landing page and test its responsive layout and interactive elements.

Features

• Responsive Design: The page is adapted for desktop, tablet, and mobile devices.
• Interactive Elements: JavaScript is used for interactive sliders and navigation behavior.
• Mobile Navigation: Includes a responsive mobile menu for smaller screens.
• Responsive Images: Uses different image versions for desktop, tablet, and mobile devices.
• SVG Icons: Uses an SVG sprite for interface and social media icons.
• Contact Form: Includes a form for sending email and message information.
• Modern Layout: Uses reusable SCSS blocks, variables, mixins, and BEM naming conventions.

Example

You can view a live demo of the project here: DEMO LINK

Technologies Used

This project was built using the following technologies:

• HTML5: For structuring the content of the landing page using semantic markup.
• CSS3: For styling, responsive layouts, and visual presentation.
• Sass (SCSS): For organizing styles using variables, mixins, reusable blocks, and partial files.
• JavaScript (ES6): For interactive functionality such as sliders and navigation behavior.
• BEM: For consistent and maintainable CSS class naming.
• Node.js: For running the development environment and project tooling.
• NPM: For managing dependencies and project scripts.
• Parcel: For bundling and running the project during development and deployment.
• Git: For version control and tracking project changes.
• GitHub: For hosting the repository and deployed project.

Contribution Guidelines

If you wish to contribute to this project, please follow these guidelines:

1. Fork the repository: Create your own copy of the project on GitHub.
2. Clone your fork: Download your copy to your local machine.
3. Create a branch: Develop your feature or fix on a separate branch.
4. Submit a pull request: Propose your changes to be merged into the main project.

License

This project is licensed under the license included in the LICENSE file.