feat(web): new demo landing page (#95)

close #75

apps/web/src/components/Header.astro

@@ -2,6 +2,7 @@
 import { Image } from "astro:assets";
 import {Github} from 'lucide-astro'
 import Link from "./Link.astro";
+import { Button } from "@openui-org/react";
 ---
 
 <header class="py-4 px-8 flex justify-between items-center">
@@ -13,14 +14,14 @@ import Link from "./Link.astro";
     </figure>
     <div class="flex justify-center gap-8">
         <nav class="flex justify-center items-center gap-6">
-            <a href="https://docs.openui.org" class="hover:text-white/90" target="_blank">Docs</a>
-            <a href="https://www.figma.com/community/file/1354464067434498042" class="hover:text-white/90" target="_blank">Figma</a>
+            <a href="https://docs.openui.org" target="_blank">Docs</a>
+            <a href="https://www.figma.com/community/file/1354464067434498042" target="_blank">Figma</a>
         </nav>
         <nav class="flex justify-center gap-4 items-center">
-            <Link href="https://github.com/open-land/open-ui" target="_blank">
+            <Button target="_blank">
                 <Github class="size-6" />
                 Github
-            </Link>
+            </Button>
         </nav>
     </div>
 </header>

apps/web/src/components/Home.astro

@@ -0,0 +1,43 @@
+---
+import { ArrowUpRight } from "lucide-astro";
+import { Button } from "@openui-org/react";
+---
+
+<img
+    src="/gradient.png"
+    alt=""
+    class="absolute -top-8 left-2/4 -translate-x-1/2"
+    width="800"
+/>
+
+<section class="py-24 sm:py-32 md:py-40 relative">
+    <div
+        class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl gap-16 sm:gap-y-24 flex flex-col"
+    >
+        <div class="text-center relative z-[1]">
+            <h1
+                class="text-6xl font-bold tracking-tight text-balance"
+            >
+                <b class="text-sky-500"> Open UI </b>. A modern design system
+                built with <b class="text-sky-500"> Shadcn UI</b> and
+                <b class="text-sky-500"> Tailwind CSS </b>
+            </h1>
+            <p class="mt-6 text-lg tracking-tight text-foreground text-pretty">
+                Open UI is an open source design system with a completely
+                cutting-edge system. <br /> Fully customizable and modifiable you
+                will make UI development much faster with fully stylized components.
+            </p>
+            <div class="mt-10 flex flex-wrap gap-x-6 gap-y-3 justify-center">
+                <Button>
+                    <ArrowUpRight class="size-6" />
+                    Get Started
+                </Button>
+            </div>
+        </div>
+    </div>
+</section>
+
+
+<figure class="flex justify-center items-center mt-8 mb-24">
+    <img src='/demo-dashboard.png' alt='Demo dashboard with Open UI.' class="rounded-md w-full object-cover h-[36rem]"/>
+</figure>

apps/web/src/components/Info.astro

@@ -0,0 +1,10 @@
+<section class="flex justify-around items-center my-20">
+    <article class="flex-1">
+        <h2 class="py-2 text-5xl sm:text-5xl lg:text-6xl sm:tracking-tight sm:leading-[1.1]! font-extrabold lg:max-w-lg mx-auto sm:mx-0">
+            Who said finance has to be boring?
+        </h2>
+    </article>
+    <article class="flex-1">
+        <p>With Cobalt, managing your business finances is effortless, empowering, and anything but boring. Our intuitive platform brings clarity to your cash flow, simplifies your financial decision-making, and puts the power of advanced financial management right at your fingertips. Say no to spreadsheets and tools designed in the 80s.</p>
+    </article>
+</section>

apps/web/src/components/Link.astro

@@ -1,4 +1,6 @@
-
-<a class="inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-black bg-white shadow hover:bg-white/90 h-9 px-4 py-2 gap-1 cursor-pointer"  {...Astro.props} >
-<slot />
-</a>
+<a
+    class="inline-flex items-center justify-center whitespace-nowrap rounded text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 shadow h-9 px-4 py-2 gap-1 cursor-pointer"
+    {...Astro.props}
+>
+    <slot />
+</a>

apps/web/src/layouts/Layout.astro

@@ -9,7 +9,7 @@ const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark" style="color-scheme: dark;">
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
@@ -24,7 +24,7 @@ const { title } = Astro.props;
 		<meta name="generator" content={Astro.generator} />
 		<title>{title}</title>
 	</head>
-	<body class="bg-dark-900/95 text-white">
+	<body>
 		<Header />
 		<main class="container">
 			<slot />

apps/web/src/pages/index.astro

@@ -1,35 +1,10 @@
 ---
-import {ArrowUpRight} from 'lucide-astro'
 import Layout from '../layouts/Layout.astro';
-import Link from '../components/Link.astro';
+import Home from '../components/Home.astro';
+import Info from '../components/Info.astro';
 ---
 
 <Layout title="Welcome to Open UI.">
-	<img src="/gradient.png" alt="" class="absolute -top-8 left-2/4 -translate-x-1/2" width="800">
-	<section class="py-24 sm:py-32 md:py-40 relative dark:bg-gradient-to-b from-gray-950 to-gray-900">
-		<div class="mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl gap-16 sm:gap-y-24 flex flex-col">
-			<div class="text-center relative z-[1]">
-				<h1 class="text-6xl font-bold tracking-tight text-white text-balance">
-					<b class="text-secondary-500">
-						Open UI
-					</b>. A modern design system built with  <b class="text-secondary-500">
-					Shadcn UI</b> and 
-					<b class="text-secondary-500">
-						Tailwind CSS
-					</b>
-				</h1>
-				<p class="mt-6 text-lg tracking-tight text-dark-500 text-pretty">
-					Open UI is an open source design system with a completely cutting-edge system. <br> Fully customizable and modifiable you will make UI development much faster with fully stylized components.
-				</p>
-				<div class="mt-10 flex flex-wrap gap-x-6 gap-y-3 justify-center">
-
-					<Link href="https://docs.openui.org">
-						<ArrowUpRight class="size-6"/>
-						Get Started 
-					</Link>
-
-				</div>
-			</div>
-		</div>
-	</section>
+	<Home />
+	<Info />
 </Layout>