improve accessibility

Signed-off-by: rishichawda <[email protected]>

Author: rishichawda

src/components/footer.astro

@@ -10,6 +10,7 @@ const currentYear = new Date().getFullYear();
         target="_blank"
         rel="noopener noreferrer"
         class="text-gray-500 hover:text-gray-700 transition-colors"
+        aria-label="Visit Rishi's GitHub profile"
       >
         <span class="sr-only">GitHub</span>
         <svg viewBox="0 0 24 24" class="w-5 h-5 sm:w-6 sm:h-6 fill-current"
@@ -23,6 +24,7 @@ const currentYear = new Date().getFullYear();
         target="_blank"
         rel="noopener noreferrer"
         class="text-gray-500 hover:text-gray-700 transition-colors"
+        aria-label="Connect with Rishi on LinkedIn"
       >
         <span class="sr-only">LinkedIn</span>
         <svg viewBox="0 0 24 24" class="w-5 h-5 sm:w-6 sm:h-6 fill-current"
@@ -36,6 +38,7 @@ const currentYear = new Date().getFullYear();
         target="_blank"
         rel="noopener noreferrer"
         class="text-gray-500 hover:text-gray-700 transition-colors"
+        aria-label="Follow Rishi on Instagram"
       >
         <span class="sr-only">Instagram</span>
         <svg

src/components/landing/articles_preview.astro

@@ -208,9 +208,8 @@ const articles = allArticles
         if (dotsContainer) {
           dotsContainer.innerHTML = "";
           for (let i = 0; i < totalSlides; i++) {
-            const dot = document.createElement("button");
+            const dot = document.createElement("span");
             dot.className = `w-2 h-2 rounded-full ${i === currentIndex ? "bg-[#B7BEE7]" : "bg-[#B7BEE7]/40"}`;
-            dot.setAttribute("aria-label", `Go to slide ${i + 1}`);
             dot.setAttribute("data-index", i.toString());
             dotsContainer.appendChild(dot);
           }

src/components/landing/call_to_action.astro

@@ -1,16 +1,22 @@
 <section class="bg-brand-900/[0.05] py-16 md:py-20 px-4">
   <div class="max-w-4xl mx-auto text-center">
-    <h2 class="text-3xl md:text-4xl font-['Red_Hat_Display_Variable'] font-medium text-brand-900 mb-4">
+    <h2
+      class="text-3xl md:text-4xl font-['Red_Hat_Display_Variable'] font-medium text-brand-900 mb-4"
+    >
       Let's Work Together
     </h2>
-    <p class="text-lg md:text-xl font-light text-brand-700 mb-8 font-['Montserrat_Variable']">
-      Have a project in mind or want to discuss potential opportunities? I'd love to hear from you.
+    <p
+      class="text-lg md:text-xl font-light text-brand-700 mb-8 font-['Montserrat_Variable']"
+    >
+      Have a project in mind or want to discuss potential opportunities? I'd
+      love to hear from you.
     </p>
     <a
+      transition:name="cta-cta-button"
       href="/contact/"
       class="bg-brand-700 text-white px-6 py-3 rounded font-['Red_Hat_Display_Variable'] text-sm font-medium uppercase tracking-wide hover:bg-brand-900 transition-colors text-center"
     >
       Get in touch
     </a>
   </div>
-</section>
+</section>

src/components/landing/hero.astro

@@ -15,8 +15,8 @@ import logo from "../../../content/assets/logo/Group 489.svg";
 >
   <!-- Split Background -->
   <div class="absolute inset-0 flex">
-    <div class="w-0 lg:w-1/2 bg-[#98a5db]/[0.88]"></div>
-    <div class="w-full lg:w-1/2 bg-[#8592c8]"></div>
+    <div class="w-0 lg:w-1/2 bg-brand-500/[0.88]"></div>
+    <div class="w-full lg:w-1/2 bg-brand-500"></div>
   </div>
 
   <!-- Navigation -->
@@ -106,6 +106,7 @@ import logo from "../../../content/assets/logo/Group 489.svg";
         target="_blank"
         rel="noopener noreferrer"
         class="hover:opacity-80 transition-opacity hover:cursor-pointer"
+        aria-label="Visit Rishi's GitHub profile"
       >
         <svg
           width="32"
@@ -124,6 +125,7 @@ import logo from "../../../content/assets/logo/Group 489.svg";
         target="_blank"
         rel="noopener noreferrer"
         class="hover:opacity-80 transition-opacity hover:cursor-pointer"
+        aria-label="Connect with Rishi on LinkedIn"
       >
         <svg
           width="26"
@@ -142,6 +144,7 @@ import logo from "../../../content/assets/logo/Group 489.svg";
         target="_blank"
         rel="noopener noreferrer"
         class="hover:opacity-80 transition-opacity hover:cursor-pointer"
+        aria-label="Follow Rishi on Instagram"
       >
         <svg
         width="26"
@@ -163,8 +166,9 @@ import logo from "../../../content/assets/logo/Group 489.svg";
   <!-- Get in Touch Button -->
   <div class="relative z-20 mt-8 w-fit mx-auto mb-4">
     <a
+      transition:name="hero-cta-button"
       href="/contact/"
-      class="bg-brand-500 text-white px-6 py-3 rounded font-['Red_Hat_Display_Variable'] text-sm font-medium uppercase tracking-wide hover:bg-brand-600 transition-colors block text-center"
+      class="bg-brand-500 text-white px-6 py-3 rounded font-['Red_Hat_Display_Variable'] text-sm font-medium uppercase tracking-wide hover:bg-brand-500 transition-colors block text-center"
     >
       Get in Touch
     </a>