Update top page

version1-workspace · Mar 13, 2024 · ae76520 · ae76520
1 parent 462c7f8
commit ae76520
Show file tree

Hide file tree

Showing 2 changed files with 125 additions and 0 deletions.
diff --git a/frontend/core/src/app/page.module.css b/frontend/core/src/app/page.module.css
@@ -57,3 +57,68 @@ button.entry {
   padding: 16px;
   width: 360px;
 }
+
+.price {
+  margin: 64px 0;
+  width: 100%;
+}
+
+.priceContent {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+}
+
+.planName {
+  font-size: 14px;
+}
+
+.amount {
+  font-size: 24px;
+  padding: 32px 0;
+}
+
+.priceHeader {
+  margin: 32px 0px;
+}
+
+.priceTitle {
+  text-align: center;
+  font-weight: normal;
+}
+
+.priceItem {
+  padding: 32px;
+  margin-right: 32px;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  min-width: 30%;
+}
+
+.priceList {
+  display: flex;
+  justify-content: center;
+  min-width: 70%;
+}
+
+.table {
+  border-top: 1px solid var(--border-color);
+}
+
+.tableRow {
+  padding: 16px 0;
+  text-align: center;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.features {
+}
+
+.featureList {
+  margin-top: 160px;
+}
+
+.feature {
+  padding: 16px 0;
+  margin-bottom: 1px solid var(--border-color);
+}
diff --git a/frontend/core/src/app/page.tsx b/frontend/core/src/app/page.tsx
@@ -62,6 +62,66 @@ export default function Home() {
         image={img3}
         imageAlt="ゴール設定"
       />
+      <section className={styles.price}>
+        <div className={styles.priceHeader}>
+          <h2 className={styles.priceTitle}>料金</h2>
+        </div>
+        <div className={styles.priceContent}>
+          <div className={styles.features}>
+              <div className={styles.featureList}>
+                <div className={styles.feature}>目標設定・計画・タスク管理 UI</div>
+                <div className={styles.feature}>タスクのグラフ化</div>
+                <div className={styles.feature}>リマインダー</div>
+                <div className={styles.feature}>カンバン方式のタスク管理</div>
+                <div className={styles.feature}>ファイルのアップロード制限</div>
+              </div>
+          </div>
+          <div className={styles.priceList}>
+            <div className={styles.priceItem}>
+              <div className={styles.planName}>無料プラン</div>
+              <div className={styles.amount}>無料</div>
+              <div className={styles.table}>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>-</div>
+                <div className={styles.tableRow}>500MB まで</div>
+              </div>
+              <div className={styles.action}>
+                <button>始める</button>
+              </div>
+            </div>
+            <div className={styles.priceItem}>
+              <div className={styles.planName}>有料プラン</div>
+              <div className={styles.amount}>499円 / 月</div>
+              <div className={styles.table}>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>2GBまで</div>
+              </div>
+              <div className={styles.action}>
+                <button>始める</button>
+              </div>
+            </div>
+            <div className={styles.priceItem}>
+              <div className={styles.planName}>プレミアムプラン</div>
+              <div className={styles.amount}>2, 980円 / 月</div>
+              <div className={styles.table}>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>◯</div>
+                <div className={styles.tableRow}>無制限</div>
+              </div>
+              <div className={styles.action}>
+                <button>始める</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
       <Footer />
     </main>
   );