Skip to content

Commit

Permalink
Merge pull request #23 from kohta9521/develop
Browse files Browse the repository at this point in the history 
add news section and about map stying
  • Loading branch information
@kohta9521
kohta9521 authored Nov 21, 2023
2 parents d5ccffc + c65781b commit e150538
Show file tree
Hide file tree
Showing 7 changed files with 340 additions and 24 deletions.
11 changes: 10 additions & 1 deletion src/components/organisms/About.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,16 @@ const About = () => {
<br />
あなたも地図を作るメンバーになりませんか？<br />
</p>
{/* TODO: 詳しくみるボタンの追加 */}
<Link
className={styles.link}
href='/about'
>
<span className={styles.arrow}>
{/* <MdKeyboardArrowRight className={styles.icon} /> */}
→
</span>
詳しく見る
</Link>
</div>
<div className={styles.rightBox}>
<Image
Expand Down
45 changes: 43 additions & 2 deletions src/components/organisms/News.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,58 @@
import React from 'react'

import Link from 'next/link'

// scss import
import styles from './styles/News.module.scss'

// components import

// react icons import
import { FaArrowRightLong } from "react-icons/fa6";


const News = () => {
return (
<div className={styles.news}>
<div className={styles.container}>
this space is rankig
<p className={styles.subTitle}>ニュース</p>
<h1 className={styles.title}>NEWS</h1>
<div className={styles.newsBox}>
<ul>
<li>
<p className={styles.data}>2022.11.2</p>
<p className={styles.tag}>お知らせ</p>
<h3 className={styles.newsTitle}>サービスの初回リリースが行われました!</h3>
<Link href={"/"} className={styles.arrow}>
<FaArrowRightLong />
</Link>
</li>
<li>
<p className={styles.data}>2022.11.2</p>
<p className={styles.tag}>お知らせ</p>
<h3 className={styles.newsTitle}>サービスの初回リリースが行われました!</h3>
<Link href={"/"} className={styles.arrow}>
<FaArrowRightLong />
</Link>
</li>
<li>
<p className={styles.data}>2022.11.2</p>
<p className={styles.tag}>お知らせ</p>
<h3 className={styles.newsTitle}>サービスの初回リリースが行われました!</h3>
<Link href={"/"} className={styles.arrow}>
<FaArrowRightLong />
</Link>
</li>
<li>
<p className={styles.data}>2022.11.2</p>
<p className={styles.tag}>お知らせ</p>
<h3 className={styles.newsTitle}>サービスの初回リリースが行われました!</h3>
<Link href={"/"} className={styles.arrow}>
<FaArrowRightLong />
</Link>
</li>
<Link className={styles.moreButton} href={"/pressrelease"}>もっと詳しく見る</Link>
</ul>
</div>
</div>
</div>
)
Expand Down
12 changes: 10 additions & 2 deletions src/components/organisms/Service.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className={styles.service}>
Expand Down Expand Up @@ -36,7 +40,7 @@ const Service = () => {
<div className={styles.rightBox}>
<p className={styles.subTitle}>個性溢れる地図？</p>
<h1 className={styles.title}>MAP</h1>
<p className={styles.maintext}>
<p className={styles.mainText}>
会社やコミュニティだけのクローズドな地図をお作りいただけます。<br />
<br />
地図には各店舗の特徴や地図を作る仲間が投稿したレビューを掲載。<br />
Expand All @@ -49,7 +53,11 @@ const Service = () => {
className={styles.link}
href='/map'
>
VIEW MORE
<span className={styles.arrow}>
{/* <MdKeyboardArrowRight className={styles.icon} /> */}
→
</span>
詳しく見る
</Link>
</div>
</div>
Expand Down
44 changes: 31 additions & 13 deletions src/components/organisms/styles/About.module.scss
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
.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;
height: 100%;
margin: 0 auto;
.box {
position: absolute;
bottom: 0;
bottom: 200px;
width: 80%;
min-height: 600px;
box-sizing: border-box;
Expand All @@ -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;
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/components/organisms/styles/Hero.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
183 changes: 183 additions & 0 deletions src/components/organisms/styles/News.module.scss
View file
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
}
}
}
Loading

0 comments on commit e150538

Please sign in to comment.