(feat): added address card on contact page with hover animation

htdocs/assets/extra-style.css

@@ -44,11 +44,11 @@ background: #38BDF8;
     animation: slide-up 0.5s ease-in-out;
 }
 
-.aboutcontainer:hover::before {
+.hoverAnimatedContainer:hover::before {
     opacity: 1;
 }
 
-.aboutcontainer::before {
+.hoverAnimatedContainer::before {
     background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255,255,255,0.06), transparent 40%);
     border-radius: inherit;
     content: "";
@@ -57,7 +57,6 @@ background: #38BDF8;
     position: absolute;
     left: 0px;
     top: 0px;
-    z-index: 2;
     opacity: 0;
     transition: opacity 500ms;
 }

htdocs/assets/style.css

@@ -917,6 +917,10 @@ video {
   margin-top: 4rem;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-28 {
   margin-top: 7rem;
 }
@@ -1058,6 +1062,10 @@ video {
   width: 0.5rem;
 }
 
+.w-\[100px\] {
+  width: 100px;
+}
+
 .w-\[200px\] {
   width: 200px;
 }
@@ -1382,6 +1390,11 @@ 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));
+}
+
 .bg-\[rgba\(0\2c _0\2c _0\2c _0\.4\)\] {
   background-color: rgba(0, 0, 0, 0.4);
 }