Feature: added custom href to the button

src/components/InitialSection.astro

@@ -11,6 +11,7 @@ export interface SectionProps {
     mainTitle: string;
     subtitle: string;
     buttonText?: string;
+    customHref?: string;
     autoHeight?: boolean;
 }
 
@@ -27,6 +28,7 @@ const {
     customXPosition,
     customYPosition,
     autoHeight = false,
+    customHref
 } = Astro.props as SectionProps;
 ---
 
@@ -56,13 +58,9 @@ const {
 
             {
                 buttonText && (
-                    <div class="button-container">
-                        <a href="#">
-                            <button class="button call-to-action-button importantButton-hover-animation">
-                                {buttonText}
-                            </button>
+                        <a href={customHref ? customHref : "#"} target="_blank" class="call-to-action-button">
+                            {buttonText}
                         </a>
-                    </div>
                 )
             }
         </div>
@@ -219,7 +217,7 @@ const {
 
     .call-to-action-button {
         height: 56px;
-        width: auto;
+        width: fit-content;
         padding: var(--space-sm-8px) var(--space-lg-24px);
         border: none;
         border-radius: 16px;
@@ -232,10 +230,12 @@ const {
         justify-content: center;
         color: white;
         cursor: pointer;
+        animation: fadeAndMoveFromLeft 1s ease-in-out forwards;
 
         transition:
             translate 1s ease-in-out,
-            opacity 1s ease-in-out;
+            opacity 1s ease-in-out,
+            transform 3s ease-in-out,
 
         @media (max-width: 1023px) {
             padding: var(--padding-sm-8px) var(--padding-lg-24px);
@@ -250,6 +250,7 @@ const {
     }
 
     .call-to-action-button:hover {
-        animation: heartBeat 1.2s infinite;
+        background-color: #d9436a;
+        transform: scale(1.02);
     }
 </style>