feat: 백그라운드 블러 효과 적용

Author: parkjoohyung0826

src/pages/Main/index.styled.tsx

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+  position: relative;
+  width: 100%;
+  min-height: 100vh;
+  z-index: 2;
+
+  &::before, &::after {
+    content: "";
+    position: absolute;
+    bottom: 0; 
+    width: 10px; 
+    height: 40%; 
+    background: linear-gradient(to bottom, 
+      rgba(255, 102, 0, 0) 0%, 
+      rgba(255, 102, 0, 0.8) 50%, 
+      rgba(255, 102, 0, 0) 100%
+    );
+    z-index: 3;
+  }
+
+  &::before {
+    left: 0;
+  }
+
+  &::after {
+    right: 0;
+  }
+`;

src/pages/Main/index.tsx

@@ -3,15 +3,18 @@ import Tracks from "./Tracks/Tracks";
 import Union from "./Union/Union";
 import Achievements from "./Achievements/Achievements";
 import BottomInfo from "./BottomInfo/BottomInfo";
+import FarmSystemNav from "./FarmSyetemNav/FarmSystemNav";
+import * as S from "./index.styled"; 
 
 export default function Main() {
   return (
-    <div>
+    <S.MainContainer> {/* 배경 그라데이션 적용 */}
+      <FarmSystemNav />
       <Intro />
       <Tracks />
       <Union />
       <Achievements />
       <BottomInfo />
-    </div>
+    </S.MainContainer>
   );
-}
+}