feat: add web app (#222)

* feat: add web app * feat(web): include a new font face
openlabs-dev · May 4, 2024 · 0f16cdd · 0f16cdd
1 parent cc57740
commit 0f16cdd
Show file tree

Hide file tree

Showing 114 changed files with 538 additions and 24 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -6,6 +6,6 @@
   "linked": [],
   "access": "public",
   "baseBranch": "main",
-  "ignore": ["@openui-org/docs", "@openui-org/playground", "@openui-org/storybook"],
+  "ignore": ["@openui-org/docs", "@openui-org/playground-next", "@openui-org/storybook", "@openui-org/playground-vue"],
   "updateInternalDependencies": "patch"
 }
diff --git a/.gitignore b/.gitignore
@@ -131,5 +131,4 @@ dist
 .yarn/install-state.gz
 .pnp.*
 *storybook.log
-storybook-static
-tailwind.config.js
+storybook-static
diff --git a/.prettierignore b/.prettierignore
diff --git a/.prettierrc.js b/.prettierrc.js
diff --git a/docs/components/description.jsx → apps/docs/components/description.jsx b/docs/components/description.jsx → apps/docs/components/description.jsx
diff --git a/docs/components/home.jsx → apps/docs/components/home.jsx b/docs/components/home.jsx → apps/docs/components/home.jsx
diff --git a/docs/components/logo.jsx → apps/docs/components/logo.jsx b/docs/components/logo.jsx → apps/docs/components/logo.jsx
diff --git a/docs/components/open-sources.jsx → apps/docs/components/open-sources.jsx b/docs/components/open-sources.jsx → apps/docs/components/open-sources.jsx
diff --git a/docs/components/presentation-componenets.jsx → ...s/components/presentation-componenets.jsx b/docs/components/presentation-componenets.jsx → ...s/components/presentation-componenets.jsx
diff --git a/docs/components/preview.jsx → apps/docs/components/preview.jsx b/docs/components/preview.jsx → apps/docs/components/preview.jsx
diff --git a/docs/components/use-locales.jsx → apps/docs/components/use-locales.jsx b/docs/components/use-locales.jsx → apps/docs/components/use-locales.jsx
diff --git a/docs/globals.css → apps/docs/globals.css b/docs/globals.css → apps/docs/globals.css
diff --git a/docs/i18n/translate.js → apps/docs/i18n/translate.js b/docs/i18n/translate.js → apps/docs/i18n/translate.js
diff --git a/docs/jsconfig.json → apps/docs/jsconfig.json b/docs/jsconfig.json → apps/docs/jsconfig.json
diff --git a/docs/lib/cn.ts → apps/docs/lib/cn.ts b/docs/lib/cn.ts → apps/docs/lib/cn.ts
diff --git a/docs/middleware.js → apps/docs/middleware.js b/docs/middleware.js → apps/docs/middleware.js
diff --git a/docs/next.config.js → apps/docs/next.config.js b/docs/next.config.js → apps/docs/next.config.js
diff --git a/docs/package.json → apps/docs/package.json b/docs/package.json → apps/docs/package.json
diff --git a/docs/pages/404.mdx → apps/docs/pages/404.mdx b/docs/pages/404.mdx → apps/docs/pages/404.mdx
diff --git a/docs/pages/_app.mdx → apps/docs/pages/_app.mdx b/docs/pages/_app.mdx → apps/docs/pages/_app.mdx
diff --git a/docs/pages/_meta.en-US.json → apps/docs/pages/_meta.en-US.json b/docs/pages/_meta.en-US.json → apps/docs/pages/_meta.en-US.json
diff --git a/docs/pages/_meta.es-ES.json → apps/docs/pages/_meta.es-ES.json b/docs/pages/_meta.es-ES.json → apps/docs/pages/_meta.es-ES.json
diff --git a/docs/pages/docs/_meta.en-US.json → apps/docs/pages/docs/_meta.en-US.json b/docs/pages/docs/_meta.en-US.json → apps/docs/pages/docs/_meta.en-US.json
diff --git a/docs/pages/docs/_meta.es-ES.json → apps/docs/pages/docs/_meta.es-ES.json b/docs/pages/docs/_meta.es-ES.json → apps/docs/pages/docs/_meta.es-ES.json
diff --git a/docs/pages/docs/accordion.en-US.mdx → apps/docs/pages/docs/accordion.en-US.mdx b/docs/pages/docs/accordion.en-US.mdx → apps/docs/pages/docs/accordion.en-US.mdx
diff --git a/docs/pages/docs/accordion.es-ES.mdx → apps/docs/pages/docs/accordion.es-ES.mdx b/docs/pages/docs/accordion.es-ES.mdx → apps/docs/pages/docs/accordion.es-ES.mdx
diff --git a/docs/pages/docs/alert.en-US.mdx → apps/docs/pages/docs/alert.en-US.mdx b/docs/pages/docs/alert.en-US.mdx → apps/docs/pages/docs/alert.en-US.mdx
diff --git a/docs/pages/docs/alert.es-ES.mdx → apps/docs/pages/docs/alert.es-ES.mdx b/docs/pages/docs/alert.es-ES.mdx → apps/docs/pages/docs/alert.es-ES.mdx
diff --git a/docs/pages/docs/aspect-ratio.en-US.mdx → apps/docs/pages/docs/aspect-ratio.en-US.mdx b/docs/pages/docs/aspect-ratio.en-US.mdx → apps/docs/pages/docs/aspect-ratio.en-US.mdx
diff --git a/docs/pages/docs/aspect-ratio.es-ES.mdx → apps/docs/pages/docs/aspect-ratio.es-ES.mdx b/docs/pages/docs/aspect-ratio.es-ES.mdx → apps/docs/pages/docs/aspect-ratio.es-ES.mdx
diff --git a/docs/pages/docs/avatar.en-US.mdx → apps/docs/pages/docs/avatar.en-US.mdx b/docs/pages/docs/avatar.en-US.mdx → apps/docs/pages/docs/avatar.en-US.mdx
diff --git a/docs/pages/docs/avatar.es-ES.mdx → apps/docs/pages/docs/avatar.es-ES.mdx b/docs/pages/docs/avatar.es-ES.mdx → apps/docs/pages/docs/avatar.es-ES.mdx
diff --git a/docs/pages/docs/badge.en-US.mdx → apps/docs/pages/docs/badge.en-US.mdx b/docs/pages/docs/badge.en-US.mdx → apps/docs/pages/docs/badge.en-US.mdx
diff --git a/docs/pages/docs/badge.es-ES.mdx → apps/docs/pages/docs/badge.es-ES.mdx b/docs/pages/docs/badge.es-ES.mdx → apps/docs/pages/docs/badge.es-ES.mdx
diff --git a/docs/pages/docs/breadcrumb.en-US.mdx → apps/docs/pages/docs/breadcrumb.en-US.mdx b/docs/pages/docs/breadcrumb.en-US.mdx → apps/docs/pages/docs/breadcrumb.en-US.mdx
diff --git a/docs/pages/docs/breadcrumb.es-ES.mdx → apps/docs/pages/docs/breadcrumb.es-ES.mdx b/docs/pages/docs/breadcrumb.es-ES.mdx → apps/docs/pages/docs/breadcrumb.es-ES.mdx
diff --git a/docs/pages/docs/button.en-US.mdx → apps/docs/pages/docs/button.en-US.mdx b/docs/pages/docs/button.en-US.mdx → apps/docs/pages/docs/button.en-US.mdx
diff --git a/docs/pages/docs/button.es-ES.mdx → apps/docs/pages/docs/button.es-ES.mdx b/docs/pages/docs/button.es-ES.mdx → apps/docs/pages/docs/button.es-ES.mdx
diff --git a/docs/pages/docs/card.en-US.mdx → apps/docs/pages/docs/card.en-US.mdx b/docs/pages/docs/card.en-US.mdx → apps/docs/pages/docs/card.en-US.mdx
diff --git a/docs/pages/docs/card.es-ES.mdx → apps/docs/pages/docs/card.es-ES.mdx b/docs/pages/docs/card.es-ES.mdx → apps/docs/pages/docs/card.es-ES.mdx
diff --git a/docs/pages/docs/carousel.en-US.mdx → apps/docs/pages/docs/carousel.en-US.mdx b/docs/pages/docs/carousel.en-US.mdx → apps/docs/pages/docs/carousel.en-US.mdx
diff --git a/docs/pages/docs/carousel.es-ES.mdx → apps/docs/pages/docs/carousel.es-ES.mdx b/docs/pages/docs/carousel.es-ES.mdx → apps/docs/pages/docs/carousel.es-ES.mdx
diff --git a/docs/pages/docs/checkbox.en-US.mdx → apps/docs/pages/docs/checkbox.en-US.mdx b/docs/pages/docs/checkbox.en-US.mdx → apps/docs/pages/docs/checkbox.en-US.mdx
diff --git a/docs/pages/docs/checkbox.es-ES.mdx → apps/docs/pages/docs/checkbox.es-ES.mdx b/docs/pages/docs/checkbox.es-ES.mdx → apps/docs/pages/docs/checkbox.es-ES.mdx
diff --git a/docs/pages/docs/dialog.en-US.mdx → apps/docs/pages/docs/dialog.en-US.mdx b/docs/pages/docs/dialog.en-US.mdx → apps/docs/pages/docs/dialog.en-US.mdx
diff --git a/docs/pages/docs/dialog.es-ES.mdx → apps/docs/pages/docs/dialog.es-ES.mdx b/docs/pages/docs/dialog.es-ES.mdx → apps/docs/pages/docs/dialog.es-ES.mdx
diff --git a/docs/pages/docs/dropdown.en-US.mdx → apps/docs/pages/docs/dropdown.en-US.mdx b/docs/pages/docs/dropdown.en-US.mdx → apps/docs/pages/docs/dropdown.en-US.mdx
diff --git a/docs/pages/docs/dropdown.es-ES.mdx → apps/docs/pages/docs/dropdown.es-ES.mdx b/docs/pages/docs/dropdown.es-ES.mdx → apps/docs/pages/docs/dropdown.es-ES.mdx
diff --git a/docs/pages/docs/input.en-US.mdx → apps/docs/pages/docs/input.en-US.mdx b/docs/pages/docs/input.en-US.mdx → apps/docs/pages/docs/input.en-US.mdx
diff --git a/docs/pages/docs/input.es-ES.mdx → apps/docs/pages/docs/input.es-ES.mdx b/docs/pages/docs/input.es-ES.mdx → apps/docs/pages/docs/input.es-ES.mdx
diff --git a/docs/pages/docs/installation.en-US.mdx → apps/docs/pages/docs/installation.en-US.mdx b/docs/pages/docs/installation.en-US.mdx → apps/docs/pages/docs/installation.en-US.mdx
diff --git a/docs/pages/docs/installation.es-ES.mdx → apps/docs/pages/docs/installation.es-ES.mdx b/docs/pages/docs/installation.es-ES.mdx → apps/docs/pages/docs/installation.es-ES.mdx
diff --git a/docs/pages/docs/introduction.en-US.mdx → apps/docs/pages/docs/introduction.en-US.mdx b/docs/pages/docs/introduction.en-US.mdx → apps/docs/pages/docs/introduction.en-US.mdx
diff --git a/docs/pages/docs/introduction.es-ES.mdx → apps/docs/pages/docs/introduction.es-ES.mdx b/docs/pages/docs/introduction.es-ES.mdx → apps/docs/pages/docs/introduction.es-ES.mdx
diff --git a/docs/pages/docs/label.en-US.mdx → apps/docs/pages/docs/label.en-US.mdx b/docs/pages/docs/label.en-US.mdx → apps/docs/pages/docs/label.en-US.mdx
diff --git a/docs/pages/docs/label.es-ES.mdx → apps/docs/pages/docs/label.es-ES.mdx b/docs/pages/docs/label.es-ES.mdx → apps/docs/pages/docs/label.es-ES.mdx
diff --git a/docs/pages/docs/menu.en-US.mdx → apps/docs/pages/docs/menu.en-US.mdx b/docs/pages/docs/menu.en-US.mdx → apps/docs/pages/docs/menu.en-US.mdx
diff --git a/docs/pages/docs/menu.es-ES.mdx → apps/docs/pages/docs/menu.es-ES.mdx b/docs/pages/docs/menu.es-ES.mdx → apps/docs/pages/docs/menu.es-ES.mdx
diff --git a/docs/pages/docs/popover.en-US.mdx → apps/docs/pages/docs/popover.en-US.mdx b/docs/pages/docs/popover.en-US.mdx → apps/docs/pages/docs/popover.en-US.mdx
diff --git a/docs/pages/docs/popover.es-ES.mdx → apps/docs/pages/docs/popover.es-ES.mdx b/docs/pages/docs/popover.es-ES.mdx → apps/docs/pages/docs/popover.es-ES.mdx
diff --git a/docs/pages/docs/progress.en-US.mdx → apps/docs/pages/docs/progress.en-US.mdx b/docs/pages/docs/progress.en-US.mdx → apps/docs/pages/docs/progress.en-US.mdx
diff --git a/docs/pages/docs/progress.es-ES.mdx → apps/docs/pages/docs/progress.es-ES.mdx b/docs/pages/docs/progress.es-ES.mdx → apps/docs/pages/docs/progress.es-ES.mdx
diff --git a/docs/pages/docs/scroll-area.en-US.mdx → apps/docs/pages/docs/scroll-area.en-US.mdx b/docs/pages/docs/scroll-area.en-US.mdx → apps/docs/pages/docs/scroll-area.en-US.mdx
diff --git a/docs/pages/docs/scroll-area.es-ES.mdx → apps/docs/pages/docs/scroll-area.es-ES.mdx b/docs/pages/docs/scroll-area.es-ES.mdx → apps/docs/pages/docs/scroll-area.es-ES.mdx
diff --git a/docs/pages/docs/select.en-US.mdx → apps/docs/pages/docs/select.en-US.mdx b/docs/pages/docs/select.en-US.mdx → apps/docs/pages/docs/select.en-US.mdx
diff --git a/docs/pages/docs/select.es-ES.mdx → apps/docs/pages/docs/select.es-ES.mdx b/docs/pages/docs/select.es-ES.mdx → apps/docs/pages/docs/select.es-ES.mdx
diff --git a/docs/pages/docs/separator.en-US.mdx → apps/docs/pages/docs/separator.en-US.mdx b/docs/pages/docs/separator.en-US.mdx → apps/docs/pages/docs/separator.en-US.mdx
diff --git a/docs/pages/docs/separator.es-ES.mdx → apps/docs/pages/docs/separator.es-ES.mdx b/docs/pages/docs/separator.es-ES.mdx → apps/docs/pages/docs/separator.es-ES.mdx
diff --git a/docs/pages/docs/sheet.en-US.mdx → apps/docs/pages/docs/sheet.en-US.mdx b/docs/pages/docs/sheet.en-US.mdx → apps/docs/pages/docs/sheet.en-US.mdx
diff --git a/docs/pages/docs/sheet.es-ES.mdx → apps/docs/pages/docs/sheet.es-ES.mdx b/docs/pages/docs/sheet.es-ES.mdx → apps/docs/pages/docs/sheet.es-ES.mdx
diff --git a/docs/pages/docs/skeleton.en-US.mdx → apps/docs/pages/docs/skeleton.en-US.mdx b/docs/pages/docs/skeleton.en-US.mdx → apps/docs/pages/docs/skeleton.en-US.mdx
diff --git a/docs/pages/docs/skeleton.es-ES.mdx → apps/docs/pages/docs/skeleton.es-ES.mdx b/docs/pages/docs/skeleton.es-ES.mdx → apps/docs/pages/docs/skeleton.es-ES.mdx
diff --git a/docs/pages/docs/slider.en-US.mdx → apps/docs/pages/docs/slider.en-US.mdx b/docs/pages/docs/slider.en-US.mdx → apps/docs/pages/docs/slider.en-US.mdx
diff --git a/docs/pages/docs/slider.es-ES.mdx → apps/docs/pages/docs/slider.es-ES.mdx b/docs/pages/docs/slider.es-ES.mdx → apps/docs/pages/docs/slider.es-ES.mdx
diff --git a/docs/pages/docs/table.en-US.mdx → apps/docs/pages/docs/table.en-US.mdx b/docs/pages/docs/table.en-US.mdx → apps/docs/pages/docs/table.en-US.mdx
diff --git a/docs/pages/docs/table.es-ES.mdx → apps/docs/pages/docs/table.es-ES.mdx b/docs/pages/docs/table.es-ES.mdx → apps/docs/pages/docs/table.es-ES.mdx
diff --git a/docs/pages/docs/tabs.en-US.mdx → apps/docs/pages/docs/tabs.en-US.mdx b/docs/pages/docs/tabs.en-US.mdx → apps/docs/pages/docs/tabs.en-US.mdx
diff --git a/docs/pages/docs/tabs.es-ES.mdx → apps/docs/pages/docs/tabs.es-ES.mdx b/docs/pages/docs/tabs.es-ES.mdx → apps/docs/pages/docs/tabs.es-ES.mdx
diff --git a/docs/pages/docs/tooltip.en-US.mdx → apps/docs/pages/docs/tooltip.en-US.mdx b/docs/pages/docs/tooltip.en-US.mdx → apps/docs/pages/docs/tooltip.en-US.mdx
diff --git a/docs/pages/docs/tooltip.es-ES.mdx → apps/docs/pages/docs/tooltip.es-ES.mdx b/docs/pages/docs/tooltip.es-ES.mdx → apps/docs/pages/docs/tooltip.es-ES.mdx
diff --git a/docs/pages/index.en-US.mdx → apps/docs/pages/index.en-US.mdx b/docs/pages/index.en-US.mdx → apps/docs/pages/index.en-US.mdx
diff --git a/docs/pages/index.es-ES.mdx → apps/docs/pages/index.es-ES.mdx b/docs/pages/index.es-ES.mdx → apps/docs/pages/index.es-ES.mdx
diff --git a/docs/pages/showcase.en-US.mdx → apps/docs/pages/showcase.en-US.mdx b/docs/pages/showcase.en-US.mdx → apps/docs/pages/showcase.en-US.mdx
diff --git a/docs/pages/showcase.es-ES.mdx → apps/docs/pages/showcase.es-ES.mdx b/docs/pages/showcase.es-ES.mdx → apps/docs/pages/showcase.es-ES.mdx
diff --git a/docs/postcss.config.js → apps/docs/postcss.config.js b/docs/postcss.config.js → apps/docs/postcss.config.js
diff --git a/docs/public/dashboard-demo.png → apps/docs/public/dashboard-demo.png b/docs/public/dashboard-demo.png → apps/docs/public/dashboard-demo.png
diff --git a/docs/public/demo-commerce.png → apps/docs/public/demo-commerce.png b/docs/public/demo-commerce.png → apps/docs/public/demo-commerce.png
diff --git a/docs/tailwind.config.js → apps/docs/tailwind.config.js b/docs/tailwind.config.js → apps/docs/tailwind.config.js
diff --git a/docs/theme.config.jsx → apps/docs/theme.config.jsx b/docs/theme.config.jsx → apps/docs/theme.config.jsx
diff --git a/apps/web/.gitignore b/apps/web/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/web/README.md b/apps/web/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/apps/web/app/favicon.ico b/apps/web/app/favicon.ico
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -0,0 +1,15 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  @font-face {
+    font-family: 'Gotham Medium';
+    src: url('/fonts/GothamSSm-medium.woff2') format('woff2');
+  }
+  html,
+  body {
+    scroll-behavior: smooth;
+    font-family: 'Gotham Medium', system-ui, sans-serif;
+  }
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -0,0 +1,25 @@
+import type { Metadata } from 'next'
+import './globals.css'
+import Menu from '@/components/menu'
+import Footer from '@/components/footer'
+
+export const metadata: Metadata = {
+  title: 'Open UI',
+  description: 'Design system built with Shadcn and Tailwind CSS',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <Menu />
+        {children}
+        <Footer />
+      </body>
+    </html>
+  )
+}
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -0,0 +1,16 @@
+import Commons from '@/components/commons'
+import ExploreDocs from '@/components/explore-docs'
+import FAQ from '@/components/faq'
+import Home from '@/components/home'
+
+export default function Page() {
+  return (
+    <main className="max-w-screen-2xl mx-auto flex flex-col items-center justify-center">
+      <Home />
+      <Commons />
+      <ExploreDocs />
+      <FAQ />
+    </main>
+
+  )
+}
diff --git a/apps/web/components/commons.tsx b/apps/web/components/commons.tsx
@@ -0,0 +1,86 @@
+import { Badge, Card, CardContent, CardHeader } from '@openui-org/react'
+import {
+  CreditCardIcon,
+  FileInputIcon,
+  KeyIcon,
+  MenuIcon,
+  MinimizeIcon,
+  NavigationIcon,
+} from 'lucide-react'
+import Link from 'next/link'
+
+const cards = [
+  {
+    Icon: KeyIcon,
+    title: 'Buttons',
+    description: 'Customizable buttons with various styles and sizes.',
+    path: '#',
+  },
+  {
+    Icon: FileInputIcon,
+    title: 'Inputs',
+    description: 'Accessible and stylish form inputs.',
+    path: '#',
+  },
+  {
+    Icon: CreditCardIcon,
+    title: 'Cards',
+    description: 'Versatile card components for displaying content.',
+    path: '#',
+  },
+  {
+    Icon: MenuIcon,
+    title: 'Dropdowns',
+    description: 'Accessible and customizable dropdown menus.',
+    path: '#',
+  },
+  {
+    Icon: NavigationIcon,
+    title: 'Navigation',
+    description: ' Intuitive navigation components for your app.',
+    path: '#',
+  },
+  {
+    Icon: MinimizeIcon,
+    title: 'Modals',
+    description: 'Lightweight and responsive modal components.',
+    path: '#',
+  },
+]
+
+export default function Commons() {
+  return (
+    <section className="w-full py-12 md:py-24 lg:py-32 flex flex-col items-center justify-center">
+      <div className="container px-4 md:px-6">
+        <div className="flex flex-col items-center justify-center space-y-4 text-center">
+          <div className="space-y-2">
+            <Badge>
+              Key components
+            </Badge>
+            <h2 className="text-3xl font-bold pt-4 pb-2 tracking-tighter sm:text-4xl md:text-5xl">
+              Beautifully Designed Components
+            </h2>
+            <p className="max-w-[900px] text-gray-500 text-base">
+              Explore our collection of carefully crafted components that you can use to build your next web application.
+            </p>
+          </div>
+          <div className="mx-auto grid max-w-5xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3 lg:gap-8">
+            {cards.map((card, i) => (
+              <Link key={i} href={card.path}>
+                <Card className="border-none shadow-medium cursor-pointer hover:scale-105 transition-transform h-full">
+                  <CardHeader>
+                    <card.Icon className="size-8" />
+                  </CardHeader>
+                  <CardContent>
+                    <h3 className="text-lg font-semibold">{card.title}</h3>
+                    <p className="text-sm">{card.description}</p>
+                  </CardContent>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/components/explore-docs.tsx b/apps/web/components/explore-docs.tsx
@@ -0,0 +1,24 @@
+import { Button } from '@openui-org/react'
+import Link from 'next/link'
+
+export default function ExploreDocs() {
+  return (
+    <section className="w-full py-12 md:py-24 lg:py-32 bg-gray-100">
+      <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 Open UI Design System
+          </h2>
+          <p className="max-w-[600px] lg:text-base/relaxed">
+            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>
+  )
+}
diff --git a/apps/web/components/faq.tsx b/apps/web/components/faq.tsx
@@ -0,0 +1,38 @@
+import { Button } from '@openui-org/react'
+import Link from 'next/link'
+
+export default function FAQ() {
+  return (
+    <section className="w-full py-12 md:py-24 lg:py-32 flex flex-col items-center justify-center">
+      <div className="container grid items-center justify-center gap-4 px-4 text-center md:px-6">
+        <div className="space-y-3">
+          <h2 className="text-3xl font-bold tracking-tighter md:text-4xl/tight">
+            Built with Love and Inspiration
+          </h2>
+          <p className="mx-auto max-w-[600px] text-gray-500 text-base">
+            Open UI. design system built on the basis of the existing ones, however we are constantly improving the design and components.
+          </p>
+        </div>
+        <div className="mx-auto w-full max-w-sm space-y-2">
+          <form className="flex space-x-2">
+            <input
+              className="max-w-lg flex-1 outline-none p-1 rounded-small border-small border-black/50"
+              placeholder="Send your feedback"
+              type="text"
+            />
+            <Button type="submit">Send</Button>
+          </form>
+          <p className="text-xs text-gray-500 dark:text-gray-400">
+            Send us your ideas to build a better design system.
+            <Link
+              className="underline underline-offset-2 pl-1"
+              href="/docs/introduction#faq"
+            >
+              FAQ
+            </Link>
+          </p>
+        </div>
+      </div>
+    </section>
+  )
+}
diff --git a/apps/web/components/footer.tsx b/apps/web/components/footer.tsx
@@ -0,0 +1,29 @@
+import Link from 'next/link'
+
+const links = [
+  { name: 'Docs', path: '/' },
+  { name: 'Components', path: '/' },
+  { name: 'FAQ', path: '/' },
+]
+
+export default function Footer() {
+  return (
+    <footer className="w-full py-2 lg:px-8 px-4">
+      <div className="flex flex-row flex-wrap items-center justify-center text-center gap-y-6 gap-x-12 md:justify-between py-2">
+        <h2 className="text-2xl font-bold">Open UI</h2>
+        <nav className="flex flex-col gap-2 mt-2 mb-4 lg:mb-0 lg:mt-0 lg:flex-row lg:items-center lg:gap-6">
+          {links.map((link, i) => (
+            <Link key={i} href={link.path} className="block p-1 text-small font-medium antialiased">
+              {link.name}
+            </Link>
+          ))}
+        </nav>
+      </div>
+      <span className="block border-t pt-2 border-blue-gray-50">
+        <p className="block font-sans text-base antialiased font-normal leading-relaxed text-center text-blue-gray-900">
+          © 2024 Open UI, Inc. All rights reserved.
+        </p>
+      </span>
+    </footer>
+  )
+}
diff --git a/apps/web/components/home.tsx b/apps/web/components/home.tsx
@@ -0,0 +1,29 @@
+import { Button } from '@openui-org/react'
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <section className="w-full pt-12 md:pt-20 flex flex-col items-center justify-center">
+      <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">Open UI. A modern design system built with Shadcn UI and Tailwind CSS</h1>
+            <p className="max-w-[600px] text-sm">Open UI is an open source design system with a completely cutting-edge system.  Fully customizable and modifiable you will make UI development much faster with fully stylized components.</p>
+            <div className="flex flex-col gap-2 min-[400px]:flex-row">
+              <Button asChild>
+                <Link href="/docs/introduction">Explore Documentation</Link>
+              </Button>
+            </div>
+          </div>
+          <img
+            alt="Hero"
+            className="mx-auto aspect-video overflow-hidden rounded-xl object-cover sm:w-full"
+            height="550"
+            src="https://i.postimg.cc/X7yfn8hW/logo.png"
+            width="550"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}