MyBiKE landing page

.eslintignore

@@ -1,2 +1,2 @@
+/backstop_data
 /dist
-/node_modules

.github/workflows/test.yml-template

@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data

.gitignore

@@ -1,15 +1,15 @@
+# IDE
 .idea
 .vscode
-build
-dist
+
+# Node
 node_modules
-.DS_Store
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# MacOS
+.DS_Store
 
-raw_reports
-reports
-cypress/screenshots
-cypress/videos
+# Generated files
+backstop_data
+dist
+.cache
+.parcel-cache

README.md

@@ -1,15 +1,30 @@
-# Miami landing page
-
-In this task, you will learn how to implement a landing page. To do that:
-
-- choose a landing page design from the list below;
-  - [BOSE landing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6703-88&t=L7eKz5YKLN0m5WxR-0)
-  - [MET landing](https://www.figma.com/file/lSR1m42L9YwzQwzzxKwHpw/THE-MET)
-  - [MYBIKE landing](https://www.figma.com/file/NZQAIydtHo5QkINyGLHNcq/BIKE-New-Version?node-id=0%3A1)
-  - [B&O](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6817-212&t=ZTV6Gl8NzaWkJ4FK-0)
-  - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
-- watch the lesson videos and implement your page blocks similarly to the videos;
-- **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
-- after each next block do the same (add, commit and push the changes, and deploy the updated demo;
-- check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
+# MyBiKE - Professional Frontend Layout
+
+Projekt nowoczesnego, responsywnego landing page'a, stworzony z dużym naciskiem na *czystą architekturę CSS* oraz *reużywalność kodu* na podstawie projektu z Figmy.
+
+## Live Demo
+*[ZOBACZ PROJEKT NA ŻYWO](https://pawel-florczyk.github.io/layout_miami/)*
+
+## Architektura Stylów i Design Tokens
+W projekcie zastosowano profesjonalne podejście do zarządzania stylami, oparte na systemie *Design Tokens*. Pozwala to na pełną kontrolę nad warstwą wizualną z jednego miejsca:
+
+* *Normalizacja i Optymalizacja*: Samodzielnie ujednoliciłem wartości odstępów oraz wielkości czcionek z projektu na platformie Figma. Dzięki usunięciu przypadkowych, zbliżonych wartości, kod stał się spójny, bardziej czytelny i łatwiejszy w utrzymaniu.
+* *Variables System*: Pełna centralizacja ustawień projektu w pliku _variables.scss.
+    * *Typography*: Skalowalne rozmiary czcionek i system interlinii.
+    * *Spacing System*: Spójne odstępy sekcji oraz mikro-odstępy.
+    * *Functional Colors*: Mapowanie kolorów bazowych na nazwy funkcjonalne (np. $color-title-header).
+    * *Component Tokens*: Wydzielone zmienne dla przycisków (np. $btn-height, $btn-radius).
+* *BEM Methodology*: Czytelne nazewnictwo klas, ułatwiające rozwój i konserwację kodu.
+
+## Kluczowe Funkcjonalności i Poprawki
+* *Poprawka UX/UI (Header Image)*: Wprowadziłem autorską poprawkę względem projektu graficznego – zdjęcie w sekcji Hero zostało zoptymalizowane tak, aby zawsze wypełniało pełną wysokość ekranu (100vh), co zapewnia lepszy efekt wizualny na różnych monitorach.
+* *Full Responsive Design*: System autorskich mixinów zapewniający pełną responsywność.
+* *Optymalizacja Layoutu*: Wykorzystanie CSS Grid i Flexbox do stworzenia stabilnej siatki strony.
+
+## Technologie
+* HTML5 (Semantyczna struktura)
+* SCSS (Architektura zmiennych, mixiny, BEM)
+
+## Jak uruchomić lokalnie?
+1. Sklonuj repozytorium na swój dysk.
+2. Otwórz plik index.html w przeglądarce lub skorzystaj z wtyczki *Live Server* w VS Code.

index.html

@@ -1,22 +1,231 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <title>Miami</title>
-    <link
-      rel="stylesheet"
-      href="src/styles/main.scss"
-    />
-    <script
-      src="src/scripts/main.js"
-      defer
-    ></script>
-  </head>
-  <body>
-    <h1>Miami</h1>
-  </body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>MyBiKE</title>
+  <link rel="stylesheet" href="styles.css">
+  <link rel="icon" href="src/images/logo/logo.svg" type="image/svg+xml">
+  <link rel="icon" href="src/images/logo/old-logo.png" type="image/png">
+</head>
+<body>
+  <header class="header" id="home">
+  <nav class="nav header__nav">
+    <a href="#home"><img class="nav__logo" src="src/images/logo/MyBiKE.svg" alt="logo"></a>
+    <div class="nav-block">
+      <a href="tel:+1 234 555-55-55" class="phone"><span class="phone__label">+1 234 555-55-55</span><img class="nav-block__phone" src="src/images/icons/Phone.svg" alt="phone"></a>
+      <a href="#menu" class="burger nav-block__menu"><span class="burger__label">Open menu</span></a>
+    </div>
+  </nav>
+  <h1 class="title header__title">
+    Take the Streets
+  </h1>
+  </header>
+
+  <div class="menu" id="menu">
+    <nav class="menu-nav">
+    <a href="#"><img class="nav__logo-menu" src="src/images/logo/MyBiKE-black.svg" alt="logo"></a>
+    <div>
+      <a href="#header"><img class="nav-block__menu-close" src="src/images/icons/close-icon.svg" alt="menu"></a>
+    </div>
+    </nav>
+
+    <nav class="links menu__links">
+    <ul class="links__list">
+      <li class="links__item"><a href="#home" class="links__link">Home</a></li>
+      <li class="links__item"><a href="#about-us" class="links__link">About us</a></li>
+      <li class="links__item"><a href="#compare" class="links__link">Compare bikes</a></li>
+      <li class="links__item"><a href="#details" class="links__link">Details</a></li>
+      <li class="links__item"><a href="#contacts" class="links__link">Contacts</a></li>
+    </ul>
+  </nav>
+
+  <p class="menu__phone">+1 234 5555-55-55</p>
+  <p class="menu__phone">
+    <a href="tel:+1 234 555-55-55" class="menu__call-link">Book a test ride</a>
+  </p>
+  </div>
+
+  <main class="main" id="about-us">
+    <h2 class="title title--secondary main__title">
+      Move <span class="title__glow">Free</span>
+    </h2>
+
+    <div class="main__content">
+      <p class="main-text">
+      Shift your ride, not gears. Find the fastest way to move in the city as the bike adapts intuitively to power the speed you need.
+    </p>
+    </div>
+
+    <section class="section main__section" id="compare">
+      <h2 class="title title--section section__title">
+        Compare bikes
+      </h2>
+      <div class="bikes">
+      <article class="article section__article bikes__article">
+        <a href="#contacts" class="links__compare">
+        <div class="article__pictures">
+          <img class="article__item" src="src/images/compare/sporty-4.jpg" alt="sporty-4-bike">
+        </div>
+        <h3 class="article__model">
+          Sporty 4
+        </h3>
+        <p class="article__description article__paragraph">
+          The iconic frame brought to a new performance height as a sporty, active ride.
+        </p>
+        <p class="article__price">
+          $ 2 590
+        </p>
+        </a>
+      </article>
+
+      <article class="article section__article bikes__article">
+        <a href="#contacts" class="links__compare">
+        <div class="article__pictures">
+          <img class="article__item" src="src/images/compare/town-st.jpg" alt="town-st-bike">
+        </div>
+        <h3 class="article__model">
+          Ride in town ST
+        </h3>
+        <p class="article__description article__paragraph">
+          An open frame for an upright riding position as the most comfortable ride in town.
+        </p>
+        <p class="article__price">
+          $ 2 590
+        </p>
+        </a>
+      </article>
+
+      <article class="article bikes__article">
+        <a href="#contacts" class="links__compare">
+        <div class="article__pictures">
+          <img class="article__item" src="src/images/compare/agile-ride-3.jpg" alt="agile-ride-3-bike">
+        </div>
+        <h3 class="article__model">
+          Agile ride 3
+        </h3>
+        <p class="article__description article__paragraph">
+          The lightweight frame that has earned its street tread as a sleek, agile ride.
+        </p>
+        <p class="article__price">
+          $ 2 090
+        </p>
+        </a>
+      </article>
+      </div>
+
+    </section>
+
+    <section class="section main__section" id="details">
+      <h2 class="title title--section section__title">
+        The details
+      </h2>
+      <article class="article section__article">
+        <div class="pictures article__images">
+            <img class="pictures__image pictures__image--big article__image article__image--big" src="src/images/details/auto-unlock-1.jpg" srcset="src/images/details/auto-unlock-1.jpg, src/images/details/auto-unlock-1-mobile.png 2x" alt="auto-unlock-1">
+            <img class="pictures__image pictures__image--small article__image" src="src/images/details/auto-unlock-2.jpg" srcset="src/images/details/auto-unlock-2.jpg, src/images/details/auto-unlock-2-mobile.jpg 2x" alt="auto-unlock-2">
+        </div>
+        <h3 class="article__function">
+          Auto Unlock
+        </h3>
+        <p class="article__description article__paragraph">
+          The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime.
+        </p>
+      </article>
+
+      <article class="article section__article">
+        <div class="pictures article__images">
+            <img class="pictures__image pictures__image--big article__image" src="src/images/details/lights-1.jpg" srcset="src/images/details/lights-1.jpg, src/images/details/lights-1-mobile.jpg 2x" alt="lights-1">
+            <img class="pictures__image pictures__image--small article__image" src="src/images/details/lights-2.jpg" srcset="src/images/details/lights-2.jpg, src/images/details/lights-2-mobile.jpg 2x" alt="lights-2">
+        </div>
+        <h3 class="article__function">
+          Range & Integrated lights
+        </h3>
+        <p class="article__description article__paragraph">
+          The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.
+        </p>
+      </article>
+
+      <article class="article section__article">
+        <div class="pictures article__images">
+            <img class="pictures__image pictures__image--small article__image" src="src/images/details/brakes-1.jpg" srcset="src/images/details/brakes-1.jpg, src/images/details/brakes-1-mobile.jpg 2x" alt="brakes-1">
+            <img class="pictures__image pictures__image--big article__image" src="src/images/details/brakes-2.jpg" srcset="src/images/details/brakes-2.jpg, src/images/details/brakes-2-mobile.jpg 2x" alt="brakes-2">
+        </div>
+        <h3 class="article__function">
+          Hydraulic disc brakes & Lightweight
+        </h3>
+        <p class="article__description article__paragraph">
+          Brakes with total stopping power the second you make contact. The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.
+        </p>
+      </article>
+
+      <div class="explore">
+        <a href="#" class="button button--explore">Explore</a>
+      </div>
+
+    </section>
+
+    <section class="section main__section" id="contacts">
+      <h2 class="title title--section section__title">
+        Contact us
+      </h2>
+
+      <div class="contact">
+        <form class="form contact__form">
+        <div class="form__item">
+          <label for="name" class="form__label">Name</label>
+          <input class="form__input form__item-input" type="text" placeholder="Name" id="name" required>
+        </div>
+        <div class="form__item">
+          <label for="email" class="form__label">Email</label>
+          <input class="form__input form__item-input" type="email" placeholder="Email" id="email" required>
+        </div>
+        <div class="form__item">
+          <label for="message" class="form__label">Message</label>
+          <textarea class="form__textarea form__item-textarea" placeholder="Message" id="message" required></textarea>
+        </div>
+
+        <button class="button button--send" type="submit">Send</button>
+      </form>
+
+      <address class="address contact__address">
+        <div class="address__group">
+          <h4 class="address__label">Phone</h4>
+          <a href="tel:+1 234 555-55-55" class="address__content phone__call">+1 234 5555-55-55</a>
+        </div>
+
+        <div class="address__group">
+          <h4 class="address__label">Email</h4>
+          <a href="mailto:[email protected]" class="address__content">[email protected]</a>
+        </div>
+
+        <div class="address__group">
+          <h4 class="address__label">Address</h4>
+          <a href="https://www.google.com/maps/place/400+N+1st+Ave+STE+700,+Minneapolis,+MN+55401,+Stany+Zjednoczone/@44.9809311,-93.2756729,16z/data=!4m6!3m5!1s0x52b3328fdf233887:0x3348e5113ed2472d!8m2!3d44.9813258!4d-93.2731311!16s%2Fg%2F11nyn_tfyt?entry=ttu&g_ep=EgoyMDI2MDMwOS4wIKXMDSoASAFQAw%3D%3D" target="_blank" rel="noopener noreferrer" class="address__content">
+            400 first ave.
+            <br>
+            suite 700
+            <br>
+            Minneapolis, MN 55401
+          </a>
+        </div>
+      </address>
+      </div>
+
+    </section>
+  </main>
+  <footer class="footer">
+  </footer>
+
+  <script>
+    'use strict';
+    const myForm = document.querySelector('.form');
+
+      myForm.addEventListener('submit', function(e) {
+        e.preventDefault();
+        alert('Twój wiadomość została przesłana! Czekaj na odpowiedź konsultanta.');
+        this.reset();
+      });
+</script>
+</body>
 </html>