section title desktop

src/components/global/SectionTitle.tsx

@@ -0,0 +1,25 @@
+// Modules
+
+// Icons
+import bishop from "../../icons/bishop.svg";
+
+interface Props {
+  title: string;
+}
+
+const SectionTitle = ({ title }: Props) => {
+  return (
+    <div className="section-title">
+      <div className="section-title-img">
+        <img src={bishop} alt="" />
+      </div>
+      <h2 className="section-title-title">{title}</h2>
+      <div className="section-title-deco">
+        <div className="deco-rotated"></div>
+        <div className="deco"></div>
+      </div>
+    </div>
+  );
+};
+
+export default SectionTitle;

src/icons/bishop.svg

@@ -0,0 +1,8 @@
+<svg width="51" height="50" viewBox="0 0 51 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M27.7332 7.67454C27.7332 8.34575 27.4656 8.98947 26.9893 9.46408C26.513 9.9387 25.8669 10.2053 25.1933 10.2053C24.5197 10.2053 23.8737 9.9387 23.3974 9.46408C22.921 8.98947 22.6534 8.34575 22.6534 7.67454C22.6534 7.00333 22.921 6.35961 23.3974 5.88499C23.8737 5.41038 24.5197 5.14374 25.1933 5.14374C25.8669 5.14374 26.513 5.41038 26.9893 5.88499C27.4656 6.35961 27.7332 7.00333 27.7332 7.67454Z" fill="#01815E"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25.2569 10.118C25.2569 10.118 33.7304 15.9214 34.8909 17.885C37.5736 22.4243 37.7482 26.9162 32.7013 29.8408C32.6079 29.895 34.2586 35.5873 34.1026 35.6879C30.1368 38.2433 26.5706 38.0441 26.5706 38.0441C26.5706 38.0441 27.8843 41.7531 37.3432 40.7495C42.2873 40.2297 45.4883 44.153 45.4883 44.153L42.7732 47.0328C42.7732 47.0328 39.4256 44.1654 34.8909 44.4148C28.1471 44.7857 25.2569 42.2331 25.2569 42.2331C25.2569 42.2331 21.7577 44.8487 16.4987 44.4148C10.8738 43.9506 8.00323 47.1201 8.00323 47.1201L4.93787 44.2402C4.93787 44.2402 9.27673 39.9061 15.6229 40.6622C22.2998 41.4577 23.9431 38.3059 23.9431 38.3059C23.9431 38.3059 19.4576 37.6292 16.4111 35.6879C16.2768 35.6023 17.8124 29.8408 17.8124 29.8408C17.8124 29.8408 9.84253 25.4103 16.0608 17.2741C17.6836 15.1507 25.2569 10.118 25.2569 10.118Z" fill="#01815E"/>
+<path d="M25.9597 17.2523H24.4489V23.732H25.9597V17.2523Z" fill="white"/>
+<path d="M28.3244 19.7394H21.9528V21.223H28.3244V19.7394Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.756 29.2736C22.2753 26.9876 28.6092 27.1283 31.543 29.23C31.559 29.2414 30.9404 30.4742 30.908 30.4517C28.4996 28.7791 22.3706 28.6302 19.5005 30.4517C19.4724 30.4696 18.7325 29.2889 18.756 29.2736Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1211 35.2278C21.6256 31.4146 29.3171 31.7298 33.1048 35.1842C33.1193 35.1975 32.3035 36.3433 32.2727 36.3187C29.1417 33.817 21.694 32.9798 18.0626 36.3405C18.0418 36.3598 17.0997 35.2459 17.1211 35.2278Z" fill="white"/>
+</svg>

src/pages/Main.tsx

@@ -2,6 +2,7 @@
 
 // Components
 import MainSlider from "../components/main/MainSlider";
+import SectionTitle from "../components/global/SectionTitle";
 
 const Main = () => {
   return (

src/styles/_section-title.scss

@@ -0,0 +1,43 @@
+.section-title {
+  position: relative;
+  background: $base-gray;
+  display: flex;
+  align-items: center;
+  gap: 1.6rem;
+  padding: 1.6rem;
+  overflow: hidden;
+  margin-bottom: 10rem;
+}
+
+.section-title-title {
+  font-size: 2.8rem;
+  z-index: 2;
+}
+
+.section-title-deco {
+  z-index: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  height: 100%;
+  width: 46.78rem;
+  overflow: hidden;
+
+  * {
+    background: $base-green;
+    position: absolute;
+  }
+
+  .deco-rotated {
+    right: 29rem;
+    width: 8rem;
+    height: 200%;
+    transform: rotate(38deg);
+  }
+
+  .deco {
+    right: 0;
+    width: 30rem;
+    height: 100%;
+  }
+}

src/styles/_variables.scss

@@ -1,6 +1,8 @@
 // Colors
 $base-green: #01815e;
 $base-black: #1c1717;
+$base-gray: #f8f8f8;
+$hover-green: #0e654e;
 
 // Flex
 @mixin flex-c {

src/styles/style.scss

@@ -1,6 +1,7 @@
 @import "./nullifier";
 @import "./variables";
 @import "./general";
+@import "./section-title";
 @import "./nav";
 @import "./footer";
 @import "./main";