function Component3DInstagramLogo({ src, alt }) { return /*#__PURE__*/ React.createElement("img", { src: src, alt: alt, className: "w-full h-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function Component3DInstagramLogoStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(Component3DInstagramLogo, { src: "./instagram-logo-3d.png", alt: "3D Instagram logo", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { return /*#__PURE__*/ React.createElement("div", { className: "relative w-screen h-screen bg-[#fafafa] font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-full", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[350px] bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center p-4 border-b", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[50px] h-[50px] rounded-full overflow-hidden", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement(Component3DInstagramLogo, { src: "./character-avatar.png", alt: "Animated character that looks like the one sitting on the Instagram logo", __source: { fileName: "", lineNumber: 8, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "ml-4", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg text-[#262626]", __source: { fileName: "", lineNumber: 11, columnNumber: 15 }, __self: this }, "moustafaalhajj"), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#8e8e8e]", __source: { fileName: "", lineNumber: 12, columnNumber: 15 }, __self: this }, "Your Stories"))), /*#__PURE__*/ React.createElement("div", { className: "px-4 py-6", __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-[#262626]", __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this }, "🎨 Digital Artist & 3D Illustrator"), /*#__PURE__*/ React.createElement("p", { className: "text-[#262626] mt-1", __source: { fileName: "", lineNumber: 17, columnNumber: 13 }, __self: this }, "📖 Storytelling through animation"), /*#__PURE__*/ React.createElement("p", { className: "text-[#262626] mt-1", __source: { fileName: "", lineNumber: 18, columnNumber: 13 }, __self: this }, "📍 Based in the Imaginary World"))), /*#__PURE__*/ React.createElement("div", { className: "relative w-[300px] h-[300px] mt-10", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(Component3DInstagramLogo, { src: "./instagram-logo-3d.png", alt: "3D Instagram logo", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { style: { animation: 'float 3s ease-in-out infinite' }, className: "absolute w-[120px] h-[120px] rounded-full overflow-hidden top-[-60px] right-[-60px]", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement(Component3DInstagramLogo, { src: "./character-veiled-clothing.png", alt: "Animated character in veiled clothing sitting on the Instagram logo", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, ` @keyframes float { 0% { transform: translatey(0px); } 50% { transform: translatey(-20px); } 100% { transform: translatey(0px); } } `)); }