From 655893e5014b44842a54bd9b0cdc4718ea4cf503 Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Mon, 9 Oct 2023 18:49:52 +0200 Subject: [PATCH] Navbar update (#17756) * update desktop and mobile www navbar --- apps/www/components/Layouts/Default.tsx | 1 - apps/www/components/Nav/Company.tsx | 95 ---- apps/www/components/Nav/Developers.tsx | 102 ---- .../www/components/Nav/DevelopersDropdown.tsx | 97 ++++ apps/www/components/Nav/GitHubButton.tsx | 59 +++ apps/www/components/Nav/HamburgerMenu.tsx | 58 +++ apps/www/components/Nav/MenuItem.tsx | 68 +++ apps/www/components/Nav/MobileMenu.tsx | 200 ++++++++ apps/www/components/Nav/Product.tsx | 91 ---- apps/www/components/Nav/ProductDropdown.tsx | 90 ++++ apps/www/components/Nav/index.tsx | 480 ++++-------------- ...BecomeAPartners.tsx => BecomeAPartner.tsx} | 0 apps/www/components/ProductIcon.tsx | 42 +- apps/www/components/Products/ProductCard.tsx | 1 - .../www/components/Products/StorageVisual.tsx | 18 +- apps/www/data/Company.json | 26 - apps/www/data/Comparisons.tsx | 17 + apps/www/data/CustomerStories.json | 138 ----- apps/www/data/CustomerStories.ts | 149 ++++++ apps/www/data/Developers.tsx | 130 +++-- apps/www/data/Solutions.ts | 12 +- apps/www/data/nav.tsx | 36 ++ apps/www/pages/index.tsx | 2 +- apps/www/pages/partners/experts/index.tsx | 2 +- .../www/pages/partners/integrations/index.tsx | 2 +- apps/www/public/customers-rss.xml | 16 +- packages/ui/src/components/Button/Button.tsx | 5 +- .../ui/src/components/TextLink/TextLink.tsx | 37 +- .../components/shadcn/ui/navigation-menu.tsx | 15 +- packages/ui/src/lib/theme/defaultTheme.ts | 1 + 30 files changed, 1068 insertions(+), 922 deletions(-) delete mode 100644 apps/www/components/Nav/Company.tsx delete mode 100644 apps/www/components/Nav/Developers.tsx create mode 100644 apps/www/components/Nav/DevelopersDropdown.tsx create mode 100644 apps/www/components/Nav/GitHubButton.tsx create mode 100644 apps/www/components/Nav/HamburgerMenu.tsx create mode 100644 apps/www/components/Nav/MenuItem.tsx create mode 100644 apps/www/components/Nav/MobileMenu.tsx delete mode 100644 apps/www/components/Nav/Product.tsx create mode 100644 apps/www/components/Nav/ProductDropdown.tsx rename apps/www/components/Partners/{BecomeAPartners.tsx => BecomeAPartner.tsx} (100%) delete mode 100644 apps/www/data/Company.json create mode 100644 apps/www/data/Comparisons.tsx delete mode 100644 apps/www/data/CustomerStories.json create mode 100644 apps/www/data/CustomerStories.ts create mode 100644 apps/www/data/nav.tsx diff --git a/apps/www/components/Layouts/Default.tsx b/apps/www/components/Layouts/Default.tsx index b869456d43e..46050003cfc 100644 --- a/apps/www/components/Layouts/Default.tsx +++ b/apps/www/components/Layouts/Default.tsx @@ -1,4 +1,3 @@ -import { useEffect } from 'react' import Nav from 'components/Nav/index' import Footer from 'components/Footer/index' diff --git a/apps/www/components/Nav/Company.tsx b/apps/www/components/Nav/Company.tsx deleted file mode 100644 index 620acfb2ef0..00000000000 --- a/apps/www/components/Nav/Company.tsx +++ /dev/null @@ -1,95 +0,0 @@ -import React from 'react' -import CompanyData from 'data/Company.json' -import BlogPostsData from 'data/BlogPosts.json' - -type Props = { - text: string - description?: string - url?: string - icon?: string -} - -const Company = () => { - const iconSections = Object.values(CompanyData).map((company: Props) => { - const { text, description, url, icon } = company - - const content = ( - - {/* */} - -
-

{text}

-

{description}

-
- - ) - return ( - - {content} - - ) - }) - - return ( - - -
-
-

- Latest blog posts -

- -
-
- - View all posts - -
-
- - ) -} - -export default Company diff --git a/apps/www/components/Nav/Developers.tsx b/apps/www/components/Nav/Developers.tsx deleted file mode 100644 index 1663d190aca..00000000000 --- a/apps/www/components/Nav/Developers.tsx +++ /dev/null @@ -1,102 +0,0 @@ -import React from 'react' -import { links } from 'data/Developers' -import AnnouncementsData from 'data/Announcements.json' -import { useRouter } from 'next/router' -import Image from 'next/image' -import Link from 'next/link' -import { TextLink } from 'ui' - -type Props = { - text: string - description?: string - url?: string - icon?: string - svg?: any -} - -const Developers = () => { - const { basePath } = useRouter() - - const iconSections = links.map((link: Props) => { - const { text, description, url, icon, svg: Svg } = link - - const content = ( -
- {/* */} - {icon && ( - - )} - {Svg && } -
-
{text}
-

{description}

-
-
- ) - return url ? ( - - - {content} - - - ) : ( -
- {content} -
- ) - }) - - return ( -
- -
-
-

Latest announcements

- -
- -
-
-
-
- ) -} - -export default Developers diff --git a/apps/www/components/Nav/DevelopersDropdown.tsx b/apps/www/components/Nav/DevelopersDropdown.tsx new file mode 100644 index 00000000000..f2390d0c624 --- /dev/null +++ b/apps/www/components/Nav/DevelopersDropdown.tsx @@ -0,0 +1,97 @@ +import React from 'react' +import Link from 'next/link' +import { IconChevronRight } from 'ui' + +import Announcements from '~/data/Announcements.json' +import { data as DevelopersData } from 'data/Developers' + +type Props = { + text: string + description?: string + url?: string + icon?: string + svg?: any +} + +const DevelopersDropdown = () => { + const iconsWithFill = ['GitHub Discussions', 'Launch Week', 'Open Source'] + + return ( +
+
+ {DevelopersData['navigation'].map((column) => ( +
+ + +
+ ))} +
+
+
+ + + Blog + + + + +
+
+
+ ) +} + +export default DevelopersDropdown diff --git a/apps/www/components/Nav/GitHubButton.tsx b/apps/www/components/Nav/GitHubButton.tsx new file mode 100644 index 00000000000..edfdea6e9be --- /dev/null +++ b/apps/www/components/Nav/GitHubButton.tsx @@ -0,0 +1,59 @@ +import React, { useEffect, useState } from 'react' +import { Button } from 'ui' +import { Octokit } from 'octokit' + +const GitHubButton = () => { + const [stars, setStars] = useState('56') + const octokit = new Octokit() + + const kFormatter = (num: number) => { + const kFormat = num / 1000 + const decimals = kFormat.toString().split('.')[1] + const firstDecimal = decimals.split('')[0] + const showDecimals = firstDecimal !== '0' + + return kFormat.toFixed(showDecimals ? 1 : 0) + } + + useEffect(() => { + async function fetchOctoData() { + const res = await octokit.request('GET /repos/{org}/{repo}', { + org: 'supabase', + repo: 'supabase', + type: 'public', + }) + + setStars(kFormatter(res.data?.stargazers_count)) + } + fetchOctoData() + }, []) + + return ( + + ) +} + +export default GitHubButton diff --git a/apps/www/components/Nav/HamburgerMenu.tsx b/apps/www/components/Nav/HamburgerMenu.tsx new file mode 100644 index 00000000000..73a46defce6 --- /dev/null +++ b/apps/www/components/Nav/HamburgerMenu.tsx @@ -0,0 +1,58 @@ +import React from 'react' +import { cn } from 'ui' + +type HamburgerButtonProps = { + toggleFlyOut: Function + showLaunchWeekNavMode?: boolean +} + +const HamburgerButton = (props: HamburgerButtonProps) => ( +
props.toggleFlyOut()} + > + +
+) + +export default HamburgerButton diff --git a/apps/www/components/Nav/MenuItem.tsx b/apps/www/components/Nav/MenuItem.tsx new file mode 100644 index 00000000000..e2493557691 --- /dev/null +++ b/apps/www/components/Nav/MenuItem.tsx @@ -0,0 +1,68 @@ +import React from 'react' +import Link from 'next/link' +import { IconChevronRight, cn } from 'ui' + +const MenuItem = React.forwardRef< + React.ElementRef<'a'>, + React.ComponentPropsWithoutRef<'a'> & { + description?: string + icon?: string + hasChevron?: boolean + } +>(({ className, title, href = '', description, icon, hasChevron, children, ...props }, ref) => { + return ( + + + {children ?? ( + <> + {icon && ( +
+ +
+ )} +
+
+

{title}

+ {hasChevron && ( + + )} +
+ {description && ( +

+ {description} +

+ )} +
+ + )} + + + ) +}) + +export default MenuItem diff --git a/apps/www/components/Nav/MobileMenu.tsx b/apps/www/components/Nav/MobileMenu.tsx new file mode 100644 index 00000000000..5860f7f2e76 --- /dev/null +++ b/apps/www/components/Nav/MobileMenu.tsx @@ -0,0 +1,200 @@ +import React, { Dispatch, SetStateAction } from 'react' +import Image from 'next/image' +import Link from 'next/link' +import { m, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion' + +import { DEFAULT_EASE } from '~/lib/animations' +import { Accordion, Button, TextLink } from 'ui' +import MenuItem from './MenuItem' + +import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png' +import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png' +import { useKey } from 'react-use' + +interface Props { + open: boolean + setOpen: Dispatch> + isDarkMode: boolean + menu: any +} + +const MobileMenu = ({ open, setOpen, isDarkMode, menu }: Props) => { + const container = { + hidden: { opacity: 0 }, + show: { opacity: 1, transition: { duration: 0.15, staggerChildren: 0.05, ease: DEFAULT_EASE } }, + exit: { opacity: 0, transition: { duration: 0.15 } }, + } + + const listItem = { + hidden: { opacity: 0, y: 10 }, + show: { opacity: 1, y: 0, transition: { duration: 0.25, ease: DEFAULT_EASE } }, + exit: { opacity: 0, transition: { duration: 0.05 } }, + } + + useKey('Escape', () => setOpen(false)) + + const AccordionMenuItem = ({ menuItem }: any) => ( + <> + {menuItem.title === 'Product' ? ( + Object.values(menuItem.subMenu)?.map((component: any) => ( + + )) + ) : menuItem.title === 'Developers' ? ( +
+ {menuItem.subMenu['navigation'].map((column: any) => ( +
+ {column.label !== 'Developers' && ( + + )} + {column.links.map((link: any) => ( + + ))} +
+ ))} + +
+ + + +
+
+ ) : null} + + ) + + const Menu = () => ( + + {menu.primaryNav.map((menuItem: any) => ( + + {menuItem.hasDropdown ? ( + + + + ) : ( + + + {menuItem.title} + + + )} + + ))} + + ) + + return ( + + + {open && ( + +
+ + + Supabase Logo + + + +
+
+ +
+
+ + + + + + +
+ + )} + + + {open && ( + + )} + + + ) +} + +export default MobileMenu diff --git a/apps/www/components/Nav/Product.tsx b/apps/www/components/Nav/Product.tsx deleted file mode 100644 index 9720208e620..00000000000 --- a/apps/www/components/Nav/Product.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from 'react' -import SolutionsData from 'data/Solutions' -import CustomerStoriesData from 'data/CustomerStories.json' -import { useRouter } from 'next/router' -import ProductIcon from '../ProductIcon' -import { Badge } from 'ui' -import Image from 'next/image' -import Link from 'next/link' -import TextLink from '../TextLink' - -const Product = () => { - const { basePath } = useRouter() - - const iconSections = Object.values(SolutionsData).map((solution) => { - const { name, description, icon, label, url } = solution - - const content = ( -
-
- -
{name}
-
-
-

{description}

- {label && ( -
- {label} -
- )} -
-
- ) - return ( - url && ( - - - {content} - - - ) - ) - }) - - return ( -
- -
-
-

Latest customer stories

- -
- -
-
-
-
- ) -} - -export default Product diff --git a/apps/www/components/Nav/ProductDropdown.tsx b/apps/www/components/Nav/ProductDropdown.tsx new file mode 100644 index 00000000000..032144b5731 --- /dev/null +++ b/apps/www/components/Nav/ProductDropdown.tsx @@ -0,0 +1,90 @@ +import React from 'react' +import Image from 'next/image' +import { useRouter } from 'next/router' +import Link from 'next/link' + +import { useBreakpoint } from 'common' +import { IconChevronRight, 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 SolutionsData from 'data/Solutions' + +const ProductDropdown = () => { + const { basePath } = useRouter() + const isTablet = useBreakpoint(1279) + + return ( +
+
    + {Object.values(SolutionsData).map((component) => ( + + + + ))} +
+
+
+ + + Customer Stories + + + + +
+
+

+ {ComparisonsData.label} +

+
    + {ComparisonsData.comparisons.map((link) => ( +
  • + +
    • + ))} +
+
+
+
+ ) +} + +export default ProductDropdown diff --git a/apps/www/components/Nav/index.tsx b/apps/www/components/Nav/index.tsx index 9c0d69b725b..035952eaa13 100644 --- a/apps/www/components/Nav/index.tsx +++ b/apps/www/components/Nav/index.tsx @@ -1,38 +1,41 @@ import React, { useState } from 'react' +import Image from 'next/image' import Link from 'next/link' import { useRouter } from 'next/router' - -import { Button, Badge, IconStar, IconChevronDown } from 'ui' -import FlyOut from '~/components/UI/FlyOut' -import Transition from 'lib/Transition' - -import SolutionsData from 'data/Solutions' - -import Solutions from '~/components/Nav/Product' -import Developers from '~/components/Nav/Developers' - -import ScrollProgress from '~/components/ScrollProgress' - -import { useIsLoggedIn, useIsUserLoading } from 'common' import { useTheme } from 'next-themes' -import TextLink from '../TextLink' -import Image from 'next/image' +import { useWindowSize } from 'react-use' + +import { Button, cn } from 'ui' +import { + NavigationMenu, + NavigationMenuContent, + NavigationMenuItem, + NavigationMenuLink, + NavigationMenuList, + NavigationMenuTrigger, +} from 'ui/src/components/shadcn/ui/navigation-menu' +import { useIsLoggedIn, useIsUserLoading } from 'common' +import ScrollProgress from '~/components/ScrollProgress' +import GitHubButton from './GitHubButton' +import HamburgerButton from './HamburgerMenu' +import MobileMenu from './MobileMenu' +import MenuItem from './MenuItem' +import { menu } from '~/data/nav' + import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png' import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png' const Nav = () => { - const { theme, resolvedTheme } = useTheme() + const { resolvedTheme } = useTheme() const router = useRouter() + const { width } = useWindowSize() const [open, setOpen] = useState(false) - const [openProduct, setOpenProduct] = useState(false) - const [openDevelopers, setOpenDevelopers] = useState(false) const isLoggedIn = useIsLoggedIn() const isUserLoading = useIsUserLoading() const isHomePage = router.pathname === '/' const isLaunchWeekPage = router.pathname.includes('launch-week') - const showLaunchWeekNavMode = - (isLaunchWeekPage || isHomePage) && !open && !openProduct && !openDevelopers + const showLaunchWeekNavMode = isLaunchWeekPage && !open React.useEffect(() => { if (open) { @@ -43,188 +46,34 @@ const Nav = () => { } }, [open]) - function handleToggle(callback: any) { - handleCancel() - callback() - } - - function handleCancel() { - setOpenProduct(false) - setOpenDevelopers(false) - } - - const iconSections = Object.values(SolutionsData).map((solution: any, idx: number) => { - const { name, description, icon, label, url } = solution - - const content = ( -
-
-
- {/* */} - -
-
-
-
-

- {name} - {label && ( - - {label} - - )} -

-

{description}

-
- {url && ( -

- -

- )} -
-
- ) - return url ? ( - - - {content} - - - ) : ( -
- {content} -
- ) - }) - - type HamburgerButtonProps = { - toggleFlyOut: Function - showLaunchWeekNavMode?: boolean - } - - const HamburgerButton = (props: HamburgerButtonProps) => ( -
props.toggleFlyOut()} - > - -
- ) - - const FlyOutNavButton = (props: any) => ( -
- <> - {props.title} -
- -
- -
- ) + // Close mobile menu when desktop + React.useEffect(() => { + if (width >= 1024) setOpen(false) + }, [width]) return ( <>
- + - - - - - - +
diff --git a/apps/www/components/Partners/BecomeAPartners.tsx b/apps/www/components/Partners/BecomeAPartner.tsx similarity index 100% rename from apps/www/components/Partners/BecomeAPartners.tsx rename to apps/www/components/Partners/BecomeAPartner.tsx diff --git a/apps/www/components/ProductIcon.tsx b/apps/www/components/ProductIcon.tsx index ad2f9e63072..b07c3796f52 100644 --- a/apps/www/components/ProductIcon.tsx +++ b/apps/www/components/ProductIcon.tsx @@ -1,21 +1,55 @@ +type Color = 'black' | 'gray' | 'green' | 'alt' + interface ProductIcon { icon: string - color?: 'black' | 'green' + color?: Color } function ProductIcon({ icon, color }: ProductIcon) { + const handleColor = (color: Color) => { + switch (color) { + case 'green': + return { + container: 'bg-brand-600 dark:bg-brand-500 text-brand-100', + svg: 'stroke-brand', + } + case 'alt': + return { + container: 'bg-brand-200 text-brand', + svg: 'stroke-brand', + } + case 'gray': + return { + container: 'bg- text-brand', + svg: 'stroke-brand', + } + case 'black': + default: + return { + container: 'bg-scale-1200 text-scale-100', + svg: 'stroke-white dark:stroke-black', + } + } + } + return (
{ role="img" aria-label="Supabase Storage supports images, documents and videos" > - {range(0, 2).map((_rangeCol) => ( -
- {range(0, 10).map((_rangeCol) => ( -
- {cols.map((col: any) => ( -
+ {range(0, 2).map((_, idx1: number) => ( +
+ {range(0, 10).map((_, idx2: number) => ( +
+ {cols.map((col: any, idx3: number) => ( +
{col}
))} diff --git a/apps/www/data/Company.json b/apps/www/data/Company.json deleted file mode 100644 index f418817d2f0..00000000000 --- a/apps/www/data/Company.json +++ /dev/null @@ -1,26 +0,0 @@ -[ - { - "text": "Blog", - "description": "Read the latest developments from Supabase", - "url": "/blog", - "icon": "M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" - }, - { - "text": "Open Source", - "description": "Supabase is an opensource company, supporting existing open source tools and communities wherever possible.", - "url": "/open-source", - "icon": "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" - }, - { - "text": "Humans.txt", - "description": "Overview of Supabase staff", - "url": "/humans.txt", - "icon": "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" - }, - { - "text": "Lawyers.txt", - "description": "Details of technology used by Supabase", - "url": "/lawyers.txt", - "icon": "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" - } -] diff --git a/apps/www/data/Comparisons.tsx b/apps/www/data/Comparisons.tsx new file mode 100644 index 00000000000..fc7b9aad704 --- /dev/null +++ b/apps/www/data/Comparisons.tsx @@ -0,0 +1,17 @@ +export const data = { + label: 'Compare Supabase', + comparisons: [ + { + text: 'Supabase vs Firebase', + description: '', + url: '/alternatives/supabase-vs-firebase', + }, + { + text: 'Supabase vs Heroku Postgres', + description: '', + url: '/alternatives/supabase-vs-heroku-postgres', + }, + ], +} + +export default data diff --git a/apps/www/data/CustomerStories.json b/apps/www/data/CustomerStories.json deleted file mode 100644 index 75910a77d2f..00000000000 --- a/apps/www/data/CustomerStories.json +++ /dev/null @@ -1,138 +0,0 @@ -[ - { - "type": "Customer Story", - "title": "Scaling securely: one million users in 7 months protected with Supabase Auth", - "description": "Learn how Pebblely, an AI image generation company, used Supabase Auth for rapid growth and adaptable security solutions.", - "imgUrl": "images/customers/logos/pebblely.png", - "logoUrl": "images/customers/logos/pebblely.png", - "organization": "Pebblely", - "url": "/customers/pebblely", - "path": "/customers/pebblely", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Sep 29, 2023", - "readLength": 4 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "Bootstrapped founder builds an AI app with Supabase and scales to $1M in 5 months.", - "description": "How Yasser leveraged Supabase to build Chatbase and became one of the most successful single-founder AI products.", - "imgUrl": "images/customers/logos/chatbase.png", - "logoUrl": "images/customers/logos/chatbase.png", - "organization": "Chatbase", - "url": "/customers/chatbase", - "path": "/customers/chatbase", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Sep 6, 2023", - "readLength": 6 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "Quivr launch 5,000 Vector databases on Supabase.", - "description": "Learn how one of the most popular Generative AI projects uses Supabase as their Vector Store.", - "imgUrl": "images/customers/logos/quivr.png", - "logoUrl": "images/customers/logos/quivr.png", - "organization": "Quivr", - "url": "/customers/quivr", - "path": "/customers/quivr", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Sep 5, 2023", - "readLength": 6 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector.", - "description": "Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.", - "imgUrl": "images/customers/logos/berriai.png", - "logoUrl": "images/customers/logos/berriai.png", - "organization": "Berri AI", - "url": "/customers/berriai", - "path": "/customers/berriai", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Jun 6, 2023", - "readLength": 6 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "Mendable.ai switches from Pinecone to Supabase for PostgreSQL vector embeddings.", - "description": "How Mendable.ai boosts efficiency and accuracy of chat powered search for documentation using Supabase with pg_vector.", - "imgUrl": "images/customers/logos/mendableai.png", - "logoUrl": "images/customers/logos/mendableai.png", - "organization": "Mendable.ai", - "url": "/customers/mendableai", - "path": "/customers/mendableai", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Feb 16, 2023", - "readLength": 6 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "HappyTeams unlocks better performance and reduces cost with Supabase.", - "description": "How a bootstrapped startup migrated from Heroku to Supabase in 30 minutes and never looked back.", - "imgUrl": "images/customers/logos/happyteams.png", - "logoUrl": "images/customers/logos/happyteams.png", - "organization": "HappyTeams", - "url": "/customers/happyteams", - "path": "/customers/happyteams", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Feb 16, 2023", - "readLength": 6 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "Xendit use Supabase and create a full solution shipped to production in less than one week.", - "description": "As a payment processor, Xendit are responsible for verifying that all transactions are legal.", - "imgUrl": "images/customers/logos/xendit.png", - "logoUrl": "images/customers/logos/xendit.png", - "organization": "Xendit", - "url": "/customers/xendit", - "path": "/customers/xendit", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Feb 14, 2023", - "readLength": 6 - }, - "ctaText": "View story" - }, - { - "type": "Customer Story", - "title": "Replenysh uses Supabase to implement OTP in less than 24 hours.", - "description": "With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres.", - "imgUrl": "images/customers/logos/replenysh.png", - "logoUrl": "images/customers/logos/replenysh.png", - "organization": "Replenysh", - "url": "/customers/replenysh", - "path": "/customers/replenysh", - "postMeta": { - "name": "Paul Copplestone", - "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4", - "publishDate": "Feb 14, 2023", - "readLength": 6 - }, - "ctaText": "View story" - } -] diff --git a/apps/www/data/CustomerStories.ts b/apps/www/data/CustomerStories.ts new file mode 100644 index 00000000000..d1999380d30 --- /dev/null +++ b/apps/www/data/CustomerStories.ts @@ -0,0 +1,149 @@ +export const data = [ + { + type: 'Customer Story', + title: 'Scaling securely: one million users in 7 months protected with Supabase Auth', + description: + 'Learn how Pebblely, an AI image generation company, used Supabase Auth for rapid growth and adaptable security solutions.', + imgUrl: 'images/customers/logos/pebblely.png', + logoUrl: 'images/customers/logos/pebblely.png', + organization: 'Pebblely', + url: '/customers/pebblely', + path: '/customers/pebblely', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Sep 29, 2023', + readLength: 4, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: 'Bootstrapped founder builds an AI app with Supabase and scales to $1M in 5 months.', + description: + 'How Yasser leveraged Supabase to build Chatbase and became one of the most successful single-founder AI products.', + imgUrl: 'images/customers/logos/chatbase.png', + logoUrl: 'images/customers/logos/chatbase.png', + organization: 'Chatbase', + url: '/customers/chatbase', + path: '/customers/chatbase', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Sep 6, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: 'Quivr launch 5,000 Vector databases on Supabase.', + description: + 'Learn how one of the most popular Generative AI projects uses Supabase as their Vector Store.', + imgUrl: 'images/customers/logos/quivr.png', + logoUrl: 'images/customers/logos/quivr.png', + organization: 'Quivr', + url: '/customers/quivr', + path: '/customers/quivr', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Sep 5, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: 'Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector.', + description: + 'Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.', + imgUrl: 'images/customers/logos/berriai.png', + logoUrl: 'images/customers/logos/berriai.png', + organization: 'Berri AI', + url: '/customers/berriai', + path: '/customers/berriai', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Jun 6, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: 'Mendable.ai switches from Pinecone to Supabase for PostgreSQL vector embeddings.', + description: + 'How Mendable.ai boosts efficiency and accuracy of chat powered search for documentation using Supabase with pg_vector.', + imgUrl: 'images/customers/logos/mendableai.png', + logoUrl: 'images/customers/logos/mendableai.png', + organization: 'Mendable.ai', + url: '/customers/mendableai', + path: '/customers/mendableai', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Feb 16, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: 'HappyTeams unlocks better performance and reduces cost with Supabase.', + description: + 'How a bootstrapped startup migrated from Heroku to Supabase in 30 minutes and never looked back.', + imgUrl: 'images/customers/logos/happyteams.png', + logoUrl: 'images/customers/logos/happyteams.png', + organization: 'HappyTeams', + url: '/customers/happyteams', + path: '/customers/happyteams', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Feb 16, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: + 'Xendit use Supabase and create a full solution shipped to production in less than one week.', + description: + 'As a payment processor, Xendit are responsible for verifying that all transactions are legal.', + imgUrl: 'images/customers/logos/xendit.png', + logoUrl: 'images/customers/logos/xendit.png', + organization: 'Xendit', + url: '/customers/xendit', + path: '/customers/xendit', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Feb 14, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, + { + type: 'Customer Story', + title: 'Replenysh uses Supabase to implement OTP in less than 24 hours.', + description: + 'With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres.', + imgUrl: 'images/customers/logos/replenysh.png', + logoUrl: 'images/customers/logos/replenysh.png', + organization: 'Replenysh', + url: '/customers/replenysh', + path: '/customers/replenysh', + postMeta: { + name: 'Paul Copplestone', + avatarUrl: 'https://avatars0.githubusercontent.com/u/10214025?v=4', + publishDate: 'Feb 14, 2023', + readLength: 6, + }, + ctaText: 'View story', + }, +] + +export default data diff --git a/apps/www/data/Developers.tsx b/apps/www/data/Developers.tsx index bf439dcd77f..64346e76f39 100644 --- a/apps/www/data/Developers.tsx +++ b/apps/www/data/Developers.tsx @@ -1,44 +1,90 @@ -export const links = [ - { - text: 'Resources', - description: 'View examples, curated content from the community, migration guides, and more', - url: '/docs/guides/resources', - icon: 'M19.4994 17.9996V7.50107L19.4864 3L14.0723 3L4.5 3L4.5 18.75M4.5 18.75C4.5 19.9926 5.50736 21 6.75 21H19.5V18.5255L19.4871 16.5H14.0728H6.75C5.50736 16.5 4.5 17.5074 4.5 18.75ZM7.50724 3V9L9.75771 6.45713L12.0072 9V3H7.50724Z', +export const data = { + header: [ + { + text: 'Documentation', + description: '', + url: '/docs', + icon: 'M19.4994 17.9996V7.50107L19.4864 3L14.0723 3L4.5 3L4.5 18.75M4.5 18.75C4.5 19.9926 5.50736 21 6.75 21H19.5V18.5255L19.4871 16.5H14.0728H6.75C5.50736 16.5 4.5 17.5074 4.5 18.75ZM7.50724 3V9L9.75771 6.45713L12.0072 9V3H7.50724Z', + }, + ], + navigation: [ + { + label: 'Developers', + links: [ + { + text: 'Documentation', + url: '/docs', + icon: 'M4.84741 8.30011H10.0974M4.84741 6.55011H10.0974M4.84741 10.0501H8.34741M11.8795 4.90069V10.2495C11.8795 11.3541 10.9841 12.2495 9.87951 12.2495H5.12988C4.02531 12.2495 3.12988 11.3541 3.12988 10.2495V3.75C3.12988 2.64543 4.02531 1.75 5.12988 1.75H8.71375L11.8795 4.90069ZM11.8487 4.88599L8.71263 1.75L8.71248 3.88592C8.71245 4.43823 9.16017 4.88599 9.71248 4.88599L11.8487 4.88599Z', + }, + { + text: 'Integrations', + url: '/partners/integrations', + icon: 'M10.4956 1.83496V6.20996M8.30811 4.02267L12.6831 4.02267M6.86316 9.83727C6.86316 11.1348 5.81129 12.1867 4.51373 12.1867C3.21618 12.1867 2.16431 11.1348 2.16431 9.83727C2.16431 8.53972 3.21618 7.48785 4.51373 7.48785C5.81129 7.48785 6.86316 8.53972 6.86316 9.83727ZM12.6831 11.1158V8.74078C12.6831 8.1885 12.2354 7.74078 11.6831 7.74078H9.30811C8.75582 7.74078 8.30811 8.1885 8.30811 8.74078V11.1158C8.30811 11.6681 8.75582 12.1158 9.30811 12.1158H11.6831C12.2354 12.1158 12.6831 11.6681 12.6831 11.1158ZM3.32666 6.20996H5.70166C6.25394 6.20996 6.70166 5.76225 6.70166 5.20996V2.83496C6.70166 2.28268 6.25394 1.83496 5.70166 1.83496H3.32666C2.77438 1.83496 2.32666 2.28268 2.32666 2.83496V5.20996C2.32666 5.76225 2.77438 6.20996 3.32666 6.20996Z', + }, + { + text: 'Changelog', + description: 'See the latest updates and product improvements.', + url: '/changelog', + icon: 'M11.0049 7.00011L4.00488 7.00011M10.5674 5.0731L4.44238 5.0731M10.5674 8.99879L4.44238 8.99879M3.16404 3.32494C4.20731 2.0939 5.76484 1.3125 7.50488 1.3125C10.646 1.3125 13.1924 3.85888 13.1924 7C13.1924 10.1411 10.646 12.6875 7.50488 12.6875C4.36376 12.6875 1.81738 10.1411 1.81738 7C1.81738 6.25829 1.95936 5.54974 2.21763 4.90004M2.85766 1.51563L2.85766 3.19986C2.85766 3.44149 3.05353 3.63736 3.29516 3.63736L4.85069 3.63736', + }, + { + text: 'Support', + description: 'See the latest updates and product improvements.', + url: '/support', + icon: 'M3.38062 2.87598L5.85395 5.34931M9.15576 8.65039L11.6291 11.1237M11.6291 2.87598L9.15576 5.34931L11.2149 3.29004M3.38062 11.1237L5.85395 8.65039M13.3383 6.99935C13.3383 10.221 10.7266 12.8327 7.50496 12.8327C4.2833 12.8327 1.67163 10.221 1.67163 6.99935C1.67163 3.77769 4.2833 1.16602 7.50496 1.16602C10.7266 1.16602 13.3383 3.77769 13.3383 6.99935ZM9.8383 6.99935C9.8383 8.28801 8.79363 9.33268 7.50496 9.33268C6.2163 9.33268 5.17163 8.28801 5.17163 6.99935C5.17163 5.71068 6.2163 4.66602 7.50496 4.66602C8.79363 4.66602 9.8383 5.71068 9.8383 6.99935Z', + }, + ], + }, + { + label: 'Resources', + links: [ + { + text: 'Open Source', + description: 'We support existing open source tools and communities wherever possible.', + url: '/open-source', + icon: 'M7.83826 1.22168C4.57138 1.22168 1.92322 3.87398 1.92322 7.14677C1.92322 9.76418 3.61788 11.9853 5.96851 12.7684C6.26427 12.8228 6.37192 12.6401 6.37192 12.4827C6.37192 12.3425 6.36719 11.9693 6.36423 11.4754C4.71867 11.8333 4.37145 10.681 4.37145 10.681C4.10291 9.99605 3.71488 9.81386 3.71488 9.81386C3.1778 9.44713 3.7557 9.45423 3.7557 9.45423C4.34898 9.49564 4.66129 10.0647 4.66129 10.0647C5.18891 10.9697 6.046 10.7082 6.38257 10.5568C6.43698 10.1741 6.58959 9.91324 6.75876 9.76536C5.44562 9.61571 4.06446 9.10702 4.06446 6.83683C4.06446 6.19031 4.29515 5.66092 4.67312 5.24686C4.61219 5.09721 4.40931 4.49447 4.73109 3.67938C4.73109 3.67938 5.22795 3.51967 6.35772 4.28626C6.84025 4.15466 7.3381 4.08763 7.83826 4.08692C8.34104 4.08929 8.84677 4.15495 9.31938 4.28626C10.4486 3.51967 10.9442 3.67879 10.9442 3.67879C11.2672 4.49447 11.0637 5.09721 11.0034 5.24686C11.382 5.66092 11.6115 6.19031 11.6115 6.83683C11.6115 9.11293 10.2279 9.61394 8.91065 9.76063C9.123 9.94341 9.31169 10.3048 9.31169 10.8579C9.31169 11.6493 9.30459 12.2887 9.30459 12.4827C9.30459 12.6413 9.41107 12.8258 9.71155 12.7678C10.8894 12.3728 11.9133 11.6175 12.6386 10.6089C13.3639 9.60021 13.7538 8.38912 13.7533 7.14677C13.7533 3.87398 11.1045 1.22168 7.83826 1.22168Z', + }, + { + text: 'GitHub Discussions', + url: 'https://github.com/orgs/supabase/discussions', + icon: 'M1.81738 3.5C1.81738 2.29188 2.79676 1.3125 4.00488 1.3125H11.0049C12.213 1.3125 13.1924 2.29188 13.1924 3.5V8.20172C13.1924 9.40984 12.213 10.3892 11.0049 10.3892H7.26195L5.18436 12.553C5.06068 12.6818 4.87113 12.7225 4.70547 12.6559C4.5398 12.5892 4.43127 12.4286 4.43127 12.25V10.3892H4.00488C2.79676 10.3892 1.81738 9.40984 1.81738 8.20172V3.5ZM4.00488 2.1875C3.28001 2.1875 2.69238 2.77513 2.69238 3.5V8.20172C2.69238 8.92659 3.28001 9.51422 4.00488 9.51422H4.86877C5.1104 9.51422 5.30627 9.7101 5.30627 9.95172V11.1627L6.75992 9.64871C6.84242 9.56279 6.95638 9.51422 7.0755 9.51422H11.0049C11.7298 9.51422 12.3174 8.92659 12.3174 8.20172V3.5C12.3174 2.77513 11.7298 2.1875 11.0049 2.1875H4.00488Z M5.75488 5.48201C5.99651 5.48201 6.19238 5.67788 6.19238 5.91951C6.19238 6.16113 5.99651 6.35701 5.75488 6.35701C5.51326 6.35701 5.31738 6.16113 5.31738 5.91951C5.31738 5.67788 5.51326 5.48201 5.75488 5.48201Z M7.50488 5.48201C7.74651 5.48201 7.94238 5.67788 7.94238 5.91951C7.94238 6.16113 7.74651 6.35701 7.50488 6.35701C7.26326 6.35701 7.06738 6.16113 7.06738 5.91951C7.06738 5.67788 7.26326 5.48201 7.50488 5.48201Z M9.25488 5.48201C9.49651 5.48201 9.69238 5.67788 9.69238 5.91951C9.69238 6.16113 9.49651 6.35701 9.25488 6.35701C9.01326 6.35701 8.81738 6.16113 8.81738 5.91951C8.81738 5.67788 9.01326 5.48201 9.25488 5.48201Z', + }, + { + text: 'Become a Partner', + url: '/partners', + icon: 'M11.7035 8.12415L12.3422 7.48542C13.4972 6.33043 13.4972 4.45781 12.3422 3.30281C11.1872 2.14781 9.31462 2.14781 8.15963 3.30281L7.10738 4.35506L6.62074 4.84167C6.08709 5.37532 6.08709 6.24053 6.62074 6.77418C7.15439 7.30783 8.0196 7.30783 8.55325 6.77418L10.1548 5.1726M7.50497 3.95743L6.85031 3.30277C5.69532 2.14777 3.8227 2.14777 2.6677 3.30277C1.5127 4.45777 1.5127 6.33039 2.6677 7.48538L2.79695 7.61444L6.53948 11.3864L7.10059 11.9475C7.48909 12.336 8.11897 12.336 8.50746 11.9475C8.88805 11.5669 8.86601 10.9249 8.5009 10.5349M8.15569 10.1887L8.50754 10.5407C8.51541 10.5486 8.49335 10.5268 8.5009 10.5349M8.5009 10.5349L8.70668 10.7407C9.09515 11.1292 9.72504 11.1292 10.1135 10.7407C10.502 10.3523 10.502 9.72247 10.1136 9.33399L9.21878 8.43906M8.5009 10.5349L7.84177 9.87564M9.23249 8.43969L10.1426 9.34975C10.531 9.73823 11.1609 9.73823 11.5493 9.34975C11.9378 8.96128 11.9378 8.33144 11.5493 7.94296L10.6249 7.01855', + }, + { + text: 'Careers', + url: '/careers', + icon: 'M13.0883 7.73143C11.4202 8.4059 9.6375 8.75155 7.83826 8.74935C5.98151 8.74935 4.20992 8.38768 2.58826 7.73143M10.1716 3.49935V2.33268C10.1716 2.02326 10.0487 1.72652 9.82988 1.50772C9.61109 1.28893 9.31434 1.16602 9.00492 1.16602H6.67159C6.36217 1.16602 6.06542 1.28893 5.84663 1.50772C5.62784 1.72652 5.50492 2.02326 5.50492 2.33268V3.49935M7.83826 6.99935H7.84409M3.75492 11.666H11.9216C12.231 11.666 12.5278 11.5431 12.7465 11.3243C12.9653 11.1055 13.0883 10.8088 13.0883 10.4993V4.66602C13.0883 4.3566 12.9653 4.05985 12.7465 3.84106C12.5278 3.62227 12.231 3.49935 11.9216 3.49935H3.75492C3.4455 3.49935 3.14876 3.62227 2.92997 3.84106C2.71117 4.05985 2.58826 4.3566 2.58826 4.66602V10.4993C2.58826 10.8088 2.71117 11.1055 2.92997 11.3243C3.14876 11.5431 3.4455 11.666 3.75492 11.666Z', + }, + ], + }, + ], + guides: { + label: 'Guides', + links: [ + { + text: 'Documentation', + description: '', + url: '/docs', + icon: 'M19.4994 17.9996V7.50107L19.4864 3L14.0723 3L4.5 3L4.5 18.75M4.5 18.75C4.5 19.9926 5.50736 21 6.75 21H19.5V18.5255L19.4871 16.5H14.0728H6.75C5.50736 16.5 4.5 17.5074 4.5 18.75ZM7.50724 3V9L9.75771 6.45713L12.0072 9V3H7.50724Z', + }, + ], }, - { - text: 'Changelog', - description: 'See the latest updates and product improvements', - url: '/changelog', - icon: 'M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z', + footer: { + support: { + text: 'Support', + description: '', + url: '/support', + icon: 'M6.87232 21.5743C9.09669 21.5743 10.8999 19.7711 10.8999 17.5467C10.8999 15.3223 9.09669 13.5191 6.87232 13.5191C4.64794 13.5191 2.84473 15.3223 2.84473 17.5467C2.84473 19.7711 4.64794 21.5743 6.87232 21.5743Z M17.127 3.67236V11.1724M20.877 7.42274H13.377M3.12305 3.67236H10.6231V11.1724H3.12305V3.67236ZM13.377 13.7966H20.877V21.2966H13.377V13.7966ZM10.8999 17.5467C10.8999 19.7711 9.09669 21.5743 6.87232 21.5743C4.64794 21.5743 2.84473 19.7711 2.84473 17.5467C2.84473 15.3223 4.64794 13.5191 6.87232 13.5191C9.09669 13.5191 10.8999 15.3223 10.8999 17.5467Z', + }, + systemStatus: { + text: 'System Status', + description: '', + url: 'https://status.supabase.com/', + icon: 'M6.87232 21.5743C9.09669 21.5743 10.8999 19.7711 10.8999 17.5467C10.8999 15.3223 9.09669 13.5191 6.87232 13.5191C4.64794 13.5191 2.84473 15.3223 2.84473 17.5467C2.84473 19.7711 4.64794 21.5743 6.87232 21.5743Z M17.127 3.67236V11.1724M20.877 7.42274H13.377M3.12305 3.67236H10.6231V11.1724H3.12305V3.67236ZM13.377 13.7966H20.877V21.2966H13.377V13.7966ZM10.8999 17.5467C10.8999 19.7711 9.09669 21.5743 6.87232 21.5743C4.64794 21.5743 2.84473 19.7711 2.84473 17.5467C2.84473 15.3223 4.64794 13.5191 6.87232 13.5191C9.09669 13.5191 10.8999 15.3223 10.8999 17.5467Z', + }, }, - { - text: 'Careers', - description: 'Join the Supabase team and get involved', - url: '/careers', - icon: 'M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z', - }, - { - text: 'Open Source', - description: 'We support existing open source tools and communities wherever possible', - url: '/open-source', - icon: 'M10.7607 3.08859C15.7723 2.38592 20.0295 5.94789 20.8525 10.7642C21.5964 15.1122 19.4634 19.1692 15.8778 20.9967L14.0736 16.084C15.129 15.4346 15.8232 14.4223 16.0198 13.0819C16.3702 10.7219 14.7442 8.47426 12.3801 8.25648C10.2228 8.04047 8.33304 9.61601 7.99823 11.7702L7.99761 11.7743C7.73427 13.5096 8.47082 15.1847 9.92827 16.0841L8.12693 21C6.34571 20.1066 4.88125 18.6129 3.97963 16.7387L3.97879 16.7369C3.15872 15.0395 3.07406 13.7081 3.01524 12.783C3.01012 12.7024 3.0052 12.6249 3 12.5506C3.10941 7.30353 6.59243 3.6764 10.7607 3.08859Z', - }, - { - text: 'Partners', - description: 'Become a Supabase Partner and enable new business opportunities', - url: '/partners', - icon: 'M12.0003 6.1488L10.5812 4.76334C8.68921 2.91613 5.62161 2.91613 3.72957 4.76334C1.98628 6.46532 1.84923 9.14165 3.31842 10.9968C3.44378 11.1551 3.77166 11.514 3.92041 11.6592M12.0003 6.1488L13.4193 4.76334C15.3113 2.91613 18.3789 2.91613 20.271 4.76334C22.163 6.61054 22.163 9.60546 20.271 11.4527L19.2017 12.5186M12.0003 6.1488L10.7542 7.39725C10.0214 8.13141 10.0219 9.32043 10.7554 10.0539C11.4894 10.7879 12.6793 10.7879 13.4133 10.0539L16.0693 7.39787M14.9131 13.4531L17.4954 16.1809M17.4954 16.1809C18.2089 16.9347 18.1764 18.1242 17.4226 18.8378C16.6693 19.5509 15.4807 19.5189 14.7669 18.7663L13.3188 17.2217M17.4954 16.1809C18.2086 16.9344 19.3982 16.9676 20.1516 16.2543C20.9051 15.5411 20.9376 14.3521 20.2244 13.5987L17.6415 10.8703M6.13555 14.7589L7.46387 13.4306M6.13555 14.7589C5.40193 15.4925 4.21251 15.4925 3.47889 14.7589C2.74528 14.0253 2.74528 12.8358 3.47889 12.1022L4.80722 10.7739C5.54084 10.0403 6.73026 10.0403 7.46388 10.7739C8.19749 11.5075 8.19749 12.6969 7.46387 13.4306M6.13555 14.7589C5.40193 15.4925 5.40193 16.6819 6.13555 17.4155C6.86916 18.1492 8.05859 18.1492 8.7922 17.4155M7.46387 13.4306C8.19749 12.6969 9.38691 12.6969 10.1205 13.4306C10.8541 14.1642 10.8541 15.3536 10.1205 16.0872M8.7922 17.4155L10.1205 16.0872M8.7922 17.4155C8.05859 18.1492 8.05859 19.3386 8.7922 20.0722C9.52582 20.8058 10.7152 20.8058 11.4489 20.0722L12.7772 18.7439C13.5108 18.0102 13.5108 16.8208 12.7772 16.0872C12.0436 15.3536 10.8541 15.3536 10.1205 16.0872', - }, - { - text: 'Integrations', - description: 'Use your favorite tools with Supabase', - url: '/partners/integrations', - icon: 'M6.87232 21.5743C9.09669 21.5743 10.8999 19.7711 10.8999 17.5467C10.8999 15.3223 9.09669 13.5191 6.87232 13.5191C4.64794 13.5191 2.84473 15.3223 2.84473 17.5467C2.84473 19.7711 4.64794 21.5743 6.87232 21.5743Z M17.127 3.67236V11.1724M20.877 7.42274H13.377M3.12305 3.67236H10.6231V11.1724H3.12305V3.67236ZM13.377 13.7966H20.877V21.2966H13.377V13.7966ZM10.8999 17.5467C10.8999 19.7711 9.09669 21.5743 6.87232 21.5743C4.64794 21.5743 2.84473 19.7711 2.84473 17.5467C2.84473 15.3223 4.64794 13.5191 6.87232 13.5191C9.09669 13.5191 10.8999 15.3223 10.8999 17.5467Z', - }, - { - text: 'Support', - description: 'The Supabase Support Team is ready to help', - url: '/support', - icon: 'M8.72766 9C9.27678 7.83481 10.7584 7 12.5001 7C14.7092 7 16.5001 8.34315 16.5001 10C16.5001 11.3994 15.2224 12.5751 13.4943 12.9066C12.9519 13.0107 12.5001 13.4477 12.5001 14M12.5 17H12.51M21.5 12C21.5 16.9706 17.4706 21 12.5 21C7.52944 21 3.5 16.9706 3.5 12C3.5 7.02944 7.52944 3 12.5 3C17.4706 3 21.5 7.02944 21.5 12Z', - }, -] +} diff --git a/apps/www/data/Solutions.ts b/apps/www/data/Solutions.ts index 72f7226a907..b26e89c8f56 100644 --- a/apps/www/data/Solutions.ts +++ b/apps/www/data/Solutions.ts @@ -7,7 +7,7 @@ const solutions = { icon: products.database.icon[24], description: "Every project is a full Postgres database, the world's most trusted relational database.", - description_short: '', + description_short: 'Fully portable Postgres database', label: '', url: '/database', }, @@ -15,7 +15,7 @@ const solutions = { name: PRODUCT_NAMES.AUTHENTICATION, icon: products.authentication.icon[24], description: 'Add user sign ups and logins, securing your data with Row Level Security.', - description_short: '', + description_short: 'User Management out of the box', label: '', url: '/auth', }, @@ -23,7 +23,7 @@ const solutions = { name: PRODUCT_NAMES.STORAGE, icon: products.storage.icon[24], description: 'Store, organize, and serve large files. Any media, including videos and images.', - description_short: '', + description_short: 'Serverless storage for any media', label: '', url: '/storage', }, @@ -31,7 +31,7 @@ const solutions = { name: PRODUCT_NAMES.FUNCTIONS, icon: products.functions.icon[24], description: 'Write custom code without deploying or scaling servers.', - description_short: '', + description_short: 'Deploy code globally on the edge', label: '', url: '/edge-functions', }, @@ -40,7 +40,7 @@ const solutions = { icon: products.realtime.icon[24], description: 'Create multiplayer experiences by sharing, broadcasting, and listening to changes from other clients or the Database.', - description_short: '', + description_short: 'Synchronize and broadcast events', label: '', url: '/realtime', }, @@ -48,7 +48,7 @@ const solutions = { name: PRODUCT_NAMES.VECTOR, icon: products.vector.icon[24], description: 'Integrate your favorite ML-models to store, index and search vector embeddings.', - description_short: '', + description_short: 'AI toolkit to manage embeddings', label: '', url: '/vector', }, diff --git a/apps/www/data/nav.tsx b/apps/www/data/nav.tsx new file mode 100644 index 00000000000..82616295c54 --- /dev/null +++ b/apps/www/data/nav.tsx @@ -0,0 +1,36 @@ +import DevelopersDropdown from '~/components/Nav/DevelopersDropdown' +import ProductDropdown from '~/components/Nav/ProductDropdown' + +import { data as DevelopersData } from 'data/Developers' +import SolutionsData from 'data/Solutions' + +export const menu = { + primaryNav: [ + { + title: 'Product', + hasDropdown: true, + dropdown: , + dropdownContainerClassName: 'rounded-xl', + subMenu: SolutionsData, + }, + { + title: 'Developers', + hasDropdown: true, + dropdown: , + dropdownContainerClassName: 'rounded-xl', + subMenu: DevelopersData, + }, + { + title: 'Pricing', + url: '/pricing', + }, + { + title: 'Docs', + url: '/docs', + }, + { + title: 'Blog', + url: '/blog', + }, + ], +} diff --git a/apps/www/pages/index.tsx b/apps/www/pages/index.tsx index 0a73151f1d1..7d284cb4b98 100644 --- a/apps/www/pages/index.tsx +++ b/apps/www/pages/index.tsx @@ -16,7 +16,7 @@ const CTABanner = dynamic(() => import('components/CTABanner/index')) const CustomerStories = dynamic(() => import('components/CustomerStories')) const TwitterSocialSection = dynamic(() => import('~/components/TwitterSocialSection')) -type Props = { customerStories: PostTypes[] } +type Props = { customerStories: PostTypes[]; blogPosts: PostTypes[] } const Index = ({ customerStories }: Props) => { return ( diff --git a/apps/www/pages/partners/experts/index.tsx b/apps/www/pages/partners/experts/index.tsx index 3409c1c452f..f66fe829101 100644 --- a/apps/www/pages/partners/experts/index.tsx +++ b/apps/www/pages/partners/experts/index.tsx @@ -2,7 +2,7 @@ import { NextSeo } from 'next-seo' import { useRouter } from 'next/router' import DefaultLayout from '~/components/Layouts/Default' import SectionContainer from '~/components/Layouts/SectionContainer' -import BecomeAPartner from '~/components/Partners/BecomeAPartners' +import BecomeAPartner from '~/components/Partners/BecomeAPartner' import PartnerLinkBox from '~/components/Partners/PartnerLinkBox' import supabase from '~/lib/supabase' import { Partner } from '~/types/partners' diff --git a/apps/www/pages/partners/integrations/index.tsx b/apps/www/pages/partners/integrations/index.tsx index 8000b7daa10..ae18e2516a2 100644 --- a/apps/www/pages/partners/integrations/index.tsx +++ b/apps/www/pages/partners/integrations/index.tsx @@ -5,7 +5,7 @@ import { IconLoader, IconSearch, Input } from 'ui' import { useDebounce } from 'use-debounce' import DefaultLayout from '~/components/Layouts/Default' import SectionContainer from '~/components/Layouts/SectionContainer' -import BecomeAPartner from '~/components/Partners/BecomeAPartners' +import BecomeAPartner from '~/components/Partners/BecomeAPartner' import PartnerLinkBox from '~/components/Partners/PartnerLinkBox' import supabase from '~/lib/supabase' import { Partner } from '~/types/partners' diff --git a/apps/www/public/customers-rss.xml b/apps/www/public/customers-rss.xml index f79e5232876..9436d8855df 100644 --- a/apps/www/public/customers-rss.xml +++ b/apps/www/public/customers-rss.xml @@ -33,56 +33,56 @@ Berri AI boosts productivity by migrating from AWS RDS to Supabase Vector https://supabase.com/customers/berriai Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase. - Mon, 05 Jun 2023 22:00:00 GMT + Mon, 05 Jun 2023 04:00:00 GMT https://supabase.com/customers/markprompt Markprompt and Supabase - GDPR-compliant AI chatbots for docs and websites. https://supabase.com/customers/markprompt AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and GDPR-compliant prompt experiences on top of their content, by leveraging Supabase's secure and privacy-focused vector database and authentication solutions. - Tue, 16 May 2023 22:00:00 GMT + Tue, 16 May 2023 04:00:00 GMT https://supabase.com/customers/mendableai Mendable switches from Pinecone to Supabase Vector for PostgreSQL vector embeddings. https://supabase.com/customers/mendableai How Mendable boosts efficiency and accuracy of chat powered search for documentation using Supabase Vector. - Thu, 04 May 2023 22:00:00 GMT + Thu, 04 May 2023 04:00:00 GMT https://supabase.com/customers/happyteams HappyTeams unlocks better performance and reduces cost with Supabase. https://supabase.com/customers/happyteams How a bootstrapped startup migrated from Heroku to Supabase in 30 minutes and never looked back. - Wed, 15 Feb 2023 23:00:00 GMT + Wed, 15 Feb 2023 05:00:00 GMT https://supabase.com/customers/xendit Xendit use Supabase and create a full solution shipped to production in less than one week. https://supabase.com/customers/xendit As a payment processor, Xendit are responsible for verifying that all transactions are legal. - Mon, 13 Feb 2023 23:00:00 GMT + Mon, 13 Feb 2023 05:00:00 GMT https://supabase.com/customers/replenysh Replenysh uses Supabase to implement OTP in less than 24 hours. https://supabase.com/customers/replenysh With Supabase, Replenysh gets a slick auth experience, reduces DevOps overhead, and continues to scale with Postgres. - Mon, 13 Feb 2023 23:00:00 GMT + Mon, 13 Feb 2023 05:00:00 GMT https://supabase.com/customers/mobbin How Mobbin migrated 200,000 users from Firebase for a better authentication experience. https://supabase.com/customers/mobbin Mobbin helps over 200,000 creators globally search and view the latest design patterns from well-known apps. - Mon, 13 Feb 2023 23:00:00 GMT + Mon, 13 Feb 2023 05:00:00 GMT https://supabase.com/customers/epsilon3 Epsilon3 digitize paper-based procedures in the space industry using telemetry data, simplifying testing and operations. https://supabase.com/customers/epsilon3 Epsilon3 uses Supabase to help teams execute secure and reliable operations in an industry where project spend runs into the billions. - Mon, 13 Feb 2023 23:00:00 GMT + Mon, 13 Feb 2023 05:00:00 GMT diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx index 202bad9b7bf..5e66564303a 100644 --- a/packages/ui/src/components/Button/Button.tsx +++ b/packages/ui/src/components/Button/Button.tsx @@ -162,12 +162,13 @@ const Button = React.forwardRef( icon, iconRight, iconLeft, - htmlType = 'button', + htmlType, ...props }, ref ) => { const Comp = asChild ? Slot : 'button' + const resolvedHtmlType = asChild ? htmlType : 'button' const { className, disabled } = props const showIcon = loading || icon // decrecating 'showIcon' for rightIcon @@ -178,7 +179,7 @@ const Button = React.forwardRef( return ( diff --git a/packages/ui/src/components/TextLink/TextLink.tsx b/packages/ui/src/components/TextLink/TextLink.tsx index 73d54f6136e..fbba4551048 100644 --- a/packages/ui/src/components/TextLink/TextLink.tsx +++ b/packages/ui/src/components/TextLink/TextLink.tsx @@ -1,19 +1,44 @@ -import { IconChevronRight } from 'ui' +import { IconChevronRight, cn } from 'ui' import Link from 'next/link' -function TextLink({ url = '', label, ...props }: any) { +interface Props { + label: string + url?: string + className?: string + hasChevron?: boolean + chevronAnimation?: 'translate' | 'fadeIn' +} + +function TextLink({ + url = '', + label, + className, + hasChevron = true, + chevronAnimation = 'translate', + ...props +}: Props) { return (
{`${label} about ${url}`} {label} -
- -
+ {hasChevron && ( +
+ +
+ )}
diff --git a/packages/ui/src/components/shadcn/ui/navigation-menu.tsx b/packages/ui/src/components/shadcn/ui/navigation-menu.tsx index 289f7bb9246..f507ac2c073 100644 --- a/packages/ui/src/components/shadcn/ui/navigation-menu.tsx +++ b/packages/ui/src/components/shadcn/ui/navigation-menu.tsx @@ -5,17 +5,22 @@ import { ChevronDown } from 'lucide-react' import { cn } from '@ui/lib/utils' +interface NavigationMenuProps + extends React.ComponentPropsWithoutRef { + viewportClassName?: string | undefined +} + const NavigationMenu = React.forwardRef< React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, children, ...props }, ref) => ( + NavigationMenuProps +>(({ className, viewportClassName, children, ...props }, ref) => ( {children} - + )) NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName @@ -63,7 +68,7 @@ const NavigationMenuContent = React.forwardRef<