function MainComponent() { const visionItems = [ { img: 'personal_growth.jpg', alt: 'A person holding a glowing light bulb representing personal growth', quote: 'Become the best version of yourself' }, { img: 'active_lifestyle.jpg', alt: 'Running shoes next to a green water bottle representing an active lifestyle', quote: 'Take care of your body and it will take care of you' }, { img: 'healthy_eating.jpg', alt: 'A salad bowl filled with fresh vegetables indicating healthy eating', quote: 'Eat good feel good' }, { img: 'career_success.jpg', alt: 'A well-organized desk with financial charts indicating career success', quote: 'Success is in the details' }, { img: 'dream_house.jpg', alt: 'A luxurious house with a garden representing the dream home', quote: 'Home is where dreams reside' }, { img: 'luxury_car.jpg', alt: 'A shiny luxury sports car indicating wealth and success', quote: 'Drive your dreams' }, { img: 'world_travel.jpg', alt: 'Globe surrounded by famous landmarks representing the joy of travel', quote: 'Explore the world, discover yourself' } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-[1000px] mx-auto", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-[#121212] text-4xl font-bold mb-8 text-center font-crimson-text", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, "Vision Board"), /*#__PURE__*/ React.createElement("h2", { className: "text-[#121212] text-xl mb-5 text-center font-crimson-text", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, "My Goals & Aspirations"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, visionItems.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "rounded-lg overflow-hidden shadow-lg transition-transform hover:scale-105", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("picture", { __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("source", { media: "(min-width: 1024px)", srcSet: `${item.img} 1024w`, __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("source", { media: "(min-width: 768px)", srcSet: `${item.img} 768w`, __source: { fileName: "", lineNumber: 49, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("source", { media: "(min-width: 640px)", srcSet: `${item.img} 640w`, __source: { fileName: "", lineNumber: 50, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("source", { media: "(min-width: 320px)", srcSet: `${item.img} 320w`, __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("img", { className: "w-full h-auto object-cover", src: item.img, alt: item.alt, srcSet: `${item.img} 320w, ${item.img} 640w, ${item.img} 768w, ${item.img} 1024w`, sizes: "(max-width: 639px) 100vw, (max-width: 767px) 50vw, (max-width: 1023px) 33.3vw, 1024px", __source: { fileName: "", lineNumber: 52, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "px-6 py-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#121212] font-semibold font-roboto", __source: { fileName: "", lineNumber: 61, columnNumber: 15 }, __self: this }, item.quote)))))); }