✨ place the number of animations on first page

components/totalComponents/TotalComponents.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect, useState } from "react";
+
+const TotalComponents: React.FC = () => {
+  const [total, setTotal] = useState<number>(0);
+
+  useEffect(() => {
+    const importAll = (r: __WebpackModuleApi.RequireContext) => {
+      return r.keys().map(r);
+    };
+
+    const jsonFiles = importAll(
+      require.context("../../data", false, /\.json$/)
+    );
+
+    const totalComponents = jsonFiles.reduce(
+      (acc, file) => acc + file.length,
+      0
+    );
+    setTotal(totalComponents);
+  }, []);
+
+  return (
+    <div>
+      <p>
+        We currently have <strong>{total}</strong> awesome UI components created
+        by the React Native community!
+      </p>
+    </div>
+  );
+};
+
+export default TotalComponents;

docs/getting-started.mdx

@@ -12,6 +12,9 @@ Explore creative UI animations made with React Native by the community.
 
 👉 **Check out the Animations on the sidebar** to see what's possible!
 
+import TotalComponents from '@site/components/TotalComponents/TotalComponents';
+
+<TotalComponents />
 ---
 
 Enjoy your visit!