miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

docs(nx-dev): improve enterprise design & animations (#30446)

Browse Source 
In the nx-dev pages, adjust the interface to utilize 'EnterpriseLayout'
instead of 'DefaultLayout'. The duration of the transition in
'customer-logos.tsx' has been reduced from 500 to 200 to boost
responsiveness.

The 'enterprise-layout.tsx' file was added and contains new animation
elements to enhance end-user experience. Updates were made to
'hero.tsx', simplifying and enhancing SVG animation.
This commit is contained in:
Benjamin Cabanes 2025-03-20 15:52:54 -04:00 committed by GitHub
parent f60803cfa4
commit cad4d26dcd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 2025 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
nx-dev/nx-dev/pages/enterprise/index.tsx
View File

@ -1,10 +1,10 @@
import { useRouter } from 'next/router';
import { NextSeo } from 'next-seo';
import { DefaultLayout } from '@nx/nx-dev/ui-common';
import {
CallToAction,
CustomerLogos,
CustomerMetrics,
EnterpriseLayout,
Hero,
HetznerCloudTestimonial,
MakeYourCiFast,
@ -14,7 +14,6 @@ import {
TestimonialCarousel,
VmwareTestimonial,
} from '@nx/nx-dev/ui-enterprise';
import { requestFreeTrial } from '../../lib/components/headerCtaConfigs';
import { ReactElement } from 'react';
export function Enterprise(): ReactElement {
@ -43,7 +42,7 @@ export function Enterprise(): ReactElement {
type: 'website',
}}
/>
<DefaultLayout headerCTAConfig={[requestFreeTrial]} isHome={true}>
<EnterpriseLayout>
<div>
<Hero />
<CustomerLogos />
@ -71,7 +70,7 @@ export function Enterprise(): ReactElement {
<div className="mt-32 lg:mt-40">
<CallToAction />
</div>
</DefaultLayout>
</EnterpriseLayout>
</>
);
}

BIN
nx-dev/nx-dev/public/images/enterprise/hero-dark.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 95 KiB

BIN
nx-dev/nx-dev/public/images/enterprise/hero-light.avif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

1
nx-dev/ui-enterprise/src/index.ts
View File

@ -10,3 +10,4 @@ export * from './lib/scale-your-organization';
export * from './lib/testimonial-carousel';
export * from './lib/download-case-study';
export * from './lib/trial-nx-enterprise';
export * from './lib/enterprise-layout';

28
nx-dev/ui-enterprise/src/lib/animations/animation.model.ts Normal file
View File

@ -0,0 +1,28 @@
export interface AnimationProps {
/**
* Controls whether the animation should play
* @default true
*/
autoPlay?: boolean;
/**
* Optional custom class name for the SVG
*/
className?: string;
/**
* Amount of the element that needs to be visible before triggering
* the in-view animation (0 to 1)
* @default 0.3 (30% of the element needs to be visible)
*/
inViewThreshold?: number;
/**
* Specifies whether the operation or event should occur only once.
* If set to `true`, the action is executed a single time and subsequently disabled or ignored.
* @default false
*/
once?: boolean;
/**
* Controls the speed of the animation
* @default 1
*/
speed?: number;
}

889
nx-dev/ui-enterprise/src/lib/animations/conformance.tsx Normal file
View File

@ -0,0 +1,889 @@
import { ReactElement, useEffect, useId, useState } from 'react';
import {
motion,
stagger,
useAnimate,
useInView,
useReducedMotion,
Variants,
} from 'framer-motion';
import { AnimationProps } from './animation.model';
/**
* Conformance animation.
*
* @param {Object} props - Object containing configuration options for the animation.
* @param {boolean} [props.autoPlay=true] - Determines whether the animation should autoplay when in view.
* @param {string} [props.className=''] - Optional CSS class name to apply to the SVG container.
* @param {number} [props.inViewThreshold=0.3] - A threshold defining how much of the SVG should be visible in the viewport to trigger the animation. Value ranges from 0 to 1.
* @param {boolean} [props.once=false] - If true, the animation will trigger only once when the SVG comes into view.
* @param {number} [props.speed=1] - Controls the speed of the animation; higher numbers result in faster animations.
*
* @returns {ReactElement} A React SVG component wrapped with animations.
*/
export function ConformanceAnimation({
autoPlay = true,
className = '',
inViewThreshold = 0.3,
once = false,
speed = 1,
}: AnimationProps): ReactElement {
// Generate unique IDs for SVG elements to prevent conflicts when multiple instances exist
const uniqueId = useId().replace(/:/g, '');
const redGlow1Id = `red-glow-1-${uniqueId}`;
const redGlow2Id = `red-glow-2-${uniqueId}`;
const redGlow3Id = `red-glow-3-${uniqueId}`;
const [scope, animate] = useAnimate();
const isInView = useInView(scope, {
amount: inViewThreshold,
once,
});
const getDuration = (base: number) => base / speed;
const willChangeStyle = {
willChange: 'opacity, transform, fill, pathLength',
};
const prefersReducedMotion = useReducedMotion();
const [animationsCompleted, setAnimationsCompleted] = useState(false);
useEffect(() => {
if (!isInView || animationsCompleted || !autoPlay) return;
if (prefersReducedMotion) {
// Single animate call with duration 0 for immediate final state
const controls = animate(
[
['.folder', { opacity: 1, y: 0 }],
['.folder-green', { fill: 'rgba(52, 211, 153, 0.3)' }],
['.folder-red', { fill: 'rgba(248, 113, 113, 0.3)' }],
['.zone-border', { pathLength: 1, opacity: 0.4 }],
['.zone-fill', { opacity: 0.05 }],
['.team-title', { opacity: 1, y: 0 }],
],
{
duration: 0,
onComplete: () => setAnimationsCompleted(true),
onError: (error: any) =>
console.error('Applying final animation states failed:', error),
}
);
return () => controls.stop();
}
// Animation starts
const controls = animate(
[
// 1. Folders slide in from bottom (sequential by default)
[
'.folder',
{ opacity: 1, y: 0 },
{
duration: getDuration(0.8),
ease: 'easeOut',
delay: stagger(getDuration(0.2)),
},
],
'myLabel',
// 2. Color transitions for folders - run in parallel with each other
[
'.folder-green',
{ fill: 'rgba(52, 211, 153, 0.3)' },
{
duration: getDuration(1.2),
ease: 'easeInOut',
delay: stagger(getDuration(0.2)),
at: '>', // Start at the same time as the previous animation
},
],
[
'.folder-red',
{ fill: 'rgba(248, 113, 113, 0.3)' },
{
duration: getDuration(1.2),
ease: 'easeInOut',
delay: stagger(getDuration(0.2)),
at: '<', // Start at the same time as the previous animation
},
],
// 3. Initial fade in of the red glow elements - start 0.5s after previous animations
[
'.red-glow',
{ opacity: [0, 0.9], scale: [0.9, 1] },
{
duration: getDuration(1.2),
ease: 'easeInOut',
delay: stagger(getDuration(0.5)),
at: '>',
},
],
],
{
onComplete: () => setAnimationsCompleted(true),
onError: (error: any) =>
console.error('Animation sequence failed:', error),
}
);
return () => controls.cancel();
}, [
animate,
autoPlay,
speed,
prefersReducedMotion,
animationsCompleted,
isInView,
]);
const folderVariants: Variants = {
initial: {
opacity: 0,
y: 20,
},
};
const redGlowVariants: Variants = {
initial: {
opacity: 0,
scale: 0.8,
},
};
const redGlowPulseVariants: Variants = {
pulse: (i) => ({
opacity: [0.9, 0.5, 0.7, 0.5, 0.9],
scale: [1, 1.05, 1, 1.05, 1],
transition: {
duration: getDuration(3),
ease: 'easeInOut',
times: [0, 0.25, 0.5, 0.75, 1],
repeat: Infinity,
repeatType: 'loop',
delay: i * getDuration(0.5),
},
}),
};
return (
<motion.svg
ref={scope}
width="351"
height="276"
viewBox="0 0 351 276"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
style={willChangeStyle}
>
<g id="Steps">
{/* Folder RightTop */}
<motion.g
className="folder"
initial="initial"
custom={0}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-red"
d="M141.448 61.8171C139.934 60.9429 138.638 59.5729 137.561 57.707C136.484 55.8411 135.944 54.0324 135.942 52.281V14.1367C135.942 12.3884 136.482 11.2038 137.561 10.5829C138.64 9.962 139.936 10.087 141.448 10.958L157.965 20.4941L163.471 30.0301L185.493 42.7449C187.007 43.6191 188.304 44.9907 189.383 46.8597C190.462 48.7288 191.001 50.5359 190.999 52.281V84.0679C190.999 85.8162 190.46 87.0024 189.383 87.6265C188.306 88.2505 187.009 88.1239 185.493 87.2466L141.448 61.8171Z"
fill="rgba(241, 245, 249, 0.3)"
custom={0}
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M156.687 1.78357C156.687 1.78357 156.687 1.7835 156.572 1.10036C156.183 0.11447 156.183 0.1273 156.183 0.1273L156.184 0.126996L156.187 0.126462L156.195 0.124969C156.202 0.123793 156.211 0.12226 156.222 0.120427C156.243 0.11676 156.273 0.11188 156.311 0.10622C156.386 0.0949085 156.492 0.0675062 156.622 0.053338C156.881 0.0251072 157.243 -0.0024115 157.658 0.000168219C158.464 0.00517315 159.812 0.24803 160.763 0.795569L160.764 0.796029L177.484 10.4494L182.99 19.9855L204.809 32.583C206.484 33.5501 207.881 35.0471 209.019 37.0183C210.157 38.9895 210.755 40.9467 210.753 42.8784V74.6644C210.753 76.7181 209.645 78.433 208.292 79.2171L207.414 77.7016C208.215 77.2376 209.001 76.1073 209.001 74.6644V42.8765C209.003 41.318 208.523 39.6611 207.503 37.8941C206.482 36.1272 205.286 34.881 203.933 34.0998L181.708 21.2677L176.202 11.7316L159.889 2.31335L159.889 2.31315C159.327 1.98989 158.524 1.70298 157.831 1.69868C157.497 1.6966 157.204 1.71887 156.996 1.74158C156.892 1.75288 156.81 1.76416 156.757 1.77224C156.73 1.77628 156.71 1.7795 156.699 1.78152C156.693 1.78252 156.689 1.78322 156.687 1.78357C156.686 1.78372 156.685 1.78382 156.685 1.78382L156.686 1.78373L156.687 1.78357Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M189.461 87.8983L208.63 78.0703"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M185.764 42.6497L204.349 33.2109"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M163.578 29.8079L182.164 20.3691"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M157.35 20.2688L175.935 10.8301"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M137.695 10.1485L156.573 0.904297"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M191.213 52.1888L209.799 42.75"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<motion.path
className="folder-red"
d="M156.98 0.947266L139.733 10.0445L157.738 20.0894L163.614 30.1343L187.305 43.9697L190.337 48.1393L190.906 52.4984V87.1817L206.636 79.0321L210.048 75.8102V44.7278L209.479 40.7478L207.394 36.1992L204.551 33.5458L182.756 21.0371L177.07 10.9922L160.771 2.08442L156.98 0.947266Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</g>
<motion.g
className="red-glow"
initial="initial"
variants={redGlowVariants}
custom={0}
>
<motion.g
id="Ellipse 25"
filter={`url(#${redGlow1Id})`}
animate="pulse"
variants={redGlowPulseVariants}
custom={0}
>
<circle
cx="6"
cy="6"
r="6"
transform="matrix(0.866025 0.5 0 1 157 43.2266)"
fill="#F87171"
/>
</motion.g>
</motion.g>
</motion.g>
{/* Folder RightMiddle */}
<motion.g
className="folder"
initial="initial"
custom={1}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-green"
d="M209.675 107.307C208.161 106.433 206.865 105.063 205.788 103.197C204.71 101.331 204.171 99.5227 204.169 97.7712V59.6269C204.169 57.8786 204.708 56.694 205.788 56.0731C206.867 55.4522 208.162 55.5773 209.675 56.4482L226.192 65.9843L231.697 75.5204L253.72 88.2351C255.234 89.1093 256.53 90.4809 257.61 92.35C258.689 94.219 259.227 96.0261 259.226 97.7712V129.558C259.226 131.306 258.687 132.493 257.61 133.117C256.532 133.741 255.236 133.614 253.72 132.737L209.675 107.307Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M224.913 47.2719C224.913 47.2719 224.914 47.2718 224.798 46.5886C224.409 45.6028 224.409 45.6156 224.409 45.6156L224.411 45.6153L224.414 45.6147L224.422 45.6133C224.429 45.6121 224.437 45.6105 224.448 45.6087C224.47 45.605 224.5 45.6002 224.537 45.5945C224.612 45.5832 224.718 45.5558 224.848 45.5416C225.107 45.5134 225.469 45.4859 225.885 45.4884C226.691 45.4935 228.039 45.7363 228.99 46.2839L228.99 46.2843L245.711 55.9377L251.216 65.4738L273.036 78.0712C274.711 79.0383 276.108 80.5354 277.246 82.5066C278.384 84.4778 278.981 86.435 278.979 88.3667V120.153C278.979 122.206 277.872 123.921 276.518 124.705L275.64 123.19C276.441 122.726 277.228 121.596 277.228 120.153V88.3648C277.229 86.8063 276.749 85.1494 275.729 83.3824C274.709 81.6155 273.513 80.3693 272.16 79.5881L249.934 66.756L244.428 57.2199L228.115 47.8016L228.115 47.8014C227.554 47.4782 226.751 47.1913 226.058 47.187C225.724 47.1849 225.431 47.2071 225.222 47.2299C225.118 47.2412 225.037 47.2524 224.983 47.2605C224.957 47.2646 224.937 47.2678 224.925 47.2698C224.919 47.2708 224.915 47.2715 224.913 47.2719C224.912 47.272 224.912 47.2721 224.912 47.2721L224.912 47.272L224.913 47.2719Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M257.688 133.387L276.857 123.559"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M253.99 88.138L272.576 78.6992"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M231.804 75.2942L250.389 65.8555"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M225.576 65.7591L244.162 56.3203"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M205.921 55.6348L224.798 46.3906"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M259.439 97.677L278.025 88.2383"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-green"
d="M225.207 46.4375L207.96 55.5348L225.965 65.5797L231.84 75.6246L255.531 89.46L258.563 93.6296L259.132 97.9887V132.672L274.863 124.522L278.274 121.3V90.2181L277.706 86.238L275.621 81.6894L272.778 79.036L250.982 66.5273L245.297 56.4824L228.997 47.5747L225.207 46.4375Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder RightBottom */}
<motion.g
className="folder"
initial="initial"
custom={2}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-red"
d="M281.697 150.893C280.183 150.019 278.887 148.649 277.81 146.783C276.733 144.917 276.193 143.109 276.191 141.357V103.213C276.191 101.465 276.731 100.28 277.81 99.6591C278.889 99.0382 280.185 99.1632 281.697 100.034L298.214 109.57L303.72 119.106L325.742 131.821C327.256 132.695 328.553 134.067 329.632 135.936C330.711 137.805 331.25 139.612 331.248 141.357V173.144C331.248 174.892 330.709 176.079 329.632 176.703C328.555 177.327 327.258 177.2 325.742 176.323L281.697 150.893Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M296.936 90.8578C296.936 90.8578 296.936 90.8577 296.821 90.1746C296.432 89.1887 296.432 89.2015 296.432 89.2015L296.433 89.2012L296.436 89.2007L296.445 89.1992C296.451 89.198 296.46 89.1965 296.471 89.1946C296.492 89.191 296.522 89.1861 296.56 89.1804C296.635 89.1691 296.741 89.1417 296.871 89.1276C297.13 89.0993 297.492 89.0718 297.907 89.0744C298.713 89.0794 300.061 89.3222 301.012 89.8698L301.013 89.8702L317.733 99.5237L323.239 109.06L345.058 121.657C346.733 122.624 348.13 124.121 349.268 126.093C350.407 128.064 351.004 130.021 351.002 131.953V163.739C351.002 165.792 349.894 167.507 348.541 168.291L347.663 166.776C348.464 166.312 349.25 165.181 349.25 163.739V131.951C349.252 130.392 348.772 128.735 347.752 126.968C346.731 125.201 345.535 123.955 344.182 123.174L321.957 110.342L316.451 100.806L300.138 91.3876L300.138 91.3874C299.576 91.0641 298.773 90.7772 298.08 90.7729C297.746 90.7708 297.453 90.7931 297.245 90.8158C297.141 90.8271 297.059 90.8384 297.006 90.8465C296.979 90.8505 296.959 90.8537 296.948 90.8557C296.942 90.8567 296.938 90.8574 296.936 90.8578C296.935 90.8579 296.934 90.858 296.934 90.858L296.935 90.858L296.936 90.8578Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M329.71 176.973L348.879 167.145"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M326.013 131.724L344.598 122.285"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M303.826 118.88L322.412 109.441"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M297.599 109.345L316.184 99.9062"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M277.943 99.2207L296.821 89.9766"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M331.462 141.263L350.048 131.824"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-red"
d="M297.228 90.0234L279.981 99.1207L297.986 109.166L303.862 119.21L327.553 133.046L330.585 137.215L331.154 141.575V176.258L346.884 168.108L350.296 164.886V133.804L349.727 129.824L347.642 125.275L344.799 122.622L323.004 110.113L317.318 100.068L301.019 91.1606L297.228 90.0234Z"
fill="rgba(241, 245, 249, 0.3)"
/>
<motion.g
className="red-glow"
initial="initial"
variants={redGlowVariants}
custom={1}
>
<motion.g
id="Ellipse 25_2"
filter={`url(#${redGlow2Id})`}
animate="pulse"
variants={redGlowPulseVariants}
custom={1}
>
<ellipse
cx="6"
cy="6.31972"
rx="6"
ry="6.31972"
transform="matrix(0.866025 0.5 0 1 298 130.883)"
fill="#F87171"
/>
</motion.g>
</motion.g>
</motion.g>
{/* Folder MiddleTop */}
<motion.g
className="folder"
initial="initial"
custom={0}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-green"
d="M72.0809 108.061C70.5668 107.187 69.2711 105.817 68.1939 103.951C67.1166 102.085 66.577 100.277 66.5752 98.5251V60.3808C66.5752 58.6325 67.1147 57.4479 68.1939 56.827C69.273 56.2061 70.5686 56.3312 72.0809 57.2021L88.5978 66.7382L94.1035 76.2743L116.126 88.9891C117.64 89.8632 118.937 91.2348 120.016 93.1039C121.095 94.9729 121.634 96.78 121.632 98.5251V130.312C121.632 132.06 121.093 133.247 120.016 133.871C118.939 134.495 117.642 134.368 116.126 133.491L72.0809 108.061Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M87.3194 48.0258C87.3194 48.0258 87.3198 48.0257 87.2047 47.3426C86.8154 46.3567 86.8154 46.3695 86.8154 46.3695L86.8171 46.3692L86.82 46.3686L86.8283 46.3672C86.8349 46.366 86.8437 46.3644 86.8545 46.3626C86.8762 46.3589 86.9062 46.3541 86.9437 46.3484C87.0186 46.3371 87.1246 46.3097 87.2546 46.2955C87.5137 46.2673 87.8755 46.2398 88.291 46.2424C89.0969 46.2474 90.4452 46.4902 91.3959 47.0378L91.3967 47.0382L108.117 56.6916L113.623 66.2277L135.442 78.8251C137.117 79.7922 138.514 81.2893 139.652 83.2605C140.79 85.2317 141.388 87.1889 141.385 89.1206V120.907C141.385 122.96 140.278 124.675 138.924 125.459L138.046 123.944C138.847 123.48 139.634 122.349 139.634 120.907V89.1187C139.636 87.5602 139.156 85.9033 138.135 84.1363C137.115 82.3694 135.919 81.1232 134.566 80.342L112.34 67.5099L106.835 57.9738L90.5217 48.5555L90.5214 48.5553C89.9599 48.2321 89.1572 47.9452 88.4642 47.9409C88.1302 47.9388 87.837 47.9611 87.6285 47.9838C87.5247 47.9951 87.4432 48.0063 87.3897 48.0144C87.3629 48.0185 87.3432 48.0217 87.3313 48.0237C87.3254 48.0247 87.3214 48.0254 87.3194 48.0258C87.3186 48.0259 87.3181 48.026 87.3181 48.026L87.3185 48.0259L87.3194 48.0258Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M120.094 134.14L139.263 124.312"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M116.396 88.8919L134.982 79.4531"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M94.21 76.0481L112.796 66.6094"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M87.9824 66.513L106.568 57.0742"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M68.3271 56.3887L87.2047 47.1445"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M121.846 98.431L140.431 88.9922"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-green"
d="M87.6121 47.1875L70.3652 56.2848L88.3702 66.3297L94.2456 76.3746L117.936 90.21L120.969 94.3796L121.537 98.7387V133.422L137.268 125.272L140.68 122.05V90.9681L140.111 86.988L138.026 82.4394L135.183 79.786L113.388 67.2773L107.702 57.2324L91.4027 48.3247L87.6121 47.1875Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder MiddleMiddle */}
<motion.g
className="folder"
initial="initial"
custom={1}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-green"
d="M140.31 153.549C138.796 152.675 137.501 151.305 136.423 149.439C135.346 147.574 134.807 145.765 134.805 144.013V105.869C134.805 104.121 135.344 102.936 136.423 102.315C137.502 101.694 138.798 101.819 140.31 102.69L156.827 112.226L162.333 121.763L184.356 134.477C185.87 135.351 187.166 136.723 188.245 138.592C189.324 140.461 189.863 142.268 189.861 144.013V175.8C189.861 177.549 189.323 178.735 188.245 179.359C187.168 179.983 185.871 179.856 184.356 178.979L140.31 153.549Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M155.549 93.514C155.549 93.514 155.549 93.514 155.434 92.8308C155.045 91.8449 155.045 91.8578 155.045 91.8578L155.047 91.8575L155.049 91.8569L155.058 91.8554C155.064 91.8543 155.073 91.8527 155.084 91.8509C155.106 91.8472 155.136 91.8423 155.173 91.8367C155.248 91.8254 155.354 91.798 155.484 91.7838C155.743 91.7556 156.105 91.7281 156.52 91.7306C157.326 91.7356 158.675 91.9785 159.625 92.526L159.626 92.5265L176.346 102.18L181.852 111.716L203.671 124.313C205.347 125.281 206.744 126.778 207.882 128.749C209.02 130.72 209.617 132.677 209.615 134.609V166.395C209.615 168.449 208.508 170.163 207.154 170.948L206.276 169.432C207.077 168.968 207.863 167.838 207.863 166.395V134.607C207.865 133.048 207.385 131.392 206.365 129.625C205.345 127.858 204.149 126.611 202.796 125.83L180.57 112.998L175.064 103.462L158.751 94.0438L158.751 94.0436C158.189 93.7204 157.387 93.4335 156.694 93.4291C156.36 93.4271 156.066 93.4493 155.858 93.472C155.754 93.4834 155.673 93.4946 155.619 93.5027C155.592 93.5067 155.573 93.51 155.561 93.512C155.555 93.513 155.551 93.5137 155.549 93.514C155.548 93.5142 155.548 93.5143 155.548 93.5143L155.548 93.5142L155.549 93.514Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M188.323 179.629L207.493 169.801"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M184.626 134.38L203.212 124.941"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M162.439 121.536L181.025 112.098"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M156.212 112.001L174.798 102.562"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M136.557 101.877L155.434 92.6328"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M190.075 143.919L208.661 134.48"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-green"
d="M155.842 92.6758L138.595 101.773L156.6 111.818L162.475 121.863L186.166 135.698L189.198 139.868L189.767 144.227V178.91L205.498 170.761L208.909 167.539V136.456L208.34 132.476L206.256 127.928L203.413 125.274L181.617 112.766L175.931 102.721L159.632 93.8129L155.842 92.6758Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder MiddleBottom */}
<motion.g
className="folder"
initial="initial"
custom={2}
variants={folderVariants}
>
<g className="innder-folder">
<motion.path
className="folder-green"
d="M212.33 197.135C210.816 196.261 209.52 194.891 208.443 193.025C207.366 191.159 206.826 189.351 206.824 187.599V149.455C206.824 147.707 207.364 146.522 208.443 145.901C209.522 145.28 210.818 145.405 212.33 146.276L228.847 155.812L234.353 165.349L256.375 178.063C257.889 178.937 259.186 180.309 260.265 182.178C261.344 184.047 261.883 185.854 261.881 187.599V219.386C261.881 221.135 261.342 222.321 260.265 222.945C259.188 223.569 257.891 223.442 256.375 222.565L212.33 197.135Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M227.568 137.1C227.568 137.1 227.569 137.1 227.454 136.417C227.064 135.431 227.064 135.444 227.064 135.444L227.066 135.443L227.069 135.443L227.077 135.441C227.084 135.44 227.093 135.439 227.104 135.437C227.125 135.433 227.155 135.428 227.193 135.423C227.268 135.411 227.374 135.384 227.504 135.37C227.763 135.342 228.125 135.314 228.54 135.317C229.346 135.322 230.694 135.564 231.645 136.112L231.646 136.112L248.366 145.766L253.872 155.302L275.691 167.899C277.366 168.866 278.763 170.363 279.901 172.335C281.039 174.306 281.637 176.263 281.635 178.195V209.981C281.635 212.034 280.527 213.749 279.173 214.534L278.295 213.018C279.096 212.554 279.883 211.424 279.883 209.981V178.193C279.885 176.634 279.405 174.977 278.384 173.21C277.364 171.444 276.168 170.197 274.815 169.416L252.589 156.584L247.084 147.048L230.771 137.63L230.77 137.63C230.209 137.306 229.406 137.019 228.713 137.015C228.379 137.013 228.086 137.035 227.877 137.058C227.774 137.069 227.692 137.081 227.639 137.089C227.612 137.093 227.592 137.096 227.58 137.098C227.574 137.099 227.57 137.1 227.568 137.1C227.568 137.1 227.567 137.1 227.567 137.1L227.568 137.1L227.568 137.1Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M260.343 223.215L279.512 213.387"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M256.646 177.966L275.231 168.527"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M234.46 165.122L253.046 155.684"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M228.231 155.587L246.817 146.148"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M208.577 145.467L227.455 136.223"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M262.095 187.505L280.68 178.066"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-green"
d="M227.862 136.266L210.615 145.363L228.62 155.408L234.496 165.453L258.186 179.288L261.219 183.458L261.787 187.817V222.5L277.518 214.35L280.93 211.129V180.046L280.361 176.066L278.276 171.518L275.433 168.864L253.638 156.355L247.952 146.311L231.653 137.403L227.862 136.266Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder LeftTop */}
<motion.g
className="folder"
initial="initial"
custom={0}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-green"
d="M6.50566 158.096C4.9916 157.222 3.69594 155.852 2.61866 153.986C1.54139 152.12 1.00184 150.312 1 148.56V110.416C1 108.668 1.53955 107.483 2.61866 106.862C3.69777 106.241 4.99344 106.366 6.50566 107.237L23.0226 116.773L28.5283 126.309L50.5509 139.024C52.065 139.898 53.3616 141.27 54.4407 143.139C55.5198 145.008 56.0584 146.815 56.0566 148.56V180.347C56.0566 182.095 55.5179 183.282 54.4407 183.906C53.3634 184.53 52.0668 184.403 50.5509 183.526L6.50566 158.096Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M21.7442 98.0609C21.7442 98.0609 21.7446 98.0608 21.6295 97.3777C21.2402 96.3918 21.2402 96.4046 21.2402 96.4046L21.2419 96.4043L21.2448 96.4038L21.2531 96.4023C21.2597 96.4011 21.2685 96.3996 21.2793 96.3978C21.301 96.3941 21.331 96.3892 21.3685 96.3836C21.4434 96.3723 21.5494 96.3448 21.6794 96.3307C21.9385 96.3025 22.3003 96.2749 22.7158 96.2775C23.5217 96.2825 24.87 96.5254 25.8207 97.0729L25.8215 97.0734L42.5417 106.727L48.0474 116.263L69.8668 128.86C71.5418 129.827 72.939 131.324 74.0771 133.296C75.2151 135.267 75.8123 137.224 75.8103 139.156V170.942C75.8103 172.995 74.7028 174.71 73.3492 175.494L72.4712 173.979C73.2722 173.515 74.0588 172.385 74.0588 170.942V139.154C74.0604 137.595 73.5804 135.938 72.5602 134.171C71.5401 132.405 70.344 131.158 68.991 130.377L46.7652 117.545L41.2595 108.009L24.9465 98.5907L24.9462 98.5905C24.3847 98.2672 23.582 97.9803 22.8891 97.976C22.555 97.9739 22.2618 97.9962 22.0533 98.0189C21.9495 98.0302 21.868 98.0415 21.8145 98.0496C21.7877 98.0536 21.768 98.0568 21.7561 98.0589C21.7502 98.0599 21.7462 98.0606 21.7442 98.0609C21.7434 98.0611 21.7429 98.0612 21.7429 98.0612L21.7433 98.0611L21.7442 98.0609Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M54.5186 184.176L73.688 174.348"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M50.8213 138.927L69.4069 129.488"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M28.6348 126.083L47.2204 116.645"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M22.4072 116.548L40.9928 107.109"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M2.75195 106.424L21.6295 97.1797"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M56.2705 148.466L74.8561 139.027"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-green"
d="M22.036 97.2266L4.78906 106.324L22.7941 116.369L28.6694 126.414L52.3602 140.249L55.3926 144.419L55.9612 148.778V183.461L71.6919 175.311L75.1033 172.089V141.007L74.5348 137.027L72.45 132.478L69.6071 129.825L47.8115 117.316L42.1258 107.271L25.8265 98.3637L22.036 97.2266Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder LeftMiddle */}
<motion.g
className="folder"
initial="initial"
custom={1}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-red"
d="M74.7342 203.585C73.2201 202.711 71.9245 201.34 70.8472 199.475C69.7699 197.609 69.2304 195.8 69.2285 194.049V155.904C69.2285 154.156 69.7681 152.971 70.8472 152.35C71.9263 151.73 73.222 151.855 74.7342 152.726L91.2511 162.262L96.7568 171.798L118.779 184.512C120.293 185.387 121.59 186.758 122.669 188.627C123.748 190.496 124.287 192.303 124.285 194.049V225.835C124.285 227.584 123.746 228.77 122.669 229.394C121.592 230.018 120.295 229.892 118.779 229.014L74.7342 203.585Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M89.9727 143.549C89.9727 143.549 89.9731 143.549 89.858 142.866C89.4688 141.88 89.4688 141.893 89.4688 141.893L89.4704 141.893L89.4733 141.892L89.4816 141.891C89.4882 141.889 89.497 141.888 89.5079 141.886C89.5295 141.882 89.5595 141.878 89.597 141.872C89.6719 141.861 89.7779 141.833 89.9079 141.819C90.1671 141.791 90.5289 141.763 90.9443 141.766C91.7502 141.771 93.0986 142.014 94.0492 142.561L94.05 142.562L110.77 152.215L116.276 161.751L138.095 174.349C139.77 175.316 141.167 176.813 142.306 178.784C143.444 180.755 144.041 182.712 144.039 184.644V216.43C144.039 218.484 142.931 220.199 141.578 220.983L140.7 219.467C141.501 219.003 142.287 217.873 142.287 216.43V184.642C142.289 183.084 141.809 181.427 140.789 179.66C139.769 177.893 138.573 176.647 137.22 175.865L114.994 163.033L109.488 153.497L93.1751 144.079L93.1747 144.079C92.6132 143.756 91.8105 143.469 91.1176 143.464C90.7835 143.462 90.4903 143.484 90.2818 143.507C90.178 143.519 90.0966 143.53 90.043 143.538C90.0162 143.542 89.9966 143.545 89.9847 143.547C89.9787 143.548 89.9747 143.549 89.9727 143.549C89.9719 143.549 89.9714 143.549 89.9714 143.549L89.9718 143.549L89.9727 143.549Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M122.747 229.664L141.917 219.836"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M119.05 184.415L137.635 174.977"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M96.8633 171.572L115.449 162.133"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M90.6357 162.036L109.221 152.598"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M70.9805 151.912L89.858 142.668"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M124.499 193.954L143.085 184.516"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-red"
d="M90.2655 142.715L73.0186 151.812L91.0236 161.857L96.8989 171.902L120.59 185.737L123.622 189.907L124.191 194.266V228.949L139.921 220.8L143.333 217.578V186.495L142.764 182.515L140.679 177.967L137.837 175.313L116.041 162.805L110.355 152.76L94.056 143.852L90.2655 142.715Z"
fill="rgba(241, 245, 249, 0.3)"
/>
<motion.g
className="red-glow"
initial="initial"
variants={redGlowVariants}
custom={3}
>
<motion.g
filter={`url(#${redGlow3Id})`}
animate="pulse"
variants={redGlowPulseVariants}
id="Ellipse 25_3"
custom={2}
>
<ellipse
cx="6.24937"
cy="6.58237"
rx="6.24937"
ry="6.58237"
transform="matrix(0.866025 0.5 0 1 90.1758 182.887)"
fill="#F87171"
/>
</motion.g>
</motion.g>
</motion.g>
{/* Folder LeftBottom */}
<motion.g
className="folder"
initial="initial"
custom={2}
variants={folderVariants}
>
<g className="inner-folder">
<motion.path
className="folder-green"
d="M146.753 247.174C145.239 246.3 143.943 244.93 142.866 243.064C141.788 241.199 141.249 239.39 141.247 237.638V199.494C141.247 197.746 141.787 196.561 142.866 195.94C143.945 195.319 145.241 195.444 146.753 196.315L163.27 205.851L168.775 215.388L190.798 228.102C192.312 228.976 193.609 230.348 194.688 232.217C195.767 234.086 196.305 235.893 196.304 237.638V269.425C196.304 271.174 195.765 272.36 194.688 272.984C193.61 273.608 192.314 273.481 190.798 272.604L146.753 247.174Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M161.991 187.139C161.991 187.139 161.992 187.139 161.877 186.456C161.487 185.47 161.487 185.483 161.487 185.483L161.489 185.482L161.492 185.482L161.5 185.48C161.507 185.479 161.516 185.478 161.526 185.476C161.548 185.472 161.578 185.467 161.616 185.462C161.691 185.45 161.796 185.423 161.926 185.409C162.186 185.381 162.547 185.353 162.963 185.356C163.769 185.361 165.117 185.603 166.068 186.151L166.069 186.151L182.789 195.805L188.294 205.341L210.114 217.938C211.789 218.906 213.186 220.403 214.324 222.374C215.462 224.345 216.059 226.302 216.057 228.234V260.02C216.057 262.074 214.95 263.788 213.596 264.573L212.718 263.057C213.519 262.593 214.306 261.463 214.306 260.02V228.232C214.307 226.673 213.827 225.017 212.807 223.25C211.787 221.483 210.591 220.236 209.238 219.455L187.012 206.623L181.507 197.087L165.194 187.669L165.193 187.669C164.632 187.345 163.829 187.058 163.136 187.054C162.802 187.052 162.509 187.074 162.3 187.097C162.197 187.108 162.115 187.12 162.062 187.128C162.035 187.132 162.015 187.135 162.003 187.137C161.997 187.138 161.993 187.139 161.991 187.139C161.99 187.139 161.99 187.139 161.99 187.139L161.99 187.139L161.991 187.139Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M194.766 273.254L213.935 263.426"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M191.068 228.005L209.654 218.566"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M168.882 215.161L187.467 205.723"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M162.654 205.626L181.24 196.188"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
<path
d="M142.999 195.502L161.877 186.258"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.7"
/>
<path
d="M196.518 237.544L215.103 228.105"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.7"
/>
</g>
<motion.path
className="folder-green"
d="M162.285 186.305L145.038 195.402L163.043 205.447L168.918 215.492L192.609 229.327L195.642 233.497L196.21 237.856V272.539L211.941 264.39L215.352 261.168V230.085L214.784 226.105L212.699 221.557L209.856 218.903L188.061 206.394L182.375 196.35L166.076 187.442L162.285 186.305Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
</g>
{/* Filter definitions */}
<defs>
<filter
id={redGlow1Id}
x="152.157"
y="40.6728"
width="20.0782"
height="23.1075"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="2.4214" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.972549 0 0 0 0 0.443137 0 0 0 0 0.443137 0 0 0 0.85 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_3513_375"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_3513_375"
result="shape"
/>
</filter>
<filter
id={redGlow2Id}
x="293.157"
y="128.364"
width="20.0782"
height="23.6778"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="2.4214" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.972549 0 0 0 0 0.443137 0 0 0 0 0.443137 0 0 0 0.85 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_3513_375"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_3513_375"
result="shape"
/>
</filter>
<filter
id={redGlow3Id}
x="85.333"
y="180.462"
width="20.5098"
height="24.2637"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feColorMatrix
in="SourceAlpha"
type="matrix"
values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha"
/>
<feOffset />
<feGaussianBlur stdDeviation="2.4214" />
<feComposite in2="hardAlpha" operator="out" />
<feColorMatrix
type="matrix"
values="0 0 0 0 0.972549 0 0 0 0 0.443137 0 0 0 0 0.443137 0 0 0 0.85 0"
/>
<feBlend
mode="normal"
in2="BackgroundImageFix"
result="effect1_dropShadow_3513_375"
/>
<feBlend
mode="normal"
in="SourceGraphic"
in2="effect1_dropShadow_3513_375"
result="shape"
/>
</filter>
</defs>
</motion.svg>
);
}

637
nx-dev/ui-enterprise/src/lib/animations/ownership.tsx Normal file
View File

@ -0,0 +1,637 @@
import { ReactElement, useEffect, useState } from 'react';
import {
motion,
stagger,
useAnimate,
useInView,
useReducedMotion,
Variants,
} from 'framer-motion';
import { AnimationProps } from './animation.model';
/**
* Ownership animation.
*
* @param {Object} props - The properties object.
* @param {boolean} [props.autoPlay=true] - Determines whether the animation should start automatically.
* @param {string} [props.className=''] - Additional class names to be applied to the SVG container.
* @param {number} [props.inViewThreshold=0.3] - The intersection threshold to trigger animations.
* @param {boolean} [props.once=false] - If true, the animation is triggered only once when the element enters the viewport.
* @param {number} [props.speed=1] - Controls the speed of the animation; higher numbers make it faster.
* @return {ReactElement} React component rendering the animated SVG structure.
*/
export function OwnershipAnimation({
autoPlay = true,
className = '',
inViewThreshold = 0.3,
once = false,
speed = 1,
}: AnimationProps): ReactElement {
const [scope, animate] = useAnimate();
const isInView = useInView(scope, {
amount: inViewThreshold,
once,
});
const getDuration = (base: number) => base / speed;
const willChangeStyle = {
willChange: 'opacity, transform, fill, pathLength',
};
const prefersReducedMotion = useReducedMotion();
const [animationsCompleted, setAnimationsCompleted] = useState(false);
// Animation sequence
useEffect(() => {
if (!isInView || animationsCompleted || !autoPlay) return;
if (prefersReducedMotion) {
// Single animate call with duration 0 for immediate final state
const controls = animate(
[
['.folder', { opacity: 1, y: 0 }],
['.folder-green', { fill: 'rgba(52, 211, 153, 0.3)' }],
['.folder-red', { fill: 'rgba(248, 113, 113, 0.3)' }],
['.zone-border', { pathLength: 1, opacity: 0.4 }],
['.zone-fill', { opacity: 0.05 }],
['.team-title', { opacity: 1, y: 0 }],
],
{
duration: 0,
onComplete: () => setAnimationsCompleted(true),
onError: (error: any) =>
console.error('Applying final animation states failed:', error),
}
);
return () => controls.stop();
}
// Animation starts
const controls = animate(
[
// 1. Folders slide in from bottom (with staggered delay)
[
'.folder',
{ opacity: 1, y: 0 },
{
duration: getDuration(0.8),
ease: 'easeOut',
delay: stagger(getDuration(0.2)),
},
],
// 2. Color transitions for folders
[
'.folder-green',
{ fill: 'rgba(52, 211, 153, 0.3)' },
{
duration: getDuration(1.2),
ease: 'easeInOut',
delay: stagger(getDuration(0.2)),
at: '<',
},
],
[
'.folder-red',
{ fill: 'rgba(248, 113, 113, 0.3)' },
{
duration: getDuration(1.2),
ease: 'easeInOut',
delay: stagger(getDuration(0.2)),
at: '<',
},
],
// 3. Team zone borders (starts after folders finish)
[
'.zone-border',
{ pathLength: 1, opacity: 0.4 },
{
duration: getDuration(1.5),
ease: 'easeInOut',
opacity: { duration: getDuration(0.5) },
},
],
// 4. Zone fill rectangles (starts after borders)
[
'.zone-fill',
{ opacity: 0.05 },
{ duration: getDuration(0.8), ease: 'easeIn' },
],
// 5. Team titles (starts after fill)
[
'.team-title',
{ opacity: 1, y: 0 },
{ duration: getDuration(0.8), ease: 'easeOut' },
],
],
{
onComplete: () => setAnimationsCompleted(true),
}
);
return () => controls.cancel();
}, [isInView, prefersReducedMotion, autoPlay, animationsCompleted, speed]);
const folderVariants: Variants = {
initial: {
opacity: 0,
y: 20,
},
};
const zonePathVariants: Variants = {
initial: {
pathLength: 0,
opacity: 0,
},
};
const zoneFillVariants: Variants = {
initial: {
opacity: 0,
},
};
const titleVariants: Variants = {
initial: {
opacity: 0,
y: -15,
},
};
return (
<motion.svg
ref={scope}
width="416"
height="397"
viewBox="0 0 416 397"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
style={willChangeStyle}
>
<g id="Ownership">
<g id="Container">
{/* Team 2 - Green folders */}
<g id="Team_2">
{/* Folder 1 */}
<motion.g
className="folder"
initial="initial"
custom={0}
variants={folderVariants}
>
<g id="Outline_2">
<motion.path
className="folder-green"
d="M201.729 140.3c-1.036-.598-1.922-1.536-2.66-2.813-.737-1.276-1.106-2.514-1.107-3.712v-26.101c0-1.196.369-2.007 1.107-2.431.739-.425 1.625-.34 2.66.256l11.302 6.525 3.767 6.525 15.069 8.701c1.036.598 1.923 1.536 2.662 2.815.738 1.279 1.107 2.516 1.106 3.71v21.75c0 1.196-.369 2.008-1.106 2.435-.737.427-1.624.34-2.662-.26l-30.138-17.4Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M212.156 99.2204s.001 0-.078-.4675c-.266-.6746-.266-.6658-.266-.6658l.001-.0002.002-.0004.005-.001a.72026.72026 0 0 0 .018-.0031c.015-.0025.036-.0058.061-.0097.052-.0078.124-.0265.213-.0362.177-.0193.425-.0382.709-.0364.552.0034 1.474.1696 2.125.5443v.0003l11.441 6.6053 3.767 6.525 14.93 8.62c1.147.662 2.103 1.686 2.881 3.035.779 1.349 1.188 2.688 1.186 4.01v21.749c0 1.406-.758 2.579-1.684 3.116l-.601-1.037c.549-.318 1.087-1.091 1.087-2.079v-21.751c.001-1.066-.328-2.2-1.026-3.409-.698-1.209-1.516-2.062-2.442-2.596l-15.208-8.78-3.767-6.526-11.162-6.4441-.001-.0001c-.384-.2212-.933-.4175-1.407-.4205-.229-.0014-.429.0138-.572.0294-.071.0077-.127.0154-.164.021-.018.0027-.031.0049-.039.0063-.005.0007-.007.0012-.009.0014 0 .0001-.001.0002-.001.0002l.001-.0001v-.0001Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M234.582 158.147L247.699 151.422"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.2"
/>
<path
d="M199.161 104.943L212.078 98.6172"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.2"
/>
<path
d="M232.053 127.185L244.77 120.727"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
<path
d="M216.872 118.396L229.589 111.938"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
<path
d="M212.61 111.869L225.328 105.41"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
<path
d="M235.781 133.709L248.499 127.25"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
</g>
<motion.path
className="folder-green"
d="m212.357 98.6484-11.801 6.2246 12.32 6.874 4.02 6.873 16.21 9.467 2.075 2.853.389 2.982v23.733l10.764-5.577 2.334-2.204v-21.269l-.389-2.723-1.426-3.112-1.945-1.816-14.914-8.559-3.891-6.873-11.152-6.0955-2.594-.7781Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder 2 */}
<motion.g
className="folder"
initial="initial"
custom={1}
variants={folderVariants}
>
<g id="Outline_2_2">
<motion.path
className="folder-green"
d="M248.982 171.136c-1.036-.598-1.922-1.536-2.66-2.813-.737-1.276-1.106-2.514-1.107-3.712V138.51c0-1.196.369-2.007 1.107-2.431.739-.425 1.625-.34 2.66.256l11.302 6.525 3.767 6.525 15.069 8.7c1.036.599 1.923 1.537 2.662 2.816.738 1.279 1.107 2.516 1.105 3.71v21.75c0 1.196-.368 2.008-1.105 2.435-.737.427-1.625.34-2.662-.26l-30.138-17.4Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.3"
/>
<path
id="Vector (Stroke)_2"
fillRule="evenodd"
clipRule="evenodd"
d="M259.408 130.056s.001 0-.078-.467c-.267-.675-.267-.666-.267-.666h.002l.002-.001.005-.001c.005 0 .011-.001.018-.003.015-.002.036-.006.061-.009.052-.008.124-.027.213-.037.177-.019.425-.038.709-.036.552.003 1.474.17 2.125.544v.001l11.441 6.605 3.767 6.525 14.93 8.62c1.147.662 2.103 1.686 2.881 3.035.779 1.349 1.188 2.688 1.186 4.01v21.749c0 1.406-.758 2.579-1.684 3.116l-.601-1.038c.548-.317 1.087-1.09 1.087-2.078v-21.751c.001-1.066-.328-2.2-1.026-3.409-.698-1.209-1.516-2.062-2.442-2.596l-15.208-8.781-3.767-6.525-11.162-6.444h-.001c-.384-.221-.933-.418-1.407-.421-.229-.001-.43.014-.572.03-.071.007-.127.015-.164.021-.018.002-.031.005-.04.006-.004.001-.006.001-.008.001l-.001.001.001-.001Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
id="Vector 52_2"
d="M281.835 188.983L294.952 182.258"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.2"
/>
<path
id="Vector 53_2"
d="M279.306 158.021L292.023 151.562"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.2"
/>
<path
id="Vector 55_2"
d="M264.124 149.232L276.841 142.773"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.2"
/>
<path
id="Vector 56_2"
d="M259.863 142.705L272.581 136.246"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.2"
/>
<path
id="Vector 57_2"
d="M246.413 135.778L259.33 129.453"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.2"
/>
<path
id="Vector 54_2"
d="M283.034 164.544L295.751 158.086"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.2"
/>
</g>
<motion.path
className="folder-green"
d="m259.609 129.484-11.801 6.225 12.32 6.873 4.02 6.874 16.21 9.467 2.075 2.853.389 2.982v23.733l10.764-5.577 2.334-2.204v-21.269l-.389-2.723-1.426-3.112-1.945-1.816-14.914-8.559-3.891-6.873-11.152-6.096-2.594-.778Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder 3 */}
<motion.g
className="folder"
initial="initial"
custom={2}
variants={folderVariants}
>
<g id="Outline_2_3">
<motion.path
className="folder-green"
d="M295.642 201.249c-1.036-.598-1.922-1.536-2.659-2.812-.738-1.277-1.107-2.515-1.108-3.713v-26.101c0-1.196.369-2.006 1.108-2.431.738-.425 1.625-.339 2.659.256l11.302 6.526 3.767 6.525 15.069 8.7c1.036.598 1.924 1.536 2.662 2.815s1.107 2.516 1.106 3.71v21.75c0 1.196-.369 2.008-1.106 2.435-.737.427-1.624.341-2.662-.26l-30.138-17.4Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M306.069 160.17s.001 0-.078-.468c-.266-.674-.266-.666-.266-.666h.003l.005-.001c.005-.001.011-.002.018-.003.015-.003.036-.006.061-.01.052-.008.124-.027.213-.036.177-.02.425-.038.709-.037.552.004 1.474.17 2.125.545l11.441 6.605 3.767 6.525 14.93 8.62c1.147.662 2.103 1.686 2.881 3.035.779 1.349 1.188 2.688 1.186 4.01v21.75c0 1.405-.757 2.578-1.684 3.115l-.6-1.037c.548-.318 1.086-1.091 1.086-2.078v-21.751c.001-1.067-.327-2.201-1.026-3.41-.698-1.209-1.516-2.061-2.442-2.596l-15.208-8.78-3.767-6.525-11.162-6.445h-.001c-.384-.221-.933-.418-1.407-.42-.229-.002-.429.013-.572.029-.071.008-.127.015-.163.021-.019.003-.032.005-.04.006-.004.001-.007.001-.009.002Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
id="Vector 52_3"
d="M328.495 219.096L341.612 212.371"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.2"
/>
<path
id="Vector 53_3"
d="M325.966 188.134L338.683 181.676"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
<path
id="Vector 55_3"
d="M310.784 179.345L323.501 172.887"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
<path
id="Vector 56_3"
d="M306.522 172.818L319.24 166.359"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
<path
id="Vector 57_3"
d="M293.073 165.892L305.99 159.566"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.2"
/>
<path
id="Vector 54_3"
d="M329.694 194.658L342.412 188.199"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.2"
/>
</g>
<motion.path
className="folder-green"
d="m306.269 159.598-11.801 6.224 12.32 6.874 4.02 6.873 16.21 9.467 2.075 2.853.389 2.983v23.732l10.764-5.577 2.335-2.204v-21.268l-.389-2.724-1.427-3.112-1.945-1.816-14.914-8.559-3.89-6.873-11.153-6.095-2.594-.778Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Team 2 Zone - with drawing animation */}
<g id="Zone">
<motion.rect
className="zone-fill"
width="197.45"
height="96.4706"
rx="4.78977"
transform="matrix(0.866025 0.5 0 1 185 61)"
fill="rgba(52, 211, 153, 0.3)"
initial="initial"
variants={zoneFillVariants}
/>
<motion.rect
className="zone-border"
x="-0.29629"
y="-0.51319"
width="198.135"
height="97.1548"
rx="5.1319"
transform="matrix(0.866025 0.5 0 1 184.96 61.1481)"
stroke="rgba(52, 211, 153, 1)"
strokeOpacity="0.4"
strokeWidth="0.7"
initial="initial"
variants={zonePathVariants}
/>
</g>
{/* Team 2 Title - with slide-in and fade-in animation */}
<motion.path
className="team-title"
d="M188.005 48.7347V40.284L185.468 38.8193V37.6853L191.547 41.1952V42.3291L189.01 40.8644V49.3152L188.005 48.7347ZM195.05 52.8022V43.2175L200.1 46.1334V47.2674L196.055 44.9319V48.0233L199.96 50.2778V51.3847L196.055 49.1303V52.2487L200.194 54.6381V55.7721L195.05 52.8022ZM203.299 57.5649L205.824 49.4382L207.18 50.2211L209.706 61.2638L208.63 60.6428L206.502 50.8826L204.375 58.1859L203.299 57.5649ZM204.573 55.5737L204.924 54.6422L208.081 56.4647L208.431 57.8011L204.573 55.5737ZM215.056 63.2726L213.489 54.9433L213.582 54.9973V63.5021L212.577 62.9216V53.3369L214.097 54.2144L215.734 63.0431L215.266 62.7731L216.903 55.8343L218.423 56.7118V66.2965L217.417 65.716V57.2113L217.511 57.2653L215.944 63.7856L215.056 63.2726ZM230.572 73.311C230.572 72.636 230.662 72.0803 230.841 71.6438C231.028 71.2028 231.351 70.8676 231.811 70.6381C232.279 70.4131 232.926 70.2871 233.752 70.2601C234.134 70.2466 234.442 70.2083 234.676 70.1454C234.909 70.0824 235.081 69.9699 235.19 69.8079C235.299 69.6459 235.354 69.4029 235.354 69.0789C235.354 68.7459 235.291 68.4219 235.167 68.1069C235.042 67.7829 234.855 67.4769 234.605 67.1889C234.364 66.9055 234.06 66.658 233.693 66.4465C233.109 66.109 232.645 66.0167 232.302 66.1697C231.967 66.3272 231.757 66.7052 231.671 67.3037L230.619 66.6152C230.712 65.7332 231.024 65.1663 231.554 64.9143C232.084 64.6623 232.797 64.795 233.693 65.3125C234.262 65.641 234.75 66.0392 235.155 66.5072C235.56 66.9752 235.868 67.4814 236.078 68.0259C236.297 68.5659 236.406 69.1104 236.406 69.6594C236.406 70.1454 236.336 70.5278 236.195 70.8068C236.055 71.0768 235.817 71.2681 235.482 71.3806C235.155 71.4976 234.703 71.5651 234.126 71.5831C233.627 71.6011 233.206 71.6686 232.863 71.7856C232.528 71.907 232.271 72.0645 232.092 72.258C231.92 72.447 231.827 72.6585 231.811 72.8925L236.417 75.5519V76.6859L230.572 73.311Z"
fill="#94A3B8"
initial="initial"
variants={titleVariants}
/>
</g>
{/* Team 1 - Red folders */}
<g id="Team_1">
{/* Folder 1 */}
<motion.g
className="folder"
initial="initial"
custom={0}
variants={folderVariants}
>
<g id="Outline_2_4">
<motion.path
className="folder-red"
d="M80.2421 222.957c-1.2536-.724-2.3263-1.859-3.2183-3.403-.892-1.545-1.3387-3.043-1.3402-4.493v-31.582c0-1.448.4467-2.429 1.3402-2.943.8935-.514 1.9662-.41 3.2183.311l13.6756 7.895 4.5585 7.896 18.2338 10.527c1.254.724 2.327 1.86 3.221 3.407.893 1.548 1.339 3.044 1.338 4.489v26.319c0 1.447-.446 2.429-1.338 2.946-.892.517-1.966.412-3.221-.315l-36.4679-21.054Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.3"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M92.8587 173.25s.0003 0-.095-.565c-.3223-.817-.3223-.806-.3223-.806h.0014l.0024-.001.0069-.001c.0054-.001.0127-.002.0217-.004.0179-.003.0427-.007.0738-.012.062-.009.1498-.032.2574-.043.2146-.024.5141-.047.8581-.044.6673.004 1.7837.205 2.5708.658l.0007.001 13.8434 7.992 4.559 7.896 18.066 10.43c1.387.801 2.543 2.04 3.486 3.673.942 1.632 1.436 3.252 1.435 4.851v26.318c0 1.701-.917 3.121-2.038 3.77l-.727-1.255c.663-.384 1.315-1.32 1.315-2.515v-26.319c.001-1.29-.397-2.662-1.241-4.125-.845-1.463-1.835-2.495-2.955-3.142l-18.403-10.625-4.558-7.895-13.5069-7.798h-.0003c-.4649-.268-1.1295-.506-1.7032-.509-.2766-.002-.5194.017-.692.035-.0859.01-.1534.019-.1977.026-.0222.003-.0385.006-.0483.007-.005.001-.0083.002-.0099.002h-.0011.0011Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
id="Vector 52_4"
d="M119.995 244.551L135.867 236.414"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.4"
/>
<path
id="Vector 53_4"
d="M116.935 207.085L132.323 199.27"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.4"
/>
<path
id="Vector 55_4"
d="M98.5654 196.452L113.954 188.637"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.4"
/>
<path
id="Vector 56_4"
d="M93.4082 188.557L108.797 180.742"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.4"
/>
<path
id="Vector 57_4"
d="M77.1348 180.177L92.7648 172.523"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.4"
/>
<path
id="Vector 54_4"
d="M121.446 214.983L136.835 207.168"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.5"
strokeWidth="1.4"
/>
</g>
<motion.path
className="folder-red"
d="m93.1022 172.559-14.2799 7.532 14.9076 8.317 4.8646 8.317L118.21 208.18l2.511 3.452.47 3.609v28.717l13.025-6.747 2.824-2.668v-25.735l-.47-3.296-1.726-3.766-2.354-2.197-18.046-10.357-4.708-8.317-13.4954-7.375-3.1384-.941Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder 2 */}
<motion.g
className="folder"
initial="initial"
custom={1}
variants={folderVariants}
>
<g id="Outline_2_5">
<motion.path
className="folder-red"
d="M137.42 260.273c-1.254-.724-2.327-1.858-3.218-3.403-.892-1.545-1.339-3.042-1.341-4.493v-31.582c0-1.448.447-2.428 1.341-2.942.893-.515 1.966-.411 3.218.31l13.675 7.896 4.559 7.895 18.234 10.528c1.254.724 2.327 1.859 3.221 3.407.893 1.547 1.339 3.043 1.338 4.488v26.319c0 1.448-.446 2.43-1.338 2.946-.892.517-1.966.412-3.221-.314l-36.468-21.055Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.61135"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M150.037 210.567s.001 0-.095-.566c-.322-.816-.322-.806-.322-.806h.004l.007-.002c.005-.001.013-.002.021-.003.018-.003.043-.008.074-.012.062-.01.15-.032.258-.044.214-.023.514-.046.858-.044.667.004 1.783.205 2.571.659l13.844 7.993 4.559 7.895 18.065 10.431c1.387.8 2.544 2.04 3.486 3.672.943 1.632 1.437 3.253 1.436 4.852v26.318c0 1.7-.917 3.12-2.038 3.769l-.727-1.255c.663-.384 1.314-1.32 1.314-2.514v-26.32c.002-1.29-.396-2.662-1.24-4.125-.845-1.463-1.835-2.495-2.956-3.142l-18.402-10.624-4.559-7.896-13.506-7.798c-.465-.268-1.13-.505-1.704-.509-.276-.001-.519.017-.692.036-.086.009-.153.019-.197.025-.023.004-.039.006-.049.008-.005.001-.008.001-.01.002h-.001.001Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M177.173 281.868L193.045 273.73"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.4"
/>
<path
d="M174.112 244.401L189.501 236.586"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
<path
d="M155.742 233.768L171.131 225.953"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
<path
d="M150.586 225.874L165.974 218.059"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
<path
d="M134.312 217.494L149.942 209.84"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.4"
/>
<path
d="M178.624 252.299L194.012 244.484"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
</g>
<motion.path
className="folder-red"
d="m150.279 209.875-14.28 7.532 14.908 8.317 4.864 8.317 19.616 11.455 2.51 3.453.471 3.609v28.717l13.025-6.748 2.824-2.668v-25.735l-.471-3.295-1.726-3.766-2.354-2.197-18.046-10.357-4.707-8.317-13.496-7.375-3.138-.942Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Folder 3 */}
<motion.g
className="folder"
initial="initial"
custom={2}
variants={folderVariants}
>
<g id="Outline_2_6">
<motion.path
className="folder-red"
d="M193.881 296.707c-1.254-.724-2.327-1.859-3.219-3.403-.891-1.545-1.338-3.043-1.34-4.493v-31.582c0-1.448.447-2.429 1.34-2.943.894-.514 1.967-.41 3.219.311l13.675 7.895 4.559 7.896 18.234 10.527c1.254.724 2.327 1.86 3.221 3.407.893 1.548 1.339 3.044 1.337 4.489v26.319c0 1.447-.445 2.429-1.337 2.946-.892.517-1.966.412-3.221-.315l-36.468-21.054Z"
fill="rgba(241, 245, 249, 0.3)"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.6"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M206.498 247s.001 0-.095-.565c-.322-.817-.322-.806-.322-.806h.001l.003-.001.007-.001c.005-.001.012-.002.021-.004.018-.003.043-.007.074-.012.062-.009.15-.032.258-.043.214-.024.514-.047.858-.044.667.004 1.783.205 2.571.658v.001l13.844 7.992 4.559 7.896 18.065 10.43c1.387.801 2.544 2.04 3.486 3.673.943 1.632 1.437 3.252 1.435 4.851v26.318c0 1.701-.916 3.121-2.037 3.77l-.727-1.255c.663-.384 1.314-1.32 1.314-2.515v-26.319c.002-1.29-.396-2.662-1.241-4.125-.844-1.463-1.834-2.495-2.955-3.142l-18.402-10.625-4.559-7.895-13.506-7.798h-.001c-.464-.268-1.129-.506-1.703-.509-.276-.002-.519.017-.692.035-.086.01-.153.019-.197.026-.023.003-.039.006-.049.007-.005.001-.008.002-.01.002h-.001.001Z"
fill="rgba(241, 245, 249, 1)"
/>
<path
d="M233.634 318.301L249.506 310.164"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.4"
/>
<path
d="M230.573 280.835L245.962 273.02"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
<path
d="M212.203 270.202L227.591 262.387"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
<path
d="M207.047 262.307L222.435 254.492"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
<path
d="M190.772 253.927L206.403 246.273"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.4"
/>
<path
d="M235.085 288.733L250.473 280.918"
stroke="rgba(241, 245, 249, 0.5)"
strokeWidth="1.4"
/>
</g>
<motion.path
className="folder-red"
d="m206.74 246.309-14.28 7.532 14.908 8.317 4.864 8.317 19.615 11.455 2.511 3.452.471 3.609v28.717l13.025-6.747 2.824-2.668v-25.735l-.471-3.296-1.726-3.766-2.354-2.197-18.046-10.357-4.707-8.317-13.496-7.375-3.138-.941Z"
fill="rgba(241, 245, 249, 0.3)"
/>
</motion.g>
{/* Team 1 Zone - with drawing animation */}
<g id="Zone_2">
<motion.rect
className="zone-fill"
width="239.75"
height="117.561"
rx="6.20978"
transform="matrix(0.866025 0.5 0 1 60 127)"
fill="rgba(248, 113, 113, 1)"
initial="initial"
variants={zoneFillVariants}
/>
<motion.rect
className="zone-border"
x="-0.358522"
y="-0.620978"
width="239.75"
height="117.561"
rx="6.20978"
transform="matrix(0.866025 0.5 0 1 59.952 127.179)"
stroke="rgba(248, 113, 113, 1)"
strokeWidth="0.7"
initial="initial"
variants={zonePathVariants}
/>
</g>
{/* Team 1 Title - with slide-in and fade-in animation */}
<motion.path
className="team-title"
d="M64.0046 119.735V111.284L61.4676 109.819V108.685L67.5469 112.195V113.329L65.01 111.864V120.315L64.0046 119.735ZM71.0497 123.802V114.217L76.1002 117.133V118.267L72.0551 115.932V119.023L75.9599 121.278V122.385L72.0551 120.13V123.249L76.1937 125.638V126.772L71.0497 123.802ZM79.2989 128.565L81.8242 120.438L83.1804 121.221L85.7056 132.264L84.63 131.643L82.5023 121.883L80.3745 129.186L79.2989 128.565ZM80.5733 126.574L80.924 125.642L84.0806 127.465L84.4313 128.801L80.5733 126.574ZM91.0555 134.273L89.4889 125.943L89.5824 125.997V134.502L88.577 133.922V124.337L90.0968 125.214L91.7336 134.043L91.2659 133.773L92.9027 126.834L94.4225 127.712V137.296L93.4171 136.716V128.211L93.5106 128.265L91.944 134.786L91.0555 134.273ZM109.308 145.89V138.79L107.133 137.534V136.535L108.255 137.183C108.552 137.354 108.789 137.442 108.969 137.446C109.156 137.455 109.288 137.374 109.366 137.203C109.452 137.037 109.495 136.774 109.495 136.414L110.313 136.886V146.471L109.308 145.89ZM106.689 144.379V143.245L112.301 146.484V147.618L106.689 144.379Z"
fill="#94A3B8"
initial="initial"
variants={titleVariants}
/>
</g>
</g>
</g>
</motion.svg>
);
}

344
nx-dev/ui-enterprise/src/lib/animations/visibility.tsx Normal file
View File

@ -0,0 +1,344 @@
import {
motion,
useAnimation,
useInView,
useReducedMotion,
Variants,
} from 'framer-motion';
import {
ReactElement,
useCallback,
useEffect,
useId,
useRef,
useState,
} from 'react';
import { AnimationProps } from './animation.model';
/**
* Visibility animation.
*
* @param {Object} props - Animation properties for configuring the visibility animation.
* @param {boolean} [props.autoPlay=true] - Determines whether the animation starts automatically when in view.
* @param {string} [props.className=''] - Additional class names for styling the component.
* @param {number} [props.inViewThreshold=0.3] - Percentage of the component's visibility in the viewport required to trigger the animation (range: 0 to 1).
* @param {boolean} [props.once=false] - If true, the animation will play only the first time the component enters the viewport.
* @param {number} [props.speed=1] - Speed multiplier for the animation, where values greater than 1 speed it up and less than 1 slow it down.
*
* @return {ReactElement} A React SVG element with motion animations applied to visualize visibility effects.
*/
export function VisibilityAnimation({
autoPlay = true,
className = '',
inViewThreshold = 0.3,
once = false,
speed = 1,
}: AnimationProps): ReactElement {
// Generate unique IDs for SVG elements to prevent conflicts when multiple instances exist
const uniqueId = useId().replace(/:/g, '');
const networkId = `network-${uniqueId}`;
const containerId = `container-${uniqueId}`;
const bgBlurClipPathId = `bgblur-clip-path-${uniqueId}`;
const filterBlurId = `filter-blur-${uniqueId}`;
const radialGradientId = `radial-gradient-${uniqueId}`;
const controls = useAnimation();
const prefersReducedMotion = useReducedMotion();
const [hasAnimated, setHasAnimated] = useState(false);
const ref = useRef(null);
const inView = useInView(ref, {
amount: inViewThreshold,
once,
});
// Adjust animation timing based on speed
const adjustTiming = useCallback((time: number) => time / speed, [speed]);
const networkVariants: Variants = {
hidden: {
pathLength: 0,
opacity: 0,
},
visible: {
pathLength: 1,
opacity: 1,
transition: {
pathLength: {
delay: adjustTiming(1.8),
duration: adjustTiming(1.5),
ease: 'easeInOut',
},
opacity: {
delay: adjustTiming(1.8),
duration: adjustTiming(0.6),
},
},
},
};
const indicatorVariants: Variants = {
hidden: { opacity: 0.2 },
visible: {
opacity: 1,
transition: {
repeat: Infinity,
repeatType: 'reverse',
duration: adjustTiming(1.6),
ease: 'easeInOut',
},
},
};
const iconGroupVariants: Variants = {
hidden: {},
visible: {
transition: {
staggerChildren: adjustTiming(0.5),
delayChildren: adjustTiming(0.4),
},
},
};
const iconVariants: Variants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: { duration: adjustTiming(0.5) },
},
};
// Effect to control animation playback
useEffect(() => {
if (prefersReducedMotion) {
controls.set('visible');
setHasAnimated(true);
return;
}
const shouldPlay = autoPlay && inView && !hasAnimated;
if (!shouldPlay) return;
controls.start('visible').then(() => setHasAnimated(true));
return () => controls.set('hidden');
}, [autoPlay, inView, controls, hasAnimated]);
return (
<motion.svg
ref={ref}
width="553"
height="427"
viewBox="0 0 553 427"
preserveAspectRatio="xMidYMid meet"
fill="none"
xmlns="http://www.w3.org/2000/svg"
initial="hidden"
animate={controls}
className={className}
aria-label="Animated visibility visualization"
role="img"
style={{ aspectRatio: `${553 / 427}` }}
>
<defs>
<clipPath
id={bgBlurClipPathId}
transform="translate(-77.1922 -18.9276)"
>
<path d="M152.538 94.2734C152.538 98.669 155.624 102.648 160.613 105.529V255.601C155.624 252.721 152.538 248.741 152.538 244.346V94.2734Z" />
<path d="M251.59 158.054C262.356 164.27 279.813 164.27 290.58 158.054V308.126C279.813 314.343 262.356 314.343 251.59 308.126V158.054Z" />
<path d="M389.631 94.2734C389.631 98.669 386.545 102.648 381.556 105.529V255.601C386.545 252.721 389.631 248.741 389.631 244.346V94.2734Z" />
<path d="M160.613 105.529V255.601L251.59 308.126V158.054L160.613 105.529Z" />
<path d="M290.58 158.054V308.126L381.556 255.601V105.529L290.58 158.054Z" />
</clipPath>
<filter
id={filterBlurId}
x="160.525"
y="81.3107"
width="31.3728"
height="25.7654"
filterUnits="userSpaceOnUse"
colorInterpolationFilters="sRGB"
>
<feFlood floodOpacity="0" result="BackgroundImageFix" />
<feBlend
mode="normal"
in="SourceGraphic"
in2="BackgroundImageFix"
result="shape"
/>
<feGaussianBlur
stdDeviation="4.5263"
result="effect1_foregroundBlur_333_20553"
/>
</filter>
<radialGradient
id={radialGradientId}
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(270.913 242.674) rotate(90) scale(242.93 242.93)"
>
<stop offset="0.35" stopColor="rgba(241, 245, 249, 1)" />
<stop offset="1" stopColor="rgba(241, 245, 249, 1)" stopOpacity="0" />
</radialGradient>
</defs>
<motion.path
id={networkId}
d="M495.427 114.09L48.1985 372.298M59.5143 119.584L484.112 364.725"
stroke={`url(#${radialGradientId})`}
strokeWidth="2.37569"
variants={networkVariants}
style={{ willChange: 'opacity, stroke-dashoffset' }}
aria-hidden="true"
/>
<g id={containerId}>
<g id={`inner-container-${uniqueId}`}>
<g id={`wrapper-${uniqueId}`}>
<g id={`extrude-group-${uniqueId}`}>
<path
id={`base-face-${uniqueId}`}
d="M251.589 30.4937C262.356 24.2775 279.812 24.2775 290.579 30.4937L381.555 83.019C392.322 89.2352 392.322 99.3136 381.555 105.53L290.579 158.055C279.812 164.271 262.356 164.271 251.589 158.055L160.613 105.53C149.846 99.3136 149.846 89.2351 160.613 83.019L251.589 30.4937Z"
fill="#0F172A"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
aria-hidden="true"
/>
<foreignObject
x="77.1922"
y="18.9276"
width="387.785"
height="369.207"
aria-hidden="true"
>
<div
style={{
backdropFilter: 'blur(37.67px)',
WebkitBackdropFilter: 'blur(37.67px)',
clipPath: `url(#${bgBlurClipPathId})`,
height: '100%',
width: '100%',
}}
/>
</foreignObject>
<g
id={`vector-${uniqueId}`}
data-figma-bg-blur-radius="75.3459"
aria-hidden="true"
>
<path
d="M152.538 94.2734C152.538 98.669 155.624 102.648 160.613 105.529V255.601C155.624 252.721 152.538 248.741 152.538 244.346V94.2734Z"
fill="#0F172A"
fillOpacity="0.7"
/>
<path
d="M251.59 158.054C262.356 164.27 279.813 164.27 290.58 158.054V308.126C279.813 314.343 262.356 314.343 251.59 308.126V158.054Z"
fill="#0F172A"
fillOpacity="0.7"
/>
<path
d="M389.631 94.2734C389.631 98.669 386.545 102.648 381.556 105.529V255.601C386.545 252.721 389.631 248.741 389.631 244.346V94.2734Z"
fill="#0F172A"
fillOpacity="0.7"
/>
<path
d="M160.613 105.529V255.601L251.59 308.126V158.054L160.613 105.529Z"
fill="#0F172A"
fillOpacity="0.7"
/>
<path
d="M290.58 158.054V308.126L381.556 255.601V105.529L290.58 158.054Z"
fill="#0F172A"
fillOpacity="0.7"
/>
</g>
<path
id={`vector-2-${uniqueId}`}
d="M152.538 94.2734V244.346M389.631 94.2734V244.346"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
aria-hidden="true"
/>
<path
id={`vector-3-${uniqueId}`}
d="M152.538 244.348C152.538 248.743 155.624 252.723 160.613 255.603L251.59 308.128C262.356 314.345 279.813 314.345 290.58 308.128L381.556 255.603C386.545 252.723 389.631 248.743 389.631 244.348"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
aria-hidden="true"
/>
<path
id={`vector-4-${uniqueId}`}
d="M160.613 105.531V255.603M290.58 308.129V158.057C279.813 164.273 262.356 164.273 251.59 158.057V308.129M381.556 105.531V255.603"
stroke="rgba(241, 245, 249, 1)"
strokeOpacity="0.2"
strokeWidth="1.9"
aria-hidden="true"
/>
<path
id={`vector-5-${uniqueId}`}
d="M152.538 94.2734C152.538 98.669 155.624 102.648 160.613 105.529L251.59 158.054C262.356 164.27 279.813 164.27 290.58 158.054L381.556 105.529C386.545 102.648 389.631 98.669 389.631 94.2734"
stroke="rgba(241, 245, 249, 1)"
strokeWidth="1.9"
aria-hidden="true"
/>
<g id={`group-${uniqueId}`} aria-hidden="true">
<path
id={`vector-6-${uniqueId}`}
d="M242.988 73.8649C239.494 75.8822 236.722 78.2771 234.831 80.9129C232.94 83.5486 231.967 86.3736 231.967 89.2266C231.967 94.9883 235.931 100.514 242.988 104.588C254.748 111.378 272.362 112.73 286.464 108.674C288.008 108.029 287.608 107.307 286.89 106.893L282.393 104.296C276.62 109.473 269.888 107.399 269.888 107.399C265.578 106.324 263.023 106.846 263.023 106.846C258.952 107.292 261.613 105.817 261.613 105.817C264.46 104.389 268.425 105.049 268.425 105.049C274.784 106.048 277.498 103.098 278.376 101.854C276.886 100.717 276.407 99.6418 276.487 98.8276C269.915 101.854 261.427 104.112 251.29 98.2592C248.336 96.5541 246.979 94.6032 246.82 92.514C245.888 92.2835 242.19 91.2236 240.061 88.3049C240.061 88.3049 241.578 86.5997 250.092 85.6473C251.609 84.0958 253.604 82.6057 255.866 81.2999C258.128 79.9942 260.708 78.8421 263.396 77.9664C265.045 73.0507 267.999 72.1751 267.999 72.1751C273.054 73.404 274.89 75.5393 275.289 76.077C278.908 76.1691 282.287 76.9526 285.24 78.6577C295.404 84.5259 291.413 89.4109 286.145 93.2206C287.928 93.1438 290.429 93.5739 292.903 95.0026L300.194 99.2117C300.912 99.6264 302.189 99.8722 303.307 98.9505C310.304 90.7935 307.963 80.6547 296.203 73.8649C292.708 71.8476 288.56 70.2473 283.995 69.1556C279.43 68.0638 274.537 67.5019 269.595 67.5019C264.654 67.5019 259.761 68.0638 255.196 69.1556C250.63 70.2473 246.482 71.8476 242.988 73.8649Z"
fill="rgba(241, 245, 249, 1)"
/>
</g>
</g>
</g>
</g>
</g>
<motion.g
id={`icon-group-${uniqueId}`}
variants={iconGroupVariants}
aria-hidden="true"
>
<motion.path
id={`plus-1-${uniqueId}`}
variants={iconVariants}
d="M338.178 184.664V163.446L341.834 161.336V182.553L338.178 184.664ZM330.825 180.403V176.182L349.2 165.573V169.794L330.825 180.403Z"
fill="#34D399"
/>
<motion.path
id={`plus-2-${uniqueId}`}
variants={iconVariants}
d="M338.178 219.265V198.048L341.834 195.937V217.155L338.178 219.265ZM330.825 215.005V210.783L349.2 200.174V204.396L330.825 215.005Z"
fill="#34D399"
/>
<motion.path
id={`minus-${uniqueId}`}
variants={iconVariants}
d="M348.114 236.266V240.632L331.91 249.987V245.621L348.114 236.266Z"
fill="#F87171"
/>
</motion.g>
<motion.g
id={`indicator-${uniqueId}`}
variants={indicatorVariants}
aria-hidden="true"
>
<circle
id={`ellipse-1-${uniqueId}`}
cx="5.5"
cy="5.5"
r="5.5"
transform="matrix(0.866025 0.5 -0.866025 0.5 176.211 88.7773)"
fill="#DAB149"
/>
<g id={`ellipse-2-${uniqueId}`} filter={`url(#${filterBlurId})`}>
<circle
cx="5.5"
cy="5.5"
r="5.5"
transform="matrix(0.866025 0.5 -0.866025 0.5 176.211 88.7773)"
fill="#DAB149"
/>
</g>
</motion.g>
</motion.svg>
);
}

2
nx-dev/ui-enterprise/src/lib/customer-logos.tsx
View File

@ -96,7 +96,7 @@ export function CustomerLogos(): ReactElement {
</Marquee>
<div className="absolute bottom-0 left-0 top-0 w-1/3 max-w-60 bg-gradient-to-r from-white to-white/0 dark:from-slate-950 dark:to-slate-950/0"></div>
<div className="absolute bottom-0 right-0 top-0 w-1/3 max-w-60 bg-gradient-to-r from-white/0 to-white dark:from-slate-950/0 dark:to-slate-950"></div>
<div className="absolute inset-0 grid grid-cols-1 place-items-center bg-white/60 opacity-0 backdrop-blur-sm transition-all duration-500 group-hover/canvas:opacity-100 dark:bg-slate-950/60">
<div className="absolute inset-0 grid grid-cols-1 place-items-center bg-white/60 opacity-0 backdrop-blur-sm transition-all duration-200 group-hover/canvas:opacity-100 dark:bg-slate-950/60">
<Link
href="/customers"
title="See our customers"

14
nx-dev/ui-enterprise/src/lib/enterprise-layout.tsx Normal file
View File

@ -0,0 +1,14 @@
import { Footer, Header } from '@nx/nx-dev/ui-common';
import { PropsWithChildren, ReactElement } from 'react';
export function EnterpriseLayout({
children,
}: PropsWithChildren): ReactElement {
return (
<div className="w-full dark:bg-slate-950">
<Header />
<main>{children}</main>
<Footer />
</div>
);
}

192
nx-dev/ui-enterprise/src/lib/hero.tsx
View File

@ -5,115 +5,95 @@ import { ChevronRightIcon } from '@heroicons/react/24/outline';
export function Hero(): ReactElement {
return (
<section className="relative isolate overflow-hidden">
<svg
focusable="false"
aria-hidden="true"
role="presentation"
className="absolute inset-0 -z-10 size-full stroke-slate-200 [mask-image:radial-gradient(100%_100%_at_top_right,white,transparent)] dark:stroke-slate-800"
>
<defs>
<pattern
x="50%"
y={-1}
id="0787a7c5-978c-4f66-83c7-11c213f99cb7"
width={200}
height={200}
patternUnits="userSpaceOnUse"
>
<path d="M.5 200V.5H200" fill="none" />
</pattern>
</defs>
<rect
fill="url(#0787a7c5-978c-4f66-83c7-11c213f99cb7)"
width="100%"
height="100%"
strokeWidth={0}
<section className="relative overflow-hidden">
<div className="relative isolate h-[868px] border-b border-slate-200 dark:border-slate-800">
<img
alt="hero illustration"
src="/images/enterprise/hero-light.avif"
width={4573}
height={2114}
className="h-full max-w-full object-cover object-left-top opacity-40 dark:hidden"
/>
</svg>
<div className="mx-auto max-w-7xl px-6 pb-24 pt-32 lg:flex lg:px-8 lg:pt-56">
<div className="mx-auto max-w-2xl lg:mx-0 lg:-mt-12 lg:shrink-0">
{/*<p>*/}
{/* <a*/}
{/* href="https://bit.ly/3XvOwIl"*/}
{/* title="See live event in details"*/}
{/* className="group/event-link inline-flex space-x-6"*/}
{/* >*/}
{/* <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
{/* Live event*/}
{/* </span>*/}
{/* <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
{/* <span>Webinar + live Q&A on March 19th</span>*/}
{/* <ChevronRightIcon*/}
{/* aria-hidden="true"*/}
{/* className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
{/* />*/}
{/* </span>*/}
{/* </a>*/}
{/*</p>*/}
<SectionHeading
id="get-speed-and-scale"
as="h1"
variant="display"
className="mt-8 text-pretty tracking-tight"
>
Solving the Performance Paradox,{' '}
<span className="rounded-lg bg-gradient-to-r from-pink-500 to-fuchsia-500 bg-clip-text text-transparent">
get speed and scale
</span>
</SectionHeading>
<SectionHeading
as="p"
variant="subtitle"
className="mx-auto mt-6 max-w-3xl lg:pr-20"
>
Accelerate your organization's journey to tighter collaboration,
better developer experience, and speed…lots of speed.
</SectionHeading>
<div className="mt-8 flex items-center gap-x-3">
<ButtonLink
href="/enterprise/trial"
title="Request a free trial"
variant="primary"
size="default"
onClick={() =>
sendCustomEvent(
'request-trial-click',
'enterprise-hero',
'enterprise'
)
}
<img
alt="hero illustration"
src="/images/enterprise/hero-dark.avif"
width={4573}
height={2114}
className="hidden h-full max-w-full object-cover object-left-top opacity-40 dark:block"
/>
</div>
<div className="absolute inset-0">
<div className="mx-auto max-w-7xl lg:flex">
<div className="mx-auto max-w-3xl px-6 pb-24 pt-36 lg:mx-0 lg:shrink-0 lg:px-8">
{/*<p>*/}
{/* <a*/}
{/* href="https://bit.ly/3XvOwIl"*/}
{/* title="See live event in details"*/}
{/* className="group/event-link inline-flex space-x-6"*/}
{/* >*/}
{/* <span className="rounded-full bg-blue-600/10 px-3 py-1 text-sm/6 font-semibold text-blue-600 ring-1 ring-inset ring-blue-600/10 dark:bg-cyan-600/10 dark:text-cyan-600 dark:ring-cyan-600/10">*/}
{/* Live event*/}
{/* </span>*/}
{/* <span className="inline-flex items-center space-x-2 text-sm/6 font-medium">*/}
{/* <span>Webinar + live Q&A on March 19th</span>*/}
{/* <ChevronRightIcon*/}
{/* aria-hidden="true"*/}
{/* className="size-5 transform transition-all group-hover/event-link:translate-x-1"*/}
{/* />*/}
{/* </span>*/}
{/* </a>*/}
{/*</p>*/}
<SectionHeading
id="get-speed-and-scale"
as="h1"
variant="display"
className="mt-8 text-pretty tracking-tight"
>
Request a free trial
</ButtonLink>
Solving the Performance Paradox,{' '}
<span className="rounded-lg bg-gradient-to-r from-pink-500 to-fuchsia-500 bg-clip-text text-transparent">
get speed and scale
</span>
</SectionHeading>
<SectionHeading
as="p"
variant="subtitle"
className="mx-auto mt-6 max-w-3xl lg:pr-20"
>
Accelerate your organization's journey to tighter collaboration,
better developer experience, and speed…lots of speed.
</SectionHeading>
<div className="mt-8 flex items-center gap-x-3">
<ButtonLink
href="/enterprise/trial"
title="Request a free trial"
variant="primary"
size="default"
onClick={() =>
sendCustomEvent(
'request-trial-click',
'enterprise-hero',
'enterprise'
)
}
>
Request a free trial
</ButtonLink>
<ButtonLink
href="/contact/sales"
title="Talk to the team"
variant="secondary"
size="default"
onClick={() =>
sendCustomEvent(
'contact-sales-click',
'enterprise-hero',
'enterprise'
)
}
>
Contact sales
</ButtonLink>
</div>
</div>
<div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-8 lg:max-w-none lg:flex-none xl:ml-32">
<div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
<div className="-m-2 rounded-xl bg-slate-900/5 p-2 ring-1 ring-inset ring-slate-900/10 lg:-m-4 lg:rounded-2xl lg:p-4 dark:bg-slate-100/5 dark:ring-slate-100/10">
<img
alt="nx cloud application dashboard screenshot"
src="/images/home/nx-app-dashboard.avif"
width={2500}
height={1616}
className="w-[764px] rounded-md shadow-2xl ring-1 ring-slate-900/10"
/>
<ButtonLink
href="/contact/sales"
title="Talk to the team"
variant="secondary"
size="default"
onClick={() =>
sendCustomEvent(
'contact-sales-click',
'enterprise-hero',
'enterprise'
)
}
>
Contact sales
</ButtonLink>
</div>
</div>
</div>

79
nx-dev/ui-enterprise/src/lib/scale-your-organization.tsx
View File

@ -1,17 +1,9 @@
import { ReactElement } from 'react';
import { SectionHeading, Strong } from '@nx/nx-dev/ui-common';
import {
AcademicCapIcon,
ArrowPathIcon,
CheckBadgeIcon,
CodeBracketSquareIcon,
DocumentMagnifyingGlassIcon,
DocumentTextIcon,
EyeIcon,
ShieldExclamationIcon,
UsersIcon,
} from '@heroicons/react/24/outline';
import Link from 'next/link';
import { VisibilityAnimation } from './animations/visibility';
import { ConformanceAnimation } from './animations/conformance';
import { OwnershipAnimation } from './animations/ownership';
export function ScaleYourOrganization(): ReactElement {
return (
@ -78,22 +70,13 @@ export function ScaleYourOrganization(): ReactElement {
<div className="mx-auto mt-16 max-w-4xl sm:mt-20 lg:mt-24">
<dl className="mx-auto mt-10 flex flex-col">
<div className="group/section flex items-center gap-16">
<div className="hidden shrink-0 p-6 sm:p-12 lg:block">
<div className="relative grid size-12 place-items-center">
<EyeIcon
aria-hidden="true"
className="size-8 transition-all group-hover/section:-translate-x-2"
/>
<DocumentMagnifyingGlassIcon
aria-hidden="true"
className="absolute inset-0 size-8 opacity-0 transition-all group-hover/section:-translate-y-2 group-hover/section:translate-x-8 group-hover/section:opacity-100"
/>
<CodeBracketSquareIcon
aria-hidden="true"
className="absolute inset-0 size-8 opacity-0 transition-all group-hover/section:translate-x-7 group-hover/section:translate-y-6 group-hover/section:opacity-100"
/>
</div>
<div className="group/section flex items-center items-stretch gap-16">
<div className="hidden max-w-[35%] shrink-0 lg:block">
<VisibilityAnimation
autoPlay={true}
speed={1}
className="max-w-full scale-75"
/>
</div>
<div className="relative flex gap-x-4">
<div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
@ -125,21 +108,12 @@ export function ScaleYourOrganization(): ReactElement {
</div>
</div>
<div className="group/section flex items-center gap-16">
<div className="hidden shrink-0 p-6 sm:p-12 lg:block">
<div className="relative grid size-12 place-items-center">
<CheckBadgeIcon
aria-hidden="true"
className="size-8 transition-all group-hover/section:-translate-x-2"
/>
<DocumentTextIcon
aria-hidden="true"
className="absolute inset-0 size-8 opacity-0 transition-all group-hover/section:-translate-y-2 group-hover/section:translate-x-8 group-hover/section:opacity-100"
/>
<ArrowPathIcon
aria-hidden="true"
className="absolute inset-0 size-8 opacity-0 transition-all group-hover/section:translate-x-7 group-hover/section:translate-y-6 group-hover/section:opacity-100"
/>
</div>
<div className="hidden max-w-[35%] shrink-0 lg:block">
<ConformanceAnimation
autoPlay={true}
speed={1}
className="max-w-full scale-75"
/>
</div>
<div className="group/section relative flex gap-x-4">
<div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">
@ -208,21 +182,12 @@ export function ScaleYourOrganization(): ReactElement {
</div>
</div>
<div className="group/section flex items-center gap-16">
<div className="hidden shrink-0 p-6 sm:p-12 lg:block">
<div className="relative grid size-12 place-items-center">
<UsersIcon
aria-hidden="true"
className="size-8 transition-all group-hover/section:-translate-x-2"
/>
<AcademicCapIcon
aria-hidden="true"
className="absolute inset-0 size-8 opacity-0 transition-all group-hover/section:-translate-y-2 group-hover/section:translate-x-8 group-hover/section:opacity-100"
/>
<ShieldExclamationIcon
aria-hidden="true"
className="absolute inset-0 size-8 opacity-0 transition-all group-hover/section:translate-x-8 group-hover/section:translate-y-6 group-hover/section:opacity-100"
/>
</div>
<div className="hidden max-w-[35%] shrink-0 lg:block">
<OwnershipAnimation
autoPlay={true}
speed={1}
className="max-w-full"
/>
</div>
<div className="relative flex gap-x-4">
<div className="absolute -bottom-6 left-0 top-0 flex w-6 justify-center">