function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "w-full min-h-screen bg-black text-white font-crimson-text", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "relative w-full h-[70vh] overflow-hidden bg-black transition-all duration-500 ease-in-out", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/salon-image.jpg", alt: "高品質な美容室のイメージ", className: "absolute inset-0 w-full h-full object-cover opacity-40", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10 flex flex-col items-start justify-center h-full p-8 bg-opacity-50 bg-black", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[4rem] lg:text-[6rem] font-crimson-text text-white transform transition-transform duration-1000 ease-in-out translate-x-full", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Glamourous Beauty"), /*#__PURE__*/ React.createElement("p", { className: "text-[1.5rem] lg:text-[2rem] font-crimson-text text-white mt-4 transform transition-transform duration-1000 ease-in-out translate-x-full delay-100", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Experience Luxury Beauty Treatments"), /*#__PURE__*/ React.createElement("button", { className: "mt-8 px-8 py-4 bg-[#f0c040] text-black font-crimson-text hover:bg-[#ffb700] transition-all duration-300", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "予約する"))), /*#__PURE__*/ React.createElement("section", { className: "py-16 px-8", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[3rem] lg:text-[4rem] font-crimson-text", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Services Offered"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, [ 'Hair Styling', 'Nail Art', 'Facials' ].map((service, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/path-to-service${index + 1}.jpg`, alt: `${service}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-white font-crimson-text text-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 17 }, __self: this }, service)))))), /*#__PURE__*/ React.createElement("section", { className: "py-16 px-8 bg-[#111]", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[3rem] lg:text-[4rem] font-crimson-text", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Special Offers"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 mt-8", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "animate-fade-in", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/special-offer1.jpg", alt: "特別オファー1", className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-crimson-text", __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, "Get 20% off on your first booking!")), /*#__PURE__*/ React.createElement("div", { className: "animate-fade-in delay-100", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/special-offer2.jpg", alt: "特別オファー2", className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-crimson-text", __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, "Exclusive spa treatment package")))), /*#__PURE__*/ React.createElement("section", { className: "py-16 px-8", __source: { fileName: "", lineNumber: 45, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[3rem] lg:text-[4rem] font-crimson-text", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Meet Our Stylists"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, [ 'Stylist 1', 'Stylist 2', 'Stylist 3' ].map((stylist, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex flex-col items-center animate-fade-in", __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/stylist${index + 1}.jpg`, alt: `${stylist} portrait`, className: "w-full h-[300px] object-cover mb-4", __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-[1.5rem] lg:text-[2rem] font-crimson-text", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, stylist), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text text-center", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this }, "Brief bio of ", stylist.toLowerCase(), "."))))), /*#__PURE__*/ React.createElement("section", { className: "py-16 px-8 bg-[#111]", __source: { fileName: "", lineNumber: 58, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[3rem] lg:text-[4rem] font-crimson-text", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Gallery"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mt-8", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, [ 'Scene 1', 'Scene 2', 'Scene 3', 'Scene 4' ].map((scene, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "relative rounded-full shadow-lg overflow-hidden animate-fade-in", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/gallery${index + 1}.jpg`, alt: `美容室の${scene}`, className: "w-full h-[300px] object-cover", __source: { fileName: "", lineNumber: 63, columnNumber: 15 }, __self: this }))))), /*#__PURE__*/ React.createElement("section", { className: "py-16 px-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-[3rem] lg:text-[4rem] font-crimson-text", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, "Customer Reviews"), /*#__PURE__*/ React.createElement("div", { className: "flex overflow-x-scroll space-x-8 mt-8", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, [ 'User 1', 'User 2', 'User 3' ].map((user, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "min-w-[450px] bg-[#e0e0e0] border border-gray-200 shadow-lg p-4 rounded-lg animate-slide-left", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `/user${index + 1}.jpg`, alt: `${user} review`, className: "w-12 h-12 rounded-full mr-4", __source: { fileName: "", lineNumber: 75, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 76, columnNumber: 17 }, __self: this }, user)), /*#__PURE__*/ React.createElement("p", { className: "font-crimson-text", __source: { fileName: "", lineNumber: 78, columnNumber: 15 }, __self: this }, "User ", index + 1, "'s review in two lines or less."))))), /*#__PURE__*/ React.createElement("footer", { className: "py-8 px-8 bg-[#111] flex justify-between items-center", __source: { fileName: "", lineNumber: 84, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white font-crimson-text hover:underline", __source: { fileName: "", lineNumber: 85, columnNumber: 9 }, __self: this }, "お問い合わせ"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-twitter", __source: { fileName: "", lineNumber: 87, columnNumber: 46 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-instagram", __source: { fileName: "", lineNumber: 88, columnNumber: 46 }, __self: this })), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white", __source: { fileName: "", lineNumber: 89, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fab fa-facebook", __source: { fileName: "", lineNumber: 89, columnNumber: 46 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 93, columnNumber: 7 }, __self: this }, ` @font-face { font-family: 'Crimson Text'; src: url('/fonts/CrimsonText-Regular.ttf') format('truetype'); } .font-crimson-text { font-family: 'Crimson Text', serif; } @keyframes fade-in { from {opacity: 0; transform: translateY(50px);} to {opacity: 1; transform: translateY(0);} } .animate-fade-in { animation: fade-in 1.5s forwards; } @keyframes slide-left { from {opacity: 0; transform: translateX(50px);} to {opacity: 1; transform: translateX(0);} } .animate-slide-left { animation: slide-left 1.5s forwards; } `)); }