diff --git a/apps/www/components/Panel/index.tsx b/apps/www/components/Panel/index.tsx
index ab5ac294ddc..9ee2f113933 100644
--- a/apps/www/components/Panel/index.tsx
+++ b/apps/www/components/Panel/index.tsx
@@ -70,9 +70,8 @@ const Panel = ({
!trackCursor && hasActiveOnHover ? 'hover:bg-none hover:!bg-brand' : '',
outerClassName,
].join(' ')}
- initial="rest"
whileHover="hover"
- animate="hover"
+ animate="initial"
>
{
+const FunctionsVisual = () => {
+ const initial = { x1: [0, 0], x2: [0, 0], y1: [0, 0], y2: [0, 0] }
const gradientVariant1 = {
- rest: {
- x1: [0],
- x2: [0],
- y1: [0],
- y2: [0],
- },
- out: {
- x1: [0],
- x2: [0],
- y1: [0],
- y2: [0],
- },
+ initial,
hover: {
- x1: [30, 200, 400],
- x2: [0, 0, 348],
+ x1: [30, 200, 450],
+ x2: [0, 50, 350],
y1: [40, 0, 0],
y2: [0, 0, 0],
},
}
const gradientVariant2 = {
- rest: {
- x1: [0],
- x2: [0],
- y1: [0],
- y2: [0],
- },
- out: {
- x1: [0],
- x2: [0],
- y1: [0],
- y2: [0],
- },
+ initial,
hover: {
- x1: [400, 200, 0],
- x2: [348, 150, 0],
- y1: [0, 0, 0],
- y2: [0, 0, 0],
+ x1: [400, 50],
+ x2: [300, -100],
+ y1: [0, 0],
+ y2: [0, 0],
},
}
return (
diff --git a/apps/www/public/images/index/products/functions.svg b/apps/www/public/images/index/products/functions.svg
index 52b3886a96b..a526d0dfbdf 100644
--- a/apps/www/public/images/index/products/functions.svg
+++ b/apps/www/public/images/index/products/functions.svg
@@ -1,53 +1,100 @@
-