(feat): added basic contact page hero section

htdocs/assets/style.css

@@ -706,11 +706,6 @@ video {
   margin-bottom: 0.30rem;
 }
 
-.my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1032,6 +1027,14 @@ video {
   width: 100vw;
 }
 
+.w-\[40\%\] {
+  width: 40%;
+}
+
+.w-\[230px\] {
+  width: 230px;
+}
+
 .rotate-\[15deg\] {
   --tw-rotate: 15deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1164,14 +1167,14 @@ video {
   border-width: 2px;
 }
 
-.border-\[5px\] {
-  border-width: 5px;
-}
-
 .border-\[3px\] {
   border-width: 3px;
 }
 
+.border-\[5px\] {
+  border-width: 5px;
+}
+
 .border-b-\[2px\] {
   border-bottom-width: 2px;
 }
@@ -1184,14 +1187,14 @@ video {
   border-top-width: 1px;
 }
 
-.border-t-\[5px\] {
-  border-top-width: 5px;
-}
-
 .border-t-\[3px\] {
   border-top-width: 3px;
 }
 
+.border-t-\[5px\] {
+  border-top-width: 5px;
+}
+
 .border-\[rgba\(255\2c _255\2c _255\2c _0\.15\)\] {
   border-color: rgba(255, 255, 255, 0.15);
 }
@@ -1234,6 +1237,15 @@ video {
   border-top-color: rgb(56 189 248 / var(--tw-border-opacity));
 }
 
+.border-b-accent_primary {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(56 189 248 / var(--tw-border-opacity));
+}
+
+.border-b-accent_secondary_transparent {
+  border-bottom-color: rgba(255, 255, 255, 0.30);
+}
+
 .bg-\[rgba\(0\2c _0\2c _0\2c _0\.4\)\] {
   background-color: rgba(0, 0, 0, 0.4);
 }
@@ -1331,11 +1343,6 @@ video {
   padding-right: 1.75rem;
 }
 
-.px-\[0\.65rem\] {
-  padding-left: 0.65rem;
-  padding-right: 0.65rem;
-}
-
 .px-\[0\.80rem\] {
   padding-left: 0.80rem;
   padding-right: 0.80rem;
@@ -1563,6 +1570,10 @@ video {
   outline-offset: 2px;
 }
 
+.outline-accent_primary {
+  outline-color: #38BDF8;
+}
+
 .blur-2xl {
   --tw-blur: blur(40px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
@@ -1889,6 +1900,10 @@ video {
     margin-top: 7rem;
   }
 
+  .lg\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -1929,6 +1944,14 @@ video {
     width: 350px;
   }
 
+  .lg\:w-auto {
+    width: auto;
+  }
+
+  .lg\:w-\[40\%\] {
+    width: 40%;
+  }
+
   .lg\:rotate-0 {
     --tw-rotate: 0deg;
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));

htdocs/contact.php

@@ -17,8 +17,25 @@ require 'core/query_functions.php';
     <?php include 'assets/_preloader.php';?>
     <?php include 'assets/_floatingbar.php';?>
     <?php require 'assets/_header.php';?>
-    <div class="contactbox w-full px-4 lg:px-[4.5rem]">
+    <div class="contactbox w-full px-4 lg:px-[4.5rem] flex flex-col items-center">
-
+        <div class="herosection w-full flex flex-col-reverse justify-center lg:flex-row lg:justify-between items-center mb-3">
+            <div class="herotitle w-full lg:w-auto px-2 lg:px-0 lg:mt-16 lg:mb-10 2xl:mt-24 2xl:mb-32">
+                <p class="text-xl lg:text-2xl my-3 lg:my-2">Contact Me 🛸</p>
+                <h1 class="text-2xl lg:text-3xl mt-1 mb-4 lg:mt-2 lg:mb-3 lg:whitespace-nowrap font-bold">Ring, <span class="text-accent_primary">Ring!</span> let's <span class="text-accent_primary">Talk</span></h1>
+                <h2 class="text-lg mt-3 mb-1 lg:mt-2 lg:mb-1 lg:whitespace-nowrap">You'r just one <span class="text-accent_primary font-bold">message</span> away from me</h2>
+                <h3 class="text-lg mt-1 mb-3 lg:mt-1 lg:mb-2 lg:whitespace-nowrap">I'd love to <span class="text-accent_primary font-bold">hear from you</span> just drop a <span class="text-accent_primary font-bold">line</span></h3>
+                <div class="w-full flex justify-start items-center my-7 lg:my-6">
+                    <button class="w-fit px-5 py-1 my-2 mr-2 font-bold bg-accent_primary text-bg_primary rounded-full hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500" onclick="window.open('', '_blank')"><i class="text-bg_primary fa-brands fa-whatsapp"></i> WhatsApp</button>
+                    <button class="w-fit px-5 py-1 my-2 ml-2 font-bold bg-accent_primary text-bg_primary rounded-full hover:shadow-lg hover:shadow-accent_secondary_transparent hover:bg-accent_secondary hover:rounded-lg transition transform duration-500" onclick="window.open('', '_blank')"><i class="text-bg_primary fa-brands fa-telegram"></i> Telegram</button>
+                </div>
+            </div>
+            <div class="heroimage w-full h-full flex justify-center lg:justify-end items-center mt-10 lg:mt-0">
+                <div class="wrapper w-[250px] lg:w-[350px] mb-20 mt-10 lg:mb-0 lg:mt-5 lg:mr-10 z-20">
+                    <img src="./assets/images/contact-heroimage.svg" alt="heroimage">
+                </div>
+                <div class="absolute bg-accent_primary w-[70px] h-[70px] rounded-full shadow-[0px_0px_120px_20px] shadow-accent_primary_transparent blur-2xl mr-0 mb-[2rem] lg:mb-0 lg:mr-[12.5rem] lg:mt-[3.5rem]"></div>
+            </div>
+        </div>
     </div>
     <?php require 'assets/_footer.php';?>
     <script type="text/javascript" src="assets/js/preloader-config.js"></script>