Reveal Card Demo

1import React from "react";
2import RevealCard from "../ui/reveal-card";
3 
4const RevealCardDemo = () => {
5  const heroes = [
6    {
7      coverImage:
8        "https://raw.githubusercontent.com/MihirJaiswal/hero-hq/main/public/spidermanposter.jpg",
9      titleImage:
10        "https://raw.githubusercontent.com/MihirJaiswal/hero-hq/main/public/pngwing1.png",
11      characterImage:
12        "https://raw.githubusercontent.com/MihirJaiswal/hero-hq/main/public/spidermanpng.png",
13    },
14  ];
15 
16  return (
17    <div className="py-6 px-6">
18      <div className="max-w-7xl mx-auto">
19        <div className="mb-20 text-center">
20          <h1 className="text-3xl font-extrabold mb-4 relative">
21            <span>Hover on the card</span>
22          </h1>
23        </div>
24 
25        <div className="flex flex-wrap justify-center gap-16 mt-4 mb-16">
26          {heroes.map((hero, index) => (
27            <div
28              key={index}
29              className="relative group transform transition-all duration-300 hover:scale-105"
30            >
31              <div className="relative flex flex-col items-center">
32                <RevealCard
33                  coverImage={hero.coverImage}
34                  titleImage={hero.titleImage}
35                  characterImage={hero.characterImage}
36                />
37              </div>
38            </div>
39          ))}
40        </div>
41      </div>
42    </div>
43  );
44};
45 
46export default RevealCardDemo;