add canonical urls

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Box',
+  alternates: {
+      canonical: '/docs/api/box',
+  }
+
 }
 
 # Box

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Button',
+  alternates: {
+      canonical: '/docs/api/button',
+  }
+
 }
 
 # Button

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -1,5 +1,8 @@
 export const metadata = {
   title: 'Center',
+  alternates: {
+    canonical: '/docs/api/center'
+  }
 }
 
 # Center

apps/landing/src/app/(detail)/docs/api/css/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'css',
+  alternates: {
+    canonical: '/docs/api/css'
+  }
+
 }
 
 # css

apps/landing/src/app/(detail)/docs/api/flex/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Flex',
+  alternates: {
+    canonical: '/docs/api/flex'
+  }
+
 }
 
 # Flex

apps/landing/src/app/(detail)/docs/api/grid/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Grid',
+  alternates: {
+    canonical: '/docs/api/grid'
+  }
+
 }
 
 # Grid

apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Group Selector',
+  alternates: {
+    canonical: '/docs/api/group-selector'
+  }
+
 }
 
 # Group Selector

apps/landing/src/app/(detail)/docs/api/image/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Image',
+  alternates: {
+    canonical: '/docs/api/image'
+  }
+
 }
 
 # Image

apps/landing/src/app/(detail)/docs/api/input/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Input',
+  alternates: {
+    canonical: '/docs/api/input'
+  }
+
 }
 
 # Input

apps/landing/src/app/(detail)/docs/api/selector/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Selector',
+  alternates: {
+    canonical: '/docs/api/selector'
+  }
+
 }
 
 # Selector

apps/landing/src/app/(detail)/docs/api/style-props/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Style Props',
+  alternates: {
+    canonical: '/docs/api/style-props'
+  }
+
 }
 
 # Style Props

apps/landing/src/app/(detail)/docs/api/text/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Text',
+  alternates: {
+    canonical: '/docs/api/text'
+  }
+
 }
 
 # Text

apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'VStack',
+  alternates: {
+    canonical: '/docs/api/v-stack'
+  }
+
 }
 
 # VStack

apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Breakpoints',
+  alternates: {
+    canonical: '/docs/devup/breakpoints'
+  }
+
 }
 
 # Breakpoints

apps/landing/src/app/(detail)/docs/devup/colors/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Colors',
+  alternates: {
+    canonical: '/docs/devup/colors'
+  }
+
 }
 
 # Colors

apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'devup.json',
+  alternates: {
+    canonical: '/docs/devup/devup-json'
+  }
+
 }
 
 # devup.json

apps/landing/src/app/(detail)/docs/devup/figma-plugin/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Figma Plugin',
+  alternates: {
+    canonical: '/docs/devup/figma-plugin'
+  }
+
 }
 
 # Figma Plugin

apps/landing/src/app/(detail)/docs/devup/typography/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
   title: 'Typography',
+  alternates: {
+    canonical: '/docs/devup/typography'
+  }
+
 }
 
 # Typography

apps/landing/src/app/(detail)/docs/features/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
     title: "Features",
+    alternates: {
+        canonical: '/docs/features',
+    }
+
 }
 
 # Features

apps/landing/src/app/(detail)/docs/installation/page.mdx

@@ -1,5 +1,9 @@
 export const metadata = {
     title: "Installation",
+    alternates: {
+        canonical: '/docs/installation',
+    }
+
 }
 
 # Installation

apps/landing/src/app/(detail)/docs/overview/page.mdx

@@ -1,5 +1,8 @@
 export const metadata = {
     title: "What is Devup UI?",
+    alternates: {
+        canonical: '/docs/overview',
+    }
 }
 
 ## What is Devup UI?

apps/landing/src/app/(detail)/team/page.mdx

@@ -1,3 +1,10 @@
+export const metadata = {
+    alternates: {
+        canonical: '/team',
+    }
+}
+
+
 # Team
 
 We are a team committed to developing the most optimized CSS-in-JS solutions.

apps/landing/src/app/layout.tsx

@@ -11,6 +11,18 @@ import { SearchModal } from '../components/SearchModal'
 export const metadata: Metadata = {
   title: 'Devup UI',
   description: 'Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor',
+  alternates: {
+    canonical: 'https://devup-ui.com',
+  },
+  metadataBase: new URL('https://devup-ui.com'),
+  openGraph: {
+    title: 'Devup UI',
+    description: 'Zero Config, Zero FOUC, Zero Runtime, CSS in JS Preprocessor',
+    images: ['https://devup-ui.com/og-image.png'],
+    siteName: 'Devup UI',
+    type: 'website',
+    url: 'https://devup-ui.com',
+  },
 }
 
 export default function RootLayout({

apps/landing/src/app/page.tsx

@@ -1,15 +1,21 @@
 import { Box, css, Flex, Grid, Image, Text, VStack } from '@devup-ui/react'
+import { Metadata } from 'next'
 import Link from 'next/link'
 
 import { CodeBoard } from '../components/CodeBoard'
 import { Container } from '../components/Container'
 import { Discord } from '../components/Discord'
 import { FeatureCard } from './FeatureCard'
 
+export const metadata: Metadata = {
+  alternates: {
+    canonical: '/',
+  },
+}
+
 export default function HomePage() {
   return (
     <>
-      <link href="https://devup-ui.com" rel="canonical" />
       <Box
         h="80dvh"
         pointerEvents="none"