Merge pull request #45 from pythonkr/feature/add-mobile-header-frame

feature: add mobile header frame

Author: earthyoung

apps/pyconkr/src/components/layout/Footer/index.tsx

@@ -6,8 +6,9 @@ import * as React from "react";
 
 import FlickrIcon from "@apps/pyconkr/assets/thirdparty/flickr.svg?react";
 
-import MobileFooter from "./Mobile/MobileFooter";
+// import MobileFooter from "./Mobile/MobileFooter";
 import { useAppContext } from "../../../contexts/app_context";
+import MobileFooter from "./Mobile/MobileFooter";
 
 interface IconItem {
   icon: React.FC<{ width?: number; height?: number }>;

packages/common/src/assets/pyconkr2025_main_cover_image.png

@@ -0,0 +1,37 @@
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { ButtonBase, Stack, Typography } from "@mui/material";
+import * as React from "react";
+import { useAppContext } from "../../../../../apps/pyconkr/src/contexts/app_context";
+import PyCon2025MobileLogoImage from "../../assets/pyconkr2025_main_cover_image.png";
+import PyCon2025MobileLogoTitle from "../../assets/pyconkr2025_main_cover_title.png";
+
+export const MobileCover: React.FC = () => {
+  const { language } = useAppContext();
+  const buttonTitle = language === "ko" ? "티켓 구매하기" : "Buy Ticket";
+
+  return (
+    <Stack sx={{ display: "flex", flexDirection: "column", position: "relative", width: "100vw", height: "100vh", overflow: "hidden" }}>
+      <Stack sx={{ zIndex: 1, position: "absolute", top: 0, left: 0, flex: 1, display: "flex", width: "100%" }}>
+        <img src={PyCon2025MobileLogoImage} alt="Pycon 2025 Mobile Image" style={{ flex: 1, objectFit: "cover" }} />
+      </Stack>
+      <Stack sx={{ zIndex: 2, position: "absolute", top: 96, left: 46 }}>
+        <img src={PyCon2025MobileLogoTitle} alt="Pycon 2025 Mobile Title" style={{ objectFit: "contain" }} />
+      </Stack>
+      <Stack sx={{ zIndex: 3, position: "absolute", top: 351, left: 48 }}>
+        <ButtonBase
+          sx={{
+            flexDirection: "row",
+            backgroundColor: "white",
+            padding: "10px 20px",
+            gap: "10px",
+            borderRadius: "10px",
+            boxShadow: "0 4px 4px 0px rgba(0, 0, 0, 0.15)",
+          }}
+        >
+          <Typography sx={{ fontWeight: 600, fontSize: "15px" }}>{buttonTitle}</Typography>
+          <ArrowForwardIcon sx={{ height: "15px" }} />
+        </ButtonBase>
+      </Stack>
+    </Stack>
+  );
+};