feat: Enhance SEO with title and description tags

- Added title and description tags to improve SEO across multiple pages.

apps/docs/src/pages/404.tsx

@@ -5,7 +5,10 @@ import { Button, Flex, Heading, Text } from '@pillar-ui/core'
 
 export default function Custom404() {
   return (
-    <Layout>
+    <Layout
+      title="404: Page Not Found"
+      description="Oops! The page you’re looking for doesn’t exist. Navigate back to our homepage or explore other sections of Pillar UI."
+    >
       <Flex style={{ maxWidth: '680px' }} justify="center" direction="column" items="center" gap="md" className="hero">
         <Heading size="3xl" weight="bold">
           404 - Page Not Found

apps/docs/src/pages/docs/components/index.tsx

@@ -12,7 +12,10 @@ export async function getStaticProps() {
 export default function Blog({ components }: { components: Components[] }) {
   // components.forEach((com) => console.log(com.slug, com.title))
   return (
-    <Layout>
+    <Layout
+      title="Component Library"
+      description="Discover the comprehensive list of components in the Pillar UI library. Each component is meticulously designed to enhance functionality and improve user experience in your applications."
+    >
       <Paper as={Grid} m="md" grid="repeat(4, 1fr)" gap="sm">
         {components.map((component) => (
           <Link href={`utils/${component.slug}`} key={component.slug}>

apps/docs/src/pages/docs/hooks/index.tsx

@@ -11,7 +11,10 @@ export async function getStaticProps() {
 
 export default function Hooks({ hooks }: { hooks: Hooks[] }) {
   return (
-    <Layout>
+    <Layout
+      title="Hooks Library"
+      description="Explore a robust collection of hooks in the Pillar UI library, each designed to simplify and optimize your development process."
+    >
       <Paper as={Grid} m="md" grid="repeat(4, 1fr)" gap="sm">
         {hooks.map((hook) => (
           <Link href={`utils/${hook.slug}`} key={hook.slug}>

apps/docs/src/pages/docs/troubleshooting.tsx

@@ -4,7 +4,10 @@ import { Layout } from 'src/component/common'
 
 const troubleshooting = () => {
   return (
-    <Layout>
+    <Layout
+      title="Troubleshooting"
+      description="Encounter an issue with Pillar UI? Find solutions and guidance to common problems, and get back to smooth development."
+    >
       <Paper flow="md" p="sm">
         <Heading size="xl">Troubleshooting</Heading>
         <Text>

apps/docs/src/pages/docs/tutorials/index.tsx

@@ -12,7 +12,10 @@ export async function getStaticProps() {
 export default function Blog({ tutorials }: { tutorials: Tutorials[] }) {
   // components.forEach((com) => console.log(com.slug, com.title))
   return (
-    <Layout>
+    <Layout
+      title="Learn to Utilize Pillar UI Effectively"
+      description="Dive into extensive tutorials that guide you through the effective use of Pillar UI components, hooks, and utilities, enhancing your development workflow and project outcomes."
+    >
       <Paper as={Grid} m="md" grid="repeat(4, 1fr)" gap="sm">
         {tutorials.map((tutorial) => (
           <Link href={`utils/${tutorial.slug}`} key={tutorial.slug}>

apps/docs/src/pages/docs/utils/index.tsx

@@ -11,7 +11,10 @@ export async function getStaticProps() {
 
 export default function utils({ utils }: { utils: Tutorials[] }) {
   return (
-    <Layout>
+    <Layout
+      title="Utilities Library"
+      description="Browse through a wide array of utilities in the Pillar UI library, designed to make your development workflow more efficient and streamlined."
+    >
       <Paper as={Grid} m="md" grid="repeat(4, 1fr)" gap="sm">
         {utils.map((util) => (
           <Link href={`utils/${util.slug}`} key={util.slug}>