feat(ui): make instructor cards fully clickable and add scroll-to-top component

components/InstructorCard.tsx

@@ -3,30 +3,39 @@ import type { Instructor } from '@/lib/data';
 
 export function InstructorCard({ instructor }: { instructor: Instructor }) {
   return (
-    <article className="rounded-3xl border border-violet-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg">
+    <article className="relative flex flex-col rounded-3xl border border-violet-100 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-lg focus-within:ring-2 focus-within:ring-violet-500">
+
       <div className="mb-4 flex items-center justify-between gap-4">
         <div>
           <p className="text-sm font-semibold uppercase tracking-[0.24em] text-violet-700">{instructor.location}</p>
           <h3 className="mt-2 text-xl font-semibold text-slate-900">{instructor.name}</h3>
         </div>
-        <span className="rounded-full bg-violet-50 px-3 py-1 text-sm font-medium text-violet-700">
+        <span className="relative z-10 rounded-full bg-violet-50 px-3 py-1 text-sm font-medium text-violet-700">
           ${instructor.ratePerHour}/hr
         </span>
       </div>
+
       <p className="text-sm leading-6 text-slate-600">{instructor.description}</p>
-      <div className="mt-5 flex flex-wrap gap-2">
+
+      <div className="relative z-10 mt-5 flex flex-wrap gap-2">
         {instructor.specialties.map((tag) => (
           <span key={tag} className="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">
             {tag}
           </span>
         ))}
       </div>
-      <div className="mt-6 flex items-center justify-between gap-4">
+
+      <div className="mt-auto pt-6 flex items-center justify-between gap-4">
         <p className="text-sm text-slate-500">{instructor.languages.join(' • ')}</p>
-        <Link href={`/instructor/${instructor.id}`} className="rounded-full bg-violet-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-violet-800">
+
+        <Link 
+          href={`/instructor/${instructor.id}`} 
+          className="rounded-full bg-violet-700 px-4 py-2 text-sm font-semibold text-white transition hover:bg-violet-800 after:absolute after:inset-0 focus:outline-none"
+        >
           View profile
         </Link>
       </div>
+
     </article>
   );
-}
+}

components/ScrollToTop.tsx

@@ -1,15 +1,45 @@
 "use client";
 
-
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { usePathname } from "next/navigation";
 
 export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
   const pathname = usePathname();
 
   useEffect(() => {
     window.scrollTo(0, 0);
   }, [pathname]);
 
-  return null;
+  useEffect(() => {
+    const toggleVisibility = () => {
+      if (window.scrollY > 300) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener("scroll", toggleVisibility);
+    return () => window.removeEventListener("scroll", toggleVisibility);
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  if (!isVisible) return null;
+
+  return (
+    <button
+      onClick={scrollToTop}
+      className="fixed bottom-8 right-8 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-violet-700 text-white shadow-md transition-all hover:bg-violet-800 hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-violet-500 focus:ring-offset-2"
+      aria-label="Scroll to top"
+    >
+      <span className="text-xl leading-none">↑</span>
+    </button>
+  );
 }