update

src/App.js

@@ -1,24 +1,27 @@
-
-import React from 'react';
-import {Switch,Route, Redirect,BrowserRouter} from 'react-router-dom';
-import Home from './components/Home';
-import './App.css';
-// import "./App.css";
+import React from "react";
+import { Switch, Route, Redirect, BrowserRouter } from "react-router-dom";
+import "./App.css";
+import Ecotourism from "./components/page/ecotourism";
+import Home from "./components/Home";
+import Airwater from "./components/page/airwater";
+import NaturalFarming from "./components/page/natural-farming";
+import Reforestation from "./components/page/reforestration";
+import SeedBomb from "./components/page/seed-bomb";
 
 function App() {
   return (
     <React.Fragment>
       <BrowserRouter>
         <Switch>
-    <SinglePage />
-          <Route exact path="/" component={Home}/> 
-          {/* <Route exact path="/reforestation" component={Reforestation}/>
-          <Route exact path="/natural-farming" component={Natural}/>
-          <Route exact path="/ecotourism" component={Ecotourism}/>
-          <Route exact path="/seedsbomb" component={Seeds}/>
-          <Route exact path="/airwater" component={Air}/>
-          <Route exact path="/about" component={About}/> */}
-          <Redirect  to="/" component={Home}/>
+          <Ecotourism />
+
+          {/* <Route exact path="/" component={Home} />
+          <Route exact path="/reforestation" component={Reforestation} />
+          <Route exact path="/natural-farming" component={NaturalFarming} />
+          <Route exact path="/ecotourism" component={Ecotourism} />
+          <Route exact path="/seedsbomb" component={SeedBomb} />
+          <Route exact path="/airwater" component={Airwater} />
+          <Redirect to="/" component={Home} /> */}
         </Switch>
       </BrowserRouter>
     </React.Fragment>

src/components/Home.js

@@ -10,7 +10,7 @@ export default function home() {
   const DisplayData = () => {
     return data.map((res, index) => {
       console.log(res);
-      
+
       if (index % 2 === 0) {
         return (
           <div className="cover1">
@@ -42,7 +42,6 @@ export default function home() {
           </div>
         );
       } else {
-
         return (
           <div className={`cover2 ${res.className}`}>
             <div className="">

src/components/Navbar.js

@@ -2,80 +2,79 @@ import React from "react";
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
 
-import {
-  Link,
-} from "react-scroll";
+import { Link } from "react-scroll";
 
-function NavBar () {
-    return (
-      <React.Fragment>
-        <div id="sticky-nav">
-          <Navbar className="navbar navbar-light text-white">
-            <div className="container">
-              <Nav.Link id="v-logo">
-                <Link className="text-white">VitaminAir</Link>
-              </Nav.Link>
-              <Nav className="ml-auto">
-                  <Link className="nav"                   
-                    to="reforestation"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Reforestation
-                  </Link>
-                  <Link                    
-                    to="naturalfarming"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >                   
-                    NaturalFarming
-                  </Link>
-                  <Link                    
-                    to="ecotourism"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    Ecotourism
-                  </Link>
-                  <Link                    
-                    to="seedsbomb"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    SeedsBomb
-                  </Link>
-                  <Link                    
-                    to="airwater"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    AirWater
-                  </Link>
-                  <Link                   
-                    to="about"
-                    spy={true}
-                    smooth={true}
-                    offset={0}
-                    duration={500}
-                  >
-                    About
-                  </Link>
-              </Nav>
-            </div>
-          </Navbar>
-        </div>
-      </React.Fragment>
-    );
-  }
+function NavBar() {
+  return (
+    <React.Fragment>
+      <div id="sticky-nav">
+        <Navbar className="navbar navbar-light text-white">
+          <div className="container">
+            <Nav.Link id="v-logo">
+              <Link className="text-white">VitaminAir</Link>
+            </Nav.Link>
+            <Nav className="ml-auto">
+              <Link
+                className="nav"
+                to="reforestation"
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={500}
+              >
+                Reforestation
+              </Link>
+              <Link
+                to="naturalfarming"
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={500}
+              >
+                NaturalFarming
+              </Link>
+              <Link
+                to="ecotourism"
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={500}
+              >
+                Ecotourism
+              </Link>
+              <Link
+                to="seedsbomb"
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={500}
+              >
+                SeedsBomb
+              </Link>
+              <Link
+                to="airwater"
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={500}
+              >
+                AirWater
+              </Link>
+              <Link
+                to="about"
+                spy={true}
+                smooth={true}
+                offset={0}
+                duration={500}
+              >
+                About
+              </Link>
+            </Nav>
+          </div>
+        </Navbar>
+      </div>
+    </React.Fragment>
+  );
+}
 
 export default NavBar;

src/components/data/ecotourism.md

@@ -2,7 +2,7 @@
 
 We delivered your messages to the people who plant your trees. Watch their response, and make the connection.We delivered your messages to the people who plant your trees. Watch their response, and make the connection.We delivered your messages to the people who plant your trees. Watch their response, and make the connection.We delivered your messages to the people who plant your trees. Watch their response, and make the connection.We delivered your messages to the people who plant your trees. Watch their response, and make the connection.We delivered your messages to the people who plant your trees. Watch their response, and make the connection.We delivered your messages to the people who plant your trees. Watch their response, and make the connection.
 
-## Defintion
+## Definition
 
 the action of renewing forest cover (as by natural seeding or by the artificial planting of seeds or young trees) goto [vitaminair.com](https://www.vitaminair.org/)
 
@@ -14,6 +14,34 @@ pi install vitaminar
 
 ```bash
 import React form "react"
+class Toggle extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {isToggleOn: true};
+
+    // This binding is necessary to make `this` work in the callback
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick() {
+    this.setState(state => ({
+      isToggleOn: !state.isToggleOn
+    }));
+  }
+
+  render() {
+    return (
+      <button onClick={this.handleClick}>
+        {this.state.isToggleOn ? 'ON' : 'OFF'}
+      </button>
+    );
+  }
+}
+
+ReactDOM.render(
+  <Toggle />,
+  document.getElementById('root')
+);
 ```
 
 ## Contributing

src/components/data/index.json

@@ -4,7 +4,7 @@
     "subTitle": "Rebuild the planet",
     "desc": "For given the life for the next generation we have to think about the tree. The way we are living right now need to pay attention about it. If we live without the nature mean that we live without take a breath. There is only one way to rebuild our planet is to make our Earth become the green planet. To take care about it is start from you. ",
     "logo": "/img/tree.png",
-    "link": "/test1",
+    "link": "/src/components/page/reforestration.js",
     "className": "reforestation"
   },
   {

src/components/page/Footer.js → src/components/page/Detail-Footer.js

@@ -7,17 +7,18 @@ import { GoLocation } from "react-icons/go";
 
 function Footer() {
   return (
-    <div className="footer">
-      <div className="pt-5 pb-5 footer">
+    <div className="foot">
+      <div className="pt-5 pb-5 foot">
         <div className="container">
           <div className="row">
             {/* About Company */}
             <div className="col-lg-5 col-sx-12 about-company">
               <h1>Vitamin Air</h1>
-              <div className="text-center svg-social">
+              <div className=" svg-social">
                 <a href="https://www.facebook.com/">
                   <FaFacebookSquare />
                 </a>
+
                 <a href="https://www.instagram.com/">
                   <FaInstagram />
                 </a>

src/components/page/airwater.js

@@ -3,12 +3,13 @@ import React, { useState, useEffect } from "react";
 import { Container, Button } from "react-bootstrap";
 import "./singlePage.css";
 import Mardown from "react-markdown";
+import Footer from './Detail-Footer';
 
 
 const airwater = require("../data/airWater.md");
 
 
-const SinglePage = () => {
+const Airwater = () => {
   const [post, setPost] = useState("");
 
   useEffect(() => {
@@ -19,16 +20,17 @@ const SinglePage = () => {
   });
   return (
     <div id="single-page">
-      <Container className="container-background">
-        <Mardown>{post}</Mardown>
-        <div className="text-right">
-          <Button variant="outline-secondary">Goto HomePage</Button>
-        </div>
-      </Container>
-
+      <div className="ptb-5 detail ">
+        <Container className="container-background">
+          <Mardown>{post}</Mardown>
+          <div className="text-right">
+            <Button variant="outline-success">Goto HomePage</Button>
+          </div>
+        </Container>
+      </div>
+      <Footer />
     </div>
-
   );
 };
 
-export default SinglePage;
+export default Airwater;

src/components/page/ecotourism.js

@@ -3,10 +3,11 @@ import React, { useState, useEffect } from "react";
 import { Container, Button } from "react-bootstrap";
 import "./singlePage.css";
 import Mardown from "react-markdown";
+import Footer from "./Detail-Footer";
 
 const ecotourism = require("../data/ecotourism.md");
 
-const SinglePage = () => {
+const Ecotourism = () => {
   const [post, setPost] = useState("");
 
   useEffect(() => {
@@ -17,14 +18,17 @@ const SinglePage = () => {
   });
   return (
     <div id="single-page">
-      <Container className="container-background">
-        <Mardown>{post}</Mardown>
-        <div className="text-right">
-          <Button variant="outline-secondary">Goto HomePage</Button>
-        </div>
-      </Container>
+      <div className="ptb-5 detail ">
+        <Container className="container-background">
+          <Mardown>{post}</Mardown>
+          <div className="text-right">
+            <Button variant="outline-success">Goto HomePage</Button>
+          </div>
+        </Container>
+      </div>
+      <Footer/>
     </div>
   );
 };
 
-export default SinglePage;
+export default Ecotourism;