Added pricing component

src/components/ImageAndText/index.tsx

@@ -26,7 +26,7 @@ export const ImageAndText = (props: { title: any; imageUrl: any; imageAlt: any;
         <section className={clsx(`margin-top--lg margin-bottom--lg`, styles.flexContainer, gray && styles.bgGrey100)}>
             {!imageOnTheRight && <ImageElement imageUrl={imageUrl} imageAlt={imageAlt} />}
             <div className={clsx(styles.colMd6, styles.flexItem, styles.flexTextDiv)}>
-                <Heading as="h1" className='hero__title'>{title}</Heading>
+                <Heading as="h1" className='section_title'>{title}</Heading>
                 <span className={clsx(styles.colMd6, styles.centeredText)}>
                     {children}
                 </span>

src/components/Pricing/Pricing.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { educatesProject } from '../../data/project';
+import styles from './styles.module.css';
+import Heading from '@theme/Heading';
+
+const Pricing: React.FC = () => {
+    return (
+        <section className={styles.pricingSection}>
+            <Heading as="h1" className="section_title">Pricing</Heading>
+            <span className={styles.pricingSubtitle}>
+                Just kidding! Educates is free and open-source.<br />
+                You can still make your contribution!
+            </span>
+            <div className={styles.pricingButtonRow}>
+                <div className={styles.pricingButtonCol}>
+                    <a
+                        href={educatesProject.projectGitHubUrl}
+                        className={styles.pricingButton}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.pricingIcon}>⭐</span> Give us a star
+                    </a>
+                    <a
+                        href={educatesProject.contributingUrl}
+                        className={styles.pricingButton}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.pricingIcon}>🗂️</span> Contribute
+                    </a>
+                </div>
+                {/* <div className={styles.pricingButtonColCenter}>
+                    <a
+                        href={educatesProject.sponsorshipUrl}
+                        className={styles.pricingButton}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <span className={styles.pricingIcon}>🎁</span> Become a sponsor
+                    </a>
+                </div> */}
+            </div>
+        </section>
+    );
+};
+
+export default Pricing; 

src/components/Pricing/styles.module.css

@@ -0,0 +1,69 @@
+.pricingSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 60vh;
+  width: 100%;
+  margin-top: 2rem;
+}
+
+.pricingSubtitle {
+  font-size: 1.5rem;
+  /* color: #7b8190; */
+  margin: 1.5rem 0 0.5rem 0;
+  text-align: center;
+  flex: 0 0 auto;
+  width: 50%;
+  max-width: 80%;
+}
+
+.pricingButtonRow {
+  display: flex;
+  gap: 2rem;
+  margin-top: 2.5rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  width: 100%;
+  max-width: 700px;
+}
+
+.pricingButtonCol {
+  flex: 1;
+  min-width: 260px;
+}
+
+.pricingButtonColCenter {
+  flex: 1;
+  min-width: 260px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.pricingButton {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  background: #f5f7fa;
+  border: none;
+  border-radius: 12px;
+  padding: 1rem 2rem;
+  font-size: 1.25rem;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 1rem;
+  width: 100%;
+  justify-content: flex-start;
+  text-decoration: none;
+  color: inherit;
+  transition: background 0.2s;
+}
+
+.pricingButton:hover {
+  background: #e9eef5;
+}
+
+.pricingIcon {
+  font-size: 1.5rem;
+} 

src/css/custom.css

@@ -75,12 +75,12 @@
   width: 50%;
 }
 
-.hero__title {
+.section_title {
   font-size: 3em; /* Default font size for larger screens */
 }
 
 @media (max-width: 1200px) {
-  .hero__title {
+  .section_title {
     font-size: 2.5em;
   }
   .ityped {
@@ -92,7 +92,7 @@
 }
 
 @media (max-width: 992px) {
-  .hero__title {
+  .section_title {
     font-size: 2em;
   }
   .ityped {
@@ -104,7 +104,7 @@
 }
 
 @media (max-width: 768px) {
-  .hero__title {
+  .section_title {
     font-size: 1.5em;
   }
   .ityped {
@@ -116,7 +116,7 @@
 }
 
 @media (max-width: 576px) {
-  .hero__title {
+  .section_title {
     font-size: 1.2em;
   }
   .ityped {

src/data/project.tsx

@@ -0,0 +1,14 @@
+export type Project = {
+    projectGitHubUrl: string;
+    contributingUrl: string;
+    sponsorshipUrl: string;
+    description: string;
+};
+
+export const educatesProject: Project =
+{
+    projectGitHubUrl: "https://github.com/educates/educates-training-platform",
+    contributingUrl: "https://github.com/educates/educates-training-platform/blob/develop/CONTRIBUTING.md",
+    sponsorshipUrl: "https://github.com/sponsors/educates",
+    description: "Educates Training Platform",
+};

src/pages/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, FC } from 'react';
 // import clsx from 'clsx';
 // import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -8,6 +8,7 @@ import Layout from '@theme/Layout';
 import Img from '@theme/MDXComponents/Img';
 import { initializeItyped } from '../js/ityped';
 import { ImageAndText } from '../components/ImageAndText';
+import Pricing from '../components/Pricing/Pricing';
 
 // create a list of strings
 const educatesHighlights = [
@@ -19,7 +20,7 @@ const educatesHighlights = [
 ];
 
 function MainSection({ title }: { title: string }): JSX.Element {
-  return (<div style={{
+  return (<section style={{
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
@@ -31,7 +32,7 @@ function MainSection({ title }: { title: string }): JSX.Element {
         alt="Project Logo"
         className="centered-image"
       />
-      {/* <Heading as="h1" className="hero__title">
+      {/* <Heading as="h1" className="section_title">
         {title}
       </Heading> */}
       <div className="typing-carousel">
@@ -44,7 +45,7 @@ function MainSection({ title }: { title: string }): JSX.Element {
         ))}
       </ul>
     </div>
-  </div>
+  </section>
   );
 }
 
@@ -71,6 +72,7 @@ export default function Home(): JSX.Element {
       >
         The Educates project provides a system for hosting interactive workshop environments in Kubernetes, or on top of a local container runtime. It can be used for self paced or supervised workshops. It can also be useful where you need to package up demos of applications hosted in Kubernetes or a local container runtime.
       </ImageAndText>
+      <Pricing />
     </Layout>
   );
 }

tsconfig.json

@@ -3,6 +3,6 @@
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": ".",
-    "jsx": "react"
+    "jsx": "react-jsx"
   }
 }