fix(scenarios): fix scenario part

src/App.tsx

@@ -3,6 +3,7 @@ import Header from "./components/Header";
 import Hero from "./components/Hero";
 import IntegratedApps from "./components/IntegratedApps";
 import LinkRow from "./components/LinkRow";
+import Scenarios from "./components/scenarios";
 
 function App() {
   return (
@@ -19,6 +20,7 @@ function App() {
       <LinkRow />
       <IntegratedApps />
       <CodePart />
+      <Scenarios />
     </>
   );
 }

src/components/scenarios.tsx

@@ -0,0 +1,57 @@
+import Container from "./Container";
+
+export default function Scenarios() {
+  return (
+    <Container classes="lg:px-[6.25rem] 3xl:px-[6.25rem] py-[6.25rem] bg-[#00D448] flex flex-col items-center">
+      <h3 className="text-[3.5rem] text-[#161616] font-[600] mb-[5.625rem]">
+        Scenarios include but are not limited to
+      </h3>
+      <div className="flex items-center justify-between">
+        <div className="text-center flex flex-col items-center w-[25%]">
+          <img
+            src="/assets/icons/scenario1-icon.svg"
+            alt="msgport scenario"
+            className="w-[6.25rem] h-[6.25rem] object-contain mb-[1.8rem]"
+          />
+          <h4 className="text-[1.3rem] text-[#161616] font-[600] mb-[0.625rem]">
+            Cross-chain Token Management
+          </h4>
+          <p className="text-[1rem] text-[#161616] font-[300]">
+            Msgport enables easy transfer and management of tokens across
+            different chains.
+          </p>
+        </div>
+        <div className="text-center flex flex-col items-center w-[25%]">
+          <img
+            src="/assets/icons/scenario2-icon.svg"
+            alt="msgport scenario"
+            className="w-[6.25rem] h-[6.25rem] object-contain mb-[1.8rem]"
+          />
+          <h4 className="text-[1.3rem] text-[#161616] font-[600] mb-[0.625rem]">
+            Cross-chain Abstract Accounts
+          </h4>
+          <p className="text-[1rem] text-[#161616] font-[300]">
+            With Msgport as the underlying support, a common account can create
+            counterpart accounts on different chains, abstracting away
+            chain-specific details.
+          </p>
+        </div>
+        <div className="text-center flex flex-col items-center w-[25%]">
+          <img
+            src="/assets/icons/scenario3-icon.svg"
+            alt="msgport scenario"
+            className="w-[6.25rem] h-[6.25rem] object-contain mb-[1.8rem]"
+          />
+          <h4 className="text-[1.3rem] text-[#161616] font-[600] mb-[0.625rem]">
+            Cross-chain Governance{" "}
+          </h4>
+          <p className="text-[1rem] text-[#161616] font-[300]">
+            Msgport allows you to utilize abstract accounts to refactor your
+            current governance models, facilitating seamless operations across
+            different chains.
+          </p>
+        </div>
+      </div>
+    </Container>
+  );
+}