function NavigationBar() { return /*#__PURE__*/ React.createElement("nav", { className: "bg-[#1a1a1a] p-4 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-white text-xl font-bold", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, "Logo"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, "Home"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Projects"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Community"), /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-white hover:text-gray-300", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Profile")))); } function NavigationBarStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(NavigationBar, { __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function ProjectCard({ title, difficulty, estimatedTime, thumbnailUrl }) { return /*#__PURE__*/ React.createElement("div", { className: "rounded-lg shadow-md overflow-hidden w-[300px] bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: thumbnailUrl, alt: `Preview of ${title} project`, className: "w-full h-[160px] object-cover", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 mb-1", __source: { fileName: "", lineNumber: 11, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-signal text-gray-600", __source: { fileName: "", lineNumber: 12, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Difficulty: ", difficulty)), /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-clock text-gray-600", __source: { fileName: "", lineNumber: 18, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 19, columnNumber: 11 }, __self: this }, "Time: ", estimatedTime)))); } function ProjectCardStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 flex flex-wrap gap-6", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ProjectCard, { title: "Basic Weather App", difficulty: "Beginner", estimatedTime: "2 hours", thumbnailUrl: "/images/weather-app.jpg", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectCard, { title: "Task Manager", difficulty: "Intermediate", estimatedTime: "4 hours", thumbnailUrl: "/images/task-manager.jpg", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ProjectCard, { title: "E-commerce Dashboard", difficulty: "Advanced", estimatedTime: "8 hours", thumbnailUrl: "/images/dashboard.jpg", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this })); } function FeatureShowcase({ title, description, icon }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center p-6 rounded-lg bg-white shadow-md hover:shadow-lg transition-shadow", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${icon} text-3xl text-blue-500 mb-4`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-bold mb-2", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-gray-600 text-center", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, description)); } function FeatureShowcaseStory() { const features = [ { title: "Easy Integration", description: "Simple plug-and-play setup for your applications", icon: "fas fa-puzzle-piece" }, { title: "Secure Storage", description: "Your data is encrypted and safely stored", icon: "fas fa-shield-alt" }, { title: "24/7 Support", description: "Round-the-clock assistance when you need it", icon: "fas fa-headset" } ]; return /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 p-6", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, features.map((feature, index)=>/*#__PURE__*/ React.createElement(FeatureShowcase, { key: index, title: feature.title, description: feature.description, icon: feature.icon, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); } function MainComponent() { const [showFeatures, setShowFeatures] = useState(false); useEffect(()=>{ setShowFeatures(true); }, []); const features = [ { icon: "fa-solid fa-camera", title: "AR Instructions", description: "Get real-time augmented reality guidance for your DIY projects" }, { icon: "fa-solid fa-wrench", title: "Tool Recognition", description: "Instantly identify tools and get usage tips" }, { icon: "fa-solid fa-calculator", title: "Material Calculator", description: "Calculate exact materials needed for your project" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#f8f9fa] to-[#e9ecef]", __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "container mx-auto px-4 pt-20 md:pt-32", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between gap-12", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 text-center md:text-left", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-4xl md:text-6xl font-bold text-[#212529] mb-6", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Build Something Amazing Today"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#495057] mb-8", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Get inspired, learn new skills, and join a community of DIY enthusiasts ready to help you create"), /*#__PURE__*/ React.createElement("a", { href: "/projects", className: "inline-block bg-[#0d6efd] hover:bg-[#0b5ed7] text-white font-roboto px-8 py-4 rounded-lg text-lg transform transition-transform hover:scale-105", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Browse Projects")), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/hero-image.jpg", alt: "Person using AR feature of DIY Helper App on their smartphone while working on a woodworking project", className: "rounded-2xl shadow-2xl w-full max-w-[600px]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("section", { className: `container mx-auto px-4 py-24 transition-opacity duration-1000 ${showFeatures ? "opacity-100" : "opacity-0"}`, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-3xl md:text-4xl font-bold text-center text-[#212529] mb-16", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, "Smart Features for Smart DIYers"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 62, columnNumber: 9 }, __self: this }, features.map((feature, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-white p-8 rounded-xl shadow-lg hover:shadow-xl transition-shadow", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `${feature.icon} text-4xl text-[#0d6efd] mb-4`, __source: { fileName: "", lineNumber: 68, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-xl font-bold text-[#212529] mb-3", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }, feature.title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#6c757d]", __source: { fileName: "", lineNumber: 72, columnNumber: 15 }, __self: this }, feature.description)))))); }