docs: add framework page (#12162)

* initial draft

* finalize page

* fix vale error

* changes to intro

* small fix

* added features list

www/packages/docs-ui/src/components/SplitLists/index.tsx

@@ -0,0 +1,49 @@
+import React, { useMemo } from "react"
+import { Link } from "../Link"
+
+type SplitListItem = {
+  title: string
+  link: string
+  description?: string
+}
+
+export type SplitListProps = {
+  items: SplitListItem[]
+  listsNum?: number
+}
+
+export const SplitList = ({ items, listsNum = 2 }: SplitListProps) => {
+  const lists = useMemo(() => {
+    const lists: SplitListItem[][] = new Array(listsNum).fill(0).map(() => [])
+    // Split the items into listsNum lists
+    // by pushing each item into the list at index i % listsNum
+    // where i is the index of the item in the items array
+    // This will create a round-robin distribution of the items
+    // across the lists
+    // For example, if items = [1, 2, 3, 4, 5] and listsNum = 2
+    // the result will be [[1, 3, 5], [2, 4]]
+    items.forEach((item, index) => {
+      lists[index % listsNum].push(item)
+    })
+    return lists
+  }, [items, listsNum])
+
+  return (
+    <div className="flex flex-col md:flex-row gap-docs_0.5 w-full">
+      {lists.map((list, index) => (
+        <ul key={index} className="flex-1">
+          {list.map((item) => (
+            <li key={item.link} className="mb-docs_0.5">
+              <Link href={item.link}>{item.title}</Link>
+              {item.description && (
+                <>
+                  : <p className="text-docs_3">{item.description}</p>
+                </>
+              )}
+            </li>
+          ))}
+        </ul>
+      ))}
+    </div>
+  )
+}

www/packages/docs-ui/src/components/index.ts

@@ -70,6 +70,7 @@ export * from "./Select"
 export * from "./Sidebar"
 export * from "./Sidebar/Item"
 export * from "./SourceCodeLink"
+export * from "./SplitLists"
 export * from "./Table"
 export * from "./Tabs"
 export * from "./TextArea"