diff --git a/src/components/organisms/About.tsx b/src/components/organisms/About.tsx index 90cbc99..1dc0c8b 100644 --- a/src/components/organisms/About.tsx +++ b/src/components/organisms/About.tsx @@ -29,7 +29,16 @@ const About = () => {
あなたも地図を作るメンバーになりませんか？

- {/* TODO: 詳しくみるボタンの追加 */} + + + {/* */} + → + + 詳しく見る +
{ return (
- this space is rankig +

ニュース

+

NEWS

+
+
    +
  • +

    2022.11.2

    +

    お知らせ

    +

    サービスの初回リリースが行われました!

    + + + +
    • +
  • +

    2022.11.2

    +

    お知らせ

    +

    サービスの初回リリースが行われました!

    + + + +
    • +
  • +

    2022.11.2

    +

    お知らせ

    +

    サービスの初回リリースが行われました!

    + + + +
    • +
  • +

    2022.11.2

    +

    お知らせ

    +

    サービスの初回リリースが行われました!

    + + + +
    • + もっと詳しく見る +
+
) diff --git a/src/components/organisms/Service.tsx b/src/components/organisms/Service.tsx index 5737f7f..0074e88 100644 --- a/src/components/organisms/Service.tsx +++ b/src/components/organisms/Service.tsx @@ -9,6 +9,10 @@ import styles from './styles/Service.module.scss' // components import import SectionTitle from '../atoms/SectionTitle' +// react icons import +import { MdKeyboardArrowRight } from "react-icons/md"; + + const Service = () => { return (
@@ -36,7 +40,7 @@ const Service = () => {

個性溢れる地図？

MAP

-

+

会社やコミュニティだけのクローズドな地図をお作りいただけます。

地図には各店舗の特徴や地図を作る仲間が投稿したレビューを掲載。
@@ -49,7 +53,11 @@ const Service = () => { className={styles.link} href='/map' > - VIEW MORE + + {/* */} + → + + 詳しく見る

diff --git a/src/components/organisms/styles/About.module.scss b/src/components/organisms/styles/About.module.scss index 679863b..65b873e 100644 --- a/src/components/organisms/styles/About.module.scss +++ b/src/components/organisms/styles/About.module.scss @@ -1,12 +1,12 @@ .about { position: relative; width: 100%; - height: 1100px; + height: 1400px; margin-top: -90px; padding-bottom: 100px; + box-sizing: border-box; border-radius: 100px 100px 0 0; background-color: var(--main-red-color); - z-index: -1; .container { width: 70%; max-width: 1900px; @@ -14,7 +14,7 @@ margin: 0 auto; .box { position: absolute; - bottom: 0; + bottom: 200px; width: 80%; min-height: 600px; box-sizing: border-box; @@ -33,31 +33,49 @@ } .enTitle { font-size: 70px; - margin-top: 30px; font-weight: 700; color: var(--main-white-color); } } .leftBox { width: 50%; - border: 1px solid white; .text { font-size: 20px; line-height: 37px; color: var(--main-white-color); + margin-bottom: 30px; } - .moreButton { - display: block; - margin-top: 60px; + .link { + width: 170px; + height: 60px; + text-decoration: none; + font-size: 16px; + font-weight: 700; display: flex; align-items: center; + color: var(--main-white-color); .arrow { display: block; - content: ''; - width: 50px; - height: 50px; - border-radius: 50px; - background-color: var(--main-white-color); + width: 40px; + height: 40px; + margin-right: 20px; + border-radius: 30px; + text-align: center; + border: 1px solid var(--main-white-color); + // text + font-size:20px; + line-height: 35px; + font-weight: 700; + color: var(--main-white-color); + } + &:hover { + transform: all 0.5s ease-in-out; + .arrow{ + width: 50px; + height: 50px; + transition: all 0.3s ease-in-out; + line-height: 45px; + } } } } diff --git a/src/components/organisms/styles/Hero.module.scss b/src/components/organisms/styles/Hero.module.scss index f825d1d..613bd8e 100644 --- a/src/components/organisms/styles/Hero.module.scss +++ b/src/components/organisms/styles/Hero.module.scss @@ -46,6 +46,7 @@ text-align: center; border: 0.1px solid var(--main-black-color); background-color: var(--main-white-color); + z-index: 2; .arrow { margin: 0; padding: 0; diff --git a/src/components/organisms/styles/News.module.scss b/src/components/organisms/styles/News.module.scss index e69de29..8abd9fd 100644 --- a/src/components/organisms/styles/News.module.scss +++ b/src/components/organisms/styles/News.module.scss @@ -0,0 +1,183 @@ +.news { + width: 100%; + height: 1000px; + padding: 150px 0px; + .container { + width: 80%; + height: 100%; + margin: 0 auto; + background-color: var(--main-red-color); + border-radius: 20px; + padding: 100px 100px; + .subTitle { + display: block; + font-size: 16px; + line-height: 27px; + margin: 0; + font-weight: 700; + color: white; + font-family: 'Noto Sans JP', sans-serif; + } + .title { + display: block; + color: white; + font-size: 70px; + font-weight: 600; + line-height: 70px; + margin: 0; + margin-bottom: 30px; + font-family: 'Noto Sans', sans-serif; + } + // news + .newsBox { + width: 100%; + display: block; + position: relative; + ul { + width: 70%; + position: absolute; + right: 0; + li:nth-child(1) { + border-top: 0.5px solid white; + } + li { + display: flex; + align-items: center; + right: 0; + width: 100%; + height: 80px; + border-bottom: 0.5px solid white; + .data { + display: block; + font-size: 14px; + margin: 0 30px 0 60px; + color: white; + } + .tag { + display: block; + padding: 5px 30px; + margin: 0 50px 0 0px; + border: 1px solid white; + color: white; + border-radius: 10px; + } + .newsTitle { + font-size: 18px; + color: white; + } + .arrow { + position: absolute; + right: 20px; + font-size: 20px; + color: white; + } + } + .moreButton { + display: block; + position: absolute; + right: 0; + margin: 50px 0; + width: 200px; + text-align: center; + padding: 10px 20px; + border: 1px solid white; + color: white; + border-radius: 10px; + + } + } + } + } +} + +@media screen and (max-width: 1024px) { + .news { + width: 100%; + height: 700px; + padding: 10px 0px; + .container { + width: 90%; + height: 100%; + margin: 0 auto; + background-color: #0051CB; + border-radius: 20px; + padding: 20px 20px; + .subTitle { + display: block; + font-size: 14px; + line-height: 27px; + margin: 0; + font-weight: 700; + color: white; + font-family: 'Noto Sans JP', sans-serif; + } + .title { + display: block; + color: white; + font-size: 60px; + font-weight: 600; + line-height: 70px; + margin: 0; + margin-bottom: 30px; + font-family: 'Noto Sans', sans-serif; + } + // news + .newsBox { + width: 100%; + display: block; + ul { + width: 100%; + li:nth-child(1) { + border-top: 0.5px solid white; + } + li { + display: flex; + align-items: center; + right: 0; + width: 100%; + height: 90px; + border-bottom: 0.5px solid white; + .data { + display: block; + font-size: 12px; + margin: 0 5px 0 10px; + color: white; + } + .tag { + display: block; + padding: 3px 3px; + margin: 0 10px 0 0px; + font-size: 12px; + border: 1px solid white; + color: white; + border-radius: 10px; + } + .newsTitle { + font-size: 14px; + color: white; + } + .arrow { + position: absolute; + right: 20px; + font-size: 20px; + color: white; + } + } + .moreButton { + display: block; + position: absolute; + right: 0; + margin: 40px 0; + width: 200px; + text-align: center; + font-size: 13px; + padding: 10px 17px; + border: 1px solid white; + color: white; + border-radius: 10px; + } + } + } + } + } +} \ No newline at end of file diff --git a/src/components/organisms/styles/Service.module.scss b/src/components/organisms/styles/Service.module.scss index b86b9c9..e2d466e 100644 --- a/src/components/organisms/styles/Service.module.scss +++ b/src/components/organisms/styles/Service.module.scss @@ -12,29 +12,85 @@ justify-content: space-between; align-items: center; .leftBox { + position: relative; width: 600px; height: 450px; + z-index: 1; + border-radius: 10px; .image { - width: 100%; height: 100%; - object-fit: contain; + border-radius: 10px; + } + &::after { + position: absolute; + top: 40px; + right: 40px; + content: ''; + width: 600px; + height: 450px; + border-radius: 10px; + background-color: var(--main-red-color); + z-index: -1; } } .rightBox { text-align: right; .subTitle { - font-size: 20px; color: var(--main-red-color); + font-size: 16px; + font-weight: 700; + display: block; } .title { - font-size: 90px; + font-size: 70px; + font-weight: 700; color: var(--main-black-color); + margin-bottom: 30px; } - .maintext { - + .mainText { + display: block; + font-size: 20px; + line-height: 35px; + color: var(--main-black-color); + margin-bottom: 40px; } .link { + width: 170px; + height: 60px; text-decoration: none; + font-size: 16px; + font-weight: 700; + display: flex; + align-items: center; + margin-left: 700px; + .arrow { + display: block; + width: 40px; + height: 40px; + margin-right: 20px; + border-radius: 30px; + text-align: center; + background-color: var(--main-red-color); + // text + font-size:20px; + line-height: 35px; + font-weight: 700; + color: var(--main-white-color); + font-size: 25px; + height: 40px; + line-height: 35px; + font-weight: 700; + color: var(--main-white-color); + } + &:hover { + transform: all 0.5s ease-in-out; + .arrow{ + width: 50px; + height: 50px; + transition: all 0.3s ease-in-out; + line-height: 45px; + } + } } } }