upd

public/index.html

@@ -15,6 +15,8 @@
         --secondary-color: #210002;
         --hightlight-color: #f54f54;
         --gutter: 8px;
+
+        --text: rgb(3, 14, 28);
       }
       *{
         box-sizing: border-box;
@@ -25,7 +27,7 @@
         width: 100%;
 
         font: 16px/25px Helvetica, Arial, sans-serif;
-        color: var(--night);
+        color: var(--text);
       }
     </style>
   </head>

src/App.tsx

@@ -1,15 +1,20 @@
 import React, { Component } from 'react'
-import './styles.css'
 import { BackgroundVideo } from './containers/index';
 import { Section } from './components/index'
+import './styles.css'
 
 class App extends Component {
   render () {
     return (
       <div className='App'>
         <div className='page-layout'>
           <BackgroundVideo />
-          <Section />
+          <Section
+            pre="pre"
+            title="title"
+            sectionName="rules"
+            color="red"
+          />
         </div>
       </div>
     )

src/components/Section/Section.tsx

@@ -1,23 +1,32 @@
 import React from 'react'
-import { TextHeading } from '../index'
+import { TextHeading, Texture } from '../index'
+import './style.css'
 
 type IProps = {
   children?: any,
-  sectionName?: string,
+  sectionName: string,
   pre?: string,
   title?: string,
+  color: string,
 }
 
 export const Section: React.FunctionComponent<IProps> = ({
   children,
   sectionName,
   pre,
-  title
+  title,
+  color
 }) => {
   return (
-    <section className={`container container-${sectionName}`}>
-      <TextHeading pre={pre} title={title} />
-      {children}
+    <section
+      style={{backgroundColor: color}}
+      className={`section section-${sectionName}`}
+    >
+      <div className="container">
+        <TextHeading pre={pre} title={title} />
+        {children}
+        <Texture color={color} className={`${sectionName}`}/>
+      </div>
     </section>
   )
-};
+}

src/components/Section/style.css

@@ -0,0 +1,3 @@
+.section {
+  position: relative;
+}

src/components/TextHeading/style.css

@@ -4,7 +4,7 @@
   margin-bottom: var(--gutter);
 
   font-size: 1.2rem;
-  color: var(--hightlight-color);
+  /* color: var(--hightlight-color); */
 }
   .pre-h1:after {
     content: '';

src/components/Texture/Texture.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import './style.css'
+
+interface IProps {
+  className?: string;
+  color: string;
+}
+
+export const Texture: React.FunctionComponent<IProps> = ({
+  color,
+  className
+}) => {
+  return (
+    <div className="texture-wr">
+      <div className={`texture ${className ? className : ''}`}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill={color}>
+          <path d="M936.87,32.21c-.48.21-4.19.37-4.16.59a54.32,54.32,0,0,0-5.79-.06l-126.38,7.9c-1.2.17-40.46,2.53-40.46,2.53-3.29.29-14.05,1-15.54,1l-11.92.75c-7,.66-20.5,1.29-20.49,1.28s-33.94,2.23-33.92,2.28c-1.05,0-33.88,2-33.92,2.09C642.37,50.68,523.37,58,523.37,58h-.17l-26.64,1.66,190.91-8.75c-1.1.21,252.92-16.09,243.81-15.21,5.92.56,20.47-.31,32.06-1-1.33.69-13.41,1.21-12.41,1.94C935.05,36.76,719,51,698.63,52.38c.15-.32,7-.55,6.23-.88-16.51,1.4-66.8,4.62-91.12,5.94-7.48.71-61.6,3.83-61.41,4.11-26.53,1.21-47.75,2.61-67.88,4l-1,.07c49.39-2.26,81-3.09,164.36-8.07-20.67,1.89-74.27,5.15-63.57,5.73-208,13.33-301.41,18.28-388.8,26.07C100.32,95.26,95.24,94.06,0,100H1000V28.18l-64.34,4Zm41.27,1.42a71.26,71.26,0,0,1-12.63,1.12C968.08,34.35,972.74,34,978.14,33.63Z"></path><path d="M419.71,69.21C385.81,71.51,311,76.4,251.52,80.34c92.64-5.41,106.16-5.69,199.85-12.16-2.73,0-5.87.09-9.51.19l-8.29.48c.28-.08.65-.17,1-.25C430.26,68.75,425.32,69,419.71,69.21Z">
+          </path>
+          <path d="M222.56,82.27c-27.76,1.85-48.5,3.26-53.89,3.71-6.83.19,8.66-.6,6.23-.88-47.74,3.26-88.48,5.38-133.58,10.26,1.49.6-5.51.23-5.76.82C26.17,97,2.13,98.26,0,98.65V100c74-5.09,144.25-11.61,258-17.58C260.76,81.19,222.15,83.29,222.56,82.27Z"></path>
+        </svg>
+      </div>
+    </div>
+  )
+};

src/components/Texture/index.ts

@@ -0,0 +1 @@
+export * from './Texture'

src/components/Texture/style.css

@@ -0,0 +1,21 @@
+.texture {
+  position: absolute;
+  left: 50%;
+  bottom: 0px;
+  z-index: 2;
+  width: 100%;
+  min-width: 1000px;
+  height: 100%;
+  transform-origin: left top;
+
+  transform: translate3d(-50%, 0px, 0px);
+}
+
+.texture-wr {
+  position: absolute;
+  left: 0px;
+  bottom: calc(100% - 5px);
+  width: 100%;
+  height: 108px;
+  overflow: hidden;
+}

src/components/index.js → src/components/index.ts

@@ -1,3 +1,4 @@
 export * from './Logo'
 export * from './TextHeading'
-export * from './Section'
+export * from './Section'
+export * from './Texture'

src/containers/BackgroundVideo/BackgroundVideo.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import './styles.css'
-// import video from './video.mp4'
+import * as video from './video.mp4'
 import { Logo } from '../../components/index'
 
 export const BackgroundVideo = () => {
   return (
     <div className="background-video">
       <video loop autoPlay muted>
-        {/* <source src={video} type="video/mp4" /> */}
+        <source src={`${video}`} type="video/mp4" />
       </video>
       <div className="background-video__content">
         <Logo />

src/containers/BackgroundVideo/styles.css

@@ -23,8 +23,8 @@
 
     color: #fff;
     background-color: rgba(0,0,0, .5);
-    background-image: url('./home-hero.png');
+    /* background-image: url('./home-hero.png');
     background-position: 50% calc(100% + 1px);
     background-size: contain;
-    background-repeat: no-repeat;
+    background-repeat: no-repeat; */
   }

src/index.d.ts

@@ -0,0 +1,4 @@
+declare module '*.mp4' {
+  const src: string;
+  export default src;
+}

src/styles.css

@@ -8,7 +8,7 @@
 
 body{
   font: 16px/25px 'SouthPark', Helvetica, Arial, sans-serif;
-  color: var(--primary-color);
+  /* color: var(--primary-color); */
 }
 
 .container {