docs: Update intro page (#2767)

docs/src/components/columns.tsx

@@ -0,0 +1,32 @@
+import React, { ReactNode, CSSProperties } from "react";
+import clsx from "clsx";
+
+interface ColumnsProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+// className will allow you to pass either your custom classes or the native infima classes https://infima.dev/docs/layout/grid.
+// style will allow you to either pass your custom styles directly, which can be an alternative to the "styles.module.css" file in certain cases.
+export function Columns({ children, className, style }: ColumnsProps) {
+  return (
+    <div className="container center">
+      <div className={clsx("row", className)} style={style}>
+        {children}
+      </div>
+    </div>
+  );
+}
+
+interface ColumnProps {
+  children: ReactNode;
+  className?: string;
+  style?: CSSProperties;
+}
+export function Column({ children, className, style }: ColumnProps) {
+  return (
+    <div className={clsx("col", className)} style={style}>
+      {children}
+    </div>
+  );
+}