Separate background images to fix improve performance on larger displays

apps/web/docs/getting-started/create-a-interprocess.mdx

@@ -5,7 +5,7 @@ order: 3
 
 # Create a interprocess
 
-Let's build something simple that can show you some of the interprocess's power!
+Let's build something simple that can show you some of the interprocess' power!
 
 <br />
 

apps/web/docs/getting-started/overview.mdx

@@ -14,7 +14,7 @@ Features:
 <br />
 
 - 🚀 Best-in-class DX with a fully-typed API
-- 🧠 Enchanced and consistent API
+- 🧠 Enhanced and consistent API
 - 🔥 Type-safe and scalable
 - 🪄 Code splitting support
 - 🕸️ All edges connected (APIs to handle all processes)

apps/web/src/components/CodeEditorPresenter/index.tsx

@@ -3,7 +3,6 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import ScrollableContainer from 'react-indiana-drag-scroll'
 
-import { getPublicPath } from 'shared/utils'
 import { codes, tabs } from 'shared/constants'
 
 import { Button, CodeSandboxIcon, FileIcon, Separator } from 'components'

apps/web/src/components/Layout/Background/index.ts

@@ -6,10 +6,12 @@ export const Background = styled('div', {
   left: 0,
   width: '100%',
   height: '100%',
-  backgroundImage: `url("${getPublicPath('/background.svg')}")`,
-  backgroundRepeat: 'no-repeat',
-  backgroundSize: '300%',
-  backgroundPosition: 'top center',
+  backgroundImage: `url("${getPublicPath(
+    '/pattern.svg'
+  )}"), url(${getPublicPath('/blur.jpg')})`,
+  backgroundRepeat: 'repeat, no-repeat',
+  backgroundSize: '30%, 200%',
+  backgroundPosition: 'top center, center center',
   zIndex: -1,
   position: 'fixed',
   overflowX: 'hidden',