From eb859ab6c28a83c6a808ff630b8222bba9b00093 Mon Sep 17 00:00:00 2001 From: Jorge Morales Pou Date: Mon, 5 May 2025 11:33:58 +0000 Subject: [PATCH] Added pricing component --- src/components/ImageAndText/index.tsx | 2 +- src/components/Pricing/Pricing.tsx | 48 +++++++++++++++++ src/components/Pricing/styles.module.css | 69 ++++++++++++++++++++++++ src/css/custom.css | 10 ++-- src/data/project.tsx | 14 +++++ src/pages/index.tsx | 10 ++-- tsconfig.json | 2 +- 7 files changed, 144 insertions(+), 11 deletions(-) create mode 100644 src/components/Pricing/Pricing.tsx create mode 100644 src/components/Pricing/styles.module.css create mode 100644 src/data/project.tsx diff --git a/src/components/ImageAndText/index.tsx b/src/components/ImageAndText/index.tsx index 2f75d10..21d28de 100644 --- a/src/components/ImageAndText/index.tsx +++ b/src/components/ImageAndText/index.tsx @@ -26,7 +26,7 @@ export const ImageAndText = (props: { title: any; imageUrl: any; imageAlt: any;
{!imageOnTheRight && }
- {title} + {title} {children} diff --git a/src/components/Pricing/Pricing.tsx b/src/components/Pricing/Pricing.tsx new file mode 100644 index 0000000..1679830 --- /dev/null +++ b/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 ( +
+ Pricing + + Just kidding! Educates is free and open-source.
+ You can still make your contribution! + + +
+ ); +}; + +export default Pricing; \ No newline at end of file diff --git a/src/components/Pricing/styles.module.css b/src/components/Pricing/styles.module.css new file mode 100644 index 0000000..57e64cd --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/css/custom.css b/src/css/custom.css index 00b7ce4..92a1ffc 100644 --- a/src/css/custom.css +++ b/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 { diff --git a/src/data/project.tsx b/src/data/project.tsx new file mode 100644 index 0000000..5a56164 --- /dev/null +++ b/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", +}; \ No newline at end of file diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 9416f78..bd45e75 100644 --- a/src/pages/index.tsx +++ b/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 (
- {/* + {/* {title} */}
@@ -44,7 +45,7 @@ function MainSection({ title }: { title: string }): JSX.Element { ))}
-
+
); } @@ -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. + ); } diff --git a/tsconfig.json b/tsconfig.json index 3fade71..b0a846b 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -3,6 +3,6 @@ "extends": "@docusaurus/tsconfig", "compilerOptions": { "baseUrl": ".", - "jsx": "react" + "jsx": "react-jsx" } }