[Landing] Markup and style on pc responsive pages: step 1

.idea/modules.xml

@@ -2,7 +2,9 @@
 <project version="4">
   <component name="ProjectModuleManager">
     <modules>
+      <module fileurl="file://$PROJECT_DIR$/backend-api/backend-api.iml" filepath="$PROJECT_DIR$/backend-api/backend-api.iml" />
       <module fileurl="file://$PROJECT_DIR$/backend-libs-lambda-layer/backend-libs-lambda-layer.iml" filepath="$PROJECT_DIR$/backend-libs-lambda-layer/backend-libs-lambda-layer.iml" />
+      <module fileurl="file://$PROJECT_DIR$/landing-page/landing-page.iml" filepath="$PROJECT_DIR$/landing-page/landing-page.iml" />
       <module fileurl="file://$PROJECT_DIR$/.idea/vanillameta.iml" filepath="$PROJECT_DIR$/.idea/vanillameta.iml" />
     </modules>
   </component>

landing-page/css/src/index.css

@@ -2,19 +2,22 @@
 
 /* #headBox */
 #headBox {
-  height: 50px;
+  position: fixed;
+  width: 100%;
+  height: 55px;
   background-color: #fff;
 }
 .navbar {
   height: 100%;
+  border-bottom: 1px solid #ececec;
 }
 .navbar .container-fluid {
-  display: flex;
-  align-items: center;
   height: 100%;
+  padding: 0 24px;
 }
 .navbar .container-fluid > a {
-  display: block;
+  display: flex;
+  align-items: center;
   height: 100%;
 }
 .navbar .logo_img {
@@ -22,13 +25,24 @@
   height: 20px;
 }
 .navbar .github_img {
-  width: 32px;
-  height: 32px;
+  width: 100%;
+  height: auto;
 }
 
 /* #viewBox */
 #viewBox {
   width: 100%;
+  padding-top: 55px; /* header height */
+}
+#viewBox .container-fluid {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  padding-top: 56px;
+  padding-bottom: 59px;
+  /*background-image: linear-gradient(to bottom, #264e9c 20%, #b3d5f3 58%, rgba(255, 255, 255, 0) 100%);*/
+  background-image: linear-gradient(to bottom, #264e9c 0%, #b3d5f3 54%, rgba(255, 255, 255, 0) 100%);
+  background-color: #eceef3;
 }
 #viewBox .typo {
   text-shadow: 0 0.8px 1.5px rgba(18, 0, 88, 0.4);
@@ -39,40 +53,94 @@
   color: #fff;
 }
 #viewBox h2 {
-  font-size: 34px;
+  font-size: 48px;
 }
 #viewBox p {
-  font-size: 14px;
-}
-#viewBox .container-fluid {
-  display: flex;
-  align-items: center;
-  flex-direction: column;
-  padding: 23px;
-  padding-top: 42px;
-  padding-bottom: 44px;
-  background-image: linear-gradient(to bottom, #264e9c 20%, #b3d5f3 58%, rgba(255, 255, 255, 0) 100%);
+  margin-top: 7px;
+  padding: 0;
+  font-size: 18px;
 }
 #viewBox .btn_area {
   display: flex;
-  margin-top: 26px;
-  gap: 8px;
+  margin-top: 32px;
+  column-gap: 12px;
 }
 #viewBox .btn_area button {
-  width: 120px;
-  height: 40px;
-  gap: 8px;
-  padding: 8px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 140px;
+  height: 46px;
   border: solid 1px #043f84;
   border-radius: 6px;
   box-shadow: 0 4px 6px 0 rgba(26, 33, 97, 0.2);
   font-weight: 600;
-  font-size: 14px;
+  font-size: 16px;
   background-color: #043f84;
   color: #fff;
 }
-.source_btn {
+#viewBox .btn_area img {
+  width: 24px;
+  height: auto;
+  margin-right: 10px;
 }
+#viewBox .img_main {
+  width: 772px;
+  height: auto;
+  margin-top: 16px;
+}
+
+/* featureBox*/
+#featureBox {
+  text-align: center;
+  background-color: #eceef3;
+  padding-bottom: 80px;
+}
+#featureBox h2 {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: 0.36px;
+  color: #043f84;
+}
+#featureBox .typo {
+  margin-top: 12px;
+  margin-bottom: 36px;
+  font-size: 16px;
+  color: #141414;
+  line-height: 22px;
+}
+#featureBox .typo span {
+  color: #0f5ab2;
+}
+.feature_area {
+  display: flex;
+  row-gap: 49px;
+  column-gap: 39px;
+  justify-content: center;
+}
+.feature_area li {
+  width: 380px;
+  height: 292px;
+  padding: 33px 40px 31px;
+  border-radius: 12px;
+  box-shadow: 0 4px 4px 0 rgba(169, 169, 169, 0.15);
+  background-color: #fff;
+}
+.feature_area h3 {
+  margin-bottom: 14px;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.18px;
+  color: #043f84;
+}
+.feature_area p {
+  margin-bottom: 30px;
+  font-size: 14px;
+  line-height: 1.43;
+  color: #606060;
+}
+
+#featureBox
 
 /* #footBox */
 #footBox {

landing-page/img/ic-github-white.svg

@@ -0,0 +1,3 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.49 1.788C6.696 1.786 2 6.478 2 12.27c0 4.58 2.937 8.472 7.027 9.902.55.138.466-.253.466-.52v-1.817c-3.18.373-3.31-1.732-3.523-2.083-.43-.736-1.45-.924-1.146-1.275.724-.373 1.463.093 2.318 1.357.619.916 1.826.761 2.438.609.133-.55.42-1.043.813-1.425-3.295-.59-4.669-2.602-4.669-4.992 0-1.16.382-2.227 1.132-3.087-.478-1.418.045-2.632.115-2.812 1.362-.122 2.777.975 2.888 1.061.773-.208 1.657-.318 2.646-.318.993 0 1.88.114 2.66.325.265-.201 1.577-1.143 2.843-1.029.068.18.579 1.367.129 2.766.76.863 1.146 1.938 1.146 3.1 0 2.396-1.383 4.41-4.688 4.99a2.987 2.987 0 0 1 .893 2.134v2.636c.019.211 0 .42.352.42 4.15-1.4 7.139-5.32 7.139-9.94 0-5.794-4.697-10.484-10.488-10.484z" fill="#fff"/>
+</svg>

landing-page/img/ic-github.svg

@@ -1,3 +1,3 @@
-<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M15.988 2.384C8.259 2.381 2 8.637 2 16.36c0 6.106 3.916 11.297 9.369 13.203.734.185.622-.337.622-.693v-2.422c-4.241.497-4.413-2.31-4.697-2.778-.575-.982-1.935-1.232-1.528-1.7.965-.497 1.95.125 3.09 1.809.825 1.222 2.435 1.016 3.25.813.178-.735.56-1.391 1.085-1.9-4.394-.788-6.225-3.47-6.225-6.657 0-1.547.509-2.968 1.509-4.115-.637-1.891.06-3.51.153-3.75 1.816-.163 3.703 1.3 3.85 1.415 1.031-.278 2.21-.425 3.528-.425 1.325 0 2.506.153 3.547.435.353-.27 2.103-1.525 3.79-1.372.091.24.773 1.822.173 3.687 1.012 1.15 1.528 2.585 1.528 4.135 0 3.193-1.844 5.878-6.25 6.653a3.982 3.982 0 0 1 1.19 2.844v3.515c.025.281 0 .56.47.56 5.534-1.866 9.518-7.094 9.518-13.254 0-7.725-6.263-13.978-13.985-13.978z" fill="#000"/>
+<svg width="40" height="40" viewBox="0 0 32 32" fill="#000" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.988 2.384C8.259 2.381 2 8.637 2 16.36c0 6.106 3.916 11.297 9.369 13.203.734.185.622-.337.622-.693v-2.422c-4.241.497-4.413-2.31-4.697-2.778-.575-.982-1.935-1.232-1.528-1.7.965-.497 1.95.125 3.09 1.809.825 1.222 2.435 1.016 3.25.813.178-.735.56-1.391 1.085-1.9-4.394-.788-6.225-3.47-6.225-6.657 0-1.547.509-2.968 1.509-4.115-.637-1.891.06-3.51.153-3.75 1.816-.163 3.703 1.3 3.85 1.415 1.031-.278 2.21-.425 3.528-.425 1.325 0 2.506.153 3.547.435.353-.27 2.103-1.525 3.79-1.372.091.24.773 1.822.173 3.687 1.012 1.15 1.528 2.585 1.528 4.135 0 3.193-1.844 5.878-6.25 6.653a3.982 3.982 0 0 1 1.19 2.844v3.515c.025.281 0 .56.47.56 5.534-1.866 9.518-7.094 9.518-13.254 0-7.725-6.263-13.978-13.985-13.978z" />
 </svg>

landing-page/img/ic-vanilla-meta.svg

@@ -0,0 +1,3 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M1.923 15.894c-.114 0-.228-.01-.333-.037C.828 15.67.35 14.919.542 14.176l1.686-6.78C2.733 5.676 4 4.543 5.534 4.375c1.448-.157 2.829.604 3.61 1.98.22.38.505.584.79.556.277-.027.648-.278.849-.92l.98-3.018c.6-1.857 2.087-2.981 3.84-2.87 1.781.121 3.21 1.533 3.562 3.52l1.325 10.71c.095.761-.467 1.458-1.248 1.55-.782.093-1.496-.454-1.591-1.216L16.336 4.033c-.133-.734-.562-1.114-.933-1.142-.362-.037-.734.325-.924.92l-.982 3.018c-.524 1.607-1.781 2.703-3.286 2.851-1.439.14-2.8-.622-3.572-1.978-.22-.39-.515-.595-.791-.557-.362.037-.695.418-.857.966l-1.667 6.724a1.425 1.425 0 0 1-1.391 1.068l-.01-.01z" fill="#fff"/>
+</svg>

landing-page/index.html

@@ -71,27 +71,141 @@
       <main>
         <section id="viewBox">
           <div class="container-fluid">
-            <h2 class="typo">누구나 쉽게 사용하는 통합 데이터 분석</h2>
+            <h2 class="typo">
+              누구나 쉽게 사용하는<br />
+              통합 데이터 분석
+            </h2>
             <p class="typo">VanillaMeta with open source on Github</p>
             <div class="btn_area">
-              <button type="button" class="btn source_btn">소스 보기</button>
-              <button type="button" class="btn demo_btn">데모 보기</button>
+              <button type="button" class="btn source_btn">
+                <img src="./img/ic-vanilla-meta.svg" alt="Vanilla meta button icon" />데모 보기
+              </button>
+              <button type="button" class="btn demo_btn">
+                <img src="./img/ic-github-white.svg" alt="Github button icon" />소스 보기
+              </button>
             </div>
-            <div class="img_area">
-              <img src="./img/main-visual.png" alt="" />
+            <div>
+              <img class="img_main" src="./img/main-visual.png" alt="" />
             </div>
           </div>
         </section>
 
-        <section class="whyBox">
+        <section id="featureBox">
           <div class="container-fluid">
             <h2>Why VanillaMeta?</h2>
-            <p>
+            <p class="typo">
               바닐라메타는 최신 데이터 탐색적 분석 및 데이터 시각화 솔루션입니다.<br />
               비즈니스 인텔리전스 도구를 대체하거나 보강할 수 있으며, 다양한 데이터 소스와 잘 통합 됩니다.<br />
-              이러한 바닐라메타는 Github에서 Open Sorce로 제공 받아 사용하실 수 있습니다.
+              <span>이러한 바닐라메타는 Github에서 Open Sorce로 제공 받아 사용하실 수 있습니다.</span>
             </p>
           </div>
+
+          <div class="container-fluid">
+            <h2 class="blind">Feature of VanillaMeta</h2>
+            <ul class="row feature_area">
+              <li class="col-lg-6 col-xl-4">
+                <h3>코딩없이 차트 위젯 제작</h3>
+                <p>
+                  연결된 데이터베이스를 지원하는 차트 중 선택 후<br />
+                  설정화면을 통해 코딩없이 위젯 제작이 가능합니다.
+                </p>
+                <img src="./img/thumb-01.png" alt="Feature image thumbnail 01" />
+              </li>
+              <li class="col-lg-6 col-xl-4">
+                <h3>50개 이상의 차트 지원</h3>
+                <p>
+                  50개 이상의 다양한 차트 지원으로<br />
+                  최적의 분석을 위한 차트 활용이 가능합니다.
+                </p>
+                <img src="./img/thumb-02.png" alt="Feature image thumbnail 02" />
+              </li>
+              <li class="col-lg-6 col-xl-4">
+                <h3>사용자 맞춤형 대시보드 편집 및 공유</h3>
+                <p>
+                  사용자가 설정한 위젯을 자유로운<br />
+                  레이아웃으로 편집 및 공유가 가능합니다.
+                </p>
+                <img src="./img/thumb-03.png" alt="Feature image thumbnail 03" />
+              </li>
+              <li class="col-lg-6 col-xl-4">
+                <h3>대시보드 템플릿 디자인 추천</h3>
+                <p>
+                  대시보드 템플릿 디자인 추천을 통해<br />
+                  빠르고 편리하게 편집이 가능합니다.
+                </p>
+                <img src="./img/thumb-04.png" alt="Feature image thumbnail 04" />
+              </li>
+              <li class="col-lg-6 col-xl-4">
+                <h3>SQL 쿼리 편집기 & 데이터 미리보기 제공</h3>
+                <p>
+                  SQL 쿼리 편집기를 통해 빠르게 데이터를 편집하고<br />
+                  미리보기를 통해 데이터를 확인할 수 있습니다.
+                </p>
+                <img src="./img/thumb-05.png" alt="Feature image thumbnail 05" />
+              </li>
+              <li class="col-lg-6 col-xl-4">
+                <h3>다양한 SQL 데이터베이스 즉시 지원</h3>
+                <p>
+                  다양한 SQL 데이터베이스 지원 기능을 통해<br />
+                  빠르게 데이터를 연결할 수 있습니다.
+                </p>
+                <img src="./img/thumb-06.png" alt="Feature image thumbnail 06" />
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section id="detailBox">
+          <div class="container-fluid">
+            <h2 class="blind">Feature detail</h2>
+            <ul>
+              <li>
+                <h3>대시보드 분석 시각화</h3>
+                <p>
+                  사용자 맞춤형 대시보드 편집 및 공유와<br />
+                  대시보드 템플릿 디자인을 추천합니다.
+                </p>
+                <img src="./img/img-01.png" alt="Feature detail img thumbnail 01" />
+              </li>
+              <li>
+                <h3>시각화 위젯 제작</h3>
+                <p>
+                  코딩없이 차트 위젯 제작 가능하며<br />
+                  50개 이상의 차트를 지원합니다.
+                </p>
+                <img src="./img/img-02.png" alt="Feature detail img thumbnail 01" />
+              </li>
+              <li>
+                <h3>
+                  최신 데이터베이스와<br />
+                  통합
+                </h3>
+                <p>
+                  고급 SQL 쿼리 편집기 및 데이터 미리보기<br />가 가능하며, 다양한 SQL 데이터베이스에 <br />대해 즉시
+                  지원합니다.
+                </p>
+                <img src="./img/img-03.png" alt="Feature detail img thumbnail 01" />
+              </li>
+            </ul>
+          </div>
+        </section>
+
+        <section id="bannerBox">
+          <div class="container-fluid">
+            <h2>지원가능 데이터베이스</h2>
+            <ul class="row">
+              <li><img src="./img/logo-bigquery.png" alt="MySQL banner image" /></li>
+              <li><img src="./img/logo-maria-db.png" alt="MariaDB banner image" /></li>
+              <li><img src="./img/logo-postgresql.png" alt="PostgreSQL banner image" /></li>
+              <li><img src="./img/logo-oracle.png" alt="Oracle banner image" /></li>
+              <li><img src="./img/logo-redshift.png" alt="Amazon Redshift banner image" /></li>
+              <li><img src="./img/logo-bigquery.png" alt="Google Big Query banner image" /></li>
+              <li><img src="./img/logo-sqllite.png" alt="SQLite banner image" /></li>
+              <li><img src="./img/logo-mssql.png" alt="Microsoft SQL Server banner image" /></li>
+              <li><img src="./img/logo-snowflake.png" alt="Snowflake banner image" /></li>
+              <li><img src="./img/logo-cockroachdb.png" alt="Cockroach banner image" /></li>
+            </ul>
+          </div>
         </section>
       </main>
 

landing-page/landing-page.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>