diff --git a/public/assets/lendingfilter1.png b/public/assets/lendingfilter1.png
new file mode 100644
index 0000000..a2ae924
Binary files /dev/null and b/public/assets/lendingfilter1.png differ
diff --git a/public/assets/lendingfilter2.png b/public/assets/lendingfilter2.png
new file mode 100644
index 0000000..ccc6461
Binary files /dev/null and b/public/assets/lendingfilter2.png differ
diff --git a/public/assets/lendinglogo.png b/public/assets/lendinglogo.png
new file mode 100644
index 0000000..e5353d8
Binary files /dev/null and b/public/assets/lendinglogo.png differ
diff --git a/public/assets/lendingreviewcard.png b/public/assets/lendingreviewcard.png
new file mode 100644
index 0000000..f90f256
Binary files /dev/null and b/public/assets/lendingreviewcard.png differ
diff --git a/public/assets/lendingwine1.png b/public/assets/lendingwine1.png
new file mode 100644
index 0000000..07bc962
Binary files /dev/null and b/public/assets/lendingwine1.png differ
diff --git a/public/assets/lendingwine3.png b/public/assets/lendingwine3.png
new file mode 100644
index 0000000..55c2869
Binary files /dev/null and b/public/assets/lendingwine3.png differ
diff --git a/public/assets/lendingwinecard.png b/public/assets/lendingwinecard.png
new file mode 100644
index 0000000..b9fe1e5
Binary files /dev/null and b/public/assets/lendingwinecard.png differ
diff --git a/src/assets/lendinglogo.svg b/src/assets/lendinglogo.svg
new file mode 100644
index 0000000..4a43687
--- /dev/null
+++ b/src/assets/lendinglogo.svg
@@ -0,0 +1,24 @@
+<svg width="82" height="24" viewBox="0 0 82 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M26.1078 16.2262C26.1078 17.1664 25.9279 18.0538 25.5679 18.8884C25.2186 19.7124 24.7316 20.436 24.107 21.0593C23.493 21.672 22.7679 22.1579 21.9315 22.5171C21.1058 22.8657 20.2218 23.04 19.2797 23.04C18.4328 23.04 17.6176 22.8921 16.8342 22.5963C16.0614 22.3005 15.3627 21.8674 14.7381 21.2969C14.1135 21.8674 13.4095 22.3005 12.6262 22.5963C11.8428 22.8921 11.0276 23.04 10.1807 23.04C9.23854 23.04 8.34928 22.8657 7.51296 22.5171C6.68723 22.1579 5.96207 21.672 5.33747 21.0593C4.72347 20.436 4.2365 19.7124 3.87656 18.8884C3.52721 18.0538 3.35254 17.1664 3.35254 16.2262V0H7.90995V16.2262C7.90995 16.5432 7.96818 16.8442 8.08463 17.1295C8.20108 17.4041 8.35987 17.6471 8.56101 17.8584C8.77274 18.0591 9.01622 18.2176 9.29147 18.3338C9.56671 18.45 9.86313 18.5081 10.1807 18.5081C10.4983 18.5081 10.7947 18.45 11.07 18.3338C11.3452 18.2176 11.5834 18.0591 11.7845 17.8584C11.9963 17.6471 12.1604 17.4041 12.2768 17.1295C12.3933 16.8442 12.4515 16.5432 12.4515 16.2262V0H17.0089V16.2262C17.0089 16.5432 17.0671 16.8442 17.1836 17.1295C17.3 17.4041 17.4588 17.6471 17.66 17.8584C17.8717 18.0591 18.1152 18.2176 18.3904 18.3338C18.6657 18.45 18.9621 18.5081 19.2797 18.5081C19.5973 18.5081 19.8937 18.45 20.1689 18.3338C20.4442 18.2176 20.6824 18.0591 20.8835 17.8584C21.0952 17.6471 21.2593 17.4041 21.3758 17.1295C21.5028 16.8442 21.5663 16.5432 21.5663 16.2262V0H26.1078V16.2262Z" fill="url(#paint0_linear_12739_505)"/>
+<path d="M35.6088 0H30.7158V23.04H35.6088V0Z" fill="url(#paint1_linear_12739_505)"/>
+<path d="M58.4306 22.8818H53.5556L44.7742 7.9232V22.8818H40.2168V0.158691H45.0918L53.8732 15.1331V0.158691H58.4306V22.8818Z" fill="url(#paint2_linear_12739_505)"/>
+<path d="M78.6476 22.8818H63.0381V0.158691H78.6476V4.70648H67.5955V9.25426H75.0747V13.802H67.5955V18.334H78.6476V22.8818Z" fill="url(#paint3_linear_12739_505)"/>
+<defs>
+<linearGradient id="paint0_linear_12739_505" x1="3.4002" y1="0.31992" x2="146.2" y2="41.5199" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6A42DB"/>
+<stop offset="1" stop-color="#D842DB"/>
+</linearGradient>
+<linearGradient id="paint1_linear_12739_505" x1="2.20019" y1="0.319922" x2="181" y2="50.7199" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6A42DB"/>
+<stop offset="1" stop-color="#D842DB"/>
+</linearGradient>
+<linearGradient id="paint2_linear_12739_505" x1="3.80039" y1="0.32002" x2="147" y2="42.32" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6A42DB"/>
+<stop offset="1" stop-color="#D842DB"/>
+</linearGradient>
+<linearGradient id="paint3_linear_12739_505" x1="27.7998" y1="-2.07998" x2="128.2" y2="31.12" gradientUnits="userSpaceOnUse">
+<stop stop-color="#6A42DB"/>
+<stop offset="1" stop-color="#D842DB"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/common/Gnb.tsx b/src/components/common/Gnb.tsx
index 72f5197..e0e585e 100644
--- a/src/components/common/Gnb.tsx
+++ b/src/components/common/Gnb.tsx
@@ -14,14 +14,17 @@ function Gnb() {
   const { pathname } = useRouter();
 
   return (
-    <div
-      className={cn('z-50 fixed top-0 inset-x-0 bg-white/70 backdrop-blur-md', {
-        'bg-gray-100/70 backdrop-blur-md': pathname === '/', //랜딩 페이지용 배경 색
-      })}
-    >
-      {/*  ㄴ백드롭 필터 적용*/}
-      <header className='mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px]  min-w-[343px]'>
-        <nav className='flex justify-between items-center bg-black  w-full h-[50px] md:h-[70px] rounded-[12px] md:rounded-[16px] mt-[16px] md:mt-[24px] px-[20px] md:px-[60px]'>
+    <div className='z-50 fixed top-0 inset-x-0'>
+      <div
+        className={cn(
+          'absolute inset-0 h-12 backdrop-blur-[2px]',
+          pathname === '/' ? 'bg-gray-100/70' : 'bg-white/60',
+        )}
+      />
+      <div className='absolute inset-0  bg-gradient-to-b from-white/80 to-transparent' />
+
+      <header className='relative z-10 mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px] min-w-[343px]'>
+        <nav className='flex justify-between items-center bg-black w-full h-[50px] md:h-[70px] rounded-[12px] md:rounded-[16px] mt-[16px] md:mt-[24px] px-[20px] md:px-[60px]'>
           <Logo />
           <AuthMenu />
         </nav>
diff --git a/src/components/home/ContentSection.tsx b/src/components/home/ContentSection.tsx
new file mode 100644
index 0000000..d157585
--- /dev/null
+++ b/src/components/home/ContentSection.tsx
@@ -0,0 +1,120 @@
+import Image from 'next/image';
+
+import { ImageCard } from '../common/card/ImageCard';
+
+export const ContentSection = () => {
+  return (
+    <div className='mx-auto max-w-[640px]  min-w-[343px] mt-12 md:mt-[80px] xl:mt-[160px]'>
+      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] md:max-w-[640px] shadow'>
+        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div className='absolute top-[24px] md:top-[56px] left-[24px] md:left-[32px]'>
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block  mb-[8px]'>
+              매달 새롭게 만나는 <br />
+              와인 추천 콘탠츠
+            </span>
+            <p className='custom-text-xs-regular text-gray-500'>
+              매달 다양한 인기 와인을 만나보세요
+            </p>
+          </div>
+          <div className='absolute w-[290px] md:w-[356px] h-[241px] md:h-[277px] right-0 bottom-[24px] md:bottom-0 bg-gray-100 rounded-2xl overflow-hidden  md:overflow-visible top-[160px] md:top-[42px]'>
+            <span className='absolute text-[#7E7E7E] md:text-[#50545B] md:font-bold custom-text-lg-bold md:custom-text-2lg-bold left-5 top-5'>
+              이번 달 추천 와인
+            </span>
+            <div className='flex gap-2.5 ml-5 mt-[61px] '>
+              <div className='w-[193px] flex-shrink-0'>
+                <ImageCard
+                  className='bg-white h-[160px] rounded-lg border-none overflow-hidden shadow'
+                  imageSrc='/assets/lendingwine3.png'
+                  imageClassName='h-[165px] w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[9px] w-[80px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                    <span>별점 나중에</span>
+                    <p className='text-[10px] text-gray-500'>Sentinel Carbernet Sauvignon 2016</p>
+                  </div>
+                </ImageCard>
+              </div>
+              <div className='w-[193px] flex-shrink-0'>
+                <ImageCard
+                  className='bg-white h-[160px] rounded-lg border-none overflow-hidden shadow'
+                  imageSrc='/assets/lendingwine3.png'
+                  imageClassName='h-[165px] w-[44px] object-contain '
+                >
+                  <div className='flex flex-col ml-[9px] w-[80px]'>
+                    <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                    <span>별점 나중에</span>
+                    <p className='text-[10px] text-gray-500'>Sentinel Carbernet Sauvignon 2016</p>
+                  </div>
+                </ImageCard>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[48px] md:mb-[96px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'>
+        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div className='absolute top-[24px] md:top-[55px] left-[24px] md:left-[32px]'>
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-2'>
+              다양한 필터로 찾는
+              <br />내 맞춤 와인
+            </span>
+            <p className='custom-text-xs-regular text-gray-500'>
+              와인 타입, 가격, 평점으로 <br />
+              나에게 맞는 와인을 쉽게 검색해요.
+            </p>
+          </div>
+          <div className='absolute top-[185px] left-[42px] hidden md:block'>
+            <Image width={180} height={100} alt='필터이미지2' src='/assets/lendingfilter2.png' />
+          </div>
+          <div className='absolute top-[245px] left-[32px] hidden md:block'>
+            <Image width={200} height={100} alt='필터이미지1' src='/assets/lendingfilter1.png' />
+          </div>
+          <Image
+            width={280}
+            height={100}
+            alt='필터로 찾은 내 맞춤 와인'
+            src='/assets/lendingwinecard.png'
+            className='absolute right-[-10px] top-[120px] md:top-[20px]'
+          />
+        </div>
+        <div
+          className='pointer-events-none absolute inset-0 rounded-xl'
+          style={{
+            background:
+              'linear-gradient(to top, #EBEEF4 0%, transparent 10%, transparent 90%, #EBEEF4 100%)',
+          }}
+        />
+      </div>
+      <div className='relative bg-[#EBEEF4] h-[424px] md:h-[320px] mb-[64px] md:mb-[80px] xl:mb-[104px] rounded-2xl mx-auto max-w-[500px] overflow-hidden md:max-w-[640px] shadow'>
+        <div className='relative  max-w-[500px] md:max-w-[640px] mx-auto'>
+          <div className='absolute top-[24px] md:top-[55px] left-[24px] md:left-[28px]'>
+            <span className='custom-text-2lg-bold md:text-[22px] md:leading-8 md:font-bold block mb-2'>
+              직관적인
+              <br />
+              리뷰 시스템
+            </span>
+            <p className='custom-text-xs-regular text-gray-500'>
+              더 구체화된 리뷰 시스템으로
+              <br />
+              쉽고 빠르게 와인 리뷰를 살펴보세요
+            </p>
+          </div>
+          <Image
+            width={272}
+            height={100}
+            alt='와인 리뷰 예시 이미지'
+            src='/assets/lendingreviewcard.png'
+            className='absolute right-[-10px] top-[120px] md:right-[42px] md:top-[-65px]'
+          />
+        </div>
+        <div
+          className='pointer-events-none absolute inset-0 rounded-xl'
+          style={{
+            background:
+              'linear-gradient(to top, #EBEEF4 0%, transparent 5%, transparent 95%, #EBEEF4 100%)',
+          }}
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/home/HeroSection.tsx b/src/components/home/HeroSection.tsx
new file mode 100644
index 0000000..366a355
--- /dev/null
+++ b/src/components/home/HeroSection.tsx
@@ -0,0 +1,106 @@
+import Image from 'next/image';
+
+import HeroSectionLayout from './HeroSectionLayout';
+import { ImageCard } from '../common/card/ImageCard';
+
+export const HeroSection = () => {
+  return (
+    <header>
+      <div className='relative h-[403px] md:h-[394px] xl:h-[535px] bg-[#171A21] flex items-center justify-center overflow-hidden rounded-lg'>
+        <div className='flex flex-col items-center h-full'>
+          <div>
+            <Image
+              src='/assets/lendinglogo.png'
+              alt='와인 로고 이미지'
+              width={100}
+              height={100}
+              className='w-[81px] md:w-[100px] h-[23px] md:h-[30px] text-primary mt-[58px] md:mt-[80px] xl:mt-[112px]'
+            />
+          </div>
+          <span className='text-white text-center custom-text-xl-bold md:custom-text-2xl-bold mt-6 md:mt-8'>
+            한 곳에서 관리하는 <br />
+            나만의 와인창고
+          </span>
+          <div className='relative w-[720px] h-[420px] mt-auto mx-auto translate-y-[80px] md:translate-y-[40px] xl:translate-y-[120px] scale-[1] md:scale-[0.7] xl:scale-[1]'>
+            {/* 기준 박스 translate-y 아래로-ㅁㅁ만큼 밀어내기 */}
+            <HeroSectionLayout className='top-4 left-1/2 z-30 -translate-x-1/2'>
+              <ImageCard
+                imageSrc='/assets/lendingwine3.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  {/* 모달쪽에 구현해둔 별점이 있음 */}
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+
+            {/* 좌우 위 박스 */}
+            <HeroSectionLayout className='top-10 left-[calc(50%-340px)] z-20'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+            <HeroSectionLayout className='top-10 left-[calc(50%+100px)] z-20'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+
+            {/* 좌우 아래 박스 */}
+            <HeroSectionLayout className='top-[80px] left-[calc(50%-480px)] z-10'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+            <HeroSectionLayout className='top-[80px] left-[calc(50%+240px)] z-10'>
+              <ImageCard
+                imageSrc='/assets/lendingwine1.png'
+                imageClassName='h-full w-[44px] object-contain '
+              >
+                <div className='flex flex-col ml-[8px] w-[100px]'>
+                  <span className='font-extrabold text-4xl text-gray-800'>4.3</span>
+                  <span>별점 나중에</span>
+                  <p className='custom-text-xs-regular text-gray-500'>
+                    Sentinel Carbernet Sauvignon 2016
+                  </p>
+                </div>
+              </ImageCard>
+            </HeroSectionLayout>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
diff --git a/src/components/home/HeroSectionLayout.tsx b/src/components/home/HeroSectionLayout.tsx
new file mode 100644
index 0000000..057dfba
--- /dev/null
+++ b/src/components/home/HeroSectionLayout.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+interface HeroSectionLayoutProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+const HeroSectionLayout = ({ children, className }: HeroSectionLayoutProps) => {
+  const baseClass = 'absolute w-[240px] h-[185px] rounded-xl shadow-xl bg-white';
+
+  return <div className={cn(baseClass, className)}>{children}</div>;
+};
+
+export default HeroSectionLayout;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 052dea9..3d0032a 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,3 +1,28 @@
+import Link from 'next/link';
+
+import { ContentSection } from '@/components/home/ContentSection';
+import { HeroSection } from '@/components/home/HeroSection';
+import { Button } from '@/components/ui/button';
+
 export default function Home() {
-  return <main>메인</main>;
+  return (
+    <div className='mx-auto px-[16px] md:px-[20px] xl:px-0 max-w-[1140px]  min-w-[343px] mt-6 xl:mt-[80px]'>
+      <HeroSection />
+      <main>
+        <ContentSection />
+      </main>
+      <footer>
+        <Link href='/wines'>
+          <Button
+            variant='purpleDark'
+            size='onlyLanding'
+            width='onlyLanding'
+            className='block mx-auto mb-[62px]'
+          >
+            와인 보러가기
+          </Button>
+        </Link>
+      </footer>
+    </div>
+  );
 }