Update Color dan Icon

yakubhariana70 · Nov 17, 2023 · fa67bee · fa67bee
1 parent e4eca49
commit fa67bee
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 32 deletions.
diff --git a/src/assets/jakarta-home.jpg b/src/assets/jakarta-home.jpg
diff --git a/src/pages/DirectionMap/DirectionMap.jsx b/src/pages/DirectionMap/DirectionMap.jsx
@@ -106,9 +106,9 @@ const DirectionMap = () => {
           visibility: "visible",
         },
         paint: {
-          "fill-color": "#009B98",
-          "fill-opacity": 0.15,
-          "fill-outline-color": "white",
+          "fill-color": "rgba(204,52,51,0.15)",
+          "fill-opacity": 1,
+          "fill-outline-color": "black",
         },
       });
 
@@ -131,7 +131,7 @@ const DirectionMap = () => {
           "line-cap": "round",
         },
         paint: {
-          "line-color": "blue",
+          "line-color": "#cc3433",
           "line-width": 2,
         },
       });
@@ -155,7 +155,7 @@ const DirectionMap = () => {
           "line-cap": "round",
         },
         paint: {
-          "line-color": "red",
+          "line-color": "#1A1D40",
           "line-width": 2,
         },
       });
@@ -179,7 +179,7 @@ const DirectionMap = () => {
           "line-cap": "round",
         },
         paint: {
-          "line-color": "#877b59",
+          "line-color": "#C2FE46",
           "line-width": 2,
         },
       });

diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css
@@ -22,47 +22,69 @@ header {
 }
 
 .home-picture {
-    /* height: 40vh; */
-    flex: 1 1 50vh;
-    border: 1px solid gray;
-    background-image: url("../../assets/jakarta-home.jpg");
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
+  /* height: 40vh; */
+  flex: 1 1 50vh;
+  border: 1px solid gray;
+  background-image: url("../../assets/jakarta-home.jpg");
+  background-size: cover;
+  background-position: top;
+  background-repeat: no-repeat;
 }
 
 .home-content {
   flex: 1 1 50vh;
   position: relative;
   display: flex;
-  padding: 4rem 4rem ;
+  padding: 4rem 4rem;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
 
-
-.hero-section{
+.hero-section {
   width: 40vw;
 }
 
-.hero-section h1{
+.hero-section h1 {
+  font-size: calc(26px + 0.312vw);
+  font-weight: bold;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+}
+.hero-section sub {
+  font-size: calc(14px + 0.312vw);
+  text-transform: uppercase;
   font-weight: bold;
-  margin-bottom: 2rem;
+  color: lightslategray;
 }
 
-.hero-section p{
-  font-size: large;
+.hero-section p {
+  margin-top: 2rem;
+  font-size: calc(14px + 0.312vw);
+  text-align: justify;
+  margin-bottom: 3rem;
 }
 
-.hero-section .btn{
-  margin-top: 1.5rem;
+.hero-section .btn-hero {
+  background-color: #1A1D40;
+  text-decoration: none;
+  font-weight: bold;
+  color: white;
+  padding: 1rem;
+  padding-inline: 2rem;
+  text-align: center;
+  border-radius: 3rem;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
 }
 
 /* PHONE */
 @media (max-height: 576px), screen and (orientation: portrait) {
-  .home-content{
+  .home-content {
     padding: 3rem 2rem;
   }
-  .hero-section{
+  .hero-section {
     width: 100%;
   }
+  .home-picture{
+    background-position: center;
+  }
 }
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 import NavigationBar from "../../components/NavigationBar";
-import {Link} from "react-router-dom";
+import { Link } from "react-router-dom";
 
 // CSS
 import "./Home.css";
@@ -16,15 +16,15 @@ const Home = () => {
       <div className="home-picture"></div>
       <div className="home-content">
         <div className="hero-section">
-          <h1>Jelajahi Pesona Budaya dan Wisata Jakarta Bersama Kami</h1>
+          <h1>Selamat Datang di Paryatana Bhumi Jakarta!</h1>
+          <sub>Jelajahi Keindahan Bertamasya di Kota Jakarta.</sub>
           <p>
-            Terbenam dalam pesona Jakarta, kota yang tak hanya menawarkan
-            kehidupan perkotaan yang berdenyut, tetapi juga mempersembahkan
-            warisan budaya yang tak ternilai. Mulailah petualangan Anda dan
-            temukan cerita di setiap sudutnya
+            Temukan warisan sejarah dan keindahan yang menggugah jiwa kota ini.
+            Dapatkan pengalaman unik dengan peta interaktif hasil karya Dipo
+            Journey. Saksikan Jakarta dari perspektif tiga dimensi &#40;3D&#41;.
           </p>
-          <Link to="/direction-map" className="btn btn-success">
-            Jelajahi Pariwisata Jakarta
+          <Link to="/storytelling" className="btn-hero">
+            Mulai Petualanganmu!
           </Link>
         </div>
       </div>

diff --git a/src/pages/Storytelling/Storytelling.css b/src/pages/Storytelling/Storytelling.css
@@ -68,6 +68,18 @@
   /* height: 100px; */
   border-radius: calc(15px + 0.312vw);
 }
+.chapter .btn-hero {
+  background-color: #1A1D40;
+  text-decoration: none;
+  font-weight: bold;
+  color: white;
+  padding: 1rem;
+  padding-inline: 2rem;
+  text-align: center;
+  border-radius: 3rem;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+}
 
 /* PHONE */
 @media (max-width: 576px), screen and (orientation: portrait) {

diff --git a/src/pages/Storytelling/Storytelling.jsx b/src/pages/Storytelling/Storytelling.jsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import mapboxgl from "mapbox-gl";
 import { useInView } from "react-intersection-observer";
+import { Link } from "react-router-dom";
 
 import NavigationBar from "../../components/NavigationBar";
 import TourismStory from "./TourismStory";
@@ -354,6 +355,9 @@ const Storytelling = () => {
           </section>
           <section className="chapter" ref={sectionThirteen}>
             <TourismStory story={config.chapters[12]} />
+            <Link to="/direction-map" className="btn-hero">
+              Tourism Map
+            </Link>
           </section>
         </main>
       </section>