Merge pull request #362 from MovieReviewComment/feature/issue-325/banner

MovieReviewComment · May 10, 2024 · 22083eb · 22083eb
2 parents 901af6a + ff3568f
commit 22083eb
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 2 deletions.
diff --git 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
@@ -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>
+  );
+}