-
{status || 'Oops!'}
-
{statusText}
+
+
+
+
+
+ {status || 'Oops!'}
+
{statusText}
+
+
+
-
)
}
diff --git a/packages/client/src/pages/Main/Main.scss b/packages/client/src/pages/Main/Main.scss
index 2ef3c23..d772213 100644
--- a/packages/client/src/pages/Main/Main.scss
+++ b/packages/client/src/pages/Main/Main.scss
@@ -1,21 +1,27 @@
@import '../../scss/vars';
.promo-page {
- background-color: $c_default-background;
- height: 100%;
- display: flex;
- position: relative;
+ &__content {
+ width: 600px;
+ margin: auto;
+ }
- &__logo {
- width: 100%;
- height: auto;
+ &__title {
+ margin-bottom: 40px;
}
- &__button {
- position: absolute;
+ &__desc {
+ font-size: 18px;
+ line-height: 1.6;
+ text-align: center;
+ margin-bottom: 60px;
+ text-shadow: $main-text-shadow;
+ }
- bottom: 100px;
- left: 50%;
- transform: translateX(-50%);
+ &__actions {
+ display: flex;
+ gap: 20px;
+ justify-content: center;
+ flex-wrap: wrap;
}
}
diff --git a/packages/client/src/pages/Main/Main.tsx b/packages/client/src/pages/Main/Main.tsx
index ed3332b..e0c06dd 100644
--- a/packages/client/src/pages/Main/Main.tsx
+++ b/packages/client/src/pages/Main/Main.tsx
@@ -1,18 +1,51 @@
-import PromoImage from '@/assets/images/svg/FT-promo.svg'
import './Main.scss'
-
+import { useEffect, useState } from 'react'
+import { CustomPageTitle } from '@/components/ui/CustomPageTitle/CustomPageTitle'
import { Button } from '@/components/ui/Button/Button'
+import { EnemyTank } from './components/EnemyTanks/EnemyTank'
export const Main = () => {
+ const [isLoaded, setIsLoaded] = useState(false)
+
+ useEffect(() => {
+ setIsLoaded(true)
+ }, [])
+
return (
- 
-
+
+
+
+
+
+
+
+
+ Испытай ностальгию и разрушай врагов!
+ Прокачай танк, сразись с боссами и стань героем эпохи.
+ Вступай в бой прямо сейчас!
+
+
+
+
+
+
+
+
)
}
diff --git a/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss
new file mode 100644
index 0000000..7b07b16
--- /dev/null
+++ b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.scss
@@ -0,0 +1,127 @@
+@import '../../../../scss/vars.scss';
+
+@mixin absoluteAndUserselect {
+ position: absolute;
+ user-select: none;
+}
+
+@mixin smokeAnimate($delay, $fadeInUp, $float) {
+ animation-delay: $delay;
+ animation: fadeInUp $fadeInUp ease-out forwards,
+ float $float ease-in-out infinite;
+}
+
+.enemy-tank {
+ position: absolute;
+ left: 0;
+ top: 0;
+ bottom: 0;
+ width: 40%;
+ overflow: hidden;
+ z-index: -1;
+
+ &_right {
+ left: auto;
+ right: 0;
+ }
+
+ &__machine {
+ @include absoluteAndUserselect();
+
+ left: 0;
+ bottom: 0;
+ width: 300px;
+
+ &_right {
+ left: auto;
+ right: 0;
+ }
+ }
+}
+
+.tank-smoke {
+ &::after {
+ content: '';
+ position: absolute;
+ width: 600px;
+ height: 600px;
+ bottom: 0;
+ left: 0;
+ transform: translate(-50%, 50%);
+ background: $red_ligth_gradient;
+ }
+
+ &_right {
+ &::after {
+ left: auto;
+ right: 0;
+ transform: translate(50%, 50%);
+ }
+ }
+
+ &__bottom {
+ @include absoluteAndUserselect();
+ @include smokeAnimate(2s, 0.6s, 15s);
+
+ left: -200px;
+ bottom: -200px;
+ width: 600px;
+
+ &_right {
+ left: auto;
+ right: -200px;
+ }
+ }
+
+ &__middle {
+ @include absoluteAndUserselect();
+ @include smokeAnimate(4s, 0.8s, 8s);
+
+ left: -62px;
+ bottom: 220px;
+ width: 280px;
+
+ &_right {
+ left: auto;
+ right: -62px;
+ }
+ }
+
+ &__top {
+ @include absoluteAndUserselect();
+ @include smokeAnimate(0s, 1s, 10s);
+
+ left: -50px;
+ bottom: 410px;
+ width: 200px;
+
+ &_right {
+ left: auto;
+ right: -50px;
+ }
+ }
+}
+
+@keyframes float {
+ 0% {
+ transform: translate(0, 0);
+ }
+ 25% {
+ transform: translate(5px, -5px);
+ }
+ 50% {
+ transform: translate(-5px, 10px);
+ }
+ 75% {
+ transform: translate(10px, -5px);
+ }
+ 100% {
+ transform: translate(0, 0);
+ }
+}
+
+@keyframes fadeInUp {
+ 0% {
+ bottom: -300px;
+ }
+}
diff --git a/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx
new file mode 100644
index 0000000..faf7db6
--- /dev/null
+++ b/packages/client/src/pages/Main/components/EnemyTanks/EnemyTank.tsx
@@ -0,0 +1,58 @@
+import './EnemyTank.scss'
+import EnemyTankLeft from '@/assets/images/enemy-tank_left.png'
+import EnemyTankRight from '@/assets/images/enemy-tank_right.png'
+import SmokeBottom from '@/assets/images/smoke-bottom.png'
+import SmokeMiddle from '@/assets/images/smoke-middle.png'
+import SmokeTop from '@/assets/images/smoke-top.png'
+
+type EnemyTanksPropsType = {
+ side?: 'left' | 'right'
+ title?: string
+ isLoaded?: boolean
+}
+
+export const EnemyTank = (props: EnemyTanksPropsType) => {
+ const { side = 'left', title = 'tank wars', isLoaded = false } = props
+ const tankImage = side === 'right' ? EnemyTankRight : EnemyTankLeft
+
+ return (
+
+
+
+
+ )
+}
diff --git a/packages/client/src/scss/base.scss b/packages/client/src/scss/base.scss
index ffeb6ef..4bca365 100644
--- a/packages/client/src/scss/base.scss
+++ b/packages/client/src/scss/base.scss
@@ -2,11 +2,22 @@
box-sizing: border-box;
}
+html,
+body {
+ overflow-x: hidden;
+}
+
html,
body,
#root {
width: 100%;
- height: 100%;
+ min-height: 100vh;
margin: 0;
padding: 0;
+ font-family: $f_default-font-family;
+ color: $text-color;
+}
+
+#root {
+ background-image: $img_default-background;
}
diff --git a/packages/client/src/scss/grid-system.scss b/packages/client/src/scss/grid-system.scss
new file mode 100644
index 0000000..784b0ea
--- /dev/null
+++ b/packages/client/src/scss/grid-system.scss
@@ -0,0 +1,40 @@
+@use 'sass:math';
+@import './vars.scss';
+
+.container-fluid {
+ display: flex;
+ width: 100%;
+ max-width: $container_fluid-max-width;
+ padding: $container_fluid-padding;
+}
+
+.container {
+ max-width: $container-max-width;
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: $gutter-width;
+ padding-left: $gutter-width;
+ width: 100%;
+}
+
+.row {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: calc($gutter-width / 2 * -1);
+ margin-left: calc($gutter-width / 2 * -1);
+}
+
+.column {
+ padding-right: calc($gutter-width / 2);
+ padding-left: calc($gutter-width / 2);
+ flex-basis: 0;
+ flex-grow: 1;
+ max-width: 100%;
+}
+
+@for $i from 1 through $grid-columns {
+ .col-#{$i} {
+ flex: 0 0 math.percentage(math.div($i, $grid-columns));
+ max-width: math.percentage(math.div($i, $grid-columns));
+ }
+}
diff --git a/packages/client/src/scss/styles.scss b/packages/client/src/scss/styles.scss
index 9d0a765..09ce2bc 100644
--- a/packages/client/src/scss/styles.scss
+++ b/packages/client/src/scss/styles.scss
@@ -1,3 +1,4 @@
-@import 'normalize';
-@import 'base';
-@import 'vars';
+@import './normalize.scss';
+@import './vars.scss';
+@import './base.scss';
+@import './grid-system.scss';
diff --git a/packages/client/src/scss/vars.scss b/packages/client/src/scss/vars.scss
index b5a1abf..6993b3e 100644
--- a/packages/client/src/scss/vars.scss
+++ b/packages/client/src/scss/vars.scss
@@ -6,13 +6,50 @@ $f_default-font-family: 'Roboto', sans-serif;
// images
$img_default-background: url('@/assets/images/page-background.png');
+// main colors
+$primary-color: #839d22;
+$second-color: #00aeef;
+$text-color: #f8f8f8;
+
// colors
$c_default-background: #010101;
-$c_button: #839d22;
+
+$c_button: $primary-color;
$c_button-top: #d9eca2;
$c_button-bottom: #53650b;
+
+$c_button_blue: $second-color;
+$c_button-top_blue: #5fe1ff;
+$c_button-bottom_blue: #0079a7;
+
$c_white: #ffffff;
$c_black: #000;
// fonts/links
$c_font-default: $c_white;
+
+// animations
+$animation-base-speed: 0.18s;
+
+// effects
+$red-ligth-gradient: radial-gradient(#fc2204 -40%, transparent 70%);
+$main-text-shadow: 1px 0 $c_black, -1px 0 $c_black, 0 1px $c_black,
+ 0 -1px $c_black, 1px 1px $c_black, -1px -1px $c_black, 1px -1px $c_black,
+ -1px 1px $c_black;
+
+// headers
+$nav_list-gap: 40px;
+$nav_list-padding-y: 48px;
+$nav_list-padding-x: 0;
+$nav_link-font-size: 18px;
+$nav_link-font-weight: 900;
+
+// layouts
+$layout_body-m-top: 40px;
+
+// grid system
+$grid-columns: 12;
+$gutter-width: 15px;
+$container-max-width: 1140px;
+$container_fluid-padding: 0 40px;
+$container_fluid-max-width: 100%;
+
+