Ecosystem

Author: AttAditya

src/App.jsx

@@ -1,13 +1,15 @@
 import { Navbar } from "@components/Navbar"
 import { Hero } from "@components/Hero"
 import { Future } from "@components/Future"
+import { Ecosystem } from "@components/Ecosystem"
 import { GSAbout } from "@components/GSAbout"
 
 export function App() {
   return (<>
     <Navbar />
     <Hero />
     <Future />
+    <Ecosystem />
     <GSAbout />
   </>)
 }

src/components/Ecosystem/index.jsx

@@ -0,0 +1,29 @@
+import { Trees } from "lucide-react";
+import { Section } from "@components/Section";
+
+export function Ecosystem() {
+  const contents = [
+    [
+      "The GraphScript ecosystem includes a variety of tools and libraries that",
+      "enhance the development experience. These tools are designed to work",
+      "seamlessly with each other, providing a cohesive environment for building",
+      "applications.",
+    ].join(" "),
+    [
+      "The tools include a visual editor for creating scripts, a console for",
+      "testing each project, a launcher for managing projects, and a runtime",
+      "environment that includes the GraphScript compiler and capable of",
+      "updating the entire ecosystem.",
+    ].join(" "),
+  ];
+
+  return (<>
+    <Section
+      icon={<Trees />}
+      name="The Ecosystem"
+    >
+      {contents.map(text => <p key={text}>{text}</p>)}
+    </Section>
+  </>);
+}
+

src/components/Section/style.css

@@ -2,6 +2,11 @@
   display: flex;
   padding: 2rem;
   align-items: start;
+  margin-bottom: 15rem;
+}
+
+.section:nth-child(even) {
+  flex-direction: row-reverse;
 }
 
 .section-icon {
@@ -57,7 +62,7 @@
 
 @media (max-width: 1000px) {
   .section {
-    flex-direction: column;
+    flex-direction: column !important;
     align-items: center;
   }
 
@@ -70,9 +75,5 @@
     padding: 2rem;
     width: 100%;
   }
-
-  .section-description {
-    text-wrap-style: balance;
-  }
 }