New Commits

app/page.tsx

@@ -1,10 +1,12 @@
 import Grid from "@/components/Grid";
 import Hero from "@/components/Hero";
+import { CardHoverEffectDemo } from "@/components/HoverEffect";
 import { MacbookScrollDemo } from "@/components/MacBookScroll";
 import RecentProjects from "@/components/RecentProjects";
 import { FloatingNav } from "@/components/ui/FloatingNav";
+import { HoverEffect } from "@/components/ui/card-hover-effect";
 import { FaHome } from "react-icons/fa";
-import { FaRProject } from "react-icons/fa6";
+import { FaPhone, FaRProject, FaServicestack, FaUser } from "react-icons/fa6";
 
 export default function Home() {
   return (
@@ -13,16 +15,16 @@ export default function Home() {
         <FloatingNav
           navItems={[
             { name: "Home", link: "/", icon: <FaHome /> },
-            { name: "About", link: "#projects" },
+            { name: "About", link: "#projects", icon: <FaUser /> },
             { name: "My Projects", link: "#projects", icon: <FaRProject /> },
-            { name: "Services", link: "#" },
-            { name: "Contact", link: "#" },
+            { name: "Services", link: "#", icon: <FaServicestack /> },
+            { name: "Contact", link: "#", icon: <FaPhone /> },
           ]}
         />
         <Hero />
         <Grid />
-        <MacbookScrollDemo />
         <RecentProjects />
+        <CardHoverEffectDemo />
       </div>
     </main>
   );

components/HoverEffect.tsx

@@ -0,0 +1,52 @@
+import { HoverEffect } from "./ui/card-hover-effect";
+
+export function CardHoverEffectDemo() {
+  return (
+    <>
+      <h1 className="heading">
+        My Services / <span className="text-purple">What I Do?</span>
+      </h1>
+      <div className="max-w-7xl mx-auto px-1">
+        <HoverEffect items={projects} />
+      </div>
+    </>
+  );
+}
+export const projects = [
+  {
+    title: "Web Application Development",
+    description:
+      "I develop custom, scalable web applications tailored to your business, ensuring security and seamless user experiences.",
+    link: "#",
+  },
+  {
+    title: "Technical Support",
+    description:
+      "I provide reliable technical support, ensuring your systems run smoothly and efficiently.I resolve issues and offer expert guidance.",
+    link: "#",
+  },
+  {
+    title: "Database Management",
+    description:
+      "I specialize in code optimization, enhancing performance, efficiency, and maintainability. I ensures faster, more reliable applications.",
+    link: "#",
+  },
+  {
+    title: "Code Optimization",
+    description:
+      "A technology company that focuses on building products that advance Facebook's mission of bringing the world closer together.",
+    link: "#",
+  },
+  {
+    title: "Consultation Services",
+    description:
+      "Providing insights and solutions to optimize your projects.Ensuring efficient and high-quality code development.",
+    link: "#",
+  },
+  {
+    title: "Freelancer",
+    description:
+      "I offer freelance web development services, creating custom, scalable solutions to meet your business needs.",
+    link: "#",
+  },
+];

components/ui/card-hover-effect.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { cn } from "@/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-100 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>
+  );
+};

data/index.ts

@@ -13,7 +13,7 @@ export const gridItems = [
     className: "lg:col-span-3 md:col-span-6 md:row-span-4 lg:min-h-[60vh]",
     imgClassName: "w-full h-full",
     titleClassName: "justify-end",
-    img: "/b1.svg",
+    img: "/mybg2.jpg",
     spareImg: "",
   },
   {
@@ -76,7 +76,7 @@ export const projects = [
     des: "Google Gemini is a family of multimodal large language models developed by Google DeepMind.",
     img: "/geminiclone.png",
     iconLists: ["/re.svg", "/google.png", "/firebase-svgrepo-com.svg", "/sass.png", "/fm.svg"],
-    link: "/ui.earth.com",
+    link: "https://gemini-clone-orcin.vercel.app/",
   },
   {
     id: 2,