Merge pull request #15 from oasisprotocol/mz/createLayout

Create template selection page

Author: buberdds

src/components/Layout/Header.tsx

@@ -31,7 +31,7 @@ export const Header: FC = () => {
         <div className="flex items-center gap-4">
           {isConnected && (
             <Button asChild>
-              <Link to="/dashboard/create">
+              <Link to="/create">
                 Create
                 <Plus className="ml-2 h-4 w-4" />
               </Link>

src/main.tsx

@@ -53,8 +53,8 @@ createRoot(document.getElementById('root')!).render(
                 <Route path="apps/:id" element={<AppDetails />} />
                 <Route path="machines" element={<Machines />} />
                 <Route path="machines/:id" element={<MachinesDetails />} />
-                <Route path="create" element={<Create />} />
               </Route>
+              <Route path="/create" element={<Create />} />
               <Route path="/explore" element={<MainLayout />}>
                 <Route index element={<Explore />} />
               </Route>

src/pages/CreateApp/images/eliza.svg

@@ -1,5 +1,67 @@
 import { type FC } from 'react';
+import { Link } from 'react-router-dom';
+import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout';
+import { Header } from '../../components/Layout/Header';
+import { Footer } from '../../components/Layout/Footer';
+import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from '@oasisprotocol/ui-library/src/components/ui/card';
+import ElizaBg from './images/eliza.svg';
 
 export const Create: FC = () => {
-  return <>Create</>;
+  return (
+    <div className="[&>*]:md:max-h-none [&>*]:md:h-auto">
+      <Layout headerContent={<Header />} footerContent={<Footer />}>
+        <div className="max-w-6xl mx-auto px-8 py-12">
+          <div className="mb-8">
+            <h1 className="text-2xl font-white font-bold mb-2">
+              Start by Selecting a Template
+            </h1>
+            <p className="text-muted-foreground text-md max-w-md">
+              At varius sit sit netus at integer vitae posuere id. Nulla
+              imperdiet vestibulum amet ultrices egestas.
+            </p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            <Card className="rounded-md">
+              <div className="rounded-t-md bg-black -mt-6 flex items-center justify-center pb-2">
+                <img src={ElizaBg} alt="Eliza" />
+              </div>
+              <CardHeader>
+                <CardTitle className="text-white text-lg">elizaOS</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <span className="text-muted-foreground text-sm">
+                  Multi-agent simulation framework designed for creating,
+                  deploying, and managing AI agents across different platforms.
+                </span>
+              </CardContent>
+              <CardFooter>
+                <Button className="w-full" asChild>
+                  <Link to="/">Select</Link>
+                </Button>
+              </CardFooter>
+            </Card>
+            <Card className="border-0 rounded-md">
+              <CardContent className="flex flex-col items-center justify-center h-full min-h-[300px] text-center space-y-2">
+                <span className="text-muted-foreground text-lg font-semibold">
+                  New Templates soon
+                </span>
+                <span className="text-muted-foreground text-sm">
+                  Quis id donec platea phasellus orci purus at. Sollicitudin
+                  lacus morbi est iaculis aliquam.
+                </span>
+              </CardContent>
+            </Card>
+            <Card className="border-0 rounded-md rounded-lg bg-gradient-to-r from-card to-transparent"></Card>
+          </div>
+        </div>
+      </Layout>
+    </div>
+  );
 };

src/pages/CreateApp/index.tsx

@@ -11,7 +11,7 @@ export const MyAppsEmptyState: FC = () => {
       description="  At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
     >
       <Button asChild>
-        <Link to="/dashboard/create">
+        <Link to="/create">
           Create
           <Plus className="ml-2 h-4 w-4" />
         </Link>