✨ feat: LargeGradientCard추가

src/app/home/_components/LargeGradientCard.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { CardProps } from './type';
+import { FullCoveredImage } from './style';
+
+const LargeGradientCard = ({ image, title }: CardProps) => {
+  return (
+    <CardContainer>
+      <FullCoveredImage
+        src={image}
+        alt={title}
+      />
+      <Overlay />
+    </CardContainer>
+  );
+};
+
+export default LargeGradientCard;
+
+const CardContainer = styled.div`
+  position: relative;
+
+  width: 375px;
+  height: 415px;
+  gap: 0px;
+`;
+
+const Overlay = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.45) 0%,
+    rgba(0, 0, 0, 0) 87.26%,
+    #000000 100%
+  );
+  pointer-events: none;
+`;

src/app/home/_components/style.ts

@@ -5,3 +5,30 @@ export const FullCoveredImage = styled.img`
   height: 100%;
   object-fit: cover;
 `;
+
+export const Title = styled.p`
+  font-family: SF Pro Display;
+  font-size: 26.75px;
+  font-weight: 700;
+  line-height: 20px;
+  letter-spacing: -0.07339449226856232px;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: white;
+  margin: 1rem;
+  margin-top: 1.5rem;
+`;
+
+export const SubTitle = styled.p`
+  font-family: SF Pro Display;
+  font-size: 20.92px;
+  font-weight: 700;
+  line-height: 15.64px;
+  letter-spacing: -0.05740566551685333px;
+  text-align: left;
+  text-underline-position: from-font;
+  text-decoration-skip-ink: none;
+  color: white;
+  margin: 1rem;
+  margin-top: 1.5rem;
+`;