Copy update and some formatting

src/components/layout/SplitTransition.astro

@@ -9,7 +9,7 @@
  * Left  -> Professional (polished tone)
  * Right -> Interests    (warm tone)
  */
-import Icon from '@components/Icon.astro';
+import Icon from "@components/Icon.astro";
 
 interface Props {
   /** Optional override copy for each side. Defaults to spec phrasing. */
@@ -20,10 +20,10 @@ interface Props {
 }
 
 const {
-  leftHref = '/professional',
-  rightHref = '/interests',
-  leftText = 'See where I apply that curiosity professionally',
-  rightText = 'See where it takes me outside of work',
+  leftHref = "/professional",
+  rightHref = "/interests",
+  leftText = "See where I apply that curiosity professionally",
+  rightText = "See where it takes me outside of work",
 } = Astro.props;
 ---
 
@@ -32,15 +32,25 @@ const {
     href={leftHref}
     class="card card-interactive group flex items-center justify-between gap-4"
   >
+    <Icon
+      name="arrow-left"
+      class="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1"
+      style="color: var(--color-accent);"
+    />
     <span class="flex flex-col gap-1">
-      <span class="font-mono text-xs uppercase tracking-[0.18em]" style="color: var(--color-text-subtle);">
+      <span
+        class="font-mono text-xs uppercase tracking-[0.18em]"
+        style="color: var(--color-text-subtle); text-align:right;"
+      >
         The professional wing
       </span>
-      <span class="font-sans text-lg font-semibold" style="color: var(--color-text);">
+      <span
+        class="font-sans text-lg font-semibold"
+        style="color: var(--color-text);"
+      >
         {leftText}
       </span>
     </span>
-    <Icon name="arrow-right" class="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1" style="color: var(--color-accent);" />
   </a>
 
   <a
@@ -48,13 +58,23 @@ const {
     class="card card-interactive group flex items-center justify-between gap-4"
   >
     <span class="flex flex-col gap-1">
-      <span class="font-mono text-xs uppercase tracking-[0.18em]" style="color: var(--color-text-subtle);">
+      <span
+        class="font-mono text-xs uppercase tracking-[0.18em]"
+        style="color: var(--color-text-subtle);"
+      >
         The personal wing
       </span>
-      <span class="font-sans text-lg font-semibold" style="color: var(--color-text);">
+      <span
+        class="font-sans text-lg font-semibold"
+        style="color: var(--color-text);"
+      >
         {rightText}
       </span>
     </span>
-    <Icon name="arrow-right" class="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1" style="color: var(--color-accent);" />
+    <Icon
+      name="arrow-right"
+      class="h-6 w-6 shrink-0 transition-transform group-hover:translate-x-1"
+      style="color: var(--color-accent);"
+    />
   </a>
 </div>