1 files changed, 92 insertions, 0 deletions

diff --git a/src/components/landing/sections/Research.tsx b/src/components/landing/sections/Research.tsx
new file mode 100644
index 0000000..b6e5954
--- /dev/null
+++ b/src/components/landing/sections/Research.tsx
@@ -0,0 +1,92 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Kristóf Marussy
+ *
+ * SPDX-License-Identifier: MIT
+ */
+
+import clsx from 'clsx';
+import type { ReactNode } from 'react';
+
+import {
+  type Icon,
+  Gear,
+  Graph,
+  MagicWand,
+  ShieldCheck,
+} from '@phosphor-icons/react';
+
+import Section from '@site/src/components/landing/Section';
+
+import styles from './Research.module.css';
+
+function Topic({
+  title,
+  style,
+  Icon,
+  children,
+}: {
+  title: string;
+  style: string;
+  Icon: Icon;
+  children: ReactNode;
+}) {
+  return (
+    <div className={clsx('col', 'col-3', styles.topic)}>
+      <div className={styles.topic__contents}>
+        <div className={clsx(styles.topic__icon, style)}>
+          <Icon aria-hidden="true" size={128} weight="light" />
+        </div>
+        <div className={styles.topic__text}>
+          <h3 className={styles.topic__title}>{title}</h3>
+          <p className={styles.topic__description}>{children}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function Research() {
+  return (
+    <Section id="research" title="Research">
+      <div className={clsx('container', styles.topics)}>
+        <div className="row">
+          <Topic
+            title="Critical systems"
+            Icon={Gear}
+            style={styles['topic__icon--system']}
+          >
+            Cyber-physical systems especially in&nbsp;the railway, automotive,
+            and aerospace domains with stringent correctness and relability
+            requirements
+          </Topic>
+          <Topic
+            title="Formal verification"
+            Icon={ShieldCheck}
+            style={styles['topic__icon--verification']}
+          >
+            Proving the safety and reliability of critical system designs and
+            software components in a mathematically precise way
+          </Topic>
+          <Topic
+            title="Automated reasoning"
+            Icon={MagicWand}
+            style={styles['topic__icon--reasoning']}
+          >
+            Integrating logical and numerical solvers with intelligent
+            heuristics to&nbsp;answer challenging analysis questions and
+            synthesize reliable system designs
+          </Topic>
+          <Topic
+            title="Graph generation"
+            Icon={Graph}
+            style={styles['topic__icon--graph']}
+          >
+            Efficient graph-based information processing for system modeling,
+            testing data-driven systems, and knowledge representation in
+            autonomous systems
+          </Topic>
+        </div>
+      </div>
+    </Section>
+  );
+}