The future is coming

Author: AttAditya

src/App.jsx

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

src/components/Future/index.jsx

@@ -0,0 +1,30 @@
+import { Section } from "@components/Section";
+import { RectangleGoggles } from "lucide-react";
+
+export function Future() {
+  const contents = [
+    [
+      "The future of programming is not just about writing code,",
+      "it's much more about logic, creativity, and problem-solving,",
+      "and not about the syntax.",
+    ].join(" "),
+    [
+      "GraphScript is a new ecosystem that will (in the future) allow you to",
+      "develop applications without writing code, in a visual and intuitive way.",
+    ].join(" "),
+    [
+      "It will be very easy to use, in desktops, web and most importantly,",
+      "in virtual and augmented reality(in the future).",
+    ].join(" "),
+  ];
+
+  return (<>
+    <Section
+      icon={<RectangleGoggles />}
+      name="The Future of Programming is Coming!"
+    >
+      {contents.map(text => <p key={text}>{text}</p>)}
+    </Section>
+  </>);
+}
+

src/components/Navbar/style.css

@@ -28,6 +28,11 @@
   font-size: 1.2rem;
   position: relative;
   background: var(--gradient);
+  opacity: 0.5;
+}
+
+.nav-links:hover {
+  opacity: 1;
 }
 
 .nav-link {

src/components/Section/index.jsx

@@ -0,0 +1,24 @@
+import "./style.css";
+
+export function Section({
+  icon,
+  name,
+  children,
+}) {
+  return (<>
+    <div className="section">
+      <div className="section-icon">{icon}</div>
+
+      <div className="section-content">
+        <div className="section-name">
+          {name}
+        </div>
+
+        <div className="section-description">
+          {children}
+        </div>
+      </div>
+    </div>
+  </>);
+}
+

src/components/Section/style.css

@@ -0,0 +1,52 @@
+.section {
+  display: flex;
+  padding: 4rem;
+  gap: 4rem;
+  align-items: start;
+}
+
+.section-icon {
+  flex: 1;
+  padding: 0rem 5rem;
+  position: sticky;
+  top: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.section-icon > * {
+  width: 100%;
+  height: 100%;
+}
+
+.section-content {
+  flex: 2;
+  padding: 4rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4rem;
+}
+
+.section-name {
+  background: var(--gradient);
+  display: flex;
+  padding: 1rem 2rem;
+  border-radius: 1rem;
+  font-size: 2.5rem;
+  font-weight: 600;
+}
+
+.section-description {
+  font-size: 2rem;
+  text-align: left;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  font-weight: 200;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+