add sass modules

README.md

@@ -1,6 +1,4 @@
-# ArakRail
+# arakrail
-
-> ArakRail Front-End 
 
 ## Build Setup
 

assets/sass/_extentions.scss

@@ -0,0 +1,97 @@
+%defaultTransition {
+  @include transition(0.3s);
+}
+
+%userSelect {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+
+%appearance {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+
+%titleShape {
+  &::after {
+    content: '';
+    display: block;
+    background: #000;
+    width: 40px;
+    height: 4px;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    @extend %defaultTransition;
+  }
+
+  &:lang(en) {
+    &::after {
+      right: auto;
+      left: 0;
+    }
+  }
+
+  &.active {
+    &::after {
+      width: 100%;
+    }
+  }
+}
+
+%titleShapeCenter {
+  &::after {
+    content: '';
+    display: block;
+    background: #000;
+    width: 50px;
+    height: 4px;
+    position: absolute;
+    left: calc(50% - 25px);
+    bottom: 0;
+    @extend %defaultTransition;
+  }
+
+  &.active {
+    &::after {
+      width: 100%;
+      left: 0;
+    }
+  }
+}
+
+%imgBoxShape {
+  &::before {
+    content: '';
+    display: block;
+    width: 80%;
+    height: 40px;
+    background: $theme;
+    position: absolute;
+    top: -30px;
+    right: 10%;
+    z-index: -1;
+  }
+}
+
+%imgBoxShape-reverse {
+  &::before {
+    content: '';
+    display: block;
+    width: 80%;
+    height: 40px;
+    background: $theme;
+    position: absolute;
+    bottom: -30px;
+    left: 10%;
+    z-index: -1;
+  }
+}
+
+%defaultBoxShadow {
+  @include boxShadow(0 0px 20px rgba(0, 0, 0, 0.2))
+}

assets/sass/_fonts.scss

@@ -0,0 +1,51 @@
+////// sahel
+@font-face {
+  font-family: 'sahel';
+  src: url("../fonts/sahel/Sahel-FD.eot"),
+  url("../fonts/sahel/Sahel-FD.ttf"),
+  url("../fonts/sahel/Sahel-FD.woff") ;
+}
+
+@font-face {
+  font-family: 'sahel-bold';
+  src: url("../fonts/sahel/Sahel-Bold-FD.eot"),
+  url("../fonts/sahel/Sahel-Bold-FD.ttf"),
+  url("../fonts/sahel/Sahel-Bold-FD.woff") ;
+}
+
+@font-face {
+  font-family: 'sahel-black';
+  src: url("../fonts/sahel/Sahel-Black-FD.eot"),
+  url("../fonts/sahel/Sahel-Black-FD.ttf"),
+  url("../fonts/sahel/Sahel-Black-FD.woff");
+}
+
+////// diodrum
+@font-face {
+  font-family: 'diodrum';
+  src: url("../fonts/diodrum/Diodrum-Regular.eot"),
+  url("../fonts/diodrum/Diodrum-Regular.otf"),
+  url("../fonts/diodrum/Diodrum-Regular.ttf"),
+  url("../fonts/diodrum/Diodrum-Regular.woff"),
+  url("../fonts/diodrum/Diodrum-Regular.woff2");
+}
+
+@font-face {
+  font-family: 'diodrum-bold';
+  src: url("../fonts/diodrum/Diodrum-Semibold.eot"),
+  url("../fonts/diodrum/Diodrum-Semibold.otf"),
+  url("../fonts/diodrum/Diodrum-Semibold.ttf"),
+  url("../fonts/diodrum/Diodrum-Semibold.woff"),
+  url("../fonts/diodrum/Diodrum-Semibold.woff2");
+}
+
+
+////// anton
+@font-face {
+  font-family: 'anton';
+  src: url("../fonts/Anton/Anton.eot"),
+  url("../fonts/Anton/Anton.otf"),
+  url("../fonts/Anton/Anton.ttf"),
+  url("../fonts/Anton/Anton.woff"),
+  url("../fonts/Anton/Anton.woff2");
+}

assets/sass/_globalStyles.scss

@@ -0,0 +1,545 @@
+body {
+  direction: rtl;
+  background: $bg;
+
+  &:lang(en) {
+    direction: ltr;
+  }
+}
+
+p, a, span, b, i {
+  font-family: 'sahel';
+  color: rgba(0, 0, 0, 0.7);
+  line-height: 1.6em;
+
+  &:lang(en) {
+    font-family: 'diodrum';
+  }
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'sahel-black';
+  line-height: 1.3em;
+
+  &:lang(en) {
+    font-family: 'diodrum-bold';
+  }
+}
+
+h1 {
+  font-size: 32px;
+}
+
+h2 {
+  font-size: 24px;
+}
+
+h3 {
+  font-size: 18.72px;
+}
+
+h4 {
+  font-size: 16px;
+}
+
+h5 {
+  font-size: 13.28px;
+}
+
+h6 {
+  font-size: 10.72px;
+}
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: none;
+    color: rgba(0, 0, 0, 0.7);
+  }
+}
+
+section {
+  padding: 0 0 100px;
+}
+
+/////// global classes
+.page {
+  min-height: calc(100vh - 200px);
+}
+
+.logo {
+  display: inline-block;
+  width: 50px;
+
+  svg {
+    width: 100%;
+  }
+}
+
+.header {
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 5;
+  @include boxShadow(0 4px 10px rgba(0, 0, 0, 0.07));
+
+  .links {
+    li {
+      text-align: right;
+      padding: 30px 0;
+      @extend %defaultTransition;
+
+      &.active {
+        a::after {
+          width: 100% !important;
+        }
+      }
+
+      &:lang(en) {
+        text-align: left;
+      }
+
+      &:first-child {
+        text-align: right;
+
+        &:lang(en) {
+          text-align: left;
+        }
+      }
+
+      a:not(.logo) {
+        position: relative;
+        padding: 5px 0;
+
+        &::after {
+          content: '';
+          display: block;
+          width: 20px;
+          height: 1.5px;
+          background: $darkGray;
+          position: absolute;
+          bottom: 0;
+          right: 0;
+          @extend %defaultTransition;
+        }
+
+        &:lang(en) {
+          &::after {
+            right: auto;
+            left: 0;
+          }
+        }
+
+        &:hover {
+          &::after {
+            width: 100%;
+          }
+        }
+      }
+
+    }
+  }
+
+  .lag-switcher {
+    .dropdown {
+      position: relative;
+
+      .title {
+        @extend %defaultTransition;
+        padding: 0 10px;
+        margin-bottom: 0;
+
+        p {
+          @extend %userSelect;
+          @extend %defaultTransition;
+          text-align: center;
+          font-size: 23px;
+          font-family: 'diodrum', 'sahel';
+        }
+      }
+
+      .dropMenu {
+        width: 100%;
+        height: 0;
+        overflow: hidden;
+        background: $darkGray;
+        @extend %defaultTransition;
+        position: absolute;
+        top: 37px;
+        left: 0;
+
+        .drop-item {
+          padding-top: 10px;
+
+          a {
+            display: block;
+            padding: 5px;
+            color: #fff;
+            font-size: 13px;
+            text-align: center;
+            cursor: pointer;
+            @extend %userSelect;
+            @extend %defaultTransition;
+            font-family: 'diodrum', 'sahel';
+          }
+        }
+      }
+
+      &.dropdown-active {
+        .title {
+          background: $darkGray;
+
+          p {
+            color: #fff;
+          }
+        }
+
+        .dropMenu {
+          height: 85px;
+
+          p:hover {
+            background: rgba(255, 255, 255, 0.05);
+          }
+        }
+      }
+    }
+  }
+
+  &.header-small {
+    .links {
+      li {
+        padding: 5px 0;
+      }
+    }
+  }
+}
+
+.footer {
+  background: #fff;
+  padding: 20px 0;
+
+  .links {
+    svg {
+      width: 50px;
+      margin-bottom: 20px;
+    }
+
+    p {
+      font-size: 13px;
+    }
+
+    hr {
+      margin: 20px 0;
+    }
+
+    .box {
+      max-width: 400px;
+    }
+  }
+
+  .social {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    ul {
+      display: block;
+      margin-bottom: 20px;
+
+      li {
+        display: inline-block;
+        margin-left: 20px;
+
+        &:lang(en) {
+          margin-left: 0;
+          margin-right: 20px;
+        }
+      }
+    }
+
+    p {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  a {
+    display: inline-block;
+    direction: ltr;
+    @extend %defaultTransition;
+
+    &:hover {
+      color: #5b5bec;
+    }
+  }
+
+  &.footer--home {
+    padding: 50px 0;
+    background: $bg;
+
+    .links {
+      hr {
+        margin: 15px 0;
+      }
+
+      .social-links {
+        margin: $mt 0;
+
+        li {
+          display: inline-block;
+          margin-left: 20px;
+
+          &:lang(en) {
+            margin-left: 0;
+            margin-right: 20px;
+          }
+
+          em {
+            color: rgba(0, 0, 0, 0.5);
+            @extend %defaultTransition;
+
+            &:hover {
+              color: rgba(0, 0, 0, 1);
+            }
+          }
+        }
+      }
+    }
+
+    .map {
+      img {
+        width: 100%;
+        @extend %defaultBoxShadow;
+      }
+
+      p {
+        font-size: 13px;
+        margin-top: 10px;
+      }
+    }
+  }
+}
+
+.hero {
+  position: relative;
+
+  .bg {
+    width: 100%;
+    height: 90vh;
+    background-size: cover;
+    -webkit-background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  .txt {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    .row {
+      height: 80vh;
+
+      h2 {
+        color: #fff;
+        font-size: 50px;
+        margin-top: 107px;
+      }
+    }
+  }
+}
+
+.btn {
+  display: inline-block;
+  padding: 10px 30px;
+  cursor: pointer;
+  @extend %defaultTransition;
+  font-family: 'sahel';
+  font-size: 16px;
+  margin-top: $mt;
+
+  &.btn-primary {
+    border: 1px solid #000;
+    color: #000;
+
+    &:hover {
+      background: #000;
+      color: #fff;
+    }
+  }
+
+  &.btn-primary-fill {
+    border: 1px solid #000;
+    background: #000;
+    color: #fff;
+  }
+
+  &.btn-reverse {
+    border: 1px solid #fff;
+    color: #fff;
+
+    &:hover {
+      background: #fff;
+      color: #000;
+    }
+  }
+
+  &.btn-reverse-fill {
+    border: 1px solid #fff;
+    background: #fff;
+    color: #000;
+  }
+
+}
+
+.panel {
+  background: #fff;
+  padding: 100px;
+  position: relative;
+  margin-top: -80px;
+  z-index: 0;
+  @include boxSizing(border-box);
+}
+
+.title {
+  display: inline-block;
+  position: relative;
+  font-size: 35px;
+  padding-bottom: 10px;
+  margin-bottom: $mt;
+
+  &.title-shape {
+    @extend %titleShape;
+  }
+
+  &.title-shape-center {
+    @extend %titleShapeCenter;
+  }
+
+  &.title-subtitle {
+    font-size: 25px;
+    margin-bottom: 15px;
+  }
+}
+
+.overflow-hidden {
+  overflow-x: hidden;
+}
+
+.imgBox {
+  width: 100%;
+  position: relative;
+
+  &.imgBox-reverse {
+    direction: ltr;
+
+    &:lang(en) {
+      direction: rtl;
+    }
+  }
+
+  &.imgBox-shape {
+    @extend %imgBoxShape;
+  }
+
+  &.imgBox-shape-reverse {
+    @extend %imgBoxShape-reverse;
+  }
+
+
+  img {
+    width: 140%;
+    @extend %defaultBoxShadow;
+  }
+
+}
+
+.section-bg {
+  width: 100%;
+}
+
+.form {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+
+  .formRow {
+    flex-basis: 40%;
+    display: inline-block;
+    margin-bottom: 20px;
+
+    &.formRow-wide {
+      flex-basis: 90%;
+    }
+
+    &.buttonRow {
+      flex-basis: 100%;
+      text-align: center;
+    }
+
+    &.err {
+      input, textarea {
+        @include boxShadow(0 0 5px rgba(red, 0.3));
+        border: 2px solid rgba(red, 0.2);
+
+        &::placeholder {
+          color: red;
+        }
+      }
+
+      p {
+        color: red;
+      }
+    }
+
+    input, textarea {
+      @extend %appearance;
+      @extend %defaultTransition;
+      width: 100%;
+      border: 2px solid transparent;
+      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
+      outline: none;
+      padding: 10px;
+      font-family: 'sahel', 'diodrum', sans-serif;
+      background: transparent;
+
+      &:focus {
+        @include boxShadow(0 0 5px rgba($theme, 0.3));
+        border: 2px solid rgba($theme, 0.2);
+      }
+    }
+
+    button {
+      @extend %appearance;
+      @extend %defaultTransition;
+      margin-top: 50px;
+    }
+  }
+}
+
+.customers-communication {
+  .panel {
+    margin-top: 100px;
+    background: $theme;
+
+    .title {
+      color: #fff;
+
+      &::after {
+        background: #fff;
+      }
+    }
+
+    p {
+      color: #fff;
+    }
+  }
+}

assets/sass/_mixins.scss

@@ -0,0 +1,44 @@
+@mixin transform($p...) {
+  transform: $p;
+  -webkit-transform: $p;
+  -moz-transform: $p;
+  -ms-transform: $p;
+  -o-transform: $p;
+}
+
+@mixin transition($p...) {
+  transition: $p;
+  -webkit-transition: $p;
+  -moz-transition: $p;
+  -ms-transition: $p;
+  -o-transition: $p;
+}
+
+@mixin boxSizing($p) {
+  box-sizing: $p;
+  -webkit-box-sizing: $p;
+  -moz-box-sizing: $p;
+}
+
+@mixin filter($p...) {
+  filter: $p;
+  -ms-filter: $p;
+}
+
+@mixin boxShadow($p) {
+  box-shadow: $p;
+  -webkit-box-shadow: $p;
+  -moz-box-shadow: $p;
+}
+
+@mixin borderRadius($p) {
+  border-radius: $p;
+  -webkit-border-radius: $p;
+  -moz-border-radius: $p;
+}
+
+@mixin animation($p) {
+  animation: $p;
+  -webkit-animation: $p;
+  -o-animation: $p;
+}

assets/sass/_pages.scss

@@ -0,0 +1,442 @@
+///////////////////////////// error page
+.error--page {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  h1 {
+    font-family: sans-serif;
+    font-size: 60px;
+  }
+
+  p {
+    text-transform: uppercase;
+    font-family: sans-serif;
+    font-size: 14px;
+    margin-top: -20px;
+  }
+
+  a {
+    margin-top: 20px;
+    font-family: 'sahel', sans-serif;
+  }
+}
+
+///////////////////////////// home page
+.home--page {
+  .hero {
+    .bg {
+      background-image: url("../img/hp-s1-i1.jpg");
+    }
+
+    .txt--home {
+      width: 400px;
+      height: 300px;
+      position: absolute;
+      bottom: 20%;
+      right: 200px;
+
+      &:lang(en) {
+        right: auto;
+        left: 200px;
+      }
+
+      h1 {
+        color: #fff;
+
+        &:lang(en) {
+          font-family: 'anton';
+        }
+      }
+
+      p {
+        color: #fff;
+      }
+    }
+  }
+
+  .s1 {
+    position: relative;
+    padding: 100px 0;
+
+    .go-down-btn {
+      width: 250px;
+      height: 80px;
+      background: #fff;
+      text-align: center;
+      position: absolute;
+      top: -40px;
+      left: calc(50% - 125px);
+      z-index: 2;
+      cursor: pointer;
+
+      em {
+        line-height: 80px;
+        font-size: 30px;
+      }
+    }
+
+    .title-side {
+      text-align: center;
+    }
+  }
+
+  .s2 {
+    overflow-x: hidden;
+
+    .panel {
+      padding: 100px 100px 130px;
+    }
+
+    .parts {
+      width: 100%;
+
+      &.p1 {
+        width: 100%;
+        text-align: center;
+
+        p {
+          display: inline-block;
+          max-width: 480px;
+        }
+      }
+
+      &.p2 {
+        margin-top: 100px;
+      }
+
+      &.p3 {
+        margin-top: 100px;
+      }
+    }
+  }
+
+  .s3 {
+    .panel1 {
+      padding: 100px 100px 0;
+      height: 380px;
+
+      .parts {
+        &.p1 {
+          text-align: center;
+        }
+
+        &.p2 {
+          text-align: center;
+
+          .imgBox {
+            text-align: right;
+
+            &:lang(en) {
+              text-align: left;
+            }
+
+            p {
+              margin-top: 15px;
+            }
+
+            img {
+              width: 100%;
+            }
+          }
+        }
+      }
+    }
+
+
+    .panel2 {
+      margin-top: 250px;
+      background: transparent;
+      padding: 100px 100px 0;
+
+      .p3 {
+        text-align: center;
+
+        .imgBox {
+          background: #fff;
+          padding-bottom: 20px;
+          @extend %defaultBoxShadow;
+          margin-bottom: 30px;
+
+          p {
+            margin-top: 20px;
+          }
+
+          img {
+            width: 100%;
+            @include boxShadow(none);
+          }
+        }
+      }
+    }
+  }
+
+  .s4 {
+    position: relative;
+
+    .txt {
+      max-width: 600px;
+      height: 300px;
+      position: absolute;
+      top: 20%;
+      right: 200px;
+
+      &:lang(en) {
+        right: auto;
+        left: 200px;
+      }
+
+      .title {
+        color: #fff;
+
+        &::after {
+          background: #fff;
+        }
+
+        span {
+          display: block;
+          font-size: 13px;
+          color: #fff;
+        }
+      }
+
+      p {
+        margin-top: $mt;
+        color: #fff;
+      }
+    }
+  }
+
+  .s5 {
+    .panel {
+      background: $theme;
+      margin-top: 0;
+
+      .p1 {
+        text-align: center;
+
+        .title {
+          color: #fff;
+
+          &::after {
+            background: #fff;
+          }
+        }
+
+        p {
+          color: #fff;
+        }
+      }
+
+      .form {
+        margin-top: 50px;
+
+        input, textarea {
+          border-bottom: 2px solid rgba(255, 255, 255, 0.5);
+          color: #fff;
+
+          &::placeholder {
+            color: rgba(255, 255, 255, 0.8);
+          }
+
+          &:focus {
+            @include boxShadow(0 0 5px rgba(#fff, 0.05));
+            border: 2px solid rgba(#fff, 0.1);
+          }
+        }
+      }
+
+    }
+
+    .watermark {
+      text-align: center;
+      padding-top: 100px;
+
+      svg {
+        width: 100px;
+
+        path {
+          fill: rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+  }
+
+  .s6 {
+    padding: 100px 0;
+    background: #fff;
+
+    .img-side {
+      text-align: center;
+
+      img {
+        width: 100%;
+      }
+    }
+  }
+}
+
+///////////////////////////// about page
+.about--page {
+  overflow: hidden;
+
+  .hero {
+    .bg {
+      background-image: url("../img/about-hero.jpg");
+    }
+  }
+
+  .s1 {
+    .parts {
+      margin-bottom: 100px;
+
+      &.p1 {
+        text-align: center;
+        direction: ltr;
+
+        svg {
+          width: 80px;
+        }
+
+        span {
+          color: $theme;
+          font-family: 'diodrum-bold';
+          font-size: 40px;
+        }
+      }
+
+      &.p2 {
+        align-items: center;
+      }
+
+      &.p3 {
+        align-items: center;
+      }
+
+      &.p4 {
+        margin-bottom: 0;
+        text-align: center;
+      }
+    }
+  }
+
+  .s2 {
+    background: $theme;
+    padding: 100px 0 150px;
+
+    .title {
+      color: #fff;
+
+      &::after {
+        background: #fff;
+      }
+    }
+
+    p {
+      color: #fff;
+      margin-top: $mt;
+      max-width: 700px;
+    }
+
+  }
+
+  .s3 {
+    padding-bottom: 0;
+
+    .panel {
+      direction: ltr;
+
+      .txt {
+        direction: ltr;
+        text-align: left;
+
+        p {
+          font-family: 'diodrum-bold';
+        }
+      }
+
+      .img {
+        text-align: center;
+      }
+
+      &:not(.p1) {
+        margin-top: 20px;
+      }
+    }
+  }
+}
+
+///////////////////////////// services page
+.services--page {
+  overflow-x: hidden;
+
+  .hero {
+    .bg {
+      background-image: url('../img/services-hero.jpg');
+    }
+  }
+
+  .s1 {
+    text-align: center;
+  }
+
+  .s2 {
+
+    ol {
+      li {
+        list-style: decimal;
+      }
+    }
+  }
+
+  .s3 {
+    padding-bottom: 0;
+
+    .parts {
+      margin-top: 100px;
+
+      &.p1 {
+        margin-top: 0;
+        text-align: center;
+      }
+
+      &.lastPart {
+        text-align: center;
+      }
+    }
+  }
+}
+
+///////////////////////////// products page
+.products--page {
+  .hero {
+    .bg {
+      background-image: url('../img/products-hero.jpg');
+    }
+  }
+
+  .s1 {
+    text-align: center;
+  }
+
+  .s2 {
+    text-align: center;
+
+    .filters {
+      margin: 0 auto;
+      max-width: 700px;
+      background: red;
+
+      ul {
+        display: flex;
+        flex-direction: row;
+
+        li {
+          display: block;
+        }
+      }
+    }
+  }
+}

assets/sass/_variables.scss

@@ -0,0 +1,7 @@
+// colors
+$theme: #1B407C;
+$bg: #F0F0F0;
+$darkGray: #303030;
+
+// units
+$mt: 30px;

assets/sass/main.scss

@@ -0,0 +1,6 @@
+@use "fonts";
+@use "extentions";
+@use "mixins";
+@use "variables";
+@use "globalStyles";
+@use "pages";

components/Logo.vue

@@ -0,0 +1,29 @@
+<template>
+  <svg class="NuxtLogo" width="245" height="180" viewBox="0 0 452 342" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M139 330l-1-2c-2-4-2-8-1-13H29L189 31l67 121 22-16-67-121c-1-2-9-14-22-14-6 0-15 2-22 15L5 303c-1 3-8 16-2 27 4 6 10 12 24 12h136c-14 0-21-6-24-12z"
+      fill="#00C58E"
+    />
+    <path
+      d="M447 304L317 70c-2-2-9-15-22-15-6 0-15 3-22 15l-17 28v54l39-67 129 230h-49a23 23 0 0 1-2 14l-1 1c-6 11-21 12-23 12h76c3 0 17-1 24-12 3-5 5-14-2-26z"
+      fill="#108775"
+    />
+    <path
+      d="M376 330v-1l1-2c1-4 2-8 1-12l-4-12-102-178-15-27h-1l-15 27-102 178-4 12a24 24 0 0 0 2 15c4 6 10 12 24 12h190c3 0 18-1 25-12zM256 152l93 163H163l93-163z"
+      fill="#2F495E"
+    />
+  </svg>
+</template>
+
+<style>
+.NuxtLogo {
+  animation: 1s appear;
+  margin: auto;
+}
+
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+}
+</style>

layouts/default.vue

@@ -10,16 +10,13 @@
 
 <script>
    export default {
-      beforeCreate() {
-         if (this.$route.params.lang === 'fa') {
-            $('html').attr({lang: 'fa'})
-         } else if (this.$route.params.lang === 'en') {
-            $('html').attr({lang: 'en'})
-         }
-      },
       mounted() {},
       head() {
-         return {}
+         return {
+            htmlAttrs: {
+               lang: 'fa'
+				}
+			}
       }
    }
 </script>

middleware/README.md

@@ -0,0 +1,8 @@
+# MIDDLEWARE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your application middleware.
+Middleware let you define custom functions that can be run before rendering either a page or a group of pages.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/routing#middleware).

nuxt.config.js

@@ -1,87 +1,55 @@
 const webpack = require("webpack")
 export default {
-   mode: 'spa',
+   // Global page headers (https://go.nuxtjs.dev/config-head)
-   /*
-   ** Headers of the page
-   */
    head: {
-      title: process.env.npm_package_name || '',
+      title: 'Arak Rail',
       meta: [
          {charset: 'utf-8'},
          {name: 'viewport', content: 'width=device-width, initial-scale=1'},
-         {hid: 'description', name: 'description', content: process.env.npm_package_description || ''}
+         {hid: 'description', name: 'description', content: ''}
       ],
       link: [
          {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'}
       ]
    },
-   /*
+
-   ** Customize the progress-bar color
+   // Global CSS (https://go.nuxtjs.dev/config-css)
-   */
-   loading: {color: '#fff'},
-   /*
-   ** Global CSS
-   */
    css: [
       'element-ui/lib/theme-chalk/index.css',
       '~/assets/css/bootstrap-grid-customized.css',
       '~/assets/css/fontawesome/css/all.min.css',
-      '~/assets/sass/app.scss',
+      '~/assets/sass/main.scss'
    ],
-   /*
+
-   ** Plugins to load before mounting the App
+   // Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
-   */
    plugins: [
       '@/plugins/element-ui',
       '@/plugins/gsap',
-      '@/plugins/scrollMagic',
       '@/plugins/components'
    ],
-   /*
+
-   ** Nuxt.js dev-modules
+   // Auto import components (https://go.nuxtjs.dev/config-components)
-   */
+   components: true,
+
+   // Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
    buildModules: [],
-   /*
+
-   ** Nuxt.js modules
+   // Modules (https://go.nuxtjs.dev/config-modules)
-   */
    modules: [
-      // Doc: https://axios.nuxtjs.org/usage
+      // https://go.nuxtjs.dev/axios
       '@nuxtjs/axios',
    ],
-   /*
+
-   ** Axios module configuration
+   // Axios module configuration (https://go.nuxtjs.dev/config-axios)
-   ** See https://axios.nuxtjs.org/options
-   */
    axios: {},
-   /*
+
-   ** Build configuration
+   // Build Configuration (https://go.nuxtjs.dev/config-build)
-   */
    build: {
       transpile: [/^element-ui/],
       vendor: ["jquery"],
       plugins: [new webpack.ProvidePlugin({$: "jquery"})],
-      /*
-      ** Run ESLint
-      */
-      /*
-      ** You can extend webpack config here
-      */
-      extend(config, ctx) {
-      },
-      filenames: {
-         app: ({isDev}) => isDev ? '[name].js' : '[name].js',
-         chunk: ({isDev}) => isDev ? '[name].js' : '[name].js',
-         css: ({isDev}) => isDev ? '[name].css' : '[name].css',
-         img: ({isDev}) => isDev ? '[path][name].[ext]' : 'images/[name].[ext]',
-         font: ({isDev}) => isDev ? '[path][name].[ext]' : 'fonts/[name].[ext]',
-         video: ({isDev}) => isDev ? '[path][name].[ext]' : 'videos/[name].[ext]'
-      }
-   },
-   generate: {
-      dir: '../../public/nuxt_build'
    },
    router: {
-      mode: 'history',
       middleware: 'routerGuards',
       linkActiveClass: 'active'
    }

package.json

@@ -1,23 +1,24 @@
 {
-   "name": "ArakRail",
+   "name": "arakrail",
    "version": "1.0.0",
-   "description": "ArakRail Front-End nuxt app",
    "author": "Amir Mohamadi",
    "private": true,
    "scripts": {
+      "nodemon": "nodemon --watch api --exec \"nuxt start\"",
+      "nodemonDev": "nodemon --watch api --exec \"nuxt\"",
       "dev": "nuxt",
       "build": "nuxt build",
       "start": "nuxt start",
       "generate": "nuxt generate"
    },
    "dependencies": {
-      "nuxt": "^2.0.0",
+      "@nuxtjs/axios": "^5.12.2",
-      "@nuxtjs/axios": "^5.3.6",
+      "core-js": "^3.6.5",
+      "element-ui": "^2.13.2",
+      "gsap": "^3.5.1",
       "jquery": "^3.5.1",
-      "gsap": "^3.2.6",
+      "nodemon": "^2.0.6",
-      "scrollmagic": "^2.0.7",
+      "nuxt": "^2.14.6"
-      "vue-scrollmagic": "^1.2.0",
-      "element-ui": "^2.4.11"
    },
    "devDependencies": {
       "node-sass": "^4.14.1",

pages/_lang/index.vue

@@ -193,21 +193,21 @@
          /////////////////// title shapes activation
          const titles = $('.home--page h2.title')
          const titleScene = []
-
+         //
-         for (let i = 0; i < titles.length; i++) {
+         // for (let i = 0; i < titles.length; i++) {
-            $(titles[i]).attr('data-pos', i)
+         //    $(titles[i]).attr('data-pos', i)
-            titleScene[i] = this.$scrollmagic.scene({
+         //    titleScene[i] = this.$scrollmagic.scene({
-               triggerElement: `.home--page *[data-pos="${i}"]`,
+         //       triggerElement: `.home--page *[data-pos="${i}"]`,
-               triggerHook: th,
+         //       triggerHook: th,
-               reverse: rev
+         //       reverse: rev
-            }).on('enter', function () {
+         //    }).on('enter', function () {
-               $(titles[i]).addClass('active')
+         //       $(titles[i]).addClass('active')
-            }).on('leave', function () {
+         //    }).on('leave', function () {
-               $(titles[i]).removeClass('active')
+         //       $(titles[i]).removeClass('active')
-            })
+         //    })
-
+         //
-            this.$scrollmagic.addScene(titleScene[i])
+         //    this.$scrollmagic.addScene(titleScene[i])
-         }
+         // }
       }
    }
 </script>
@@ -215,7 +215,7 @@
 
 <style scoped>
 	.footer{
-		background: #F0F0F0!important;
+		background: #F0F0F0 !important;
 	}
 </style>
 

store/README.md

@@ -0,0 +1,10 @@
+# STORE
+
+**This directory is not required, you can delete it if you don't want to use it.**
+
+This directory contains your Vuex Store files.
+Vuex Store option is implemented in the Nuxt.js framework.
+
+Creating a file in this directory automatically activates the option in the framework.
+
+More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).