main content

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 (
+    <div className={`main-content-item main-content-item__${type}`}>
+      <LazyLoadImage src={img} alt="" effect="blur" useIntersectionObserver />
+      <div className="main-content-item-overlay">
+        <h2>{title}</h2>
+      </div>
+    </div>
+  );
+};
+
+export default ContentItem;

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 (
+    <>
+      <LazyLoadComponent useIntersectionObserver>
+        <div className="main-content">
+          <SectionTitle title="Главное" />
+          <div className="main-content-top">
+            <ContentItem type="big" img={Placeholder} title={titlePlaceholder} />
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+          </div>
+          <div className="main-content-bottom">
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+            <ContentItem img={Placeholder} title={titlePlaceholder} />
+          </div>
+        </div>
+      </LazyLoadComponent>
+    </>
+  );
+};
+
+export default MainContent;

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 = () => {
       <div className="news-section">
         <div className="container">
           <div className="news-inner">
+            <MainContent />
             <div className="news-outer-wrapper">
-              <NewsScroll state={true} />
+              <NewsScroll sectionTitle={true} />
               <Aside />
             </div>
             <Videos />

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;
+    }
+  }
+}