feat: home page is adaptive

GraphScope · Jan 21, 2025 · b62cdc4 · b62cdc4
1 parent 98a9150
commit b62cdc4
Show file tree

Hide file tree

Showing 18 changed files with 438 additions and 355 deletions.
diff --git a/docs/interactive/components/Home/Codemirror.tsx b/docs/interactive/components/Home/Codemirror.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Flex, Button } from 'antd';
+import { Flex, Button, Row, Col } from 'antd';
 import { CopyOutlined, CheckOutlined } from '@ant-design/icons';
 import CodeMirror from '@uiw/react-codemirror';
 import { createTheme } from '@uiw/codemirror-themes';
@@ -51,18 +51,35 @@ export default () => {
     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
+      style={{
+        position: 'relative',
+        backgroundColor: '#f5f5f5',
+        borderRadius: '6px',
+        overflow: 'hidden',
+        padding: '12px 12px 12px 0px',
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <Row>
+        <Col xs={24} sm={24} md={24} lg={24} xl={24}>
+          <CodeMirror
+            value={editCode}
+            readOnly
+            basicSetup={{
+              lineNumbers: false, // 确保不显示行号
+            }}
+            theme={myTheme}
+          />
+          <Button
+            style={{ position: 'absolute', top: 0, right: 0 }}
+            type="text"
+            icon={copy ? <CheckOutlined /> : <CopyOutlined />}
+            onClick={handleCopy}
+          />
+        </Col>
+      </Row>
     </div>
   );
 };
diff --git a/docs/interactive/components/Home/Performance.tsx b/docs/interactive/components/Home/Performance.tsx
@@ -23,12 +23,14 @@ const StatItemComponent: React.FC<StatItem> = ({ icon, label, count }) => {
     borderRadius: '50%',
   };
   return (
-    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
+    <Col xs={24} sm={24} md={24} 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">
+          <Title style={{ margin: 0 }} level={2}>
+            {count}
+          </Title>
+          <Text style={{ fontSize: '16px' }} type="secondary">
             {label}
           </Text>
         </Flex>

diff --git a/docs/interactive/components/Home/Realize.tsx b/docs/interactive/components/Home/Realize.tsx
@@ -10,10 +10,10 @@ 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}>
+      <Col xs={0} sm={0} md={0} lg={0} xl={14}>
         <CodeMirror />
       </Col>
-      <Col xs={24} sm={24} md={10} lg={10} xl={10}>
+      <Col xs={24} sm={24} md={24} lg={24} xl={10}>
         <Flex vertical gap={24}>
           <Title level={3}>Running GraphScope Interactive Engine on Local</Title>
           <Text type="secondary">

diff --git a/docs/interactive/components/Home/SimplePricing/index.tsx b/docs/interactive/components/Home/SimplePricing/index.tsx
@@ -6,7 +6,7 @@ import StyledButton from '../StyledButton';
 import SectionContent from './SectionContent';
 import { gradientTextStyle, data } from '../const';
 
-const { Title, Text } = Typography;
+const { Title, Text, Link } = Typography;
 const cardBoxShadow = '0px 0px 20px 0px rgba(0, 0, 0, .1)';
 
 const SimplePricing = () => {
@@ -18,15 +18,14 @@ const SimplePricing = () => {
       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',
-      styles: { padding: '0 17%' },
     },
     {
       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: '5% 17%', backgroundColor: token.colorBgLayout },
+      styles: { backgroundColor: token.colorBgLayout },
     },
     {
       title: 'Support',
@@ -35,6 +34,7 @@ const SimplePricing = () => {
       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,
+      styles: { padding: '8% 17%' },
     },
   ];
 
@@ -59,41 +59,36 @@ const SimplePricing = () => {
       <SplitSection
         leftSide={
           <div style={{ position: 'relative' }}>
-            <Card style={{ padding: '50px 30px', boxShadow: cardBoxShadow, zIndex: 2 }}>
-              <Title>
-                “We solved four business problems with Memgraph and proved the value without any doubt. Making the
-                decision to use Memgraph as our database of choice was a no-brainer in the end.”
+            <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>
-              <Text>Derick Schmidt, Head of Product at Capitec Bank</Text>
             </Card>
             <Quotes style={{ position: 'absolute', top: '50px', left: '24px', zIndex: 3 }} />
-            <Card
-              style={{
-                position: 'absolute',
-                top: '24px',
-                left: '-24px',
-                height: '460px',
-                boxShadow: cardBoxShadow,
-                zIndex: 1,
-              }}
-            />
-            <Card
-              style={{ position: 'absolute', top: '48px', left: '-48px', height: '410px', boxShadow: cardBoxShadow }}
-            />
           </div>
         }
         rightSide={
           <Flex vertical gap={16}>
             <Title style={{ margin: 0 }} level={4}>
-              Solving Business Challenges with Memgraph
+              Standalone Deployment for GIE
             </Title>
-            <Text>
-              Explore how companies are using Memgraph to tackle real-world challenges with real-time data analysis.
-              From fraud detection to cybersecurity, see practical examples of how Memgraph's graph database is making a
-              difference.
+            <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>Read customer stories</StyledButton>
+              <StyledButton url="https://graphscope.io/docs/deployment/deploy_graphscope_on_self_managed_k8s#prepare-a-kubernetes-cluster">
+                Create kubernetes cluster
+              </StyledButton>
             </Flex>
           </Flex>
         }

diff --git a/docs/interactive/components/Icons/Database.tsx b/docs/interactive/components/Icons/Database.tsx
@@ -19,7 +19,6 @@ const Database: React.FC<IDatabaseProps> = ({ style = {} }) => {
         </linearGradient>
       </defs>
       <g>
-        <title>Layer 1</title>
         <g id="svg_2" clipPath="url(#clip0_6762_22480)">
           <rect id="svg_3" x="143" y="40" fill="white" height="348" width="285" />
           <path

diff --git a/docs/interactive/components/Icons/Earth.tsx b/docs/interactive/components/Icons/Earth.tsx
@@ -16,7 +16,6 @@ const AntiFraud: React.FC<IAntiFraudProps> = ({ style = {} }) => {
         <use id="svg_1" overflow="visible" href="#a" />
       </clipPath>
       <g>
-        <title>Layer 1</title>
         <g id="svg_2" clip-path="url(#b)">
           <path
             id="svg_3"

diff --git a/docs/interactive/components/Icons/GenAI.tsx b/docs/interactive/components/Icons/GenAI.tsx
@@ -67,7 +67,6 @@ const GenAI: React.FC<IGenAIProps> = ({ style = {} }) => {
         </linearGradient>
       </defs>
       <g>
-        <title>Layer 1</title>
         <path
           id="svg_1"
           fill="#231F20"

diff --git a/docs/interactive/components/Icons/LeftIcon.tsx b/docs/interactive/components/Icons/LeftIcon.tsx
@@ -8,7 +8,7 @@ const LeftIcon: React.FC<ILeftIconProps> = ({ style = {} }) => {
   const { color = '#F97108', fontSize = '16px' } = style;
 
   return (
-    <svg width="597" height="500" xmlns="http://www.w3.org/2000/svg">
+    <svg width="375" height="292" xmlns="http://www.w3.org/2000/svg">
       <g>
         <path
           id="svg_1"
@@ -33,10 +33,9 @@ const LeftIcon: React.FC<ILeftIconProps> = ({ style = {} }) => {
         />
         <path id="svg_7" d="m-83.8,388.1l-0.2,-0.2l0.2,0.2c-0.1,-0.1 0,0 0,0z" />
         <path
-          transform="rotate(0.528527 190.812 390.077)"
           stroke="null"
           id="svg_8"
-          d="m-120.28385,646.20223l-1.65184,-1.70513l-0.13765,-0.14209c0.55061,0.71047 1.23888,1.27885 1.78949,1.84723zm247.91319,-262.73275c-18.44551,59.25341 -62.90746,104.58156 -117.69338,124.47479l493.76158,0c-56.43776,-67.49489 -135.31297,-115.66493 -227.40288,-130.72695c-50.51868,-8.24148 -100.21144,-5.82587 -147.01348,5.68378l-1.65184,0.56838l0.55061,-1.84723c2.61541,-8.95195 4.81786,-18.1881 6.19439,-27.56634c15.41714,-100.8871 -46.80205,-195.94833 -140.95675,-220.1044l0,314.17096c39.91939,-30.26613 85.34491,-52.43287 134.21175,-64.653z"
+          d="m-50.16335,365.3l-0.67998,-0.82053l-0.05667,-0.06838c0.22666,0.34189 0.50999,0.6154 0.73665,0.8889zm102.05403,-126.42954c-7.59314,28.51331 -25.896,50.32566 -48.44875,59.89847l203.25808,0c-23.23273,-32.47919 -55.70189,-55.65908 -93.61091,-62.90707c-20.79613,-3.96588 -41.25227,-2.80347 -60.51844,2.73509l-0.67998,0.27351l0.22666,-0.8889c1.07664,-4.30777 1.98328,-8.75229 2.54993,-13.26519c6.3465,-48.54785 -19.26617,-94.29223 -58.02517,-105.91636l0,151.1821c16.43291,-14.56435 35.13243,-25.23121 55.24857,-31.11165z"
         />
       </g>
     </svg>

diff --git a/docs/interactive/components/Icons/LeftPhotoIcon.tsx b/docs/interactive/components/Icons/LeftPhotoIcon.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+interface ILeftIconProps {
+  style?: React.CSSProperties;
+}
+
+const LeftIcon: React.FC<ILeftIconProps> = ({ style = {} }) => {
+  const { color = '#F97108', fontSize = '16px' } = style;
+
+  return (
+    <svg width="375" height="292" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <path
+          id="svg_1"
+          d="m-85.6,386.3l-0.4,-0.3l0.2,0.2c0.1,0 0.1,0.1 0.2,0.1zm-4,-3.8l-0.3,-0.3c0.1,0 0.2,0.1 0.3,0.3c0,-0.1 0,-0.1 0,0z"
+        />
+        <path
+          id="svg_2"
+          d="m-89.9,382.2c-1.9,-1.8 -3.9,-3.6 -5.8,-5.3c2,1.8 4.1,3.7 6,5.6c0,-0.2 -0.1,-0.3 -0.2,-0.3zm1.4,1.3c-0.4,-0.3 -0.7,-0.7 -1.1,-1l-0.1,-0.1c0.4,0.4 0.8,0.7 1.2,1.1z"
+        />
+        <path
+          id="svg_3"
+          d="m-87.8,384.2l-1.8,-1.7c0.4,0.3 0.7,0.7 1.1,1c0.2,0.2 0.5,0.4 0.7,0.7zm1.8,1.8l-1.7,-1.6l0.5,0.5c0.5,0.3 0.9,0.7 1.2,1.1z"
+        />
+        <path
+          id="svg_4"
+          d="m-87.7,384.2s-0.1,0 0,0c-0.3,-0.3 -0.6,-0.5 -0.8,-0.7c0.3,0.3 0.5,0.5 0.8,0.7zm1.9,1.9l-0.2,-0.2l-1.1,-1.1c0.4,0.5 0.9,0.9 1.3,1.3zm1.4,1.4l-1.2,-1.2l-0.2,-0.2l1.4,1.4z"
+        />
+        <path id="svg_5" d="m-87.6,384.3l-0.2,-0.2c0,0.1 0.1,0.1 0.2,0.2c-0.1,0 -0.1,0 0,0z" />
+        <path
+          id="svg_6"
+          d="m-87.1,384.9l-0.5,-0.5l-0.1,-0.1l0.6,0.6zm3.1,3l-1.6,-1.6l1.2,1.2l0.4,0.4zm0.1,0.1l-0.5,-0.5c0.1,0.2 0.3,0.3 0.5,0.5z"
+        />
+        <path id="svg_7" d="m-83.8,388.1l-0.2,-0.2l0.2,0.2c-0.1,-0.1 0,0 0,0z" />
+        <path
+          stroke="null"
+          id="svg_8"
+          d="m-21.66942,324l-0.30515,-0.37448l-0.02543,-0.03121c0.10172,0.15603 0.22886,0.28086 0.33058,0.40569zm45.79755,-57.70111c-3.40748,13.01318 -11.62103,22.9681 -21.74176,27.33703l91.21366,0c-10.42587,-14.82316 -24.99666,-25.40222 -42.00863,-28.71013c-9.33243,-1.80999 -18.51228,-1.27947 -27.15812,1.24827l-0.30515,0.12483l0.10172,-0.40569c0.48315,-1.96602 0.89001,-3.99445 1.1443,-6.05409c2.84804,-22.15673 -8.64584,-43.03398 -26.03925,-48.33911l0,68.99792c7.3744,-6.64702 15.76595,-11.51526 24.79323,-14.19903z"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export default LeftIcon;