From a8b5d34d4da855b6a83f68b8e7c38bb2222db395 Mon Sep 17 00:00:00 2001 From: Reza_ashrafi Date: Mon, 14 Jun 2021 16:27:08 +0430 Subject: [PATCH] reza added footer --- src/views/Home/Footer/index.js | 63 +++- src/views/Home/Footer/index.scss | 60 ++++ src/views/Home/HomeSlider/Blog/index.js | 39 +++ src/views/Home/HomeSlider/Blog/index.scss | 55 ++++ src/views/Home/HomeSlider/Header/index.js | 10 +- src/views/Home/HomeSlider/Header/index.scss | 19 +- src/views/Home/HomeSlider/Simple/index.js | 39 +++ src/views/Home/HomeSlider/Simple/index.scss | 54 ++++ src/views/Home/HomeSlider/index.js | 78 +++-- src/views/Home/HomeSlider/index.scss | 2 +- src/views/Home/Membership/Input/index.js | 26 ++ src/views/Home/Membership/index.js | 21 ++ src/views/Home/Membership/index.scss | 62 ++++ src/views/Home/index.js | 306 ++++++++++++++++++-- 14 files changed, 778 insertions(+), 56 deletions(-) create mode 100644 src/views/Home/Footer/index.scss create mode 100644 src/views/Home/HomeSlider/Blog/index.js create mode 100644 src/views/Home/HomeSlider/Blog/index.scss create mode 100644 src/views/Home/HomeSlider/Simple/index.js create mode 100644 src/views/Home/HomeSlider/Simple/index.scss create mode 100644 src/views/Home/Membership/Input/index.js create mode 100644 src/views/Home/Membership/index.js create mode 100644 src/views/Home/Membership/index.scss diff --git a/src/views/Home/Footer/index.js b/src/views/Home/Footer/index.js index 0678826..9c0b713 100644 --- a/src/views/Home/Footer/index.js +++ b/src/views/Home/Footer/index.js @@ -1,7 +1,68 @@ import React, { Component } from "react"; +import './index.scss'; export default class Footer extends Component { render() { - return ; + const {fastAccess} = this.props; + return ( + + ); } } + +Footer.defaultProps = { + fastAccess : [ + {name : 'صفحه اصلی', to : '/'}, + {name : 'فروشگاه', link : '/shop'}, + {name : 'سوالات متداول', link : '/faq'}, + {name : 'درباره ما', link : '/about'}, + {name : 'تماس با ما', link : '/call'}, + ] +}; \ No newline at end of file diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss new file mode 100644 index 0000000..c228cf1 --- /dev/null +++ b/src/views/Home/Footer/index.scss @@ -0,0 +1,60 @@ +.footer{ + width : 100%; + background-color: rgb(80, 80, 80); + &-container{ + width : 100%; + max-width: 1250px; + margin: 0px auto; + &__content{ + flex: 1; + padding-bottom: 40px; + .first{ + color: white; + flex: 1; + h1{ + font-size: calc(100vw / 80); + } + p{ + margin-top: 8px; + font-size: calc(100vw / 130); + max-width: 80%; + } + & strong{ + font-size: calc(100vw / 120); + } + } + .second{ + flex: 0.75; + color: white; + h1{ + font-size: calc(100vw / 80); + } + ul{ + list-style: none; + padding: 0px; + li{ + font-size: calc(100vw / 130); + margin-top: 5px; + } + } + } + &--box{ + margin-left: 15px; + padding-top: 40px; + justify-content: flex-start; + text-align: right; + } + } + } + &__privacy{ + width : 100%; + justify-content: center; + color: white; + background-color: rgba(34, 34, 34, 0.316); + padding: 15px 0px; + p{ + font-size: calc(100vw / 130); + margin-bottom:0px; + } + } +} \ No newline at end of file diff --git a/src/views/Home/HomeSlider/Blog/index.js b/src/views/Home/HomeSlider/Blog/index.js new file mode 100644 index 0000000..b00b72f --- /dev/null +++ b/src/views/Home/HomeSlider/Blog/index.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react'; +import {Link} from 'react-router-dom'; + +import './index.scss'; +export default class Simple extends Component { + render() { + const { height, data } = this.props; + return( +
+ + {data.title} +

{data.title}

+

{data.subTitle}

+ { + data.price ? +
+ { + data.oldPrice ? +
+
+ {data.oldPrice} تومان + +
+ +
: null + } +
{data.price} تومان
+
: +
ناموجود
+ } + +
+ + ); + } +} \ No newline at end of file diff --git a/src/views/Home/HomeSlider/Blog/index.scss b/src/views/Home/HomeSlider/Blog/index.scss new file mode 100644 index 0000000..2e74df1 --- /dev/null +++ b/src/views/Home/HomeSlider/Blog/index.scss @@ -0,0 +1,55 @@ +.slider-blog{ + margin : 10px; + padding: 10px 15px; + box-shadow: 0px 0px 5px rgb(200, 200, 200); + border-radius: 15px; + a{ + width : 100%; + text-decoration: none; + color: green; + &:hover{ + color: green; + } + img{ + width: 100%; + height: 300px; + border-radius: 10px; + } + h1{ + margin-top: 15px; + font-size: calc(100vw / 80); + } + h2{ + margin-top: 10px; + font-size: calc(100vw / 95); + color: #afafaf; + } + } + &__notAvailabe{ + font-size: calc(100vw / 85); + width : 100%; + text-align: center; + color: #afafaf; + margin-top: 15px; + } + &__price{ + font-size: calc(100vw / 85); + width : 100%; + margin-top: 15px; + text-align: center; + &--old{ + color: #afafaf; + position: relative; + margin-left: 10px; + align-items:center; + span{ + position: absolute; + left: 0px; + width : 100%; + height: 2px; + background-color: #afafafa3; + transform: rotate(-14deg); + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/HomeSlider/Header/index.js b/src/views/Home/HomeSlider/Header/index.js index 8a18c6f..8dc914c 100644 --- a/src/views/Home/HomeSlider/Header/index.js +++ b/src/views/Home/HomeSlider/Header/index.js @@ -10,15 +10,13 @@ export default class Header extends Component { style={{ minWidth: `${data.width}`, height: height, + background: `url(${data.image})`, + backgroundRepeat: 'no-repeat', + backgroundSize: 'cover' }} className="slider-header d-flex" > -
- {data.title} -
+ {/* {data.title} */}
+ + {data.title} +

{data.title}

+

{data.subTitle}

+ { + data.price ? +
+ { + data.oldPrice ? +
+
+ {data.oldPrice} تومان + +
+ +
: null + } +
{data.price} تومان
+
: +
ناموجود
+ } + + + + ); + } +} \ No newline at end of file diff --git a/src/views/Home/HomeSlider/Simple/index.scss b/src/views/Home/HomeSlider/Simple/index.scss new file mode 100644 index 0000000..cf62fae --- /dev/null +++ b/src/views/Home/HomeSlider/Simple/index.scss @@ -0,0 +1,54 @@ +.slider-simple{ + padding: 10px; + border-bottom: 1px solid #dfdfdf; + a{ + width : 100%; + text-decoration: none; + color: green; + &:hover{ + color: green; + } + img{ + width: 100%; + height: 300px; + border-top-left-radius: 15px; + border-top-right-radius: 15px; + } + h1{ + margin-top: 15px; + font-size: calc(100vw / 80); + } + h2{ + margin-top: 10px; + font-size: calc(100vw / 95); + color: #afafaf; + } + } + &__notAvailabe{ + font-size: calc(100vw / 85); + width : 100%; + text-align: center; + color: #afafaf; + margin-top: 15px; + } + &__price{ + font-size: calc(100vw / 85); + width : 100%; + margin-top: 15px; + text-align: center; + &--old{ + color: #afafaf; + position: relative; + margin-left: 10px; + align-items:center; + span{ + position: absolute; + left: 0px; + width : 100%; + height: 2px; + background-color: #afafafa3; + transform: rotate(-14deg); + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/HomeSlider/index.js b/src/views/Home/HomeSlider/index.js index 43e4a9b..0cef190 100644 --- a/src/views/Home/HomeSlider/index.js +++ b/src/views/Home/HomeSlider/index.js @@ -1,38 +1,71 @@ import React, { Component } from "react"; import Carousel from "react-elastic-carousel"; import ChevronLeftIcon from "@material-ui/icons/ChevronLeft"; - +import Simple from './Simple/index'; import Header from "./Header/index"; +import Blog from "./Blog/index"; import "./index.scss"; + +const SimpleHeader = (props) => { + return( +
+

{props.title}

+
+ موارد بیشتر + +
+
+ ); +} + +const TabHeader = (props) => { + return( +
+

{props.title}

+
+ موارد بیشتر + +
+
+ ); +} + export default class HomeSlider extends Component { render() { - const { data, title, height, designType } = this.props; + const { data, title, height, designType, number } = this.props; + let header; + if(title){ + if(designType === 'simple' || designType === 'blog'){ + header = (); + }else if(designType === 'tab'){ + header = (); + } + } return (
- {title ? ( -
-

{title}

-
- موارد بیشتر - -
-
- ) : null} + {header} { {props.designType === "header" ? (
) : null} + {props.designType === "simple" || props.designType === "tab" ? ( + + ) : null} + {props.designType === "blog" ? ( + + ) : null} // ); }; + diff --git a/src/views/Home/HomeSlider/index.scss b/src/views/Home/HomeSlider/index.scss index d2ea0e7..2321fc7 100644 --- a/src/views/Home/HomeSlider/index.scss +++ b/src/views/Home/HomeSlider/index.scss @@ -1,7 +1,7 @@ .home-slider { width: 100%; padding: 2px 0px 0px; - margin: 0px 0px 10px; + margin: 10px 0px 10px; position: relative; } diff --git a/src/views/Home/Membership/Input/index.js b/src/views/Home/Membership/Input/index.js new file mode 100644 index 0000000..634aa11 --- /dev/null +++ b/src/views/Home/Membership/Input/index.js @@ -0,0 +1,26 @@ +import React from 'react'; +import TextField from '@material-ui/core/TextField'; +import { makeStyles } from '@material-ui/core/styles'; + +const useStyles = makeStyles((theme) => ({ + root: { + '& .MuiTextField-root': { + + width: '200px', + position : 'relative', + marginRight : 10, + }, + }, +})); + +export default function FormPropsTextFields(props) { + const classes = useStyles(); + + return ( +
+
+ +
+
+ ); +} diff --git a/src/views/Home/Membership/index.js b/src/views/Home/Membership/index.js new file mode 100644 index 0000000..48f60fe --- /dev/null +++ b/src/views/Home/Membership/index.js @@ -0,0 +1,21 @@ +import React, { Component } from "react"; +import Input from './Input/index'; + +import "./index.scss"; +export default class Membership extends Component { + render() { + return ( +
+
+

دانوینی شو

+

مشخصات خودت رو وارد کنید و امتیاز هدیه بگیرید

+
+
+ + + +
+
+ ); + } +} diff --git a/src/views/Home/Membership/index.scss b/src/views/Home/Membership/index.scss new file mode 100644 index 0000000..3603d3c --- /dev/null +++ b/src/views/Home/Membership/index.scss @@ -0,0 +1,62 @@ +.membership { + width: 100%; + padding: 30px 20px; + box-shadow: 0px 0px 5px rgb(200, 200, 200); + border-radius: 7px; + justify-content: space-between; + align-items:center; + flex: 1; + margin-top: 20px; + margin-bottom: 20px; + h1{ + font-size: calc(100vw / 60); + margin-bottom: 0px; + color: green; + strong{ + color: white; + background-color: green; + padding:0px 5px; + } + } + p{ + margin-bottom: 0px; + } + + .MuiOutlinedInput-notchedOutline{ + top: 0px !important; + } + + .MuiOutlinedInput-input{ + padding : 20px 14px !important; + } + .MuiInputLabel-outlined{ + display : inline; + position: absolute; + right: 4px; + top: 12px; + transform: translate(0px, 0px) scale(1) !important; + } + .MuiInputLabel-shrink{ + display : inline; + position: absolute; + right: -23px; + top: -8px; + transform: translate(0px, 0px) scale(0.75) !important; + } + + label{ + background-color: white; + max-width: 120px; + text-align: center; + font-size: 14px !important; + } + + &__submit { + border: 0px; + background-color: green; + color: white; + border-radius: 5px; + padding : 7px 50px; + margin-right: 20px; + } +} diff --git a/src/views/Home/index.js b/src/views/Home/index.js index 0a3b3c6..090be4e 100644 --- a/src/views/Home/index.js +++ b/src/views/Home/index.js @@ -7,6 +7,7 @@ import HomeScroll from "./HomeScroll/index"; import Footer from "./Footer/index"; import HomeSlider from "./HomeSlider/index"; import HomeSearch from "./HomeSearch/index"; +import Membership from "./Membership/index"; import pic from "../../assets/images/pic.png"; @@ -20,13 +21,14 @@ export default class Home extends Component { type: "slider", title: "", height: 380, - designType: "header", + design: "header", + number: 1, data: [ { id: 0, image: pic, width: "100%", - backgroundColor: "rgb(18, 159, 253)", + backgroundColor: "rgba(18, 159, 253,0.3)", title: "منفجر کردن مغز خود را به ما بسپارید", subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", }, @@ -34,7 +36,7 @@ export default class Home extends Component { id: 1, image: pic, width: "100%", - backgroundColor: "rgb(18, 159, 253)", + backgroundColor: "rgba(18, 159, 253,0.3)", title: "منفجر کردن مغز خود را به ما بسپارید", subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", }, @@ -42,7 +44,7 @@ export default class Home extends Component { id: 2, image: pic, width: "100%", - backgroundColor: "rgb(18, 159, 253)", + backgroundColor: "rgba(18, 159, 253,0.3)", title: "منفجر کردن مغز خود را به ما بسپارید", subTitle: "کاملا تضمینی با نمونه های موفق انفجاری", }, @@ -81,51 +83,313 @@ export default class Home extends Component { data: ["همه", "پرفروش"], }, { - type: "scroll", - title: "لیست محصولات", - height: 250, + type: "slider", + title: "پرفروش‌ترین کتاب‌های دانوین", + height: 470, + design: "simple", + number: 4, data: [ { + id: 0, image: pic, - width: "80%", - link: "", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), }, { + id: 1, image: pic, - width: "50%", - link: "", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), }, { + id: 2, image: pic, - width: "40%", - link: "", + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + }, + { + id: 3, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + }, + { + id: 4, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + }, + { + id: 5, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 6, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 7, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + date : new Date(), + }, + { + id: 8, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + date : new Date(), + }, + { + id: 9, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + date : new Date(), }, ], }, { - type: "header", - title: "عنوان سایت", - height: 200, + type: "slider", + title: "جدیدترین کتاب‌های دانوین", + height: 470, + design: "tab", + number: 4, data: [ { + id: 0, image: pic, - width: 100, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 1, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 2, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + }, + { + id: 3, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + }, + { + id: 4, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + }, + { + id: 5, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 6, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 7, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + date : new Date(), + }, + { + id: 8, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + date : new Date(), + }, + { + id: 9, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + date : new Date(), }, ], }, + { + type: "slider", + title: "بلاگ", + height: 470, + design: "blog", + number: 3, + data: [ + { + id: 0, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 1, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 2, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + }, + { + id: 3, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + }, + { + id: 4, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + }, + { + id: 5, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '78.000', + oldPrice: '', + date : new Date(), + }, + { + id: 6, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '39.000', + oldPrice: '59.000', + date : new Date(), + }, + { + id: 7, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه ششم ابتدایی", + price : '21.000', + oldPrice: '', + date : new Date(), + }, + { + id: 8, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه دهم ابتدایی", + price : '', + oldPrice: '', + date : new Date(), + }, + { + id: 9, + image: pic, + title: "منفجر کردن مغز خود را به ما بسپارید", + subTitle: "پایه هفتم ابتدایی", + price : '59.000', + oldPrice: '', + date : new Date(), + }, + ], + }, + { + type: "membership", + }, + ], }; } render() { const { homeData } = this.state; return ( + <>
{homeData.map((item, i) => ( ))} -
+