From 795de61d9ae098575f13cfab9bc25126415edf6c Mon Sep 17 00:00:00 2001
From: Nitish <nitishrchaubey9926@gmail.com>
Date: Tue, 28 Apr 2026 00:56:19 +0530
Subject: [PATCH] feat(ui): make instructor cards fully clickable and add
 scroll-to-top button

---
 components/InstructorCard.tsx | 21 +++++++++++++------
 components/ScrollToTop.tsx    | 39 +++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 6 deletions(-)
 create mode 100644 components/ScrollToTop.tsx

diff --git a/components/InstructorCard.tsx b/components/InstructorCard.tsx
index ec6a5ee..3fead4c 100644
--- a/components/InstructorCard.tsx
+++ b/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>
   );
-}
+}
\ No newline at end of file
diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx
new file mode 100644
index 0000000..a5a5101
--- /dev/null
+++ b/components/ScrollToTop.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  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>
+  );
+}
\ No newline at end of file