lightswind/dist/src/components/ui/seasonal-hover-cards.js

A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SeasonalHoverCards = SeasonalHoverCards;
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@/components/lib/utils");
const SeasonCard = ({ title, subtitle, description, imageSrc, imageAlt, className, }) => {
    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)("group relative flex flex-col justify-end p-6 w-full md:w-1/3 h-[350px] lg:h-[450px] bg-black rounded-lg overflow-hidden shadow-lg transition-all duration-500 hover:w-2/3", className), children: [(0, jsx_runtime_1.jsx)("img", { src: imageSrc, className: "absolute inset-0 w-full h-full object-cover object-center", alt: imageAlt || title }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 bg-black bg-opacity-60" }), (0, jsx_runtime_1.jsxs)("div", { className: "relative md:absolute md:bottom-20 z-10 space-y-2", children: [(0, jsx_runtime_1.jsx)("h2", { className: "text-xl font-bold text-white", children: title }), (0, jsx_runtime_1.jsx)("p", { className: "text-sm text-gray-300", children: subtitle })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-4 transform translate-y-6 opacity-0 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0", children: (0, jsx_runtime_1.jsx)("p", { className: "text-lg text-white", children: description }) })] }));
};
function SeasonalHoverCards({ cards, className, }) {
    return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-wrap md:flex-nowrap gap-4 w-full px-4", className), children: cards.map((card, index) => ((0, jsx_runtime_1.jsx)(SeasonCard, { title: card.title, subtitle: card.subtitle, description: card.description, imageSrc: card.imageSrc, imageAlt: card.imageAlt }, index))) }));
}
//# sourceMappingURL=seasonal-hover-cards.js.map