web
mobile
Edit these docs Rate these docs

React Bootstrap Intro Sections

React Intro Sections - Bootstrap 4 & Material Design

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


App intro MDB Pro component

Display of full page app intro page.

                import React, { Component } 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 } from "mdbreact";
                import "./index.css";

                class AppPage extends Component {
                  state = {
                    collapsed: false
                  };

                  handleTogglerClick = () => {
                    this.setState({
                      collapsed: !this.state.collapsed
                    });
                  };

                  render() {
                    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
                            >
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <strong className="white-text">MDB</strong>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler onClick={this.handleTogglerClick} />
                                <MDBCollapse isOpen={this.state.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>
                            {this.state.collapsed && overlay}
                          </div>
                        </Router>
                        <MDBView>
                          <MDBMask className="d-flex justify-content-center align-items-center gradient">
                            <MDBContainer>
                              <MDBRow>
                                <div className="white-text text-center text-md-left col-md-6 mt-xl-5 mb-5">
                                  <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>
                                </div>
                                <MDBCol md="6" xl="5" className="mt-xl-5">
                                  <img
                                    src="https://mdbootstrap.com/img/Mockups/Transparent/Small/admin-new.png"
                                    alt=""
                                    className="img-fluid"
                                  />
                                </MDBCol>
                              </MDBRow>
                            </MDBContainer>
                          </MDBMask>
                        </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.jpg');
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  height: 100vh;
                }

                #apppage h6 {
                  line-height: 1.7;
                }
            

Contact Form Intro MDB Pro component

Display of full page contact form intro

                import React, { Component } 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 "./index.css";

                class ContactFormPage extends Component {
                  state = {
                    collapseID: ""
                  };

                  toggleCollapse = collapseID => () =>
                    this.setState(prevState => ({
                      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
                    }));

                  render() {
                    const navStyle = { marginTop: "4rem" };
                    const overlay = (
                      <div
                        id="sidenav-overlay"
                        style={{ backgroundColor: "transparent" }}
                        onClick={this.toggleCollapse("navbarCollapse")}
                      />
                    );
                    return (
                      <div id="contactformpage">
                        <Router>
                          <div>
                            <MDBNavbar
                              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={this.state.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>
                            {this.state.collapseID && overlay}
                          </div>
                        </Router>

                        <MDBView>
                          <MDBMask
                            className="d-flex justify-content-center align-items-center"
                            overlay="indigo-strong"
                          >
                            <MDBContainer>
                              <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>
                          </MDBMask>
                        </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.jpg');
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  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

Display of intro page with video

        import React, { Component } 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, MDBicon } from "mdbreact";

        class MinimalisticIntro extends Component {
          state = {
            collapsed: false
          };

          handleTogglerClick = () => {
            this.setState({
              collapsed: !this.state.collapsed
            });
          };

          render() {
            const navStyle = { marginTop: "4rem" };
            const overlay = (
              <div
                id="sidenav-overlay"
                style={{ backgroundColor: "transparent" }}
                onClick={this.handleTogglerClick}
              />
            );
            return (
              <>
                <Router>
                  <div>
                    <MDBNavbar
                      color="secondary-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={this.state.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>
                    {this.state.collapsed && overlay}
                  </div>
                </Router>
                <MDBView src={`https://mdbootstrap.com/img/Photos/Others/gradient2.png`} >
                  <MDBMask className="rgba-purple-slight d-flex justify-content-center align-items-center">
                    <MDBContainer>
                      <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"></MDBIcon> Sign up!</MDBBtn>
                          <MDBBtn outline color="purple" rounded ><MDBIcon icon="book" className="mr-2"></MDBIcon> Learn more</MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBMask>
                </MDBView>
              </>
            );
          }
        }

        export default MinimalisticIntro;
            

Parallax Effect intro MDB Pro component

Display of intro page with video

        import React, { Component } 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 } from "mdbreact";

        class MinimalisticIntro extends Component {
          state = {
            collapsed: false
          };

          handleTogglerClick = () => {
            this.setState({
              collapsed: !this.state.collapsed
            });
          };

          render() {
            const navStyle = { marginTop: "4rem" };
            const overlay = (
              <div
                id="sidenav-overlay"
                style={{ backgroundColor: "transparent" }}
                onClick={this.handleTogglerClick}
              />
            );
            return (
              <>
                <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={this.state.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>
                    {this.state.collapsed && overlay}
                  </div>
                </Router>
                <MDBView src={`https://mdbootstrap.com/img/Photos/Others/images/76.jpg`} fixed>
                  <MDBMask className="rgba-white-light d-flex justify-content-center align-items-center">
                    <MDBContainer>
                      <MDBRow>
                        <MDBCol md="12" className="mb-4 white-text text-center">
                          <h1 class="display-3 mb-0 pt-md-5 pt-5 white-text font-weight-bold" >NATALIE <span className="indigo-text font-weight-bold">SMITH</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">Web developer & graphic designer</h5>
                          <MDBBtn className="white btn-light-blue" size="lg">portfolio</MDBBtn>
                          <MDBBtn className="white btn-indigo" size="lg" >About me</MDBBtn>
                        </MDBCol>
                      </MDBRow>
                    </MDBContainer>
                  </MDBMask>
                </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>
              </>
            );
          }
        }

        export default MinimalisticIntro;
            

Classic Register Form intro MDB Pro component

Display of a page with a classic register form.

                import React, { Component } 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 } from "mdbreact";
                import "./ClassicFormPage.css";

                class ClassicFormPage extends Component {
                  state = {
                    collapseID: ""
                  };

                  toggleCollapse = collapseID => () =>
                    this.setState(prevState => ({
                      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
                    }));

                  render() {
                    const navStyle = { marginTop: "4rem" };
                    const overlay = (
                      <div
                        id="sidenav-overlay"
                        style={{ backgroundColor: "transparent" }}
                        onClick={this.toggleCollapse("navbarCollapse")}
                      />
                    );
                    return (
                      <div id="classicformpage">
                        <Router>
                          <div>
                            <MDBNavbar style={navStyle} dark expand="md" fixed="top">
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <strong className="white-text">MDB</strong>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler
                                  onClick={this.toggleCollapse("navbarCollapse")}
                                />
                                <MDBCollapse
                                  id="navbarCollapse"
                                  isOpen={this.state.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>
                            {this.state.collapseID && overlay}
                          </div>
                        </Router>

                        <MDBView>
                          <MDBMask className="d-flex justify-content-center align-items-center gradient">
                            <MDBContainer>
                              <MDBRow>
                                <div 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>
                                </div>
                                <MDBCol md="6" xl="5" className="mb-4">
                                  <MDBCard id="classic-card">
                                    <MDBCardBody className="z-depth-2 white-text">
                                      <h3 className="text-center">
                                        <MDBIcon icon="user" /> Register:
                                      </h3>
                                      <hr className="hr-light" />
                                      <MDBInput label="Your name" icon="user" />
                                      <MDBInput label="Your email" icon="envelope" />
                                      <MDBInput
                                        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-in" className="white-text" />
                                          </a>
                                          <a href="#!" className="p-2 m-2">
                                            <MDBIcon fab icon="instagram" className="white-text" />
                                          </a>
                                        </div>
                                      </div>
                                    </MDBCardBody>
                                  </MDBCard>
                                </MDBCol>
                              </MDBRow>
                            </MDBContainer>
                          </MDBMask>
                        </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('https://mdbootstrap.com/img/Photos/Others/images/91.jpg');
                  background-repeat: no-repeat;
                  background-size: cover;
                  background-position: center center;
                  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 .5s ease-in-out,padding .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

Display of intro page with video

                import React, { Component } 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 Component {
                  state = {
                    collapseID: ""
                  };

                  toggleCollapse = collapseID => () =>
                    this.setState(prevState => ({
                      collapseID: prevState.collapseID !== collapseID ? collapseID : ""
                    }));

                  render() {
                    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 expand="md" fixed="top">
                              <MDBContainer>
                                <MDBNavbarBrand>
                                  <span className="white-text">MDBNavbar</span>
                                </MDBNavbarBrand>
                                <MDBNavbarToggler
                                  onClick={this.toggleCollapse("navbarCollapse")}
                                />
                                <MDBCollapse
                                  id="navbarCollapse"
                                  isOpen={this.state.collapseID}
                                  navbar
                                >
                                  <MDBNavbarNav left>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Home</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">About</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Features</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Services</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Opinions</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Team</MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="#!">Contact</MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                  <MDBNavbarNav right>
                                    <MDBNavItem>
                                      <MDBNavLink to="!#">
                                        <MDBIcon fab icon="facebook-f" />
                                      </MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="!#">
                                        <MDBIcon fab icon="twitter" />
                                      </MDBNavLink>
                                    </MDBNavItem>
                                    <MDBNavItem>
                                      <MDBNavLink to="!#">
                                        <MDBIcon fab icon="instagram" />
                                      </MDBNavLink>
                                    </MDBNavItem>
                                  </MDBNavbarNav>
                                </MDBCollapse>
                              </MDBContainer>
                            </MDBNavbar>
                            {this.state.collapseID && overlay}
                          </div>
                        </Router>

                        <MDBView>
                          <video
                            className="video-intro"
                            poster="https://mdbootstrap.com/img/Photos/Others/background.jpg"
                            playsInline
                            autoPlay
                            muted=""
                            loop
                          >
                            <source
                              src="https://mdbootstrap.com/img/video/animation.mp4"
                              type="video/mp4"
                            />
                          </video>
                          <MDBMask className="d-flex justify-content-center align-items-center gradient">
                            <MDBContainer className="px-md-3 px-sm-0">
                              <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>
                          </MDBMask>
                        </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 {
                top: 0!important;
                left: 0!important;
                transform: none!important;
                height: 100vh;
              }
            

Minimalist Intro MDB Pro component

Display of intro page with video

        import React, { Component } 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 } from "mdbreact";

        class MinimalisticIntro extends Component {
          state = {
            collapsed: false
          };

          handleTogglerClick = () => {
            this.setState({
              collapsed: !this.state.collapsed
            });
          };

          render() {
            const navStyle = { marginTop: "4rem" };
            const overlay = (
              <div
                id="sidenav-overlay"
                style={{ backgroundColor: "transparent" }}
                onClick={this.handleTogglerClick}
              />
            );
            return (
              <>
                <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={this.state.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>
                    {this.state.collapsed && overlay}
                  </div>
                </Router>
                <MDBView src={`https://mdbootstrap.com/img/Photos/Others/img%20%2848%29.jpg`}>
                  <MDBMask className="rgba-black-light d-flex justify-content-center align-items-center">
                    <MDBContainer>
                      <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>
                  </MDBMask>
                </MDBView>
              </>
            );
          }
        }

        export default MinimalisticIntro;