import React from "react";
import styled from "styled-components";
import {Container} from 'react-bootstrap'
import TextScramble,{ScrambleTexts} from "@twistezo/react-text-scramble/lib/TextScramble";
import lab from '../img/place_lab.png'

const scrambleTexts: ScrambleTexts = [
    'Anomalies',
    'Anomalies everywhere',
    'Freedom cannot be stopped',
    'He looked a normal buddy'
  ]



const Styled = styled.div`
  .jumbo {
      background: url(${lab}) no-repeat fixed bottom;
      background-size: cover;
      color: #FFFFFF;
      height: 400px;
      position: relative;
      z-index: -2;
  }
   
  .overlay{
      background-color: #fffff;  
      opacity: 0.4;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
  }
  
  .text{
      padding-top: 10rem; 
      text-align: center;
      align-content: center;
      z-index: 3;
  }
  
`;


export default function AboutPlace() {


    return(
        <Styled>
        <Container fluid className="jumbo">
            <div className="overlay"></div>    
            <Container className="text">
                <h1>About Zone</h1>
                <TextScramble
                    texts={scrambleTexts}
                
                />
            </Container>
            </Container>
        </Styled>
    );
}