briancodex · kisbayu · Jul 20, 2022 · Jul 22, 2022
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -6,10 +6,16 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^5.2.0",
     "react": "^16.13.1",
+    "react-bootstrap": "^2.4.0",
     "react-dom": "^16.13.1",
+    "react-icons": "^4.4.0",
+    "react-player": "^2.10.1",
+    "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "use-interval": "^1.4.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/images/topi_miring.jpg b/public/images/topi_miring.jpg
diff --git a/public/index.html b/public/index.html
@@ -35,7 +35,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <title>Desa Bomba</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
@@ -50,5 +52,8 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
   </body>
 </html>
diff --git a/public/videos/video-2.mp4 b/public/videos/video-2.mp4
diff --git a/src/App.js b/src/App.js
@@ -3,9 +3,8 @@ import Navbar from './components/Navbar';
 import './App.css';
 import Home from './components/pages/Home';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
-import Services from './components/pages/Services';
-import Products from './components/pages/Products';
-import SignUp from './components/pages/SignUp';
+import Profile from './components/pages/Profile';
+import Destination from './components/pages/Destination'
 
 function App() {
   return (
@@ -14,9 +13,8 @@ function App() {
         <Navbar />
         <Switch>
           <Route path='/' exact component={Home} />
-          <Route path='/services' component={Services} />
-          <Route path='/products' component={Products} />
-          <Route path='/sign-up' component={SignUp} />
+          <Route path='/profile' component={Profile} />
+          <Route path='/destination' component={Destination} />
         </Switch>
       </Router>
     </>

diff --git a/src/components/AboutUs.css b/src/components/AboutUs.css
@@ -0,0 +1,12 @@
+.AboutUs{
+    background-color: #fff;
+}
+
+.AboutUs-container{
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    object-fit: contain;
+    justify-content: center;
+    align-items: center;
+}
diff --git a/src/components/AboutUs.jsx b/src/components/AboutUs.jsx
@@ -0,0 +1,28 @@
+import React from 'react'
+import './AboutUs.css'
+import Fade from 'react-reveal/Fade';
+
+function AboutUs() {
+  return (
+    <div className="AboutUs pb-5">
+        <div className="AboutUs-container">
+          <div className="container align-content-center">
+            <div className="row mt-5">
+              <div className="col-6">
+                <img src="images/img-6.jpg" alt="bomba-2" className='img-thumbnail rounded' />
+              </div>
+              <div className="col-6 ">
+                <Fade delay={1000} duration={2000} right>
+                <h2>Tentang Kami</h2>
+                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus expedita porro tenetur voluptatum est. Voluptate soluta obcaecati impedit unde deleniti reiciendis, eveniet eligendi libero laborum? Maxime, dolorem natus deleniti nostrum molestias temporibus. Laborum dolorum minus natus placeat non eligendi, deleniti ut cumque et, laudantium consequuntur enim est corrupti? Facere vero assumenda quibusdam sit voluptate. Lorem ipsum dolor sit amet consectetur adipisicing elit. At incidunt laudantium omnis earum? Sed aliquam rerum quae modi velit cumque?</p>
+                </Fade>
+              </div>
+            </div>
+
+          </div>
+        </div>
+    </div>
+  )
+}
+
+export default AboutUs
diff --git a/src/components/Employee.css b/src/components/Employee.css
diff --git a/src/components/Employee.jsx b/src/components/Employee.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import './Employee.css'
+import Card from 'react-bootstrap/Card';
+
+function Employee(props) {
+  return (
+    <div className="employee">
+      <div className="employee-list mr-5 text-center">
+      <Card style={{ width: '18rem' }}>
+      <Card.Img variant="top" src="images/topi_miring.jpg" />
+      <Card.Body>
+        <Card.Title>{props.name}</Card.Title>
+        <Card.Text>
+          {props.title}
+        </Card.Text>
+      </Card.Body>
+    </Card>
+      </div>
+    </div>
+  )
+}
+
+export default Employee
diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -1,74 +1,14 @@
 import React from 'react';
 import './Footer.css';
-import { Button } from './Button';
 import { Link } from 'react-router-dom';
 
 function Footer() {
   return (
     <div className='footer-container'>
-      <section className='footer-subscription'>
-        <p className='footer-subscription-heading'>
-          Join the Adventure newsletter to receive our best vacation deals
-        </p>
-        <p className='footer-subscription-text'>
-          You can unsubscribe at any time.
-        </p>
-        <div className='input-areas'>
-          <form>
-            <input
-              className='footer-input'
-              name='email'
-              type='email'
-              placeholder='Your Email'
-            />
-            <Button buttonStyle='btn--outline'>Subscribe</Button>
-          </form>
-        </div>
-      </section>
-      <div class='footer-links'>
-        <div className='footer-link-wrapper'>
-          <div class='footer-link-items'>
-            <h2>About Us</h2>
-            <Link to='/sign-up'>How it works</Link>
-            <Link to='/'>Testimonials</Link>
-            <Link to='/'>Careers</Link>
-            <Link to='/'>Investors</Link>
-            <Link to='/'>Terms of Service</Link>
-          </div>
-          <div class='footer-link-items'>
-            <h2>Contact Us</h2>
-            <Link to='/'>Contact</Link>
-            <Link to='/'>Support</Link>
-            <Link to='/'>Destinations</Link>
-            <Link to='/'>Sponsorships</Link>
-          </div>
-        </div>
-        <div className='footer-link-wrapper'>
-          <div class='footer-link-items'>
-            <h2>Videos</h2>
-            <Link to='/'>Submit Video</Link>
-            <Link to='/'>Ambassadors</Link>
-            <Link to='/'>Agency</Link>
-            <Link to='/'>Influencer</Link>
-          </div>
-          <div class='footer-link-items'>
-            <h2>Social Media</h2>
-            <Link to='/'>Instagram</Link>
-            <Link to='/'>Facebook</Link>
-            <Link to='/'>Youtube</Link>
-            <Link to='/'>Twitter</Link>
-          </div>
-        </div>
-      </div>
-      <section class='social-media'>
+      {/* <section class='social-media'>
         <div class='social-media-wrap'>
-          <div class='footer-logo'>
-            <Link to='/' className='social-logo'>
-              TRVL
-              <i class='fab fa-typo3' />
-            </Link>
-          </div>
-          <small class='website-rights'>TRVL © 2020</small>
+
+          <small class='website-rights'>Desa Bomba © 2022</small>
           <div class='social-icons'>
             <Link
               class='social-icon-link facebook'
@@ -112,7 +52,7 @@ function Footer() {
             </Link>
           </div>
         </div>
-      </section>
+      </section> */}
     </div>
   );
 }

diff --git a/src/components/HeroSection.js b/src/components/HeroSection.js
@@ -1,15 +1,18 @@
 import React from 'react';
 import '../App.css';
-import { Button } from './Button';
 import './HeroSection.css';
+import Fade from 'react-reveal/Fade';
 
 function HeroSection() {
   return (
     <div className='hero-container'>
       <video src='/videos/video-1.mp4' autoPlay loop muted />
-      <h1>ADVENTURE AWAITS</h1>
-      <p>What are you waiting for?</p>
-      <div className='hero-btns'>
+      <Fade delay={1500} duration={2000} top>
+        <h1>SELAMAT DATANG</h1>
+        <p>di Laman Resmi Desa Bomba</p>
+      </Fade>
+
+      {/* <div className='hero-btns'>
         <Button
           className='btns'
           buttonStyle='btn--outline'
@@ -25,7 +28,7 @@ function HeroSection() {
         >
           WATCH TRAILER <i className='far fa-play-circle' />
         </Button>
-      </div>
+      </div> */}
     </div>
   );
 }

diff --git a/src/components/History.css b/src/components/History.css
@@ -0,0 +1,4 @@
+img{
+    z-index: -10;
+}
+
diff --git a/src/components/History.jsx b/src/components/History.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import './History.css'
+
+function History() {
+  return (
+    <div className="history">
+      <div className="container">
+
+        <div className="row clearfix">
+          <div className="col-6">
+          <img src="images/img-home.jpg" alt="bomba-2" className='img-fluid rounded' />
+          </div>
+          <div className="col-6 ">
+          <h2>Sejarah Desa</h2>
+          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Architecto, iusto amet! Nobis similique placeat iste autem quia veritatis facere quam vel perferendis non quos impedit facilis architecto, minima est voluptas nulla veniam odit itaque. Facere consectetur inventore deleniti suscipit iure possimus consequuntur hic, unde perspiciatis voluptas, cumque numquam velit tempore quas ut voluptatum distinctio ab quaerat obcaecati alias, aspernatur cum eveniet ipsum recusandae. Eligendi quasi atque mollitia natus voluptates, suscipit nobis eveniet sapiente tempore similique pariatur maiores quidem tenetur obcaecati nostrum rerum, cumque quod, corrupti laboriosam delectus minus voluptatibus! Aliquam, temporibus! Magni dolor, officiis, possimus reiciendis dolore hic enim illum obcaecati quo deserunt explicabo vel repellat nemo praesentium a libero autem exercitationem corporis distinctio doloribus! Ducimus quas distinctio possimus doloremque a tempora? Minima deserunt error inventore exercitationem modi corrupti omnis, quis illo laudantium iste, eos animi eum reiciendis quibusdam eius commodi dolores distinctio expedita? Architecto molestiae numquam rerum unde, consectetur maiores exercitationem harum ad laborum ratione doloribus suscipit corrupti odit? Voluptatem accusantium veniam suscipit adipisci accusamus, alias, odio ad quis repudiandae culpa rem ipsa esse quasi. Qui voluptas quo ullam nam! Pariatur, fugiat neque! Itaque libero possimus accusantium, qui sint totam aliquid eum odio delectus dolorum, magni, explicabo eveniet neque?</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default History
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Button } from './Button';
+// import { Button } from './Button';
 import { Link } from 'react-router-dom';
 import './Navbar.css';
 
@@ -27,50 +27,50 @@ function Navbar() {
   return (
     <>
       <nav className='navbar'>
-        <div className='navbar-container'>
+        <div className='navbar-container align-middle'>
           <Link to='/' className='navbar-logo' onClick={closeMobileMenu}>
-            TRVL
-            <i class='fab fa-typo3' />
+            <i className='fab fa-typo3 mr-3 mb-lg-3' />
+            <div className='mb-lg-3'>Bomba</div> 
           </Link>
           <div className='menu-icon' onClick={handleClick}>
             <i className={click ? 'fas fa-times' : 'fas fa-bars'} />
           </div>
           <ul className={click ? 'nav-menu active' : 'nav-menu'}>
             <li className='nav-item'>
               <Link to='/' className='nav-links' onClick={closeMobileMenu}>
-                Home
+                Beranda
               </Link>
             </li>
             <li className='nav-item'>
               <Link
-                to='/services'
+                to='/profile'
                 className='nav-links'
                 onClick={closeMobileMenu}
               >
-                Services
+                Profil Desa
               </Link>
             </li>
             <li className='nav-item'>
               <Link
-                to='/products'
+                to='/destination'
                 className='nav-links'
                 onClick={closeMobileMenu}
               >
-                Products
+                Destinasi Wisata
               </Link>
             </li>
 
-            <li>
+            {/* <li>
               <Link
                 to='/sign-up'
                 className='nav-links-mobile'
                 onClick={closeMobileMenu}
               >
-                Sign Up
+                Sign In
               </Link>
-            </li>
+            </li> */}
           </ul>
-          {button && <Button buttonStyle='btn--outline'>SIGN UP</Button>}
+          {/* {button && <Button buttonStyle='btn--outline'>SIGN UP</Button>} */}
         </div>
       </nav>
     </>

diff --git a/src/components/Stat.css b/src/components/Stat.css
@@ -0,0 +1,13 @@
+.stat{
+    background-color: #fff;
+}
+
+.stat-container{
+    background-color: #1c1c1c;
+    color: #fff;
+    justify-self: center;
+}
+
+.row{
+    justify-content: center;
+}