Info on GS

Author: AttAditya

src/App.jsx

@@ -1,8 +1,10 @@
+import { GSAbout } from "@components/GSAbout"
 import { Hero } from "@components/Hero"
 
 export function App() {
   return (<>
     <Hero />
+    <GSAbout />
   </>)
 }
 

src/components/GSAbout/index.jsx

@@ -0,0 +1,63 @@
+import "./style.css";
+
+export function GSAbout() {
+  return (<>
+    <div className="gs-section">
+      <h1 className="gs-section-title">
+        What is GraphScript?
+      </h1>
+
+      <div className="gs-section-content">
+        <p>
+          GraphScript is a scripting language designed to simplify the development
+          of applications by focusing on logic rather than syntax. It provides a
+          powerful and intuitive visual programming environment that allows
+          developers to create applications with ease.
+        </p>
+
+        <p>
+          Instead of writing code line by line, users define scripts by visually
+          linking components like conditions, actions, loops, and I/O elements. Each
+          node represents a component, and connections between them define the
+          execution flow.
+        </p>
+      </div>
+    </div>
+
+    <div className="gs-section">
+      <h1 className="gs-section-title">
+        The Ecosystem
+      </h1>
+
+      <div className="gs-section-content">
+        <p>
+          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.
+        </p>
+
+        <p>
+          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.
+        </p>
+      </div>
+    </div>
+
+    <div className="gs-section">
+      <h1 className="gs-section-title">
+        Open Source
+      </h1>
+
+      <div className="gs-section-content">
+        <p>
+          GraphScript is an open-source project, which means that anyone can
+          contribute to its development. The source code is available on GitHub,
+          and contributions are welcome from developers of all skill levels.
+        </p>
+      </div>
+    </div>
+  </>);
+}

src/components/GSAbout/style.css

@@ -0,0 +1,31 @@
+.gs-section {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  padding: 4rem;
+}
+
+.gs-section-title {
+  align-self: center;
+  width: 40rem;
+  font-size: 2.5rem;
+  font-weight: bold;
+  background: var(--color-primary);
+  color: white;
+  padding: 1rem;
+  border-radius: 1rem;
+  border: 0.5rem solid var(--color-secondary);
+  text-align: center;
+}
+
+.gs-section-content {
+  padding: 1rem;
+  font-size: 1.6rem;
+  line-height: 1.6;
+  color: var(--color-text);
+  text-wrap-style: pretty;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+

src/styles/index.css

@@ -37,6 +37,7 @@ html, body, #root {
   cursor: default;
   background-color: var(--color-background);
   color: var(--color-white);
+  overflow-y: auto;
   font-family:
     "Lexend",
     "JetBrains Mono",
@@ -54,8 +55,8 @@ html, body, #root {
 }
 
 ::-webkit-scrollbar {
-  width: 0rem;
-  height: 0rem;
+  width: 0.5rem;
+  height: 0.5rem;
   background-color: #ffffff33;
 }