From e7e8d1747b6ff2c8a016cf4fe927451b4f6a5bca Mon Sep 17 00:00:00 2001
From: Sk <shakil@meghops.com>
Date: Mon, 26 Aug 2024 21:21:05 +0600
Subject: [PATCH 1/2] fix animation

---
 src/app/globals.css                          | 79 +++++++++++++++++++-
 src/components/OffCanvasMenu.tsx             | 21 ++++--
 src/components/location-detail-component.tsx |  8 +-
 src/components/map-loading-animation.tsx     |  8 +-
 4 files changed, 101 insertions(+), 15 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f88f10f..5e4e625 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -184,7 +184,7 @@ a[href^="https://maps.google.com/maps"]{display:none !important} */
 }
 
 /* loading skeletons */
-.card {
+/* .card {
   position: relative;
   -webkit-box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
   box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
@@ -194,7 +194,7 @@ a[href^="https://maps.google.com/maps"]{display:none !important} */
   overflow: hidden;
   width: 360px;
   margin: 40px auto;
-}
+} */
 
 .shimmerBG {
   animation-duration: 2.2s;
@@ -290,3 +290,78 @@ font {
   box-shadow: none !important;
   position: initial !important;
 }
+
+
+
+/**
+ * ==============================================
+ * Loading animation map
+ * ==============================================
+ */
+ .dot-pulse {
+  position: relative;
+  left: -9999px;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  background-color: #333333;
+  color: #333333;
+  box-shadow: 9999px 0 0 -5px;
+  animation: dot-pulse 1.5s infinite linear;
+  animation-delay: 0.25s;
+}
+.dot-pulse::before, .dot-pulse::after {
+  content: "";
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  width: 8px;
+  height: 8px;
+  border-radius: 5px;
+  background-color: #333333;
+  color: #333333;
+}
+.dot-pulse::before {
+  box-shadow: 9984px 0 0 -5px;
+  animation: dot-pulse-before 1.5s infinite linear;
+  animation-delay: 0s;
+}
+.dot-pulse::after {
+  box-shadow: 10014px 0 0 -5px;
+  animation: dot-pulse-after 1.5s infinite linear;
+  animation-delay: 0.5s;
+}
+
+@keyframes dot-pulse-before {
+  0% {
+    box-shadow: 9984px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 9984px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 9984px 0 0 -5px;
+  }
+}
+@keyframes dot-pulse {
+  0% {
+    box-shadow: 9999px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 9999px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 9999px 0 0 -5px;
+  }
+}
+@keyframes dot-pulse-after {
+  0% {
+    box-shadow: 10014px 0 0 -5px;
+  }
+  30% {
+    box-shadow: 10014px 0 0 2px;
+  }
+  60%, 100% {
+    box-shadow: 10014px 0 0 -5px;
+  }
+}
\ No newline at end of file
diff --git a/src/components/OffCanvasMenu.tsx b/src/components/OffCanvasMenu.tsx
index a9da083..5ea5bb4 100644
--- a/src/components/OffCanvasMenu.tsx
+++ b/src/components/OffCanvasMenu.tsx
@@ -7,7 +7,12 @@
 "use client";
 
 import { useState } from "react";
-import { Dialog, DialogBackdrop, DialogPanel } from "@headlessui/react";
+import {
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  Transition,
+} from "@headlessui/react";
 import Link from "next/link";
 
 interface OffCanvasMenuProps {
@@ -111,10 +116,10 @@ const OffCanvasMenu = ({ open, onClose }: OffCanvasMenuProps) => {
                   </div>
                 </div>
                 <div className="relative mt-6 flex-1 px-4 sm:px-6 flex flex-col">
-                  <div className="flex-1">
-                    {nestedNav ? (
+                  <div className="flex-1 relative">
+                    <Transition show={nestedNav}>
                       <div
-                        className="pt-16 flex flex-col items-center sm:items-start space-y-6 bg-amber-300 absolute inset-x-0 px-6 inset-y-0"
+                        className="pt-16 flex flex-col items-center sm:items-start space-y-6 bg-amber-300 absolute inset-x-0 px-6 inset-y-0 transition duration-300 ease-in data-[closed]:opacity-0 data-[enter]:duration-100 data-[enter]:data-[closed]:-translate-x-full data-[leave]:duration-300 data-[leave]:data-[closed]:translate-x-full"
                         id="servicesNav"
                       >
                         <Link
@@ -160,9 +165,11 @@ const OffCanvasMenu = ({ open, onClose }: OffCanvasMenuProps) => {
                           Other Services
                         </Link>
                       </div>
-                    ) : (
+                    </Transition>
+
+                    <Transition show={!nestedNav}>
                       <div
-                        className="pt-16 flex flex-col items-center sm:items-start space-y-6"
+                        className="pt-16 flex flex-col items-center sm:items-start space-y-6 "
                         id="main_menu"
                       >
                         <Link
@@ -222,7 +229,7 @@ const OffCanvasMenu = ({ open, onClose }: OffCanvasMenuProps) => {
                           Terms
                         </Link>
                       </div>
-                    )}
+                    </Transition>
                   </div>
                   <div>
                     <div className="flex items-center justify-center sm:justify-start space-x-4 py-10">
diff --git a/src/components/location-detail-component.tsx b/src/components/location-detail-component.tsx
index a5db724..0452e15 100644
--- a/src/components/location-detail-component.tsx
+++ b/src/components/location-detail-component.tsx
@@ -340,9 +340,11 @@ export default function LocationDetailComponent({
                       Closed
                     </p>
                     {location.info?.map((info) => (
-                      <p key={info} className="text-dark font-normal text-sm">
-                        {info}
-                      </p>
+                      <p 
+                        key={info} 
+                        className="text-dark font-normal text-sm" 
+                        dangerouslySetInnerHTML={{ __html: info }}
+                      ></p>
                     ))}
                   </div>
                 </div>
diff --git a/src/components/map-loading-animation.tsx b/src/components/map-loading-animation.tsx
index a5c7ff1..63a3049 100644
--- a/src/components/map-loading-animation.tsx
+++ b/src/components/map-loading-animation.tsx
@@ -1,7 +1,9 @@
 export function MapLoadingAnimation() {
   return (
-    <div className="bg-white rounded-lg shadow-lg py-2 px-4 text-xs absolute top-2 left-1/2 -translate-x-1/2 text-black font-semibold">
-      <span className="animate-pulse  text-sm">Loading...</span>
-    </div>
+    <>
+      <div className="stage bg-white rounded-lg shadow-lg py-3 px-6 text-xs absolute top-2 left-1/2 -translate-x-1/2 text-black font-semibold">
+        <div className="dot-pulse"></div>
+      </div>
+    </>
   );
 }

From 85e123140f892f14f09d0df9b35a1b6f3ad3120c Mon Sep 17 00:00:00 2001
From: Sk <shakil@meghops.com>
Date: Mon, 26 Aug 2024 21:24:02 +0600
Subject: [PATCH 2/2] format

---
 src/app/globals.css                          | 18 ++++++++++--------
 src/components/location-detail-component.tsx |  6 +++---
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index 5e4e625..c082c48 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -291,14 +291,12 @@ font {
   position: initial !important;
 }
 
-
-
 /**
  * ==============================================
  * Loading animation map
  * ==============================================
  */
- .dot-pulse {
+.dot-pulse {
   position: relative;
   left: -9999px;
   width: 10px;
@@ -310,7 +308,8 @@ font {
   animation: dot-pulse 1.5s infinite linear;
   animation-delay: 0.25s;
 }
-.dot-pulse::before, .dot-pulse::after {
+.dot-pulse::before,
+.dot-pulse::after {
   content: "";
   display: inline-block;
   position: absolute;
@@ -339,7 +338,8 @@ font {
   30% {
     box-shadow: 9984px 0 0 2px;
   }
-  60%, 100% {
+  60%,
+  100% {
     box-shadow: 9984px 0 0 -5px;
   }
 }
@@ -350,7 +350,8 @@ font {
   30% {
     box-shadow: 9999px 0 0 2px;
   }
-  60%, 100% {
+  60%,
+  100% {
     box-shadow: 9999px 0 0 -5px;
   }
 }
@@ -361,7 +362,8 @@ font {
   30% {
     box-shadow: 10014px 0 0 2px;
   }
-  60%, 100% {
+  60%,
+  100% {
     box-shadow: 10014px 0 0 -5px;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/location-detail-component.tsx b/src/components/location-detail-component.tsx
index 0452e15..7f96d3e 100644
--- a/src/components/location-detail-component.tsx
+++ b/src/components/location-detail-component.tsx
@@ -340,9 +340,9 @@ export default function LocationDetailComponent({
                       Closed
                     </p>
                     {location.info?.map((info) => (
-                      <p 
-                        key={info} 
-                        className="text-dark font-normal text-sm" 
+                      <p
+                        key={info}
+                        className="text-dark font-normal text-sm"
                         dangerouslySetInnerHTML={{ __html: info }}
                       ></p>
                     ))}