Merge pull request #31 from XpressAI/fahreza/frontpage-update

Add New Component Libraries
XpressAI · Jun 25, 2024 · 22f83c3 · 22f83c3
2 parents f66bf2e + c5c21f9
commit 22f83c3
Show file tree

Hide file tree

Showing 21 changed files with 496 additions and 9 deletions.
diff --git a/src/components/SupportedFrameworks.module.css b/src/components/SupportedFrameworks.module.css
@@ -9,6 +9,7 @@
   justify-content: center;
   margin-right: -15px;
   margin-left: -15px;
+  margin-bottom: 1rem;
 }
 
 .col {
@@ -18,13 +19,60 @@
   padding-left: 15px;
   display: flex;
   justify-content: center;
+  flex: 0 0 20%;
+  max-width: 20%;
 }
 
 .featureImg {
-  width: 200px;
+  width: auto;
+  height: 150px;
   margin: 0 15px;
+  object-fit: contain;
 }
 
 .homepageHeader {
   text-align: center;
 }
+
+@media (max-width: 1200px) {
+  .col {
+    flex: 0 0 25%;
+    max-width: 25%;
+  }
+}
+
+@media (max-width: 992px) {
+  .col {
+    flex: 0 0 33.333%;
+    max-width: 33.333%;
+  }
+}
+
+@media (max-width: 768px) {
+  .col {
+    flex: 0 0 50%;
+    max-width: 50%;
+  }
+}
+
+@media (max-width: 576px) {
+  .col {
+    flex: 0 0 100%;
+    max-width: 100%;
+  }
+}
+
+.sectionTitle {
+  text-align: center;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.sectionTitle h2 {
+  margin-bottom: 0.5rem;
+}
+
+.sectionTitle hr {
+  width: 50%;
+  margin: 0 auto;
+}
diff --git a/src/components/SupportedFrameworks.tsx b/src/components/SupportedFrameworks.tsx
@@ -5,44 +5,165 @@ import styles from './SupportedFrameworks.module.css';
 type FrameworkItem = {
   title: string;
   image: string;
+  link: string;
 };
 
-const FrameworkList: FrameworkItem[] = [
+const dataScienceFrameworks: FrameworkItem[] = [
   {
     title: 'Tensorflow',
     image: '/img/website/frameworks/tensorflow.svg',
+    link: 'https://github.com/XpressAI/xai-tensorflow-keras',
   },
   {
     title: 'Pytorch',
     image: '/img/website/frameworks/pytorch.svg',
+    link: 'https://github.com/XpressAI/xai-pytorch',
+  },
+  {
+    title: 'SKLearn',
+    image: '/img/website/frameworks/scikit-learn.svg',
+    link: 'https://github.com/XpressAI/xai-sklearn',
+  },
+  {
+    title: 'XGBoost',
+    image: '/img/website/frameworks/xgboost.png',
+    link: 'https://github.com/XpressAI/xai-xgboost',
   },
   {
     title: 'Spark',
     image: '/img/website/frameworks/spark.svg',
+    link: 'https://github.com/XpressAI/xai-spark',
   },
   {
     title: 'Pycaret',
     image: '/img/website/frameworks/pycaret.png',
+    link: 'https://github.com/XpressAI/xai-pycaret',
   },
   {
     title: 'Streamlit',
     image: '/img/website/frameworks/streamlit.svg',
+    link: 'https://github.com/XpressAI/xai-streamlit',
+  }
+];
+
+const aiAgentsFrameworks: FrameworkItem[] = [
+  {
+    title: 'Vecto',
+    image: '/img/website/frameworks/vecto.svg',
+    link: 'https://github.com/XpressAI/xai-vecto',
+  },
+  {
+    title: 'OpenAI',
+    image: '/img/website/frameworks/openai.svg',
+    link: 'https://github.com/XpressAI/xai-openai',
+  },
+  {
+    title: 'Anthropic',
+    image: '/img/website/frameworks/anthropic.svg',
+    link: 'https://github.com/XpressAI/xai-anthropic',
+  },
+  {
+    title: 'HF Agent',
+    image: '/img/website/frameworks/hugging-face.svg',
+    link: 'https://github.com/XpressAI/xai-hfagent',
+  },
+  {
+    title: 'Stability AI',
+    image: '/img/website/frameworks/stability-ai.svg',
+    link: 'https://github.com/XpressAI/xai-stability-ai',
+  },
+  {
+    title: 'Gemini',
+    image: '/img/website/frameworks/gemini.svg',
+    link: 'https://github.com/XpressAI/xai-google-gemini',
+  },
+];
+
+const communicationFrameworks: FrameworkItem[] = [
+  {
+    title: 'Slack',
+    image: '/img/website/frameworks/slack.svg',
+    link: 'https://github.com/XpressAI/xai-slack',
   },
+  {
+    title: 'Discord',
+    image: '/img/website/frameworks/discord.svg',
+    link: 'https://github.com/XpressAI/xai-discord',
+  },
+];
+
+const messageQueuesFrameworks: FrameworkItem[] = [
   {
     title: 'RabbitMQ',
     image: '/img/website/frameworks/rabbitmq.svg',
+    link: 'https://github.com/XpressAI/xai-rabbitmq',
   },
   {
     title: 'MQTT',
     image: '/img/website/frameworks/mqtt.png',
+    link: 'https://github.com/XpressAI/xai-mqtt',
+  },
+];
+
+const databasesFrameworks: FrameworkItem[] = [
+  {
+    title: 'SQLite',
+    image: '/img/website/frameworks/sqlite.svg',
+    link: 'https://github.com/XpressAI/xai-sqlite',
+  },
+  {
+    title: 'MongoDB',
+    image: '/img/website/frameworks/mongodb.svg',
+    link: 'https://github.com/XpressAI/xai-mongoDB',
+  },
+  {
+    title: 'Flask',
+    image: '/img/website/frameworks/flask.svg',
+    link: 'https://github.com/XpressAI/xai-flask',
+  },
+];
+
+const cloudServicesFrameworks: FrameworkItem[] = [
+  {
+    title: 'GDrive',
+    image: '/img/website/frameworks/gdrive.png',
+    link: 'https://github.com/XpressAI/xai-gdrive',
+  },
+  {
+    title: 'GSpread',
+    image: '/img/website/frameworks/gspreadsheet.png',
+    link: 'https://github.com/XpressAI/xai-gspread',
+  },
+  {
+    title: 'AWS',
+    image: '/img/website/frameworks/aws.svg',
+    link: 'https://github.com/XpressAI/xai-boto3',
   },
 ];
 
-function Framework({title, image}: FrameworkItem) {
+function Framework({ title, image, link }: FrameworkItem) {
   return (
     <div className={clsx('col', styles.col)}>
       <div className={styles.featureImgContainer}>
-        <img className={styles.featureImg} alt={title} src={image} />
+        <a href={link} target="_blank" rel="noopener noreferrer">
+          <img className={styles.featureImg} alt={title} src={image} />
+        </a>
+      </div>
+    </div>
+  );
+}
+
+function Section({ title, frameworks }: { title: string, frameworks: FrameworkItem[] }) {
+  return (
+    <div>
+      <div className={styles.sectionTitle}>
+        <h2>{title}</h2>
+        <hr />
+      </div>
+      <div className={clsx('row', styles.row)}>
+        {frameworks.map((props, idx) => (
+          <Framework key={idx} {...props} />
+        ))}
       </div>
     </div>
   );
@@ -52,11 +173,12 @@ function FrameworkDisplay(): JSX.Element {
   return (
     <section className={styles.features}>
       <div className="container">
-        <div className={clsx('row', styles.row)}>
-          {FrameworkList.map((props, idx) => (
-            <Framework key={idx} {...props} />
-          ))}
-        </div>
+        <Section title="Data Science, Machine Learning, and Data Processing" frameworks={dataScienceFrameworks} />
+        <Section title="AI Agents" frameworks={aiAgentsFrameworks} />
+        <Section title="Communication" frameworks={communicationFrameworks} />
+        <Section title="Message Queues" frameworks={messageQueuesFrameworks} />
+        <Section title="Databases & Servers" frameworks={databasesFrameworks} />
+        <Section title="Cloud Services" frameworks={cloudServicesFrameworks} />
       </div>
     </section>
   );

diff --git a/static/img/website/frameworks/anthropic.svg b/static/img/website/frameworks/anthropic.svg