From 3c99d8b5548a4e7fdd724ca26e22b335abf059db Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Wed, 19 Jul 2023 06:47:48 +0800 Subject: [PATCH] [website] Add Base UI marketing page (#36622) Signed-off-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> Co-authored-by: Danilo Leal <67129314+danilo-leal@users.noreply.github.com> --- .stylelintrc.js | 1 + docs/pages/_document.js | 27 +- docs/pages/about.tsx | 152 ++- docs/pages/base-ui.tsx | 46 + docs/pages/blog.tsx | 210 ++-- docs/pages/careers.tsx | 179 ++- docs/pages/core.tsx | 8 +- docs/pages/design-kits.tsx | 9 +- docs/pages/index.tsx | 6 + docs/pages/material-ui.tsx | 10 +- docs/pages/pricing.tsx | 6 +- docs/pages/templates.tsx | 6 +- docs/pages/x.tsx | 7 + .../branding/base-ui/headless-ui-dark.svg | 29 + .../static/branding/base-ui/headless-ui.svg | 29 + .../static/branding/base-ui/nhost-2x.jpg | Bin 0 -> 49894 bytes docs/public/static/branding/base-ui/nhost.jpg | Bin 0 -> 29344 bytes .../static/branding/base-ui/radix-dark.svg | 21 + docs/public/static/branding/base-ui/radix.svg | 21 + .../branding/base-ui/react-aria-dark.svg | 15 + .../static/branding/base-ui/react-aria.svg | 15 + docs/public/static/fonts/GeneralSans-Bold.ttf | Bin 0 -> 63832 bytes .../static/fonts/GeneralSans-Bold.woff2 | Bin 0 -> 21180 bytes .../static/fonts/GeneralSans-Medium.ttf | Bin 0 -> 65912 bytes .../static/fonts/GeneralSans-Medium.woff2 | Bin 0 -> 22904 bytes .../static/fonts/GeneralSans-Regular.ttf | Bin 0 -> 66280 bytes .../static/fonts/GeneralSans-Regular.woff2 | Bin 0 -> 23084 bytes .../fonts/GeneralSans-Semibold-subset.woff2 | Bin 0 -> 7800 bytes .../static/fonts/GeneralSans-Semibold.ttf | Bin 0 -> 65744 bytes .../static/fonts/GeneralSans-Semibold.woff2 | Bin 0 -> 23092 bytes .../fonts/IBMPlexSans-Regular-subset.woff2 | Bin 0 -> 13460 bytes .../fonts/PlusJakartaSans-Bold-subset.woff2 | Bin 6764 -> 0 bytes .../PlusJakartaSans-ExtraBold-subset.woff2 | Bin 6632 -> 0 bytes docs/src/components/action/ArrowButton.tsx | 10 +- docs/src/components/action/Frame.tsx | 41 +- docs/src/components/action/Highlighter.tsx | 28 +- docs/src/components/action/More.tsx | 4 +- docs/src/components/action/NpmCopyButton.tsx | 97 ++ docs/src/components/action/StylingInfo.tsx | 6 +- docs/src/components/animation/FlashCode.tsx | 5 +- docs/src/components/header/HeaderNavBar.tsx | 2 +- docs/src/components/home/AdvancedShowcase.tsx | 1 + docs/src/components/home/DesignKits.tsx | 4 +- .../home/DesignSystemComponents.tsx | 9 +- docs/src/components/home/DiamondSponsors.tsx | 33 +- .../src/components/home/GetStartedButtons.tsx | 2 +- .../components/home/GetStartedButtons2.tsx | 61 + docs/src/components/home/GoldSponsors.tsx | 31 +- docs/src/components/home/Hero.tsx | 4 +- docs/src/components/home/HeroEnd.tsx | 19 +- docs/src/components/home/ProductSuite.tsx | 90 +- docs/src/components/home/References.tsx | 17 +- docs/src/components/home/Sponsors.tsx | 8 +- .../components/home/StoreTemplatesBanner.tsx | 9 +- docs/src/components/home/Testimonials.tsx | 11 +- docs/src/components/home/UserFeedbacks.tsx | 32 +- docs/src/components/home/ValueProposition.tsx | 72 +- .../src/components/home/XGridGlobalStyles.tsx | 1 + .../components/markdown/MarkdownElement.tsx | 2 +- docs/src/components/pricing/EarlyBird.tsx | 18 +- docs/src/components/pricing/HeroPricing.tsx | 17 +- docs/src/components/pricing/PricingFAQ.tsx | 6 +- docs/src/components/pricing/PricingTable.tsx | 4 +- .../pricing/PricingWhatToExpect.tsx | 367 +++--- .../productBaseUI/BaseUIComponents.tsx | 234 ++++ .../productBaseUI/BaseUICustomization.tsx | 306 +++++ .../components/productBaseUI/BaseUIEnd.tsx | 140 +++ .../components/productBaseUI/BaseUIHero.tsx | 108 ++ .../productBaseUI/BaseUISummary.tsx | 151 +++ .../productBaseUI/BaseUITestimonial.tsx | 92 ++ .../productBaseUI/BaseUIThemesDemo.tsx | 1080 +++++++++++++++++ .../components/BaseButtonDemo.tsx | 134 ++ .../components/BaseInputDemo.tsx | 302 +++++ .../productBaseUI/components/BaseMenuDemo.tsx | 482 ++++++++ .../components/BaseSliderDemo.tsx | 254 ++++ .../productBaseUI/components/BaseTabsDemo.tsx | 260 ++++ .../components/productBaseUI/heroVariables.ts | 117 ++ .../components/productCore/CoreHeroEnd.tsx | 58 + .../components/productCore/CoreProducts.tsx | 6 +- .../productDesignKit/DesignKitDemo.tsx | 6 +- .../productDesignKit/DesignKitFAQ.tsx | 8 +- .../productDesignKit/DesignKitHero.tsx | 8 +- .../productDesignKit/DesignKitValues.tsx | 72 +- .../productMaterial/MaterialComponents.tsx | 31 +- .../productMaterial/MaterialHero.tsx | 1 + .../productMaterial/MaterialHeroEnd.tsx | 43 - .../productMaterial/MaterialStyling.tsx | 26 +- .../productTemplate/TemplateDemo.tsx | 4 +- .../productTemplate/TemplateHero.tsx | 5 +- docs/src/components/productX/XComponents.tsx | 2 +- .../src/components/productX/XGridFullDemo.tsx | 2 + docs/src/components/productX/XHero.tsx | 2 + docs/src/components/productX/XPlans.tsx | 4 +- docs/src/components/productX/XRoadmap.tsx | 51 +- docs/src/components/productX/XTheming.tsx | 2 +- .../components/showcase/ThemeAccordion.tsx | 4 +- docs/src/components/showcase/ThemeTabs.tsx | 5 + .../components/typography/GradientText.tsx | 10 +- .../components/typography/SectionHeadline.tsx | 55 +- docs/src/layouts/AppFooter.tsx | 48 +- docs/src/layouts/AppHeader.tsx | 2 +- docs/src/layouts/HeroContainer.tsx | 117 +- docs/src/layouts/Section.tsx | 32 +- docs/src/modules/brandingTheme.ts | 354 ++++-- .../modules/components/AppLayoutDocsFooter.js | 5 +- .../modules/components/AppNavDrawerItem.js | 6 +- .../modules/components/AppSettingsDrawer.js | 29 +- docs/src/modules/components/Demo.js | 33 +- docs/src/modules/components/DemoEditor.tsx | 3 +- .../src/modules/components/MarkdownElement.js | 22 +- .../modules/components/MuiProductSelector.tsx | 2 +- docs/src/modules/components/TopLayoutBlog.js | 11 +- docs/src/route.ts | 3 + docs/tailwind.config.js | 33 +- 114 files changed, 5580 insertions(+), 993 deletions(-) create mode 100644 docs/pages/base-ui.tsx create mode 100644 docs/public/static/branding/base-ui/headless-ui-dark.svg create mode 100644 docs/public/static/branding/base-ui/headless-ui.svg create mode 100644 docs/public/static/branding/base-ui/nhost-2x.jpg create mode 100644 docs/public/static/branding/base-ui/nhost.jpg create mode 100644 docs/public/static/branding/base-ui/radix-dark.svg create mode 100644 docs/public/static/branding/base-ui/radix.svg create mode 100644 docs/public/static/branding/base-ui/react-aria-dark.svg create mode 100644 docs/public/static/branding/base-ui/react-aria.svg create mode 100644 docs/public/static/fonts/GeneralSans-Bold.ttf create mode 100644 docs/public/static/fonts/GeneralSans-Bold.woff2 create mode 100644 docs/public/static/fonts/GeneralSans-Medium.ttf create mode 100644 docs/public/static/fonts/GeneralSans-Medium.woff2 create mode 100644 docs/public/static/fonts/GeneralSans-Regular.ttf create mode 100644 docs/public/static/fonts/GeneralSans-Regular.woff2 create mode 100644 docs/public/static/fonts/GeneralSans-Semibold-subset.woff2 create mode 100644 docs/public/static/fonts/GeneralSans-Semibold.ttf create mode 100644 docs/public/static/fonts/GeneralSans-Semibold.woff2 create mode 100644 docs/public/static/fonts/IBMPlexSans-Regular-subset.woff2 delete mode 100644 docs/public/static/fonts/PlusJakartaSans-Bold-subset.woff2 delete mode 100644 docs/public/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2 create mode 100644 docs/src/components/action/NpmCopyButton.tsx create mode 100644 docs/src/components/home/GetStartedButtons2.tsx create mode 100644 docs/src/components/productBaseUI/BaseUIComponents.tsx create mode 100644 docs/src/components/productBaseUI/BaseUICustomization.tsx create mode 100644 docs/src/components/productBaseUI/BaseUIEnd.tsx create mode 100644 docs/src/components/productBaseUI/BaseUIHero.tsx create mode 100644 docs/src/components/productBaseUI/BaseUISummary.tsx create mode 100644 docs/src/components/productBaseUI/BaseUITestimonial.tsx create mode 100644 docs/src/components/productBaseUI/BaseUIThemesDemo.tsx create mode 100644 docs/src/components/productBaseUI/components/BaseButtonDemo.tsx create mode 100644 docs/src/components/productBaseUI/components/BaseInputDemo.tsx create mode 100644 docs/src/components/productBaseUI/components/BaseMenuDemo.tsx create mode 100644 docs/src/components/productBaseUI/components/BaseSliderDemo.tsx create mode 100644 docs/src/components/productBaseUI/components/BaseTabsDemo.tsx create mode 100644 docs/src/components/productBaseUI/heroVariables.ts create mode 100644 docs/src/components/productCore/CoreHeroEnd.tsx delete mode 100644 docs/src/components/productMaterial/MaterialHeroEnd.tsx diff --git a/.stylelintrc.js b/.stylelintrc.js index 5ca7d8af49ca68..3fbebcc38f0350 100644 --- a/.stylelintrc.js +++ b/.stylelintrc.js @@ -7,6 +7,7 @@ module.exports = { ], rules: { 'alpha-value-notation': null, + 'custom-property-pattern': null, 'declaration-colon-newline-after': null, 'function-parentheses-newline-inside': null, // not compatible with prettier 'media-feature-range-notation': null, diff --git a/docs/pages/_document.js b/docs/pages/_document.js index d49fc3be4466a5..a88fd85330e2aa 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -84,10 +84,11 @@ export default class MyDocument extends Document { href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap" rel="stylesheet" /> - 6kb) - href="/static/fonts/PlusJakartaSans-ExtraBold-subset.woff2" + href="/static/fonts/GeneralSans-Semibold-subset.woff2" as="font" type="font/woff2" crossOrigin="anonymous" @@ -96,14 +97,32 @@ export default class MyDocument extends Document { // the above does not work in mobile device, this inline