improve(public): remove heavy svgs and replaced some images with local

apps/public/components/Swirls.tsx

@@ -1,152 +1,36 @@
 import { cn } from '@/lib/utils';
+import Image, { type ImageProps } from 'next/image';
 
-interface SwirlProps extends React.SVGProps<SVGSVGElement> {
-  className?: string;
-}
+type SwirlProps = Omit<ImageProps, 'src' | 'alt'>;
 
 export function SingleSwirl({ className, ...props }: SwirlProps) {
   return (
-    <svg
-      width="1193"
-      height="634"
-      viewBox="0 0 1193 634"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn('text-white', className)}
+    <Image
       {...props}
-    >
-      <g filter="url(#filter0_f_290_140)">
-        <path
-          d="M996.469 546.016C728.822 501.422 310.916 455.521 98.1817 18.6728"
-          stroke="currentColor"
-          strokeWidth="26"
-        />
-      </g>
-      <g filter="url(#filter1_f_290_140)">
-        <path
-          d="M780.821 634.792C582.075 610.494 151.698 468.051 20.1495 92.6602"
-          stroke="currentColor"
-        />
-      </g>
-      <defs>
-        <filter
-          id="filter0_f_290_140"
-          x="-107.406"
-          y="-180.919"
-          width="1299.91"
-          height="933.658"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feGaussianBlur
-            stdDeviation="96.95"
-            result="effect1_foregroundBlur_290_140"
-          />
-        </filter>
-        <filter
-          id="filter1_f_290_140"
-          x="-3.32227"
-          y="69.4946"
-          width="807.204"
-          height="588.793"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feGaussianBlur
-            stdDeviation="11.5"
-            result="effect1_foregroundBlur_290_140"
-          />
-        </filter>
-      </defs>
-    </svg>
+      src="/swirl-2.png"
+      alt="Swirl"
+      className={cn(
+        'pointer-events-none w-full h-full object-cover',
+        className,
+      )}
+      width={1200}
+      height={1200}
+    />
   );
 }
 
 export function DoubleSwirl({ className, ...props }: SwirlProps) {
   return (
-    <svg
-      width="1535"
-      height="1178"
-      viewBox="0 0 1535 1178"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cn('text-white', className)}
+    <Image
       {...props}
-    >
-      <g filter="url(#filter0_f_290_639)">
-        <path
-          d="M1392.59 1088C1108.07 603.225 323.134 697.532 143.435 135.494"
-          stroke="currentColor"
-          strokeOpacity="0.5"
-          strokeWidth="26"
-        />
-      </g>
-      <g filter="url(#filter1_f_290_639)">
-        <path
-          d="M1446.57 1014.51C1162.05 529.732 377.111 624.039 197.412 62.0001"
-          stroke="currentColor"
-          strokeOpacity="0.06"
-          strokeWidth="26"
-        />
-      </g>
-      <defs>
-        <filter
-          id="filter0_f_290_639"
-          x="0.244919"
-          y="0.679001"
-          width="1534.37"
-          height="1224.74"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feGaussianBlur
-            stdDeviation="65.4"
-            result="effect1_foregroundBlur_290_639"
-          />
-        </filter>
-        <filter
-          id="filter1_f_290_639"
-          x="160.022"
-          y="32.9856"
-          width="1322.77"
-          height="1013.14"
-          filterUnits="userSpaceOnUse"
-          colorInterpolationFilters="sRGB"
-        >
-          <feFlood floodOpacity="0" result="BackgroundImageFix" />
-          <feBlend
-            mode="normal"
-            in="SourceGraphic"
-            in2="BackgroundImageFix"
-            result="shape"
-          />
-          <feGaussianBlur
-            stdDeviation="12.5"
-            result="effect1_foregroundBlur_290_639"
-          />
-        </filter>
-      </defs>
-    </svg>
+      src="/swirl.png"
+      alt="Swirl"
+      className={cn(
+        'pointer-events-none w-full h-full object-cover',
+        className,
+      )}
+      width={1200}
+      height={1200}
+    />
   );
 }

apps/public/components/footer.tsx

@@ -12,7 +12,7 @@ export function Footer() {
     <div className="mt-32">
       <section className="overflow-hidden relative bg-foreground dark:bg-background-dark text-background dark:text-foreground rounded-xl p-0 pb-32 pt-16 max-w-7xl mx-auto">
         <SingleSwirl className="pointer-events-none absolute top-0 bottom-0 left-0" />
-        <SingleSwirl className="pointer-events-none rotate-180 absolute top-0 bottom-0 -right-32 opacity-50" />
+        <SingleSwirl className="pointer-events-none rotate-180 absolute top-0 bottom-0 -right-0 opacity-50" />
         <div className="container center-center col">
           <SectionHeader
             tag={<Tag>Discover User Insights</Tag>}

apps/public/components/sections/pricing.tsx

@@ -10,7 +10,7 @@ export default Pricing;
 export function Pricing() {
   return (
     <Section className="overflow-hidden relative bg-foreground dark:bg-background-dark text-background dark:text-foreground rounded-xl p-0 pb-32 pt-16 max-w-7xl mx-auto">
-      <DoubleSwirl className="absolute -top-32 left-0" />
+      <DoubleSwirl className="absolute top-0 left-0" />
       <div className="container relative z-10">
         <SectionHeader
           tag={

apps/public/components/sections/testimonials.tsx

@@ -6,8 +6,7 @@ import { MessageCircleIcon } from 'lucide-react';
 const testimonials = [
   {
     verified: true,
-    avatarUrl:
-      'https://pbs.twimg.com/profile_images/1506792347840888834/dS-r50Je_x96.jpg',
+    avatarUrl: '/twitter-steven.jpg',
     name: 'Steven Tey',
     handle: 'steventey',
     content: [
@@ -21,8 +20,7 @@ const testimonials = [
   },
   {
     verified: true,
-    avatarUrl:
-      'https://pbs.twimg.com/profile_images/1755611130368770048/JwLEqyeo_x96.jpg',
+    avatarUrl: '/twitter-pontus.jpg',
     name: 'Pontus Abrahamsson — oss/acc',
     handle: 'pontusab',
     content: ['Thanks, OpenPanel is a beast, love it!'],
@@ -32,8 +30,7 @@ const testimonials = [
   },
   {
     verified: true,
-    avatarUrl:
-      'https://pbs.twimg.com/profile_images/1849912160593268736/Zm3zrpOI_x96.jpg',
+    avatarUrl: '/twitter-piotr.jpg',
     name: 'Piotr Kulpinski',
     handle: 'piotrkulpinski',
     content: [
@@ -46,8 +43,7 @@ const testimonials = [
   },
   {
     verified: true,
-    avatarUrl:
-      'https://pbs.twimg.com/profile_images/1825857658017959936/3nEG8n7__x96.jpg',
+    avatarUrl: '/twitter-greg.jpg',
     name: 'greg hodson 🍜',
     handle: 'h0dson',
     content: ['i second this, openpanel is killing it'],
@@ -57,8 +53,7 @@ const testimonials = [
   },
   {
     verified: true,
-    avatarUrl:
-      'https://pbs.twimg.com/profile_images/1777870199515164672/47EBkHLm_x96.jpg',
+    avatarUrl: '/twitter-jacob.jpg',
     name: 'Jacob 🍀 Build in Public',
     handle: 'javayhuwx',
     content: [
@@ -72,8 +67,7 @@ const testimonials = [
   },
   {
     verified: true,
-    avatarUrl:
-      'https://pbs.twimg.com/profile_images/1787577276646780929/YuoDbD1f_x96.jpg',
+    avatarUrl: '/twitter-lee.jpg',
     name: 'Lee',
     handle: 'DutchEngIishman',
     content: [