start implementing frontend design

src/assets/sass/base.sass

@@ -1,3 +1,21 @@
+.bloodline-devider
+    font-size: 42px
+    margin: 24px 0
+    text-align: center
+
+.bloodline-border
+    padding: 24px 32px
+    border: 4px solid #000000
+    border-radius: 16px
+
+.bloodline-badge
+    padding: 8px 16px 8px 16px
+    border-radius: 14px
+    background-color: #0F0F0F
+    display: flex
+    .bloodline-badge-icon
+        margin-right: 8px
+
 .card
     display: block
     overflow: hidden
@@ -14,3 +32,4 @@
     border-width: 0
     border-radius: 4px
     box-shadow: 0 2px 1px -1px rgba(0, 0, 0, .2),0 1px 1px 0rgba(0, 0, 0, .14),0 1px 3px 0 rgba(0, 0, 0, .12)
+    background-color: $darkgrey

src/assets/sass/bubbles.sass

@@ -0,0 +1,106 @@
+.wrapper
+    height: 100%
+    width: 100%
+    position: absolute
+    overflow: hidden
+    div
+        height: 15px
+        width: 15px
+        border: 2px solid rgba(139, 0, 0, 0.7)
+        border-radius: 50px
+        position: absolute
+        top: 10%
+        left: 10%
+        animation: 4s linear infinite
+
+div .dot
+    height: 10px
+    width: 10px
+    border-radius: 50px
+    background: rgba(138, 62, 62, 0.5)
+    position: absolute
+    top: 20%
+    right: 20%
+
+.wrapper div
+    &:nth-child(1)
+        top: 20%
+        left: 20%
+        animation: animate 8s linear infinite
+
+    &:nth-child(2)
+        top: 60%
+        left: 55%
+        animation: animate 10s linear infinite
+
+    &:nth-child(3)
+        top: 40%
+        left: 40%
+        animation: animate 3s linear infinite
+
+    &:nth-child(4)
+        top: 66%
+        left: 30%
+        animation: animate 7s linear infinite
+
+    &:nth-child(5)
+        top: 90%
+        left: 10%
+        animation: animate 9s linear infinite
+
+    &:nth-child(6)
+        top: 30%
+        left: 20%
+        animation: animate 5s linear infinite
+
+    &:nth-child(7)
+        top: 70%
+        left: 20%
+        animation: animate 8s linear infinite
+
+    &:nth-child(8)
+        top: 75%
+        left: 30%
+        animation: animate 10s linear infinite
+
+    &:nth-child(9)
+        top: 50%
+        left: 50%
+        animation: animate 6s linear infinite
+
+    &:nth-child(10)
+        top: 45%
+        left: 20%
+        animation: animate 10s linear infinite
+
+    &:nth-child(11)
+        top: 10%
+        left: 90%
+        animation: animate 9s linear infinite
+
+    &:nth-child(12)
+        top: 20%
+        left: 50%
+        animation: animate 7s linear infinite
+
+    &:nth-child(13)
+        top: 20%
+        left: 20%
+        animation: animate 8s linear infinite
+
+    &:nth-child(14)
+        top: 60%
+        left: 5%
+        animation: animate 6s linear infinite
+
+    &:nth-child(15)
+        top: 90%
+        left: 50%
+        animation: animate 9s linear infinite
+
+@keyframes animate
+    0%
+        transform: scale(0) translateY(0) rotate(70deg)
+
+    100%
+        transform: scale(1.3) translateY(-50px) rotate(360deg)

src/assets/sass/buttons.sass

@@ -1,10 +1,12 @@
 
 .btn
     &.btn-immortal
-        padding: 6px 24px
-        background-color: $button-background-color
+        background-color: $red
         color: $button-color
         font-size: 24px
+        padding: 16px 24px
+        gap: 8px
+        border-radius: 14px
         &:hover,&:focus,&:active
             background-color: lighten($button-background-color, 10%),
             color: darken($button-color, 10%),

src/assets/sass/main.sass

@@ -1,10 +1,22 @@
 @import 'variables'
 @import 'buttons'
-@import 'cards'
+@import 'base'
+@import 'wave'
+@import 'bubbles'
 
+@font-face
+    font-family: 'Inter'
+    src: url("@/assets/fonts/Inter-Regular.ttf")
+
+@font-face
+    font-family: 'Vampire'
+    src: url("@/assets/fonts/Vampire.ttf")
+*
+    box-sizing: border-box
 body
-    background-color: $secondary
-    color: $color2
+    background-color: #2D2D2D
+    color: $white
+    font-family: 'Inter', sans-serif
 
 .main
     padding-top: 120px
@@ -30,7 +42,13 @@ body
     margin-right: auto
     margin-left: auto
     @media (min-width: 992px)
-        max-width: 1140px
+        max-width: 800px
+.section-header-container
+    width: 655px
+    text-align: center
+    font-size: 24px
+    margin-top: 64px
+    margin-bottom: 64px
 
 h1
     font-weight: 700

src/assets/sass/variables.sass

@@ -8,11 +8,16 @@ $tertiary: #A8A8A8
 $tertiary-dark: darken($tertiary, 20%)
 $tertiary-light: lighten($tertiary, 20%)
 
-$color2: white
-$color1: black
+$white: #F9F9FA
+$black: #0F0F0F
+$grey: #808080
+$red: #8B0000
+$purple: #4B0082
 
-$button-color: $color2
-$button-background-color: $color1
+$darkgrey: #202020
+
+$button-color: $white
+$button-background-color: $black
 :root
     --primary: #{$primary}
     --primary-light: #{$primary-light}
@@ -23,6 +28,9 @@ $button-background-color: $color1
     --tertiary: #{$tertiary}
     --tertiary-light: #{$tertiary-light}
     --tertiary-dark: #{$tertiary-dark}
+    --grey: #{$grey}
+    --purple: #{$purple}
+    --blood-color: #{$red}
 // :root
 //     --font-size-text: 16px
 //     --font-size-title: 32px

src/assets/sass/wave.sass

@@ -0,0 +1,26 @@
+/* Animation
+
+.parallax > use
+    animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite
+    &:nth-child(1)
+        animation-delay: -2s
+        animation-duration: 7s
+
+    &:nth-child(2)
+        animation-delay: -3s
+        animation-duration: 10s
+
+    &:nth-child(3)
+        animation-delay: -4s
+        animation-duration: 13s
+
+    &:nth-child(4)
+        animation-delay: -5s
+        animation-duration: 20s
+
+@keyframes move-forever
+    0%
+        transform: translate3d(-90px, 0, 0)
+
+    100%
+        transform: translate3d(85px, 0, 0)