feat: add job dating links and instructions

src/components/Header.astro

@@ -27,9 +27,14 @@ import Logo from "./Logo.astro";
     </div>
 
     <!-- Desktop links: only show on large screens -->
-    <div class="hidden lg:flex gap-6 mr-4">
+    <div class="hidden lg:flex gap-6 mr-4 align-center">
       <HeaderLink href="/for-partners">For Partners</HeaderLink>
       <HeaderLink href="/contact">Contact</HeaderLink>
+      <a
+        href="https://match.opportune.fi"
+        class="hover:no-underline self-stretch text-center border-2 border-accent px-2 py-1 rounded-lg bg-accent hover:opacity-85 text-white hover:text-white"
+        >Register</a
+      >
       <!--- <HeaderLink href="/recruiting">Recruiting</HeaderLink> -->
     </div>
 
@@ -62,6 +67,11 @@ import Logo from "./Logo.astro";
       >
         <a href="/for-partners" class="hover:underline">FOR PARTNERS</a>
         <a href="/contact" class="hover:underline">CONTACT</a>
+        <a
+          href="https://match.opportune.fi"
+          class="hover:no-underline mt-4 self-stretch text-center border-2 border-accent px-2 py-1 rounded-lg bg-accent hover:opacity-85 text-white hover:text-white"
+          >REGISTER</a
+        >
         <!--- <a href="/recruiting" class="hover:underline">RECRUITING</a> --->
       </div>
     </div>

src/components/HeaderLink.astro

@@ -13,10 +13,9 @@ const isActive = href === pathname || href === "/" + (subpath?.[0] || "");
   href={href}
   class:list={[
     className,
-    "inline-block pl-1 pr-1 text-white hover:text-accent",
+    "inline-block pl-1 pr-1 text-white hover:text-accent self-center",
     {
-      "font-bold border-b-2 md:border-b-4 border-accent":
-        isActive,
+      "font-bold border-b-2 md:border-b-4 border-accent": isActive,
     },
   ]}
   {...props}

src/components/JobDatingSection.astro

@@ -1,23 +1,39 @@
 <br />
 <section class="container mx-auto jobdating-section">
-
-    <h4 class="text-lg">Job Dating means short 5-10 minute interviews with potential employers.</h4>
-
-    <br />
-
-    <p class="text-lg font-bold mb-4">Step by step guide to participate:</p>
-
-    <ol class="list-decimal list-inside mt-2">
-      <li class="ml-6 mb-2"> Download the app via App Store or Google Play. (Published on 1.11.2025)</li>
-      <li class="ml-6 mb-2"> Make an applicant profile.</li>
-      <li class="ml-6 mb-2"> Wait for invitation to an interview from an employer in the event.</li>
-    </ol>
-
+  <h4 class="text-lg">
+    Job Dating means short 5-10 minute interviews with potential employers.
+  </h4>
+
+  <br />
+
+  <p class="text-lg font-bold mb-4">Step by step guide to participate:</p>
+
+  <ol class="list-decimal list-inside mt-2">
+    <li class="ml-6 mb-2">
+      Download the app from <a
+        href="https://apps.apple.com/fi/app/opportune-match/id6754336717"
+        target="_blank">App Store</a
+      > or <a
+        href="https://play.google.com/store/apps/details?id=fi.mankelisolutions.ligatum&hl=en"
+        target="_blank">Google Play</a
+      > or use the <a href="https://match.opportune.fi" target="_blank"
+        >Web Version</a
+      >.
+    </li>
+    <li class="ml-6 mb-2">
+      Create a profile and fill in your details. Take your time on this step, as
+      this information is crucial for the app to be able to match you with
+      companies.
+    </li>
+    <li class="ml-6 mb-2">Enroll to "Root Expo 2025" -event</li>
+    <li class="ml-6 mb-2">
+      Wait for invitation to an interview from an employer in the event. We will
+      notify you with push notifications (given you grant the permission) and
+      emails when you get matched and invited to a job dating interview.
+    </li>
+  </ol>
 </section>
 
-
-
-
 <style>
   .faq-section {
     max-width: 3000px;
@@ -29,4 +45,4 @@
     text-align: center;
     margin-bottom: 2rem;
   }
-</style>
+</style>