From ff3568f434979bd7f79587086ec5154115b68d47 Mon Sep 17 00:00:00 2001
From: wnhlee <2wheeh@gmail.com>
Date: Tue, 7 May 2024 22:13:45 +0900
Subject: [PATCH] feat: add Banner

---
 ui/src/app/(home)/page.tsx                 |  8 ++-
 ui/src/components/common/client/banner.tsx | 66 ++++++++++++++++++++++
 2 files changed, 72 insertions(+), 2 deletions(-)
 create mode 100644 ui/src/components/common/client/banner.tsx

diff --git a/ui/src/app/(home)/page.tsx b/ui/src/app/(home)/page.tsx
index 0cdf568e..8a7131a3 100644
--- a/ui/src/app/(home)/page.tsx
+++ b/ui/src/app/(home)/page.tsx
@@ -1,12 +1,16 @@
 import Link from 'next/link';
 
+import Banner from '@/components/common/client/banner';
+
 export default function Home() {
   return (
-    <>
+    <main className="container mx-auto flex max-w-5xl flex-col items-center">
+      <Banner />
+
       <h1>This is Mr.C home</h1>
       <Link href="/review">review</Link>
       <br />
       <Link href="/comment">comment</Link>
-    </>
+    </main>
   );
 }
diff --git a/ui/src/components/common/client/banner.tsx b/ui/src/components/common/client/banner.tsx
new file mode 100644
index 00000000..3340609a
--- /dev/null
+++ b/ui/src/components/common/client/banner.tsx
@@ -0,0 +1,66 @@
+'use client';
+
+import Swiper from '@/components/common/client/swiper';
+import Text from '@/components/common/server/text';
+
+export default function Banner() {
+  return (
+    <section className="w-screen ">
+      <Swiper>
+        <Swiper.Slide>
+          <div className="bg-orange-200 h-64">
+            <div className="container max-w-5xl mx-auto py-10 px-6">
+              <Text size="xl" weight="bold" noselect>
+                시네필을 위한 영화 커뮤니티 🎬
+              </Text>
+
+              <div className="mt-6">
+                <Text size="lg" noselect>
+                  익명으로 자유롭게 !
+                </Text>
+                <Text size="lg" noselect>
+                  영화에 대한 이야기를 마음껏 나누어요
+                </Text>
+              </div>
+            </div>
+          </div>
+        </Swiper.Slide>
+
+        <Swiper.Slide>
+          <div className="bg-orange-200 h-64">
+            <div className="container max-w-5xl mx-auto py-10 px-6">
+              <Text size="xl" weight="bold" noselect>
+                리뷰
+              </Text>
+
+              <div className="mt-6">
+                <Text size="lg" noselect>
+                  좋아하는 영화에 대한 이야기 !
+                </Text>
+                <Text size="lg" noselect>
+                  아름다운 서식을 위한 에디터를 지원해요
+                </Text>
+              </div>
+            </div>
+          </div>
+        </Swiper.Slide>
+
+        <Swiper.Slide>
+          <div className="bg-orange-200 h-64">
+            <div className="container max-w-5xl mx-auto py-10 px-6">
+              <Text size="xl" weight="bold" noselect>
+                코멘트
+              </Text>
+
+              <div className="mt-6">
+                <Text size="lg" noselect>
+                  한줄평으로 촌철살인 !
+                </Text>
+              </div>
+            </div>
+          </div>
+        </Swiper.Slide>
+      </Swiper>
+    </section>
+  );
+}