diff --git a/src/components/main/ContentItem.tsx b/src/components/main/ContentItem.tsx new file mode 100644 index 0000000..2db5f48 --- /dev/null +++ b/src/components/main/ContentItem.tsx @@ -0,0 +1,21 @@ +// Modules +import { LazyLoadImage } from 'react-lazy-load-image-component'; + +interface IProps { + type?: 'small' | 'big'; + img: string; + title: string; +} + +const ContentItem = ({ type = 'small', img, title }: IProps) => { + return ( +
+ +
+

{title}

+
+
+ ); +}; + +export default ContentItem; diff --git a/src/components/main/MainContent.tsx b/src/components/main/MainContent.tsx new file mode 100644 index 0000000..72dead4 --- /dev/null +++ b/src/components/main/MainContent.tsx @@ -0,0 +1,35 @@ +// Modules +import { LazyLoadComponent } from 'react-lazy-load-image-component'; + +// Images +import Placeholder from '../../assets/images/placeholder3.png'; + +// Components +import ContentItem from './ContentItem'; +import SectionTitle from '../global/SectionTitle'; + +const titlePlaceholder = + 'Полезная информация для поступающих на программы подготовки научных кадров в Туркменистане'; + +const MainContent = () => { + return ( + <> + +
+ +
+ + +
+
+ + + +
+
+
+ + ); +}; + +export default MainContent; diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 8d2468e..febc614 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,7 +1,8 @@ // Components -import Aside from "../components/aside/Aside"; -import NewsScroll from "../components/global/NewsScroll"; -import Videos from "../components/videos/Videos"; +import Aside from '../components/aside/Aside'; +import NewsScroll from '../components/global/NewsScroll'; +import Videos from '../components/videos/Videos'; +import MainContent from '../components/main/MainContent'; const Main = () => { return ( @@ -9,8 +10,9 @@ const Main = () => {
+
- +
diff --git a/src/styles/_main.scss b/src/styles/_main.scss index e471675..37ce6ac 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -1,3 +1,65 @@ .main { padding: 5.6rem 0; } + +.main-content { + display: flex; + flex-direction: column; + gap: 2.4rem; +} + +.main-content-top { + display: grid; + grid-template-columns: calc(67% - 1.2rem) calc(33% - 1.2rem); + gap: 2.4rem; + height: 40rem; +} + +.main-content-bottom { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + gap: 2.4rem; + height: 23.7rem; +} + +.main-content-item { + position: relative; + @include wh100; + overflow: hidden; + + span { + display: block !important; + @include wh100; + } + + img { + @include wh100; + object-fit: cover; + } + + &-overlay { + position: absolute; + top: 0; + left: 0; + @include wh100; + background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.7) 100%); + display: flex; + padding: 1.6rem; + align-items: flex-end; + z-index: 2; + + h2 { + color: $white; + font-size: 1.8rem; + } + } + + &__big { + &-overlay { + padding: 2.4rem; + } + h2 { + font-size: 2.4rem; + } + } +}