From e2a780ee3a5339fba39be9013fa9d1aa42e77f2f Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Mon, 3 Feb 2025 01:05:29 +0000
Subject: [PATCH] Improve UI

---
 docs/src/layouts/BaseLayout.astro | 179 +++++++++++++++---------------
 docs/src/pages/index.astro        |   2 +-
 2 files changed, 92 insertions(+), 89 deletions(-)

diff --git a/docs/src/layouts/BaseLayout.astro b/docs/src/layouts/BaseLayout.astro
index a7e5572..2a971d1 100644
--- a/docs/src/layouts/BaseLayout.astro
+++ b/docs/src/layouts/BaseLayout.astro
@@ -1,112 +1,115 @@
 ---
 import Analytics from "../components/Analytics/Analytics.astro";
 export interface Props {
-	title: string;
+  permalink?: string;
+  title?: string;
+  description?: string;
 }
 
-export interface BaseLayoutProps extends Props {
-	permalink?: string;
-	title?: string;
-	description?: string;
-}
-
-const { permalink = '', title = "Driver.js", description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." } = Astro.props;
-
+const {
+  permalink = "",
+  title = "driver.js",
+  description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.",
+} = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
+  <head>
+    <meta charset="UTF-8" />
 
-		<title>{ title }</title>
-		<meta name="robots" content="index,follow"/>
-		<meta name="description" itemprop="description" content={description}/>
+    <title>{title}</title>
+    <meta name="robots" content="index,follow" />
+    <meta name="description" itemprop="description" content={description} />
 
-		<link href={`https://driverjs.com${permalink}`} rel="canonical">
+    <link href={`https://driverjs.com${permalink}`} rel="canonical" />
 
-		<meta content="Kamran Ahmed" name=author>
-		<meta content="summary_large_image" name="twitter:card">
-		<meta content="@kamrify" name="twitter:creator">
-		<meta content="1200" property="og:image:width">
-		<meta content="630" property="og:image:height">
-		<meta content="https://driverjs.com/og-img.png" property="og:image">
-		<meta content="driverjs.com" property="og:image:alt">
-		<meta content="driverjs.com" property="og:site_name">
-		<meta content="Driver.js" property="og:title">
-		<meta content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." property=og:description>
-		<meta content="website" property="og:type">
-		<meta content="https://driverjs.com/" property="og:url">
+    <meta content="Kamran Ahmed" name="author" />
+    <meta content="summary_large_image" name="twitter:card" />
+    <meta content="@kamrify" name="twitter:creator" />
+    <meta content="1200" property="og:image:width" />
+    <meta content="630" property="og:image:height" />
+    <meta content="https://driverjs.com/og-img.png" property="og:image" />
+    <meta content="driverjs.com" property="og:image:alt" />
+    <meta content="driverjs.com" property="og:site_name" />
+    <meta content="Driver.js" property="og:title" />
+    <meta
+      content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page."
+      property="og:description"
+    />
+    <meta content="website" property="og:type" />
+    <meta content="https://driverjs.com/" property="og:url" />
 
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
-		<style is:global>
-			.driver-popover.driverjs-theme {
-				background-color: #fde047;
-				color: #000;
-			}
+    <style is:global>
+      .driver-popover.driverjs-theme {
+        background-color: #fde047;
+        color: #000;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-title {
-				font-size: 20px;
-			}
+      .driver-popover.driverjs-theme .driver-popover-title {
+        font-size: 20px;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-title,
-			.driver-popover.driverjs-theme .driver-popover-description,
-			.driver-popover.driverjs-theme .driver-popover-progress-text {
-				color: #000;
-			}
+      .driver-popover.driverjs-theme .driver-popover-title,
+      .driver-popover.driverjs-theme .driver-popover-description,
+      .driver-popover.driverjs-theme .driver-popover-progress-text {
+        color: #000;
+      }
 
-			.driver-popover.driverjs-theme button {
-				flex: 1;
-				text-align: center;
-				background-color: #000;
-				color: #ffffff;
-				border: 1px solid #000;
-				text-shadow: none;
-				font-size: 14px;
-				padding: 5px 8px;
-				border-radius: 6px;
-			}
+      .driver-popover.driverjs-theme button {
+        flex: 1;
+        text-align: center;
+        background-color: #000;
+        color: #ffffff;
+        border: 1px solid #000;
+        text-shadow: none;
+        font-size: 14px;
+        padding: 5px 8px;
+        border-radius: 6px;
+      }
 
-			.driver-popover.driverjs-theme button:focus, .driver-popover.driverjs-theme button:hover {
-				background-color: #000;
-				opacity: 0.8;
-				color: #ffffff;
-			}
+      .driver-popover.driverjs-theme button:focus,
+      .driver-popover.driverjs-theme button:hover {
+        background-color: #000;
+        opacity: 0.8;
+        color: #ffffff;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-navigation-btns {
-				justify-content: space-between;
-				gap: 3px;
-			}
+      .driver-popover.driverjs-theme .driver-popover-navigation-btns {
+        justify-content: space-between;
+        gap: 3px;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-close-btn {
-				color: #9b9b9b;
-			}
+      .driver-popover.driverjs-theme .driver-popover-close-btn {
+        color: #9b9b9b;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
-				color: #000;
-			}
+      .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+        color: #000;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
-				border-left-color: #fde047;
-			}
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+        border-left-color: #fde047;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
-				border-right-color: #fde047;
-			}
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+        border-right-color: #fde047;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
-				border-top-color: #fde047;
-			}
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+        border-top-color: #fde047;
+      }
 
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
-				border-bottom-color: #fde047;
-			}
-		</style>
-	</head>
-	<body>
-		<slot />
-        <Analytics />
-	</body>
-</html>
\ No newline at end of file
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+        border-bottom-color: #fde047;
+      }
+    </style>
+  </head>
+  <body>
+    <slot />
+    <Analytics />
+  </body>
+</html>
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
index f772080..6c1f5c6 100644
--- a/docs/src/pages/index.astro
+++ b/docs/src/pages/index.astro
@@ -9,7 +9,7 @@ import Examples from "../components/Examples.astro";
 import UsecaseList from "../components/UsecaseList.astro";
 import OpenSourceLove from "../components/OpenSourceLove.astro";
 ---
-<BaseLayout>
+<BaseLayout title="driver.js">
   <HeroSection />
   <div
     class="bg-white overflow-x-hidden overflow-y-hidden relative h-[48px] md:h-[56px] lg:h-[64px] border-b-2 border-b-black"