From 6c66e974e52492477f687d9253546aafb97d3cb6 Mon Sep 17 00:00:00 2001
From: zernonia <zernonia@gmail.com>
Date: Sat, 23 Mar 2024 17:19:01 +0800
Subject: [PATCH] refactor: change to use iframe feat: add more blocks

---
 .../.vitepress/theme/components/BlockPage.vue | 12 +++
 .../theme/components/BlockPreview.vue         | 22 ++++--
 .../.vitepress/theme/components/Blocks.vue    |  2 +-
 .../.vitepress/theme/layout/MainLayout.vue    |  7 +-
 apps/www/__registry__/index.ts                | 42 +++++++++++
 apps/www/src/content/blocks/renderer.md       | 10 +++
 .../default/block/Authentication01.vue        |  2 +-
 .../default/block/Authentication02.vue        | 60 +++++++++++++++
 .../default/block/Authentication03.vue        | 65 +++++++++++++++++
 .../default/block/Authentication04.vue        | 73 +++++++++++++++++++
 .../new-york/block/Authentication01.vue       |  2 +-
 .../new-york/block/Authentication02.vue       | 60 +++++++++++++++
 .../new-york/block/Authentication03.vue       | 65 +++++++++++++++++
 .../new-york/block/Authentication04.vue       | 73 +++++++++++++++++++
 apps/www/src/public/placeholder.svg           |  1 +
 15 files changed, 485 insertions(+), 11 deletions(-)
 create mode 100644 apps/www/.vitepress/theme/components/BlockPage.vue
 create mode 100644 apps/www/src/content/blocks/renderer.md
 create mode 100644 apps/www/src/lib/registry/default/block/Authentication02.vue
 create mode 100644 apps/www/src/lib/registry/default/block/Authentication03.vue
 create mode 100644 apps/www/src/lib/registry/default/block/Authentication04.vue
 create mode 100644 apps/www/src/lib/registry/new-york/block/Authentication02.vue
 create mode 100644 apps/www/src/lib/registry/new-york/block/Authentication03.vue
 create mode 100644 apps/www/src/lib/registry/new-york/block/Authentication04.vue
 create mode 100644 apps/www/src/public/placeholder.svg

diff --git a/apps/www/.vitepress/theme/components/BlockPage.vue b/apps/www/.vitepress/theme/components/BlockPage.vue
new file mode 100644
index 00000000..69e58caa
--- /dev/null
+++ b/apps/www/.vitepress/theme/components/BlockPage.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { useUrlSearchParams } from '@vueuse/core'
+import ComponentLoader from './ComponentLoader.vue'
+
+const params = useUrlSearchParams('hash-params')
+</script>
+
+<template>
+  <div :class="params.containerClass">
+    <ComponentLoader :name="params.name.toString()" :type-name="'block'" />
+  </div>
+</template>
diff --git a/apps/www/.vitepress/theme/components/BlockPreview.vue b/apps/www/.vitepress/theme/components/BlockPreview.vue
index 10352231..c1f6edc1 100644
--- a/apps/www/.vitepress/theme/components/BlockPreview.vue
+++ b/apps/www/.vitepress/theme/components/BlockPreview.vue
@@ -7,7 +7,6 @@ import MagicString from 'magic-string'
 import { cssVariables } from '../config/shiki'
 import StyleSwitcher from './StyleSwitcher.vue'
 import Spinner from './Spinner.vue'
-import ComponentLoader from './ComponentLoader.vue'
 import { useConfigStore } from '@/stores/config'
 
 // import { BlockCopyCodeButton } from '@/components/block-copy-code-button'
@@ -26,7 +25,10 @@ const props = defineProps<{
 
 const { style, codeConfig } = useConfigStore()
 
+const isLoading = ref(true)
+const tabValue = ref('preview')
 const resizableRef = ref<InstanceType<typeof ResizablePanel>>()
+
 const rawString = ref('')
 const codeHtml = ref('')
 const metadata = reactive({
@@ -90,10 +92,10 @@ watch([style, codeConfig], async () => {
 <template>
   <Tabs
     :id="name"
-    default-value="preview"
+    v-model="tabValue"
     class="relative grid w-full scroll-m-20 gap-4"
     :style=" {
-      '--container-height': metadata.iframeHeight,
+      '--container-height': metadata.iframeHeight ?? '600px',
     }"
   >
     <div class="flex flex-col items-center gap-4 sm:flex-row">
@@ -205,6 +207,8 @@ watch([style, codeConfig], async () => {
       </div>
     </div>
     <TabsContent
+      v-show="tabValue === 'preview'"
+      force-mount
       value="preview"
       class="relative after:absolute after:inset-0 after:right-3 after:z-0 after:rounded-lg after:bg-muted h-[--container-height] px-0"
     >
@@ -216,9 +220,15 @@ watch([style, codeConfig], async () => {
           :default-size="100"
           :min-size="25"
         >
-          <div :class="metadata.containerClass">
-            <ComponentLoader :key="style" :name="name" :type-name="'block'" />
+          <div v-if="isLoading" class="flex items-center justify-center h-full">
+            <Spinner />
           </div>
+          <iframe
+            v-show="!isLoading"
+            :src="`/blocks/renderer#name=${name}&style=${style}&containerClass=${encodeURIComponent(metadata.containerClass ?? '')}`"
+            class="relative z-20 w-full bg-background h-[--container-height]"
+            @load="isLoading = false"
+          />
         </ResizablePanel>
         <ResizableHandle id="block-resizable-handle" class="relative hidden w-3 bg-transparent p-0 after:absolute after:right-0 after:top-1/2 after:h-8 after:w-[6px] after:-translate-y-1/2 after:translate-x-[-1px] after:rounded-full after:bg-border after:transition-all after:hover:h-10 sm:block" />
         <ResizablePanel id="block-resizable-panel-2" :default-size="0" :min-size="0" />
@@ -226,7 +236,7 @@ watch([style, codeConfig], async () => {
     </TabsContent>
     <TabsContent value="code" class="h-[--container-height]">
       <div
-        class="language-vue !h-full !mt-0"
+        class="language-vue !h-full !max-h-[none] !mt-0"
         v-html="codeHtml"
       />
     </TabsContent>
diff --git a/apps/www/.vitepress/theme/components/Blocks.vue b/apps/www/.vitepress/theme/components/Blocks.vue
index 0b60c559..14d9ce5c 100644
--- a/apps/www/.vitepress/theme/components/Blocks.vue
+++ b/apps/www/.vitepress/theme/components/Blocks.vue
@@ -57,7 +57,7 @@ import('../../../__registry__/index').then((res) => {
     </PageAction>
   </PageHeader>
 
-  <section>
+  <section class="grid scroll-mt-24 gap-24 lg:gap-48">
     <BlockPreview v-for="block in blocks" :key="block" :name="block" />
   </section>
 </template>
diff --git a/apps/www/.vitepress/theme/layout/MainLayout.vue b/apps/www/.vitepress/theme/layout/MainLayout.vue
index 62c299ce..e8b12ddc 100644
--- a/apps/www/.vitepress/theme/layout/MainLayout.vue
+++ b/apps/www/.vitepress/theme/layout/MainLayout.vue
@@ -84,7 +84,10 @@ watch(() => $route.path, (n) => {
 </script>
 
 <template>
-  <div vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
+  <div v-if="$route.data.frontmatter.layout === false">
+    <Content :key="$route.path" />
+  </div>
+  <div v-else vaul-drawer-wrapper class="flex min-h-screen flex-col bg-background">
     <header class="sticky z-40 top-0 bg-background/80 backdrop-blur-lg border-b border-border">
       <div
         class="container flex h-14 max-w-screen-2xl items-center"
@@ -298,4 +301,4 @@ watch(() => $route.path, (n) => {
     <NewYorkSonner :theme="'system'" />
     <NewYorkToaster />
   </div>
-</template>../components/CodeConfigCustomizer.vue
+</template>
diff --git a/apps/www/__registry__/index.ts b/apps/www/__registry__/index.ts
index 01ba753b..522f8bd6 100644
--- a/apps/www/__registry__/index.ts
+++ b/apps/www/__registry__/index.ts
@@ -1109,6 +1109,27 @@ export const Index = {
       component: () => import("../src/lib/registry/default/block/Authentication01.vue").then((m) => m.default),
       files: ["../src/lib/registry/default/block/Authentication01.vue"],
     },
+    "Authentication02": {
+      name: "Authentication02",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/default/block/Authentication02.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Authentication02.vue"],
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/default/block/Authentication03.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Authentication03.vue"],
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      type: "components:block",
+      registryDependencies: ["button","input","label"],
+      component: () => import("../src/lib/registry/default/block/Authentication04.vue").then((m) => m.default),
+      files: ["../src/lib/registry/default/block/Authentication04.vue"],
+    },
   },  "new-york": {
     "AccordionDemo": {
       name: "AccordionDemo",
@@ -2216,5 +2237,26 @@ export const Index = {
       component: () => import("../src/lib/registry/new-york/block/Authentication01.vue").then((m) => m.default),
       files: ["../src/lib/registry/new-york/block/Authentication01.vue"],
     },
+    "Authentication02": {
+      name: "Authentication02",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/new-york/block/Authentication02.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Authentication02.vue"],
+    },
+    "Authentication03": {
+      name: "Authentication03",
+      type: "components:block",
+      registryDependencies: ["button","card","input","label"],
+      component: () => import("../src/lib/registry/new-york/block/Authentication03.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Authentication03.vue"],
+    },
+    "Authentication04": {
+      name: "Authentication04",
+      type: "components:block",
+      registryDependencies: ["button","input","label"],
+      component: () => import("../src/lib/registry/new-york/block/Authentication04.vue").then((m) => m.default),
+      files: ["../src/lib/registry/new-york/block/Authentication04.vue"],
+    },
   },
 }
diff --git a/apps/www/src/content/blocks/renderer.md b/apps/www/src/content/blocks/renderer.md
new file mode 100644
index 00000000..e91c7cfd
--- /dev/null
+++ b/apps/www/src/content/blocks/renderer.md
@@ -0,0 +1,10 @@
+---
+title: Blocks - shadcn-vue
+layout: false
+---
+
+<script setup>
+import BlockPage from "../../../.vitepress/theme/components/BlockPage.vue"
+</script>
+
+<BlockPage />
diff --git a/apps/www/src/lib/registry/default/block/Authentication01.vue b/apps/www/src/lib/registry/default/block/Authentication01.vue
index 05760fe1..c4baaa9b 100644
--- a/apps/www/src/lib/registry/default/block/Authentication01.vue
+++ b/apps/www/src/lib/registry/default/block/Authentication01.vue
@@ -2,7 +2,7 @@
 export const description
   = 'A simple login form with email and password. The submit button says \'Sign in\'.'
 export const iframeHeight = '600px'
-export const containerClass = 'w-full h-full flex items-center justify-center px-4'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
 </script>
 
 <script setup lang="ts">
diff --git a/apps/www/src/lib/registry/default/block/Authentication02.vue b/apps/www/src/lib/registry/default/block/Authentication02.vue
new file mode 100644
index 00000000..54933765
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Authentication02.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+export const description
+  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Authentication03.vue b/apps/www/src/lib/registry/default/block/Authentication03.vue
new file mode 100644
index 00000000..a3d976ec
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Authentication03.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+export const description
+  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/default/ui/card'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-xl">
+        Sign Up
+      </CardTitle>
+      <CardDescription>
+        Enter your information to create an account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <Label for="first-name">First name</Label>
+            <Input id="first-name" placeholder="Max" required />
+          </div>
+          <div class="grid gap-2">
+            <Label for="last-name">Last name</Label>
+            <Input id="last-name" placeholder="Robinson" required />
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <Label for="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+        <Button type="submit" class="w-full">
+          Create an account
+        </Button>
+        <Button variant="outline" class="w-full">
+          Sign up with GitHub
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Already have an account?
+        <a href="#" class="underline">
+          Sign in
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/default/block/Authentication04.vue b/apps/www/src/lib/registry/default/block/Authentication04.vue
new file mode 100644
index 00000000..d1344054
--- /dev/null
+++ b/apps/www/src/lib/registry/default/block/Authentication04.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+export const description
+  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
+export const iframeHeight = '800px'
+export const containerClass = 'w-full h-full p-4 lg:p-0'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/default/ui/button'
+import { Input } from '@/lib/registry/default/ui/input'
+import { Label } from '@/lib/registry/default/ui/label'
+</script>
+
+<template>
+  <div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+    <div class="flex items-center justify-center py-12">
+      <div class="mx-auto grid w-[350px] gap-6">
+        <div class="grid gap-2 text-center">
+          <h1 class="text-3xl font-bold">
+            Login
+          </h1>
+          <p class="text-balance text-muted-foreground">
+            Enter your email below to login to your account
+          </p>
+        </div>
+        <div class="grid gap-4">
+          <div class="grid gap-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="m@example.com"
+              required
+            />
+          </div>
+          <div class="grid gap-2">
+            <div class="flex items-center">
+              <Label for="password">Password</Label>
+              <a
+                href="/forgot-password"
+                class="ml-auto inline-block text-sm underline"
+              >
+                Forgot your password?
+              </a>
+            </div>
+            <Input id="password" type="password" required />
+          </div>
+          <Button type="submit" class="w-full">
+            Login
+          </Button>
+          <Button variant="outline" class="w-full">
+            Login with Google
+          </Button>
+        </div>
+        <div class="mt-4 text-center text-sm">
+          Don't have an account?
+          <a href="#" class="underline">
+            Sign up
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="hidden bg-muted lg:block">
+      <img
+        src="/placeholder.svg"
+        alt="Image"
+        width="1920"
+        height="1080"
+        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+      >
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication01.vue b/apps/www/src/lib/registry/new-york/block/Authentication01.vue
index a679a45f..10132fb6 100644
--- a/apps/www/src/lib/registry/new-york/block/Authentication01.vue
+++ b/apps/www/src/lib/registry/new-york/block/Authentication01.vue
@@ -2,7 +2,7 @@
 export const description
   = 'A simple login form with email and password. The submit button says \'Sign in\'.'
 export const iframeHeight = '600px'
-export const containerClass = 'w-full h-full flex items-center justify-center px-4'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
 </script>
 
 <script setup lang="ts">
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication02.vue b/apps/www/src/lib/registry/new-york/block/Authentication02.vue
new file mode 100644
index 00000000..3c193e07
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Authentication02.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+export const description
+  = 'A login form with email and password. There\'s an option to login with Google and a link to sign up if you don\'t have an account.'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-2xl">
+        Login
+      </CardTitle>
+      <CardDescription>
+        Enter your email below to login to your account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <div class="flex items-center">
+            <Label for="password">Password</Label>
+            <a href="#" class="ml-auto inline-block text-sm underline">
+              Forgot your password?
+            </a>
+          </div>
+          <Input id="password" type="password" required />
+        </div>
+        <Button type="submit" class="w-full">
+          Login
+        </Button>
+        <Button variant="outline" class="w-full">
+          Login with Google
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Don't have an account?
+        <a href="#" class="underline">
+          Sign up
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication03.vue b/apps/www/src/lib/registry/new-york/block/Authentication03.vue
new file mode 100644
index 00000000..7f16bee2
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Authentication03.vue
@@ -0,0 +1,65 @@
+<script lang="ts">
+export const description
+  = 'A sign up form with first name, last name, email and password inside a card. There\'s an option to sign up with GitHub and a link to login if you already have an account'
+export const iframeHeight = '600px'
+export const containerClass = 'w-full h-screen flex items-center justify-center px-4'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/lib/registry/new-york/ui/card'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <Card class="mx-auto max-w-sm">
+    <CardHeader>
+      <CardTitle class="text-xl">
+        Sign Up
+      </CardTitle>
+      <CardDescription>
+        Enter your information to create an account
+      </CardDescription>
+    </CardHeader>
+    <CardContent>
+      <div class="grid gap-4">
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <Label for="first-name">First name</Label>
+            <Input id="first-name" placeholder="Max" required />
+          </div>
+          <div class="grid gap-2">
+            <Label for="last-name">Last name</Label>
+            <Input id="last-name" placeholder="Robinson" required />
+          </div>
+        </div>
+        <div class="grid gap-2">
+          <Label for="email">Email</Label>
+          <Input
+            id="email"
+            type="email"
+            placeholder="m@example.com"
+            required
+          />
+        </div>
+        <div class="grid gap-2">
+          <Label for="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+        <Button type="submit" class="w-full">
+          Create an account
+        </Button>
+        <Button variant="outline" class="w-full">
+          Sign up with GitHub
+        </Button>
+      </div>
+      <div class="mt-4 text-center text-sm">
+        Already have an account?
+        <a href="#" class="underline">
+          Sign in
+        </a>
+      </div>
+    </CardContent>
+  </Card>
+</template>
diff --git a/apps/www/src/lib/registry/new-york/block/Authentication04.vue b/apps/www/src/lib/registry/new-york/block/Authentication04.vue
new file mode 100644
index 00000000..9e8f044e
--- /dev/null
+++ b/apps/www/src/lib/registry/new-york/block/Authentication04.vue
@@ -0,0 +1,73 @@
+<script lang="ts">
+export const description
+  = 'A login page with two columns. The first column has the login form with email and password. There\'s a Forgot your passwork link and a link to sign up if you do not have an account. The second column has a cover image.'
+export const iframeHeight = '800px'
+export const containerClass = 'w-full h-full p-4 lg:p-0'
+</script>
+
+<script setup lang="ts">
+import { Button } from '@/lib/registry/new-york/ui/button'
+import { Input } from '@/lib/registry/new-york/ui/input'
+import { Label } from '@/lib/registry/new-york/ui/label'
+</script>
+
+<template>
+  <div class="w-full lg:grid lg:min-h-[600px] lg:grid-cols-2 xl:min-h-[800px]">
+    <div class="flex items-center justify-center py-12">
+      <div class="mx-auto grid w-[350px] gap-6">
+        <div class="grid gap-2 text-center">
+          <h1 class="text-3xl font-bold">
+            Login
+          </h1>
+          <p class="text-balance text-muted-foreground">
+            Enter your email below to login to your account
+          </p>
+        </div>
+        <div class="grid gap-4">
+          <div class="grid gap-2">
+            <Label for="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              placeholder="m@example.com"
+              required
+            />
+          </div>
+          <div class="grid gap-2">
+            <div class="flex items-center">
+              <Label for="password">Password</Label>
+              <a
+                href="/forgot-password"
+                class="ml-auto inline-block text-sm underline"
+              >
+                Forgot your password?
+              </a>
+            </div>
+            <Input id="password" type="password" required />
+          </div>
+          <Button type="submit" class="w-full">
+            Login
+          </Button>
+          <Button variant="outline" class="w-full">
+            Login with Google
+          </Button>
+        </div>
+        <div class="mt-4 text-center text-sm">
+          Don't have an account?
+          <a href="#" class="underline">
+            Sign up
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="hidden bg-muted lg:block">
+      <img
+        src="/placeholder.svg"
+        alt="Image"
+        width="1920"
+        height="1080"
+        class="h-full w-full object-cover dark:brightness-[0.2] dark:grayscale"
+      >
+    </div>
+  </div>
+</template>
diff --git a/apps/www/src/public/placeholder.svg b/apps/www/src/public/placeholder.svg
new file mode 100644
index 00000000..e763910b
--- /dev/null
+++ b/apps/www/src/public/placeholder.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
\ No newline at end of file