Merge pull request #108 from parrth20/fix/startup-page-buttons

feat: Fix startup page button alignment and navigation

Author: MadhushaPrasad

index.php

@@ -18,11 +18,11 @@
                 <h2 class="section-left-1-mainText"> Sending your luggages is easier than before🔥</h2>
                 <h4 class="section-left-1-subText">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volutpat eget ut tincidunt urna, nulla eget accumsan convallis diam. In urna lacus, netus tristique congue laoreet. Eu nullam enim dui tempus velit.</h4>
             </div>
-            <div class="already">
-                <p>Already user? <a href="./pages/login.php">Login</a></p>
-                <button class="get-started-btn">Get Started</button>
+                <div class="startup-actions">
+    <a href="#"><button class="get-started-btn">Get Started</button></a>
+    <p>Already user? <a href="./pages/login.php">Login</a></p>
+</div>
             </div>
-        </div>
         <div class="section__right">
             <img src="./assets/img/young woman imagining things while reading e-book.svg" alt="young woman imagining things while reading e-book" width="100%">
         </div>

pages/startUp.css

@@ -62,25 +62,25 @@
   line-height: 28px;
   margin-bottom: 24px;
 }
+/* You can replace the old .startup-actions block with this one */
 
-.already p {
-  font-family: var(--font);
-  font-size: 16px;
-  font-weight: 400;
-  margin-top: 30px;
+.startup-actions {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 25px; 
+    margin-top: 40px;
 }
 
-.already a {
-  color: var(--dark-blue);
-  text-decoration: none;
-  margin-top: 100px;
+.startup-actions p {
+    margin: 0;
+    font-family: var(--font);
+    font-size: 16px;
+    white-space: nowrap; /* This prevents the "Already user? Login" text from wrapping */
 }
-.already button {
-  color: var(--dark-blue);
-  font-family: var(--font);
-  font-size: 16px;
-  font-weight: 400;
-  color: #fff;
+
+.startup-actions a {
+    text-decoration: none;
 }
 
 .get-started-btn {
@@ -93,8 +93,7 @@
   font-weight: 500;
   border-radius: 10px;
   cursor: pointer;
-  margin-left: 400px;
-  margin-top: -500px;
+  white-space: nowrap; /* This prevents the "Get Started" button text from wrapping */
 }
 
 .get-started-btn:hover {