Merge pull request #24 from kohta9521/develop

add ranking pc styling complete
kohta9521 · Nov 21, 2023 · da50573 · da50573
2 parents e150538 + 5a8b668
commit da50573
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 2 deletions.
diff --git a/src/components/organisms/Ranking.tsx b/src/components/organisms/Ranking.tsx
@@ -3,14 +3,57 @@ import React from 'react'
 
 // scss import
 import styles from './styles/Ranking.module.scss'
+import Image from 'next/image'
+import Link from 'next/link'
 
 // components import
 
 const Ranking = () => {
     return (
         <div className={styles.ranking}>
             <div className={styles.container}>
-                this area is ranking
+                <div className={styles.titleBox}>
+                    <p className={styles.subTitle}>あなたのオスススメが１位に？</p>
+                    <h1 className={styles.title}>RANKING</h1>
+                </div>
+                <p className={styles.mainText}>
+                    おなたのおすすめの店がランキングに乗るかもしれません。<br/>
+                    <br/>
+                    ここのお店いいなと思ったらとりあえず「ここごはん」に登録しましょう。<br/>
+                    朝ごはん・昼ごはん・晩御飯、それともちょっとおしゃれなバー？<br/>
+                    <br/>
+                    あなたの投稿が誰かの新しい選択肢を生み出します。<br/>
+                </p>
+                <div className={styles.flexBox}>
+                    <div className={styles.box}>
+                        <div className={styles.image}>
+                        </div>
+                        <p className={styles.boxTitle}>会社ないでグルメ大使に？</p>
+                    </div>
+                    <div className={styles.box}>
+                        <div className={styles.image}>
+                        </div>
+                        <p className={styles.boxTitle}>新しい繋がりが？</p>
+                    </div>
+                    <div className={styles.box}>
+                        <div className={styles.image}>
+                        </div>
+                        <p className={styles.boxTitle}>気になるあの人の好みが？</p>
+                    </div>
+                </div>
+                <div className={styles.bottomBox}>
+                    <Link
+                        className={styles.link}
+                        href='/ranking'
+                    >
+                        <span className={styles.arrow}>
+                            {/* <MdKeyboardArrowRight className={styles.icon} /> */}
+                            →
+                        </span>
+                        詳しく見る
+                    </Link>
+                </div>
+
             </div>
         </div>
     )

diff --git a/src/components/organisms/styles/Ranking.module.scss b/src/components/organisms/styles/Ranking.module.scss
@@ -0,0 +1,102 @@
+.ranking {
+    width: 100%;
+    height: 1100px;
+    .container {
+        width: 70%;
+        max-width: 1400px;
+        margin: 0 auto;
+        padding: 200px 0;
+        box-sizing: border-box;
+        .titleBox {
+            width: 100%;
+            margin: 0 auto;
+            text-align: center;
+            .subTitle {
+                color: var(--main-red-color);
+                font-size: 16px;
+                font-weight: 700;
+                display: block;
+            }
+            .title {
+                font-size: 70px;
+                font-weight: 700;
+                color: var(--main-black-color);
+                margin-bottom: 50px;
+            }
+        }
+        .mainText {
+            text-align: center;
+            display: block;
+            font-size: 20px;
+            line-height: 35px;
+            color: var(--main-black-color);
+            margin-bottom: 40px;
+        }
+        .flexBox {
+            width: 100%;
+            display: flex;
+            padding-top: 40px;
+            justify-content: space-between;
+            .box {
+                width: 30%;
+                height: 370px;
+                text-align: center;
+                .image {
+                    width: 100%;
+                    height: 250px;
+                    background-color: gray;
+                    margin-bottom: 20px;
+                }
+                .boxTitle {
+                    color: var(--main-red-color);
+                    font-size: 16px;
+                    font-weight: 700;
+                    display: block;
+                }
+            }
+        }
+        .bottomBox {
+            width: 100%;
+            text-align: center;
+        }
+        .link {
+            display: block;
+            margin: 0 auto;
+            width: 170px;
+            height: 60px;
+            text-decoration: none;
+            font-size: 16px;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            .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;
+                }
+            }
+        }
+    }
+}
diff --git a/src/components/organisms/styles/Service.module.scss b/src/components/organisms/styles/Service.module.scss
@@ -1,6 +1,6 @@
 .service {
     width: 100%;
-    height: 1000px;
+    height: 800px;
     .container {
         width: 70%;
         max-width: 1400px;