diff --git a/src/app/spc-page/assets/spc24-hero__no-ani.svg b/src/app/spc-page/assets/spc24-hero__no-ani.svg
new file mode 100755
index 0000000..a43328c
--- /dev/null
+++ b/src/app/spc-page/assets/spc24-hero__no-ani.svg
@@ -0,0 +1,22 @@
+
\ No newline at end of file
diff --git a/src/app/spc-page/spc-24-banner.tsx b/src/app/spc-page/spc-24-banner.tsx
index b071cfe..719cfea 100644
--- a/src/app/spc-page/spc-24-banner.tsx
+++ b/src/app/spc-page/spc-24-banner.tsx
@@ -1,6 +1,137 @@
import styled from "styled-components";
+import { ArrowRightIcon } from "@heroicons/react/24/solid";
+
+import { FlexCol, FlexRow } from "@ui/flex/flex";
+import { EmptyLink } from "@ui/button/empty-link";
+
+import Spc24HeroNoAniSvg from "./assets/spc24-hero__no-ani.svg";
+import { routes } from "../../routes/routes";
+
+const SubTitle = styled.span`
+ font-family: "sogang";
+ font-size: 1.2rem;
+`;
+const Title = styled.span`
+ font-family: "sogang";
+ font-size: 2.4rem;
+
+ word-break: keep-all;
+ text-align: center;
+`;
+const Logo = styled.img`
+ height: 5.6rem;
+`;
+const LogoTitleWrapper = styled(FlexRow)`
+ align-items: center;
+ gap: 2rem;
+
+ height: 100%;
+
+ @media (max-width: 1240px) {
+ flex-direction: column;
+ }
+`;
+const TitleWrapper = styled(FlexCol)`
+ align-items: flex-start;
+ row-gap: 0.2rem;
+
+ @media (max-width: 1240px) {
+ align-items: center;
+ }
+`;
+
+const Sup = styled.div`
+ vertical-align: super;
+ font-size: 0.8rem;
+ font-weight: ${({ theme }) => theme.fontWeight.medium};
+`;
+
+const ApplyButton = styled.button`
+ display: inline-flex;
+ align-items: center;
+ column-gap: 0.4rem;
+
+ border-radius: 12px;
+ padding: 4px 12px;
+
+ font-size: 1.2rem;
+ font-weight: ${({ theme }) => theme.fontWeight.bold};
+
+ border: 2px solid #9a0a0a;
+ color: #9a0a0a;
+
+ text-align: center;
+`;
+
+const DateLocationWrapper = styled(FlexRow)`
+ flex-direction: column;
+
+ row-gap: 0.4rem;
+`;
+const InfoLabel = styled.span`
+ font-family: "Pretendard";
+ font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+ vertical-align: super;
+ font-size: 0.9rem;
+
+ color: rgb(156, 133, 119);
+`;
+const InfoValue = styled.span`
+ font-family: "Pretendard";
+ font-weight: ${({ theme }) => theme.fontWeight.semiBold};
+ font-size: 1.2rem;
+`;
const _Spc24Banner = ({ className }: { className?: string }) => {
- return ;
+ return (
+
+
+
+
+ 2024 · 제 20회
+ 서강대학교 프로그래밍 대회
+
+
+
+
+ 일시
+ 11월 9일 토요일 오후 2-6시
+
+
+ 장소
+ 다산관 D104/105
+
+
+
+
+ 참가신청
+ ~11/3(일)까지
+
+
+
+