feat(landing): init SsDB toolkit support intro

README.md

@@ -1,10 +1,10 @@
-# [Ningowood](http://ningowood) v0.2.0: Add the missing community to the spreadsheet database ecology
+# [Ningowood](http://ningowood) v0.2.0: Add the missing all-in-one community to the spreadsheet database ecology
 
-![](./public/static/showcase-20221126.webp)
+![](./public/static/showcase-20230604.webp)
 
 ## Read the newest artitle
 
-[Ningowood v0.2.0: Add the missing community to the spreadsheet database ecology](./blogs/2023-0618-ningowood-v0_2.md): in writing...
+[Ningowood v0.2.0: Add the missing all-in-one community to the spreadsheet database ecology](./blogs/2023-0618-ningowood-v0_2.md): in writing...
 
 ## Webinar resource
 

blogs/2023-0618-ningowood-v0_2.md

@@ -1,4 +1,4 @@
-# [Ningowood](http://ningowood) v0.2.0: Add the missing community to the spreadsheet database ecology
+# [Ningowood](http://ningowood) v0.2.0: Add the missing all-in-one community to the spreadsheet database ecology
 
 ![](./public/static/showcase-20221126.webp)
 

ningowood.com/app/layout.tsx

@@ -8,13 +8,13 @@ import { Suspense } from "react"
 
 export const metadata = {
   title:
-    "Ningowood - Add the missing community to the spreadsheet database ecology",
+    "Ningowood - Add the missing all-in-one community to the spreadsheet database ecology",
   description:
     "Ningowood v0.2 is focus on adding the missing community to the spreadsheet database ecology.",
   twitter: {
     card: "summary_large_image",
     title:
-      "Ningowood - Add the missing community to the spreadsheet database ecology",
+      "Ningowood - Add the missing all-in-one community to the spreadsheet database ecology",
     description:
       "Ningowood v0.2 is focus on adding the missing community to the spreadsheet database ecology.",
     creator: "@hylerrix",

ningowood.com/components/home/constant.tsx

@@ -0,0 +1,100 @@
+import { SupportItem } from "./type"
+
+export const SupportSsDB: SupportItem[] = [
+  {
+    name: 'Airtable',
+    logo: '/logo/airtable.webp',
+    link: 'https://airtable.com/invite/r/40Xexj1v',
+  },
+  {
+    name: 'Notion',
+    logo: '/logo/notion.webp',
+    link: 'https://notion.so/',
+  },
+  {
+    name: 'Apitable',
+    logo: '/logo/apitable.webp',
+    link: 'https://apitable.com/',
+  },
+  {
+    name: 'Rowy',
+    logo: '/logo/rowy.webp',
+    link: 'https://www.rowy.io/',
+  },
+  {
+    name: 'Baserow',
+    logo: '/logo/baserow.webp',
+    link: 'https://baserow.io/',
+  },
+  {
+    name: 'Jotform',
+    logo: '/logo/jotform.webp',
+    link: 'https://www.jotform.com/',
+  },
+  {
+    name: 'Rows',
+    logo: '/logo/rows.webp',
+    link: 'https://rows.com/',
+  },
+  {
+    name: 'Spreadsheet.com',
+    logo: '/logo/spreadsheet-com.webp',
+    link: 'https://www.spreadsheet.com/',
+  },
+  {
+    name: 'actiondesk',
+    logo: '/logo/actiondesk.webp',
+    link: 'https://www.actiondesk.io/',
+  },
+  // {
+  //   name: 'Trello',
+  //   logo: '/logo/trello.webp',
+  //   link: 'https://trello.com/',
+  // },
+  // {
+  //   name: 'monday.com',
+  //   logo: '/logo/monday-com.webp',
+  //   link: 'https://monday.com/',
+  // },
+  // {
+  //   name: 'Asana',
+  //   logo: '/logo/asana.webp',
+  //   link: 'https://asana.com',
+  // },
+  // {
+  //   name: 'Lark',
+  //   logo: '/logo/lark.webp',
+  //   link: 'https://www.larksuite.com/en_us/product/creation',
+  // },
+  // wrike.com...s
+]
+
+export const SupportSsDBCN = []
+
+// Mainly as XLS file
+export const SupportSsFile: SupportItem[] = [
+  {
+    name: 'Google Sheets',
+    logo: '/logo/google-sheets.webp',
+    link: 'https://docs.google.com/spreadsheets/',
+  },
+  {
+    name: 'Microsoft Excel',
+    logo: '/logo/microsoft-excel.webp',
+    link: 'https://www.microsoft.com/en-us/microsoft-365/excel',
+  },
+]
+
+// Mainly as XLS file
+export const SupportWorkflow: SupportItem[] = [
+  {
+    name: 'Zapier',
+    logo: '/logo/zapier.webp',
+    link: 'https://zapier.com/',
+  },
+  {
+    name: 'n8n',
+    logo: '/logo/n8n.webp',
+    link: 'https://n8n.io/',
+  },
+]

ningowood.com/components/home/dashboard/components/recent-databases.tsx

@@ -10,27 +10,43 @@ const RECENT_DATABASE_LIST = [
     stars: 9999,
   },
   {
-    logo: "/logo/airtable.webp",
-    type: "Airtable",
+    logo: "/logo/notion.webp",
+    type: "Notion",
     author: "hylerrix",
     name: "My favorite game List",
     description: "Including PS, XBox, Switch, Steam, GOG, Epic and more.",
     stars: 1593,
   },
   {
-    logo: "/logo/airtable.webp",
-    type: "Airtable",
+    logo: "/logo/jotform.webp",
+    type: "Jotform",
     author: "hylerrix",
-    name: "The films I watched",
-    description: "National Theatre Live: The Lehman Trilogy is my favorite!",
-    stars: 4276,
+    name: "Automation workflow example",
+    description: "The official Ningowood showcase to control all your workflow.",
+    stars: 8704,
   },
   {
-    logo: "/logo/airtable.webp",
-    type: "Airtable",
+    logo: "/logo/rowy.webp",
+    type: "Rowy",
     author: "hylerrix",
     name: "Cloud Native Tech Stack",
     description: "Chose what you need, all in one. Contribution is welcome.",
+    stars: 7538,
+  },
+  {
+    logo: "/logo/baserow.webp",
+    type: "Baserow",
+    author: "hylerrix",
+    name: "Awesome Next.js starter",
+    description: "Oh my God it's too many! Which one?",
+    stars: 9326,
+  },
+  {
+    logo: "/logo/apitable.webp",
+    type: "Apitable",
+    author: "hylerrix",
+    name: "The films I watched",
+    description: "National Theatre Live: The Lehman Trilogy is my favorite!",
     stars: 4276,
   },
 ]

ningowood.com/components/home/home-Intro-header.tsx

@@ -1,8 +1,29 @@
 import Balancer from "react-wrap-balancer"
+import Image from "next/image"
 
 import { nFormatter } from "@/lib/utils"
 import { DEPLOY_URL } from "@/lib/constants"
 import { Github, Twitter } from "@/components/shared/icons"
+import { SupportSsDB } from "./constant"
+import { SupportItem } from "./type"
+
+interface SupportItemProps {
+  db: SupportItem
+}
+
+const SupportItem = ({ db }: SupportItemProps) => {
+  return (
+    <a href={db.link} className="inline-block mx-1">
+      <Image
+        src={db.logo}
+        alt={db.name}
+        className="h-10 w-10 rounded-full"
+        width={20}
+        height={20}
+      />
+    </a>
+  )
+}
 
 export default function HomeIntroHeader() {
   // const { stargazers_count: stars } = await fetch(
@@ -24,7 +45,7 @@ export default function HomeIntroHeader() {
   return (
     <div className="z-10 w-full max-w-xl px-5 xl:px-0">
       <a
-        href="https://twitter.com/steventey/status/1613928948915920896"
+        href="https://twitter.com/hylerrix/hylerrix"
         target="_blank"
         rel="noreferrer"
         className="mx-auto mb-5 flex max-w-fit animate-fade-up items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors hover:bg-blue-200"
@@ -39,18 +60,24 @@ export default function HomeIntroHeader() {
         style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
       >
         <Balancer>
-          Add the missing community to the spreadsheet database ecology
+          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 sharing as easy as you wish. First support
-          Airtable.
+          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>
       <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" }}
@@ -75,8 +102,9 @@ export default function HomeIntroHeader() {
               strokeLinejoin="round"
             />
           </svg>
-          <p>Explore now</p>
+          <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"
@@ -89,6 +117,14 @@ export default function HomeIntroHeader() {
             <span className="font-semibold">{nFormatter(999)}</span>
           </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">
+          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>
   )

ningowood.com/components/home/type.tsx

@@ -0,0 +1,5 @@
+export interface SupportItem {
+  name: string
+  logo: string
+  link: string
+}

ningowood.com/components/layout/footer.tsx

@@ -11,6 +11,33 @@ export default function Footer() {
         >
           Precedent
         </a>
+        ,&nbsp;
+        <a
+          className="font-medium text-gray-800 underline transition-colors"
+          href="https://ui.shadcn.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Shadcn UI
+        </a>
+        ,&nbsp;
+        <a
+          className="font-medium text-gray-800 underline transition-colors"
+          href="https://tx.shadcn.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Taxonomy
+        </a>
+        &nbsp;and&nbsp;
+        <a
+          className="font-medium text-gray-800 underline transition-colors"
+          href="https://preline.co/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Preline UI
+        </a>
       </p>
     </div>
   )