Hover effect

app/components/UpcomingWebinars.tsx

@@ -0,0 +1,85 @@
+'use client'
+import Link from "next/link"
+import { HoverEffect } from "./ui/card-hover-effect";
+
+function UpcomingWebinars() {
+
+  const featuredWebinars = [
+    {
+      title: 'Understanding Music Theory',
+      description:
+        'Dive deep into the fundamentals of music theory and enhance your musical skills.',
+      slug: 'understanding-music-theory',
+      isFeatured: true,
+    },
+    {
+      title: 'The Art of Songwriting',
+      description:
+        'Learn the craft of songwriting from experienced musicians and songwriters.',
+      slug: 'the-art-of-songwriting',
+      isFeatured: true,
+    },
+    {
+      title: 'Mastering Your Instrument',
+      description:
+        'Advanced techniques to master your musical instrument of choice.',
+      slug: 'mastering-your-instrument',
+      isFeatured: true,
+    },
+    {
+      title: 'Music Production Essentials',
+      description:
+        'Get started with music production with this comprehensive overview.',
+      slug: 'music-production-essentials',
+      isFeatured: true,
+    },
+    // Added two more webinars
+    {
+      title: 'Live Performance Techniques',
+      description:
+        'Enhance your live performance skills with expert tips and strategies.',
+      slug: 'live-performance-techniques',
+      isFeatured: true,
+    },
+    {
+      title: 'Digital Music Marketing',
+      description:
+        'Learn how to promote your music effectively in the digital age.',
+      slug: 'digital-music-marketing',
+      isFeatured: true,
+    },
+  ];
+
+  return (
+    <div className="p-12 bg-gray-900">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6">
+        <div className="text-center">
+          <h2 className="text-base text-teal-600 font-semibold tracking-wide uppercase">FEATURED WEBINARS</h2>
+          <p className="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">Enhance Your Musical Journey</p>
+        </div>
+
+        <div className="mt-10">
+          <HoverEffect
+          items={featuredWebinars.map(webinar => (
+            {
+              title: webinar.title,
+              description: webinar.description,
+              link: '/'
+            }
+          ))}
+          />
+        </div>
+
+        <div className="mt-10 text-center">
+          <Link href={"/"}
+          className="px-4 py-2 rounded border border-neutral-600 text-neutral-700 bg-white hover:bg-gray-100 transition duration-200"
+          >
+            View All webinars
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default UpcomingWebinars

app/components/ui/card-hover-effect.tsx

@@ -0,0 +1,111 @@
+import { cn } from "@/app/utils/cn";
+import { AnimatePresence, motion } from "framer-motion";
+import Link from "next/link";
+import { useState } from "react";
+
+export const HoverEffect = ({
+  items,
+  className,
+}: {
+  items: {
+    title: string;
+    description: string;
+    link: string;
+  }[];
+  className?: string;
+}) => {
+  let [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  return (
+    <div
+      className={cn(
+        "grid grid-cols-1 md:grid-cols-2  lg:grid-cols-3  py-10",
+        className
+      )}
+    >
+      {items.map((item, idx) => (
+        <Link
+          href={item?.link}
+          key={item?.link}
+          className="relative group  block p-2 h-full w-full"
+          onMouseEnter={() => setHoveredIndex(idx)}
+          onMouseLeave={() => setHoveredIndex(null)}
+        >
+          <AnimatePresence>
+            {hoveredIndex === idx && (
+              <motion.span
+                className="absolute inset-0 h-full w-full bg-neutral-200 dark:bg-slate-800/[0.8] block  rounded-3xl"
+                layoutId="hoverBackground"
+                initial={{ opacity: 0 }}
+                animate={{
+                  opacity: 1,
+                  transition: { duration: 0.15 },
+                }}
+                exit={{
+                  opacity: 0,
+                  transition: { duration: 0.15, delay: 0.2 },
+                }}
+              />
+            )}
+          </AnimatePresence>
+          <Card>
+            <CardTitle>{item.title}</CardTitle>
+            <CardDescription>{item.description}</CardDescription>
+          </Card>
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export const Card = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div
+      className={cn(
+        "rounded-2xl h-full w-full p-4 overflow-hidden bg-black border border-transparent dark:border-white/[0.2] group-hover:border-slate-700 relative z-20",
+        className
+      )}
+    >
+      <div className="relative z-50">
+        <div className="p-4">{children}</div>
+      </div>
+    </div>
+  );
+};
+export const CardTitle = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <h4 className={cn("text-zinc-100 font-bold tracking-wide mt-4", className)}>
+      {children}
+    </h4>
+  );
+};
+export const CardDescription = ({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <p
+      className={cn(
+        "mt-8 text-zinc-400 tracking-wide leading-relaxed text-sm",
+        className
+      )}
+    >
+      {children}
+    </p>
+  );
+};

app/page.tsx

@@ -3,6 +3,7 @@ import HeroSection from "./components/HeroSection";
 import FeaturedCourse from "./components/FeaturedCourse";
 import WhyChooseUs from "./components/WhyChooseUs";
 import MusicSchoolCards from "./components/MusicSchoolCards";
+import UpcomingWebinars from "./components/UpcomingWebinars";
 
 export default function Home() {
   return (
@@ -11,6 +12,7 @@ export default function Home() {
       <FeaturedCourse />
       <WhyChooseUs />
       <MusicSchoolCards />
+      <UpcomingWebinars />
     </>
   );
 }