diff --git a/src/icons/Default play.png b/src/icons/Default play.png new file mode 100644 index 00000000..06b8bcf3 Binary files /dev/null and b/src/icons/Default play.png differ diff --git a/src/icons/KateVR--logo.svg b/src/icons/KateVR--logo.svg new file mode 100644 index 00000000..c58f7979 --- /dev/null +++ b/src/icons/KateVR--logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/icons/NICE TO MEET YOU!.png b/src/icons/NICE TO MEET YOU!.png new file mode 100644 index 00000000..909d4c2e Binary files /dev/null and b/src/icons/NICE TO MEET YOU!.png differ diff --git a/src/icons/Selected play.png b/src/icons/Selected play.png new file mode 100644 index 00000000..0d48bd7d Binary files /dev/null and b/src/icons/Selected play.png differ diff --git a/src/icons/button.png b/src/icons/button.png new file mode 100644 index 00000000..ce50c5bf Binary files /dev/null and b/src/icons/button.png differ diff --git a/src/icons/close.png b/src/icons/close.png new file mode 100644 index 00000000..1254a23d Binary files /dev/null and b/src/icons/close.png differ diff --git a/src/icons/contact--up.png b/src/icons/contact--up.png new file mode 100644 index 00000000..bcc3ca19 Binary files /dev/null and b/src/icons/contact--up.png differ diff --git a/src/icons/favicon.ico b/src/icons/favicon.ico new file mode 100644 index 00000000..4f7256bf Binary files /dev/null and b/src/icons/favicon.ico differ diff --git a/src/icons/footer--face.png b/src/icons/footer--face.png new file mode 100644 index 00000000..43e4b102 Binary files /dev/null and b/src/icons/footer--face.png differ diff --git a/src/icons/footer--reddit.png b/src/icons/footer--reddit.png new file mode 100644 index 00000000..1985cd4c Binary files /dev/null and b/src/icons/footer--reddit.png differ diff --git a/src/icons/footer--twit.png b/src/icons/footer--twit.png new file mode 100644 index 00000000..9f72cc28 Binary files /dev/null and b/src/icons/footer--twit.png differ diff --git a/src/icons/footer--youtube.png b/src/icons/footer--youtube.png new file mode 100644 index 00000000..c8c9525f Binary files /dev/null and b/src/icons/footer--youtube.png differ diff --git a/src/images/ABOUT US-fifth.png b/src/images/ABOUT US-fifth.png new file mode 100644 index 00000000..4956095a Binary files /dev/null and b/src/images/ABOUT US-fifth.png differ diff --git a/src/images/ABOUT US-first.png b/src/images/ABOUT US-first.png new file mode 100644 index 00000000..41c2bad3 Binary files /dev/null and b/src/images/ABOUT US-first.png differ diff --git a/src/images/ABOUT US-fourth.png b/src/images/ABOUT US-fourth.png new file mode 100644 index 00000000..ed005029 Binary files /dev/null and b/src/images/ABOUT US-fourth.png differ diff --git a/src/images/ABOUT US-second.png b/src/images/ABOUT US-second.png new file mode 100644 index 00000000..186d088f Binary files /dev/null and b/src/images/ABOUT US-second.png differ diff --git a/src/images/ABOUT US-seventh.png b/src/images/ABOUT US-seventh.png new file mode 100644 index 00000000..472ae78a Binary files /dev/null and b/src/images/ABOUT US-seventh.png differ diff --git a/src/images/ABOUT US-sixth.png b/src/images/ABOUT US-sixth.png new file mode 100644 index 00000000..3c1b96a8 Binary files /dev/null and b/src/images/ABOUT US-sixth.png differ diff --git a/src/images/ABOUT US-third.png b/src/images/ABOUT US-third.png new file mode 100644 index 00000000..5d084ca4 Binary files /dev/null and b/src/images/ABOUT US-third.png differ diff --git a/src/images/Shapes.png b/src/images/Shapes.png new file mode 100644 index 00000000..26ed3e89 Binary files /dev/null and b/src/images/Shapes.png differ diff --git a/src/images/about--img.png b/src/images/about--img.png new file mode 100644 index 00000000..437bbbd7 Binary files /dev/null and b/src/images/about--img.png differ diff --git a/src/images/bottom--group.png b/src/images/bottom--group.png new file mode 100644 index 00000000..d3fa295c Binary files /dev/null and b/src/images/bottom--group.png differ diff --git a/src/images/gaming--first.png b/src/images/gaming--first.png new file mode 100644 index 00000000..de47dca7 Binary files /dev/null and b/src/images/gaming--first.png differ diff --git a/src/images/gaming--fourth.png b/src/images/gaming--fourth.png new file mode 100644 index 00000000..6d292b6a Binary files /dev/null and b/src/images/gaming--fourth.png differ diff --git a/src/images/gaming--second.png b/src/images/gaming--second.png new file mode 100644 index 00000000..9e12194a Binary files /dev/null and b/src/images/gaming--second.png differ diff --git a/src/images/gaming--third.png b/src/images/gaming--third.png new file mode 100644 index 00000000..b97317ce Binary files /dev/null and b/src/images/gaming--third.png differ diff --git a/src/images/header__logo.png b/src/images/header__logo.png new file mode 100644 index 00000000..31aac8f3 Binary files /dev/null and b/src/images/header__logo.png differ diff --git a/src/images/tech--img.png b/src/images/tech--img.png new file mode 100644 index 00000000..d8377a62 Binary files /dev/null and b/src/images/tech--img.png differ diff --git a/src/images/why--1.png b/src/images/why--1.png new file mode 100644 index 00000000..e606eb49 Binary files /dev/null and b/src/images/why--1.png differ diff --git a/src/images/why--2.png b/src/images/why--2.png new file mode 100644 index 00000000..9f86657d Binary files /dev/null and b/src/images/why--2.png differ diff --git a/src/images/why--3.png b/src/images/why--3.png new file mode 100644 index 00000000..6b50b9f1 Binary files /dev/null and b/src/images/why--3.png differ diff --git "a/src/images/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2025-02-04 203440.png" "b/src/images/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2025-02-04 203440.png" new file mode 100644 index 00000000..5e24ed79 Binary files /dev/null and "b/src/images/\320\227\320\275\321\226\320\274\320\276\320\272 \320\265\320\272\321\200\320\260\320\275\320\260 2025-02-04 203440.png" differ diff --git a/src/index.html b/src/index.html index 8019b83e..39b105a9 100644 --- a/src/index.html +++ b/src/index.html @@ -6,14 +6,1137 @@ name="viewport" content="width=device-width, initial-scale=1.0" /> - Title + KatVR + + + + + + + + + - - -

Hello Mate Academy

+ + +
+
+
+
+
+ + + + +
+ +
    +
  • En
    • +
  • Ar
    • +
  • Cn
    • +
  • Fr
    • +
  • Gr
    • +
  • It
    • +
  • Pl
    • +
  • Ua
    • +
+
+
+ +
+
  • + + About + +
    • + +
  • + + Tech + +
    • + +
  • + + Benefits + +
    • + +
  • + + Contact + +
    • +
    + +
    +
    + +
    +
    + + + + + + + +
    +
    +
    +
    +
    +

    + HOW CAN WE + HELP + YOU? +

    +

    + Welcome to our help center. Our goal is to make the process of + getting acquainted and purchase as easy and pleasant as + possible. Need help with your KAT VR loco product? Many product + questions can be resolved by reviewing our Product Support + + FAQs + + . +

    +

    + Please also feel free to + + Contact Us + + directly should you need anything further. We’re happy to help. +

    + + Instruction manual + +
    +
    + + Where to go for a warranty + +
    +
    + + Service Policy + +
    +
    + + +86-0571-86105373 + +
    + + global@katvr.com + +
    + + overseas@katvr.com + +
    +
    + +
    + + +

    + THE NEW START OF + VR LOCOMOTION +

    +

    + Discover the most comprehensive VR Locomotion system, and unlock + infinite motion in any games on any platforms! +

    +
    1200$
    + + +
    +
    + +
    +
    + + More + ▼ + +
    +
    +
    + Previous + Next +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +

    + MORE THAN + GAMING! +

    +

    + This also made for people who are interested in… +

    +
    +

    EDUCATION

    +

    + Create educational simulations, trainings and much more with... +

    +
    +
    +

    REAL ESTATE

    +

    + Desighn architectural projects in a deeply realistic + environment... +

    +
    + +
    +

    SOCIAL INTERACTIONS

    +

    + Hang out with your friends in the virtual world when you + can’t... +

    +
    +
    +
    +
    + MORE THAN + GAMING! +
    +
    + This also made for people who are interested in… +
    +
    + gaming +
    EDUCATION
    +
    + Create aducational simulations, trainings and much more with + unlimited virtual space and minimum physical space +
    +
    +
    + gaming +
    REAL ESTATE
    +
    + Desighn architectural projects in a deeply realistic environment + allowing visitors to freely walk around, and feel their vibe +
    +
    +
    + gaming +
    FITNESS
    +
    + Combine business with pleasure, and discover countless ways to + stay fit while playing your favorite VR Games! +
    +
    +
    + gaming +
    SOCIAL INTERACTIONS
    +
    + Hang out with your friends in the virtual world when you can’t + meet space requirements +
    +
    +
    +
    +
    + +
    +
    +
    +
    + ABOUT + PRODUCT +
    + +
    1/5
    +
    + about--img + bottom--about +
    + +
    +
    + Previous + Next +
    + +
    +
    +
    +
    + +
    + KAT loco is a foot-based VR locomotion system that gives complete + physical control over lower-body actions, allowing you to freely + walk, run, and carry out just any other movement in virtual + reality. +
    + +
    +
    +
    +
    +
    +
    +
    Hello,
    +
    + NICE TO MEET + YOU! +
    +
    + improve__img + + improve__img + + improve__img + + improve__img + + improve__img + + improve__img + + improve__img +
    +
    + KAT VR is an independent company dedicated to the research, + development, and sales of VR Locomotion products and solutions. + Founded in 2013, we have quickly grown to become one of the + world’s leading professional suppliers of VR games’ & simulations’ + equipment +
    +
    +
    +
    + +
    +
    +

    + TECH + SPECS +

    + +
    + +
    +
    +

    SENSOR

    +

    + Weight: 35g / 1.23oz each +
    + Dimension: 50mm / 1.97in +
    + 24mm / 0.94in +
    + Light: LED lights +

    +
    + +
    +

    CONNECTION

    +

    + Wireless: Bluetooth 4.2 +
    + Signal range: 5m +
    + Receiver: USB 2.0 and above +

    +
    +
    + + +
    + Device + + + + + + + + + + + + +
    + + + + + + + + + + + +
    +
    + + +
    +
    +

    BATTERIES

    +

    + Type: Lithium-Ion polymer batteries +
    + Capacity: 370mAh +
    + Battery life: 10h continuous use / 150h standby +
    + Charging: Fast charging – 1 hour +
    + Voltage & current: 5V = 0.5A +

    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + WHY + KAT LOCO? +
    +
    + why--image +
    UNIVERSALLY COMPATIBLE
    +
    + KAT Loco offers universal compatibility across all major VR + headsets and platforms + ... + + platforms allowing you to play any VR game with support for + Free Locomotion + +
    +
    +
    + why--image +
    VR/PC CONTROL PANEL
    +
    + Our Multifunctional Software allows for quick access to KAT + Loco’s control panel both from + ... + + from a computer desktop, and directly from your VR headset. + +
    +
    +
    + why--image +
    WIRELESS SENSORS
    +
    + What makes it even more advanced, KAT Loco is entirely wireless, + and comes with a + ... + + complete system of algorithms, super durable batteries and + more!. + +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    Have any questions?
    +
    + GET IN + TOUCH +
    +
    + + + + + + + +
    + +
    + +
    +
    + Our manager will reply you within 15 minutes +
    +
    + +86-0571-86105373 +
    + global@katvr.com +
    + overseas@katvr.com +
    + + arrow--email +
    +
    +
    +
    + + diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss new file mode 100644 index 00000000..aea24eb1 --- /dev/null +++ b/src/styles/blocks/about.scss @@ -0,0 +1,231 @@ +@import '../utils/mixins'; + +.about { + &__content { + @include page-grid; + } + + &__tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + + color: #fff; + margin-top: 50px; + margin-bottom: 20px; + cursor: pointer; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + grid-row: 1; + } + + @include on-desktop { + grid-column: 9 / 13; + font-size: 36px; + } + + @include on-big-desktop { + grid-column: 11 / 15; + } + } + + &__other--tittle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 100%; + + color: #05c2df; + + @include on-desktop { + font-size: 36px; + } + } + + &--bottom { + height: 4px; + width: 44px; + + @include on-desktop { + display: none; + } + } + + &__number { + display: none; + + @include on-desktop { + display: block; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + + color: #05c2df; + + grid-column: 3 / 3; + grid-row: 1; + margin-top: 50px; + margin-left: -30px; + } + + @include on-big-desktop { + grid-column: 4 / 4; + } + } + + &__nav--button { + display: none; + + @include on-desktop { + display: block; + + grid-column: 3 / 6; + margin-top: 10px; + } + + @include on-big-desktop { + grid-column: 4 / 7; + } + } + &__image--wrapper { + text-align: center; + align-items: center; + justify-content: center; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + margin-top: 50px; + } + + @include on-desktop { + grid-column: 3 / 8; + } + + @include on-big-desktop { + grid-column: 4 / 10; + max-width: 900px; + } + } + + &__image { + width: 100%; + height: 190px; + object-fit: cover; /* або contain */ + display: block; + cursor: pointer; + + @include on-big-desktop { + height: 290px; + } + } + + &__text { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + color: #929292; + + grid-column: 1 / -1; + + margin-top: 20px; + margin-bottom: 25px; + + @include on-tablet { + grid-column: 4 / 7; + grid-row: 2; + margin-top: -100px; + } + + @include on-desktop { + grid-column: 9 / 13; + margin-top: -140px; + } + + @include on-big-desktop { + grid-column: 11 / 15; + margin-top: -190px; + } + } + + .button--video { + @include on-tablet { + margin-top: 5px; + margin-left: -10px; + } + &::before { + content: '▶'; + display: flex; + justify-content: center; + align-items: center; + font-size: 23px; + color: $primary; + + width: 70px; + height: 55px; + right: 14px; + border: 2px solid $primary; + border-radius: 50%; + + position: relative; + z-index: 1; + transition: color 0.3s; + + @include on-tablet { + width: 65px; + } + } + + &:hover::before { + color: white; + } + + &::after { + content: ''; + position: absolute; + left: 0; + width: 70px; + height: 70px; + border: 1px solid rgba($primary, 0.3); + border-radius: 50%; + + border-right-color: transparent; + + @include on-desktop { + width: 75px; + height: 75px; + } + } + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + } + + @include on-desktop { + grid-column: 9 /13; + } + + @include on-big-desktop { + grid-column: 11 / 14; + margin-top: -100px; + } + } +} diff --git a/src/styles/blocks/body.scss b/src/styles/blocks/body.scss new file mode 100644 index 00000000..48f2e2fa --- /dev/null +++ b/src/styles/blocks/body.scss @@ -0,0 +1,23 @@ +@import '../utils/mixins'; + +html, +body { + background: linear-gradient(to right, #191536, #000); + height: auto; + overflow-y: auto; + scroll-behavior: smooth; /* плавна прокрутка */ + margin: 0; + padding: 0; +} + +html.no-scroll, +body.no-scroll { + overflow: hidden; + height: 100%; /* іноді потрібно */ +} + +body.no-scroll { + position: relative; /* щоб уникнути зсувів */ + overflow: hidden; + height: 100vh; /* щоб не було прокрутки */ +} diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss new file mode 100644 index 00000000..45a529aa --- /dev/null +++ b/src/styles/blocks/button.scss @@ -0,0 +1,173 @@ +@import '../utils/mixins'; + +.button { + &--primary { + display: block; + width: 100%; + padding: 12px; + margin: 10px 0; + text-align: center; + background-color: #00d4ff; + color: #fff; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + + @include on-tablet { + display: none; + } + + &:hover { + background-color: #fff; + color: #05c2df; + transition: color 0.4s; + } + + &:disabled { + background-color: #191536; + color: #2f2f2f; + } + + grid-column: 1 / -1; + } + + &__primarys--wrapper { + display: flex; + justify-content: center; + align-items: center; + } + + &--primarys { + display: none; + width: 200px; + padding: 12px; + height: 47px; + background-color: #00d4ff; + color: #fff; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + justify-content: center; + align-items: center; + + @include on-tablet { + display: flex; + } + + &:hover { + background-color: #fff; + color: #05c2df; + transition: color 0.4s; + } + + &:disabled { + background-color: #191536; + color: #2f2f2f; + } + + grid-column: 1 / -1; + } +} + +$primary: #00d4ff; +$text-color: #fff; + +.button--video { + display: flex; + align-items: center; + padding: 10px 20px; + background: transparent; + border: none; + color: $text-color; + font-size: 16px; + font-family: Arial, sans-serif; + cursor: pointer; + position: relative; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 3; + margin-top: -40px; + } + + @include on-desktop { + grid-column: 2 / 5; + margin-left: -20px; + } + + @include on-big-desktop { + margin-top: -250px; + } + + &::before { + content: '▶'; + display: flex; + justify-content: center; + align-items: center; + font-size: 23px; + color: $primary; + + width: 70px; + height: 55px; + right: 14px; + border: 2px solid $primary; + border-radius: 50%; + + position: relative; + z-index: 1; + transition: color 0.3s; + + @include on-tablet { + width: 80px; + } + } + + &:hover::before { + color: white; + } + + &::after { + content: ''; + position: absolute; + left: 0; + width: 70px; + height: 70px; + border: 1px solid rgba($primary, 0.3); + border-radius: 50%; + + border-right-color: transparent; + + @include on-desktop { + width: 75px; + height: 75px; + } + } + + span { + position: relative; + display: block; + width: 100%; + + &::before, + &::after { + content: ''; + position: absolute; + top: 50%; + height: 1px; + background: linear-gradient(to right, $primary, transparent); + right: 0; + left: 0; + } + + &::before { + top: -10px; + } + + &::after { + top: 30px; + } + } +} diff --git a/src/styles/blocks/contact.scss b/src/styles/blocks/contact.scss new file mode 100644 index 00000000..ab0e9117 --- /dev/null +++ b/src/styles/blocks/contact.scss @@ -0,0 +1,331 @@ +@import '../utils/mixins'; + +.contact { + background-color: #05040b; + + &__content { + @include page-grid; + } + + &__about--tittle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + + color: #05c2df; + + grid-column: 1 / -1; + padding-top: 50px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + padding-top: 70px; + } + } + + &__main--tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + + color: #fff; + + grid-column: 1 / -1; + + margin-top: 15px; + margin-bottom: 35px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + padding-top: 80px; + } + + @include on-desktop { + font-size: 36px; + } + + @include on-big-desktop { + grid-column: 1 / 4; + } + } + + &__other--tittle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 100%; + + color: #05c2df; + + @include on-desktop { + font-size: 36px; + } + } + + &__form { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + grid-row: 1; + padding-top: 70px; + } + + @include on-desktop { + grid-column: 7 / 13; + } + + @include on-big-desktop { + grid-column: 9 / 16; + } + } + + &__input { + position: relative; + width: 100%; + background-color: #05040b; + border: none; + border-bottom: 1px solid #2f2f2f; + color: #929292; + margin-bottom: 20px; + outline: none; + height: 40px; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + + grid-column: 1 / -1; + + &::placeholder { + color: #929292; + transition: color 0.3s ease; + } + + &:hover::placeholder { + color: #05c2df; + } + + &:focus { + border-bottom-color: #05c2df; + } + + &:focus::placeholder { + color: transparent; + } + + &:hover { + border-bottom-color: #05c2df; + } + } + + &__message { + position: relative; + width: 100%; + background-color: #05040b; + border: none; + border-bottom: 1px solid #2f2f2f; + color: #929292; + margin-bottom: 20px; + outline: none; + resize: none; + + height: 80px; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + + grid-column: 1 / -1; + + &::placeholder { + color: #929292; + transition: color 0.3s ease; + } + + &:hover::placeholder { + color: #05c2df; + } + + &:focus { + border-bottom-color: #05c2df; + } + + &:focus::placeholder { + color: transparent; + } + + &:hover { + border-bottom-color: #05c2df; + } + } + + &__button { + display: block; + width: 100%; + height: 40px; + padding: 12px; + margin: 10px 0; + text-align: center; + background-color: #00d4ff; + color: #fff; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + + &:hover { + background-color: #fff; + color: #05c2df; + transition: color 0.4s; + } + + &:disabled { + background-color: #191536; + color: #2f2f2f; + } + } + + &__button--wrapper { + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 6; + + margin-bottom: 130px; + } + + @include on-desktop { + grid-column: 7 / 9; + } + + @include on-big-desktop { + grid-column: 9 / 11; + + margin-bottom: 200px; + } + } + + &__bottom { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 150%; + + color: #929292; + + grid-column: 1 / -1; + + margin-top: 30px; + + @include on-tablet { + grid-row: 1; + padding-top: 120px; + grid-column: 1 / 5; + font-size: 16px; + } + } + + &__desk--location { + display: none; + + @include on-tablet { + display: block; + + grid-column: 1 / 4; + grid-row: 2; + margin-top: -100px; + } + } +} + +.contact__desk--location a { + display: block; + margin-bottom: 8px; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 100%; + color: #929292; + text-decoration: none; + cursor: pointer; +} + +.contact__desk--location a:hover { + color: #00d4ff; + transition: color 0.3s ease; +} + +.scroll-arrow { + cursor: pointer; + + z-index: 1000; + right: 40px; + bottom: 150px; + + display: none; + width: 48px; + height: auto; + + font-size: 28px; + + pointer-events: auto; + + @include on-big-desktop { + grid-column: 15 / 16; + } +} + +@include on-desktop { + .scroll-arrow { + display: flex; + + grid-column: 12; + + padding-left: 30px; + + &:hover { + @include transision; + } + } +} + +@include on-big-desktop { + .scroll-arrow { + display: flex; + + grid-column: 15; + + padding-left: 60px; + + &:hover { + @include transision; + } + } +} + +input:-webkit-autofill, +textarea:-webkit-autofill { + -webkit-box-shadow: 0 0 0 1000px transparent inset !important; /* прибирає білий фон */ + -webkit-text-fill-color: #929292 !important; /* колір тексту */ + border-bottom: 2px solid #00e0ff !important; /* повертає твою лінію */ + transition: background-color 5000s ease-in-out 0s; +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 00000000..5c1eb8de --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,5 @@ +@import '../utils/mixins'; + +.container { + @include content-padding-inline; +} diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss new file mode 100644 index 00000000..277ec9ef --- /dev/null +++ b/src/styles/blocks/footer.scss @@ -0,0 +1,220 @@ +@import '../utils/mixins'; + +.footer { + background-color: #05040b; + &__content { + @include page-grid; + + @include on-tablet { + display: flex; + justify-content: space-between; + text-align: center; + + max-height: 100px; + } + } + + &__image { + width: 100%; + cursor: pointer; + + margin-left: 10px; + + &:hover { + @include transision; + } + } + + &__image--wrapper { + margin-top: 50px; + max-width: 70px; + } + + &__nav { + grid-column: 1 / 1; + grid-row: 2; + + margin-bottom: 50px; + + @include on-tablet { + margin-top: 20px; + } + + .nav__item { + margin-bottom: 0 !important; + margin-top: 10px; + } + + .nav__list { + @include on-tablet { + flex-direction: row; + } + + @include on-tablet { + gap: 40px; + } + } + + .nav__link { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 150%; + + color: #f2f2f2; + + position: relative; + text-decoration: none; + + display: inline-block; + + &:hover { + color: #05c2df; + background: none; + } + + &::after { + content: ''; + + position: absolute; + bottom: -4px; + transform-origin: center; + transform: scale(0); + + display: block; + + width: 50%; + height: 2px; + border-radius: 4px; + + @include on-tablet { + width: 80%; + } + + background-color: #05c2df; + transition: transform 0.3s; + } + + &:hover::after { + transform: scale(1); + } + } + } + + &__contact--block { + grid-column: 2 / -1; + grid-row: 2; + margin-top: 30px; + + @include on-tablet { + display: none; + } + + a { + display: block; + margin-bottom: 4px; + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 100%; + color: #929292; + text-decoration: none; + cursor: pointer; + + &:hover { + color: #00d4ff; + transition: color 0.3s ease; + } + } + } + + &__icons--media { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + + grid-column: 2 / -1; + + grid-row: 3; + + gap: 22px; + + margin-right: 70px; + margin-top: -140px; + + @include on-tablet { + margin-top: 20px; + margin-right: 0; + gap: 30px; + } + } + + &__facebook { + background-image: url(../icons/footer--face.png); + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + display: block; + + width: 18px; + height: 18px; + + &:hover { + @include transision; + } + } + + &__twitter { + background-image: url(../icons/footer--twit.png); + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + display: block; + + width: 18px; + height: 18px; + + &:hover { + @include transision; + } + } + + &__reddit { + background-image: url(../icons/footer--reddit.png); + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + display: block; + + width: 18px; + height: 18px; + + &:hover { + @include transision; + } + } + + &__youtube { + background-image: url(../icons/footer--youtube.png); + + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + display: block; + + width: 18px; + height: 18px; + + &:hover { + @include transision; + } + } +} diff --git a/src/styles/blocks/gaming.scss b/src/styles/blocks/gaming.scss new file mode 100644 index 00000000..7641966e --- /dev/null +++ b/src/styles/blocks/gaming.scss @@ -0,0 +1,265 @@ +@import '../utils/mixins'; + +.gaming { + background-color: #05040b; + + &__content--mobile { + @include page-grid; + + @include on-tablet { + display: none; + } + } + &__section--title { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + cursor: pointer; + + color: #ffff; + + margin-top: 33px; + + grid-column: 1 / -1; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + } + + &__main--otherclr { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 100%; + + color: #05c2df; + + @include on-big-desktop { + font-size: 36px; + } + } + + &__section--subtitle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 100%; + + color: #05c2df; + + grid-column: 1 / -1; + } + + &__section--heading { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 16px; + line-height: 100%; + + color: #fff; + } + + &__text--paragraph { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + color: #929292; + } + + &__mobile--block1, + &__mobile--block2, + &__mobile--block3, + &__mobile--block4 { + margin-top: 30px; + + grid-column: 1 / -1; + } + + &__mobile--block4 { + margin-bottom: 50px; + } + + &__content--more { + display: none; + + @include on-tablet { + @include page-grid; + } + } + + &__main--tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + text-align: center; + + cursor: pointer; + + color: #fff; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + grid-column: 3 / 5; + grid-row: 1; + margin-top: 70px; + } + + @include on-desktop { + grid-column: 4 / 10; + grid-row: 1; + margin-top: 160px; + } + + @include on-big-desktop { + grid-column: 6 / 12; + font-size: 36px; + } + } + + &__main--about { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 12px; + line-height: 100%; + text-align: center; + + color: #05c2df; + + @include on-tablet { + grid-column: 2 / 6; + grid-row: 2; + margin-top: 12px; + margin-bottom: 30px; + } + + @include on-desktop { + grid-column: 4 / 10; + grid-row: 2; + margin-top: 16px; + margin-bottom: 70px; + } + + @include on-big-desktop { + grid-column: 6 / 12; + font-size: 17px; + } + } + + &__img { + max-width: 98px; + height: auto; + object-fit: cover; + display: block; + margin: 0 auto 10px; + margin-bottom: 22px; + } + + &__main__about { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 16px; + line-height: 100%; + + color: #fff; + + margin-bottom: 20px; + } + + &__main--text { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + text-align: center; + + color: #929292; + } + + &__block--first { + @include on-tablet { + grid-column: 1 / 4; + margin-bottom: 40px; + } + + @include on-desktop { + grid-row: 3; + grid-column: 1 / 4; + margin-bottom: 40px; + } + + @include on-big-desktop { + grid-column: 1 / 5; + } + } + + &__block--third { + @include on-tablet { + grid-column: 1 / 4; + margin-top: 25px; + } + + @include on-desktop { + grid-column: 7 / 10; + margin-top: 10px; + } + + @include on-big-desktop { + grid-column: 9 / 13; + } + } + + &__block--second { + @include on-tablet { + grid-column: 4 / 7; + margin-top: -15px; + } + + @include on-big-desktop { + grid-column: 5 / 9; + } + } + + &__block--fourth { + @include on-tablet { + grid-column: 4 / 7; + margin-top: 10px; + margin-bottom: 40px; + } + + @include on-desktop { + grid-column: 10 / 15; + margin-top: 5px; + } + + @include on-big-desktop { + grid-column: 13 / 17; + margin-top: -15px; + } + } + + &__block--first, + &__block--second, + &__block--third, + &__block--fourth { + text-align: center; + align-items: center; + box-sizing: border-box; + &:hover { + @include transision; + + cursor: pointer; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 00000000..afc8ea77 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,203 @@ +@import '../utils/mixins'; + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background: linear-gradient(to right, #191536, #000); + overflow: visible; + height: auto; + + @include on-desktop { + min-height: 100vh; + position: relative; + } + + &__bottom--content { + @include page-grid; + } + + &__text--paragraph { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + + color: #929292; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + margin-top: -10px; + } + + @include on-desktop { + font-size: 20px; + grid-column: 2 / 6; + } + } + + &__text--price { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 18px; + line-height: 100%; + text-align: center; + + margin-bottom: 25px; + + color: #fff; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1; + margin-top: -80px; + margin-left: -40px; + } + + @include on-desktop { + grid-column: 2 / 2; + grid-row: 3; + } + + @include on-big-desktop { + font-size: 20px; + margin-top: -200px; + } + } + + &__title { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 26px; + line-height: 130%; + + color: #fff; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 4; + grid-row: 1; + margin-top: 55px; + } + + @include on-desktop { + grid-column: 1 / 7; + font-size: 54px; + margin-top: 145px; + } + } + + &__menu--icon { + font-size: 24px; + cursor: pointer; + } + + &__section--title { + font-weight: bold; + margin-top: 20px; + color: #fff; + + grid-column: 1 / -1; + } + + &__section--subtitle { + font-size: 12px; + color: #00d4ff; + margin-bottom: 10px; + } + + &__logo { + display: block; + width: 100%; + height: auto; + + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 4 / 7; + grid-row: 2; + margin-top: -20px; + } + + @include on-desktop { + grid-column: 6 / 14; + margin-top: -100px; + } + + @include on-big-desktop { + grid-column: 8 / 17; + } + } + + &__help--tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 130%; + + color: #fff; + } + + &__other--color { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 130%; + + color: #05c2df; + cursor: pointer; + } + + &__another--tittle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + color: #05c2df; + text-decoration: none; + } + + &__help--about { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + text-decoration: none; + + color: #929292; + margin-top: 11px; + + &:hover { + color: #05c2df; + } + } + + &__main--otherclr { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 26px; + line-height: 130%; + + color: #05c2df; + + @include on-desktop { + font-size: 54px; + } + } +} + +.menu, +.language-menu, +.help-menu, +.header__bottom--content, +.top__bar { + @include on-tablet { + overflow: visible !important; + height: auto !important; + } +} diff --git a/src/styles/blocks/icons.scss b/src/styles/blocks/icons.scss new file mode 100644 index 00000000..a86db74f --- /dev/null +++ b/src/styles/blocks/icons.scss @@ -0,0 +1,35 @@ +@import '../utils/mixins'; + +.icon { + cursor: pointer; + + display: block; + + width: 20px; + height: 20px; + + background-size: cover; + + &__menu { + background-image: url(../icons/button.png); + + &:hover { + @include transision; + } + + @include on-desktop { + display: none; + } + } + + &__close { + width: 16px; + height: 16px; + margin-right: 10px; + background-image: url('../icons/close.png'); + + &:hover { + @include transision; + } + } +} diff --git a/src/styles/blocks/improve.scss b/src/styles/blocks/improve.scss new file mode 100644 index 00000000..a0d81242 --- /dev/null +++ b/src/styles/blocks/improve.scss @@ -0,0 +1,159 @@ +@import '../utils/mixins'; + +.improve { + &__content { + @include page-grid; + } + + &__image--wrapper { + display: none; + + @include on-tablet { + display: flex; + grid-column: 5 / 7; + } + + @include on-desktop { + grid-column: 7 / 12; + } + + @include on-big-desktop { + grid-column: 9 / 14; + } + } + &__image--first, + &__image--second, + &__image--third, + &__image--fourth, + &__image--fifth, + &__image--sixth, + &__image--seventh { + display: none; + + @include on-tablet { + width: 100%; + height: 200px; + object-fit: contain; + display: block; + z-index: 1000; + + &:hover { + @include transision; + } + } + } + + &__image--fourth, + &__image--fifth { + display: none; + + @include on-desktop { + display: block; + } + } + + &__image--sixth, + &__image--seventh { + display: none; + + @include on-big-desktop { + display: block; + } + } + &__simple--tittle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 14px; + line-height: 100%; + + color: #05c2df; + + margin-bottom: 11px; + margin-top: 90px; + + @include on-big-desktop { + grid-column: 2 / 2; + } + } + + &__main--tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + cursor: pointer; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + color: #ffff; + grid-column: 1 / -1; + + @include on-tablet { + grid-column: 1 / 5; + } + + @include on-desktop { + font-size: 36px; + grid-column: 1 / 6; + } + + @include on-big-desktop { + color: transparent; + background-image: url(../icons/NICE\ TO\ MEET\ YOU!.png); + background-repeat: no-repeat; + background-size: contain; + background-position: center; + display: block; // елемент залишаємо + width: 400px; // задаємо ширину картинки + height: 100px; // і висоту + text-indent: -9999px; + margin-top: -30px; + + grid-column: 2 / 6; + } + } + + &__other--tittle { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 100%; + + color: #05c2df; + + @include on-desktop { + font-size: 36px; + } + } + + &__about { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + color: #929292; + grid-column: 1 / -1; + + margin-top: 22px; + margin-bottom: 50px; + + @include on-tablet { + grid-column: 1 / 5; + margin-top: -150px; + } + + @include on-desktop { + grid-column: 1 / 6; + margin-top: -135px; + } + + @include on-big-desktop { + grid-column: 2 / 8; + } + } +} diff --git a/src/styles/blocks/language.scss b/src/styles/blocks/language.scss new file mode 100644 index 00000000..a3d28c45 --- /dev/null +++ b/src/styles/blocks/language.scss @@ -0,0 +1,77 @@ +@import '../utils/mixins'; + +.language-dropdown { + position: relative; + display: inline-block; + color: white; + font-family: sans-serif; + + &--header { + display: none; + + @include on-desktop { + display: block; + } + } +} + +.language-button { + background: none; + border: none; + color: #05c2df; + font-size: 13px; + text-transform: capitalize; + cursor: pointer; + display: flex; + align-items: center; + gap: 1px; + margin-top: 30px; + width: 34px; + height: 24px; + + &--header { + margin: 0; + } +} + +.language-button, +.language-menus li { + text-transform: capitalize !important; +} + +.language-button:focus { + outline: 2px solid #2b8df0; + border-radius: 4px; +} + +.arrow { + font-size: 10px; +} + +.language-menus { + position: absolute; + top: 120%; + left: 0; + background: linear-gradient(to right, #191536, #000); + border: 1px solid #191536; + border-radius: 4px; + list-style: none; + padding: 0; + margin: 4px 0 0; + display: none; + z-index: 100; +} + +.language-menus li { + padding: 8px 12px; + cursor: pointer; + color: white; +} + +.language-menus li:hover { + background-color: #4e5e5f; +} + +.language-dropdown * { + text-transform: capitalize !important; +} diff --git a/src/styles/blocks/mains.scss b/src/styles/blocks/mains.scss new file mode 100644 index 00000000..82b2dbf2 --- /dev/null +++ b/src/styles/blocks/mains.scss @@ -0,0 +1,35 @@ +@import '../utils/mixins'; + +.nav__lists { + display: flex; + flex-direction: row; /* ← ось так */ + padding: 0; + list-style: none; + + .nav__item { + width: auto; + margin-bottom: 22px; + } + + .nav__link { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + + display: block; + + width: 100%; + padding: 1px 10px; // padding всередині, фон не виходить за межі + color: #fff; + text-decoration: none; + transition: + background 0.3s, + color 0.3s; + + &:hover { + color: #05c2df; + background-color: #0a0911; + } + } +} diff --git a/src/styles/blocks/menu.scss b/src/styles/blocks/menu.scss new file mode 100644 index 00000000..fde9921f --- /dev/null +++ b/src/styles/blocks/menu.scss @@ -0,0 +1,118 @@ +@import '../utils/mixins'; + +.menu, +.language-menu, +.help-menu { + position: fixed; + top: 0; + left: -100%; + width: 100%; + height: 100vh; /* висота вікна */ + overflow: hidden; /* сам блок не скролиться */ + z-index: 100; + padding: 0; /* padding прибираємо з батька */ + box-sizing: border-box; + + background-color: #161632; + transition: left 0.3s ease; + + @include on-tablet { + height: 50vh; + } + + @include on-desktop { + display: none; + } + + &.open { + left: 0; + } + + &__title { + margin-top: 0; + color: #00d4ff; + + span { + color: #00d4ff; + background-color: #161632; + } + } + + &__link { + display: block; + color: #fff; + text-decoration: none; + padding: 10px 0; + border-bottom: 1px solid #333; + } +} + +.help-menu { + overflow: hidden; + + &__text { + font-size: 14px; + color: #ccc; + } + + &__link { + color: #00d4ff; + text-decoration: underline; + display: block; + margin: 5px 0; + } +} + +.menu { + &.open { + left: 0; + } + &__wrapper--closed { + display: flex; + justify-content: flex-end; /* кнопка праворуч */ + align-items: center; + + width: 100%; + } +} + +.menu a, +.language-menu a { + display: block; + position: relative; + color: #fff; + text-decoration: none; + z-index: 1; + padding: 5px; // тільки для тексту +} + +/* Псевдоелемент розтягуємо на весь екран або весь aside */ +.menu a::before, +.language-menu a::before { + content: ''; + position: absolute; + top: 0; + left: -20px; /* компенсуємо padding тексту */ + width: 100%; /* ширина + padding з обох сторін */ + height: 100%; + background-color: #110e25; + z-index: -1; + transform: scaleX(0); + transform-origin: left; + transition: transform 0.3s ease; +} + +/* При ховері розкриваємо псевдоелемент */ +.menu a:hover::before, +.language-menu a:hover::before { + transform: scaleX(1); +} + +.menu__inner, +.language-menu__inner, +.help-menu__inner { + height: calc(100vh - 400px); + padding: 20px; /* відступи для тексту */ + overflow-y: auto; /* вертикальний скрол тільки для контенту */ + box-sizing: border-box; +} diff --git a/src/styles/blocks/nav.scss b/src/styles/blocks/nav.scss new file mode 100644 index 00000000..51e2d408 --- /dev/null +++ b/src/styles/blocks/nav.scss @@ -0,0 +1,39 @@ +@import '../utils/mixins'; + +.nav { + &__list { + display: flex; + flex-direction: column; + width: 100%; + list-style: none; + padding: 0; + + box-sizing: border-box; + } + + &__link { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 20px; + line-height: 130%; + display: block; + + width: 100%; + padding: 1px 10px; // padding всередині, фон не виходить за межі + color: #fff; + text-decoration: none; + transition: + background 0.3s, + color 0.3s; + + &:hover { + color: #05c2df; + background-color: #110e25; + } + } + + &__item { + width: 100%; + margin-bottom: 22px; + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 00000000..f4407942 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,7 @@ +@import '../utils/mixins'; + +.page { + &__body { + margin: 0; + } +} diff --git a/src/styles/blocks/tech.scss b/src/styles/blocks/tech.scss new file mode 100644 index 00000000..7eef9daf --- /dev/null +++ b/src/styles/blocks/tech.scss @@ -0,0 +1,370 @@ +.tech { + background: #0d0e12; + color: #fff; + position: relative; + overflow: hidden; + + &__title { + margin-top: 50px; + margin-bottom: 50px; + + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 100%; + + color: #00b7ff; + + @include on-desktop { + text-align: right; + } + + span { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + + color: #ffff; + } + } + + &__container { + display: flex; + flex-direction: column; + align-items: center; + + @media (min-width: 1280px) { + flex-direction: row; + justify-content: center; + align-items: center; + gap: 3rem; + } + } + + &__image-wrapper { + position: relative; + width: 280px; + height: 280px; + } + + &__image { + width: 100%; + height: auto; + display: block; + position: relative; + } + + &__svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: visible; + z-index: 0; + } + + /* Лінії SVG */ + &__path { + fill: none; + stroke: #00b7ff; + stroke-width: 2; + stroke-linecap: round; + stroke-dasharray: 400; + stroke-dashoffset: 400; + opacity: 0; + animation: drawSVG 1.5s ease forwards; + + &--left { + animation-delay: 0.3s; + } + + &--right { + animation-delay: 0.6s; + } + } + + &__info { + display: flex; + flex-direction: column; + gap: 2rem; + max-width: 280px; + text-align: left; + + &--right { + text-align: left; + } + } + + &__block--sensor { + margin-left: -30px; + margin-top: 75px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + } + + &__block--connection { + margin-top: 150px; + margin-right: 70px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + } + + &__block--battery { + margin-top: -140px; + margin-left: 40px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + } + &__block { + background: transparent; + + &-title { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 18px; + line-height: 100%; + + color: #ffff; + margin-bottom: 0.5rem; + } + + &-text { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + color: #929292; + } + } + + &__dot--desktop { + display: none; + + @include on-desktop { + display: block; + } + } + + &__dop { + position: absolute; + width: 30px; + height: 30px; + background: #00b7ff; + border-radius: 50%; + z-index: 2; + + text-align: center; + justify-content: center; + align-items: center; + cursor: pointer; + + &:hover { + @include transision; + } + + &--sensor { + top: -5%; + left: 35%; + } + &--connection { + top: 80%; + left: -5%; + } + &--battery { + top: 45%; + right: 20%; + } + + @include on-desktop { + display: none; + } + + &::after { + content: '+'; + color: #fff; + font-size: 25px; + } + } + + /* Точки */ + + &__dot { + display: none; + + position: absolute; + width: 16px; + height: 16px; + background: #00b7ff; + border-radius: 50%; + z-index: 2; + + &--sensor { + top: 5%; + left: 46%; + } + &--connection { + top: 20%; + left: 0%; + } + &--battery { + top: -15%; + right: -25%; + } + + @include on-desktop { + display: block; + } + } + + &__dots { + display: none; + + position: absolute; + width: 16px; + height: 16px; + background: #00b7ff; + border-radius: 50%; + z-index: 2; + + &--sensors { + top: -21%; + left: -98%; + } + &--connections { + top: 103%; + left: -70%; + } + &--batterys { + top: 53%; + right: 36%; + } + + @include on-desktop { + display: block; + } + } + + /* Лінії */ + &__line { + position: absolute; + height: 2px; + background: #00b7ff; + transform-origin: left center; + animation: lineDraw 1.2s ease forwards; + + &--sensor { + top: -19%; + left: -95%; + width: 405px; + animation-delay: 0.2s; + + &::after { + content: ''; + position: absolute; + left: 403px; + width: 2px; + height: 69px; + background: #00b7ff; + animation: lineDrawVertical 1s ease forwards 0.6s; + } + } + + &--connections { + top: 22%; + left: -29%; + width: 94px; + animation-delay: 0.4s; + } + + &--connection { + top: 105%; + left: -65%; + width: 100px; + animation-delay: 0.4s; + + &::after { + content: ''; + position: absolute; + top: -233px; + left: 100px; + width: 2px; + height: 235px; + background: #00b7ff; + animation: lineDrawVertical 1s ease forwards 0.8s; + } + } + + &--battery { + top: 55%; + left: 60%; + width: 172px; + transform-origin: right center; + animation-delay: 0.6s; + + &::after { + content: ''; + position: absolute; + top: -180px; + right: -2px; + width: 2px; + height: 182px; + background: #00b7ff; + animation: lineDrawVertical 1s ease forwards 1s; + } + } + } + + /* Мобільна версія */ + @media (max-width: 1280px) { + &__info { + display: none; + } + + &__dot { + display: block; + } + + &__line { + display: none; + } + } +} + +/* 🔹 Анімації */ + +@keyframes line-draw { + from { + transform: scaleX(0); + opacity: 0; + } + to { + transform: scaleX(1); + opacity: 1; + } +} + +@keyframes line-draw-vertical { + from { + transform: scaleY(0); + opacity: 0; + } + to { + transform: scaleY(1); + opacity: 1; + } +} diff --git a/src/styles/blocks/top__bar.scss b/src/styles/blocks/top__bar.scss new file mode 100644 index 00000000..a8b656f4 --- /dev/null +++ b/src/styles/blocks/top__bar.scss @@ -0,0 +1,150 @@ +@import '../utils/mixins'; + +.top__bar { + display: flex; + align-items: center; + justify-content: space-between; + + margin-top: 18px; + + &__logo-link { + &:hover { + @include transision; + } + } +} + +.top { + &__second--wrapper { + display: none; + + @include on-desktop { + display: flex; + text-align: center; + justify-content: center; + align-items: center; + gap: 36px; + } + .nav__item { + margin-bottom: 0 !important; + } + + .nav__link { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + + display: block; + + width: 100%; + padding: 1px 10px; // padding всередині, фон не виходить за межі + color: #fff; + text-decoration: none; + transition: + background 0.3s, + color 0.3s; + + &:hover { + color: #05c2df; + background-color: #110e25; + } + } + } + &__wrapper--icon { + display: flex; + gap: 20px; + } +} + +.bottom { + &__bar--desk { + display: none; + + @include on-desktop { + grid-column: 1 / -1; + grid-row: 6; + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 20px; + margin-bottom: 50px; + } + } + &__wrapper--second { + display: flex; + } + + &__wrapper--third { + max-width: 220px !important; /* можна змінити */ + margin: 20px auto; + font-family: sans-serif; + } + + &__button--top { + display: flex; /* щоб текст і стрілка в ряд */ + flex-direction: column; /* текст зверху, стрілка знизу */ + align-items: center; /* центруємо по горизонталі */ + justify-content: center; /* центруємо по вертикалі */ + text-decoration: none; /* прибираємо підкреслення */ + font-size: 16px; /* розмір тексту */ + cursor: pointer; + background: transparent; /* або свій фон */ + border: none; + gap: 5px; + + color: #05c2df; + + &:hover { + transition: color 0.4s; + } + } + + &--arrow--top { + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + } +} + +.nav-buttons { + display: flex; + justify-content: space-between; + margin-bottom: 6px; +} + +.nav-prev, +.nav-next { + color: #fff; /* білий текст */ + cursor: pointer; + + font-family: Inter, sans-serif; + font-weight: 500; + font-size: 16px; + line-height: 150%; + + &:hover { + @include transision; + + color: #05c2df; + } +} + +.progress-bar { + width: 100%; + height: 3px; + background-color: #2a2a2a; /* сірий фон */ + border-radius: 2px; + overflow: hidden; +} + +.progress-fill { + width: 35%; /* зміни для довжини активної частини */ + height: 100%; + background-color: #00d4ff; /* блакитний акцент */ +} + +.bottom__bar--desk > div { + flex: 1; +} diff --git a/src/styles/blocks/why.scss b/src/styles/blocks/why.scss new file mode 100644 index 00000000..d808fb5b --- /dev/null +++ b/src/styles/blocks/why.scss @@ -0,0 +1,247 @@ +@import '../utils/mixins'; + +.why { + background: linear-gradient(to bottom, #191536, #000); + &__content { + @include on-tablet { + @include page-grid; + } + } + + &__main--tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 21px; + line-height: 100%; + + color: #fff; + + padding-top: 70px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + grid-column: 1 / 3; + font-size: 36px; + + &:hover { + @include transision; + } + } + + @include on-desktop { + grid-column: 5 / 9; + margin-left: -20px; + } + + @include on-big-desktop { + grid-column: 8 / 12; + } + } + + &__main__othrttl { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 21px; + line-height: 100%; + + color: #05c2df; + + @include on-tablet { + font-size: 36px; + } + } + + &__image { + display: none; + + @include on-tablet { + display: block; + + max-width: 80px; + height: auto; + object-fit: cover; + margin: 0 auto 10px; + margin-bottom: 25px; + } + } + + &__stop__letters { + @include on-desktop { + display: none; + } + } + + &__more__letters { + display: none; + + @include on-desktop { + display: block; + } + } + + &__block--first { + margin-bottom: 20px; + margin-top: 32px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + text-align: center; + justify-content: center; + align-items: center; + + grid-column: 1 / 3; + cursor: pointer; + + &:hover { + @include transision; + } + } + + @include on-desktop { + grid-column: 1 / 5; + margin-top: 85px; + } + + @include on-big-desktop { + grid-column: 1 / 5; + } + } + + &__block--second { + margin-bottom: 20px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + text-align: center; + justify-content: center; + align-items: center; + + grid-column: 3 / 5; + cursor: pointer; + margin-top: 32px; + + &:hover { + @include transision; + } + } + + @include on-desktop { + grid-column: 5 / 9; + margin-top: 94px; + } + + @include on-big-desktop { + grid-column: 7 / 11; + } + } + + &__block--third { + padding-bottom: 20px; + + transition: transform 0.5s ease; + + &:hover { + transform: scale(0.9); + } + + @include on-tablet { + text-align: center; + justify-content: center; + align-items: center; + + grid-column: 5 / 7; + cursor: pointer; + margin-top: 32px; + + &:hover { + @include transision; + } + } + + @include on-desktop { + grid-column: 9 / 13; + margin-top: 107px; + } + + @include on-big-desktop { + grid-column: 13 / 17; + } + } + + &__tittle { + font-family: Inter, sans-serif; + font-weight: 900; + font-size: 16px; + line-height: 100%; + + color: #fff; + + margin-bottom: 10px; + } + + &__about { + font-family: Inter, sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 150%; + + color: #929292; + } + + &__button--wrapper { + display: none; + + @include on-desktop { + display: flex; + + grid-column: 6 / 9; + max-width: 200px; + margin-left: -20px; + } + + @include on-big-desktop { + display: none; + } + } + + &__button { + display: block; + width: 100%; + height: 50px; + padding: 12px; + margin: 10px 0; + text-align: center; + background-color: #00d4ff; + color: #fff; + font-weight: bold; + border: none; + border-radius: 4px; + cursor: pointer; + + &:hover { + background-color: #fff; + color: #05c2df; + transition: color 0.4s; + } + + &:disabled { + background-color: #191536; + color: #2f2f2f; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index fb9195d1..757fcff8 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,7 +1,21 @@ @import 'utils'; @import 'fonts'; @import 'typography'; - -body { - background: $c-gray; -} +@import './blocks/body'; +@import './blocks/container'; +@import './blocks/top__bar'; +@import './blocks/header'; +@import './blocks/icons'; +@import './blocks/page'; +@import './blocks/menu'; +@import './blocks/button'; +@import './blocks/mains'; +@import './blocks/language'; +@import './blocks/nav'; +@import './blocks/gaming'; +@import './blocks/about'; +@import './blocks/improve'; +@import './blocks/tech'; +@import './blocks/why'; +@import './blocks/contact'; +@import './blocks/footer'; diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 80c79780..36c98b71 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -1,6 +1,59 @@ -@mixin hover($_property, $_toValue) { - transition: #{$_property} 0.3s; - &:hover { - #{$_property}: $_toValue; +@mixin transision { + transform: scale(1.1); + transition: transform 0.5s ease; +} + +@mixin on-tablet { + @media (min-width: $tablet-min-width) { + @content; + } +} + +@mixin on-desktop { + @media (min-width: $desktop-min-width) { + @content; + } +} + +@mixin on-big-desktop { + @media (min-width: $big-desktop-min-width) { + @content; + } +} + +@mixin content-padding-inline() { + padding-inline: 20px; + + @include on-tablet { + padding-inline: 34px; + } + + @include on-desktop { + padding-inline: 118px; + } + + @include on-big-desktop { + padding-inline: 224px; + } +} + +@mixin page-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 20px; + + @include on-tablet { + grid-template-columns: repeat(6, 1fr); + column-gap: 20px; + } + + @include on-desktop { + grid-template-columns: repeat(12, 1fr); + column-gap: 20px; + } + + @include on-big-desktop { + grid-template-columns: repeat(16, 1fr); + column-gap: 20px; } } diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss index aeb006ff..e00efe00 100644 --- a/src/styles/utils/_vars.scss +++ b/src/styles/utils/_vars.scss @@ -1 +1,4 @@ $c-gray: #eee; +$tablet-min-width: 767px; +$desktop-min-width: 1280px; +$big-desktop-min-width: 1900px;