Merge pull request #147 from ruby10127130/feature/learning-marathon

Feature/learning marathon

components/Marathon/About/index.jsx

@@ -0,0 +1,48 @@
+import styled from '@emotion/styled';
+import { Typography } from '@mui/material';
+import { useRouter } from 'next/router';
+
+const GuideWrapper = styled.div`
+  width: 90%;
+  margin: 0 auto;
+  padding-top: 40px;
+  padding-bottom: 40px;
+
+  .guide-title {
+    color: #536166;
+    font-weight: bold;
+    font-size: 40px;
+    line-height: 50px;
+    letter-spacing: 0.08em;
+    margin-left: '20px';
+  }
+
+  @media (max-width: 767px) {
+    padding-top: 40px;
+    padding-bottom: 20px;
+  }
+`;
+
+const About = () => {
+  const router = useRouter();
+  return (
+    <GuideWrapper>
+      <Typography
+        variant="h2"
+        sx={{
+          color: '#536166',
+          fontWeight: 'bold',
+          fontSize: '26px',
+          lineHeight: '50px',
+          letterSpacing: '0.08em',
+          textAlign: 'left',
+          marginLeft: '20px',
+        }}
+      >
+        計畫進行方式與內容
+      </Typography>
+    </GuideWrapper>
+  );
+};
+
+export default About;

components/Marathon/Banner/CardList/Card.jsx

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled';
+import Link from 'next/link';
+
+const CardWrapper = styled.li`
+  border-radius: 10px;
+  width: 260px;
+  height: 320px;
+  overflow: hidden;
+  cursor: pointer;
+`;
+
+const ContentWrapper = styled.div`
+  height: 260px;
+  background-image: url(${(props) => props.image});
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+`;
+
+const FooterWrapper = styled.div`
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  padding-left: 20px;
+  font-weight: 500;
+`;
+
+const Card = ({ title, link, image }) => {
+  return (
+    <Link href={link} passHref>
+      <CardWrapper>
+        <ContentWrapper image={image} />
+        <FooterWrapper>{title}</FooterWrapper>
+      </CardWrapper>
+    </Link>
+  );
+};
+
+export default Card;

components/Marathon/Banner/CardList/index.jsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+import Card from './Card';
+
+const CardListWrapper = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  li {
+    margin: 20px;
+  }
+`;
+
+const CardList = ({ list }) => {
+  return (
+    <CardListWrapper>
+      {list.map((category) => (
+        <Card
+          key={category.title}
+          title={category.title}
+          link={category.link}
+          image={category.image}
+        />
+      ))}
+    </CardListWrapper>
+  );
+};
+
+export default CardList;

components/Marathon/Banner/Title/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import Typed from 'react-typed';
+
+const TitleWrapper = styled.div`
+  min-height: 70px;
+  h1 {
+    font-size: 24px;
+    line-height: 28px;
+    letter-spacing: 0.08em;
+    color: #f0f0f0;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  h2 {
+    font-size: 16px;
+    line-height: 22px;
+    letter-spacing: 0.08em;
+    text-align: center;
+    margin-top: 10px;
+    color: #f0f0f0;
+    font-weight: 500;
+  }
+  @media (max-width: 768px) {
+    min-height: 130px;
+  }
+`;
+
+const Title = () => {
+  return (
+    <TitleWrapper>
+      <h1>
+        <Typed
+          strings={['歡迎來到島島阿學！一起尋找資源與分享資源吧！']}
+          typeSpeed={80}
+        />
+      </h1>
+      <h2>
+        <Typed
+          strings={[
+            'If you want to go fast go alone. If you want to go far go together.',
+          ]}
+          typeSpeed={80}
+        />
+      </h2>
+    </TitleWrapper>
+  );
+};
+
+export default Title;

components/Marathon/Banner/index.jsx

@@ -0,0 +1,74 @@
+import { useRouter } from 'next/router';
+import styled from '@emotion/styled';
+import Button from '@/shared/components/Button';
+import groupBannerImg from '@/public/assets/group-banner.png';
+import Image from '@/shared/components/Image';
+import InfoCompletionGuard from '@/shared/components/InfoCompletionGuard';
+
+const StyledBanner = styled.div`
+  position: relative;
+  height: 398px;
+
+  picture {
+    position: absolute;
+    z-index: -1;
+    width: 100%;
+    top: 0;
+    height: 100%;
+
+    img {
+      height: inherit;
+      object-fit: cover;
+    }
+  }
+`;
+
+const StyledBannerContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding-top: 100px;
+  
+  h1 {
+    margin-bottom: 8px;
+    font-weight: 700;
+    font-size: 36px;
+    line-height: 140%;
+    color: #536166;
+  }
+
+  p {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 140%;
+    color: #536166;
+  }
+`;
+
+const Banner = () => {
+  const router = useRouter();
+
+  return (
+    <StyledBanner>
+      <picture>
+        <Image
+          src={groupBannerImg.src}
+          alt="島島盃 - 學習馬拉松 2025 春季賽"
+          height="inherit"
+          background="linear-gradient(#fcfefe 10%, #e0f1f2 40%)"
+          borderRadius="0"
+        />
+      </picture>
+      <StyledBannerContent>
+        <h1>島島盃 - 學習馬拉松 2025 春季賽</h1>
+        <p>註冊並加入我們，立即報名！</p>
+        <InfoCompletionGuard>
+          <Button onClick={() => router.push('/learning-marathon/login')}>立即報名</Button>
+        </InfoCompletionGuard>
+      </StyledBannerContent>
+    </StyledBanner>
+  );
+};
+
+export default Banner;

components/Marathon/Edm/index.jsx

@@ -0,0 +1,108 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Button, Box, Typography, Link } from '@mui/material';
+
+const EdmWrapper = styled.div`
+  width: 90%;
+  /* height: calc(var(--section-height) + var(--section-height-offset)); */
+  margin: 0 auto;
+  padding-top: 40px;
+  padding-bottom: 120px;
+  @media (max-width: 767px) {
+    padding-top: 40px;
+    padding-bottom: 20px;
+  }
+`;
+
+function Edm() {
+  return (
+    <EdmWrapper>
+      <Box
+        sx={{
+          paddingTop: '60px',
+          paddingBottom: '8px',
+          bgcolor: '#DEF5F5',
+          borderRadius: '24px',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          '@media(max-width: 767px)': {
+            paddingTop: '40px',
+          },
+        }}
+      >
+        <Typography
+          variant="h2"
+          sx={{
+            color: '#293A3D',
+            fontWeight: 'bold',
+            fontSize: '26px',
+            lineHeight: '140%',
+            '@media(max-width: 767px)': {
+              fontSize: '22px',
+            },
+          }}
+        >
+          想收到最新資訊嗎？
+        </Typography>
+        <Typography
+          variant="h3"
+          sx={{
+            paddingTop: '8px',
+            color: '#293A3D',
+            fontWeight: 'bold',
+            fontSize: '18px',
+            lineHeight: '140%',
+            '@media(max-width: 767px)': {
+              fontSize: '16px',
+            },
+          }}
+        >
+          歡迎訂閱島島電子報
+        </Typography>
+        <Typography
+          variant="body1"
+          sx={{
+            maxWidth: '370px',
+            paddingTop: '24px',
+            paddingBottom: '24px',
+            color: '#536166',
+            fontWeight: 'bold',
+            fontSize: '14px',
+            lineHeight: '140%',
+            textAlign: 'center',
+            '@media(max-width: 767px)': {
+              maxWidth: '273px',
+              paddingTop: '16px',
+              paddingBottom: '16px',
+            },
+          }}
+        >
+          每月與您分享最新資訊，內容包含：國內外教育新聞、自學經驗分享、實驗教育職缺、每月最新自學資源
+        </Typography>
+        <Link href="https://forms.gle/wXuKYmQjzRKRxe387">
+          <Button
+            variant="contained"
+            sx={{
+              width: '273px',
+              padding: '9px 60px 9px 60px',
+              marginBottom: '60px',
+              bgcolor: '#16B9B3',
+              color: '#FFFFFF',
+              borderRadius: '20px',
+              fontSize: '16px',
+              '@media(max-width: 767px)': {
+                marginBottom: '40px',
+              },
+            }}
+          >
+            訂閱電子報
+          </Button>
+        </Link>
+      </Box>
+    </EdmWrapper>
+  );
+}
+
+export default Edm;