enterprise logos (supabase#29683)

Author: fsansalvadore

apps/www/components/Enterprise/EnterpriseLogos.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { cn } from 'ui'
+
+const logos = [
+ {
+ image: `/images/logos/publicity/mozilla.svg`,
+ alt: 'mozilla',
+ name: 'mozilla',
+ },
+ {
+ image: `/images/logos/publicity/1password.svg`,
+ alt: '1password',
+ name: '1password',
+ },
+ {
+ image: `/images/logos/publicity/pwc.svg`,
+ alt: 'pwc',
+ name: 'pwc',
+ },
+ {
+ image: `/images/logos/publicity/langchain.svg`,
+ alt: 'langchain',
+ name: 'langchain',
+ },
+]
+
+interface Props {
+ className?: string
+}
+
+const EnterpriseLogos: React.FC<Props> = ({ className }) => {
+ return (
+ <div
+ className={cn(
+ 'flex lg:grid grid-cols-2 xl:flex flex-wrap gap-4 md:gap-8 lg:gap-4 2xl:gap-8',
+ className
+ )}
+ suppressHydrationWarning
+ >
+ {logos.map((logo) => (
+ <div key={`ent-logo-${logo.name}`} className="h-12 lg:h-12 w-max">
+ <img
+ src={logo.image}
+ alt={logo.alt}
+ className="
+ w-auto block
+ h-10 !min-h-10
+ md:h-12 md:!min-h-12
+ lg:h-11 lg:!min-h-11
+ 2xl:h-12 2xl:!min-h-12
+ "
+ draggable={false}
+ />
+ </div>
+ ))}
+ </div>
+ )
+}
+
+export default EnterpriseLogos

apps/www/components/Sections/ProductHeader2.tsx

@@ -16,6 +16,7 @@ interface Props {
  footerPosition?: 'bottom' | 'left'
  ctas?: CTA[]
  className?: string
+ sectionContainerClassName?: string
 }
 
 const ProductHeader = (props: Props) => (
@@ -25,7 +26,7 @@ const ProductHeader = (props: Props) => (
  props.className
  )}
  >
- <SectionContainer className="!py-0 grid grid-cols-12">
+ <SectionContainer className={cn('!py-0 grid grid-cols-12', props.sectionContainerClassName)}>
  <div className="relative z-10 col-span-12 gap-8 lg:col-span-5">
  <div>
  {(props.icon || props.title) && (
@@ -63,7 +64,7 @@ const ProductHeader = (props: Props) => (
  ))}
  </div>
  {props.footer && props.footerPosition === 'left' && (
- <div className="relative z-10 mt-4 md:mt-8 lg:mt-20 xl:mt-32 col-span-12">
+ <div className="ph-footer relative z-10 mt-4 md:mt-8 lg:mt-20 xl:mt-32 col-span-12">
  {props.footer}
  </div>
  )}

apps/www/next-env.d.ts

@@ -3,4 +3,4 @@
 /// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/www/pages/enterprise.tsx

@@ -6,7 +6,7 @@ import Layout from '~/components/Layouts/Default'
 import ProductHeader from '~/components/Sections/ProductHeader2'
 
 import content from '~/data/enterprise/content'
-import Logos from '../components/logos'
+import EnterpriseLogos from '../components/Enterprise/EnterpriseLogos'
 
 const EnterpriseUseCases = dynamic(() => import('components/Enterprise/UseCases'))
 const EnterprisePerformance = dynamic(() => import('components/Enterprise/Performance'))
@@ -34,8 +34,9 @@ const Enterprise: NextPage = () => (
  <Layout className="overflow-visible">
  <ProductHeader
  {...content.heroSection}
- className="[&_h1]:2xl:!text-5xl bg-default border-0 lg:pb-8"
- footer={<Logos className="!pb-0" showHeading={false} align="left" />}
+ className="[&_h1]:2xl:!text-5xl bg-default border-0 lg:pb-8 [&_.ph-footer]:mt-0 [&_.ph-footer]:lg:mt-16 [&_.ph-footer]:xl:mt-32"
+ sectionContainerClassName="lg:gap-4"
+ footer={<EnterpriseLogos className="lg:max-w-xs xl:max-w-none" />}
  footerPosition="left"
  />
  <EnterpriseUseCases {...content['use-cases']} />