From b33b36b560de348fc69e6d247007f48dc3b242ec Mon Sep 17 00:00:00 2001 From: alelthomas Date: Fri, 2 Jan 2026 14:03:52 -0700 Subject: [PATCH 1/3] customers CTA --- docs/pages/customers.tsx | 4 +- .../src/components/customers/CustomersCTA.tsx | 25 +++++++++++ .../components/customers/CustomersHeroEnd.tsx | 45 +++++++++++++++++++ 3 files changed, 72 insertions(+), 2 deletions(-) create mode 100644 docs/src/components/customers/CustomersCTA.tsx create mode 100644 docs/src/components/customers/CustomersHeroEnd.tsx diff --git a/docs/pages/customers.tsx b/docs/pages/customers.tsx index bd565835ecab4f..7b2adca4af1cbb 100644 --- a/docs/pages/customers.tsx +++ b/docs/pages/customers.tsx @@ -6,13 +6,13 @@ import AppHeader from 'docs/src/layouts/AppHeader'; import Head from 'docs/src/modules/components/Head'; import Box from '@mui/material/Box'; import AppFooter from 'docs/src/layouts/AppFooter'; -import HeroEnd from 'docs/src/components/home/HeroEnd'; import Divider from '@mui/material/Divider'; import CustomersSpotlight from 'docs/src/components/customers/CustomersSpotlight'; import CustomersLogoSlider from 'docs/src/components/customers/CustomersLogoSlider'; import { getCaseStudies } from 'docs/lib/sourcing'; import { InferGetStaticPropsType } from 'next'; import CustomersTestimonials from 'docs/src/components/customers/CustomersTestimonials'; +import CustomersHeroEnd from 'docs/src/components/customers/CustomersHeroEnd'; export const getStaticProps = () => { const customers = getCaseStudies(); @@ -46,7 +46,7 @@ export default function Customers(props: InferGetStaticPropsType - + diff --git a/docs/src/components/customers/CustomersCTA.tsx b/docs/src/components/customers/CustomersCTA.tsx new file mode 100644 index 00000000000000..847424f315be91 --- /dev/null +++ b/docs/src/components/customers/CustomersCTA.tsx @@ -0,0 +1,25 @@ +import Box from '@mui/material/Box'; +import Typography from '@mui/material/Typography'; +import GradientText from 'docs/src/components/typography/GradientText'; +import GetStartedButtons from 'docs/src/components/home/GetStartedButtons'; +import SectionHeadline from 'docs/src/components/typography/SectionHeadline'; + +export default function CustomersCTA() { + return ( + + + Get started today + + } + description="Our advanced components are available with free and commercial licenses. Try them out and see how they can help you improve your UI-building experience." + /> + + + ); +} diff --git a/docs/src/components/customers/CustomersHeroEnd.tsx b/docs/src/components/customers/CustomersHeroEnd.tsx new file mode 100644 index 00000000000000..d0a7c75d7c8d9b --- /dev/null +++ b/docs/src/components/customers/CustomersHeroEnd.tsx @@ -0,0 +1,45 @@ +import dynamic from 'next/dynamic'; +import { useInView } from 'react-intersection-observer'; +import Box from '@mui/material/Box'; +import { alpha } from '@mui/material/styles'; +import Section from 'docs/src/layouts/Section'; + +function Placeholder() { + return ( + + ); +} +const CustomersCTA = dynamic(() => import('./CustomersCTA'), { loading: Placeholder }); + +export default function CustomersHeroEnd() { + const { ref, inView } = useInView({ + triggerOnce: true, + threshold: 0, + rootMargin: '500px', + }); + return ( + ({ + background: `linear-gradient(180deg, #FFF 50%, ${(theme.vars || theme).palette.primary[50]} 100%)`, + ...theme.applyDarkStyles({ + background: `linear-gradient(180deg, ${ + (theme.vars || theme).palette.primaryDark[900] + } 50%, ${alpha(theme.palette.primary[900], 0.2)} 100%)`, + }), + })} + > +
+ {inView ? : } +
+ + ); +} From d83c8fcf322fa411ac95d8a828c05a18cf5d0fb5 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Wed, 7 Jan 2026 15:25:30 -0700 Subject: [PATCH 2/3] fix borders --- .../components/customers/CustomerQuotes.tsx | 18 +++++++++--------- .../customers/CustomersSpotlight.tsx | 3 +-- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/src/components/customers/CustomerQuotes.tsx b/docs/src/components/customers/CustomerQuotes.tsx index 92f28a212364a2..0de8aa12d74538 100644 --- a/docs/src/components/customers/CustomerQuotes.tsx +++ b/docs/src/components/customers/CustomerQuotes.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; -import Grid from '@mui/material/Grid'; import Avatar from '@mui/material/Avatar'; const QUOTES = [ @@ -120,19 +119,18 @@ function Data({ flexDirection: 'column', justifyContent: 'end', color: 'text.primary', - border: '1px solid', - borderColor: 'divider', + backgroundColor: 'background.paper', background: isFirstColumn || isLastColumn ? `radial-gradient(#ebf5ff 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, linear-gradient(180deg, ${(theme.vars || theme).palette.primary[50]} 5%, #FFF 20%)` - : 'background.paper', + : undefined, ...theme.applyDarkStyles({ background: isFirstColumn || isLastColumn ? `radial-gradient(#131C23 1.8px, transparent 1.8px) 0% 50% / 22px 22px repeat, linear-gradient(180deg, #131C23 5%, #15181A 20%)` - : 'background.paper', + : undefined, }), gap: 2, })} @@ -189,7 +187,7 @@ export default function CustomerQuotes() { {QUOTES.map((item) => ( - + - + ))} ); diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx index 5f53b27c9f915f..00777c8ceac0fb 100644 --- a/docs/src/components/customers/CustomersSpotlight.tsx +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -51,13 +51,12 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) { sx={(t) => ({ py: variant === 'primary' ? 3 : 2, px: variant === 'primary' ? 4 : 2, - minHeight: variant === 'primary' ? '230px' : '150px', + minHeight: variant === 'primary' ? '220px' : '150px', display: 'flex', alignItems: 'start', flexDirection: 'column', position: 'relative', backgroundImage: (t.vars || t).palette.gradients.linearSubtle, - boxShadow: '0 4px 12px rgba(170, 180, 190, 0.2)', textDecoration: 'none', color: 'inherit', cursor: 'pointer', From cdbf00d891b03c0f084af9c3b723422947725107 Mon Sep 17 00:00:00 2001 From: alelthomas Date: Wed, 7 Jan 2026 16:57:33 -0700 Subject: [PATCH 3/3] logos --- .../static/branding/companies/deliveryhero_spotlight.svg | 4 ++-- docs/src/components/customers/CustomersSpotlight.tsx | 4 +--- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/public/static/branding/companies/deliveryhero_spotlight.svg b/docs/public/static/branding/companies/deliveryhero_spotlight.svg index a53db886a1bce2..b3530f603d5a4c 100644 --- a/docs/public/static/branding/companies/deliveryhero_spotlight.svg +++ b/docs/public/static/branding/companies/deliveryhero_spotlight.svg @@ -1,8 +1,8 @@ - + - + \ No newline at end of file diff --git a/docs/src/components/customers/CustomersSpotlight.tsx b/docs/src/components/customers/CustomersSpotlight.tsx index 00777c8ceac0fb..6d15eb42aab6e7 100644 --- a/docs/src/components/customers/CustomersSpotlight.tsx +++ b/docs/src/components/customers/CustomersSpotlight.tsx @@ -70,7 +70,7 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) { {post.image && ( ({ position: variant === 'primary' ? 'absolute' : 'relative', @@ -97,7 +97,6 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) { display: 'flex', flexDirection: 'column', alignItems: 'flex-start', - textAlign: 'left', mt: 10, gap: 2, }} @@ -134,7 +133,6 @@ function Spotlight({ posts, variant = 'primary' }: SpotlightProps) { )} {variant === 'secondary' && (