Add FeatureDemo component

Author: Folyd

theme/components/Landingpage/index.tsx

@@ -1,6 +1,7 @@
 import { BackgroundImage } from '../background-image';
 import { Hero } from '../hero';
-import CodeDemo from '../code-demo';
+// import CodeDemo from '../code-demo';
+import FeatureDemo from '../feature-demo';
 import styles from './index.module.scss';
 
 import { useCallback } from 'react';
@@ -38,7 +39,18 @@ const LandingPage = () => {
                 githubURL="https://github.com/aiscriptdev/aiscript"
                 onClickGetStarted={onClickGetStarted}
             />
-            <CodeDemo 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}
+                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' />
         </div>
     );
 };

theme/components/code-demo/index.module.scss

@@ -1,9 +1,15 @@
 .codeDemo {
   margin: 2rem auto;
-  max-width: 800px;
+  max-width: 100%;
   padding: 1rem;
   border-radius: 8px;
   overflow: hidden;
+
+  @media screen and (max-width: 768px) {
+    padding: 0.25rem;
+    margin: 0.5rem auto;
+    border-radius: 4px;
+  }
 }
 
 .filename {
@@ -14,6 +20,13 @@
   padding: 0.75rem 1.5rem;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+  }
 }
 
 .codeContainer {
@@ -22,6 +35,13 @@
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   overflow: auto;
+  -webkit-overflow-scrolling: touch;
+
+  @media screen and (max-width: 768px) {
+    border-radius: 4px;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
 
   &:has(+ .filename) {
     border-top-left-radius: 0;
@@ -41,4 +61,12 @@
   color: #333;
   display: block;
   white-space: pre;
+
+  @media screen and (max-width: 768px) {
+    font-size: 0.75rem;
+    line-height: 1.4;
+    white-space: pre-wrap;
+    word-break: break-all;
+    padding: 0.25rem;
+  }
 }

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

@@ -0,0 +1,64 @@
+.featureDemo {
+  padding: 5rem 4rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 4rem;
+  
+  &.reversed {
+    flex-direction: row-reverse;
+  }
+}
+
+.content {
+  flex: 0.8;
+}
+
+.title {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  background: linear-gradient(279deg, #ff8b00 35.21%, #f93920 63.34%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.description {
+  font-size: 1.2rem;
+  line-height: 1.6;
+  color: var(--rstack-hero-desc-color, #6b7075);
+  margin: 0;
+}
+
+.codeWrapper {
+  flex: 1.2;
+  min-width: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .featureDemo {
+    padding: 4rem 2rem;
+  }
+  .container {
+    flex-direction: column;
+    gap: 2rem;
+    
+    &.reversed {
+      flex-direction: column;
+    }
+  }
+  
+  .title {
+    font-size: 2rem;
+    text-align: center;
+  }
+  
+  .description {
+    text-align: center;
+  }
+}

theme/components/feature-demo/index.tsx

@@ -0,0 +1,35 @@
+import { type FC } from 'react';
+import CodeDemo from '../code-demo';
+import styles from './index.module.scss';
+
+interface FeatureDemoProps {
+  title: string;
+  description: string;
+  code: string;
+  filename?: string;
+  isReversed?: boolean;
+}
+
+const FeatureDemo: FC<FeatureDemoProps> = ({
+  title,
+  description,
+  code,
+  filename,
+  isReversed = false,
+}) => {
+  return (
+    <div className={styles.featureDemo}>
+      <div className={`${styles.container} ${isReversed ? styles.reversed : ''}`}>
+        <div className={styles.content}>
+          <h2 className={styles.title}>{title}</h2>
+          <p className={styles.description}>{description}</p>
+        </div>
+        <div className={styles.codeWrapper}>
+          <CodeDemo code={code} filename={filename} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeatureDemo;