refactor(landing page): views complete

juunie-roh · Mar 25, 2024 · 876a48b · 876a48b
1 parent eb4ea80
commit 876a48b
Show file tree

Hide file tree

Showing 6 changed files with 479 additions and 2 deletions.
diff --git a/src/app/portfolio/flow/page.tsx b/src/app/portfolio/flow/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 
 import {
+  Business,
   Example,
   Functions,
   Guide,
@@ -9,6 +10,7 @@ import {
   Partner,
   Service,
 } from '@/components/flow/sections';
+import Input from '@/components/flow/sections/input';
 
 export const metadata: Metadata = {
   title: 'Flow KR',
@@ -24,7 +26,8 @@ export default function Page() {
       <Example />
       <Service />
       <Guide />
-      MIGRATION TESTING
+      <Input />
+      <Business />
     </>
   );
 }
diff --git a/src/components/flow/sections/businessbanner.module.css b/src/components/flow/sections/businessbanner.module.css
@@ -0,0 +1,140 @@
+.container {
+  position: relative;
+  width: 100%;
+  height: 400px !important;
+  padding: 76px 0;
+  background: url(/images/flow/bottom-banner-bg.jpg) no-repeat center center /
+    cover;
+}
+.inner {
+  text-align: center;
+}
+
+.text {
+  width: 100% !important;
+}
+.text p {
+  font-size: 28px !important;
+  font-weight: 700;
+  margin: 30px 0 !important;
+  color: #fff;
+  line-height: 40px !important;
+}
+.text ul {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: -20px 0 25px;
+}
+.text ul li {
+  padding-left: 20px;
+  background: url(/images/flow/icon/icon-check11.svg) no-repeat 0 9px;
+  color: #fff;
+  font-size: 18px;
+  line-height: 27px;
+}
+.text ul li:last-child {
+  margin-left: 20px;
+}
+.text a {
+  position: relative;
+  display: inline-block;
+  width: 245px;
+  height: 63px;
+  margin-top: 0 !important;
+  padding: 0 37px;
+  background: #fff;
+  border: 2px solid #fff !important;
+  border-radius: 900px;
+  color: #333;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 3;
+}
+.text a svg {
+  position: absolute;
+  right: 24px;
+  top: 1em;
+  width: 1em;
+  height: 1em;
+  color: #333;
+}
+
+.symbols {
+  display: flex;
+  justify-content: space-between;
+  width: 160px;
+  margin: 0 auto;
+}
+.symbols i {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: #3aafe1;
+  border-radius: 50%;
+  animation: symbols 1.7s ease-in-out infinite;
+}
+.symbols i:nth-child(2) {
+  background: #5cbb52;
+  animation-delay: 180ms;
+}
+.symbols i:nth-child(3) {
+  background: #f28539;
+  animation-delay: 360ms;
+}
+.symbols i:nth-child(4) {
+  background: #302b3c;
+  animation-delay: 540ms;
+}
+.symbols i:nth-child(5) {
+  background: #999;
+  animation-delay: 720ms;
+}
+@keyframes symbols {
+  from,
+  to {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.5);
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .container {
+    height: 320px !important;
+    padding: 85px 0 !important;
+  }
+  .symbols {
+    width: 98px;
+  }
+  .symbols i {
+    width: 10px;
+    height: 10px;
+  }
+  .text p {
+    font-size: 18px !important;
+  }
+  .text ul li {
+    padding-left: 13px;
+    font-size: 12px;
+    line-height: 18px;
+    background-position: 0 5px;
+    background-size: 10px 7px;
+  }
+  .text ul li:last-child {
+    margin-left: 14px;
+  }
+  .text a {
+    width: 197px;
+    height: 53px;
+    padding: 0 30px;
+    font-size: 16px;
+  }
+  .text a svg {
+    right: 21px;
+    top: 1em;
+    width: 1em;
+    height: 1em;
+  }
+}
diff --git a/src/components/flow/sections/businessbanner.tsx b/src/components/flow/sections/businessbanner.tsx
@@ -0,0 +1,32 @@
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import Link from 'next/link';
+
+import common from '../common.module.css';
+import styles from './businessbanner.module.css';
+
+export default function Business() {
+  return (
+    <section className={styles.container}>
+      <div className={`${common.inner} ${styles.inner}`}>
+        <div className={styles.text}>
+          <div className={styles.symbols}>
+            <i />
+            <i />
+            <i />
+            <i />
+            <i />
+          </div>
+          <p>가입만 하면 무료로 쓸 수 있어요!</p>
+          <ul>
+            <li>신용카드 등록없이</li>
+            <li>30일 무료 체험판</li>
+          </ul>
+          <Link href="/portfolio/flow">
+            무료체험 시작하기
+            <ChevronRightIcon />
+          </Link>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/flow/sections/index.ts b/src/components/flow/sections/index.ts
@@ -1,3 +1,4 @@
+import Business from './businessbanner';
 import Example from './examples';
 import Functions from './funtions';
 import Guide from './guide';
@@ -6,4 +7,13 @@ import Management from './management';
 import Partner from './partner';
 import Service from './service';
 
-export { Example, Functions, Guide, MainBanner, Management, Partner, Service };
+export {
+  Business,
+  Example,
+  Functions,
+  Guide,
+  MainBanner,
+  Management,
+  Partner,
+  Service,
+};
diff --git a/src/components/flow/sections/input.module.css b/src/components/flow/sections/input.module.css
@@ -0,0 +1,137 @@
+.container {
+  width: 100%;
+  padding: 100px 0;
+  background: #f6f4fc;
+}
+@media screen and (min-width: 1441px) {
+  .inner {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.miniText {
+  position: relative;
+}
+.miniText::before {
+  content: '';
+  position: relative;
+  top: 0.1em;
+  display: inline-block;
+  width: 0.2em;
+  height: 0.2em;
+  margin: 0.4em;
+  background: var(--color555);
+}
+.image {
+  display: block;
+  margin: 10px auto;
+}
+
+.formList label {
+  display: none;
+}
+#submitBtn,
+.formList input,
+.formList select {
+  display: block;
+  width: 600px;
+  padding: 1em;
+  margin: 1em auto;
+  border: 1px solid #ddd;
+  border-radius: 10px;
+  background: #fff;
+}
+.formList input {
+  color: var(--mainColor);
+}
+.formList input::placeholder {
+  color: var(--color999);
+}
+.formList input:focus,
+.formList select:focus {
+  outline: none;
+  border: 1px solid var(--color333);
+  box-shadow: 2px 2px 6px rgb(0 0 0 / 15%);
+}
+.formList select:hover {
+  cursor: pointer;
+}
+.agreeList input[type='checkbox'] {
+  display: none;
+}
+.agreeList li {
+  display: flex;
+  justify-content: space-between;
+  width: 600px;
+  margin: 1em auto;
+}
+.agreeList label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 2em;
+  font-weight: 500;
+}
+.agreeList label span,
+.agreeList label a {
+  font-weight: 500;
+}
+.agreeList label span {
+  color: var(--errorColor);
+  margin-right: 0.5em;
+}
+.agreeList label a {
+  color: var(--mainColor);
+  text-decoration: underline;
+}
+.agreeList label::before {
+  content: '';
+  display: inline-block;
+  width: 1.2em;
+  height: 1.2em;
+  margin-right: 0.5em;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  background: #fff;
+}
+.agreeList label:hover {
+  cursor: pointer;
+}
+.agreeList label:hover::before {
+  border-color: var(--mainColor);
+}
+.agreeList label.checked::before {
+  background: var(--mainColor);
+}
+#submitBtn {
+  background-color: var(--mainColor);
+  color: #fff;
+  font-weight: 500;
+}
+#submitBtn:hover {
+  cursor: pointer;
+  background-color: var(--holdColor);
+  text-decoration: underline;
+}
+@media screen and (max-width: 1024px) {
+  .image {
+    margin: 10px 0;
+  }
+  .formList input,
+  .formList select,
+  .agreeList li,
+  #submitBtn {
+    width: 100%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .image {
+    max-width: 260px;
+  }
+  .formList input,
+  .formList select {
+    margin: 1.5em auto;
+    padding: 0.5em 1.5em;
+    font-size: 14px;
+  }
+}