fix: wrap Lottie with BrowserOnly to prevent server-side rendering er…

…rors (#67)

docs/intro.md

@@ -3,18 +3,20 @@ id: intro
 title: Introduction to 0G
 sidebar_position: 2
 ---
+
 # Introduction to 0G
+
 ---
 
-import Lottie from '@lottielab/lottie-player/react';
+import LottieAnimation from '@site/src/components/lottieAnimation';
 
 ## The First Decentralized AI Operating System (dAIOS)
 
-**0G (Zero Gravity)** is the first decentralized AI [operating system](https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/) that acts as the foundational layer for decentralized AI applications and chains. It efficiently orchestrates utilization of hardware resources such as storage and compute and software assets such as data and models to handle the scale and complexity of AI workloads. 
+**0G (Zero Gravity)** is the first decentralized AI [operating system](https://edu.gcfglobal.org/en/computerbasics/understanding-operating-systems/1/) that acts as the foundational layer for decentralized AI applications and chains. It efficiently orchestrates utilization of hardware resources such as storage and compute and software assets such as data and models to handle the scale and complexity of AI workloads.
 
-Specifically designed for AI (d)applications and chains, 0G features the fastest, infinitely scalable data availability (DA) layer, the cheapest decentralized storage system, and a novel flexible serving framework for inferences and finetuning. Prior to 0G, resource-intensive AI applications would only be feasible “off-chain” due to burdensome on-chain costs, low latency and throughput, and a lack of builder-friendly tooling. 
+Specifically designed for AI (d)applications and chains, 0G features the fastest, infinitely scalable data availability (DA) layer, the cheapest decentralized storage system, and a novel flexible serving framework for inferences and finetuning. Prior to 0G, resource-intensive AI applications would only be feasible “off-chain” due to burdensome on-chain costs, low latency and throughput, and a lack of builder-friendly tooling.
 
-For the first time ever, 0G bridges this cost and efficiency gap between Web2 and Web3, empowering builders to confidently deploy AI applications on-chain with _improved_ performance. 
+For the first time ever, 0G bridges this cost and efficiency gap between Web2 and Web3, empowering builders to confidently deploy AI applications on-chain with _improved_ performance.
 
 <div style={{textAlign: 'center'}}>
   <img src="/img/0g-architecture.png" alt="Democratized AI" style={{maxWidth: '100%'}} />
@@ -39,16 +41,17 @@ An AI serving framework is a system that facilitates the deployment and executio
 
 **What is a modular blockchain?**
 A modular blockchain is one where each layer or component is specialized for a particular function, improving scalability and flexibility. 0G Chain uses this architecture to optimize its components, allowing for independent optimization of consensus, execution, and chain storage. This modular architecture enables each component to be fine-tuned for its specific requirements, resulting in enhanced performance, scalability, and flexibility for decentralized AI applications.
- </details>
 
-All of these network components utilize carefully designed and innovative sharding mechanisms to achieve infinite horizontal scalability, thereby removing obstacles to the true democratization of AI. 
+ </details>
 
+All of these network components utilize carefully designed and innovative sharding mechanisms to achieve infinite horizontal scalability, thereby removing obstacles to the true democratization of AI.
 
 ## 0G’s Namesake
 
-“0G” gets its name from “Zero Gravity,” personifying the ultimate goal of achieving a state of weightlessness where transactions and data exchanges can occur effortlessly. Infrastructure should be customizable for developers and invisible to the end-user. 
+“0G” gets its name from “Zero Gravity,” personifying the ultimate goal of achieving a state of weightlessness where transactions and data exchanges can occur effortlessly. Infrastructure should be customizable for developers and invisible to the end-user.
+
+With 0G’s technology, the possibilities are endless. Previously infeasible use cases are now within reach, including:
 
-With 0G’s technology, the possibilities are endless. Previously infeasible use cases are now within reach, including: 
 - On-chain AI, including training large language models (LLMs)
 - Storage of entire AI agent networks on-chain
 - Storage of large datasets for data cleaning and labeling
@@ -62,6 +65,7 @@ At 0G, our mission is clear: To Make AI a Public Good.
 Every component of our ecosystem contributes toward this goal, and we invite you to join us in building the foundation for a decentralized AI future.
 
 This introduction serves as your gateway into the 0G ecosystem. For deeper insights on various products, explore the next sections to learn about 0G dAIOS. If you’re ready to dive in, check out our guides:
+
 - [Run a Node](/run-a-node/overview)
 - [Use our Storage Network](/build-with-0g/storage-sdk)
 - [Learn more about 0G's Architecture](/learn-more/whitepaper)
@@ -74,4 +78,4 @@ This introduction serves as your gateway into the 0G ecosystem. For deeper insig
 
 We're excited to have you on board as we build the future of Web3xAI infrastructure together!
 
-<Lottie src="https://cdn.lottielab.com/l/3cp3bJwTzHxWRS.json" autoplay />
+<LottieAnimation />

src/components/lottieAnimation.tsx

@@ -0,0 +1,32 @@
+import { LottieProps } from "@lottielab/lottie-player/react";
+import React, { useEffect, useState } from "react";
+import BrowserOnly from "@docusaurus/BrowserOnly";
+import { ILottie } from "@lottielab/lottie-player";
+
+const LottieAnimation = () => {
+  const [LottieComponent, setLottieComponent] =
+    useState<React.ForwardRefExoticComponent<
+      LottieProps & React.RefAttributes<ILottie>
+    > | null>(null);
+
+  useEffect(() => {
+    import("@lottielab/lottie-player/react").then((module) => {
+      setLottieComponent(() => module.default);
+    });
+  }, []);
+
+  return (
+    <BrowserOnly>
+      {() =>
+        LottieComponent ? (
+          <LottieComponent
+            src="https://cdn.lottielab.com/l/3cp3bJwTzHxWRS.json"
+            autoplay
+          />
+        ) : null
+      }
+    </BrowserOnly>
+  );
+};
+
+export default LottieAnimation;