add neat tilted background

packages/website/app/assets/dots-background.svg

@@ -0,0 +1,3 @@
+<svg width="53" height="35" viewBox="0 0 53 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="3" cy="3" r="1" fill="white"/>
+</svg>

packages/website/app/root.tsx

@@ -13,6 +13,7 @@ import type { GuideLink } from "~/modules/navigation/load-guide-links.server"
 import { loadGuideLinks } from "~/modules/navigation/load-guide-links.server"
 import prismThemeCss from "~/modules/ui/prism-theme.css"
 import tailwindCss from "~/modules/ui/tailwind.out.css"
+import faviconUrl from "./assets/favicon.png"
 
 export const meta: MetaFunction = () => ({
   title: "Reacord",
@@ -20,7 +21,7 @@ export const meta: MetaFunction = () => ({
 })
 
 export const links: LinksFunction = () => [
-  { rel: "icon", type: "image/png", href: "/favicon.png" },
+  { rel: "icon", type: "image/png", href: faviconUrl },
   { rel: "stylesheet", href: tailwindCss },
   { rel: "stylesheet", href: prismThemeCss },
   { rel: "preconnect", href: "https://fonts.googleapis.com" },

packages/website/app/routes/index.tsx

@@ -1,4 +1,5 @@
 import packageJson from "reacord/package.json"
+import dotsBackgroundUrl from "~/assets/dots-background.svg"
 import { AppFooter } from "~/modules/app/app-footer"
 import LandingExample from "~/modules/landing/landing-example.mdx"
 import { MainNavigation } from "~/modules/navigation/main-navigation"
@@ -6,26 +7,32 @@ import { maxWidthContainer } from "~/modules/ui/components"
 
 export default function Landing() {
   return (
-    <div className="flex flex-col min-w-0 min-h-screen text-center pb-4">
-      <header className={maxWidthContainer}>
-        <MainNavigation />
-      </header>
-      <div className="px-4 pb-8 flex flex-1">
-        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
-          <h1 className="text-6xl font-light">reacord</h1>
-          <section className="mx-auto text-sm sm:text-base">
-            <LandingExample />
-          </section>
-          <p className="text-2xl font-light">{packageJson.description}</p>
-          <a
-            href="/guides/getting-started"
-            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
-          >
-            Get Started
-          </a>
-        </main>
+    <>
+      <div
+        className="fixed inset-0 rotate-6 scale-125 opacity-20"
+        style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
+      />
+      <div className="flex flex-col relative min-w-0 min-h-screen text-center pb-4">
+        <header className={maxWidthContainer}>
+          <MainNavigation />
+        </header>
+        <div className="px-4 pb-8 flex flex-1">
+          <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+            <h1 className="text-6xl font-light">reacord</h1>
+            <section className="mx-auto text-sm sm:text-base">
+              <LandingExample />
+            </section>
+            <p className="text-2xl font-light">{packageJson.description}</p>
+            <a
+              href="/guides/getting-started"
+              className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow"
+            >
+              Get Started
+            </a>
+          </main>
+        </div>
+        <AppFooter />
       </div>
-      <AppFooter />
-    </div>
+    </>
   )
 }