Code cleanup - fixed all items resulting in react compile warnings

package.json

@@ -11,7 +11,8 @@
     "html templates",
     "website design",
     "html5",
-    "trending design"
+    "trending design",
+    "react"
   ],
   "homepage": "https://www.froala.com/design-blocks",
   "license": "https://github.com/froala/react-froala-design-blocks/blob/master/LICENSE",
@@ -25,13 +26,13 @@
     }
   ],
   "dependencies": {
-    "bootstrap": "^4.1.3",
+    "bootstrap": "^5.1.3",
     "capitalize": "^2.0.0",
     "froala-design-blocks": "~2.0.0",
     "react": "^16.6.1",
     "react-dom": "^16.6.1",
     "react-iframe": "^1.3.3",
-    "react-router-dom": "^4.3.1",
+    "react-router-dom": "^6.0.2",
     "react-scripts": "2.1.1",
     "replace-in-file": "^3.4.2"
   },

src/App.css

@@ -20,4 +20,8 @@
 
 #navigator + section {
   padding: 250px 0;
+}
+
+.bg-dark .fdb-box {
+  background: gray;
 }

src/App.js

@@ -2,8 +2,8 @@ import './App.css';
 import '../node_modules/bootstrap/dist/css/bootstrap.css';
 import '../node_modules/froala-design-blocks/dist/css/froala_blocks.css';
 
-import { Link, Route, BrowserRouter as Router } from "react-router-dom";
-import React, { Component } from 'react';
+import { Link, Route, Routes, BrowserRouter as Router } from "react-router-dom";
+import React from 'react';
 
 import CallToAction from './CallToAction.jsx';
 import Contacts from './Contacts.jsx';
@@ -15,9 +15,13 @@ import Headers from './Headers.jsx';
 import Pricings from './Pricings.jsx';
 import Teams from './Teams.jsx';
 import Testimonials from './Testimonials.jsx';
+import Lists from './Lists.jsx';
+import Carousels from './Carousels.jsx'; 
+import Gallery from "./Gallery.jsx";
+import Sample1 from './Sample1.jsx';
+import Sample2 from './Sample2.jsx';
 
-class App extends Component {
-  render() {
+function App() {
     return (
       <Router>
       <div>
@@ -54,32 +58,39 @@ class App extends Component {
                   <Link className="btn btn-outline-primary m-1" to="/pricings">Pricings</Link>
                   <Link className="btn btn-outline-primary m-1" to="/teams">Teams</Link>
                   <Link className="btn btn-outline-primary m-1" to="/testimonials">Testimonials</Link>
+                  <Link className="btn btn-outline-primary m-1" to="/lists">Lists</Link>
+                  <Link className="btn btn-outline-primary m-1" to="/carousels">Carousels</Link>
+                  <Link className="btn btn-outline-primary m-1" to="/gallery">Gallery</Link>
+                  <Link className="btn btn-outline-primary m-1" to="/sample1">Sample</Link>
+                  <Link className="btn btn-outline-primary m-1" to="/sample2">Sample 2</Link>
                 </nav>
               </div>
             </nav>
           </div>
         </section>
 
-         <Route exact path="/call-to-action" component={CallToAction} />
-         <Route exact path="/contacts" component={Contacts} />
-         <Route exact path="/contents" component={Contents} />
-         <Route exact path="/features" component={Features} />
-         <Route exact path="/footers" component={Footers} />
-         <Route exact path="/forms" component={Forms} />
-         <Route exact path="/headers" component={Headers} />
-         <Route exact path="/pricings" component={Pricings} />
-         <Route exact path="/teams" component={Teams} />
-         <Route exact path="/testimonials" component={Testimonials} />
+        <Routes>
+         <Route exact path="/call-to-action" element={<CallToAction />} />
+         <Route exact path="/contacts" element={<Contacts />} />
+         <Route exact path="/contents" element={<Contents />} />
+         <Route exact path="/features" element={<Features />} />
+         <Route exact path="/footers" element={<Footers />} />
+         <Route exact path="/forms" element={<Forms />} />
+         <Route exact path="/headers" element={<Headers />} />
+         <Route exact path="/pricings" element={<Pricings />} />
+         <Route exact path="/teams" element={<Teams />} />  
+         <Route exact path="/testimonials" element={<Testimonials />} />
+         <Route exact path="/lists" element={<Lists />} />
+         <Route exact path="/carousels" element={<Carousels />} />
+         <Route exact path="/gallery" element={<Gallery />} />
+         <Route exact path="/sample1" element={<Sample1 />} />
+         <Route exact path="/sample2" element={<Sample2 />} />
+
+         <Route path="/" element={<Sample1 />} />
+         </Routes>
         </div>
        </Router>
     );
-  }
-}
-
-function Home() {
-  return (
-    ''
-  );
 }
 
 export default App;

src/CallToAction.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import CallToAction01 from './call-to-action/CallToAction01.jsx';
 import CallToAction02 from './call-to-action/CallToAction02.jsx';
@@ -23,9 +23,8 @@ import CallToAction20 from './call-to-action/CallToAction20.jsx';
 import CallToAction21 from './call-to-action/CallToAction21.jsx';
 import CallToAction22 from './call-to-action/CallToAction22.jsx';
 
-class CallToAction extends Component {
-  render() {
-    return (
+function CallToAction(props) {
+  return (
       <div>
         <CallToAction01></CallToAction01>
         <CallToAction02></CallToAction02>
@@ -51,7 +50,6 @@ class CallToAction extends Component {
         <CallToAction22></CallToAction22>
       </div>
     )
-  }
 }
 
 export default CallToAction

src/Carousels.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import Carousel01 from './carousels/Carousel01.jsx';
+import Carousel02 from './carousels/Carousel02.jsx';
+
+function Contents(props) {
+
+  let dark=true;
+
+  return (
+      <div>
+        <Carousel01 dark={dark} />
+        <Carousel02 dark={dark} />
+      </div>
+    )
+}
+
+export default Contents

src/Contacts.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import Contacts01 from './contacts/Contacts01.jsx';
 import Contacts02 from './contacts/Contacts02.jsx';
@@ -11,23 +11,24 @@ import Contacts08 from './contacts/Contacts08.jsx';
 import Contacts09 from './contacts/Contacts09.jsx';
 import Contacts10 from './contacts/Contacts10.jsx';
 
-class Contacts extends Component {
-  render() {
-    return (
+function Contacts(props) {
+
+  let dark=true;
+
+  return (
       <div>
-        <Contacts01></Contacts01>
-        <Contacts02></Contacts02>
-        <Contacts03></Contacts03>
-        <Contacts04></Contacts04>
-        <Contacts05></Contacts05>
-        <Contacts06></Contacts06>
-        <Contacts07></Contacts07>
-        <Contacts08></Contacts08>
-        <Contacts09></Contacts09>
-        <Contacts10></Contacts10>
+        <Contacts01 dark={dark} />
+        <Contacts02 dark={dark} />
+        <Contacts03 dark={dark} />
+        <Contacts04 dark={dark} />
+        <Contacts05 dark={dark} />
+        <Contacts06 dark={dark} />
+        <Contacts07 dark={dark} />
+        <Contacts08 dark={dark} />
+        <Contacts09 dark={dark} />
+        <Contacts10 dark={dark} />
       </div>
     )
-  }
 }
 
 export default Contacts

src/Contents.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import Contents01 from './contents/Contents01.jsx';
 import Contents02 from './contents/Contents02.jsx';
@@ -35,49 +35,52 @@ import Contents32 from './contents/Contents32.jsx';
 import Contents33 from './contents/Contents33.jsx';
 import Contents34 from './contents/Contents34.jsx';
 import Contents35 from './contents/Contents35.jsx';
+import Contents36 from './contents/Contents36.jsx';
 
-class Contents extends Component {
-  render() {
-    return (
+function Contents(props) {
+
+  let dark=true;
+
+  return (
       <div>
-        <Contents01></Contents01>
-        <Contents02></Contents02>
-        <Contents03></Contents03>
-        <Contents04></Contents04>
-        <Contents05></Contents05>
-        <Contents06></Contents06>
-        <Contents07></Contents07>
-        <Contents08></Contents08>
-        <Contents09></Contents09>
-        <Contents10></Contents10>
-        <Contents11></Contents11>
-        <Contents12></Contents12>
-        <Contents13></Contents13>
-        <Contents14></Contents14>
-        <Contents15></Contents15>
-        <Contents16></Contents16>
-        <Contents17></Contents17>
-        <Contents18></Contents18>
-        <Contents19></Contents19>
-        <Contents20></Contents20>
-        <Contents21></Contents21>
-        <Contents22></Contents22>
-        <Contents23></Contents23>
-        <Contents24></Contents24>
-        <Contents25></Contents25>
-        <Contents26></Contents26>
-        <Contents27></Contents27>
-        <Contents28></Contents28>
-        <Contents29></Contents29>
-        <Contents30></Contents30>
-        <Contents31></Contents31>
-        <Contents32></Contents32>
-        <Contents33></Contents33>
-        <Contents34></Contents34>
-        <Contents35></Contents35>
+        <Contents01 dark={dark} />
+        <Contents02 dark={dark} />
+        <Contents03 dark={dark} />
+        <Contents04 dark={dark} />
+        <Contents05 dark={dark} />
+        <Contents06 dark={dark} />
+        <Contents07 dark={dark} />
+        <Contents08 dark={dark} />
+        <Contents09 dark={dark} />
+        <Contents10 dark={dark} />
+        <Contents11 dark={dark} />
+        <Contents12 dark={dark} />
+        <Contents13 dark={dark} />
+        <Contents14 dark={dark} />
+        <Contents15 dark={dark} />
+        <Contents16 dark={dark} />
+        <Contents17 dark={dark} />
+        <Contents18 dark={dark} />
+        <Contents19 dark={dark} />
+        <Contents20 dark={dark} />
+        <Contents21 dark={dark} />
+        <Contents22 dark={dark} />
+        <Contents23 dark={dark} />
+        <Contents24 dark={dark} />
+        <Contents25 dark={dark} />
+        <Contents26 dark={dark} />
+        <Contents27 dark={dark} />
+        <Contents28 dark={dark} />
+        <Contents29 dark={dark} />
+        <Contents30 dark={dark} />
+        <Contents31 dark={dark} />
+        <Contents32 dark={dark} />
+        <Contents33 dark={dark} />
+        <Contents34 dark={dark} />
+        <Contents35 dark={dark} />
+        <Contents36 dark={dark} />
       </div>
     )
-  }
 }
 
 export default Contents

src/Features.jsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 
 import Features01 from './features/Features01.jsx';
 import Features02 from './features/Features02.jsx';
@@ -34,9 +34,8 @@ import Features31 from './features/Features31.jsx';
 import Features32 from './features/Features32.jsx';
 import Features33 from './features/Features33.jsx';
 
-class Features extends Component {
-  render() {
-    return (
+function Features(props) {
+  return (
       <div>
         <Features01></Features01>
         <Features02></Features02>
@@ -73,7 +72,6 @@ class Features extends Component {
         <Features33></Features33>
       </div>
     )
-  }
 }
 
 export default Features