feat: add unique IDs to CircleBackground components for tracking

src/components/About.tsx

@@ -13,7 +13,7 @@ export function About() {
       <div className="relative -mt-[100vh]">
         <Container>
                      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+        <CircleBackground id="aboutcircle" color="#06b6d4" className="animate-spin-slower" />
       </div>
           <div className="mx-auto max-w-3xl text-center">
             <Eyebrow color="accent">Our Mission</Eyebrow>

src/components/AboutNew.tsx

@@ -13,7 +13,7 @@ export function AboutNew() {
       className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+        <CircleBackground id="aboutcircle" color="#06b6d4" className="animate-spin-slower" />
       </div>
       <Container>
         <div className="mx-auto max-w-2xl text-center">

src/components/CallToAction.tsx

@@ -13,7 +13,7 @@ export function CallToAction() {
       className="relative overflow-hidden bg-gray-900 py-20 sm:py-28"
     >
       <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-        <CircleBackground color="#06b6d4" className="animate-spin-slower" />
+        <CircleBackground id="cta_circle" color="#06b6d4" className="animate-spin-slower" />
       </div>
       <Container>
         <div className="mx-auto max-w-2xl text-center">

src/components/PrimaryFeatures.tsx

@@ -292,9 +292,9 @@ function FeaturesDesktop() {
           </div>
         ))}
       </TabList>
-      <div className="col-span-6">
+      <div className="relative col-span-6">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          <CircleBackground color="#13B5C8" className="animate-spin-slower" />
+          <CircleBackground id="primaryfeatures_desktop_circle" color="#13B5C8" className="animate-spin-slower" />
         </div>
         <PhoneFrame className="z-10 mx-auto w-full max-w-[366px]">
           <TabPanels as={Fragment}>
@@ -368,16 +368,17 @@ function FeaturesMobile() {
             ref={(ref) => ref && (slideRefs.current[featureIndex] = ref)}
             className="w-full flex-none snap-center px-4 sm:px-6 transition-all duration-300 ease-in-out hover:scale-105"
           >
-            <div
+                        <div
               className={clsx(
-                'transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
+                'relative transform overflow-hidden rounded-2xl bg-gray-800 px-5 py-6 outline-2 transition-colors',
                 activeIndex === featureIndex
                   ? 'outline-transparent' // Remove outline for active mobile slide
                   : 'outline-transparent hover:outline-cyan-500',
               )}
             >
               <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-                <CircleBackground
+                                <CircleBackground
+                  id={`primaryfeatures_mobile_circle_${featureIndex}`}
                   color="#13B5C8"
                   className={featureIndex % 2 === 1 ? 'rotate-180' : undefined}
                 />