docs(landing): redesign landing page (#1020)

docs/landing/package.json

@@ -27,6 +27,7 @@
     "react-dom": "^18.3.1",
     "react-i18next": "^15.0.3",
     "react-icons": "5.3.0",
-    "usehooks-ts": "^3.1.0"
+    "usehooks-ts": "^3.1.0",
+    "vanilla-lazyload": "^19.1.3"
   }
 }

docs/landing/src/App.scss

@@ -9,14 +9,19 @@
   --color-bg: #fff;
   --color-bg-transparent: rgba(255, 255, 255, 0.9);
   --color-bg-grey: #f6f8fa;
+  --color-bg-grey-deep: #f2f2f5;
   --color-bg-blue: #e5effe;
   --color-border: #e1e4ec;
+  --color-border-light: #e4e4e4;
 }
 
 html,
 body {
   background-color: var(--color-bg);
-  overflow-x: hidden;
+}
+
+body {
+  padding-top: 70px;
 }
 
 :host,
@@ -74,3 +79,7 @@ a {
     opacity: 1;
   }
 }
+
+.app-grey-bg {
+  background: var(--color-bg-grey-deep);
+}

docs/landing/src/App.tsx

@@ -8,11 +8,16 @@ import { useDarkMode } from './hooks/darkmode'
 import { Header } from './components/Header'
 import { Slogan } from './components/Slogan'
 import { Footer } from './components/Footer'
-import { SlightFeature } from './components/Features/SlightFeature'
-import { QuickFeature } from './components/Features/QuickFeature'
-import { FullFeature } from './components/Features/FullFeature'
-import { FuncFeature } from './components/Features/FuncFeature'
-import { SafeFeature } from './components/Features/SafeFeature'
+import { SlightFeature } from './components/Features/Slight'
+import { QuickFeature } from './components/Features/Quick'
+import { FullFeature } from './components/Features/Full'
+import { FuncsFeature } from './components/Features/Funcs'
+import { SafeFeature } from './components/Features/Safe'
+import { Plugins } from './components/Features/Plugins'
+import { Group } from './components/FeatureComps/Group'
+import { StartFeature } from './components/Features/Start'
+import { FrameworksFeature } from './components/Features/Frameworks'
+import { GreyCardsFeature } from './components/Features/GreyCards'
 
 function App() {
   const { t, i18n } = useTranslation()
@@ -33,11 +38,23 @@ function App() {
       <Header darkModeHandler={{ isDarkMode, toggle: toggleDarkMode }} />
       <Slogan />
 
-      <SlightFeature />
-      <QuickFeature />
+      <StartFeature />
+      <GreyCardsFeature />
+
+      <FrameworksFeature />
+
+      <Group>
+        <SlightFeature />
+        <QuickFeature />
+      </Group>
+      <Group>
+        <SafeFeature />
+      </Group>
+      <Group>
+        <Plugins />
+      </Group>
       <FullFeature />
-      <FuncFeature />
-      <SafeFeature />
+      <FuncsFeature />
 
       <Footer />
     </>