chore: Update Hero component to improve image positioning and rotation

IhsenBouallegue · Jul 17, 2024 · 852973a · 852973a
1 parent 6706da0
commit 852973a
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/src/slices/Hero/index.tsx b/src/slices/Hero/index.tsx
@@ -25,16 +25,15 @@ const Hero = ({ slice }: HeroProps): JSX.Element => {
             height={300}
           />
         </div>
-        <div
-          className="absolute w-[100vmin] h-[100vmin] top-0 left-0 -z-30 animate-spin"
-          style={{ animationDuration: "60s" }}
-        >
-          <PrismicNextImage
-            className="h-[100px] md:h-[150px] w-auto -rotate-[45deg]"
-            field={slice.primary.background_image_1}
-            width={300}
-            height={300}
-          />
+        <div className="absolute w-[80vmin] h-[80vmin] -translate-x-[50%] -translate-y-[50%] top-[50%] left-[50%] -z-30">
+          <div className="w-full h-full  animate-spin" style={{ animationDuration: "60s" }}>
+            <PrismicNextImage
+              className="h-[100px] md:h-[150px] w-auto -rotate-[30deg]"
+              field={slice.primary.background_image_1}
+              width={300}
+              height={300}
+            />
+          </div>
         </div>
       </div>
       <div className="relative isolate px-0 lg:px-8 w-full">