Update home,solution

docs/interactive/components/Home/Codemirror.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import { Flex, Button } from 'antd';
+import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import CodeMirror from '@uiw/react-codemirror';
+import { createTheme } from '@uiw/codemirror-themes';
+const editCode = `import graphscope as gs
+from graphscope.dataset.modern_graph import load_modern_graph
+
+gs.set_option(show_log=True)
+
+# load the modern graph as example.
+graph = load_modern_graph()
+
+# Hereafter, you can use the graph object to create an interactive query session
+g = gs.interactive(graph)
+# then execute any supported gremlin query (by default)
+q1 = g.execute('g.V().count()')
+print(q1.all().result())   # should print [6]
+
+q2 = g.execute('g.V().hasLabel(\'person\')')
+print(q2.all().result())  # should print [[v[2], v[3], v[0], v[1]]]
+
+# or execute any supported Cypher query, by passing lang="cypher"
+q3 = g.execute("MATCH (n) RETURN count(n)", lang="cypher")
+print(q3.records[0][0])  # should print 6`;
+const myTheme = createTheme({
+  theme: 'light',
+  settings: {
+    background: '#f5f5f5',
+    backgroundImage: '',
+    // foreground: '#75baff',
+    // caret: '#5d00ff',
+    // selection: '#036dd626',
+    // selectionMatch: '#036dd626',
+    // lineHighlight: '#8a91991a',
+    // gutterBackground: '#fff',
+    // gutterForeground: '#8a919966',
+  },
+  styles: [],
+});
+export default () => {
+  const [copy, setCopy] = useState(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(editCode);
+    setCopy(true);
+  };
+  useEffect(() => {
+    let timer = setTimeout(() => {
+      setCopy(false);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [copy]);
+  return (
+    <div style={{ padding: '12px 12px 12px 0px', backgroundColor: '#f5f5f5', borderRadius: '6px' }}>
+      <Flex justify="space-between">
+        <CodeMirror
+          value={editCode}
+          readOnly
+          basicSetup={{
+            lineNumbers: false, // 确保不显示行号
+          }}
+          theme={myTheme}
+        />
+        <Button type="text" icon={copy ? <CheckOutlined /> : <CopyOutlined />} onClick={handleCopy} />
+      </Flex>
+    </div>
+  );
+};

docs/interactive/components/Home/ComplexSupport.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Flex, Avatar, Typography } from 'antd';
+import StyledButton from './StyledButton';
+import { gradientTextStyle, data } from './const';
+const { Title, Text } = Typography;
+
+const ComplexSupport = () => (
+  <Flex style={{ padding: '50px' }} vertical justify="center" align="center" gap={60}>
+    <Flex style={{ padding: '36px', backgroundColor: '#f8f8f8', borderRadius: '12px' }} align="center" gap={24}>
+      <Avatar
+        size={120}
+        src={'https://memgraph.com/_next/image?url=%2Fimages%2Fhomepage%2FDominik-image.png&w=256&q=75'}
+      />
+      <Flex vertical>
+        <Title level={3}>
+          “I try to embody our philosophy around our core value of{' '}
+          <span style={gradientTextStyle}> building relationships, not edges</span>.”
+        </Title>
+        <Text type="secondary">Dominik Tomicevic, Co-Founder & CEO, Memgraph</Text>
+      </Flex>
+    </Flex>
+
+    <Flex vertical justify="center" align="center" gap={24}>
+      <Title style={{ margin: 0 }}>Subscribe to our newsletter</Title>
+      <Title style={{ margin: 0, width: '60%', textAlign: 'center' }} level={5}>
+        Stay up to date with product updates, tips, tricks and industry related news.
+      </Title>
+      <Flex>
+        <StyledButton>Subscribe</StyledButton>
+      </Flex>
+    </Flex>
+  </Flex>
+);
+
+export default ComplexSupport;

docs/interactive/components/Home/InteractiveEngine.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import { Typography, Flex, Button, Card, Row, Col, Image, theme } from 'antd';
+import { ArrowRightOutlined } from '@ant-design/icons';
+import { Earth } from '../Icons';
+import { gradientTextStyle } from './const';
+import StyledButton from './StyledButton';
+
+const { Title, Text, Paragraph } = Typography;
+
+// 定义可复用的样式对象
+const titleStyle: React.CSSProperties = { margin: 0 };
+const subtitleStyle: React.CSSProperties = { ...titleStyle, fontSize: '60px' };
+const descriptionStyle: React.CSSProperties = { color: '#646265', fontSize: '24px' };
+const buttonGroupStyle: React.CSSProperties = { fontSize: '16px', fontWeight: 600 };
+const cardStyle: React.CSSProperties = { width: '45%', whiteSpace: 'nowrap' };
+const codeBlockStyle: React.CSSProperties = {
+  padding: '20px',
+  lineHeight: '24px',
+  backgroundColor: '#231f20',
+  color: '#fff',
+  borderRadius: '6px',
+  letterSpacing: '2px',
+  fontSize: '14px',
+};
+
+// 定义安装命令
+const installCommands: Record<string, string> = {
+  'Linux/MacOS': 'python3 -m pip install graphscope --upgrade',
+  Windows: 'iwr https://windows.memgraph.com | iex',
+};
+
+interface InstallCardProps {
+  os: keyof typeof installCommands;
+}
+
+const InstallCard: React.FC<InstallCardProps> = ({ os }) => (
+  <Card style={cardStyle}>
+    <Title level={4}>Install GraphScope on {os}</Title>
+    <Paragraph style={codeBlockStyle} copyable>
+      {installCommands[os]}
+    </Paragraph>
+  </Card>
+);
+
+const InteractiveEngine: React.FC = () => {
+  const { token } = theme.useToken();
+  const containerStyle: React.CSSProperties = {
+    padding: '3% 17%',
+    background: token.colorBgBase,
+    color: token.colorTextBase,
+  };
+
+  return (
+    <div style={containerStyle}>
+      <Row gutter={[16, 32]}>
+        <Flex gap={24} justify="start">
+          <Col xs={24} sm={14} md={20} lg={20} xl={20}>
+            <Flex vertical gap={18}>
+              <Title style={subtitleStyle}>
+                <span style={gradientTextStyle}>Unleash the Power of Graph Data</span>
+              </Title>
+              <Title style={titleStyle}>GraphScope Interactive Engine</Title>
+              <Text style={descriptionStyle}>
+                High-performance graph processing and analytics for enterprise-scale applications
+              </Text>
+              <Row align="middle" gutter={[16, 16]}>
+                <Col xs={24} sm={24} md={24} lg={6} xl={6}>
+                  <StyledButton url="https://graphscope.io/docs/overview/getting_started">
+                    Get started for free
+                  </StyledButton>
+                </Col>
+                <Col xs={24} sm={24} md={24} lg={6} xl={6}>
+                  <Button
+                    style={buttonGroupStyle}
+                    type="text"
+                    iconPosition="end"
+                    icon={<ArrowRightOutlined />}
+                    onClick={() => {
+                      window.open('https://graphscope.io/docs/learning_engine/getting_started', '_blank');
+                    }}
+                  >
+                    Learn more
+                  </Button>
+                </Col>
+              </Row>
+            </Flex>
+          </Col>
+          {/* <Col xs={0} sm={0} md={0} lg={10} xl={10}>
+            <Image src="https://graphscope.io/blog/assets/images/flex-title.jpg" preview={false} />
+          </Col> */}
+          {/* <Earth /> */}
+        </Flex>
+
+        <Col xs={0} sm={0} md={0} lg={0} xl={0} xxl={24}>
+          <Flex gap={16}>
+            {Object.keys(installCommands).map(os => (
+              <InstallCard key={os} os={os as keyof typeof installCommands} />
+            ))}
+          </Flex>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default InteractiveEngine;

docs/interactive/components/Home/Performance.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Typography, Flex, Row, Col, theme } from 'antd';
+import { Download, GithubGradient, Community } from '../Icons';
+
+const { Title, Text } = Typography;
+
+// 定义可复用的样式对象
+const containerStyle: React.CSSProperties = { padding: '2% 17%' };
+
+// 定义统计项的接口
+interface StatItem {
+  icon: JSX.Element;
+  label: string;
+  count: string;
+}
+
+// 创建可复用的统计项组件
+const StatItemComponent: React.FC<StatItem> = ({ icon, label, count }) => {
+  const { token } = theme.useToken();
+  const iconContainerStyle: React.CSSProperties = {
+    padding: '12px',
+    backgroundColor: token.colorBgLayout,
+    borderRadius: '50%',
+  };
+  return (
+    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+      <Flex gap={24} align="center">
+        <div style={iconContainerStyle}>{icon}</div>
+        <Flex vertical>
+          <Title style={{ margin: 0 }}>{count}</Title>
+          <Text style={{ fontSize: '20px' }} type="secondary">
+            {label}
+          </Text>
+        </Flex>
+      </Flex>
+    </Col>
+  );
+};
+
+const Performance: React.FC = () => (
+  <Row style={containerStyle} gutter={[48, 24]}>
+    {[
+      { icon: <Download />, label: 'downloads', count: '2k+' },
+      { icon: <GithubGradient />, label: 'GitHub stars', count: '150k+' },
+      { icon: <Community />, label: 'community members', count: '150k+' },
+    ].map(item => (
+      <StatItemComponent key={item.label} {...item} />
+    ))}
+  </Row>
+);
+
+export default Performance;

docs/interactive/components/Home/Realize.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Typography, Flex, Row, Col } from 'antd';
+import { GenAI } from '../Icons';
+import SplitSection from '../SplitSection';
+import StyledButton from './StyledButton';
+import CodeMirror from './Codemirror';
+
+const { Title, Text, Link } = Typography;
+
+const Realize: React.FC = () => {
+  return (
+    <Row gutter={48} align="middle" style={{ padding: '3% 17%' }}>
+      <Col xs={0} sm={0} md={14} lg={14} xl={14}>
+        <CodeMirror />
+      </Col>
+      <Col xs={24} sm={24} md={10} lg={10} xl={10}>
+        <Flex vertical gap={24}>
+          <Title level={3}>Running GraphScope Interactive Engine on Local</Title>
+          <Text type="secondary">
+            It’s fairly straightforward to run interactive queries using the graphscope package on your local machine.
+            First of all, you import graphscope in a Python session, and load the modern graph, which has been widely
+            used in &nbsp;
+            <Link href="https://tinkerpop.apache.org/docs/3.6.2/tutorials/getting-started/" target="_blank">
+              Tinkerpop
+            </Link>
+            &nbsp; demos.
+          </Text>
+          {/* <Flex>
+            <StyledButton url="https://tinkerpop.apache.org/docs/3.6.2/tutorials/getting-started/">
+              Learn more
+            </StyledButton>
+          </Flex> */}
+        </Flex>
+      </Col>
+    </Row>
+  );
+};
+
+export default Realize;

docs/interactive/components/Home/SimplePricing/SectionContent.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Typography, Flex } from 'antd';
+import StyledButton from '../StyledButton';
+import { gradientTextStyle } from '../const';
+
+const { Title, Text } = Typography;
+
+const performanceTitleStyle: React.CSSProperties = { ...gradientTextStyle, margin: 0 };
+const performanceSubtitleStyle: React.CSSProperties = { margin: 0 };
+interface Section {
+  title: string;
+  subtitle: string;
+  text: string;
+  buttonText?: string;
+  leftIcon?: React.ReactNode;
+  rightTitle?: string;
+  rightTitleGradient?: boolean;
+  styles?: React.CSSProperties;
+}
+
+const SectionContent: React.FC<{ section: Section }> = ({ section }) => {
+  return (
+    <Flex vertical gap={12}>
+      <Title style={performanceTitleStyle} level={3}>
+        {section.title}
+      </Title>
+      <Title style={performanceSubtitleStyle} level={4}>
+        {section.subtitle}
+      </Title>
+      <Text type="secondary">{section.text}</Text>
+      {section.buttonText && (
+        <Flex>
+          <StyledButton>{section.buttonText}</StyledButton>
+        </Flex>
+      )}
+    </Flex>
+  );
+};
+
+export default SectionContent;