Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/arthursantdev/beatsbydre

Landing page based on the BeatsByDre brand. Presenting your products and aesthetics, with modern and responsive design.
https://github.com/arthursantdev/beatsbydre

css3 git html5 javascript react sass sass-framework scrollreveal-js vitejs

Last synced: 3 months ago
JSON representation

Landing page based on the BeatsByDre brand. Presenting your products and aesthetics, with modern and responsive design.

Awesome Lists containing this project

README

        

# Beats
![Beats](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/e76cc92d-7c02-44fd-a908-1989ca397506)

## About the project
Landing page inspired by the ‘Beats’ brand, with some of its products. Using animations using 'ScrollReveal' for a unique experience with modern and responsive UX/UI design for mobile devices. This project is a refactoring of a simpler one, which consisted of only (JavaScript, HTML, SCSS,
CSS) Making it more complex and consistent by transforming it into a React project structured in Vite.Js, giving the freedom to create components making maintenance simpler and more accurate.

## Stacks
![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white) ![React](https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) ![SCSS](https://img.shields.io/badge/SCSS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white) ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white) ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)

## Features
- Scroll appearance animations throughout the application
- Pre-made animations for styling through Scss and JavaScript
- Superset Scss to style these animations
- Navbar that shows the section the user is in
- Sessation of items for purchase
- Stylized footer and send email button
- Responsive UX/UI design for mobile devices

## Learnings
![SCSS](https://img.shields.io/badge/SCSS-hotpink.svg?style=for-the-badge&logo=SASS&logoColor=white) Taking into account that this Superset is a Sass syntax which in turn is an extension language, facilitating the use of CSS, I believed it to be difficult in terms of syntax and complexity but I was surprised by its simplicity. The organization, despite being different, didn’t take long to make sense, It facilitates the use of what makes Scss an advantage over basic CSS, which are its variables, grouping of rules, mixis, inheritance and even functions. The code becomes much cleaner and easier to maintain, promoting the reuse of styles and the reduction of redundancy that is common in CSS. Because it is compiled into normal CSS, any navegos can play Scss, which made me much more excited to learn even more about the possibilities of this Superset.

![React](https://img.shields.io/badge/React-000000?style=for-the-badge&logo=react) ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) In this project I was able to learn about how to relate JavaScript to SCSS for scroll animations, it was difficult at first to understand how modifying SCSS from JavaScript worked but it was a great introduction to these possibilities in the language for styling more customized and unique applications for each customer.

## Installation
```bash
npm create vite@latest ./
npm i -D sass
npm i react-icons
npm install scrollreveal
```

## Screenshot
### Desktop
![Beats Pc 1](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/c572e1af-07b0-46e4-a591-8984f626e55e)

![Beats Pc 2](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/2ae90eea-e735-446b-b4e5-8a6949158340)

![Beats Pc 3](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/f82fee82-d83f-45f7-8eee-07df109301c5)

![Beats Pc 4](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/e3a63000-c7e8-487e-8a24-2f45c92e2448)

![Beats Pc 5](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/4e89cc32-6632-4e1c-9b09-1a13fd2dfff5)

![Beats Pc 6](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/be3707b7-04dc-46ad-9d03-e22a75445523)

### Mobile
![Beats Iphone 1](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/41236628-851f-41eb-a1f8-f0bbe41c2cb3)
![Beats Iphone 2](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/c8a3ae1a-592f-402d-a97d-2bc5e7c63bb4)
![Beats Iphone 3](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/1246e2b5-f0c2-4e82-9c5f-977cb41c5317)

![Beats Iphone 4](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/ae6f387c-2e0f-455e-a74f-99867ac3bf4d)
![Beats Iphone 5](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/f2380c05-98ae-47cc-9b97-3b873f561b9b)
![Beats Iphone 6](https://github.com/ArthurSantDev/BeatsByDre/assets/159972613/e422a081-734a-4b30-924a-f71e9f3816b8)