LPのライブラリ画面移植

gatsby-browser.js

@@ -1,6 +1,7 @@
 // custom typefaces
 // import 'typeface-montserrat';
 // import 'typeface-merriweather';
+import './src/styles/reset.scss';
 import './src/styles/syntax-highlight.scss';
 
 require('prismjs/themes/prism-solarizedlight.css');

src/components/molecules/AppFooter/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+const AppFooter = () => {
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.inner}>
+        <div className={styles.logo}>Wistant</div>
+        <p className={styles.contact}>Wistantに関するお問い合わせはこちら：<a className={styles.contactLink} href="mailto:info@wistant.com">info@wistant.com</a></p>
+        <p className={styles.copy}>Copyright © Relations Inc. All Rights reserved.</p>
+        <ul className={styles.navi}>
+          <li className={styles.naviItem}>
+            <a className={styles.naviLink} href="./terms.html" target="_blank" rel="noopener">利用規約</a>
+          </li>
+          <li className={styles.naviItem}>
+            <a className={styles.naviLink} href="https://www.relationsgroup.co.jp/privacy-policy/" target="_blank" rel="noopener">個人情報保護方針</a>
+          </li>
+          <li className={styles.naviItem}>
+            <a className={styles.naviLink} href="./sctl.html" target="_blank" rel="noopener">特定商取引法</a>
+          </li>
+          <li className={styles.naviItem}>
+            <a className={styles.naviLink} href="https://www.relationsgroup.co.jp" target="_blank" rel="noopener">運営会社</a>
+          </li>
+        </ul>
+      </div>
+    </footer>
+  );
+};
+
+export default AppFooter;

src/components/molecules/AppFooter/index.module.scss

@@ -0,0 +1,120 @@
+@import '../../../styles/variables.scss';
+@import '../../../styles/media-queries.scss';
+@import '../../../styles/mixin.scss';
+@import '../../../styles/layout.scss';
+
+.footer {
+  padding: 80px 0 24px;
+  background-color: $color-grayBackground;
+
+  @include mq($vp-s) {
+    padding: 80px 0 12px;
+  }
+}
+
+.inner {
+  @include layout-maxContent;
+  display: flex;
+  align-items: flex-end;
+  flex-wrap: wrap;
+
+  @include mq($vp-s) {
+    align-items: center;
+    flex-direction: column;
+  }
+}
+
+.logo {
+  flex-shrink: 0;
+  @include image-replacement(114px, 30px, '../../../../content/assets/wis-logo-main-green.png', 0, 0);
+  background-size: 114px 30px;
+  margin-bottom: 16px;
+
+  @include mq($vp-s) {
+    order: 1;
+    width: 144px;
+    height: 38px;
+    margin: 0 auto 60px;
+    background-size: 144px 38px;
+  }
+}
+
+.contact {
+  flex-grow: 1;
+  width: calc(100% - 114px);
+  margin-bottom: 16px;
+  font-size: 1rem;
+  color: $color-grayText;
+  text-align: right;
+
+  @include mq($vp-s) {
+    order: 3;
+    width: 100%;
+    text-align: center;
+  }
+}
+
+.contactLink {
+  color: $color-grayText;
+
+  &:hover {
+    color: $color-grayText;
+    text-decoration: underline;
+  }
+}
+
+.copy {
+  font-size: 1rem;
+  color: $color-grayText;
+
+  @include mq($vp-s) {
+    order: 4;
+    font-size: 1rem;
+  }
+}
+
+.navi {
+  display: flex;
+  margin-left: auto;
+
+  @include mq($vp-s) {
+    order: 2;
+    flex-direction: column;
+    margin-bottom: 42px;
+    margin-right: auto;
+    text-align: center;
+  }
+}
+
+.naviItem {
+  font-size: 1rem;
+
+  &:not(:last-child) {
+    margin-right: 16px;
+    padding-right: 16px;
+    border-right: 1px solid $color-grayText;
+
+
+    @include mq($vp-s) {
+      margin-right: 0;
+      padding-right: 0;
+      margin-bottom: 24px;
+      border-right: none;
+    }
+  }
+}
+
+.naviLink {
+  font-size: 1rem;
+  color: $color-grayText;
+  cursor: pointer;
+
+  @include mq($vp-s) {
+    font-size: 1.2rem;
+  }
+
+  &:hover {
+    color: $color-grayText;
+    text-decoration: underline;
+  }
+}

src/components/molecules/AppHeader/index.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+const AppHeader = () => {
+  return (
+    <header className={styles.header}>
+
+      <div className={styles.inner}>
+        <h1 className={styles.logo}>
+          <a className={styles.logoLink} href="./index.html">Wistant</a>
+        </h1>
+
+        <nav className={styles.nav}>
+          <ul className={styles.navInner}>
+            <li className={styles.navItemTrial}>
+              <div className={styles.navButton}>
+                <a className={styles.navButtonTrialDemonstration} href="https://wistant.satori.site/demo_request">無料デモのお申込みはこちら</a>
+              </div>
+              <div className={styles.navButton}>
+                <a className={styles.navButtonTrialDocument} href="https://wistant.satori.site/brochure_request">資料請求のお申込みはこちら</a>
+              </div>
+            </li>
+            <li className={styles.navItem}>
+              <a className={styles.navLink} href="./index.html">ホーム</a>
+              <ul className={styles.navSubMenu}>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="./index.html">TOP</a>
+                </li>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="#about">Wistantとは</a>
+                </li>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="#price">価格</a>
+                </li>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="#seleck">1on1とは</a>
+                </li>
+              </ul>
+            </li>
+            <li className={styles.navItem}>
+              <a className={styles.navLink} href="./functions.html">機能</a>
+              <ul className={styles.navSubMenu}>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="./functions.html#practice">1on1の運用・改善</a>
+                </li>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="./functions.html#objectives">目標設定・支援</a>
+                </li>
+                <li className={styles.navSubItem}>
+                  <a className={styles.navSubLink} href="./functions.html#security">セキュリティ</a>
+                </li>
+              </ul>
+            </li>
+            <li className={styles.navItemLogin}>
+              <a className={styles.navLinkLogin} href="login.html">ログイン</a>
+            </li>
+          </ul>
+        </nav>
+
+        <div className={styles.textButton}>
+          <a className={styles.textButtonLogin} href="login.html">ログイン</a>
+        </div>
+
+        <div className={styles.button}>
+          <a className={styles.buttonTrial} href="#demoAndDoc">お問い合わせはこちら</a>
+        </div>
+
+        <div className={styles.hbButton}>
+          <div className={styles.hbButtonBar}></div>
+          <div className={styles.hbButtonBar}></div>
+          <div className={styles.hbButtonBar}></div>
+        </div>
+      </div>
+
+    </header>
+  );
+};
+
+export default AppHeader;