React Intros Sections

React Intros Sections - Bootstrap 4 & Material Design

React Bootstrap Intro Sections are full-page templates which can make Your website outstanding.


App intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBBtn,
            MDBView,
            MDBContainer,
            MDBFormInline,
            MDBAnimation
          } from 'mdbreact';
          import './AppPage.css';
          
          class AppPage extends React.Component {
            state = {
              collapsed: false
            };
          
            handleTogglerClick = () => {
              const { collapsed } = this.state;
              this.setState({
                collapsed: !collapsed
              });
            };
          
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
          
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
          
            render() {
              const { collapsed } = this.state;
          
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.handleTogglerClick}
                />
              );
              return (
                <div id='apppage'>
                  <Router>
                    <div>
                      <MDBNavbar
                        color='primary-color'
                        dark
                        expand='md'
                        fixed='top'
                        scrolling
                        transparent
                        style={{ marginTop: '65px' }}
                      >
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <strong className='white-text'>MDB</strong>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler onClick={this.handleTogglerClick} />
                          <MDBCollapse isOpen={collapsed} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem active>
                                <MDBNavLink to='#!'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Link</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Profile</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBFormInline waves>
                                  <div className='md-form my-0'>
                                    <input
                                      className='form-control mr-sm-2'
                                      type='text'
                                      placeholder='Search'
                                      aria-label='Search'
                                    />
                                  </div>
                                </MDBFormInline>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapsed && overlay}
                    </div>
                  </Router>
                  <MDBView>
                    <MDBMask className='white-text gradient' />
                    <MDBContainer
                      style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
                      className='d-flex justify-content-center white-text align-items-center'
                    >
                      <MDBRow>
                        <MDBCol md='6' className='text-center text-md-left mt-xl-5 mb-5'>
                          <MDBAnimation type='fadeInLeft' delay='.3s'>
                            <h1 className='h1-responsive font-weight-bold mt-sm-5'>
                              Make purchases with our app
                            </h1>
                            <hr className='hr-light' />
                            <h6 className='mb-4'>
                              Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                              Rem repellendus quasi fuga nesciunt dolorum nulla magnam
                              veniam sapiente, fugiat! Commodi sequi non animi ea dolor
                              molestiae iste.
                            </h6>
                            <MDBBtn color='white'>Download</MDBBtn>
                            <MDBBtn outline color='white'>
                              Learn More
                            </MDBBtn>
                          </MDBAnimation>
                        </MDBCol>
          
                        <MDBCol md='6' xl='5' className='mt-xl-5'>
                          <MDBAnimation type='fadeInRight' delay='.3s'>
                            <img
                              src='https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.webp'
                              alt=''
                              className='img-fluid'
                            />
                          </MDBAnimation>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
          
                  <MDBContainer>
                    <MDBRow className='py-5'>
                      <MDBCol md='12' className='text-center'>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                          enim ad minim veniam, quis nostrud exercitation ullamco laboris
                          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                          sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                </div>
              );
            }
          }
          
          export default AppPage;
          
        
        
    
        
            
          #apppage .gradient {
            background: -moz-linear-gradient(
              45deg,
              rgba(42, 27, 161, 0.7),
              rgba(29, 210, 177, 0.7) 100%
            );
            background: -webkit-linear-gradient(
              45deg,
              rgba(42, 27, 161, 0.7),
              rgba(29, 210, 177, 0.7) 100%
            );
            background: -webkit-gradient(
              linear,
              45deg,
              from(rgba(42, 27, 161, 0.7)),
              to(rgba(29, 210, 177, 0.7))
            );
            background: -o-linear-gradient(
              45deg,
              rgba(42, 27, 161, 0.7),
              rgba(29, 210, 177, 0.7) 100%
            );
            background: linear-gradient(
              45deg,
              rgba(42, 27, 161, 0.7),
              rgba(29, 210, 177, 0.7) 100%
            );
          }
          
          #apppage .view {
            background-image: url('https://mdbootstrap.com/img/Photos/Others/architecture.webp');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            min-height: 100vh;
          }
          
          #apppage h6 {
            line-height: 1.7;
          }
              
        
    

Contact Form Intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBBtn,
            MDBView,
            MDBContainer,
            MDBFormInline,
            MDBCard,
            MDBCardBody,
            MDBInput
          } from 'mdbreact';
          import './ContactFormPage.css';
          
          class ContactFormPage extends React.Component {
            state = {
              collapseID: ''
            };
          
            toggleCollapse = collapseID => () =>
              this.setState(prevState => ({
                collapseID: prevState.collapseID !== collapseID ? collapseID : ''
              }));
          
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
          
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
          
            render() {
              const { collapseID } = this.state;
              const navStyle = { marginTop: '65px' };
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.toggleCollapse('navbarCollapse')}
                />
              );
              return (
                <div id='contactformpage'>
                  <Router>
                    <div>
                      <MDBNavbar
                        style={navStyle}
                        color='deep-purple darken-4'
                        dark
                        expand='md'
                        fixed='top'
                        scrolling
                        transparent
                      >
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <strong className='white-text'>MDB</strong>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler
                            onClick={this.toggleCollapse('navbarCollapse')}
                          />
                          <MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem active>
                                <MDBNavLink to='#!'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Link</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Profile</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBFormInline waves>
                                  <div className='md-form my-0'>
                                    <input
                                      className='form-control mr-sm-2'
                                      type='text'
                                      placeholder='Search'
                                      aria-label='Search'
                                    />
                                  </div>
                                </MDBFormInline>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapseID && overlay}
                    </div>
                  </Router>
          
                  <MDBView>
                    <MDBMask overlay='indigo-strong' />
                    <MDBContainer
                      style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
                      className='d-flex justify-content-center align-items-center'
                    >
                      <MDBRow>
                        <div className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'>
                          <h1 className='display-4 font-weight-bold'>Lorem ipsum </h1>
                          <hr className='hr-light' />
                          <h6 className='mb-4'>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem
                            repellendus quasi fuga nesciunt dolorum nulla magnam veniam
                            sapiente, fugiat! Commodi sequi non animi ea dolor molestiae
                            iste.
                          </h6>
                          <MDBBtn outline color='white'>
                            Learn More
                          </MDBBtn>
                        </div>
                        <MDBCol md='6' xl='5' className='mb-4'>
                          <MDBCard className='dark-grey-text'>
                            <MDBCardBody className='z-depth-2'>
                              <h3 className='dark-grey-text text-center'>
                                <strong>Write to us:</strong>
                              </h3>
                              <hr />
                              <MDBInput label='Your name' icon='user' />
                              <MDBInput label='Your email' icon='envelope' />
                              <MDBInput
                                label='Your message'
                                icon='pencil-alt'
                                type='textarea'
                                rows='3'
                              />
                              <div className='text-center mt-3 black-text'>
                                <MDBBtn color='indigo'>Send</MDBBtn>
                                <hr />
                                <MDBInput
                                  type='checkbox'
                                  id='checkbox'
                                  label='Subscribe me to the newsletter'
                                />
                              </div>
                            </MDBCardBody>
                          </MDBCard>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
          
                  <MDBContainer>
                    <MDBRow className='py-5'>
                      <MDBCol md='12' className='text-center'>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                          enim ad minim veniam, quis nostrud exercitation ullamco laboris
                          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                          sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                </div>
              );
            }
          }
          
          export default ContactFormPage;
          
              
        
    
        
            
                  #contactformpage .view {
                    background-image: url('https://mdbootstrap.com/img/Photos/Others/images/89.webp');
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center center;
                    min-height: 100vh;
                  }
                  
                  #contactformpage h6 {
                    line-height: 1.7;
                  }
                  
                  #contactformpage .form-check {
                    margin-bottom: 0 !important;
                  }
                  
                  #contactformpage i {
                    color: #9e9e9e !important;
                  }
          
              
        
    

Call to Action Buttons Intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBFormInline,
            MDBBtn,
            MDBView,
            MDBContainer,
            MDBIcon
          } from 'mdbreact';
          import './CallToActionIntro.css';
          
          class CallToActionIntro extends React.Component {
            state = {
              collapsed: false
            };
          
            handleTogglerClick = () => {
              const { collapsed } = this.state;
              this.setState({
                collapsed: !collapsed
              });
            };
          
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
          
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
          
            render() {
              const { collapsed } = this.state;
              const navStyle = { marginTop: '4rem' };
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.handleTogglerClick}
                />
              );
              return (
                <div id='caltoaction'>
                  <Router>
                    <div>
                      <MDBNavbar
                        color='secondary-color'
                        style={navStyle}
                        light
                        expand='md'
                        fixed='top'
                        scrolling
                        transparent
                      >
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <strong>MDB</strong>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler onClick={this.handleTogglerClick} />
                          <MDBCollapse isOpen={collapsed} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem active>
                                <MDBNavLink to='#!'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Link</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Profile</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBFormInline waves>
                                  <div className='md-form my-0'>
                                    <input
                                      className='form-control mr-sm-2'
                                      type='text'
                                      placeholder='Search'
                                      aria-label='Search'
                                    />
                                  </div>
                                </MDBFormInline>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapsed && overlay}
                    </div>
                  </Router>
                  <MDBView src='https://mdbootstrap.com/img/Photos/Others/gradient2.webp'>
                    <MDBMask className='rgba-purple-slight ' />
                    <MDBContainer
                      style={{ height: '100%', width: '100%', paddingTop: '14rem' }}
                      className='d-flex justify-content-center align-items-center'
                    >
                      <MDBRow>
                        <MDBCol md='12' className='mb-4 text-center'>
                          <h1 className='display-4 font-weight-bold mb-0 pt-md-5 pt-5'>
                            Our New Course is Ready
                          </h1>
                          <h5 className='pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5'>
                            It comes with a lot of new features, easy to follow videos and
                            images. Check it out now!
                          </h5>
                          <MDBBtn rounded className='btn-purple'>
                            <MDBIcon icon='user' className='mr-2' /> Sign up!
                          </MDBBtn>
                          <MDBBtn outline color='purple' rounded>
                            <MDBIcon icon='book' className='mr-2' /> Learn more
                          </MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
                </div>
              );
            }
          }
          
          export default CallToActionIntro;
          
              
        
    
        
            
                #caltoaction .view {
                  min-height: 100vh !important;
                  height: unset !important;
                }
                
            
        
    

Parallax Effect intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBFormInline,
            MDBBtn,
            MDBView,
            MDBContainer
          } from 'mdbreact';
          import './ParallaxIntro.css';
          
          class ParallaxIntro extends React.Component {
            state = {
              collapsed: false
            };
          
            handleTogglerClick = () => {
              this.setState({
                collapsed: !this.state.collapsed
              });
            };
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
            render() {
              const navStyle = { marginTop: '4rem' };
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.handleTogglerClick}
                />
              );
          
              const { collapsed } = this.state;
              return (
                <div id='parallaxintro'>
                  <Router>
                    <div>
                      <MDBNavbar
                        color='primary-color'
                        style={navStyle}
                        dark
                        expand='md'
                        fixed='top'
                        scrolling
                        transparent
                      >
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <MDBNavLink to='https://mdbootstrap.com/'>
                              <strong className='white-text'>MDB</strong>
                            </MDBNavLink>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler onClick={this.handleTogglerClick} />
                          <MDBCollapse isOpen={collapsed} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem>
                                <MDBNavLink to='#'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#'>About</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBFormInline waves>
                                  <div className='md-form my-0'>
                                    <input
                                      className='form-control mr-sm-2'
                                      type='text'
                                      placeholder='Search'
                                      aria-label='Search'
                                    />
                                  </div>
                                </MDBFormInline>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapsed && overlay}
                    </div>
                  </Router>
                  <MDBView
                    src={'https://mdbootstrap.com/img/Photos/Others/images/76.webp'}
                    fixed
                  >
                    <MDBMask className='rgba-white-light' />
                    <MDBContainer
                      className='d-flex justify-content-center align-items-center'
                      style={{ height: '100%', width: '100%', paddingTop: '15rem' }}
                    >
                      <MDBRow>
                        <MDBCol md='12' className='mb-4 white-text text-center'>
                          <h1 className='display-3 mb-0 pt-md-5 pt-5 white-text font-weight-bold'>
                            MDB
                            <span className='indigo-text font-weight-bold'>Parallax</span>
                          </h1>
                          <hr className='hr-light my-4' />
                          <h5 className='text-uppercase pt-md-5 pt-sm-2 pt-5 pb-md-5 pb-sm-3 pb-5 white-text font-weight-bold'>
                            Check documentation to see how to use MDBParallax
                          </h5>
                          <MDBBtn
                            className='btn-indigo'
                            size='lg'
                            href='https://mdbootstrap.com/docs/react/css/parallax/'
                            target='_blank'
                          >
                            Parallax documentation
                          </MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
                  <main>
                    <MDBContainer>
                      <MDBRow className='py-5'>
                        <MDBCol md='12' className='text-center'>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                            irure dolor in reprehenderit in voluptate velit esse cillum
                            dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia deserunt
                            mollit anim id est laborum.
                          </p>
                          <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque
                            ipsa quae ab illo inventore veritatis et quasi architecto
                            beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
                            quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui ratione voluptatem sequi
                            nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
                            dolor sit amet, consectetur, adipisci velit, sed quia non
                            numquam eius modi tempora incidunt ut labore et dolore magnam
                            aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
                            nostrum exercitationem ullam corporis suscipit laboriosam,
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
                            iure reprehenderit qui in ea voluptate velit esse quam nihil
                            molestiae consequatur, vel illum qui dolorem eum fugiat quo
                            voluptas nulla pariatur?
                          </p>
                          <p>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
                            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                            Ut enim ad minim veniam, quis nostrud exercitation ullamco
                            laboris nisi ut aliquip ex ea commodo consequat. Duis aute
                            irure dolor in reprehenderit in voluptate velit esse cillum
                            dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                            cupidatat non proident, sunt in culpa qui officia deserunt
                            mollit anim id est laborum.
                          </p>
                          <p>
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem
                            accusantium doloremque laudantium, totam rem aperiam, eaque
                            ipsa quae ab illo inventore veritatis et quasi architecto
                            beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
                            quia voluptas sit aspernatur aut odit aut fugit, sed quia
                            consequuntur magni dolores eos qui ratione voluptatem sequi
                            nesciunt. Neque porro quisquam est, qui dolorem ipsum quia
                            dolor sit amet, consectetur, adipisci velit, sed quia non
                            numquam eius modi tempora incidunt ut labore et dolore magnam
                            aliquam quaerat voluptatem. Ut enim ad minima veniam, quis
                            nostrum exercitationem ullam corporis suscipit laboriosam,
                            nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum
                            iure reprehenderit qui in ea voluptate velit esse quam nihil
                            molestiae consequatur, vel illum qui dolorem eum fugiat quo
                            voluptas nulla pariatur?
                          </p>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </main>
                </div>
              );
            }
          }
          
          export default ParallaxIntro;
          
              
        
    
        
            
                #parallaxintro .view {
                  min-height: 100vh !important;
                  height: unset !important;
                }
                
            
        
    

Classic Register Form intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBIcon,
            MDBBtn,
            MDBView,
            MDBContainer,
            MDBCard,
            MDBCardBody,
            MDBInput,
            MDBFormInline,
            MDBAnimation
          } from 'mdbreact';
          import './ClassicFormPage.css';
          
          class ClassicFormPage extends React.Component {
            state = {
              collapseID: ''
            };
          
            toggleCollapse = collapseID => () =>
              this.setState(prevState => ({
                collapseID: prevState.collapseID !== collapseID ? collapseID : ''
              }));
          
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
          
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
          
            render() {
              const { collapseID } = this.state;
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.toggleCollapse('navbarCollapse')}
                />
              );
              return (
                <div id='classicformpage'>
                  <Router>
                    <div>
                      <MDBNavbar
                        dark
                        expand='md'
                        scrolling
                        fixed='top'
                        style={{ marginTop: '65px' }}
                      >
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <strong className='white-text'>MDB</strong>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler
                            onClick={this.toggleCollapse('navbarCollapse')}
                          />
                          <MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem active>
                                <MDBNavLink to='#!'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Link</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Profile</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBFormInline waves>
                                  <div className='md-form my-0'>
                                    <input
                                      className='form-control mr-sm-2'
                                      type='text'
                                      placeholder='Search'
                                      aria-label='Search'
                                    />
                                  </div>
                                </MDBFormInline>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapseID && overlay}
                    </div>
                  </Router>
          
                  <MDBView>
                    <MDBMask className='d-flex justify-content-center align-items-center gradient' />
                    <MDBContainer
                      style={{ height: '100%', width: '100%', paddingTop: '10rem' }}
                      className='mt-5  d-flex justify-content-center align-items-center'
                    >
                      <MDBRow>
                        <MDBAnimation
                          type='fadeInLeft'
                          delay='.3s'
                          className='white-text text-center text-md-left col-md-6 mt-xl-5 mb-5'
                        >
                          <h1 className='h1-responsive font-weight-bold'>
                            Sign up right now!
                          </h1>
                          <hr className='hr-light' />
                          <h6 className='mb-4'>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem
                            repellendus quasi fuga nesciunt dolorum nulla magnam veniam
                            sapiente, fugiat! Commodi sequi non animi ea dolor molestiae,
                            quisquam iste, maiores. Nulla.
                          </h6>
                          <MDBBtn outline color='white'>
                            Learn More
                          </MDBBtn>
                        </MDBAnimation>
          
                        <MDBCol md='6' xl='5' className='mb-4'>
                          <MDBAnimation type='fadeInRight' delay='.3s'>
                            <MDBCard id='classic-card'>
                              <MDBCardBody className='white-text'>
                                <h3 className='text-center'>
                                  <MDBIcon icon='user' /> Register:
                                </h3>
                                <hr className='hr-light' />
                                <MDBInput
                                  className='white-text'
                                  iconClass='white-text'
                                  label='Your name'
                                  icon='user'
                                />
                                <MDBInput
                                  className='white-text'
                                  iconClass='white-text'
                                  label='Your email'
                                  icon='envelope'
                                />
                                <MDBInput
                                  className='white-text'
                                  iconClass='white-text'
                                  label='Your password'
                                  icon='lock'
                                  type='password'
                                />
                                <div className='text-center mt-4 black-text'>
                                  <MDBBtn color='indigo'>Sign Up</MDBBtn>
                                  <hr className='hr-light' />
                                  <div className='text-center d-flex justify-content-center white-label'>
                                    <a href='#!' className='p-2 m-2'>
                                      <MDBIcon
                                        fab
                                        icon='twitter'
                                        className='white-text'
                                      />
                                    </a>
                                    <a href='#!' className='p-2 m-2'>
                                      <MDBIcon
                                        fab
                                        icon='linkedin'
                                        className='white-text'
                                      />
                                    </a>
                                    <a href='#!' className='p-2 m-2'>
                                      <MDBIcon
                                        fab
                                        icon='instagram'
                                        className='white-text'
                                      />
                                    </a>
                                  </div>
                                </div>
                              </MDBCardBody>
                            </MDBCard>
                          </MDBAnimation>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
          
                  <MDBContainer>
                    <MDBRow className='py-5'>
                      <MDBCol md='12' className='text-center'>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                          enim ad minim veniam, quis nostrud exercitation ullamco laboris
                          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                          sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                </div>
              );
            }
          }
          
          export default ClassicFormPage;        
              
        
    
        
            
                  #classicformpage .view {
                    background-image: url('http://mdbootstrap.com/img/Photos/Others/images/91.webp');
                    background-repeat: no-repeat;
                    background-size: cover;
                    background-position: center center;
                    min-height: 100vh;
                  }
                  
                  #classicformpage .gradient {
                    background: -webkit-linear-gradient(
                      45deg,
                      rgba(0, 0, 0, 0.7),
                      rgba(72, 15, 144, 0.4) 100%
                    );
                    background: -webkit-gradient(
                      linear,
                      45deg,
                      from(rgba(0, 0, 0, 0.7), rgba(72, 15, 144, 0.4) 100%)
                    );
                    background: linear-gradient(
                      45deg,
                      rgba(0, 0, 0, 0.7),
                      rgba(72, 15, 144, 0.4) 100%
                    );
                  }
                  
                  #classicformpage .card {
                    background-color: rgba(126, 123, 215, 0.2);
                  }
                  
                  #classicformpage h6 {
                    line-height: 1.7;
                  }
                  
                  #classicformpage .navbar {
                    transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
                  }
                  
                  #classicformpage .top-nav-collapse {
                    background: #424f95 !important;
                  }
                  
                  @media (max-width: 768px) {
                    #classicformpage .navbar:not(.top-nav-collapse) {
                      background: #424f95 !important;
                    }
                  }
                  
                  #classicformpage label {
                    color: #fff !important;
                  }
          

              
        
    

Video background intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBIcon,
            MDBBtn,
            MDBView,
            MDBContainer
          } from 'mdbreact';
          import './VideoBackgroundPage.css';
          
          class VideoBackgroundPage extends React.Component {
            state = {
              collapseID: ''
            };
          
            toggleCollapse = collapseID => () =>
              this.setState(prevState => ({
                collapseID: prevState.collapseID !== collapseID ? collapseID : ''
              }));
          
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
          
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
          
            render() {
              const { collapseID } = this.state;
              const navStyle = { marginTop: '4rem' };
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.toggleCollapse('navbarCollapse')}
                />
              );
              return (
                <div id='videobackground'>
                  <Router>
                    <div>
                      <MDBNavbar style={navStyle} dark scrolling expand='md' fixed='top'>
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <span className='white-text'>MDBNavbar</span>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler
                            onClick={this.toggleCollapse('navbarCollapse')}
                          />
                          <MDBCollapse id='navbarCollapse' isOpen={collapseID} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='#!'>
                                  About
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='#!'>
                                  Features
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='#!'>
                                  Services
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='#!'>
                                  Opinions
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='#!'>
                                  Team
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='#!'>
                                  Contact
                                </MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBNavLink link to='!#'>
                                  <MDBIcon fab icon='facebook' />
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='!#'>
                                  <MDBIcon fab icon='twitter' />
                                </MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink link to='!#'>
                                  <MDBIcon fab icon='instagram' />
                                </MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapseID && overlay}
                    </div>
                  </Router>
          
                  <MDBView>
                    <MDBMask className='gradient'>
                      <video
                        className='video-intro'
                        poster='https://mdbootstrap.com/img/Photos/Others/background.webp'
                        muted
                        loop
                        autoPlay
                      >
                        <source
                          src='https://mdbootstrap.com/img/video/animation.mp4'
                          type='video/mp4'
                        />
                      </video>
                    </MDBMask>{' '}
                    <MDBContainer
                      className='d-flex justify-content-center align-items-center px-md-3 px-sm-0'
                      style={{ height: '100vh', width: '100%' }}
                    >
                      <MDBRow>
                        <MDBCol md='12' className='mb-4 white-text text-center'>
                          <h3 className='display-3 font-weight-bold mb-0 pt-md-5'>
                            Creative Agency{' '}
                          </h3>
                          <hr className='hr-light my-4 w-75' />
                          <h4 className='subtext-header mt-2 mb-4'>
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit
                            deleniti consequuntur nihil.
                          </h4>
                          <MDBBtn outline rounded color='white'>
                            <MDBIcon icon='home' /> Visit us
                          </MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
          
                  <MDBContainer>
                    <MDBRow className='pt-5 pb-4'>
                      <MDBCol md='12' className='text-center'>
                        <p>
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                          enim ad minim veniam, quis nostrud exercitation ullamco laboris
                          nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                          in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                          nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                          sunt in culpa qui officia deserunt mollit anim id est laborum.
                        </p>
                      </MDBCol>
                    </MDBRow>
                  </MDBContainer>
                </div>
              );
            }
          }
          
          export default VideoBackgroundPage;
          
              
        
    
        
            
                  #videobackground .gradient {
                    background: -moz-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                    background: -webkit-linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                    background: linear-gradient(45deg, rgba(213, 15, 61, 0.6), rgba(13, 17, 198, 0.69) 100%);
                  }
                  
                  #videobackground .view video {
                    z-index: -100;
                    top: 50%;
                    left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    transition: 1s opacity;
                    min-width: 100%;
                    min-height: 100%;
                    width: auto;
                    height: auto;
                  }
                  
                  #videobackground .view {
                    min-height: 100vh;
                  }
              
        
    

Minimalist Intro MDB Pro component

        
            
          import React from 'react';
          import { BrowserRouter as Router } from 'react-router-dom';
          import {
            MDBNavbar,
            MDBNavbarBrand,
            MDBNavbarNav,
            MDBNavItem,
            MDBNavLink,
            MDBNavbarToggler,
            MDBCollapse,
            MDBMask,
            MDBRow,
            MDBCol,
            MDBFormInline,
            MDBBtn,
            MDBView,
            MDBContainer
          } from 'mdbreact';
          import './MinimalisticIntro.css';
          
          class MinimalisticIntro extends React.Component {
            state = {
              collapsed: false
            };
          
            handleTogglerClick = () => {
              const { collapsed } = this.state;
          
              this.setState({
                collapsed: !collapsed
              });
            };
          
            componentDidMount() {
              document.querySelector('nav').style.height = '65px';
            }
          
            componentWillUnmount() {
              document.querySelector('nav').style.height = 'auto';
            }
          
            render() {
              const { collapsed } = this.state;
              const navStyle = { marginTop: '4rem' };
              const overlay = (
                <div
                  id='sidenav-overlay'
                  style={{ backgroundColor: 'transparent' }}
                  onClick={this.handleTogglerClick}
                />
              );
              return (
                <div id='minimalistintro'>
                  <Router>
                    <div>
                      <MDBNavbar
                        color='primary-color'
                        style={navStyle}
                        dark
                        expand='md'
                        fixed='top'
                        scrolling
                        transparent
                      >
                        <MDBContainer>
                          <MDBNavbarBrand>
                            <strong className='white-text'>MDB</strong>
                          </MDBNavbarBrand>
                          <MDBNavbarToggler onClick={this.handleTogglerClick} />
                          <MDBCollapse isOpen={collapsed} navbar>
                            <MDBNavbarNav left>
                              <MDBNavItem active>
                                <MDBNavLink to='#!'>Home</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Link</MDBNavLink>
                              </MDBNavItem>
                              <MDBNavItem>
                                <MDBNavLink to='#!'>Profile</MDBNavLink>
                              </MDBNavItem>
                            </MDBNavbarNav>
                            <MDBNavbarNav right>
                              <MDBNavItem>
                                <MDBFormInline waves>
                                  <div className='md-form my-0'>
                                    <input
                                      className='form-control mr-sm-2'
                                      type='text'
                                      placeholder='Search'
                                      aria-label='Search'
                                    />
                                  </div>
                                </MDBFormInline>
                              </MDBNavItem>
                            </MDBNavbarNav>
                          </MDBCollapse>
                        </MDBContainer>
                      </MDBNavbar>
                      {collapsed && overlay}
                    </div>
                  </Router>
                  <MDBView src='https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.webp'>
                    <MDBMask className='rgba-black-light' />
                    <MDBContainer
                      className='d-flex justify-content-center align-items-center'
                      style={{ height: '100%', width: '100%', paddingTop: '17rem' }}
                    >
                      <MDBRow>
                        <MDBCol md='12' className='mb-4 white-text text-center'>
                          <h1 className='h1-reponsive white-text text-uppercase font-weight-bold mb-0 pt-md-5 pt-5 '>
                            Minimalist intro
                          </h1>
                          <hr className='hr-light my-4' />
                          <h5 className='text-uppercase mb-4 white-text '>
                            <strong>Photography & design</strong>
                          </h5>
                          <MDBBtn outline color='white'>
                            portfolio
                          </MDBBtn>
                          <MDBBtn outline color='white'>
                            About me
                          </MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBView>
                </div>
              );
            }
          }
          
          export default MinimalisticIntro;
          
              
        
    
        
            
                #minimalistintro .view {
                  min-height: 100vh !important;
                  height: unset !important;
                }