feat(docs): create new presentation

.prettierignore

@@ -0,0 +1,2 @@
+packages/*
+examples/*

.prettierrc.js

@@ -0,0 +1,9 @@
+/** @type {import("prettier").Config} */
+const config = {
+  trailingComma: 'all',
+  tabWidth: 2,
+  semi: false,
+  singleQuote: true,
+}
+
+export default config

.vscode/settings.json

@@ -1,28 +1,28 @@
-{
-  "eslint.experimental.useFlatConfig": true,
-
-  "prettier.enable": false,
-  "editor.formatOnSave": false,
-
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit",
-    "source.organizeImports": "never"
-  },
-
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "html",
-    "markdown",
-    "json",
-    "jsonc",
-    "yaml",
-    "toml"
-  ],
-
-  "files.associations": {
-    "*.css": "tailwindcss"
-  }
-}
+{
+  "eslint.experimental.useFlatConfig": true,
+
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml"
+  ],
+
+  "files.associations": {
+    "*.css": "tailwindcss"
+  }
+}

README.md

@@ -1,105 +1,105 @@
-# Open UI
-
-<img src="./.github/OpenLand.jpeg" alt="Open Land logo" align="right"  width="100">
-
-This is the source code for [openui](https://openui.up.railway.app/) by Open Land
-
-<br>
-
-## Features
-
-- Built with [Shadcn UI](https://https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/)
-- Customizable
-- Dark mode support
-- [Figma Kit](https://www.figma.com/community/file/1354464067434498042)
-
-## Getting Started
-
-<img src="./.github/preview.png" alt="Open Land logo" align="right"  width="300">
-This design system is totally easy to use with the aim of facilitating upcoming new projects. The design system is a challenge for our team. You can gladly contribute and guide us with ideas to improve... We would be keen to hear any feedback on this project.
-
-## Configure workspaces
-
-### Install turbo
-
-Install turbo globally.
-
-```shell
-pnpm install turbo --global
-```
-
-For more details about installation, see Installing Turborepo
-
-### Scripts
-
-1. Run mode dev.
-
-```shell
-turbo dev
-```
-
-2. Run build packages
-
-```shell
-turbo build
-```
-
-Your ready for worker and add components.
-
-## Components
-
-_General_
-
-- [x] Button
-- [x] Aspect Ratio
-- [x] Carousel
-
-_Data Input_
-
-- [x] Input
-- [x] Label
-- [x] Select
-- [x] Checkbox
-- [x] Slider
-
-_Layout_
-
-- [x] Divider
-
-_Display_
-
-- [x] Card
-- [x] Avatar
-- [x] Accordion
-- [x] Alert
-- [x] Alert Dialog
-- [x] Badge
-- [x] Tooltips
-- [x] Tables
-
-_Navigation_
-
-- [x] Tabs
-- [x] Breadcrumb
-- [x] Dropdown
-- [x] Menu
-- [x] Sheet
-
-_Loading_
-
-- [x] Dialog
-- [x] Progress
-- [x] Skeleton
-- [x] Popover
-
-## Documentation
-
-If you want to know more about this design system visit
-
-- [Documentation](https://openui.up.railway.app/docs/getting-started)
-
-## License
-
-Design System is licensed under either of
-
-- MIT license (LICENSE-MIT or https://opensource.org/licenses/MIT)
+# Open UI
+
+<img src="./.github/OpenLand.jpeg" alt="Open Land logo" align="right"  width="100">
+
+This is the source code for [openui](https://openui.up.railway.app/) by Open Land
+
+<br>
+
+## Features
+
+- Built with [Shadcn UI](https://https://ui.shadcn.com/) and [Tailwind CSS](https://tailwindcss.com/)
+- Customizable
+- Dark mode support
+- [Figma Kit](https://www.figma.com/community/file/1354464067434498042)
+
+## Getting Started
+
+<img src="./.github/preview.png" alt="Open Land logo" align="right"  width="300">
+This design system is totally easy to use with the aim of facilitating upcoming new projects. The design system is a challenge for our team. You can gladly contribute and guide us with ideas to improve... We would be keen to hear any feedback on this project.
+
+## Configure workspaces
+
+### Install turbo
+
+Install turbo globally.
+
+```shell
+pnpm install turbo --global
+```
+
+For more details about installation, see Installing Turborepo
+
+### Scripts
+
+1. Run mode dev.
+
+```shell
+turbo dev
+```
+
+2. Run build packages
+
+```shell
+turbo build
+```
+
+Your ready for worker and add components.
+
+## Components
+
+_General_
+
+- [x] Button
+- [x] Aspect Ratio
+- [x] Carousel
+
+_Data Input_
+
+- [x] Input
+- [x] Label
+- [x] Select
+- [x] Checkbox
+- [x] Slider
+
+_Layout_
+
+- [x] Divider
+
+_Display_
+
+- [x] Card
+- [x] Avatar
+- [x] Accordion
+- [x] Alert
+- [x] Alert Dialog
+- [x] Badge
+- [x] Tooltips
+- [x] Tables
+
+_Navigation_
+
+- [x] Tabs
+- [x] Breadcrumb
+- [x] Dropdown
+- [x] Menu
+- [x] Sheet
+
+_Loading_
+
+- [x] Dialog
+- [x] Progress
+- [x] Skeleton
+- [x] Popover
+
+## Documentation
+
+If you want to know more about this design system visit
+
+- [Documentation](https://openui.up.railway.app/docs/getting-started)
+
+## License
+
+Design System is licensed under either of
+
+- MIT license (LICENSE-MIT or https://opensource.org/licenses/MIT)

docs/components/description.jsx

@@ -0,0 +1,25 @@
+import { Button } from '@openui-org/react/components'
+import Link from 'next/link'
+
+export default function Description() {
+  return (
+    <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100 dark:bg-zinc-800">
+      <div className="container grid items-center gap-6 px-4 md:px-6 lg:grid-cols-2 lg:gap-10">
+        <div className="space-y-2">
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight">
+            Get Started with Acme Design System
+          </h2>
+          <p className="max-w-[600px] text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
+            Explore our comprehensive documentation and start building your next
+            project with our design system.
+          </p>
+        </div>
+        <div className="flex flex-col gap-2 min-[400px]:flex-row lg:justify-end">
+          <Button asChild>
+            <Link href="/docs/introduction">Explore Documentation</Link>
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}

docs/components/home.jsx

@@ -1,30 +1,37 @@
-import { Button } from "@openui-org/react/components";
-import Link from "next/link";
+import { Button } from '@openui-org/react/components'
+import Link from 'next/link'
 import useLocalesMap from './use-locales'
-import {titleMap, descriptionMap, buttonPresentationMap} from '../i18n/translate'
+import {
+  titleMap,
+  descriptionMap,
+  buttonPresentationMap,
+} from '../i18n/translate'
 
 export default function Home() {
-  const title =  useLocalesMap(titleMap)
+  const title = useLocalesMap(titleMap)
   const description = useLocalesMap(descriptionMap)
   const buttonPresentation = useLocalesMap(buttonPresentationMap)
 
   return (
-    <section className="py-20 sm:py-24 relative">
-      <div className="mx-auto px-4 sm:px-6 max-w-7xl gap-16 sm:gap-y-24 flex flex-col">
-        <div className="text-center relative z-[1]">
-          <h1 className="text-6xl font-bold tracking-tight text-balance">
-           {title}
-          </h1>
-          <p className="mt-6 opacity-90 text-sm tracking-tight text-pretty">
-           {description}
-          </p>
-          <div className="mt-10 flex flex-wrap gap-x-6 gap-y-3 justify-center">
-            <Button asChild>
-              <Link href="/docs/introduction">
-                {buttonPresentation}
-              </Link>
-            </Button>
+    <section className="w-full pt-12 md:pt-24 lg:pt-32 xl:pt-40">
+      <div className="container px-4 md:px-6">
+        <div className="grid gap-6 lg:grid-cols-2 lg:gap-12 xl:gap-16">
+          <div className="space-y-4 md:space-y-6 lg:space-y-8">
+            <h1 className="text-3xl font-bold tracking-tighter">{title}</h1>
+            <p className="max-w-[600px] text-sm">{description}</p>
+            <div className="flex flex-col gap-2 min-[400px]:flex-row">
+              <Button asChild>
+                <Link href="#">{buttonPresentation}</Link>
+              </Button>
+            </div>
           </div>
+          <img
+            alt="Hero"
+            className="mx-auto aspect-video overflow-hidden rounded-xl object-cover sm:w-full lg:aspect-square"
+            height="550"
+            src="/dashboard-demo.png"
+            width="550"
+          />
         </div>
       </div>
     </section>

docs/components/logo.jsx

@@ -1,5 +1,7 @@
 export default function logo() {
   return (
-    <h2 className="text-3xl font-bold">Open <b className="text-sky">UI</b></h2>
+    <h2 className="text-3xl font-bold">
+      Open <b className="text-sky">UI</b>
+    </h2>
   )
 }