diff --git a/package.json b/package.json index 65858af0..bb41a552 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "@markdoc/markdoc": "0.4.0", "@markdoc/next.js": "0.2.2", "@open-draft/until": "2.1.0", - "@pluralsh/design-system": "3.53.0", + "@pluralsh/design-system": "3.54.0", "@react-types/shared": "3.22.0", "@tanstack/react-table": "8.10.7", "@tanstack/react-virtual": "3.0.1", diff --git a/pages/about.tsx b/pages/about.tsx index 6d2ad5d0..95e94e33 100644 --- a/pages/about.tsx +++ b/pages/about.tsx @@ -26,7 +26,6 @@ export default function About({

Our mission is to democratize elite DevOps capabilities by - simplifing tooling complexities, fostering a ZeroOps world + simplifying tooling complexities, fostering a ZeroOps world that accelerates software development.

diff --git a/pages/index.tsx b/pages/index.tsx index c4a6ee3e..56e10ca6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -185,7 +185,7 @@ export default function Index({ as={GradientBG} position="50% 50%" size="cover" - image="/images/gradients/gradient-bg-10.png" + image="/images/gradients/hero-background.png" > Managing Kubernetes can be a cluster—} @@ -208,7 +208,7 @@ export default function Index({
} /> -
+
+ - -
{image}
+ +
{image}
 ) @@ -88,14 +100,12 @@ export function FeatureItem({ }) { return (
- -
- {icon} -
- +
+ {icon} +
{title &&

{title}

}

{description}

diff --git a/src/components/page-sections/FeaturesImage.tsx b/src/components/page-sections/FeaturesImage.tsx index 09cb6f51..9f8bdf8c 100644 --- a/src/components/page-sections/FeaturesImage.tsx +++ b/src/components/page-sections/FeaturesImage.tsx @@ -136,25 +136,6 @@ export const MultiImageWrapSC = styled.div< }) ) -export const MultiImageVideoSC = styled.video<{ - $round?: boolean | number | undefined -}>(({ $round }) => ({ - top: 0, - right: 0, - bottom: 0, - left: 0, - position: 'absolute', - borderRadius: - typeof $round === 'boolean' - ? $round - ? ROUND - : 0 - : typeof $round === 'number' - ? $round - : ROUND, - overflow: 'hidden', -})) - export const MultiImageImgSC = styled.img<{ $round?: boolean }>( ({ $round = false }) => ({ display: 'block', @@ -225,29 +206,12 @@ function MultiImageImg({ }} /> )} - {src.match(/\.mp4$/) ? ( - - - - ) : ( - - )} + ) diff --git a/src/components/page-sections/HomepageFeaturesSection.tsx b/src/components/page-sections/HomepageFeaturesSection.tsx index dd37a9fd..545e8c0b 100644 --- a/src/components/page-sections/HomepageFeaturesSection.tsx +++ b/src/components/page-sections/HomepageFeaturesSection.tsx @@ -25,7 +25,7 @@ export function HomepageFeaturesSection() {
@@ -33,34 +33,23 @@ export function HomepageFeaturesSection() {
@@ -85,27 +74,15 @@ export function HomepageFeaturesSection() { heading="Level-up your security and compliance" graphic={ @@ -136,28 +113,17 @@ export function HomepageFeaturesSection() { heading="Simple K8s management for all levels" graphic={ @@ -187,16 +153,15 @@ export function HomepageFeaturesSection() { heading="Self-hosted for maximum security" graphic={ diff --git a/src/components/page-sections/QuoteSection.tsx b/src/components/page-sections/QuoteSection.tsx index 948dc644..9c5bb3f5 100644 --- a/src/components/page-sections/QuoteSection.tsx +++ b/src/components/page-sections/QuoteSection.tsx @@ -1,32 +1,7 @@ -import styled from 'styled-components' +import { useTheme } from 'styled-components' -const QuoteSectionSC = styled.div(({ theme: _theme }) => ({ - backgroundColor: `${_theme.colors['action-primary']}`, - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - gap: `${_theme.spacing.large}px`, - padding: `${_theme.spacing.xxxxxlarge}px ${_theme.spacing.large}px`, - flexWrap: 'wrap', - '.quoteContainer': { - color: 'white', - position: 'relative', - '.leftQuote': { - position: 'absolute', - top: '0px', - left: 0, - transform: 'translate(-120%, -120%)', - width: '25px', - }, - '.rightQuote': { - position: 'absolute', - bottom: 0, - right: 0, - transform: 'translate(50%, 50%)', - width: '25px', - }, - }, -})) +import { StandardPageWidth } from '../layout/LayoutHelpers' +import { ResponsiveText } from '../Typography' export function QuoteSection({ title, @@ -37,51 +12,61 @@ export function QuoteSection({ quote: string attribution: string }) { - return ( - -
-

- {title} -

-
-
- + const theme = useTheme() -

- {quote} -

- {attribution} -
+ - +
+ + + {quote} + + {attribution} + - +
- + + ) +} + +function DoubleQuote(props) { + const theme = useTheme() + + return ( + ) } diff --git a/src/components/page-sections/articleSection.tsx b/src/components/page-sections/articleSection.tsx index 6810f288..917607ce 100644 --- a/src/components/page-sections/articleSection.tsx +++ b/src/components/page-sections/articleSection.tsx @@ -74,9 +74,14 @@ function ArticleSection({ articleCards }: { articleCards?: ArticleCardsType }) { - + Accelerate your K8s operations
} diff --git a/yarn.lock b/yarn.lock index 9b9569c6..d20e91a6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4276,9 +4276,9 @@ __metadata: languageName: node linkType: hard -"@pluralsh/design-system@npm:3.53.0": - version: 3.53.0 - resolution: "@pluralsh/design-system@npm:3.53.0" +"@pluralsh/design-system@npm:3.54.0": + version: 3.54.0 + resolution: "@pluralsh/design-system@npm:3.54.0" dependencies: "@floating-ui/react-dom-interactions": 0.13.3 "@loomhq/loom-embed": 1.5.0 @@ -4326,7 +4326,7 @@ __metadata: react-dom: ">=18.3.1" react-transition-group: ">=4.4.5" styled-components: ">=5.3.11" - checksum: b0ee7c5e2ae382be6c62e724c9b9aba1655e16a3aa5b88450d1442808b8e33c9f6d2578e2ecae0f9eab5aca61f8bb679ad1cdfca42b22f64c75ecc903255e41f + checksum: 43292b2d892be7d670c45287f9340fc3321f224f5c1ad54de70bd17ba08c37e56fe7aad46b9bce76650ad6db87517627105bfd160e820c28a68e6991c431afe5 languageName: node linkType: hard @@ -13743,7 +13743,7 @@ __metadata: "@markdoc/next.js": 0.2.2 "@next/bundle-analyzer": 13.4.12 "@open-draft/until": 2.1.0 - "@pluralsh/design-system": 3.53.0 + "@pluralsh/design-system": 3.54.0 "@pluralsh/eslint-config-typescript": 2.5.183 "@pluralsh/stylelint-config": 2.0.10 "@radix-ui/react-slot": 1.0.2