Replace Browser UI with SVG.

src/components/Home.astro

@@ -2,7 +2,7 @@
 import Layout from '~/components/Base.astro'
 import DownloadButton from '~/components/DownloadButton.svelte'
 import Icon from '~/components/Icon.svelte'
-import Browser from '~/components/home/BrowserUI.svelte'
+import Browser from '~/components/home/BrowserUI.astro'
 import ComparisonTable from '~/components/home/ComparisonTable.svelte'
 import FeatureCard from '~/components/home/FeatureCard.svelte'
 import Lottie from '~/components/home/Lottie.svelte'

src/components/home/BrowserUI.astro

@@ -0,0 +1,37 @@
+---
+import Browser from '~/assets/browser.svg'
+import LeftSplash from '~/assets/left-splash.svg'
+import RightSplash from '~/assets/right-splash.svg'
+
+const mobileImageSrc = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
+---
+
+<div
+	class="font-noto pointer-events-none relative z-10 block w-full text-[12px] font-medium text-black opacity-100 lg:shadow-xl lg:after:block"
+>
+	<span
+		class="absolute bottom-[5%] left-0 z-10 mb-[20px] w-[130px] -translate-x-1/2 translate-y-1/2 lg:bottom-0 lg:-z-10 lg:h-[408px] lg:w-[429px]"
+	>
+		<img src={LeftSplash.src} />
+	</span>
+
+	<span
+		class="absolute right-[3%] top-[15%] z-10 mt-[20px] w-[130px] -translate-y-1/2 translate-x-1/2 lg:right-0 lg:top-0 lg:h-[583px] lg:w-[518px]"
+	>
+		<img src={RightSplash.src} />
+	</span>
+
+	<div id="rwd-mobile-ui" class="left-0 top-0 flex h-full w-full flex-col sm:hidden">
+		<img
+			src={mobileImageSrc}
+			alt="Mobile Browser UI"
+			width="500"
+			height="500"
+			class="w-full bg-[#F2F2F2] object-contain"
+		/>
+	</div>
+
+	<div id="rwd-desktop-ui" class="left-0 top-0 hidden h-full w-full flex-col sm:flex">
+		<img src={Browser.src} alt="Desktop Browser UI" class="w-full object-contain" />
+	</div>
+</div>