parent
30cb365e9e
commit
ef2e71fe22
27 changed files with 426 additions and 57 deletions
|
After Width: | Height: | Size: 924 B |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 234 KiB |
|
After Width: | Height: | Size: 183 KiB |
|
After Width: | Height: | Size: 7.8 MiB |
@ -1,2 +1,3 @@ |
|||||||
declare module '*.jpg'; |
declare module '*.jpg'; |
||||||
declare module '*.jpeg'; |
declare module '*.jpeg'; |
||||||
|
declare module '*.png'; |
||||||
@ -0,0 +1,29 @@ |
|||||||
|
.app-download{ |
||||||
|
width: 100%; |
||||||
|
margin: 0px auto; |
||||||
|
padding: 30px 0px; |
||||||
|
color: white; |
||||||
|
h1{ |
||||||
|
font-family: numeralBold; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px) { |
||||||
|
.app-download{ |
||||||
|
max-width: 1250px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.app-download{ |
||||||
|
max-width: 1250px; |
||||||
|
h1{ |
||||||
|
font-size: calc(100vw / 40); |
||||||
|
line-height: 2em; |
||||||
|
} |
||||||
|
img{ |
||||||
|
height: 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
@ -0,0 +1,12 @@ |
|||||||
|
import React from 'react' |
||||||
|
import bazar from '../../../assets/images/bazar.png'; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function AppDownload() { |
||||||
|
return ( |
||||||
|
<section className="app-download d-flex justify-content-between align-items-end"> |
||||||
|
<h1>اینجا جایگاه یک <br/> متن ویژه است که باید در این <br/> قسمت قرار بگیرد.</h1> |
||||||
|
<img src={bazar} /> |
||||||
|
</section> |
||||||
|
) |
||||||
|
} |
||||||
@ -0,0 +1,82 @@ |
|||||||
|
.footer{ |
||||||
|
width: 100%; |
||||||
|
font-family: numeralLight; |
||||||
|
background-color: #1a1a1a; |
||||||
|
&__container{ |
||||||
|
width: 100%; |
||||||
|
margin : 0px auto; |
||||||
|
p{ |
||||||
|
margin: 0px; |
||||||
|
color: #A2A2A2; |
||||||
|
} |
||||||
|
a{ |
||||||
|
color: #A2A2A2; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px){ |
||||||
|
.footer{ |
||||||
|
&__container{ |
||||||
|
max-width: 1250px; |
||||||
|
} |
||||||
|
li{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: 14px; |
||||||
|
} |
||||||
|
ul{ |
||||||
|
li{ |
||||||
|
padding: 6px 0px 6px 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px){ |
||||||
|
.footer{ |
||||||
|
&__container{ |
||||||
|
max-width: 1250px; |
||||||
|
} |
||||||
|
li{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 100); |
||||||
|
} |
||||||
|
ul{ |
||||||
|
li{ |
||||||
|
padding: 6px 0px 6px 60px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media screen and (min-width: 641px) and (max-width: 1007px){ |
||||||
|
.footer{ |
||||||
|
&__container{ |
||||||
|
max-width: 900px; |
||||||
|
} |
||||||
|
li{ |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
p{ |
||||||
|
font-size: calc(100vw / 80); |
||||||
|
} |
||||||
|
ul{ |
||||||
|
li{ |
||||||
|
padding: 6px 0px 6px 30px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 640px){ |
||||||
|
.footer{ |
||||||
|
display : none !important; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
.home-header-item{ |
||||||
|
width: 100%; |
||||||
|
color: white; |
||||||
|
font-family: numeralLight; |
||||||
|
margin: 0px 15px; |
||||||
|
border-radius: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px){ |
||||||
|
.home-header-item{ |
||||||
|
max-width: 1250px; |
||||||
|
height: 400px; |
||||||
|
div{ |
||||||
|
width: 29%; |
||||||
|
h1{ |
||||||
|
font-family: numeralMedium; |
||||||
|
font-size: 24px; |
||||||
|
} |
||||||
|
h2{ |
||||||
|
font-size: 20px; |
||||||
|
} |
||||||
|
p{ |
||||||
|
margin-top: 20px; |
||||||
|
font-size: 16px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.home-header-item{ |
||||||
|
max-width: 1250px; |
||||||
|
height: 400px; |
||||||
|
div{ |
||||||
|
width: 31%; |
||||||
|
h1{ |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 60); |
||||||
|
} |
||||||
|
h2{ |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
font-family: numeralMedium; |
||||||
|
} |
||||||
|
p{ |
||||||
|
margin-top: 20px; |
||||||
|
font-size:calc(100vw / 90); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 640px) and (max-width: 1007px) { |
||||||
|
.home-header-item{ |
||||||
|
max-width: 900px; |
||||||
|
height: 235px; |
||||||
|
div{ |
||||||
|
width: 31%; |
||||||
|
h1{ |
||||||
|
font-family: numeralBold; |
||||||
|
font-size: calc(100vw / 50); |
||||||
|
} |
||||||
|
h2{ |
||||||
|
font-size: calc(100vw / 60); |
||||||
|
} |
||||||
|
p{ |
||||||
|
margin-top: 20px; |
||||||
|
font-size: calc(100vw / 70); |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,25 @@ |
|||||||
|
import React from "react"; |
||||||
|
import './index.scss'; |
||||||
|
|
||||||
|
export default function Item(props: any) { |
||||||
|
const { data } = props; |
||||||
|
const style = { |
||||||
|
background: `url(${data.imageUrl})`, |
||||||
|
backgroundSize : '100% 100%', |
||||||
|
backgroundRepeat : 'no-repeat', |
||||||
|
backgroundAttachment : 'fixed', |
||||||
|
backgroundPosition: '0px 0px', |
||||||
|
}; |
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="home-header-item d-flex justify-content-end align-items-center" |
||||||
|
style={style} |
||||||
|
> |
||||||
|
<div> |
||||||
|
<h1>{data.name}</h1> |
||||||
|
<h2>{data.subTitle}</h2> |
||||||
|
<p>{data.text}</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
.home-header{ |
||||||
|
position: relative; |
||||||
|
width: 100%; |
||||||
|
margin: 0px auto; |
||||||
|
margin-top: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1441px){ |
||||||
|
.home-header{ |
||||||
|
max-width: 1250px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
||||||
|
.home-header{ |
||||||
|
max-width: 1250px; |
||||||
|
} |
||||||
|
} |
||||||
@ -0,0 +1,24 @@ |
|||||||
|
import React from 'react' |
||||||
|
import Carousel from 'react-elastic-carousel'; |
||||||
|
import './index.scss'; |
||||||
|
import Item from './Item/index'; |
||||||
|
|
||||||
|
export default function Header(props : any) { |
||||||
|
const {headerData} = props; |
||||||
|
return ( |
||||||
|
<header className="home-header"> |
||||||
|
<Carousel |
||||||
|
itemsToShow={1} |
||||||
|
isRTL={true} |
||||||
|
enableTilt={false} |
||||||
|
showArrows={true} |
||||||
|
pagination={false} |
||||||
|
> |
||||||
|
{headerData.map((item : Object, i : Number) => ( |
||||||
|
<Item data={item} key={i} /> |
||||||
|
))} |
||||||
|
</Carousel> |
||||||
|
</header> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
@ -1,6 +1,21 @@ |
|||||||
.home { |
.home { |
||||||
background-color: #0f0f0f; |
background: hsla(0, 0%, 31%, 1); |
||||||
|
background: linear-gradient( |
||||||
|
90deg, |
||||||
|
hsla(0, 0%, 31%, 1) 0%, |
||||||
|
hsla(0, 0%, 0%, 1) 100% |
||||||
|
); |
||||||
|
background: -moz-linear-gradient( |
||||||
|
90deg, |
||||||
|
hsla(0, 0%, 31%, 1) 0%, |
||||||
|
hsla(0, 0%, 0%, 1) 100% |
||||||
|
); |
||||||
|
background: -webkit-linear-gradient( |
||||||
|
90deg, |
||||||
|
hsla(0, 0%, 31%, 1) 0%, |
||||||
|
hsla(0, 0%, 0%, 1) 100% |
||||||
|
); |
||||||
width: 100%; |
width: 100%; |
||||||
overflow-x: hidden; |
overflow-x: hidden; |
||||||
padding: 0px 10px; |
padding-top: 60px; |
||||||
} |
} |
||||||
Loading…
Reference in new issue