docs: fix homepage gradients (#2500)

apify · May 24, 2024 · 4a72a72 · 4a72a72
1 parent 38ed0d6
commit 4a72a72
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 42 deletions.
diff --git a/website/src/components/Gradients.jsx b/website/src/components/Gradients.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+export default function Gradients() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 0 0" fill="none">
+            <defs>
+                <linearGradient id="gradient-1" x1="26.6667" y1="12" x2="14.2802" y2="34.5208" gradientUnits="userSpaceOnUse">
+                    <stop offset="0.000950807" stopColor="#FFB200"/>
+                    <stop offset="0.0814769" stopColor="#FFB100"/>
+                    <stop offset="0.156006" stopColor="#FFAF02"/>
+                    <stop offset="0.225461" stopColor="#FEAB04"/>
+                    <stop offset="0.290764" stopColor="#FDA606"/>
+                    <stop offset="0.352838" stopColor="#FCA00A"/>
+                    <stop offset="0.412606" stopColor="#FB980E"/>
+                    <stop offset="0.47099" stopColor="#FA9013"/>
+                    <stop offset="0.528912" stopColor="#F98618"/>
+                    <stop offset="0.587296" stopColor="#F77B1E"/>
+                    <stop offset="0.647064" stopColor="#F56F24"/>
+                    <stop offset="0.709138" stopColor="#F3632B"/>
+                    <stop offset="0.774441" stopColor="#F25532"/>
+                    <stop offset="0.843896" stopColor="#EF473A"/>
+                    <stop offset="0.918425" stopColor="#ED3842"/>
+                    <stop offset="0.998951" stopColor="#EB284B"/>
+                </linearGradient>
+                <linearGradient id="gradient-2" x1="29.6667" y1="0" x2="-1.80874" y2="26.2295" gradientUnits="userSpaceOnUse">
+                    <stop offset="0.000950807" stopColor="#FFB200"/>
+                    <stop offset="0.0814769" stopColor="#FFB100"/>
+                    <stop offset="0.156006" stopColor="#FFAF02"/>
+                    <stop offset="0.225461" stopColor="#FEAB04"/>
+                    <stop offset="0.290764" stopColor="#FDA606"/>
+                    <stop offset="0.352838" stopColor="#FCA00A"/>
+                    <stop offset="0.412606" stopColor="#FB980E"/>
+                    <stop offset="0.47099" stopColor="#FA9013"/>
+                    <stop offset="0.528912" stopColor="#F98618"/>
+                    <stop offset="0.587296" stopColor="#F77B1E"/>
+                    <stop offset="0.647064" stopColor="#F56F24"/>
+                    <stop offset="0.709138" stopColor="#F3632B"/>
+                    <stop offset="0.774441" stopColor="#F25532"/>
+                    <stop offset="0.843896" stopColor="#EF473A"/>
+                    <stop offset="0.918425" stopColor="#ED3842"/>
+                    <stop offset="0.998951" stopColor="#EB284B"/>
+                </linearGradient>
+            </defs>
+        </svg>
+    );
+}
diff --git a/website/src/components/Highlights.jsx b/website/src/components/Highlights.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import styles from './Highlights.module.css';
+import Gradients from './Gradients';
 
 const FeatureList = [
     {
@@ -86,10 +87,9 @@ function Feature({ Svg, title, description }) {
 }
 
 export default function Highlights() {
-    const Svg = require('../../static/img/features/gradient.svg').default;
     return (
         <section className={styles.features}>
-            {<Svg />}
+            <Gradients />
             <div className="container">
                 <div className="row">
                     {FeatureList.map((props, idx) => (

diff --git a/website/static/img/features/gradient.svg b/website/static/img/features/gradient.svg