function SendMessageButtonDesign({ buttonText }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-gradient-to-r from-purple-500 via-pink-600 to-red-500 py-2 rounded-lg font-semibold", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function SendMessageButtonDesignStory() { return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SendMessageButtonDesign, { buttonText: "Send Message", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this })); } function MainComponent() { const sections = [ "home", "about", "services", "portfolio", "contact" ]; const handleScroll = (section)=>{ const element = document.getElementById(section); element.scrollIntoView({ behavior: "smooth" }); }; const portfolioImages = [ { src: "/images/portfolio1.jpg", alt: "Creative Design 1" }, { src: "/images/portfolio2.jpg", alt: "Creative Design 2" }, { src: "/images/portfolio3.jpg", alt: "Creative Design 3" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen text-black font-roboto", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("nav", { className: "w-full flex justify-between items-center p-4 bg-[#000000] bg-opacity-70 fixed top-0 z-10", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "DGNS Designs"), /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, sections.map((section)=>/*#__PURE__*/ React.createElement("li", { key: section, className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 21, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleScroll(section), __source: { fileName: "", lineNumber: 22, columnNumber: 15 }, __self: this }, section.charAt(0).toUpperCase() + section.slice(1)))))), /*#__PURE__*/ React.createElement("header", { id: "home", className: "h-[500px] flex flex-col justify-center items-center text-center bg-black bg-opacity-30 mt-[64px]", style: { backgroundAttachment: "fixed" }, __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-extrabold mb-4 text-white", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Welcome to DGNS Designs"), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-normal text-white", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Creative Agency crafting digital experiences")), /*#__PURE__*/ React.createElement("section", { id: "about", className: "min-h-screen flex flex-col items-center justify-center bg-[#5e35b1] bg-opacity-90 text-white", style: { backgroundAttachment: "fixed" }, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[600px] text-center", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-semibold mb-4", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "About Us"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "We are a creative agency dedicated to delivering top-notch digital solutions for your business."))), /*#__PURE__*/ React.createElement("section", { id: "services", className: "min-h-screen flex items-center justify-center bg-[#d81b60] bg-opacity-90 text-white", style: { backgroundAttachment: "fixed" }, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-semibold mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this }, "Our Services"), /*#__PURE__*/ React.createElement("p", { className: "text-lg", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "We offer a range of services including web design, branding, and digital marketing to help your business stand out online."))), /*#__PURE__*/ React.createElement("section", { id: "portfolio", className: "min-h-screen flex flex-col items-center bg-[#00acc1] bg-opacity-90 text-white", style: { backgroundAttachment: "fixed" }, __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-semibold mt-12 mb-8", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "Our Portfolio"), /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-center overflow-x-hidden relative", style: { height: "300px" }, __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, portfolioImages.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "w-[300px] h-[300px] flex-none transform transition-transform duration-1000 ease-linear", style: { backgroundImage: `url(${image.src})`, backgroundSize: "cover" }, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full p-6 mt-6", __source: { fileName: "", lineNumber: 81, columnNumber: 9 }, __self: this }, portfolioImages.map((image)=>/*#__PURE__*/ React.createElement(SendMessageButtonDesign, { key: image.alt, buttonText: "View Details", __source: { fileName: "", lineNumber: 83, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { id: "contact", className: "min-h-screen flex items-center justify-center bg-[#43a047] bg-opacity-90 text-white", style: { backgroundAttachment: "fixed" }, __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center w-[600px]", __source: { fileName: "", lineNumber: 93, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-4xl font-semibold mb-4", __source: { fileName: "", lineNumber: 94, columnNumber: 11 }, __self: this }, "Get In Touch"), /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 95, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Your Name", className: "p-4 rounded-lg text-black", __source: { fileName: "", lineNumber: 96, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", placeholder: "Your Email", className: "p-4 rounded-lg text-black", __source: { fileName: "", lineNumber: 97, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "message", placeholder: "Your Message", className: "p-4 rounded-lg text-black h-[150px]", __source: { fileName: "", lineNumber: 98, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SendMessageButtonDesign, { buttonText: "Send Message", __source: { fileName: "", lineNumber: 99, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, ` @keyframes bgAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes moveCarousel { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } body { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; background: linear-gradient(270deg, #30cfd0, #330867); background-size: 200% 200%; animation: bgAnimation 30s ease infinite; } nav ul { list-style-type: none; padding: 0; } .w-full.flex.justify-center.overflow-x-hidden.relative { animation: moveCarousel 30s linear infinite; } `)); }