+ class="top-bar__logo"
+ src="images/logo.svg"
+ alt="MyBike logo"
+ >
+ Sporty 4
+The iconic frame brought to a new performance height as a sporty, active ride.
+$ 2 590
+Move Free
- -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.
- -Compare bikes
- -
-
-
-
-
- Sporty 4
-The iconic frame brought to a new performance height as a sporty, active ride.
-
-
- $ 2 590
-
- 
-
-
-
- Ride in town ST
-An open frame for an upright riding position as the most comfortable ride in town.
-
-
- $ 2 590
-
- 
-
- Agile ride 3
-The lightweight frame that has earned its street tread as a sleek, agile ride.
-
-
+ $ 2 090
-
+
-
-
-
-
-
-
-
-
- Explore
-
-
-
- Email
-
+
+
-
-
-
+
diff --git a/src/styles/blocks/address.scss b/src/styles/blocks/address.scss
deleted file mode 100644
index 8786086971..0000000000
--- a/src/styles/blocks/address.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.address {
- &__label {
- color: #fff;
- font-family: "Poppins", sans-serif;
- font-size: 14px;
- font-style: normal;
- font-weight: 400;
- line-height: 140%;
- }
-
- &__content {
- color: #fff;
- font-family: "Poppins", sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 500;
- line-height: 140%; /* 22.4px */
-
- }
-}
diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
deleted file mode 100644
index 8b8b6a3646..0000000000
--- a/src/styles/blocks/article.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.article {
-
- &__name {
- color: #fff;
- font-family: "Poppins", sans-serif;
- font-size: 24px;
- font-style: normal;
- font-weight: 700;
- line-height: 140%; /* 33.6px */
- }
-
- &__paragraph {
- color: #fff;
- font-family: "Poppins", sans-serif;
- font-size: 16px;
- font-style: normal;
- font-weight: 400;
- line-height: 140%; /* 22.4px */
- }
-}
diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss
deleted file mode 100644
index dcd83519a5..0000000000
--- a/src/styles/blocks/body.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.page {
- background-color: #1d1d1d;
-}
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
index 61b31de3b3..921a8af457 100644
--- a/src/styles/blocks/button.scss
+++ b/src/styles/blocks/button.scss
@@ -1,16 +1,40 @@
.button {
- border-radius: 40px;
- background: #fff;
display: block;
- text-decoration: none;
- color: #1d1d1d;
+ margin: 0 auto;
+ box-sizing: border-box;
+ width: 100%;
height: 56px;
- line-height: 56px;
-
- text-align: center;
- font-family: "Poppins", sans-serif;
- font-size: 16px;
- font-style: normal;
+ background-color: #fff;
+ border-radius: 40px;
+ padding: 14px;
+ color: $menu-color;
font-weight: 700;
+ font-size: 16px;
+ line-height: 27px;
+ text-align: center;
+ text-decoration: none;
+ cursor: pointer;
+
+ transition: transform $effectDuration;
+
+ @include onTablet {
+ width: 392px;
+ }
+
+ @include onDesktop {
+ width: 324px;
+ }
+
+ &:active {
+ box-shadow: 1px 4px 16px rgba(232, 232, 240, 0.64);
+ }
+}
+
+.button--resize {
+ margin-bottom: 48px;
+ @include onTablet {
+ width: 100%;
+ margin-bottom: 0;
+ }
}
diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss
new file mode 100644
index 0000000000..0014dbdc65
--- /dev/null
+++ b/src/styles/blocks/categories.scss
@@ -0,0 +1,62 @@
+.categories {
+ &__wrapper {
+ display: grid;
+ row-gap: 40px;
+
+ @include onTablet {
+ row-gap: 48px;
+ }
+ }
+}
+
+.category {
+ &__photos {
+ @include pageGrid;
+ margin-bottom: 16px;
+ }
+ &__link {
+ position: relative;
+ &--wide {
+ @include onTablet {
+ grid-column: span 4;
+ }
+ @include onDesktop {
+ grid-column: span 8;
+ }
+ }
+ &--square {
+ height: 0;
+ padding-bottom: 100%;
+
+ @include onTablet {
+ grid-column: span 2;
+ }
+ @include onDesktop {
+ grid-column: span 4;
+ }
+ }
+ }
+
+ &__photo {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+
+ transition: transform $effectDuration;
+
+ @include hover(transform, scale(1.05));
+ }
+
+ &__description {
+ text-align: start;
+ margin: 8px 0 0;
+ }
+
+ &__title {
+ margin: 0;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 140%;
+ }
+}
diff --git a/src/styles/blocks/contact-form.scss b/src/styles/blocks/contact-form.scss
new file mode 100644
index 0000000000..8ce979a17f
--- /dev/null
+++ b/src/styles/blocks/contact-form.scss
@@ -0,0 +1,75 @@
+.grid-container {
+ @include pageGrid;
+ --columns: 1;
+}
+
+.contact-us {
+ &__block {
+ @include onTablet {
+ grid-column: span 3;
+ }
+
+ @include onDesktop {
+ grid-column: span 5;
+ }
+ }
+
+ &__form-field {
+ box-sizing: border-box;
+ width: 100%;
+ height: 48px;
+ padding: 14px;
+ margin-bottom: 16px;
+ border-radius: 40px;
+ border: none;
+ resize: none;
+ background-color: #f8f8fa;
+
+ &::placeholder {
+ color: #7e7e83;
+ font-family: "Poppins", sans-serif;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 20px;
+ }
+
+ &:hover::placeholder {
+ color: #292929;
+ }
+
+ &--message {
+ height: 100%;
+ border-radius: 16px;
+ margin-bottom: 32px;
+ }
+ }
+
+ &__info {
+ @include onTablet {
+ grid-column: span 2;
+ }
+
+ @include onDesktop {
+ grid-column: 8 / 10;
+ }
+
+ &-section {
+ margin-bottom: 24px;
+ }
+
+ &-title {
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ margin: 8px 0;
+ }
+
+ &-link {
+ font-size: 16px;
+ font-weight: 500;
+ text-decoration: none;
+ color: #fff;
+ }
+ }
+}
diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss
new file mode 100644
index 0000000000..ae81aa83bf
--- /dev/null
+++ b/src/styles/blocks/container.scss
@@ -0,0 +1,13 @@
+.container {
+ padding-inline: 20px;
+
+ @include onTablet {
+ padding-inline: 72px;
+ }
+
+ @include onDesktop {
+ max-width: 1260px;
+ margin-inline: auto;
+ padding-inline: 120px;
+ }
+}
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
index a7e8389abc..3f109f977b 100644
--- a/src/styles/blocks/footer.scss
+++ b/src/styles/blocks/footer.scss
@@ -1,10 +1,10 @@
.footer {
- height: 200px;
background-image: url(/images/photos/footer-background.jpg);
- display: flex;
- flex-direction: column;
- background-repeat: no-repeat;
background-size: cover;
+ background-position: 65%;
+ height: 100vh;
- margin-top: 120px;
+ @include onTablet {
+ background-position: center;
+ }
}
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 4efd6abf2b..ad9b77d27e 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -2,8 +2,10 @@
background-image: url(/images/photos/header-background.jpg);
background-size: cover;
background-position: 90%;
- padding-left: 20px;
- padding-right: 20px;
+
+ @include onTablet {
+ background-position: center;
+ }
&__content {
height: 100vh;
@@ -16,18 +18,23 @@
&__title {
margin: 0;
- color: #fff;
text-align: center;
- font-family: "Poppins", sans-serif;
font-size: 36px;
font-style: normal;
font-weight: 700;
- line-height: 100%; /* 36px */
+ line-height: 100%;
letter-spacing: -1.5px;
+
+ @include onTablet {
+ font-size: 64px;
+ }
}
&__bottom {
padding-bottom: 80px;
}
+ @include onTablet {
+ padding-bottom: 130px;
+ }
}
diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
index bf9b30e27b..b02b96ae0a 100644
--- a/src/styles/blocks/icon.scss
+++ b/src/styles/blocks/icon.scss
@@ -5,21 +5,58 @@
background-position: center;
background-size: cover;
+ @include hover(transform, scale(1.2));
+
+ @include onTablet {
+ height: 32px;
+ width: 32px;
+ }
+
+ &__tooltip {
+ display: none;
+
+ @include onDesktop {
+ position: absolute;
+ right: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+
+ display: block;
+ width: max-content;
+ padding-right: 12px;
+
+ color: #fff;
+ font-weight: 700;
+ font-size: 12px;
+ line-height: 16px;
+ letter-spacing: 2px;
+ text-transform: uppercase;
+ opacity: 0;
+
+ pointer-events: none;
+ transition: transform $effectDuration;
+ }
+ }
+
+ &:hover &__tooltip {
+ opacity: 1;
+ pointer-events: all;
+ }
+
&--phone {
background-image: url(/images/phone.svg);
}
&--menu {
- background-image: url(/images/cross.svg);
+ background-image: url(/images/menu.svg);
+ &:hover {
+ background-image: url(/images/menu_hover.svg);
+
+ }
}
&--close {
background-image: url(/images/close-black.svg);
-
- }
-
- &__tooltip {
- display: none;
}
}
diff --git a/src/styles/blocks/links.scss b/src/styles/blocks/links.scss
deleted file mode 100644
index 2177ec606e..0000000000
--- a/src/styles/blocks/links.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.links {
-
- &__list {
- margin-bottom: 40px;
- }
-
- &__item {
- margin-bottom: 24px;
- }
-
- &__link {
- color: #1d1d1d;
-
- font-family: "Poppins", sans-serif;
- font-size: 22px;
- font-style: normal;
- font-weight: 600;
- line-height: 22px; /* 100% */
- letter-spacing: 2px;
- text-transform: uppercase;
-
- text-decoration: none;
- border-bottom: 1px solid transparent;
- padding-bottom: 8px;
- display: inline-block;
-
- &:hover {
- border-bottom: 1px solid black;
- }
- }
-}
diff --git a/src/styles/blocks/main.scss b/src/styles/blocks/main.scss
index b5d7635c93..675fec32b5 100644
--- a/src/styles/blocks/main.scss
+++ b/src/styles/blocks/main.scss
@@ -1,14 +1,18 @@
.main {
- padding-left: 20px;
- padding-right: 20px;
-}
+ background-color: $menu-color;
+
+ &__content {
+ display: grid;
+ row-gap: 92px;
+ padding-block: 60px;
+
+ @include onTablet {
+ row-gap: 132px;
+ padding-block: 150px;
+ }
-.paragraph {
- color: #fff;
- font-family: "Poppins", sans-serif;
- font-size: 23px;
- padding: 32px 20px 92px;
- font-style: normal;
- font-weight: 500;
- line-height: 140%;
+ @include onDesktop {
+ row-gap: 164px;
+ }
+ }
}
diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss
index 2b0b60fa05..ea32faf84d 100644
--- a/src/styles/blocks/menu.scss
+++ b/src/styles/blocks/menu.scss
@@ -1,47 +1,44 @@
.menu {
+ box-sizing: border-box;
+ height: 100vh;
background-color: #c2c2c2;
- color: #1c1c1c;
- padding: 0 20px;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
-
- &__burger {
- background-color: #c2c2c2;
- color: #1d1d1d;
- padding: 0 20px;
- height: 100vh;
- display: flex;
- flex-direction: column;
+ color: $menu-color;
+ font-weight: 600;
+ text-transform: uppercase;
+
+ &__top {
+ margin-bottom: 48px;
+
+ @include onTablet {
+ margin-bottom: 0;
+ }
+ }
+
+ &__nav {
+ margin-bottom: 40px;
}
- &__paragraph {
- color: #1d1d1d;
+ &__phone-number {
+ display: block;
+ margin-bottom: 16px;
- font-family: "Poppins", sans-serif;
font-size: 16px;
- font-style: normal;
- font-weight: 600;
line-height: 27px;
- text-transform: uppercase;
- margin-top: 40px;
- padding-bottom: 16px;
+ color: inherit;
+ text-decoration: none;
}
- &__call-link {
- color: #1d1d1d;
+ &__call-to-order {
+ display: block;
+ width: fit-content;
+
+ padding-bottom: 7px;
+ border-bottom: 1px solid $menu-color;
- font-family: "Poppins", sans-serif;
font-size: 12px;
- font-style: normal;
- font-weight: 600;
line-height: 16px;
letter-spacing: 2px;
- text-transform: uppercase;
- padding: 0 0 121px;
-
+ color: inherit;
text-decoration: none;
- border-bottom: 1px solid black;
- padding-bottom: 8px;
}
}
diff --git a/src/styles/blocks/mixins.scss b/src/styles/blocks/mixins.scss
new file mode 100644
index 0000000000..b8e7a51f7d
--- /dev/null
+++ b/src/styles/blocks/mixins.scss
@@ -0,0 +1,35 @@
+@mixin onTablet {
+ @media (min-width: $tablet-min-width) {
+ @content;
+ }
+}
+
+@mixin onDesktop {
+ @media (min-width: $desktop-min-width) {
+ @content;
+ }
+}
+
+@mixin hover($property, $toValue) {
+ transition: #{$property} $effectDuration;
+ &:hover {
+ #{$property}: $toValue;
+ }
+}
+
+
+@mixin pageGrid {
+ --columns: 2;
+ display: grid;
+ column-gap: 20px;
+ grid-template-columns: repeat(var(--columns), 1fr);
+
+ @include onTablet {
+ --columns: 6;
+ column-gap: 24px;
+ }
+
+ @include onDesktop {
+ --columns: 12;
+ }
+}
diff --git a/src/styles/blocks/move-free.scss b/src/styles/blocks/move-free.scss
new file mode 100644
index 0000000000..983afc23ad
--- /dev/null
+++ b/src/styles/blocks/move-free.scss
@@ -0,0 +1,37 @@
+.move-free {
+ @include pageGrid;
+
+ &__title {
+ grid-column: 1 / -1;
+
+ @include onTablet {
+ grid-column: 1 / 4;
+ }
+
+ @include onDesktop {
+ grid-column: span 5;
+ }
+ }
+
+ &__content {
+ grid-column: 1 / -1;
+
+ font-size: 23px;
+ line-height: 140%;
+
+ @include onTablet {
+ grid-column: 4 / 7;
+ }
+
+ @include onDesktop {
+ grid-column: span 6;
+ }
+ }
+
+ &__descripiton {
+ margin: 0;
+ font-size: 23px;
+ font-weight: 500;
+ line-height: 140%;
+ }
+}
diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss
new file mode 100644
index 0000000000..4a47f00b98
--- /dev/null
+++ b/src/styles/blocks/nav.scss
@@ -0,0 +1,38 @@
+.nav {
+ &__list {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+ }
+
+ &__link {
+ position: relative;
+ color: inherit;
+ text-decoration: none;
+ font-size: 22px;
+ line-height: 22px;
+ letter-spacing: 2px;
+
+ &::after {
+ content: "";
+ position: absolute;
+ bottom: -8px;
+ display: block;
+ height: 1px;
+ width: 100%;
+ background-color: $menu-color;
+
+ transition: transform $effectDuration;
+ transform: scale(0);
+ transform-origin: left;
+ }
+
+ &:hover::after {
+ transform: scale(1);
+ }
+ }
+}
diff --git a/src/styles/blocks/navigation.scss b/src/styles/blocks/navigation.scss
deleted file mode 100644
index 09bcd0ef8a..0000000000
--- a/src/styles/blocks/navigation.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.navigation {
- display: flex;
- justify-content: space-between;
- padding-top: 24px;
- align-items: center;
-
-}
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
new file mode 100644
index 0000000000..e736ca2208
--- /dev/null
+++ b/src/styles/blocks/page.scss
@@ -0,0 +1,31 @@
+.page {
+ font-family: "Poppins", sans-serif;
+ font-size: 16px;
+ line-height: 140%;
+ color: $main-text-color;
+
+ scroll-behavior: smooth;
+
+ &__body {
+ margin: 0;
+ min-width: 320px;
+ }
+
+ &__menu {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+
+ transition: all $effectDuration;
+ opacity: 0;
+ transform: translateX(-100%);
+ pointer-events: none;
+
+ &:target {
+ opacity: 1;
+ transform: translateX(0);
+ pointer-events: all;
+ }
+ }
+}
diff --git a/src/styles/blocks/pictures.scss b/src/styles/blocks/pictures.scss
deleted file mode 100644
index 2e2559912a..0000000000
--- a/src/styles/blocks/pictures.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.pictures {
- display: grid;
- grid-template-columns: 1fr 1fr;
- gap: 20px;
-
- &__item {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
-}
diff --git a/src/styles/blocks/product.scss b/src/styles/blocks/product.scss
index 6b2275013a..72a1d5b38c 100644
--- a/src/styles/blocks/product.scss
+++ b/src/styles/blocks/product.scss
@@ -1,40 +1,28 @@
.product {
- display: flex;
- flex-direction: column;
- align-items: center;
- box-sizing: border-box;
- font-family: "Poppins", sans-serif;
- font-style: normal;
+ font-size: 24px;
+ font-weight: 700;
+ line-height: 140%;
- &__img {
- width: 280px;
- height: 228px;
- flex-shrink: 0;
- padding-bottom: 32px;
-
- }
-
- &__name {
- color: #fff;
+ &__title {
+ margin: 32px 0 0;
font-size: 24px;
- font-weight: 700;
- line-height: 140%;
- padding-bottom: 8px;
-
}
- &__info {
- color: #fff;
+ &__category {
font-size: 16px;
font-weight: 400;
- line-height: 140%;
- padding-bottom: 16px;
+ margin: 8px 0 16px;
}
&__price {
- color: #fff;
- font-size: 24px;
- font-weight: 700;
- line-height: 140%;
+ margin: 0;
+ }
+
+ &__photo {
+ width: 100%;
+
+ transition: transform $effectDuration;
+
+ @include hover(transform, scale(1.2));
}
}
diff --git a/src/styles/blocks/recommended.scss b/src/styles/blocks/recommended.scss
new file mode 100644
index 0000000000..56b2ad1a9f
--- /dev/null
+++ b/src/styles/blocks/recommended.scss
@@ -0,0 +1,18 @@
+.recommended {
+ &__products {
+ @include pageGrid;
+ row-gap: 40px;
+ }
+
+ &__product {
+ grid-column: 1 / -1;
+
+ @include onTablet {
+ grid-column: 2 / -2;
+ }
+
+ @include onDesktop {
+ grid-column: span 4;
+ }
+ }
+}
diff --git a/src/styles/blocks/section-title.scss b/src/styles/blocks/section-title.scss
new file mode 100644
index 0000000000..b8c62a35cf
--- /dev/null
+++ b/src/styles/blocks/section-title.scss
@@ -0,0 +1,24 @@
+.section-title {
+ margin: 0;
+ margin-bottom: 48px;
+ color: $main-text-color;
+ font-weight: 500;
+ font-size: 32px;
+ line-height: 100%;
+ text-align: center;
+ letter-spacing: -1.5px;
+ text-transform: capitalize;
+
+ @include onTablet {
+ font-size: 48px;
+ }
+
+ @include onDesktop {
+ font-size: 64px;
+ }
+
+ &--align--left {
+ text-align: left;
+ margin-bottom: 32px;
+ }
+}
diff --git a/src/styles/blocks/title.scss b/src/styles/blocks/title.scss
deleted file mode 100644
index c1223a5cd7..0000000000
--- a/src/styles/blocks/title.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.title {
- color: white;
-
- text-align: center;
- font-family: "Poppins", sans-serif;
- font-size: 36px;
- font-style: normal;
- font-weight: 700;
- line-height: 100%;
- letter-spacing: -1.5px;
-
- &--secondary {
- color: #fff;
- font-family: "Poppins", sans-serif;
- font-size: 32px;
- font-style: normal;
- font-weight: 500;
- padding: 60px 20px;
- padding-bottom: 32px;
- line-height: 100%;
- letter-spacing: -1.5px;
- }
-
- &--section {
- color: #fff;
- text-align: center;
- font-family: "Poppins", sans-serif;
- font-size: 32px;
- font-style: normal;
- font-weight: 500;
- line-height: 32px; /* 100% */
- letter-spacing: -1.5px;
- text-transform: capitalize;
-
- padding-bottom: 48px;
-
- }
-}
diff --git a/src/styles/blocks/top_header.scss b/src/styles/blocks/top-bar.scss
similarity index 53%
rename from src/styles/blocks/top_header.scss
rename to src/styles/blocks/top-bar.scss
index 2fa8575193..bf3b52166f 100644
--- a/src/styles/blocks/top_header.scss
+++ b/src/styles/blocks/top-bar.scss
@@ -1,9 +1,13 @@
-.top-header {
+.top-bar {
padding-block: 24px;
display: flex;
justify-content: space-between;
+ @include onTablet {
+ padding-block: 36px;
+ }
+
&__icons {
display: flex;
align-items: center;
@@ -16,5 +20,12 @@
&__logo {
height: 38px;
+ transition: transform $effectDuration;
+
+ @include hover(transform, scale(1.2));
+
+ @include onTablet {
+ height: 56px;
+ }
}
}
diff --git a/src/styles/blocks/variables.scss b/src/styles/blocks/variables.scss
new file mode 100644
index 0000000000..bd863eca09
--- /dev/null
+++ b/src/styles/blocks/variables.scss
@@ -0,0 +1,7 @@
+$tablet-min-width: 576px;
+$desktop-min-width: 1024px;
+
+$effectDuration: 0.6s;
+
+$main-text-color: #fff;
+$menu-color: #1d1d1d;
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 71cdf76de2..8189d9cede 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,21 +1,19 @@
-@import "utils";
-@import "fonts";
-@import "typography";
-@import "./utils/reset.scss";
+@import "./blocks/variables";
+@import "./blocks/mixins";
-@import "./blocks/title.scss";
-@import "./blocks/header.scss";
-@import "./blocks/main.scss";
-@import "./blocks/body.scss";
-@import "./blocks/product.scss";
-@import "./blocks/article.scss";
-@import "./blocks/pictures.scss";
-@import "./blocks/button.scss";
-@import "./blocks/address.scss";
-@import "./blocks/form.scss";
-@import "./blocks/footer.scss";
-@import "./blocks/navigation.scss";
-@import "./blocks/icon.scss";
-@import "./blocks/top_header.scss";
-@import "./blocks/menu.scss";
-@import "./blocks/links.scss";
+@import "./blocks/header";
+@import "./blocks/page";
+@import "./blocks/top-bar";
+@import "./blocks/icon";
+@import "./blocks/menu";
+@import "./blocks/nav";
+@import "./blocks/section-title";
+@import "./blocks/main";
+@import "./blocks/product";
+@import "./blocks/recommended";
+@import "./blocks/container";
+@import "./blocks/move-free";
+@import "./blocks/categories";
+@import "./blocks/button";
+@import "./blocks/contact-form";
+@import "./blocks/footer";
+
+
+
+
+
+
+
+
-
-
- Move Free
+
+
+ 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.
+Compare bikes
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Ride in town ST
+An open frame for an upright riding position as the most comfortable ride in town.
+$ 2 590
+
+ Agile ride 3
+The lightweight frame that has earned its street tread as a sleek, agile ride.
+$ 2 090
+The details
+
+
+
+
+
+
+
+
+
+
+
+ Explore
+
+
+ Auto Unlock
+The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime.
+Range & Integrated lights
+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.
+Hydraulic disc brakes & Lightweight
+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.
+Contact us
+
+
+
+
+
+
+
+
+
+ Phone
+ +1 234 5555-55-55 +
+ Email
+ hello@miami.com +
+
+
suite 700
Minneapolis, MN 55401 +
+ Address
+ 400 first ave.suite 700
Minneapolis, MN 55401 +
The details
-
- 
- 
-
-
-
-
- Auto Unlock
-- The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime. -
-
- 
-
- 
-
-
-
-
-
- Range & Integrated lights
-- 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. -
-
- 
-
- 
-
-
-
-
-
- - Hydraulic disc brakes & Lightweight -
-- 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. -
-Contact us
- - - - - -Phone
-+1 234 5555-55-55
-hello@miami.com
-Address
-
- 400 first ave.
- suite 700
- Minneapolis, MN 55401
-