1

components/Hero.vue

@@ -1,27 +1,36 @@
 <template>
-  <section class="text-cPrimary body-font">
+  <section class="text-cWhite bg-cGelap">
     <div
       class="container flex flex-col items-center px-5 py-24 mx-auto md:flex-row"
     >
       <div
-        class="flex flex-col items-center mb-16 text-center lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 md:items-start md:text-left md:mb-0"
+        class="flex flex-col items-center mb-4 text-center lg:flex-grow md:w-1/2 md:items-start md:text-left "
       >
         <h1
-          class="mb-4 text-4xl font-medium uppercase text-cGelap title-font sm:text-5xl"
+          class="mb-4 text-4xl font-medium uppercase text-cTerang title-font sm:text-5xl"
         >
           Welcome to<br class="hidden lg:inline-block" />
           <span class="text-cUngu"> Indonesian Coffe Website </span>
         </h1>
-        <p class="leading-relaxed ">
-          Indonesia is a country rich in natural wealth, one of the abundant natural products in Indonesia is coffee. Indonesian coffee is one of the best in the world. this website will discuss about coffee both in Indonesia and the world
+        <p class="mb-8 leading-relaxed">
+          Indonesia is a country rich in natural wealth, one of the abundant
+          natural products in Indonesia is coffee. Indonesian coffee is one of
+          the best in the world. this website will discuss about coffee both in
+          Indonesia and the world
         </p>
       </div>
       <div class="w-full md:w-1/2">
         <TwicImg
-          class="object-cover object-center rounded"
+          class="object-cover object-center w-full transition duration-300 ease-in-out rounded hover:scale-95 h-[250]"
           alt="hero"
+          title="hero"
           src="/img/coffee1.jpg"
           format="webp"
+          fokus="left"
+          placeholder="preview"
+          ratio="5/4"
+          resize="cover"
+          mode="cover"
         />
       </div>
     </div>
@@ -47,4 +56,4 @@
   transitionDelay="<String>"
   transitionDuration="<String>"
   transitionTimingFunction="<String>"
-/> -->
+/> -->

components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="fixed top-0 z-50 w-full p-4 bg-cPrimary">
+  <header class="fixed top-0 z-50 w-full p-4 bg-cGelap">
     <div class="flex items-center justify-between mx-auto text-white">
       <a
         rel="noopener noreferrer"
@@ -56,7 +56,7 @@
               leave-to-class="transform scale-95 opacity-0"
             >
               <MenuItems
-                class="absolute right-0 w-56 origin-top-right rounded-md shadow-xl bg-cPrimary mt-7"
+                class="absolute right-0 w-56 origin-top-right rounded-md shadow-xl bg-cGelap mt-7"
               >
                 <div class="p-4 space-y-4">
                   <MenuItem v-slot="{ active, close }">

layouts/default.vue

@@ -1,6 +1,6 @@
 <template>
   <NavBar />
-  <div class="py-20">
+  <div class="">
     <slot />
   </div>
   <Footer />