diff --git a/src/pages/landing/components/hackathon/Detail.tsx b/src/pages/landing/components/hackathon/Detail.tsx index eed2fc0..226684d 100644 --- a/src/pages/landing/components/hackathon/Detail.tsx +++ b/src/pages/landing/components/hackathon/Detail.tsx @@ -102,8 +102,7 @@ const MoreBtn = styled.div` line-height: 150%; /* 30px */ @media (max-width: 767px) { - /* width: clamp(360px, 3vw, 523px); */ - width: 320px; + width: clamp(290px, 3vw, 523px); height: 48px; font-size: 16px; } diff --git a/src/pages/landing/components/hackathon/HackathonPart.tsx b/src/pages/landing/components/hackathon/HackathonPart.tsx index 5c17840..0c66ab7 100644 --- a/src/pages/landing/components/hackathon/HackathonPart.tsx +++ b/src/pages/landing/components/hackathon/HackathonPart.tsx @@ -45,12 +45,9 @@ const PartButton = styled.div` font-size: 28px; font-style: normal; - width: 580px; + width: clamp(520px, 2vw, 580px); height: auto; - margin-top: 120px; - margin-bottom: 148px; - cursor: pointer; &:hover { @@ -61,22 +58,27 @@ const PartButton = styled.div` width: 520px; height: 64px; font-size: 20px; - margin-top: 40px; - margin-bottom: clamp(255px, 2vh, 446px); - width: 300px; } @media (max-width: 360px) { width: 282px; height: 48px; font-size: 16px; - margin-top: 36px; - margin-bottom: 255px; + } + @media (max-width: 390px) { + width: 282px; + height: 48px; + font-size: 16px; + } + @media (max-width: 430px) { + width: 282px; + height: 48px; + font-size: 16px; } `; const Info = styled.div` - margin: 21px 0px 20px 40px; + margin: 20px 0px 20px 40px; font-weight: bold; `; diff --git a/src/pages/landing/components/hackathon/HackathonSponsor.tsx b/src/pages/landing/components/hackathon/HackathonSponsor.tsx index c16106a..b955d87 100644 --- a/src/pages/landing/components/hackathon/HackathonSponsor.tsx +++ b/src/pages/landing/components/hackathon/HackathonSponsor.tsx @@ -14,6 +14,7 @@ import logo9 from '../../../../img/landing/sponsor/logo9.svg'; import logo10 from '../../../../img/landing/sponsor/logo10.svg'; import logo11 from '../../../../img/landing/sponsor/logo11.svg'; import logo12 from '../../../../img/landing/sponsor/logo12.svg'; +import { styled } from 'styled-components'; const SponsorInfo = () => { SwiperCore.use([Autoplay]); @@ -74,6 +75,7 @@ type serviceType = { url: string; backgroundColor?: string; }; + const serviceList: serviceType[] = [ { id: 0, diff --git a/src/pages/landing/components/hackathon/HackathonTimer.tsx b/src/pages/landing/components/hackathon/HackathonTimer.tsx index a928636..802dea0 100644 --- a/src/pages/landing/components/hackathon/HackathonTimer.tsx +++ b/src/pages/landing/components/hackathon/HackathonTimer.tsx @@ -87,7 +87,6 @@ const TimerContainer = styled.div` border-radius: 24px; height: 240px; max-width: 1200px; - width: 100%; margin-left: 10px; margin-right: 10px; diff --git a/src/pages/landing/components/hackathon/MainInfo.tsx b/src/pages/landing/components/hackathon/MainInfo.tsx index ee24bdd..31528a1 100644 --- a/src/pages/landing/components/hackathon/MainInfo.tsx +++ b/src/pages/landing/components/hackathon/MainInfo.tsx @@ -16,7 +16,9 @@ const MainInfo = () => { - + + + @@ -127,6 +129,24 @@ const Container = styled.div` } `; +const Participation = styled.div` + display: flex; + justify-content: center; + margin-top: 120px; + margin-bottom: 148px; + width: 100%; + + @media (max-width: 767px) { + margin-top: 40px; + margin-bottom: clamp(255px, 2vh, 446px); + } + + @media (max-width: 360px) { + margin-top: 36px; + margin-bottom: 255px; + } +`; + const TitleImg = styled.img` margin-top: 302px; width: clamp(520px, 5wv, 926px); diff --git a/src/pages/landing/components/hackathon/More.tsx b/src/pages/landing/components/hackathon/More.tsx index 7547d84..ada979d 100644 --- a/src/pages/landing/components/hackathon/More.tsx +++ b/src/pages/landing/components/hackathon/More.tsx @@ -116,7 +116,7 @@ const MoreBtn = styled.div` line-height: 150%; /* 30px */ @media (max-width: 767px) { - width: clamp(320px, 2vw, 523px); + width: clamp(290px, 2vw, 523px); height: 48px; font-size: 16px; }