From 3a773b0abf736ae9bd2255f055ace0a0e46657c1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jind=C5=99ich=20B=C3=A4r?= <jindrichbar@gmail.com>
Date: Fri, 24 May 2024 15:09:13 +0200
Subject: [PATCH] docs: fix homepage gradients

---
 website/src/components/Gradients.jsx     | 46 ++++++++++++++++++++++++
 website/src/components/Highlights.jsx    |  4 +--
 website/static/img/features/gradient.svg | 40 ---------------------
 3 files changed, 48 insertions(+), 42 deletions(-)
 create mode 100644 website/src/components/Gradients.jsx
 delete mode 100644 website/static/img/features/gradient.svg

diff --git a/website/src/components/Gradients.jsx b/website/src/components/Gradients.jsx
new file mode 100644
index 000000000000..1c63f540fe27
--- /dev/null
+++ 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
index e96c2121c751..6c561f04446f 100644
--- 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
deleted file mode 100644
index 3bbc695d749f..000000000000
--- a/website/static/img/features/gradient.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-<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" stop-color="#FFB200"/>
-            <stop offset="0.0814769" stop-color="#FFB100"/>
-            <stop offset="0.156006" stop-color="#FFAF02"/>
-            <stop offset="0.225461" stop-color="#FEAB04"/>
-            <stop offset="0.290764" stop-color="#FDA606"/>
-            <stop offset="0.352838" stop-color="#FCA00A"/>
-            <stop offset="0.412606" stop-color="#FB980E"/>
-            <stop offset="0.47099" stop-color="#FA9013"/>
-            <stop offset="0.528912" stop-color="#F98618"/>
-            <stop offset="0.587296" stop-color="#F77B1E"/>
-            <stop offset="0.647064" stop-color="#F56F24"/>
-            <stop offset="0.709138" stop-color="#F3632B"/>
-            <stop offset="0.774441" stop-color="#F25532"/>
-            <stop offset="0.843896" stop-color="#EF473A"/>
-            <stop offset="0.918425" stop-color="#ED3842"/>
-            <stop offset="0.998951" stop-color="#EB284B"/>
-        </linearGradient>
-        <linearGradient id="gradient-2" x1="29.6667" y1="0" x2="-1.80874" y2="26.2295" gradientUnits="userSpaceOnUse">
-            <stop offset="0.000950807" stop-color="#FFB200"/>
-            <stop offset="0.0814769" stop-color="#FFB100"/>
-            <stop offset="0.156006" stop-color="#FFAF02"/>
-            <stop offset="0.225461" stop-color="#FEAB04"/>
-            <stop offset="0.290764" stop-color="#FDA606"/>
-            <stop offset="0.352838" stop-color="#FCA00A"/>
-            <stop offset="0.412606" stop-color="#FB980E"/>
-            <stop offset="0.47099" stop-color="#FA9013"/>
-            <stop offset="0.528912" stop-color="#F98618"/>
-            <stop offset="0.587296" stop-color="#F77B1E"/>
-            <stop offset="0.647064" stop-color="#F56F24"/>
-            <stop offset="0.709138" stop-color="#F3632B"/>
-            <stop offset="0.774441" stop-color="#F25532"/>
-            <stop offset="0.843896" stop-color="#EF473A"/>
-            <stop offset="0.918425" stop-color="#ED3842"/>
-            <stop offset="0.998951" stop-color="#EB284B"/>
-        </linearGradient>
-    </defs>
-</svg>