Added hover effects to mockups.

Author: ProCO-RPHopkins

frontend/index.html

@@ -303,10 +303,15 @@ <h3 class="font-semibold mb-2">My Role — Context Engineer</h3>
 
       <!-- Screenshots -->
       <div class="grid md:grid-cols-2 gap-6 mb-10">
-        <img src="assets/achieve-hero.png" class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10" alt="Landing & mobile flows">
-        <img src="assets/achieve-analytics.png" class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10" alt="Analytics & job-tracking">
+        <img src="assets/achieve-hero.png"
+            class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10 transition-transform duration-300 hover:scale-105 hover:shadow-xl"
+            alt="Landing & mobile flows" />
+        <img src="assets/achieve-analytics.png"
+            class="rounded-xl ring-1 ring-gray-200 dark:ring-white/10 transition-transform duration-300 hover:scale-105 hover:shadow-xl"
+            alt="Analytics & job-tracking" />
       </div>
 
+
       <!-- Analytics & AI Analyst -->
       <div class="bg-white dark:bg-slate-800 rounded-2xl p-6 ring-1 ring-gray-200 dark:ring-white/10 mt-10">
         <h3 class="font-semibold text-xl mb-4">Super Admin Data Dashboard & AI Analyst</h3>
@@ -323,19 +328,20 @@ <h3 class="font-semibold text-xl mb-4">Super Admin Data Dashboard & AI Analyst</
         </ul>
 
         <div class="grid gap-6 md:grid-cols-3 justify-items-center">
-          <img src="assets/ai-analyst.png"
-              alt="AI Analyst – verified pipeline & range"
-              class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900"
-              loading="lazy" />
-          <img src="assets/data-dashboard.png"
-              alt="Admin dashboard – KPIs and equity analysis"
-              class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900"
-              loading="lazy" />
-          <img src="assets/user-data.png"
-              alt="User summary table – outcomes and demographics"
-              class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900"
-              loading="lazy" />
-        </div>
+  <img src="assets/ai-analyst.png"
+       alt="AI Analyst – verified pipeline & range"
+       class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900 transition-transform duration-300 hover:scale-105 hover:shadow-lg"
+       loading="lazy" />
+  <img src="assets/data-dashboard.png"
+       alt="Admin dashboard – KPIs and equity analysis"
+       class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900 transition-transform duration-300 hover:scale-105 hover:shadow-lg"
+       loading="lazy" />
+  <img src="assets/user-data.png"
+       alt="User summary table – outcomes and demographics"
+       class="w-[260px] md:w-[300px] lg:w-[340px] h-auto object-contain rounded-xl ring-1 ring-gray-200 dark:ring-white/10 bg-gray-50 dark:bg-slate-900 transition-transform duration-300 hover:scale-105 hover:shadow-lg"
+       loading="lazy" />
+</div>
+
       </div>
 
       <!-- Architecture -->

frontend/src/output.css

@@ -1020,6 +1020,22 @@
       }
     }
   }
+  .hover\:shadow-lg {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
+  .hover\:shadow-xl {
+    &:hover {
+      @media (hover: hover) {
+        --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      }
+    }
+  }
   .hover\:shadow-teal-500\/20 {
     &:hover {
       @media (hover: hover) {