'use client';
import { ButtonLink, SectionHeading, Strong } from '@nx/nx-dev/ui-common';
import { ShaderGradient, ShaderGradientCanvas } from 'shadergradient';
import { BlurFade } from '@nx/nx-dev/ui-animations';
import { Theme, useTheme } from '@nx/nx-dev/ui-theme';
import { useState } from 'react';
import Link from 'next/link';
import { useIsomorphicLayoutEffect } from '@nx/nx-dev/ui-primitives';
export function Hero(): JSX.Element {
return (
Monorepo World
{' '}
- The conf for monorepos and dev tooling.{' '}
Find out more →
Smart
{' '}
Monorepos
Fast
{' '}
CI
{/*Structured, maintainable and efficient monorepos. Locally and on CI, easy as that.*/}
Build system, optimized for monorepos, with plugins
for popular frameworks and tools and{' '}
advanced CI capabilities including caching and
distribution.
Get started
Learn about Nx on CI
);
}
function ShaderGradientElement() {
const [theme] = useTheme();
const [displayTheme, setDisplayTheme] = useState('system');
useIsomorphicLayoutEffect(() => {
const matchMedia: any = window.matchMedia('(prefers-color-scheme: dark)');
function handleChange(): void {
if (theme === 'system') {
setDisplayTheme(matchMedia.matches ? 'dark' : 'light');
} else {
setDisplayTheme(theme === 'dark' ? 'dark' : 'light');
}
}
handleChange();
// Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
if (matchMedia.addListener) {
matchMedia.addListener(handleChange);
} else {
matchMedia.addEventListener('change', handleChange);
}
return () => {
if (matchMedia.removeListener) {
matchMedia.removeListener(handleChange);
} else {
matchMedia.removeEventListener('change', handleChange);
}
};
}, [theme]);
if (displayTheme === 'dark')
return (