diff --git a/src/assets/icons/search.png b/src/assets/icons/search.png new file mode 100644 index 0000000..7f61907 Binary files /dev/null and b/src/assets/icons/search.png differ diff --git a/src/assets/images/bazar.png b/src/assets/images/bazar.png new file mode 100644 index 0000000..e2a43f2 Binary files /dev/null and b/src/assets/images/bazar.png differ diff --git a/src/assets/images/blog1.png b/src/assets/images/blog1.png new file mode 100644 index 0000000..9b2d08c Binary files /dev/null and b/src/assets/images/blog1.png differ diff --git a/src/assets/images/blog2.png b/src/assets/images/blog2.png new file mode 100644 index 0000000..f5bead5 Binary files /dev/null and b/src/assets/images/blog2.png differ diff --git a/src/assets/images/blog3.png b/src/assets/images/blog3.png new file mode 100644 index 0000000..c789680 Binary files /dev/null and b/src/assets/images/blog3.png differ diff --git a/src/assets/images/header.png b/src/assets/images/header.png new file mode 100644 index 0000000..f356be5 Binary files /dev/null and b/src/assets/images/header.png differ diff --git a/src/components/GradeFilter/index.scss b/src/components/GradeFilter/index.scss index 0c00f8c..c89c9c0 100644 --- a/src/components/GradeFilter/index.scss +++ b/src/components/GradeFilter/index.scss @@ -3,12 +3,13 @@ margin: 40px auto; color: white; font-family: numeralLight; - background-color: rgb(59, 59, 59); - border-radius: 10px; + background-color: #383838; + border-radius: 6px; + height: 36px; h1{ margin: 0px; padding: 0px 15px; - color: #a3a2a2; + color: #6C6C6C; span{ width: 2px; height: 20px; @@ -22,12 +23,13 @@ width: calc(100% / 12); text-align: center; cursor: pointer; - padding: 5px 0px; + padding: 6px 0px; } } &__active{ - background-color: green; - box-shadow: 0px 0px 1px rgb(176, 240, 163); + background-color: #9CDF52; + box-shadow: 0px 0px 24px #9CDF52; + border-radius: 5px; } } diff --git a/src/components/HomeSearchBox/index.scss b/src/components/HomeSearchBox/index.scss index 803688e..840423e 100644 --- a/src/components/HomeSearchBox/index.scss +++ b/src/components/HomeSearchBox/index.scss @@ -4,7 +4,7 @@ margin: 0px auto; form{ button{ - background-color : rgb(117, 117, 117); + background-color : #39383D; margin-right: 3px; border-top-left-radius: 9px; border-bottom-left-radius: 9px; @@ -12,7 +12,7 @@ } input{ width : 100%; - background-color: rgb(136, 135, 135); + background-color: #46454A; border: 0px; border-top-right-radius: 9px; border-bottom-right-radius: 9px; @@ -20,7 +20,7 @@ &::placeholder{ padding-right: 0px; color: #ddd; - opacity: 0.6; + opacity: 0.4; } } } @@ -52,14 +52,14 @@ @media screen and (min-width: 1008px) and (max-width: 1440px){ .home-search-box{ max-width: 1250px; - padding: 80px 0px 30px; + padding: 80px 0px 10px; form{ width : 850px; input{ - font-size: calc(100vw / 60); + font-size: calc(100vw / 65); padding-right: 20px; &::placeholder{ - font-size: calc(100vw / 70); + font-size: calc(100vw / 75); } } button{ @@ -74,7 +74,7 @@ @media screen and (min-width: 641px) and (max-width: 1007px){ .home-search-box{ max-width: 900px; - padding: 50px 0px 30px; + padding: 50px 0px 10px; form{ width : 70%; input{ diff --git a/src/components/HomeSearchBox/index.tsx b/src/components/HomeSearchBox/index.tsx index 7356c1c..0e5430f 100644 --- a/src/components/HomeSearchBox/index.tsx +++ b/src/components/HomeSearchBox/index.tsx @@ -1,14 +1,13 @@ import React from "react"; import "./index.scss"; -import SearchRoundedIcon from "@material-ui/icons/SearchRounded"; - +import search from '../../assets/icons/search.png'; export default function HomeSearchBox() { return (
diff --git a/src/components/Navbar/index.scss b/src/components/Navbar/index.scss index 3570cd4..8555224 100644 --- a/src/components/Navbar/index.scss +++ b/src/components/Navbar/index.scss @@ -1,10 +1,11 @@ .nav{ width: 100%; - background-color: #080416; + background-color: #292929; height: 60px; padding: 0px 10px; - position: sticky !important; + position: fixed !important; top: 0px !important; + left: 0px; z-index: 100; &__container{ width: 100%; @@ -13,6 +14,12 @@ color: white; } } + &___share{ + background-color: #46454A; + } + &___login{ + background-color: #81C342; + } } @media screen and (min-width: 1441px){ @@ -47,12 +54,9 @@ padding-right: 0px !important; } &___share{ - background-color: #888; margin-left: 20px; } - &___login{ - background-color: rgb(91, 223, 58); - } + } } @@ -67,7 +71,7 @@ span{ width: 2px; height: 15px; - background-color: rgb(197, 197, 197); + background-color: #3F3F3F; margin-right: 15px; // transform: translateY(-1px); } @@ -89,11 +93,7 @@ padding-right: 0px !important; } &___share{ - background-color: #888; - margin-left: 20px; - } - &___login{ - background-color: rgb(91, 223, 58); + margin-left: 12px; } } } @@ -114,12 +114,8 @@ } } &___share{ - background-color: #888; margin-left: 15px; } - &___login{ - background-color: rgb(91, 223, 58); - } } } @@ -139,11 +135,9 @@ } } &___share{ - background-color: #888; margin-left: 10px; } &___login{ - background-color: rgb(91, 223, 58); } } } \ No newline at end of file diff --git a/src/types/images.d.ts b/src/types/images.d.ts index d65604a..5836bda 100644 --- a/src/types/images.d.ts +++ b/src/types/images.d.ts @@ -1,2 +1,3 @@ declare module '*.jpg'; -declare module '*.jpeg'; \ No newline at end of file +declare module '*.jpeg'; +declare module '*.png'; \ No newline at end of file diff --git a/src/views/Home/AppDownload/index.scss b/src/views/Home/AppDownload/index.scss new file mode 100644 index 0000000..6fa10aa --- /dev/null +++ b/src/views/Home/AppDownload/index.scss @@ -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; + } + } + +} \ No newline at end of file diff --git a/src/views/Home/AppDownload/index.tsx b/src/views/Home/AppDownload/index.tsx new file mode 100644 index 0000000..c3285a5 --- /dev/null +++ b/src/views/Home/AppDownload/index.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import bazar from '../../../assets/images/bazar.png'; +import './index.scss'; + +export default function AppDownload() { + return ( +
+

اینجا جایگاه یک
متن ویژه است که باید در این
قسمت قرار بگیرد.

+ +
+ ) +} diff --git a/src/views/Home/Blogs/Blog/index.scss b/src/views/Home/Blogs/Blog/index.scss index 098e19c..5a392ce 100644 --- a/src/views/Home/Blogs/Blog/index.scss +++ b/src/views/Home/Blogs/Blog/index.scss @@ -1,18 +1,20 @@ .home-blogs-blog{ margin: 0px 10px; cursor: pointer; - // background-repeat: no-repeat; - background-size: 100%; - background-position: 0px 0px; + background-repeat: no-repeat !important; + background-size: 100% 100% !important; + background-position: 0px 0px !important; border-radius: 10px; + padding-bottom: 15px; &__info{ margin-right: 10px; p { margin: 0px; - color: rgb(173, 172, 172); + color: white; } h2{ color: white; + font-family: numeralBold; } } } diff --git a/src/views/Home/Blogs/index.tsx b/src/views/Home/Blogs/index.tsx index a0baa0b..266707d 100644 --- a/src/views/Home/Blogs/index.tsx +++ b/src/views/Home/Blogs/index.tsx @@ -16,7 +16,7 @@ export default function Blogs(props: any) { return 1; } } - const { number, courses } = props; + const { number, blogs } = props; return (
@@ -29,7 +29,7 @@ export default function Blogs(props: any) { showArrows={true} pagination={false} > - {courses.map((item : Object, i : Number) => ( + {blogs.map((item : Object, i : Number) => ( ))} diff --git a/src/views/Home/Books/Book/index.scss b/src/views/Home/Books/Book/index.scss index 5b41df6..66b9972 100644 --- a/src/views/Home/Books/Book/index.scss +++ b/src/views/Home/Books/Book/index.scss @@ -12,7 +12,7 @@ margin-right: 10px; p { margin: 0px; - color: rgb(173, 172, 172); + color: #8C8C8C; } h2{ color: white; diff --git a/src/views/Home/Courses/Course/index.scss b/src/views/Home/Courses/Course/index.scss index ceed6cf..d60bee3 100644 --- a/src/views/Home/Courses/Course/index.scss +++ b/src/views/Home/Courses/Course/index.scss @@ -12,17 +12,17 @@ margin-right: 10px; p { margin: 0px; - color: rgb(173, 172, 172); + color: #C9C9C9; } h2{ color: white; } li{ - background-color: rgb(85, 85, 85); + background-color: #4F4F4F; border-radius: 15px; padding: 3px 6px; margin-left: 3px; - color: white; + color: #C4C4C4; font-family: numeralLight; margin-top: 5px; } diff --git a/src/views/Home/Courses/index.scss b/src/views/Home/Courses/index.scss index c18791c..110cad8 100644 --- a/src/views/Home/Courses/index.scss +++ b/src/views/Home/Courses/index.scss @@ -1,8 +1,8 @@ .home-courses { width: 100%; margin: 0px auto; - border-top: 1px solid rgb(139, 139, 139); - border-bottom: 1px solid rgb(141, 141, 141); + border-top: 1px solid #424242; + border-bottom: 1px solid #424242; position: relative; margin-top: 30px; padding: 20px 10px 50px; @@ -24,9 +24,12 @@ bottom: 0px; left: 50%; transform: translate(-50%, +50%); - background-color: #0f0f0f; + background-color: #292929; padding-right: 5px; - color: green; + color: #9CDF52; + &:hover{ + color: #9CDF52; + } } } diff --git a/src/views/Home/Courses/index.tsx b/src/views/Home/Courses/index.tsx index c411dea..1904423 100644 --- a/src/views/Home/Courses/index.tsx +++ b/src/views/Home/Courses/index.tsx @@ -39,7 +39,7 @@ export default function Courses(props: any) { className="home-courses__more d-flex align-items-center" to="/courses" > - مشاهده بیشتر + مشاهده بیشتر
); diff --git a/src/views/Home/Footer/index.scss b/src/views/Home/Footer/index.scss new file mode 100644 index 0000000..3d6fbbe --- /dev/null +++ b/src/views/Home/Footer/index.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/views/Home/Footer/index.tsx b/src/views/Home/Footer/index.tsx new file mode 100644 index 0000000..cdaf229 --- /dev/null +++ b/src/views/Home/Footer/index.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import './index.scss'; + +export default function Footer(props: any) { + const { links } = props; + return ( + + ); +} + +Footer.defaultProps = { + links: [ + { name: "تعرفه‌ها", link: "/" }, + { name: "سوالات متداول", link: "/" }, + { name: "درباره ما", link: "/" }, + { name: "فروشگاه", link: "/" }, + { name: "اپلیکیشن", link: "/" }, + { name: "تماس با ما", link: "/" }, + ], +}; diff --git a/src/views/Home/Header/Item/index.scss b/src/views/Home/Header/Item/index.scss new file mode 100644 index 0000000..7ec25a7 --- /dev/null +++ b/src/views/Home/Header/Item/index.scss @@ -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); + } + } + } +} \ No newline at end of file diff --git a/src/views/Home/Header/Item/index.tsx b/src/views/Home/Header/Item/index.tsx new file mode 100644 index 0000000..24005af --- /dev/null +++ b/src/views/Home/Header/Item/index.tsx @@ -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 ( +
+
+

{data.name}

+

{data.subTitle}

+

{data.text}

+
+
+ ); +} diff --git a/src/views/Home/Header/index.scss b/src/views/Home/Header/index.scss new file mode 100644 index 0000000..dbd0b57 --- /dev/null +++ b/src/views/Home/Header/index.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/views/Home/Header/index.tsx b/src/views/Home/Header/index.tsx new file mode 100644 index 0000000..22f2fed --- /dev/null +++ b/src/views/Home/Header/index.tsx @@ -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 ( +
+ + {headerData.map((item : Object, i : Number) => ( + + ))} + +
+ ) +} + diff --git a/src/views/Home/index.scss b/src/views/Home/index.scss index b5c0b91..fef748b 100644 --- a/src/views/Home/index.scss +++ b/src/views/Home/index.scss @@ -1,6 +1,21 @@ -.home{ - background-color: #0f0f0f; +.home { + 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%; overflow-x: hidden; - padding: 0px 10px; -} \ No newline at end of file + padding-top: 60px; +} diff --git a/src/views/Home/index.tsx b/src/views/Home/index.tsx index a2e95ae..547881b 100644 --- a/src/views/Home/index.tsx +++ b/src/views/Home/index.tsx @@ -6,22 +6,32 @@ import Courses from "./Courses/index"; import GradeFilter from "../../components/GradeFilter/index"; import Books from './Books/index'; import Blogs from "./Blogs/index"; +import Footer from "./Footer/index"; +import Header from "./Header/index"; +import AppDownload from "./AppDownload/index"; import olum7 from "../../assets/images/olum7.jpg"; import olum8 from "../../assets/images/olum8.jpg"; import olum9 from "../../assets/images/olum9.jpg"; +import header from "../../assets/images/header.png"; +import blog1 from "../../assets/images/blog1.png"; +import blog2 from "../../assets/images/blog2.png"; +import blog3 from "../../assets/images/blog3.png"; export default function Home(props : any) { const [grade, setGrade] = useState(null); - const {courses, grades} = props; + const {courses, grades, headerData, blogs} = props; return (
+
+ - - + + +
); } @@ -84,5 +94,54 @@ Home.defaultProps = { 'دهم', 'یازدهم', 'دوازدهم', + ], + headerData : [ + { + id : 0, + name : "آیا هیجان زندگی همچنان باقی است؟", + subTitle : "سوالاتی که پاسخی برای آنها نیست!", + text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ', + author : 'جورج جونیور', + imageUrl : header, + }, + { + id : 1, + name : "آیا هیجان زندگی همچنان باقی است؟", + subTitle : "سوالاتی که پاسخی برای آنها نیست!", + text: 'آیا ذهن نویسنده به این سمت رفته که شما این متن را بخوانید؟ نویسنده درست حدس زده شما در حال خواندن هستید. لطفا خواندن را تمام کنید ', + author : 'جورج جونیور', + imageUrl : header, + }, + ], + blogs : [ + { + id: 0, + name: "فیزیک کوانتوم و موارد مشابه", + text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", + imageUrl: blog1, + tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], + }, + { + id: 1, + name: "فیزیک کوانتوم و موارد مشابه", + text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", + imageUrl: blog2, + tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], + }, + { + id: 2, + name: "فیزیک کوانتوم و موارد مشابه", + text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", + imageUrl: blog3, + tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], + }, + { + id: 3, + name: "فیزیک کوانتوم و موارد مشابه", + text: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.", + imageUrl: blog1, + tags: ["دوره جدید", "تخفیف‌های هفتگی", "پایه هفتم"], + }, ] }; +