Style fixes

frontend/components/CustomersVoice.vue

@@ -1,6 +1,5 @@
 <template>
  <section class="customers-voice">
- <v-img src="/img/indexAssets/customerVoice.png" class="bg" />
  <v-container>
  <v-row class="section-title flex-center">
  <h1>Customers voice</h1>
@@ -82,12 +81,6 @@ section {
  box-sizing: border-box;
  margin-top: -240px;
 }
-.bg {
- position: absolute;
- width: 100%;
- filter: contrast(50%);
- z-index: 1;
-}
 .container {
  position: relative;
  z-index: 3;

frontend/components/Features.vue

@@ -1,10 +1,9 @@
 <template>
  <section class="features-section">
- <v-img src="/img/indexAssets/features.png" class="bg" />
  <v-row class="section-title flex-center mb-10">
  <h1>Features</h1>
  </v-row>
- <v-row v-for="(feature, index) in features" :key="index">
+ <v-row v-for="(feature, index) in features" :key="index" class="mb-6">
  <v-col class="feature" offset="3">
  <v-card :class="index % 2 ? 'bg-dark' : 'bg-white'" elevation="24">
  <v-row>
@@ -22,7 +21,6 @@
  </v-card>
  </v-col>
  </v-row>
- <v-img aspect-ratio="1.4" src="/img/indexAssets/featuresWhyUs.png" class="bg-fill" />
  </section>
 </template>
 
@@ -81,20 +79,6 @@ section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
- margin-bottom: 80px;
-}
-.bg {
- position: absolute;
- width: 100%;
- filter: contrast(50%);
- z-index: 1;
-}
-.bg-fill {
- position: absolute;
- width: 100%;
- filter: contrast(50%);
- margin-top: -80px;
- z-index: 0;
 }
 .section-title {
  position: relative;
@@ -130,10 +114,4 @@ section {
  margin-top: -80px;
  }
 }
-@media only screen and (max-width: 1200px) {
- .bg {
- width: inherit;
- height: 100%;
- }
-}
 </style>

frontend/components/Games.vue

@@ -1,6 +1,5 @@
 <template>
  <section class="services">
- <v-img aspect-ratio="1.8" src="/img/indexAssets/services.png" class="bg" />
  <v-container>
  <v-row class="section-title flex-center mb-10">
  <h1>Our Services</h1>
@@ -56,19 +55,6 @@ export default {
  align-items: center;
 }
 
-section {
- position: relative;
- width: 100%;
- box-sizing: border-box;
-}
-
-.bg {
- position: absolute;
- width: 100%;
- filter: contrast(50%);
- z-index: 1;
-}
-
 .container {
  position: relative;
  z-index: 3;

frontend/components/HowItWorks.vue

@@ -1,9 +1,8 @@
 <template>
  <section class="flex-center">
- <v-img src="/img/indexAssets/howItWorks.png" class="bg" />
  <v-container>
  <v-card elevation="3">
- <v-card-title class="section-title flex-center">
+ <v-card-title class="section-title flex-center mb-5">
  <h1>How KingBoosting Works ?</h1>
  </v-card-title>
 
@@ -70,16 +69,6 @@ section {
  box-sizing: border-box;
  margin-bottom: 80px;
 }
-.bg {
- position: absolute;
- width: 100%;
- margin-top: -7%;
- filter: contrast(50%);
- z-index: 1;
-}
-img {
- height: 100vh;
-}
 .container {
  position: relative;
  z-index: 3;

frontend/components/WhyUs.vue

@@ -1,6 +1,5 @@
 <template>
- <section class="why-us-section">
- <v-img src="/img/indexAssets/whyUs.png" class="bg" />
+ <section class="why-us-section pt-5">
  <v-container>
  <v-row class="section-title flex-center mb-8">
  <h1>Why Us ?</h1>
@@ -95,16 +94,6 @@ section {
  box-sizing: border-box;
  margin-bottom: 80px;
 }
-.bg {
- position: absolute;
- top: 10%;
- width: 100%;
- filter: contrast(50%);
- z-index: 1;
-}
-img {
- height: 100vh;
-}
 .container {
  position: relative;
  flex-direction: column;

frontend/components/layout/AppBarComponent.vue

@@ -88,4 +88,7 @@ export default {
 .v-tab {
  font-size: 16px;
 }
+a:hover {
+ color: purple !important;
+}
 </style>

frontend/pages/index.vue

@@ -1,11 +1,11 @@
 <template>
  <v-layout column fill-height>
- <v-img src="/img/indexAssets/kingBoosting.png" class="bg" />
+ <img src="/img/indexAssets/featuresWhyUs.png" class="bg" />
  <v-container>
  <v-row align="center" justify="center" class="logo">
  <img src="/img/logo/logo.png" alt="Logo" width="55%" class="mt-15" />
  </v-row>
- <v-row justify="center" class="mt-7 mb-14">
+ <v-row justify="center" class="ma-14">
  <v-btn-toggle rounded v-model="undefined" background-color="transparent">
  <v-btn class="hero-btn" to="/division-boosting">Get Boosted</v-btn>
  <v-btn class="hero-btn" to="/coaching">Get Coached</v-btn>
@@ -26,9 +26,9 @@
 .bg {
  position: absolute;
  width: 100%;
- filter: contrast(70%);
+ filter: brightness(0.5);
  z-index: 1;
- opacity: 0.4;
+ /* opacity: 0.86; */
 }
 .container {
  position: relative;

frontend/plugins/particles.js

@@ -1,7 +1,5 @@
 require("particles.js");
 
 export default (context, inject) => {
- if (!context.isDev) {
- particlesJS.load("particles-js", "/particlesjs-config.json");
- }
+ particlesJS.load("particles-js", "/particlesjs-config.json");
 }

frontend/static/css/main.css

@@ -1,5 +1,4 @@
 html {
- background-color: black;
  /* has to be scroll, not auto; */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
@@ -11,15 +10,13 @@ html {
  font-feature-settings: normal;
  font-variation-settings: normal
 }
-
+section {
+ background-color: rgb(24, 2, 29) !important;
+}
 .v-application {
  font-family: Open Sans, sans-serif;
 }
 
-.services-section {
- background-color: black;
-}
-
 .languages {
  top: 0 !important;
  position: absolute !important;
@@ -38,10 +35,6 @@ html {
  text-decoration: none !important;
 }
 
-.v-application a:hover {
- color: purple !important;
-}
-
 .selectedGame {
  background: bottom / cover no-repeat url(/img/backgrounds/active-game-bg.png);
 }