Docs: update homepage features

Author: fushar

web/docusaurus.config.js

@@ -9,7 +9,7 @@ import {themes as prismThemes} from 'prism-react-renderer';
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'TCFrame',
-  tagline: 'A test generation framework.',
+  tagline: 'A test generation framework for competitive programming problems.',
   favicon: 'img/logo.png',
 
   // Set the production url of your site here

web/src/components/HomepageFeatures/index.js

@@ -1,38 +1,62 @@
 import clsx from 'clsx';
+import CodeBlock from '@theme/CodeBlock';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
+const ioFormats =
+`void InputFormat() {
+    LINE(N);
+    LINES(A) % SIZE(N);
+}
+
+void OutputFormat() {
+    LINE(answer);
+}
+`
+
+const constraints =
+`void Constraints() {
+    CONS(1 <= N && N <= 1000);
+    CONS(eachElementBetween(A, 1, 1000000));
+}`
+
+const testCases =
+`void TestCases() {
+    CASE(N = 1, A = {10});
+    CASE(N = 100, randomArray());
+}`
+
 const FeatureList = [
   {
-    title: 'Various problem types',
+    title: 'Define input/output formats',
     description: (
-      <>
-        Supports batch and interactive problems, as well as ICPC- and IOI-style problems.
-      </>
+      <CodeBlock language="cpp">
+        {ioFormats}
+      </CodeBlock>
     ),
   },
   {
-    title: 'I/O format validation',
+    title: 'Define constraints',
     description: (
-      <>
-        Input/output formats can be validated declaratively.
-      </>
+      <CodeBlock language="cpp">
+        {constraints}
+      </CodeBlock>
     ),
   },
   {
-    title: 'Local grading',
+    title: 'Define test cases',
     description: (
-      <>
-        Solutions can be tested locally against generated test cases.
-      </>
+      <CodeBlock language="cpp">
+        {testCases}
+      </CodeBlock>
     ),
   },
 ];
 
 function Feature({Svg, title, description}) {
   return (
     <div className={clsx('col col--4')}>
-      <div className="text--center padding-horiz--md">
+      <div className="padding-horiz--md">
         <Heading as="h3">{title}</Heading>
         <p>{description}</p>
       </div>