From 3ecf5e24a19c3d170ee8db0caec22e89dc06e74d Mon Sep 17 00:00:00 2001
From: Shaurya0108 <shauryadwivedi0108@gmail.com>
Date: Fri, 2 Feb 2024 20:06:39 -0600
Subject: [PATCH] got the safari performance to improve by making changes to
 the useBlob and Blob components

---
 src/components/CTA.tsx | 8 ++++----
 src/lib/useBlobBg.tsx  | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/CTA.tsx b/src/components/CTA.tsx
index 836734c..5a3b041 100644
--- a/src/components/CTA.tsx
+++ b/src/components/CTA.tsx
@@ -6,18 +6,18 @@ const CTA = () => {
   return (
     <div className="relative flex place-content-center my-24 overflow-y-visible overflow-x-clip">
       <div className="absolute top-0 left-0 w-full h-full overflow-visible">
-        <Blob className="-left-12 -top-[25%] -z-20" color="pink" size="medium" />
-        <Blob className="left-[15%] top-[35%] -z-20" color="royal" size="medium" />
+        {/* <Blob className="-left-12 -top-[25%] -z-20" color="pink" size="medium" />
+        <Blob className="left-[15%] top-[35%] -z-20" color="royal" size="medium" /> */}
         <Image
           src={Circles}
           alt={''}
           className="absolute -top-48 h-screen w-full overflow-visible -z-10 object-cover"
         />
-        <Blob className="left-[70%] -top-16 -z-20" color="periwinkle" size="medium" />
+        {/* <Blob className="left-[70%] -top-16 -z-20" color="periwinkle" size="medium" /> */}
       </div>
 
       <div
-        className="mx-6 md:max-w-4xl md:px-36 py-14 sm:px-20 px-12 text-white text-center flex flex-col place-items-center rounded-lg gap-7 font-medium drop-shadow-2xl hover:scale-105 duration-200 scale-100 transition-transform border border-opacity-50 border-white"
+        className="mx-6 md:max-w-4xl md:px-36 py-14 sm:px-20 px-12 text-white text-center flex flex-col place-items-center rounded-lg gap-7 font-medium drop-shadow-2xl hover:scale-105 duration-100 scale-100 transition-transform"
         style={{
           backgroundColor: 'hsla(226,100%,93%,1)',
           backgroundImage: `radial-gradient(circle at 58% 94%, hsla(43,96%,56%,1) 0px, transparent 50%),
diff --git a/src/lib/useBlobBg.tsx b/src/lib/useBlobBg.tsx
index d355bfa..6383890 100644
--- a/src/lib/useBlobBg.tsx
+++ b/src/lib/useBlobBg.tsx
@@ -88,7 +88,7 @@ const useBlobBg = (): [JSX.Element, CSSProperties] => {
       ...data?.cssVars,
       backgroundColor: 'hsla(0,0%,100%,0.5)',
       background: data?.background,
-      animation: `15000ms infinite alternate switchColor-${data?.bgInstance} cubic-bezier(0.4, 0, 0.6, 1)`,
+      // animation: `15000ms infinite alternate switchColor-${data?.bgInstance} cubic-bezier(0.4, 0, 0.6, 1)`,
     },
   ];
 };