+
+
+
+
-
+ Turbo でより鮮明なゴール設定
-
- 理想の生活は何で満たす？大切な時間をときめくタスクでみたそう。
-
- Turbo はそんなあなたの希望を満たすアプリです。
-
+
+
+
+ + 確実に夢をかなえる TODO アプリ +
+
+
+ + Turboは確実に夢を叶えたいあなたへのタスク管理アプリです。 +
++ 目標を鮮明にイメージしてゴールへの歩みを加速させましょう。 +
+
+
+
+
+
+
+
);
diff --git a/frontend/core/src/assets/features-dashboard.png b/frontend/core/src/assets/features-dashboard.png
new file mode 100644
index 0000000..87cd30a
Binary files /dev/null and b/frontend/core/src/assets/features-dashboard.png differ
diff --git a/frontend/core/src/assets/features-milestone-2.png b/frontend/core/src/assets/features-milestone-2.png
new file mode 100644
index 0000000..44c8427
Binary files /dev/null and b/frontend/core/src/assets/features-milestone-2.png differ
diff --git a/frontend/core/src/assets/features-milestone.png b/frontend/core/src/assets/features-milestone.png
new file mode 100644
index 0000000..77a8599
Binary files /dev/null and b/frontend/core/src/assets/features-milestone.png differ
diff --git a/frontend/core/src/assets/features-new-project.png b/frontend/core/src/assets/features-new-project.png
new file mode 100644
index 0000000..0da1b8b
Binary files /dev/null and b/frontend/core/src/assets/features-new-project.png differ
diff --git a/frontend/core/src/assets/features-ui.png b/frontend/core/src/assets/features-ui.png
new file mode 100644
index 0000000..217e2be
Binary files /dev/null and b/frontend/core/src/assets/features-ui.png differ
diff --git a/frontend/core/src/assets/hero-earth.svg b/frontend/core/src/assets/hero-earth.svg
new file mode 100644
index 0000000..79f4f66
--- /dev/null
+++ b/frontend/core/src/assets/hero-earth.svg
@@ -0,0 +1,29 @@
+
diff --git a/frontend/core/src/assets/hero-moon.svg b/frontend/core/src/assets/hero-moon.svg
new file mode 100644
index 0000000..b79fffc
--- /dev/null
+++ b/frontend/core/src/assets/hero-moon.svg
@@ -0,0 +1,9 @@
+
diff --git a/frontend/core/src/assets/hero-space.svg b/frontend/core/src/assets/hero-space.svg
new file mode 100644
index 0000000..485e1ba
--- /dev/null
+++ b/frontend/core/src/assets/hero-space.svg
@@ -0,0 +1,160 @@
+
diff --git a/frontend/core/src/assets/logo.png b/frontend/core/src/assets/logo.png
new file mode 100644
index 0000000..1156215
Binary files /dev/null and b/frontend/core/src/assets/logo.png differ
diff --git a/frontend/core/src/assets/review-1.jpg b/frontend/core/src/assets/review-1.jpg
new file mode 100644
index 0000000..fb92652
Binary files /dev/null and b/frontend/core/src/assets/review-1.jpg differ
diff --git a/frontend/core/src/assets/review-2.jpg b/frontend/core/src/assets/review-2.jpg
new file mode 100644
index 0000000..402ac41
Binary files /dev/null and b/frontend/core/src/assets/review-2.jpg differ
diff --git a/frontend/core/src/assets/review-3.jpg b/frontend/core/src/assets/review-3.jpg
new file mode 100644
index 0000000..53023f8
Binary files /dev/null and b/frontend/core/src/assets/review-3.jpg differ
diff --git a/frontend/core/src/assets/stylesheets/mixin.scss b/frontend/core/src/assets/stylesheets/mixin.scss
new file mode 100644
index 0000000..e9620c5
--- /dev/null
+++ b/frontend/core/src/assets/stylesheets/mixin.scss
@@ -0,0 +1,27 @@
+@use 'variable' as v;
+
+// Small devices
+@mixin sm {
+ @media (max-width: #{v.$screen-sm-min}) {
+ @content
+ }
+}
+
+// Medium devices
+@mixin md {
+ @media (max-width: #{v.$screen-md-min}) {
+ @content
+ }}
+
+// Large devices
+@mixin lg {
+ @media (max-width: #{v.$screen-lg-min}) {
+ @content
+ }}
+
+// Extra large devices
+@mixin xl {
+ @media (max-width: #{v.$screen-xl-min}) {
+ @content
+ }}
+
diff --git a/frontend/core/src/assets/stylesheets/variable.scss b/frontend/core/src/assets/stylesheets/variable.scss
new file mode 100644
index 0000000..7f37436
--- /dev/null
+++ b/frontend/core/src/assets/stylesheets/variable.scss
@@ -0,0 +1,4 @@
+$screen-sm-min: 576px;
+$screen-md-min: 768px;
+$screen-lg-min: 992px;
+$screen-xl-min: 1200px;
diff --git a/frontend/core/src/components/section/index.module.css b/frontend/core/src/components/section/index.module.css
deleted file mode 100644
index 1ea163c..0000000
--- a/frontend/core/src/components/section/index.module.css
+++ /dev/null
@@ -1,26 +0,0 @@
-.section {
- width: 100%;
-}
-
-.content {
- margin: auto;
- max-width: 1920px;
- display: flex;
- margin-bottom: 128px;
- margin-top: 32px;
- width: 100%;
- justify-content: space-evenly;
-}
-
-.sectionTitle {
- font-size: 32px;
- margin-bottom: 16px;
-}
-
-.sectionContent {
- font-size: 20px;
- line-height: 2.5;
- margin: 32px;
- padding: 32px;
- color: var(--font-color-weak);
-}
diff --git a/frontend/core/src/components/section/index.module.scss b/frontend/core/src/components/section/index.module.scss
new file mode 100644
index 0000000..fc7fa5b
--- /dev/null
+++ b/frontend/core/src/components/section/index.module.scss
@@ -0,0 +1,107 @@
+@use '@/assets/stylesheets/mixin' as m;
+
+.section {
+ width: 100%;
+}
+
+.content {
+ margin: auto;
+ max-width: 1920px;
+ margin-bottom: 128px;
+ margin-top: 32px;
+ width: 100%;
+ justify-content: space-evenly;
+
+ @include m.lg {
+ margin-bottom: 64px;
+ }
+}
+
+.sectionTitle {
+ font-size: 18px;
+ margin-bottom: 16px;
+ text-align: center;
+}
+
+.description {
+ font-size: 20px;
+ line-height: 2.5;
+ margin: 32px auto;
+ width: 480px;
+ color: var(--font-color-dark);
+
+ @include m.lg {
+ width: 100%;
+ }
+
+ @include m.sm {
+ font-size: 16px;
+ line-height: 1.8;
+ }
+}
+
+.descriptionText {
+ @include m.lg {
+ width: 60%;
+ margin: auto;
+ }
+
+ @include m.sm {
+ width: 100%;
+ }
+}
+
+.body {
+ padding: 128px 32px;
+
+ @include m.lg {
+ margin-bottom: 64px 16px;
+ }
+}
+
+.segment {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 128px;
+
+ @include m.lg {
+ flex-wrap: wrap;
+ margin-bottom: 64px;
+ }
+}
+
+.left {
+ flex: 1;
+ color: var(--color-font);
+ padding: 64px;
+
+ @include m.lg {
+ min-width: 100%;
+ padding: 0;
+ margin-bottom: 64px;
+ }
+}
+
+.right {
+ position: relative;
+ flex: 1;
+ width: 900px;
+ height: 566px;
+
+ @include m.lg {
+ min-width: 100%;
+ min-width: 300px;
+ }
+
+ @include m.sm {
+ height: 188px;
+ }
+}
+
+.image {
+ display: block;
+ border-radius: 8px;
+ box-shadow: 1px 1px 4px 8px var(--shadow-color);
+}
+
diff --git a/frontend/core/src/components/section/index.tsx b/frontend/core/src/components/section/index.tsx
index ad0eb3b..7c50205 100644
--- a/frontend/core/src/components/section/index.tsx
+++ b/frontend/core/src/components/section/index.tsx
@@ -1,40 +1,51 @@
-import styles from "./index.module.css";
+import styles from "./index.module.scss";
import Image, { StaticImageData } from "next/image";
-interface Props {
- title: string;
+interface Element {
description: string[];
image: StaticImageData;
- imageAlt: string;
+ alt: string;
}
-export default function Section({
- title,
- description,
- image,
- imageAlt,
-}: Props) {
+interface Props {
+ title: string;
+ elements: Element[];
+}
+
+export default function Section({ title, elements }: Props) {
return (
+
+
+
+
+
+
+
+
+ 料金
++ ※ + 学習用アプリなので、ダミーの料金表です。プランに関する機能は未実装です。 +
+
+
+
+
+
+
+
+
+
+
+
+
+ 複数プロジェクト
+
+
+ ダッシュボード
+
+ テーマ変更
+
+ リマインダー
+
+ Web API
+
+
+
+
+
+
+ フリープラン
+ 無料
+
+
+
+
+ 複数プロジェクト
+3つまで
+
+
+ ダッシュボード
+◯
+
+
+ テーマ変更
+◯
+
+
+ リマインダー
+-
+
+
+ Web API
+-
+
+
+
+
+
+
+ スタートプラン
+
+ 980円/ 月
+
+
+
+
+
+ 複数プロジェクト
+無制限
+
+
+ ダッシュボード
+◯
+
+
+ テーマ変更
+◯
+
+
+ リマインダー
+◯
+
+
+ Web API
+-
+
+
+
+
+
+
+ プレミアムプラン
+
+ 1,980円/ 月
+
+
+
+
+
+ 複数プロジェクト
+無制限
+
+
+ ダッシュボード
+◯
+
+
+ テーマ変更
+◯
+
+
+ リマインダー
+◯
+
+
+ Web API
+◯
+
+
-
-
-
-
+
+
+ ユーザーの声
+
+
+
+
+
+
+
+
+
+
+ Roberto Dixon
+ソフトウェアエンジニア
+
+
+
+ Turbo は自分の目標を管理するのに最適なツールです。
+
+
+ わかりやすい UI で登録したその日からすぐに活躍してくれました。
+
+
+
+
+
+
+
+
+ Carolyn Obrien
+英語教師
+
+
+
+ Turbo
+ で自分の仕事とプライベートをうまくバランスできるようになりました。
+
+
+ 仕事もプライベートもお互いに干渉するものですが、Turbo
+ でそれらをまとめて管理できます。
+
+
+
+
+
+
+
+
+ Edward Hopkins
+写真家
+
+
+
+ Turboのリマインド機能で常に長期の計画を意識しながら自分のプロジェクトを進めることができます。
+
+
+ 長期の計画でも迷子にならずに進むのに最適なツールです。
+
-
+
+
+
-
+
);
diff --git a/frontend/core/src/components/shared/button/index.module.css b/frontend/core/src/components/shared/button/index.module.css
index c84337c..fdf0298 100644
--- a/frontend/core/src/components/shared/button/index.module.css
+++ b/frontend/core/src/components/shared/button/index.module.css
@@ -23,4 +23,6 @@
}
.secondary {
+ background: var(--secondary-color);
+ color: var(--font-color-light);
}
diff --git a/frontend/core/src/components/shared/footer/index.module.css b/frontend/core/src/components/shared/footer/index.module.scss
similarity index 72%
rename from frontend/core/src/components/shared/footer/index.module.css
rename to frontend/core/src/components/shared/footer/index.module.scss
index eced692..788d8f1 100644
--- a/frontend/core/src/components/shared/footer/index.module.css
+++ b/frontend/core/src/components/shared/footer/index.module.scss
@@ -1,3 +1,5 @@
+@use '@/assets/stylesheets/mixin' as m;
+
.footer {
background: var(--bg-color-light-2);
width: 100%;
@@ -12,8 +14,12 @@
width: 100%;
background: #f9f9f9;
-}
+ @include m.lg {
+ flex-wrap: wrap;
+ padding: 16px;
+ }
+}
.logo {
font-size: 24px;
@@ -25,14 +31,25 @@
.menu {
display: flex;
margin-right: 16px;
+
+ @include m.lg {
+ flex-wrap: wrap;
+ }
}
.menuItem {
margin-right: 16px;
+ @include m.lg {
+ margin-bottom: 64px;
+ }
}
.left {
margin-right: auto;
+
+ @include m.lg {
+ margin-bottom: 64px;
+ }
}
.right {
diff --git a/frontend/core/src/components/shared/footer/index.tsx b/frontend/core/src/components/shared/footer/index.tsx
index b57cacf..e436608 100644
--- a/frontend/core/src/components/shared/footer/index.tsx
+++ b/frontend/core/src/components/shared/footer/index.tsx
@@ -1,4 +1,4 @@
-import styles from "./index.module.css";
+import styles from "./index.module.scss";
import Link from "next/link";
const footerMenus = [
diff --git a/frontend/core/src/components/shared/header/public/index.module.css b/frontend/core/src/components/shared/header/public/index.module.css
deleted file mode 100644
index e84ddb9..0000000
--- a/frontend/core/src/components/shared/header/public/index.module.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.header {
- display: flex;
- justify-content: space-between;
- width: 100%;
- padding: 16px;
-
- position: absolute;
- top: 0px;
-}
-
-.logo {
- display: flex;
-}
-
-.logo a {
- color: var(--font-color);
- text-decoration: none;
-}
-
-.menu {
- display: flex;
- margin-right: 16px;
-}
-
-.menuItem {
- margin-right: 16px;
-}
-
-.right {
- display: flex;
- align-items: center;
-}
diff --git a/frontend/core/src/components/shared/header/public/index.module.scss b/frontend/core/src/components/shared/header/public/index.module.scss
new file mode 100644
index 0000000..07c5a27
--- /dev/null
+++ b/frontend/core/src/components/shared/header/public/index.module.scss
@@ -0,0 +1,64 @@
+@use '@/assets/stylesheets/mixin' as m;
+
+.header {
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 16px;
+
+ position: absolute;
+ top: 0px;
+ color: white;
+
+ z-index: var(--z-index-public-header);
+}
+
+.logo {
+ display: flex;
+}
+
+.logo a {
+ color: var(--font-color);
+ text-decoration: none;
+}
+
+.logoContent {
+ display: flex;
+ align-items: center;
+}
+
+.menu {
+ display: flex;
+ margin-right: 16px;
+
+ @include m.lg {
+ display: none;
+ }
+}
+
+.menuItem {
+ margin-right: 16px;
+}
+
+.right {
+ display: flex;
+ align-items: center;
+}
+
+.actions {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ min-width: 240px;
+
+ @include m.lg {
+ justify-content: flex-end;
+ }
+}
+
+.signup {
+ @include m.lg {
+ display: none;
+ }
+}
+
diff --git a/frontend/core/src/components/shared/header/public/index.tsx b/frontend/core/src/components/shared/header/public/index.tsx
index 41aea67..d33299c 100644
--- a/frontend/core/src/components/shared/header/public/index.tsx
+++ b/frontend/core/src/components/shared/header/public/index.tsx
@@ -1,26 +1,33 @@
-import styles from "./index.module.css";
+import styles from "./index.module.scss";
import Link from "next/link";
import Button from "@/components/shared/button";
+import Image from "next/image";
+import logo from "@/assets/logo.png";
export default function Header() {
return (
);
{title}
-
- {description.map((line, index) =>
- index === description.length - 1 ? (
- line
- ) : (
- <>
- {line}
-
- - ), - )} +
- - - ), - )} +
+ {elements.map((ele, index) => {
+ return (
+
+
+ );
+ })}
+
+
+ {ele.description.map((line) => {
+ return (
+
+ + {line} +
+ ); + })} +
+
+
-
-
Turbo
+
+
Turbo
+- Turbo について
- ドキュメント -
- - サインイン -
+
+
+
+
+
+
+