function SoftBoxLayout({ bgBoxColor, textColor, titleFont, title, imgSrc }) { return /*#__PURE__*/ React.createElement("div", { className: `flex items-center justify-center p-4 rounded-md ${bgBoxColor} shadow-lg`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: imgSrc, alt: "猫のアイコン", className: "w-[50px] h-[50px] mr-3", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: `text-4xl ${textColor} ${titleFont}`, __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, title)); } function SoftBoxLayoutStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SoftBoxLayout, { bgBoxColor: "bg-[#f0f0f0]", textColor: "text-black", titleFont: "font-roboto", title: "猫のタイトル", imgSrc: "https://ucarecdn.com/2d2d9539-ab74-43bf-b96d-ba2d74348da7/-/format/auto/", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SoftBoxLayout, { bgBoxColor: "bg-[#e0e0e0]", textColor: "text-red-500", titleFont: "font-crimson-text", title: "別の猫", imgSrc: "https://ucarecdn.com/2d2d9539-ab74-43bf-b96d-ba2d74348da7/-/format/auto/", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this })); } function MainComponent() { const bgBoxColor = "bg-[#F6F7F8]"; const textColor = "text-[#758492]"; const titleFont = "font-thin"; const title = "雪猫のホームページ"; const imgSrc = "https://ucarecdn.com/2d2d9539-ab74-43bf-b96d-ba2d74348da7/-/format/auto/"; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen bg-[#9BC9D5] flex items-center justify-center", __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 w-full flex items-center justify-center space-x-2 p-4", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(SoftBoxLayout, { bgBoxColor: bgBoxColor, textColor: textColor, titleFont: titleFont, title: title, imgSrc: imgSrc, __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 w-full h-full snow", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, ` @keyframes snow { 0% { transform: translateY(0); } 100% { transform: translateY(100vh); } } .snow::before, .snow::after { content: ''; position: absolute; top: -50px; width: 100%; height: 100%; background: url('/assets/Snowflakes.png') repeat top center; animation: snow 10s linear infinite; opacity: 0.5; } .snow::after { animation-delay: 5s; } .snow { animation: fadein 3s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } `)); }