"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", figure: "figure", pre: "pre", span: "span", ..._provideComponents(), ...props.components }, {HotelCardWithAnimation} = _components; if (!HotelCardWithAnimation) _missingMdxReference("HotelCardWithAnimation", true); return _jsxs(_Fragment, { children: [_jsx("div", { class: "not-prose mb-8 flex justify-center items-center", children: _jsx(HotelCardWithAnimation, {}) }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { "--shiki-light": "#24292e", "--shiki-dark": "#e1e4e8", "--shiki-light-bg": "#fff", "--shiki-dark-bg": "#24292e" }, tabIndex: "0", "data-language": "jsx", "data-theme": "github-light github-dark", children: _jsxs(_components.code, { "data-language": "jsx", "data-theme": "github-light github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "figure" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"group w-[30rem] h-[38rem] relative m-0 overflow-hidden rounded-lg\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "a" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " href" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"#\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "img" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " src" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"https://travel-land-eta.vercel.app/_next/image?url=%2Fstatic%2Fimages%2Fhotel-5.webp&w=3840&q=75\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " alt" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"Great Barrier Reef, Australia\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"w-full h-full block object-cover group-hover:scale-100 scale-[1.2] transition-transform ease-in-out duration-300 group-hover:opacity-100 translate-y-0 translate-x-0 rotate-0 rounded-lg\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "figcaption" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"h-full group-hover:bg-[linear-gradient(180deg,rgba(21,22,24,0.24)_0%,#151618_100%)] before:ease-in-out before:duration-300 absolute pointer-events-none flex flex-col justify-end gap-8 px-10 py-16 inset-0 z-[1] before:content-[''] before:absolute before:opacity-0 before:transition-opacity\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "main" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"flex group-hover:opacity-100 flex-col justify-end gap-8 opacity-0 transition-[opacity,transform] transform -translate-y-[6rem] ease-in-out duration-300 group-hover:translate-y-0\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"small text-white text-sm uppercase m-0\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">9-day trip" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "h3" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"m-0 text-4xl font-normal text-white leading-tight\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " Shangri La Bosphorus Istanbul, <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "em" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">Turkey" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"text-base leading-relaxed italic text-gray-200\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " In a city that straddles Europe and Asia, discover an enchanting" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " retreat that draws on influences of East and West in Shangri-La" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " Bosphorus, Istanbul." }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "footer" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"flex group-hover:translate-y-0 group-hover:opacity-100 justify-between items-center transition-[opacity,transform] opacity-0 transform translate-y-[6rem] ease-in-out duration-300\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"small text-white text-[0.8125rem] font-bold uppercase m-0\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " From" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"price text-2xl text-white font-variant-numeric lining-nums proportional-nums m-0\"" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: ">" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " €2,500" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "svg" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " xmlns" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"http://www.w3.org/2000/svg\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " fill" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"none\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " viewBox" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"0 0 24 24\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " strokeWidth" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: "{" }), _jsx(_components.span, { style: { "--shiki-light": "#005CC5", "--shiki-dark": "#79B8FF" }, children: "1.5" }), _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: "}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " stroke" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"currentColor\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " class" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\" h-6 w-6 delay-300 text-white opacity-0 transition-[transform,opacity] transform -translate-x-[3rem] rotate-[360deg] group-hover:translate-x-0 group-hover:rotate-0 group-hover:opacity-100\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " >" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-light": "#22863A", "--shiki-dark": "#85E89D" }, children: "path" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " strokeLinecap" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"round\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " strokeLinejoin" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"round\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#6F42C1", "--shiki-dark": "#B392F0" }, children: " d" }), _jsx(_components.span, { style: { "--shiki-light": "#D73A49", "--shiki-dark": "#F97583" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-light": "#032F62", "--shiki-dark": "#9ECBFF" }, children: "\"M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " />" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: " " })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-light": "#24292E", "--shiki-dark": "#E1E4E8" }, children: "" })] })] }) }) })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

Hotel Card With Animation