From 2bd5024b24a4bce361ee1a471b9f761a77152916 Mon Sep 17 00:00:00 2001
From: diecodev <diegoddiaz05@gmail.com>
Date: Fri, 26 Jul 2024 12:07:57 -0500
Subject: [PATCH] =?UTF-8?q?docs(website):=20=F0=9F=93=9D=20add=20note=20to?=
 =?UTF-8?q?=20avoid=20render=20location=20issues=20#13?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 website/src/routes/index.tsx  | 14 ++++++++++++++
 website/src/routes/styles.css |  4 ++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/website/src/routes/index.tsx b/website/src/routes/index.tsx
index 06dfb32..2995d57 100644
--- a/website/src/routes/index.tsx
+++ b/website/src/routes/index.tsx
@@ -29,6 +29,20 @@ export default component$(() => {
       />
       <main class="container">
         <Hero />
+        <p class="!mt-12 rounded-md bg-amber-100 p-2 !text-sm">
+          Due to the resumability, the{" "}
+          <span class="rounded-lg border border-amber-200 bg-amber-200/65 p-1 font-mono text-xs font-semibold">{`<Toaster />`}</span>{" "}
+          component should be positioned at the beginning of where you want to
+          use it. This way, you won't encounter{" "}
+          <a
+            href="https://github.com/diecodev/qwik-sonner/issues/13"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="font-bold underline"
+          >
+            rendering issues.
+          </a>
+        </p>
         <div class="content">
           <Installation />
           <Usage />
diff --git a/website/src/routes/styles.css b/website/src/routes/styles.css
index a75a0cf..acdd236 100644
--- a/website/src/routes/styles.css
+++ b/website/src/routes/styles.css
@@ -101,7 +101,7 @@ code {
   display: flex;
   flex-direction: column;
   gap: 48px;
-  margin-top: 96px;
+  margin-top: 48px;
 }
 
 .buttons {
@@ -186,7 +186,7 @@ m .wrapper h2 {
   display: flex;
   flex-direction: column;
   gap: 48px;
-  margin-top: 96px;
+  margin-top: 48px;
 }
 
 .wrapper footer {