function WebsiteLayoutWithBlueCta({ logo, navLinks, heroImage, features, testimonials, clientLogos, ctaText }) { return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white p-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: logo, alt: "Company Logo", className: "w-[50px] h-[50px]", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, navLinks.map((link, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "text-gray-600", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, link)))), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 text-white py-2 px-4", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "お問い合わせ")), /*#__PURE__*/ React.createElement("main", { __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-gray-100 p-8", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: heroImage.src, alt: heroImage.alt, className: "w-full h-[400px] object-cover", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h1", { className: "text-3xl text-center mt-4", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }, heroImage.heading), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-center mt-2", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, heroImage.description)), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-8 grid grid-cols-1 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, features.map((feature, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-200 p-4 text-center", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa ${feature.icon} text-2xl`, __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl mt-4", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, feature.heading), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 mt-2", __source: { fileName: "", lineNumber: 26, columnNumber: 15 }, __self: this }, feature.description)))), /*#__PURE__*/ React.createElement("section", { className: "bg-gray-100 p-8 text-center", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col md:flex-row justify-center items-center space-y-2 md:space-y-0 md:space-x-2", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search...", className: "p-2 border border-gray-300", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-blue-500 text-white py-2 px-4", __source: { fileName: "", lineNumber: 33, columnNumber: 13 }, __self: this }, "Submit")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4 mt-4", __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }, [ "Category1", "Category2", "Category3" ].map((category, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: "bg-gray-200 text-gray-700 py-2 px-4", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, category)))), /*#__PURE__*/ React.createElement("section", { className: "bg-white p-8 grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, testimonials.map((testimonial, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-gray-200 p-4", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: testimonial.image, alt: testimonial.name, className: "w-[50px] h-[50px] rounded-full mx-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("blockquote", { className: "text-center mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, '"', testimonial.quote, '"'), /*#__PURE__*/ React.createElement("p", { className: "text-center mt-2 text-gray-700", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, "- ", testimonial.name)))), /*#__PURE__*/ React.createElement("section", { className: "bg-gray-100 p-8", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, clientLogos.map((logo, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: logo.src, alt: logo.alt, className: "w-[100px] h-[50px]", __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: "bg-blue-500 p-8 text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-blue-700 text-white py-2 px-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, ctaText)))); } function WebsiteLayoutWithBlueCtaStory() { const props = { logo: "/path/to/logo.png", navLinks: [ "Home", "About", "Services", "Contact" ], heroImage: { src: "/path/to/hero.jpg", alt: "Hero Image", heading: "Welcome to Our Company", description: "We provide the best services" }, features: [ { icon: "fa-cog", heading: "Feature 1", description: "Description 1" }, { icon: "fa-star", heading: "Feature 2", description: "Description 2" }, { icon: "fa-heart", heading: "Feature 3", description: "Description 3" } ], testimonials: [ { image: "/path/to/person1.jpg", quote: "Great service!", name: "Person 1" }, { image: "/path/to/person2.jpg", quote: "Loved it!", name: "Person 2" } ], clientLogos: [ { src: "/path/to/client1.png", alt: "Client 1" }, { src: "/path/to/client2.png", alt: "Client 2" } ], ctaText: "Get Started" }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 92, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WebsiteLayoutWithBlueCta, { ...props, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this })); } function MainComponent() { const props = { logo: "./img/logo.png", navLinks: [ "Home", "Features", "Pricing", "Contact" ], heroImage: { src: "./img/hero-image.jpg", alt: "modern furniture", heading: "Beautiful Furniture for Everyone", description: "Discover our AI-powered furniture recommendations." }, features: [ { icon: "fa-cog", heading: "Feature One", description: "Lorem ipsum dolor sit amet." }, { icon: "fa-cog", heading: "Feature Two", description: "Lorem ipsum dolor sit amet." }, { icon: "fa-cog", heading: "Feature Three", description: "Lorem ipsum dolor sit amet." } ], testimonials: [ { image: "./img/testimonial-avatar-1.jpg", quote: "This service has transformed my home!", name: "Customer One" }, { image: "./img/testimonial-avatar-2.jpg", quote: "I love the AI recommendations.", name: "Customer Two" } ], clientLogos: [ { src: "./img/client-logos/client-logo-1.svg", alt: "Client 1 Logo" }, { src: "./img/client-logos/client-logo-2.svg", alt: "Client 2 Logo" }, { src: "./img/client-logos/client-logo-3.svg", alt: "Client 3 Logo" } ], ctaText: "Start Free Trial" }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(WebsiteLayoutWithBlueCta, { ...props, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("footer", { className: "bg-gray-800 text-white py-10", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto grid grid-cols-1 md:grid-cols-4 gap-8", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 34, columnNumber: 13 }, __self: this }, "Company"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 36, columnNumber: 19 }, __self: this }, "About Us")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 37, columnNumber: 19 }, __self: this }, "Careers")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 38, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 38, columnNumber: 19 }, __self: this }, "Press")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 44, columnNumber: 19 }, __self: this }, "Features")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 45, columnNumber: 19 }, __self: this }, "Pricing")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 46, columnNumber: 19 }, __self: this }, "Reviews")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Help"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 51, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 52, columnNumber: 19 }, __self: this }, "Support")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 53, columnNumber: 19 }, __self: this }, "FAQ")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 54, columnNumber: 19 }, __self: this }, "Contact")))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 57, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 58, columnNumber: 13 }, __self: this }, "Legal"), /*#__PURE__*/ React.createElement("ul", { className: "mt-2 space-y-2", __source: { fileName: "", lineNumber: 59, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 60, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 60, columnNumber: 19 }, __self: this }, "Terms of Service")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 61, columnNumber: 19 }, __self: this }, "Privacy Policy")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", __source: { fileName: "", lineNumber: 62, columnNumber: 19 }, __self: this }, "Cookies"))))))); }