function MainComponent({ title, navigationLinks, heroPhrase, heroButton, features, services, pricing, contact, footerText }) { return /*#__PURE__*/ React.createElement("div", { className: "font-sans", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#333] text-white p-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex justify-between items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-xl", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, navigationLinks.map((link, index)=>/*#__PURE__*/ React.createElement("a", { key: index, href: link.href, className: "ml-4", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, link.text))))), /*#__PURE__*/ React.createElement("section", { className: "bg-[#444] text-white py-16 text-center", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl mb-4", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, heroPhrase), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, heroButton)), /*#__PURE__*/ React.createElement("section", { className: "bg-gray-100 py-16 text-center", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-4", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "こんなお悩みはありませんか？"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, features.map((feature, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-2", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, feature)))), /*#__PURE__*/ React.createElement("section", { className: "bg-white py-16", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, services.map((service, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "mb-8", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-xl mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 15 }, __self: this }, service.title), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, service.description))))), /*#__PURE__*/ React.createElement("section", { className: "bg-gray-100 py-16", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-8", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "料金プラン"), /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 48, columnNumber: 17 }, __self: this }, "プラン"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, "価格"), /*#__PURE__*/ React.createElement("th", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 50, columnNumber: 17 }, __self: this }, "特徴"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 53, columnNumber: 13 }, __self: this }, pricing.map((plan, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, __source: { fileName: "", lineNumber: 55, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 56, columnNumber: 19 }, __self: this }, plan.name), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 57, columnNumber: 19 }, __self: this }, plan.price), /*#__PURE__*/ React.createElement("td", { className: "border px-4 py-2", __source: { fileName: "", lineNumber: 58, columnNumber: 19 }, __self: this }, plan.features.join(", ")))))))), /*#__PURE__*/ React.createElement("section", { className: "bg-white py-16", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl mb-8", __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, "お問い合わせ"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block", __source: { fileName: "", lineNumber: 71, columnNumber: 15 }, __self: this }, "名前"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", className: "w-full border px-4 py-2", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "email", className: "block", __source: { fileName: "", lineNumber: 75, columnNumber: 15 }, __self: this }, "メール"), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", className: "w-full border px-4 py-2", __source: { fileName: "", lineNumber: 76, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "message", className: "block", __source: { fileName: "", lineNumber: 79, columnNumber: 15 }, __self: this }, "メッセージ"), /*#__PURE__*/ React.createElement("textarea", { name: "message", className: "w-full border px-4 py-2 h-[100px]", __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, "送信")))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#333] text-white py-4 text-center", __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 88, columnNumber: 9 }, __self: this }, footerText))); } function StoryComponent() { const storyData = { title: "集客のスペシャリスト", navigationLinks: [ { text: "ホーム", href: "#" }, { text: "サービス", href: "#" }, { text: "料金プラン", href: "#" }, { text: "お問い合わせ", href: "#" } ], heroPhrase: "集客のスペシャリストへようこそ", heroButton: "お問い合わせ", features: [ "SEO対策がわからない", "MEO対策が難しい", "効果が出ない" ], services: [ { title: "SEO対策", description: "SEOの説明文です。" }, { title: "MEO対策", description: "MEOの説明文です。" } ], pricing: [ { name: "基本プラン", price: "¥10,000", features: [ "SEO", "MEO" ] }, { name: "プレミアムプラン", price: "¥30,000", features: [ "SEO", "MEO", "コンサルティング" ] } ], contact: { name: "", email: "", message: "" }, footerText: "Copyright © 2023 集客のスペシャリスト" }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 119, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { ...storyData, __source: { fileName: "", lineNumber: 119, columnNumber: 10 }, __self: this })); }

プラン	価格	特徴
基本プラン	¥10,000	SEO, MEO
プレミアムプラン	¥30,000	SEO, MEO, コンサルティング