fix(oracle): fix landing (#1032)

src/containers/home/Electricity.module.scss

@@ -0,0 +1,38 @@
+.electricity {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 20px;
+  opacity: 0.5;
+  z-index: -1;
+
+  .line {
+    width: 100%;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    background: #000;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    opacity: 0.7;
+  }
+}
+
+// .electricity-svg {
+//   stroke: #3ab793;
+//   stroke-width: 5;
+// }
+
+.electricityLineRect {
+  fill: rgba(0, 0, 0, 0) !important;
+}

src/containers/home/electricity.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useAppData } from 'src/contexts/appData';
+import styles from './Electricity.module.scss';
 
 const M = Math;
 const DOC = document;
@@ -92,24 +93,14 @@ function Electricity() {
   }, [block]);
 
   return (
-    <div
-      style={{
-        zIndex: '-1',
-        width: '100%',
-        padding: ' 0 20px',
-        position: 'absolute',
-        opacity: 0.5,
-      }}
-      className="electricity"
-    >
-      <div className="line">
+    <div className={styles.electricity}>
+      <div className={styles.line}>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2050 80">
           <g id="lightningContainer">
             <rect
+              className={styles.electricityLineRect}
               width="2050"
               height="80"
-              fill="#000000"
-              id="electricityLineRect"
             />
             {stage && (
               <g

src/pages/Learn/Learn.tsx

@@ -23,7 +23,26 @@ import KeywordButton from '../Search/components/KeywordButton/KeywordButton';
 import styles from './Learn.module.scss';
 import { useBackend } from 'src/contexts/backend';
 import TitleText from '../Search/components/TitleText/TitleText';
-import { learningListConfig } from '../Search/Search';
+// import { learningListConfig } from '../Search/Search';
+
+const learningListConfig = [
+  {
+    title: 'upgrade',
+    text: 'your intelligence to superintelligence',
+  },
+  {
+    title: 'spread',
+    text: 'your content cheaper',
+  },
+  {
+    title: 'upload',
+    text: (
+      <>
+        your brain into eternity, <br /> and more
+      </>
+    ),
+  },
+];
 
 function Learn() {
   const [ask, setAsk] = useState('');

src/pages/Search/Search.module.scss

@@ -13,6 +13,9 @@ $mobile-breakpoint: 480px;
 
   padding: 0 10px;
 
+  // not good, need fix wrapper
+  margin-bottom: 100px;
+
   @media (width <= $mobile-breakpoint) {
     // for graph out screen position
     overflow-x: hidden;

src/style/home.css

@@ -1,35 +1,3 @@
-.electricity {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-
-.electricity::before {
-  content: '';
-  position: absolute;
-  background: #000;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  opacity: 0.7;
-}
-
-.electricity .line {
-  width: 100%;
-}
-
-.electricity-svg {
-  stroke: #3ab793;
-  stroke-width: 5;
-}
-
-#electricityLineRect {
-  fill: rgba(0, 0, 0, 0);
-}
-
 .btn-home {
   height: 42px;
   white-space: nowrap;