feat: refresh site pages and styling assets

- update contact, documentation, and home pages

- refine global and page-specific CSS styles

- add reusable global animations stylesheet

- add pink Naliia background image asset

src/components/InitialSection.astro

@@ -57,9 +57,11 @@ const {
             {
                 buttonText && (
                     <div class="button-container">
-                        <button class="button call-to-action-button">
-                            {buttonText}
-                        </button>
+                        <a href="#">
+                            <button class="button call-to-action-button importantButton-hover-animation">
+                                {buttonText}
+                            </button>
+                        </a>
                     </div>
                 )
             }
@@ -70,6 +72,32 @@ const {
 </section>
 
 <style>
+    @starting-style {
+        .logo-naliia-full {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .main-title {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .subtitle {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .call-to-action-button {
+            translate: -100px 0;
+            opacity: 0;
+        }
+
+        .main-img {
+            opacity: 0;
+        }
+    }
+
     .section-1 {
         position: relative;
         background-color: transparent;
@@ -112,6 +140,8 @@ const {
         z-index: -1;
         pointer-events: none;
 
+        transition: opacity 1s ease-in-out;
+
         @media (max-width: 1023px) {
             display: none;
         }
@@ -136,6 +166,10 @@ const {
         height: 82px;
         width: auto;
 
+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
         @media (max-width: 767px) {
             height: 50px;
         }
@@ -162,6 +196,10 @@ const {
         font-size: 80px;
         line-height: calc(80px * 1.2);
 
+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
         @media (max-width: 767px) {
             font-size: var(--font-mobile-h1);
             line-height: var(--line-height-mobile-h1);
@@ -170,6 +208,10 @@ const {
     .subtitle {
         max-width: 630px;
 
+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
         @media (max-width: 767px) {
             width: 100%;
         }
@@ -191,6 +233,10 @@ const {
         color: white;
         cursor: pointer;
 
+        transition:
+            translate 1s ease-in-out,
+            opacity 1s ease-in-out;
+
         @media (max-width: 1023px) {
             padding: var(--padding-sm-8px) var(--padding-lg-24px);
         }
@@ -202,4 +248,8 @@ const {
             padding: var(--padding-sm-8px) var(--padding-lg-24px);
         }
     }
+
+    .call-to-action-button:hover {
+        animation: heartBeat 1.2s infinite;
+    }
 </style>