Open in 





Forest Adventure
Valley of life
Sala behta hi jayega
Camping is for pros
The road not taken

The First Rule
Installation
Install dependencies
npm i motion clsx tailwind-merge @tabler/icons-react
Add util file
lib/utils.ts
import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
Copy the source code
components/ui/focus-cards.tsx
"use client";
import Image from "next/image";
import React, { useState } from "react";
import { cn } from "@/lib/utils";
export const Card = React.memo(
({
card,
index,
hovered,
setHovered,
}: {
card: any;
index: number;
hovered: number | null;
setHovered: React.Dispatch<React.SetStateAction<number | null>>;
}) => (
<div
onMouseEnter={() => setHovered(index)}
onMouseLeave={() => setHovered(null)}
className={cn(
"rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out",
hovered !== null && hovered !== index && "blur-sm scale-[0.98]"
)}
>
<Image
src={card.src}
alt={card.title}
fill
className="object-cover absolute inset-0"
/>
<div
className={cn(
"absolute inset-0 bg-black/50 flex items-end py-8 px-4 transition-opacity duration-300",
hovered === index ? "opacity-100" : "opacity-0"
)}
>
<div className="text-xl md:text-2xl font-medium bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-200">
{card.title}
</div>
</div>
</div>
)
);
Card.displayName = "Card";
type Card = {
title: string;
src: string;
};
export function FocusCards({ cards }: { cards: Card[] }) {
const [hovered, setHovered] = useState<number | null>(null);
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto md:px-8 w-full">
{cards.map((card, index) => (
<Card
key={card.title}
card={card}
index={index}
hovered={hovered}
setHovered={setHovered}
/>
))}
</div>
);
}
Props
Component | Prop | Type | Description |
---|---|---|---|
Card | card | Card | The card object containing title and src properties |
Card | index | number | The index of the card in the array |
Card | hovered | number | null | The index of the currently hovered card, or null if no card is hovered |
Card | setHovered | React.Dispatch<React.SetStateAction<number | null>> | Function to update the hovered state |
FocusCards | cards | Card[] | An array of Card objects to be rendered |
Get beautiful, hand-crafted templates and components with Aceternity UI Pro
Professional, beautiful and elegant templates for your business. Get the best component packs and templates with Aceternity UI Pro.
Manu is the man! He is the best front-end developer I have worked with. He took the requirements and quite literally ran with them. We are super happy with the result and product we go...
John Shahawy
Founder at Rogue and Moonbeam