From f02632cc03e6c9e5c050df75b5c9be43b382d826 Mon Sep 17 00:00:00 2001
From: Ashar Fuadi <fushar@gmail.com>
Date: Sun, 10 Nov 2024 08:25:08 +0700
Subject: [PATCH] Docs: update homepage features

---
 web/docusaurus.config.js                     |  2 +-
 web/src/components/HomepageFeatures/index.js | 50 +++++++++++++++-----
 2 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/web/docusaurus.config.js b/web/docusaurus.config.js
index e93b820..ba59be1 100644
--- a/web/docusaurus.config.js
+++ b/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
diff --git a/web/src/components/HomepageFeatures/index.js b/web/src/components/HomepageFeatures/index.js
index 25f8ad1..6e685bf 100644
--- a/web/src/components/HomepageFeatures/index.js
+++ b/web/src/components/HomepageFeatures/index.js
@@ -1,30 +1,54 @@
 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>
     ),
   },
 ];
@@ -32,7 +56,7 @@ const FeatureList = [
 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>