feat: added sections about next steps and iframes handling

playground/src/components/sections/Iframes.astro

@@ -0,0 +1,14 @@
+---
+import { docsUrl } from '../../data/metadata'
+---
+<section class="help-section">
+    <div class="section__header">
+        <div class="section-title">
+            <h3>How to block iframes</h3>
+        </div>
+        <div class="section-description"></div>
+    </div>
+    <div class="section__body">
+        <p>You can use <a href={`${docsUrl}/advanced/iframemanager-setup.html`} target="_blank">iframemanager</a> for this task.</p>
+    </div>
+</section>

playground/src/components/sections/NextSteps.astro

@@ -0,0 +1,27 @@
+---
+import { docsUrl } from '../../data/metadata'
+---
+<section class="help-section">
+    <div class="section__header">
+        <div class="section-title">
+            <h3>Next steps</h3>
+        </div>
+        <div class="section-description"></div>
+    </div>
+    <div class="section__body">
+        <ul class="next-steps__links">
+            <li>
+                <a href={`${docsUrl}/advanced/manage-scripts.html`} target="_blank">How to block third party scripts</a>
+            </li>
+            <li>
+                <a href={`${docsUrl}/advanced/custom-attribute.html#show-preferencesmodal`} target="_blank">How to open preferences modal</a>
+            </li>
+        </ul>
+    </div>
+</section>
+
+<style scoped>
+    .next-steps__links li {
+        margin: 0.5rem;
+    }
+</style>

playground/src/pages/index.astro

@@ -7,6 +7,8 @@ import CategoriesAndTranslations from '../components/sections/CategoriesAndTrans
 import GuiOptions from '../components/sections/GuiOptions.astro';
 import Themes from '../components/sections/Themes.astro';
 import Installation from '../components/sections/Installation.astro';
+import NextSteps from '../components/sections/NextSteps.astro';
+import Iframes from '../components/sections/Iframes.astro';
 import Help from '../components/sections/Help.astro';
 ---
 <Layout>
@@ -17,6 +19,8 @@ import Help from '../components/sections/Help.astro';
         <GuiOptions/>
         <Themes/>
         <Installation/>
+        <NextSteps/>
+        <Iframes/>
         <Help/>
     </main>
     <Footer/>

playground/src/styles/global.scss

@@ -22,6 +22,9 @@ html{
     --d-border-radius: .375rem;
     --d-select-height: 2.25rem;
     --d-checkbox-width: 1.1875rem;
+    --link-color: #4ebdff;
+    --link-color-hover: #2d8dc4;
+    --link-color-active: #a2dcff;
 }
 
 body{
@@ -79,13 +82,27 @@ section {
 
 p {
     margin: 0;
-    font-size: .9rem;
 }
 
 b {
     font-weight: 600;
 }
 
+a {
+    color: var(--link-color);
+    transition: color .15s ease;
+    text-decoration: none;
+    border-bottom: 1px solid rgba(241, 251, 255, 0.267);
+
+    &:hover {
+        color: var(--link-color-hover);
+    }
+
+    &:active {
+        color: var(--link-color-active);
+    }
+}
+
 label {
     font-weight: 400;
     font-size: .9em;
@@ -383,6 +400,7 @@ a.info:focus {
 .translations-description,
 .categories-description {
     margin-bottom: 1rem;
+    font-size: .9rem;
 }
 
 .checkbox-group {