Merge pull request #20 from ourworldventures/development

EDIT PHONE

.github/workflows/tf_update_prod.yml

@@ -10,10 +10,10 @@ jobs:
     name: Deploy
     runs-on: ubuntu-latest
     steps:
-    - name: pushing latest change on www.jungleparadise.tf
+    - name: pushing latest change on www.beach-resort-zanzibar.com
       uses: appleboy/ssh-action@master
       with:
-        host: www.jungleparadise.tf
+        host: www.beach-resort-zanzibar.com
         username: ${{ secrets.TF_USER }}
         key: ${{ secrets.TF_SECRET }}
         port: ${{ secrets.TF_PORT }}

README.md

@@ -4,10 +4,11 @@
 
 The official website of Jungle Paradise - Beach Resort Zanzibar
 
-[https://jungleparadise.tf/](https://jungleparadise.tf/)
+Production (master branch) [https://jungleparadise.tf/](https://jungleparadise.tf/)
 
 [https://www.beach-resort-zanzibar.com/](https://www.beach-resort-zanzibar.com/)
 
+Staging (development branch) [https://www2.jungleparadise.tf/](https://www2.jungleparadise.tf/)
 Last Updated: March 2023
 
 ## Contribution

content/_index.md

@@ -7,7 +7,7 @@ draft: false
 sort_by: weight
 weight: 1
 extra:
-    logo_path: images/mbweni_logo.png
+    logo_path: images/logo.png
 ---
 
 

content/home/index.md

@@ -9,24 +9,24 @@ weight: 1
 
 <!-- section 1 (header) -->
 
-{% row(style="center" bgColor="#EEEBE4" padding="both" bgStyle="full" margin="narrow") %}
+{% row(style="center" bgColor="#EEEBE4" padding="bottom" bgStyle="full" margin="narrow") %}
 
+<br>
 
+<br>
 
 <div class="container mx-auto">
 
-<div class="mt-5 lg:mt-0">
-
 ![Image](./img/home_header1.webp#mx-auto)
 
-</div>
+
 
 ## A Historic Haven in Nature's Embrace
 
-### Immerse yourself in the tranquil ambiance of nature’s lush greenery and the echoes of a storied past
+### Immerse yourself in the tranquil ambiance of nature’s lush greenery and the echoes of a storied past.
 
 <p class="max-w-6xl mx-auto">Immerse yourself in the rich tapestry of history while surrounded by lush landscapes. From the captivating ruins to the soothing sounds of the ocean, every moment at Jungle Paradise is an invitation to connect with the essence of the past and embrace the serenity of the present.</p>
-
+<br>
 
 <button><a href="https://hotels.cloudbeds.com/reservation/DNw5Ek#checkin=2023-08-16&checkout=2023-08-17" target="_blank">Book Your Stay</a></button>
 
@@ -154,28 +154,16 @@ Sailing Trips, Ruins Tours, Private Events, Parties, and Many More
 
 {% row(style="center" padding="none" margin="wide") %}
 
-<div class="px-2">
-
 ![Image](./img/explore1.webp#mx-auto)
 
-</div>
-
 |||
 
-<div class="px-2">
-
 ![Image](./img/explore2.webp#mx-auto)
 
-</div>
-
 |||
 
-<div class="px-2">
-
 ![Image](./img/explore3.webp#mx-auto)
 
-</div>
-
 {% end %}
 
 <br>
@@ -203,11 +191,7 @@ Our dedicated team is committed to ensuring that every moment of your stay is no
 
 {% row(style="center" bgColor="#EEEBE4" padding="none" margin="none") %}
 
-
-
-
-![Image](./img/home_bottom.png#fill)
-
+![Image](./img/home_bottom1.webp#mx-auto)
 
 <br>
 
@@ -225,8 +209,9 @@ Our dedicated team is committed to ensuring that every moment of your stay is no
 }
 
 p{
-  margin-top:0px
+
+    margin: 0px 6px;
+
 }
 
-
     </style>

css/index.css

@@ -8,26 +8,10 @@
 @import "admonition.css";
 @import "tailwindcss/utilities";
 
-/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=Montserrat:wght@400;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&display=swap'); */
-
-
-@font-face {
-  font-family: "Lovera";
-  font-weight: 400;
-  src: url("https://https://www2.jungleparadise.tf/fonts/Lovera.otf") format("opentype");
-  src: url("../fonts/Lovera.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "Quicksand_Light";
-  font-weight: 400;
-  src: url("https://https://www2.jungleparadise.tf/fonts/Quicksand_Light.otf") format("opentype");
-  src: url("../fonts/Quicksand_Light.otf") format("opentype");
-}
-
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:wght@300;400;500;600;700&display=swap');
 /* Custom CSS for header partial */
 .backdrop-blur {
   -webkit-backdrop-filter: blur(40px);
@@ -36,20 +20,6 @@
   font-family: 'Josefin Sans', sans-serif;
 } */
 
-h1, h2, h3, h4, h5 {
-  color: #614734;
-  font-family: "Lovera", sans-serif;
-}
-
-p {
-  color: #614734;
-  font-family: "Quicksand_Light", sans-serif;
-}
-
-.button a {
-  font-family: "Lovera", sans-serif;
-}
-
 .bg-semi-white {
   background-color: rgba(255, 255, 255, 0.75);
 }
@@ -57,10 +27,7 @@ p {
 /* Custom css allowing image styling in markdown */
 
 .logo {
-  width: 35% !important;
-  padding-top: 5px;
-  padding-bottom: 5px;
-  margin-left: 6px;
+  width: 50% !important;
 }
 img[src*="#mx-auto"] {
   margin: auto;
@@ -153,14 +120,16 @@ img[src*="#fig"] {
     filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1);
 }
 
-
+* {
+  color: #775840 !important;
+}
 
 @layer components {
   h1 {
     @apply text-3xl lg:text-6xl xl:text-6xl font-normal text-gray-900 leading-4 my-4;
     font-family: 'Cormorant Infant', serif;
     line-height: 1.2;
-    font-weight: 400;
+    font-weight: 600;
     /* text-shadow: 2px 4px 4px rgb(36 36 36 / 50%); */
     
   }
@@ -171,7 +140,7 @@ img[src*="#fig"] {
     @apply text-2xl lg:text-4xl mt-3 lg:mt-8 font-light leading-4 my-2;
     font-family: 'Cormorant Infant', serif;
     line-height: 1.1;
-    font-weight: 400;
+    font-weight: 600;
     
   }
 
@@ -179,7 +148,7 @@ img[src*="#fig"] {
       @apply text-xl lg:text-2xl font-light leading-4 my-4;
       font-family: 'Cormorant Infant', serif;
       line-height: 2rem;
-      font-weight: 400;
+      font-weight: 500;
   }
 
 
@@ -198,7 +167,7 @@ img[src*="#fig"] {
     font-family: 'Cormorant Infant', serif;
     line-height: 1.2;
     color: #ffffff;
-    font-weight: 400;
+    font-weight: 600;
   }
   h3 strong {
     @apply font-medium;
@@ -227,24 +196,23 @@ img[src*="#fig"] {
     @apply inline-block
     text-base
     lg:text-xl
-    font-normal
+    font-bold
     px-8
     py-1
-    my-2
+    my-6
     border-2
     shadow
   }
 }
 
 button:hover  {
-  background-color: #886851;
-
+  background-color: #a38269;
+  /* color: #984210; */
 }
 
 button  {
-font-weight: 400;
-background-color: #614734;
-font-family: "Lovera", sans-serif;
+font-weight: 700;
+background-color: #775840;
 }
 
 .experience-btn {
@@ -270,8 +238,7 @@ font-family: "Lovera", sans-serif;
 }
 
 header .customize {
-    background-color:#614734;
-
+    background-color:#EEEBE4;
     position: fixed;
 }
 
@@ -282,7 +249,7 @@ footer .customize {
     flex-direction: column;
     align-items: center;
     padding-top: 40px;
-    /* padding-bottom: 40px; */
+    padding-bottom: 40px;
 }
 
 /* footer .customize img {
@@ -293,21 +260,19 @@ footer .customize {
 header .customize div {
     box-shadow: none;
     text-transform: capitalize;
-    font-family: "Lovera", sans-serif;
-    font-weight: 400 !important;
+    font-family: 'Cormorant Infant', serif;
+    font-weight: 700 !important;
 }
 
 button {
-  background-color: #614734;
-  ;
+  background-color: #775840;
   /* background: transparent; */
   color: rgb(255, 255, 255);
-  border-radius: 10px;
+  border-radius: 4px;
   border: none;
   box-shadow: none;
   padding-top:8px ;
   padding-bottom: 8px;
-  font-family: "Lovera", sans-serif;
 }
 
 a {
@@ -316,15 +281,15 @@ a {
 }
 
 a:hover{
-  color: #cab3a1  !important;
+  color: #a38269 !important;
 }
 
 nav a {
-  color: #ffffff !important;
+  color: #775840 !important;
 }
 
 nav a:hover {
-  color: #cab3a1 !important;
+  color: #a38269 !important;
 }
 
 
@@ -521,9 +486,6 @@ header {
   .header {
     padding: 80px 0;
   }
-  .logo{
-    width: 30% !important; 
-  }
 
   footer .customize {
    text-align: center;

templates/partials/footer.html

@@ -17,7 +17,7 @@
             <div class="py-4 px-4 sm:px-6">
                 <div class="lg:flex items-center lg:gap-4">
                   <a href="/" class="lg:mr-8 lg:mb-2 lg:col-span-1">
-                    <img class="lg:mx-4 mb-4 mx-auto" src="/images/mbweni_logo_color.png" alt="JPLogo" width="200px" height="auto" />
+                    <img class="lg:mx-4 mb-4 mx-auto" src="/images/hotel1.svg" alt="JPLogo" width="250px" height="auto" />
                   </a>
                     <div class="my-2 lg:mr-8 lg:mb-2 lg:col-span-1">
                         <div>
@@ -59,10 +59,10 @@
                 </div>
             </div>
             <img src="{{get_url(path='images/')}}" class="w-60" alt="">
-            {# <hr class="my-4 border-y-0 w-1/2 border-b-orange-900/50"> #}
-            <div class="rights flex justify-center items-center text-center mx-4 h-16 w-full text-white">
-            <p style="color: #fff;" class="text-base font-semibold my-0">© 2024  Mbweni Ruins & Gardens.  
-                <a href="https://threefold.io/" target="_blank" class="rights hard_blue my-0 text-base">All Rights Reserved.</a></p> 
+            <hr class="my-4 border-y-0 w-1/2 border-b-orange-900/50">
+            <div class="text-center mx-4">
+            <p class="text-base lg:text-lg font-semibold my-0">© 2023  Jungle Paradise Resort & SPA.  
+                <a href="https://threefold.io/" target="_blank" class="hard_blue my-0 text-base">All Rights Reserved.</a></p> 
             
             </div>
         </div>
@@ -72,21 +72,12 @@
 
 <style scoped>
     footer a {
-    color: #614734 !important;
+    color: #775840 !important;
     font-family: 'Cormorant Infant', serif;
     font-size: 1.25rem;
     line-height: 1.75rem;
     font-weight: 600;
  }
  footer a:hover{
-color: #7e624e !important;}
-
-.rights{
-    background-color: #614734;
-    color: #fff !important;}
-
-
-.rights a:hover{
-    color: #bdbdbd !important;
-}    
+color: #423023;}
 </style>

templates/partials/header.html

@@ -97,17 +97,17 @@
 {% else %}
     <header id="header-container">
         {% set header_class = config.extra.header_class | default(value='') %}
-        <div class="{{'z-10 header_BG border-b-[1px] border-white-900 fixed w-screen max-w-full ' ~ header_class}}">
+        <div class="{{'z-10 header_BG border-b-[1px] border-orange-900 fixed w-screen max-w-full ' ~ header_class}}">
             <div class="container mx-auto">
             <div class="relative z-50 shadow">
-            <div class="mx-auto flex z-50 shadow justify-between items-center pr-2 md:pr-0 py-2  px-3 lg:px-2 lg:justify-start lg:space-x-20">
+            <div class="mx-auto flex z-50 shadow justify-between items-center pr-2 md:pr-0 py-2 lg:px-2 lg:justify-start lg:space-x-20">
                 <div>
                     <a href="/" class="flex">
                         <img class="logo" src="{{logo_path}}" alt="Logo" />
                     </a>
                 </div>
                 <div class="-mr-2 -my-2 lg:hidden">
-                    <button id="hamburger-btn" type="button" class="drop_menu inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
+                    <button id="hamburger-btn" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition duration-150 ease-in-out my-2">
                         <!-- Heroicon name: menu -->
                         <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
@@ -124,7 +124,7 @@
                     <nav class="flex space-x-6">    
                     {% for page in section.pages %}
                     {% if page.extra.menu %} {% continue %} {% endif %}
-                        <a href="{{page.permalink}}" class="text-lg font-medium leading-6 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
+                        <a href="{{page.permalink}}" class="text-lg font-bold leading-6 focus:outline-none focus:text-gray-900 transition ease-in-out duration-150 mt-0">
                             {{page.title}}
                         </a>
                         <div class="relative">
@@ -174,7 +174,7 @@
             -->
         <div id="hamburger" class="hidden fixed mt-16 z-20 top-0 inset-x-0 transition transform origin-top-right lg:hidden">
             <div>
-                <div class="shadow-xs h-screen drop_menu divide-y-2 divide-gray-50">
+                <div class="shadow-xs h-screen bg-white divide-y-2 divide-gray-50">
                     <div class="pt-6 sm:px-12 md:px-16 lg:px-20 space-y-6 sm:space-y-8 sm:pb-8 max-h-screen overflow-y-auto">
     
                         <nav class="flex flex-col justify-around pb-12">
@@ -224,10 +224,4 @@
     </header>
     
 {% endif %}
-<style>
-    .drop_menu{
-        background-color: 
-        #614734;
-    }
-</style>
 

templates/shortcodes/row.html

@@ -44,7 +44,7 @@ Parameters:
     {% set row_class = row_class ~ " lg:items-center" %}
 {% endif %}
 
-{% set col_class = "flex-1 mb-2 md:mb-12 lg:mb-0" %}
+{% set col_class = "flex-1 mb-2 md:mb-12 lg:mb-0 lg:mx-4" %}
 
 
 {% set row_id = '' %}