feat(landing): determine to beyond LifeTable & build Micro-App-Center…

… early
lifetable-ai · Jun 6, 2023 · 2ae1103 · 2ae1103
1 parent 2c12228
commit 2ae1103
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 51 deletions.
diff --git a/ningowood.com/app/layout.tsx b/ningowood.com/app/layout.tsx
@@ -35,7 +35,7 @@ export default async function RootLayout({
           {/* @ts-expect-error Server Component */}
           <Nav />
         </Suspense>
-        <main className="flex min-h-screen w-full flex-col items-center justify-center pt-32 py-12">
+        <main className="flex min-h-screen w-full flex-col items-center justify-center pt-16 py-12">
           {children}
         </main>
         <Footer />

diff --git a/ningowood.com/app/page.tsx b/ningowood.com/app/page.tsx
@@ -1,5 +1,7 @@
 import HomeIntroHeader from "@/components/home/home-Intro-header"
 import DashboardPage from "@/components/home/dashboard/page"
+import Balancer from "react-wrap-balancer"
+import FutureAppPreview from "@/components/home/future-app-preview"
 
 export default async function Home() {
   return (
@@ -9,8 +11,8 @@ export default async function Home() {
        * In '../components' folder we connot use fetch?
        */}
       <HomeIntroHeader />
-      <div className="mt-12"></div>
       <DashboardPage />
+      <FutureAppPreview />
     </>
   )
 }
diff --git a/ningowood.com/components/home/constant.tsx b/ningowood.com/components/home/constant.tsx
@@ -46,6 +46,11 @@ export const SupportSsDB: SupportItem[] = [
     logo: '/logo/actiondesk.webp',
     link: 'https://www.actiondesk.io/',
   },
+  {
+    name: 'Mathesar',
+    logo: '/logo/mathesar.webp',
+    link: 'https://www.mathesar.org/',
+  },
   // {
   //   name: 'Trello',
   //   logo: '/logo/trello.webp',

diff --git a/ningowood.com/components/home/future-app-preview.tsx b/ningowood.com/components/home/future-app-preview.tsx
@@ -0,0 +1,43 @@
+import Balancer from "react-wrap-balancer"
+
+export default function HomeIntroHeader() {
+  return (
+    <div className="z-10 w-full max-w-5xl px-6 py-6 text-center border-fuchsia-500 border-2">
+      <h1 className="animate-fade-up text-4xl">Future App Preview</h1>
+
+      <h1
+        className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm"
+        style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
+      >
+        <Balancer className="text-2xl mt-4">
+          Flowchats AI
+        </Balancer>
+      </h1>
+      <p
+        className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
+        style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
+      >
+        <Balancer>
+          Your all-in-one AI chat app in canvas tree, and save it into LifeTable.
+        </Balancer>
+      </p>
+
+      <h1
+        className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm"
+        style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
+      >
+        <Balancer className="text-2xl mt-4">
+          Navigator AI
+        </Balancer>
+      </h1>
+      <p
+        className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
+        style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
+      >
+        <Balancer>
+          Web nav manager in AI era, forget about your outdated browser bookmarks.
+        </Balancer>
+      </p>
+    </div>
+  )
+}
diff --git a/ningowood.com/components/home/home-Intro-header.tsx b/ningowood.com/components/home/home-Intro-header.tsx
@@ -43,7 +43,7 @@ export default function HomeIntroHeader() {
   //   .catch((e) => console.log(e))
 
   return (
-    <div className="z-10 w-full max-w-xl px-5 xl:px-0">
+    <div className="my-4">
       <a
         href="https://twitter.com/hylerrix/hylerrix"
         target="_blank"
@@ -55,56 +55,73 @@ export default function HomeIntroHeader() {
           Introducing Ningowood v0.2
         </p>
       </a>
-      <h1
-        className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm"
-        style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
-      >
-        <Balancer>
-          Add the missing all-in-one community to the spreadsheet database ecology
-        </Balancer>
-      </h1>
-      <p
-        className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
-        style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
-      >
-        <Balancer>
-          Make the structured data all together, and sharing as easy as you wish.
-        </Balancer>
-      </p>
-      <div
-        className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
-        style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
-      >
-        { SupportSsDB.map((db) => <SupportItem db={db} />) }
-        <span className="mx-1">...</span>
+
+      <div className="z-10 w-full max-w-full px-6 py-6 border-fuchsia-500 border-2">
+        <h1
+          className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm"
+          style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
+        >
+          <Balancer className="text-4xl">
+            Introducing 1st CORE APP in micro app market: <span className="text-5xl">LifeTable</span>!
+          </Balancer>
+        </h1>
+        <h1
+          className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm"
+          style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
+        >
+          <Balancer className="text-2xl mt-4">
+            Add the missing all-in-one community to the spreadsheet database ecology
+          </Balancer>
+        </h1>
+        <p
+          className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
+          style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
+        >
+          <Balancer>
+            Make the structured data all together, and sharing as easy as you wish.
+          </Balancer>
+        </p>
+        <div
+          className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
+          style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
+        >
+          { SupportSsDB.map((db, index) => <SupportItem db={db} key={index} />) }
+          <span className="mx-1">...</span>
+        </div>
+
+        <div
+          className="mx-auto mt-4 flex animate-fade-up items-center justify-center space-x-5 opacity-0"
+          style={{ animationDelay: "0.3s", animationFillMode: "forwards" }}
+        >
+          <a
+            className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black"
+            href={DEPLOY_URL}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <svg
+              className="h-4 w-4 group-hover:text-black"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 4L20 20H4L12 4Z"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <p>Add your database</p>
+          </a>
+        </div>
       </div>
+
       <div
         className="mx-auto mt-6 flex animate-fade-up items-center justify-center space-x-5 opacity-0"
         style={{ animationDelay: "0.3s", animationFillMode: "forwards" }}
       >
-        <a
-          className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black"
-          href={DEPLOY_URL}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <svg
-            className="h-4 w-4 group-hover:text-black"
-            viewBox="0 0 24 24"
-            fill="currentColor"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M12 4L20 20H4L12 4Z"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-          <p>Add your database</p>
-        </a>
-
         <a
           className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800"
           href="https://github.com/ningowood/ningowood"
@@ -118,13 +135,12 @@ export default function HomeIntroHeader() {
           </p>
         </a>
 
-        <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 border border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-4 dark:focus:ring-offset-gray-800" href="/os/lifetable">
+        <a className="inline-flex justify-center items-center gap-x-3 text-center bg-gradient-to-tl from-blue-600 to-violet-600 hover:from-violet-600 hover:to-blue-600 border-transparent text-white text-sm font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-white py-3 px-4 dark:focus:ring-offset-gray-800" href="/os/lifetable">
           Explore Now
           <svg className="w-3 h-3" width="16" height="16" viewBox="0 0 16 16" fill="none">
             <path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
           </svg>
         </a>
-
       </div>
     </div>
   )

diff --git a/blogs/2023-0618-ningowood-v0_2.md → ...ood.com/posts/2023-0618-ningowood-v0_2.md b/blogs/2023-0618-ningowood-v0_2.md → ...ood.com/posts/2023-0618-ningowood-v0_2.md
diff --git a/ningowood.com/public/logo/mathesar.webp b/ningowood.com/public/logo/mathesar.webp
diff --git a/package.json b/package.json
@@ -4,7 +4,8 @@
   "description": "![](./public/static/showcase-20221126.webp)",
   "main": "index.js",
   "scripts": {
-    "dev": "cd ningowood.com && npm run dev"
+    "dev": "cd ningowood.com && npm run dev",
+    "build": "cd ningowood.com && npm run build"
   },
   "keywords": [],
   "author": {