Update home,solution

docs/interactive/components/Home/Codemirror.tsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Row, Col, theme } from 'antd';
+import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
+import CodeMirror from '@uiw/react-codemirror';
+import { createTheme } from '@uiw/codemirror-themes';
+import { codemirrorCode } from './const';
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    position: 'relative',
+    backgroundColor: '#f5f5f5',
+    borderRadius: '6px',
+    overflow: 'hidden',
+    padding: '12px 12px 12px 0px',
+  },
+  copyButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+};
+
+export default () => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { token } = theme.useToken();
+  const myTheme = createTheme({
+    theme: 'light',
+    settings: {
+      background: token.colorBgLayout,
+      backgroundImage: '',
+      // foreground: '#75baff',
+      // caret: '#5d00ff',
+      // selection: '#036dd626',
+      // selectionMatch: '#036dd626',
+      // lineHighlight: '#8a91991a',
+      // gutterBackground: '#fff',
+      // gutterForeground: '#8a919966',
+    },
+    styles: [],
+  });
+  const handleCopy = () => {
+    navigator.clipboard.writeText(codemirrorCode);
+    setIsCopied(true);
+  };
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => setIsCopied(false), 500);
+      return () => clearTimeout(timer);
+    }
+  }, [isCopied]);
+  return (
+    <div style={styles.container}>
+      <Row>
+        <Col span={24}>
+          <CodeMirror
+            value={codemirrorCode}
+            readOnly
+            basicSetup={{
+              lineNumbers: false, // 确保不显示行号
+            }}
+            theme={myTheme}
+          />
+          <Button
+            style={styles.copyButton}
+            type={'text'}
+            icon={isCopied ? <CheckOutlined /> : <CopyOutlined />}
+            onClick={handleCopy}
+          />
+        </Col>
+      </Row>
+    </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/DataAnalysis/InteractiveInfo.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Typography, Image, theme } from 'antd';
+import { Pricing, Database } from '../../Icons';
+import SplitSection from '../../SplitSection';
+
+import SectionContent from './SectionContent';
+import { gradientTextStyle } from '../const';
+
+interface SectionType {
+  title: string;
+  subtitle: string;
+  text: string;
+  leftIcon: React.ReactNode;
+  buttonText?: string;
+  styles?: React.CSSProperties;
+  rightTitle?: string;
+  rightTitleGradient?: boolean;
+}
+const { Title } = Typography;
+
+const renderSectionContent = (section: SectionType, index: number) => (
+  <SplitSection
+    key={index}
+    styles={section.styles}
+    splitNumber={index === 1 ? 0 : 24}
+    leftSide={renderLeftOrRightSide(section, index)}
+    rightSide={renderLeftOrRightSide(section, index, true)}
+  >
+    {section.rightTitle && (
+      <Title level={3}>
+        {section.rightTitle}
+        {section.rightTitleGradient && <span style={gradientTextStyle}>Trust our customers.</span>}
+      </Title>
+    )}
+  </SplitSection>
+);
+
+const renderLeftOrRightSide = (section: SectionType, index: number, isRightSide = false) =>
+  index % 2 === (isRightSide ? 1 : 0) ? <SectionContent section={section} /> : section.leftIcon;
+const KnowledgeInfo = () => {
+  const { token } = theme.useToken();
+  const sectionContent = [
+    {
+      title: 'Performance',
+      subtitle: 'Visualize and explore your data',
+      text: "Memgraph's sweet spot are mission-critical environments handling over 1,000 transactions per second on both reads and writes, with graph sizes from 100 GB to 4 TB.",
+      leftIcon: <Database />,
+      buttonText: 'Learn more',
+    },
+    {
+      title: 'Pricing',
+      subtitle: 'Simple and fair pricing that fits on a sticky note',
+      text: "Memgraph pricing is so clear you won't need ChatGPT to explain it. Price scales with memory capacity and we charge only for unique data. Support is always included. Starting at $25k for 16 GB.",
+      leftIcon: <Pricing />,
+      buttonText: 'Go to pricing',
+      styles: { padding: '6%', backgroundColor: token.colorBgLayout },
+    },
+    {
+      title: 'Support',
+      subtitle: 'Graph Processing',
+      text: 'Performing diverse parallel graph operations in a cluster in one unified system.',
+      leftIcon: <Image src="https://graphscope.io/docs/_images/sample_pg.png" preview={false} />,
+      rightTitle: "Don't take our word for it. Trust our customers.",
+      rightTitleGradient: true,
+    },
+  ];
+
+  return <>{sectionContent.map(renderSectionContent)}</>;
+};
+
+export default KnowledgeInfo;

docs/interactive/components/Home/DataAnalysis/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;

docs/interactive/components/Home/DataAnalysis/index.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Typography, Flex, Card } from 'antd';
+import { Quotes } from '../../Icons';
+import SplitSection from '../../SplitSection';
+import StyledButton from '../StyledButton';
+import InteractiveInfo from './InteractiveInfo';
+const { Title, Text, Link } = Typography;
+const cardBoxShadow = '0px 0px 20px 0px rgba(0, 0, 0, .1)';
+
+const DataAnalysis = () => {
+  return (
+    <>
+      <InteractiveInfo />
+      <SplitSection
+        splitNumber={0}
+        leftSide={
+          <div style={{ position: 'relative' }}>
+            <Card style={{ marginRight: '32px', padding: '30px', boxShadow: cardBoxShadow, zIndex: 2 }}>
+              <Title level={2}>
+                Throughout the tutorial, we assume all machines are running Linux system. We do not guarantee that it
+                works as smoothly as Linux on the other platform. For your reference, we’ve tested the tutorial on
+                Ubuntu 20.04.
+              </Title>
+            </Card>
+            <Quotes style={{ position: 'absolute', top: '50px', left: '24px', zIndex: 3 }} />
+          </div>
+        }
+        rightSide={
+          <Flex vertical gap={16}>
+            <Title style={{ margin: 0 }} level={4}>
+              Standalone Deployment for GIE
+            </Title>
+            <Text type="secondary">
+              We have demonstrated &nbsp;
+              <Link href="https://graphscope.io/docs/interactive_engine/getting_started" target="_blank">
+                how to execute interactive queries
+              </Link>
+              &nbsp; easily by installing GraphScope via pip on a local machine. However, in real-life applications,
+              graphs are often too large to fit on a single machine. In such cases, GraphScope can be deployed on a
+              cluster, such as a self-managed k8s cluster, for processing large-scale graphs. But you may wonder, “what
+              if I only need the GIE engine and not the whole package of GraphScope?” This tutorial will walk you
+              through the process of standalone deployment of GIE on a self-managed k8s cluster.
+            </Text>
+            <Flex>
+              <StyledButton url="https://graphscope.io/docs/deployment/deploy_graphscope_on_self_managed_k8s#prepare-a-kubernetes-cluster">
+                Create kubernetes cluster
+              </StyledButton>
+            </Flex>
+          </Flex>
+        }
+      />
+    </>
+  );
+};
+
+export default DataAnalysis;

docs/interactive/components/Home/DownloadStatistics.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Typography, Flex, Row, Col, theme } from 'antd';
+import { Download, GithubGradient, Community } from '../Icons';
+
+const { Title, Text } = Typography;
+
+// 定义统计项的接口
+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 }} level={2}>
+            {count}
+          </Title>
+          <Text style={{ fontSize: '16px' }} type="secondary">
+            {label}
+          </Text>
+        </Flex>
+      </Flex>
+    </Col>
+  );
+};
+
+const DownloadStatistics: React.FC = () => (
+  <Row 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 DownloadStatistics;

docs/interactive/components/Home/GraphScopeInstall.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Typography, Flex, Row, Col } from 'antd';
+import StyledButton from './StyledButton';
+import CodeMirror from './Codemirror';
+
+const { Title, Text, Link } = Typography;
+
+const GraphScopeInstall: React.FC = () => {
+  return (
+    <Row gutter={[48, 24]} align="middle">
+      <Col xs={24} sm={24} md={24} lg={14} xl={14}>
+        <CodeMirror />
+      </Col>
+      <Col xs={24} sm={24} md={24} lg={10} xl={10}>
+        <Flex vertical gap={24}>
+          <Title style={{ margin: 0 }} 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 GraphScopeInstall;