function HeroSection({ title = "大きな見出しテキスト", subtitle = "魅力的なサブタイトルテキスト", buttonText = "今すぐ始める", onButtonClick }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-gradient-to-r from-blue-500 to-purple-600 min-h-[600px] flex items-center justify-center px-4", __source: { fileName: "", lineNumber: 8, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl md:text-6xl font-bold text-white mb-6 font-roboto", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "text-xl md:text-2xl text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, subtitle), /*#__PURE__*/ React.createElement("button", { onClick: onButtonClick, className: "bg-white text-blue-600 font-bold py-3 px-8 rounded-full text-lg hover:bg-opacity-90 transition-all duration-300 font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, buttonText))); } function HeroSectionStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(HeroSection, { title: "未来を創造する", subtitle: "革新的なソリューションで、あなたのビジョンを実現", buttonText: "詳しく見る", onButtonClick: ()=>alert("ボタンがクリックされました"), __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(HeroSection, { title: "シンプルで効果的", subtitle: "使いやすさを追求したデザイン", buttonText: "始めましょう", onButtonClick: ()=>alert("ボタンがクリックされました"), __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); } function Navbar({ logoSrc = "/logo.png", menuItems = [ { label: "ホーム", href: "#" }, { label: "サービス", href: "#" }, { label: "製品", href: "#" }, { label: "お問い合わせ", href: "#" } ] }) { return /*#__PURE__*/ React.createElement("nav", { className: "flex items-center justify-between px-6 py-4 bg-white shadow-md", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logoSrc, alt: "会社ロゴ", className: "h-8 w-auto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("ul", { className: "hidden md:flex items-center space-x-8", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, menuItems.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: item.href, className: "text-gray-600 hover:text-gray-900 font-medium", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, item.label)))), /*#__PURE__*/ React.createElement("button", { className: "md:hidden", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-bars text-gray-600 text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }))); } function NavbarStory() { const customMenuItems = [ { label: "アイテム1", href: "#" }, { label: "アイテム2", href: "#" }, { label: "アイテム3", href: "#" } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-8", __source: { fileName: "", lineNumber: 42, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "デフォルトナビゲーション"), /*#__PURE__*/ React.createElement(Navbar, { __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-bold mb-4", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "カスタムメニューアイテム"), /*#__PURE__*/ React.createElement(Navbar, { menuItems: customMenuItems, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [subscriptions] = useState([ { name: "Netflix", price: "1,980", icon: "fas fa-play", color: "bg-[#E50914]" }, { name: "Spotify", price: "1,280", icon: "fab fa-spotify", color: "bg-[#1DB954]" }, { name: "Amazon Prime", price: "4,900", icon: "fab fa-amazon", color: "bg-[#00A8E1]" }, { name: "Disney+", price: "990", icon: "fas fa-film", color: "bg-[#113CCF]" }, { name: "Apple Music", price: "980", icon: "fab fa-apple", color: "bg-[#FC3C44]" } ]); const SubscriptionCard = ({ name, price, icon, color })=>/*#__PURE__*/ React.createElement("div", { className: "flex-shrink-0 w-[280px] p-6 bg-[#1E1E1E] rounded-xl shadow-lg hover:scale-105 transition-transform duration-300 mx-2", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `${color} w-12 h-12 rounded-full flex items-center justify-center mb-4`, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-white text-2xl`, __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "text-white text-xl font-bold mb-2 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, name), /*#__PURE__*/ React.createElement("div", { className: "flex items-baseline", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-sm", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "¥"), /*#__PURE__*/ React.createElement("span", { className: "text-white text-2xl font-bold ml-1", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, price), /*#__PURE__*/ React.createElement("span", { className: "text-gray-400 text-sm ml-1", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "/月"))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#121212] p-6", __source: { fileName: "", lineNumber: 52, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-white mb-8 font-roboto", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, "サブスクリプション管理"), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto pb-6", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 min-w-min", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, subscriptions.map((sub, index)=>/*#__PURE__*/ React.createElement(SubscriptionCard, { key: index, ...sub, __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }))))); }