From fa097e8f569287dec7d8cc3b62d1c6ee0a80bbd3 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Thu, 14 Nov 2024 17:34:42 -0400 Subject: [PATCH] new products menu --- apps/www/components/Nav/MenuItem.tsx | 6 +- .../components/Nav/ProductDropdown copy.tsx | 186 ++++++++++++++++++ apps/www/components/Nav/ProductDropdown.tsx | 157 ++++++++++----- .../Pricing/PricingComparisonTable.tsx | 2 +- apps/www/components/Products/index.tsx | 4 +- apps/www/data/IntegrationsProducts.tsx | 50 +++++ .../data/{Solutions.tsx => MainProducts.tsx} | 6 +- apps/www/data/home/content.tsx | 4 +- apps/www/data/nav.tsx | 4 +- apps/www/data/products/functions/page.tsx | 2 +- apps/www/pages/auth.tsx | 6 +- apps/www/pages/database.tsx | 14 +- apps/www/pages/realtime.tsx | 6 +- apps/www/pages/storage.tsx | 2 +- packages/shared-data/products.ts | 51 ++++- 15 files changed, 423 insertions(+), 77 deletions(-) create mode 100644 apps/www/components/Nav/ProductDropdown copy.tsx create mode 100644 apps/www/data/IntegrationsProducts.tsx rename apps/www/data/{Solutions.tsx => MainProducts.tsx} (96%) diff --git a/apps/www/components/Nav/MenuItem.tsx b/apps/www/components/Nav/MenuItem.tsx index fc95934548b..48fa9814944 100644 --- a/apps/www/components/Nav/MenuItem.tsx +++ b/apps/www/components/Nav/MenuItem.tsx @@ -40,7 +40,7 @@ const MenuItem = React.forwardRef< {children ?? ( <> {icon && ( -
+
)}
{description && ( -

+

{description}

)} diff --git a/apps/www/components/Nav/ProductDropdown copy.tsx b/apps/www/components/Nav/ProductDropdown copy.tsx new file mode 100644 index 00000000000..70384447098 --- /dev/null +++ b/apps/www/components/Nav/ProductDropdown copy.tsx @@ -0,0 +1,186 @@ +import React from 'react' +import Image from 'next/image' +import { useRouter } from 'next/router' +import Link from 'next/link' +import { ChevronRight, Sparkles } from 'lucide-react' + +import { useBreakpoint } from 'common' +import { TextLink } from 'ui' +import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu' +import MenuItem from './MenuItem' + +import ComparisonsData from '~/data/Comparisons' +import CustomersData from '~/data/CustomerStories' +import MainProductsData from '~/data/MainProducts' +import IntegrationsProductsData from '~/data/IntegrationsProducts' + +const ProductDropdown = () => { + const { basePath } = useRouter() + const isTablet = useBreakpoint(1279) + + return ( +
+
+
    + {Object.values(MainProductsData) + .filter((product) => product.name !== 'Vector') + .map((product) => ( + + + + ))} +
+
+
+ Postgres Integrations +
+
    + {Object.values(IntegrationsProductsData).map((subProduct) => ( + + +
    + +
    +
    +
    +

    {subProduct.name}

    + +
    + {subProduct.description_short && ( +

    + {subProduct.description_short} +

    + )} +
    + +     + ))} +
+ +
+
+ +
+
+ Features + + Explore everything you can do with Supabase. + +
+
+ + +
+
+
+
+
+ + Customer Stories + + +
    + {CustomersData.slice(0, isTablet ? 2 : 2).map((customer) => ( +
  • + +
    + {customer.title} +
    +
    +

    + {customer.title} +

    +
    + +
    • + ))} +
+
+
+
+
+

+ {ComparisonsData.label} +

+
    + {ComparisonsData.comparisons.map((link) => ( +
  • + +
    • + ))} +
+
+
+
+
+ ) +} + +export default ProductDropdown diff --git a/apps/www/components/Nav/ProductDropdown.tsx b/apps/www/components/Nav/ProductDropdown.tsx index 4f8249c8efc..da3c11ea5e9 100644 --- a/apps/www/components/Nav/ProductDropdown.tsx +++ b/apps/www/components/Nav/ProductDropdown.tsx @@ -2,70 +2,131 @@ import React from 'react' import Image from 'next/image' import { useRouter } from 'next/router' import Link from 'next/link' -import { ChevronRight, LayoutGrid, Sparkles } from 'lucide-react' +import { ChevronRight, Sparkles } from 'lucide-react' import { useBreakpoint } from 'common' import { TextLink } from 'ui' import { NavigationMenuLink } from 'ui/src/components/shadcn/ui/navigation-menu' import MenuItem from './MenuItem' -import EventCallout from '~/components/EventCallout' -import Panel from '~/components/Panel' - -import ComparisonsData from 'data/Comparisons' -import CustomersData from 'data/CustomerStories' -import SolutionsData from 'data/Solutions' +import ComparisonsData from '~/data/Comparisons' +import CustomersData from '~/data/CustomerStories' +import MainProductsData from '~/data/MainProducts' +import IntegrationsProductsData from '~/data/IntegrationsProducts' const ProductDropdown = () => { const { basePath } = useRouter() const isTablet = useBreakpoint(1279) return ( -
-
    - {Object.values(SolutionsData).map((component) => ( - - - - ))} -
-
-
- +
+
+
    + {Object.values(MainProductsData) + .filter((product) => product.name !== 'Vector') + .map((product) => ( + + + + ))} +
+
+
+ Postgres Integrations +
+
    + {Object.values(IntegrationsProductsData).map((subProduct) => ( + + +
    + +
    +
    +
    +

    {subProduct.name}

    + +
    + {subProduct.description_short && ( +

    + {subProduct.description_short} +

    + )} +
    + +     + ))} +
+ -
-
- + > +
+
+ +
+
+ Features + + Explore everything you can do with Supabase. + +
-
- Features - - Explore everything you can do with Supabase. - -
-
- - + + +
+
+ {/*
+ +
*/} +
+
+
{
    - {CustomersData.slice(0, isTablet ? 2 : 2).map((customer) => ( + {CustomersData.slice(0, isTablet ? 2 : 1).map((customer) => (
  • -
    +
    {customer.title}
    @@ -100,7 +161,7 @@ const ProductDropdown = () => {
-
+

{ComparisonsData.label} diff --git a/apps/www/components/Pricing/PricingComparisonTable.tsx b/apps/www/components/Pricing/PricingComparisonTable.tsx index ae7c4132f4e..f43380d68b8 100644 --- a/apps/www/components/Pricing/PricingComparisonTable.tsx +++ b/apps/www/components/Pricing/PricingComparisonTable.tsx @@ -8,7 +8,7 @@ import { pricing } from 'shared-data/pricing' import { Button, Select, cn } from 'ui' import { PricingTableRowDesktop, PricingTableRowMobile } from '~/components/Pricing/PricingTableRow' import { Organization } from '~/data/organizations' -import Solutions from '~/data/Solutions' +import Solutions from '~/data/MainProducts' import gaEvents from '~/lib/gaEvents' import Telemetry, { TelemetryEvent } from '~/lib/telemetry' import UpgradePlan from './UpgradePlan' diff --git a/apps/www/components/Products/index.tsx b/apps/www/components/Products/index.tsx index 6bdc42adc2c..7882bb9b030 100644 --- a/apps/www/components/Products/index.tsx +++ b/apps/www/components/Products/index.tsx @@ -16,10 +16,10 @@ import { PRODUCT_SHORTNAMES } from 'shared-data/products' import gaEvents from '~/lib/gaEvents' import Telemetry from '~/lib/telemetry' -import type { SolutionsType } from '~/data/Solutions' +import type { ProductType } from '~/data/MainProducts' interface Props { - products: SolutionsType + products: ProductType } const Products: React.FC = (props) => { diff --git a/apps/www/data/IntegrationsProducts.tsx b/apps/www/data/IntegrationsProducts.tsx new file mode 100644 index 00000000000..4ad9fd2425d --- /dev/null +++ b/apps/www/data/IntegrationsProducts.tsx @@ -0,0 +1,50 @@ +import { + PRODUCT_INTEGRATION_NAMES, + PRODUCT_INTEGRATIONS, + PRODUCT_SHORTNAMES, +} from 'shared-data/products' +import { ProductType } from './MainProducts' + +const IntegrationsProducts: ProductType = { + [PRODUCT_SHORTNAMES.VECTOR]: { + name: PRODUCT_INTEGRATION_NAMES.VECTOR, + icon: PRODUCT_INTEGRATIONS.vector.icon[24], + description: ( + <> + Integrate your favorite ML-models to{' '} + store, index and search vector embeddings. + + ), + description_short: 'AI toolkit to manage embeddings', + label: '', + url: '/product/integrations/vector', + }, + cron_jobs: { + name: PRODUCT_INTEGRATION_NAMES.CRON_JOBS, + icon: PRODUCT_INTEGRATIONS['cron-jobs'].icon[24], + description: ( + <> + Integrate your favorite ML-models to{' '} + store, index and search vector embeddings. + + ), + description_short: 'Schedule, manage and monitor jobs', + label: '', + url: '/product/integrations/cron-jobs', + }, + queues: { + name: PRODUCT_INTEGRATION_NAMES.QUEUES, + icon: PRODUCT_INTEGRATIONS.queues.icon[24], + description: ( + <> + Native Postgres queuing solution for dedicated message queues with the simplicity of SQL and + zero additional infrastructure + + ), + description_short: 'Native pull queues without headache', + label: '', + url: '/product/integrations/queues', + }, +} + +export default IntegrationsProducts diff --git a/apps/www/data/Solutions.tsx b/apps/www/data/MainProducts.tsx similarity index 96% rename from apps/www/data/Solutions.tsx rename to apps/www/data/MainProducts.tsx index 7d3abff00fe..699d59c4db0 100644 --- a/apps/www/data/Solutions.tsx +++ b/apps/www/data/MainProducts.tsx @@ -1,7 +1,7 @@ import { products } from 'shared-data' import { PRODUCT_NAMES, PRODUCT_SHORTNAMES } from 'shared-data/products' -export type SolutionsType = { +export type ProductType = { [key: string]: { name: string icon: string @@ -12,7 +12,7 @@ export type SolutionsType = { } } -const solutions: SolutionsType = { +const MainProducts: ProductType = { [PRODUCT_SHORTNAMES.DATABASE]: { name: PRODUCT_NAMES.DATABASE, icon: products.database.icon[24], @@ -89,4 +89,4 @@ const solutions: SolutionsType = { }, } -export default solutions +export default MainProducts diff --git a/apps/www/data/home/content.tsx b/apps/www/data/home/content.tsx index aea0dca0929..d3481931097 100644 --- a/apps/www/data/home/content.tsx +++ b/apps/www/data/home/content.tsx @@ -1,4 +1,4 @@ -import solutions from '~/data/Solutions' +import MainProducts from '~/data/MainProducts' import VideoWithHighlights from '~/components/VideoWithHighlights' export default { @@ -32,7 +32,7 @@ export default { }, productsSection: { products: { - ...solutions, + ...MainProducts, 'data-api': { name: 'Data APIs', icon: 'M4.13477 12.8129C4.13477 14.1481 4.43245 15.4138 4.96506 16.5471M12.925 4.02271C11.5644 4.02271 10.276 4.33184 9.12614 4.88371M21.7152 12.8129C21.7152 11.4644 21.4115 10.1867 20.8688 9.0447M12.925 21.6032C14.2829 21.6032 15.5689 21.2952 16.717 20.7454M16.717 20.7454C17.2587 21.5257 18.1612 22.0366 19.1831 22.0366C20.84 22.0366 22.1831 20.6935 22.1831 19.0366C22.1831 17.3798 20.84 16.0366 19.1831 16.0366C17.5263 16.0366 16.1831 17.3798 16.1831 19.0366C16.1831 19.6716 16.3804 20.2605 16.717 20.7454ZM4.96506 16.5471C4.16552 17.086 3.63965 17.9999 3.63965 19.0366C3.63965 20.6935 4.98279 22.0366 6.63965 22.0366C8.2965 22.0366 9.63965 20.6935 9.63965 19.0366C9.63965 17.3798 8.2965 16.0366 6.63965 16.0366C6.01951 16.0366 5.44333 16.2248 4.96506 16.5471ZM9.12614 4.88371C8.58687 4.08666 7.67444 3.56274 6.63965 3.56274C4.98279 3.56274 3.63965 4.90589 3.63965 6.56274C3.63965 8.2196 4.98279 9.56274 6.63965 9.56274C8.2965 9.56274 9.63965 8.2196 9.63965 6.56274C9.63965 5.94069 9.45032 5.36285 9.12614 4.88371ZM20.8688 9.0447C21.6621 8.50486 22.1831 7.59464 22.1831 6.56274C22.1831 4.90589 20.84 3.56274 19.1831 3.56274C17.5263 3.56274 16.1831 4.90589 16.1831 6.56274C16.1831 8.2196 17.5263 9.56274 19.1831 9.56274C19.8081 9.56274 20.3884 9.37165 20.8688 9.0447Z', diff --git a/apps/www/data/nav.tsx b/apps/www/data/nav.tsx index c74aa12c919..ae2b8489f9e 100644 --- a/apps/www/data/nav.tsx +++ b/apps/www/data/nav.tsx @@ -2,7 +2,7 @@ import DevelopersDropdown from '~/components/Nav/DevelopersDropdown' import ProductDropdown from '~/components/Nav/ProductDropdown' import { data as DevelopersData } from 'data/Developers' -import SolutionsData from 'data/Solutions' +import MainProductsData from '~/data/MainProducts' export const getMenu = () => ({ primaryNav: [ @@ -11,7 +11,7 @@ export const getMenu = () => ({ hasDropdown: true, dropdown: , dropdownContainerClassName: 'rounded-xl', - subMenu: SolutionsData, + subMenu: MainProductsData, }, { title: 'Developers', diff --git a/apps/www/data/products/functions/page.tsx b/apps/www/data/products/functions/page.tsx index 304be154d07..b3149d7efe8 100644 --- a/apps/www/data/products/functions/page.tsx +++ b/apps/www/data/products/functions/page.tsx @@ -4,7 +4,7 @@ import Link from 'next/link' import { PRODUCT_NAMES } from 'shared-data/products' import Examples from '~/data/Examples' -import solutions from '~/data/Solutions' +import solutions from '~/data/MainProducts' const FunctionsHero = dynamic(() => import('~/components/Products/Functions/FunctionsHero')) const RealtimeLogs = dynamic(() => import('~/components/Products/Functions/RealtimeLogs')) diff --git a/apps/www/pages/auth.tsx b/apps/www/pages/auth.tsx index 34b7da5090e..22ef21e7a3e 100644 --- a/apps/www/pages/auth.tsx +++ b/apps/www/pages/auth.tsx @@ -15,7 +15,7 @@ import ProductsNav from '~/components/Products/ProductsNav' import ProductHeader from '~/components/Sections/ProductHeader' import EventCallout from '~/components/EventCallout' -import Solutions from 'data/Solutions' +import MainProducts from '~/data/MainProducts' import { PRODUCT_NAMES } from 'shared-data/products' import AuthProviders from '~/data/auth.json' @@ -60,8 +60,8 @@ function AuthPage() { className="mb-4 lg:mb-8 -mt-8 lg:-mt-10" /> } - icon={Solutions['authentication'].icon} - title={Solutions['authentication'].name} + icon={MainProducts['authentication'].icon} + title={MainProducts['authentication'].name} h1={[ Open Source Auth diff --git a/apps/www/pages/database.tsx b/apps/www/pages/database.tsx index 648e25971ad..9b8a1b578b3 100644 --- a/apps/www/pages/database.tsx +++ b/apps/www/pages/database.tsx @@ -11,7 +11,7 @@ import { Swiper, SwiperSlide } from 'swiper/react' import { Badge, Button, Image, Tabs } from 'ui' // data -import Solutions from 'data/Solutions' +import MainProducts from '~/data/MainProducts' import ApiExamplesData from 'data/products/database/api-examples' import ExtensionsExamplesData from 'data/products/database/extensions-examples' import SqlViewCarouselData from 'data/products/database/sql-view-carousel.json' @@ -72,8 +72,8 @@ function Database() { Open Source SQL Database @@ -103,7 +103,7 @@ function Database() {

- +
- + - +

Built-in Auth

@@ -136,7 +136,7 @@ function Database() {
- +
diff --git a/apps/www/pages/realtime.tsx b/apps/www/pages/realtime.tsx index dbab01a347a..a659e4c77b8 100644 --- a/apps/www/pages/realtime.tsx +++ b/apps/www/pages/realtime.tsx @@ -1,6 +1,6 @@ import ApiExamples from 'data/products/realtime/api-examples' import AppExamples from 'data/products/realtime/app-examples' -import Solutions from 'data/Solutions' +import MainProducts from '~/data/MainProducts' import { NextSeo } from 'next-seo' import Link from 'next/link' import { useRouter } from 'next/router' @@ -62,8 +62,8 @@ function RealtimePage() { Build modern web and mobile applications]} subheader={['Sync client state globally over WebSockets in Realtime']} image={[ diff --git a/apps/www/pages/storage.tsx b/apps/www/pages/storage.tsx index ffc95d4c53a..8b972b4ce0a 100644 --- a/apps/www/pages/storage.tsx +++ b/apps/www/pages/storage.tsx @@ -1,7 +1,7 @@ import ApiExamples from 'data/products/storage/api-examples' import DashboardViewData from 'data/products/storage/dashboard-carousel.json' import StoragePermissionsData from 'data/products/storage/permissions-examples' -import Solutions from 'data/Solutions' +import Solutions from '~/data/MainProducts' import { ArrowUpRight, Shuffle, Wifi, X } from 'lucide-react' import { NextSeo } from 'next-seo' import Link from 'next/link' diff --git a/packages/shared-data/products.ts b/packages/shared-data/products.ts index 0dbcf7f030f..a47a729f56c 100644 --- a/packages/shared-data/products.ts +++ b/packages/shared-data/products.ts @@ -24,6 +24,24 @@ export enum PRODUCT_SHORTNAMES { VECTOR = 'vector', } +export type PRODUCT_INTEGRATION = + | PRODUCT_INTEGRATIONS_SHORTNAMES.CRON_JOBS + | PRODUCT_INTEGRATIONS_SHORTNAMES.QUEUES + | PRODUCT_INTEGRATIONS_SHORTNAMES.VECTOR + +// Product Integrations +export enum PRODUCT_INTEGRATION_NAMES { + CRON_JOBS = 'Cron Jobs', + QUEUES = 'Queues', + VECTOR = 'Vector', +} + +export enum PRODUCT_INTEGRATIONS_SHORTNAMES { + CRON_JOBS = 'cron-jobs', + QUEUES = 'queues', + VECTOR = 'vector', +} + // icon can be 16px, 18px or 24px interface Icon { '16': string @@ -32,7 +50,7 @@ interface Icon { } export interface ProductProps { - name: PRODUCT_NAMES + name: PRODUCT_NAMES | PRODUCT_INTEGRATION_NAMES icon: Icon } @@ -40,6 +58,10 @@ export type Products = { [product in PRODUCT]: ProductProps } +export type ProductIntegrations = { + [product in PRODUCT_INTEGRATION]: ProductProps +} + export const products: Products = { database: { name: PRODUCT_NAMES.DATABASE, @@ -90,3 +112,30 @@ export const products: Products = { }, }, } + +export const PRODUCT_INTEGRATIONS: ProductIntegrations = { + 'cron-jobs': { + name: PRODUCT_INTEGRATION_NAMES.CRON_JOBS, + icon: { + '16': 'M8.02637 4.34082V8.09082H10.8389M14.2764 8.09082C14.2764 11.5426 11.4781 14.3408 8.02637 14.3408C4.57459 14.3408 1.77637 11.5426 1.77637 8.09082C1.77637 4.63904 4.57459 1.84082 8.02637 1.84082C11.4781 1.84082 14.2764 4.63904 14.2764 8.09082Z', + '18': 'M8.02637 4.34082V8.09082H10.8389M14.2764 8.09082C14.2764 11.5426 11.4781 14.3408 8.02637 14.3408C4.57459 14.3408 1.77637 11.5426 1.77637 8.09082C1.77637 4.63904 4.57459 1.84082 8.02637 1.84082C11.4781 1.84082 14.2764 4.63904 14.2764 8.09082Z', + '24': 'M12 6.375V12H16.2188M21.375 12C21.375 17.1777 17.1777 21.375 12 21.375C6.82233 21.375 2.625 17.1777 2.625 12C2.625 6.82233 6.82233 2.625 12 2.625C17.1777 2.625 21.375 6.82233 21.375 12Z', + }, + }, + queues: { + name: PRODUCT_INTEGRATION_NAMES.QUEUES, + icon: { + '16': 'M9.27637 1.84082H12.7764C13.6048 1.84082 14.2764 2.51239 14.2764 3.34082V6.84082C14.2764 7.66925 13.6048 8.34082 12.7764 8.34082H9.27637C8.44794 8.34082 7.77637 7.66925 7.77637 6.84082V3.34082C7.77637 2.51239 8.44794 1.84082 9.27637 1.84082Z', + '18': 'M9.27637 1.84082H12.7764C13.6048 1.84082 14.2764 2.51239 14.2764 3.34082V6.84082C14.2764 7.66925 13.6048 8.34082 12.7764 8.34082H9.27637C8.44794 8.34082 7.77637 7.66925 7.77637 6.84082V3.34082C7.77637 2.51239 8.44794 1.84082 9.27637 1.84082Z', + '24': 'M17.625 16.2902C17.625 17.0274 17.0274 17.625 16.2902 17.625H9.375C7.71815 17.625 6.375 16.2819 6.375 14.625V8.14725C6.375 7.16846 7.16846 6.375 8.14725 6.375M13.125 20.7902C13.125 21.5274 12.5274 22.125 11.7902 22.125H4.875C3.21815 22.125 1.875 20.7819 1.875 19.125V12.6472C1.875 11.6685 2.66846 10.875 3.64725 10.875M13.875 13.125H19.125C20.7819 13.125 22.125 11.7819 22.125 10.125V4.875C22.125 3.21815 20.7819 1.875 19.125 1.875H13.875C12.2181 1.875 10.875 3.21815 10.875 4.875V10.125C10.875 11.7819 12.2181 13.125 13.875 13.125Z', + }, + }, + vector: { + name: PRODUCT_INTEGRATION_NAMES.VECTOR, + icon: { + '16': 'M7.99886 7.63216V14.4892M7.99886 7.63216L14.0488 4.11804M7.99886 7.63216L1.94922 4.11819M1.94922 4.11819V8.32332M1.94922 4.11819V4.08217L5.57319 1.97717M14.049 8.36007V4.08217L10.4251 1.97717M11.8165 12.4072L7.99913 14.6245L4.18177 12.4072', + '18': 'M8.61033 8.15404V16.8287M8.61033 8.15404L16.264 3.70838M8.61033 8.15404L0.957031 3.70858M0.957031 3.70858V9.02842M0.957031 3.70858V3.66301L5.54166 1M16.2643 9.07491V3.66301L11.6797 1M13.44 14.1949L8.61068 17L3.7814 14.1949', + '24': 'M11.9983 11.4482V21.7337M11.9983 11.4482L21.0732 6.17699M11.9983 11.4482L2.92383 6.17723M2.92383 6.17723V12.4849M2.92383 6.17723V6.1232L8.35978 2.9657M21.0736 12.54V6.1232L15.6376 2.9657M17.7247 18.6107L11.9987 21.9367L6.27265 18.6107', + }, + }, +}