Add FeatureGroup component

Author: Folyd

theme/components/Landingpage/features.json

@@ -0,0 +1,17 @@
+{
+  "features": [
+    {
+      "title": "AI Native",
+      "description": "AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai"
+    },
+    {
+      "title": "Type Safe",
+      "description": "AIscript comes with a powerful type system that helps catch errors before they happen. The type system is designed to be intuitive and easy to use.",
+      "code": "// Define a function that takes a prompt and returns a response\nfn generate_response(prompt: string) -> string {\n    // Call the AI model to generate a response\n    let response = ai.generate({\n        model: \"gpt-4\",\n        prompt: prompt,\n        max_tokens: 100\n    });\n    \n    return response;\n}\n\n// Example usage\nlet result = generate_response(\"Tell me a joke\");\nprint(result);",
+      "filename": "main.ai",
+      "isReversed": true
+    }
+  ]
+}

theme/components/Landingpage/index.tsx

@@ -1,27 +1,11 @@
 import { BackgroundImage } from '../background-image';
 import { Hero } from '../hero';
-// import CodeDemo from '../code-demo';
-import FeatureDemo from '../feature-demo';
+import FeatureGroup from '../feature-group';
 import styles from './index.module.scss';
 
 import { useCallback } from 'react';
 import { useNavigate } from 'rspress/runtime';
-
-const demoCode = `// Define a function that takes a prompt and returns a response
-fn generate_response(prompt: string) -> string {
-    // Call the AI model to generate a response
-    let response = ai.generate({
-        model: "gpt-4",
-        prompt: prompt,
-        max_tokens: 100
-    });
-    
-    return response;
-}
-
-// Example usage
-let result = generate_response("Tell me a joke");
-print(result);`;
+import { features } from './features.json';
 
 const LandingPage = () => {
     const navigate = useNavigate();
@@ -39,18 +23,7 @@ const LandingPage = () => {
                 githubURL="https://github.com/aiscriptdev/aiscript"
                 onClickGetStarted={onClickGetStarted}
             />
-            <FeatureDemo
-                title='AI Native'
-                description='AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.'
-                code={demoCode}
-                filename='main.ai' />
-
-            <FeatureDemo
-                title='AI Native'
-                description='AIscript is designed to be the first-class language for AI development. It is designed to be easy to learn and use, and it is designed to be fast and efficient.'
-                code={demoCode}
-                isReversed={true}
-                filename='main.ai' />
+            <FeatureGroup features={features} />
         </div>
     );
 };

theme/components/feature-group/index.module.scss

@@ -0,0 +1,52 @@
+.featureGroup {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.tabs {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.tab {
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: 25px;
+  background: transparent;
+  color: var(--rstack-hero-desc-color, #6b7075);
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease-in-out;
+  
+  &:hover {
+    color: var(--rs-hero-title-color, #0b0c0e);
+    background: rgba(0, 0, 0, 0.05);
+  }
+  
+  &.active {
+    background: linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%);
+    color: white;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .featureGroup {
+    padding: 1rem;
+  }
+  
+  .tabs {
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+  }
+  
+  .tab {
+    padding: 0.5rem 1rem;
+    font-size: 0.875rem;
+  }
+}

theme/components/feature-group/index.tsx

@@ -0,0 +1,44 @@
+import { type FC, useState } from 'react';
+import FeatureDemo from '../feature-demo';
+import styles from './index.module.scss';
+
+interface Feature {
+  title: string;
+  description: string;
+  code: string;
+  filename?: string;
+  isReversed?: boolean;
+}
+
+interface FeatureGroupProps {
+  features: Feature[];
+}
+
+const FeatureGroup: FC<FeatureGroupProps> = ({ features }) => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <div className={styles.featureGroup}>
+      <div className={styles.tabs}>
+        {features.map((feature, index) => (
+          <button
+            key={index}
+            className={`${styles.tab} ${index === activeIndex ? styles.active : ''}`}
+            onClick={() => setActiveIndex(index)}
+          >
+            {feature.title}
+          </button>
+        ))}
+      </div>
+      <FeatureDemo
+        title={features[activeIndex].title}
+        description={features[activeIndex].description}
+        code={features[activeIndex].code}
+        filename={features[activeIndex].filename}
+        isReversed={features[activeIndex].isReversed}
+      />
+    </div>
+  );
+};
+
+export default FeatureGroup;