feat: add class modal with descriptions, photos and remove email from contacts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/sections/Classes.tsx

@@ -1,7 +1,12 @@
+"use client";
+
+import { useState } from "react";
 import { Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
 import { siteContent } from "@/data/content";
 import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
+import { ClassModal } from "@/components/ui/ClassModal";
+import type { ClassItem } from "@/types";
 
 const iconMap: Record<string, React.ReactNode> = {
   flame: <Flame size={32} />,
@@ -14,6 +19,7 @@ const iconMap: Record<string, React.ReactNode> = {
 
 export function Classes() {
   const { classes } = siteContent;
+  const [selectedClass, setSelectedClass] = useState<ClassItem | null>(null);
 
   return (
     <section id="classes" className="surface-muted section-padding">
@@ -24,8 +30,11 @@ export function Classes() {
 
         <div className="mt-12 grid gap-6 sm:grid-cols-2">
           {classes.items.map((item) => (
-            <Reveal key={item.name}>
-              <div className="card">
+            <Reveal key={item.name} className="h-full">
+              <div
+                className="card h-full flex flex-col cursor-pointer transition-transform hover:scale-[1.02]"
+                onClick={() => setSelectedClass(item)}
+              >
                 <div className="heading-text">{iconMap[item.icon]}</div>
                 <h3 className="heading-text mt-4 text-xl font-semibold">{item.name}</h3>
                 <p className="body-text mt-2">{item.description}</p>
@@ -34,6 +43,11 @@ export function Classes() {
           ))}
         </div>
       </div>
+
+      <ClassModal
+        classItem={selectedClass}
+        onClose={() => setSelectedClass(null)}
+      />
     </section>
   );
 }