Fix www mobile (supabase#29640)

* fix ent quotes logos * mobile hp product cards * mobile customers section * mobile examples * update sitemap * mobile customers slider * remove autoplay

Author: fsansalvadore

apps/www/components/BuiltWithSupabase.tsx

@@ -0,0 +1,53 @@
+import 'swiper/css'
+
+import React, { FC } from 'react'
+import { useRouter } from 'next/router'
+import { Swiper, SwiperSlide } from 'swiper/react'
+import ExampleCard from '../ExampleCard'
+
+import content from '~/data/home/content'
+import type { Example } from 'data/Examples'
+
+interface Props {
+ examples: Example[]
+ className?: string
+}
+
+const ExamplesMobile: FC<Props> = ({ examples, className }: any) => {
+ const { basePath } = useRouter()
+
+ return (
+ <div className={className}>
+ <Swiper
+ style={{ zIndex: 0, marginRight: '1px' }}
+ initialSlide={0}
+ spaceBetween={12}
+ slidesPerView={1.1}
+ speed={300}
+ watchOverflow
+ threshold={2}
+ updateOnWindowResize
+ className="!px-6 w-full overflow-visible"
+ breakpoints={{
+ 320: {
+ slidesPerView: 1.1,
+ },
+ 540: {
+ slidesPerView: 1.6,
+ },
+ 720: {
+ slidesPerView: 2.5,
+ },
+ }}
+ >
+ {examples.map((example: Example, i: number) => (
+ <SwiperSlide key={`${content}-${i}`}>
+ <ExampleCard {...example} showProducts />
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ </div>
+ )
+}
+
+export default ExamplesMobile

apps/www/components/BuiltWithSupabase/ExamplesMobile.tsx

@@ -0,0 +1,58 @@
+import { Button, cn, IconGitHubSolid } from 'ui'
+import Link from 'next/link'
+
+import SectionContainer from '~/components/Layouts/SectionContainer'
+import ExampleCard from '../ExampleCard'
+
+import Examples from 'data/Examples'
+import ExamplesMobile from './ExamplesMobile'
+
+const BuiltWithSupabase = () => {
+ return (
+ <>
+ <SectionContainer id="examples" className="xl:pt-32 !pb-0">
+ <div className="text-center flex flex-col items-center">
+ <h3 className="h2">Start building in seconds</h3>
+ <p className="p max-w-[300px] md:max-w-none">
+ Kickstart your next project with templates built by us and our community.
+ </p>
+ <div className="flex justify-center gap-2 py-4">
+ <Button asChild type="default" size="small" className="h-full">
+ <Link href="/docs/guides/examples">View all examples</Link>
+ </Button>
+ <Button
+ asChild
+ type="default"
+ icon={<IconGitHubSolid size="tiny" className="!w-full !h-full" />}
+ size="small"
+ >
+ <Link href="https://github.com/supabase/supabase/tree/master/examples">
+ Official GitHub library
+ </Link>
+ </Button>
+ </div>
+ </div>
+ </SectionContainer>
+ <SectionContainer className="relative w-full !px-0 lg:!px-16 xl:!px-20 !pb-0 mb-16 md:mb-12 lg:mb-12 !pt-6 max-w-[1400px]">
+ <ExamplesMobile examples={Examples.slice(0, 6)} className="lg:hidden" />
+ <div className="hidden lg:grid grid-cols-12 gap-5 mt-4">
+ {Examples.slice(0, 6).map((example, i) => {
+ return (
+ <div
+ className={cn(
+ 'col-span-12 h-full lg:col-span-6 xl:col-span-4',
+ 'flex items-stretch'
+ )}
+ key={i}
+ >
+ <ExampleCard {...example} showProducts />
+ </div>
+ )
+ })}
+ </div>
+ </SectionContainer>
+ </>
+ )
+}
+
+export default BuiltWithSupabase

apps/www/components/BuiltWithSupabase/index.tsx

@@ -0,0 +1,48 @@
+import 'swiper/css'
+import React from 'react'
+import { Swiper, SwiperSlide } from 'swiper/react'
+
+import { cn } from 'ui'
+import { CompositionCol } from '.'
+import type { CompositionColType } from '.'
+
+interface Props {
+ className?: string
+ columns: CompositionColType[]
+}
+
+const CustomersSliderMobile: React.FC<Props> = ({ columns, className }) => (
+ <div className={className}>
+ <Swiper
+ initialSlide={0}
+ spaceBetween={12}
+ slidesPerView="auto"
+ speed={400}
+ watchOverflow
+ threshold={2}
+ updateOnWindowResize
+ allowTouchMove
+ className="!px-6 w-full h-full overflow-visible"
+ >
+ {columns.map((column: CompositionColType, i: number) => (
+ <SwiperSlide
+ className={cn(
+ 'flex w-full !h-full',
+ column.type === 'expanded' ? 'w-full max-w-[450px]' : '!w-[250px]'
+ )}
+ key={`${column.cards[0].organization}-mobile-customer-${i}`}
+ >
+ <CompositionCol
+ className={cn(
+ 'flex flex-col w-full !h-full gap-3',
+ column.type === 'expanded' ? 'w-full' : 'w-[250px]'
+ )}
+ column={column}
+ />
+ </SwiperSlide>
+ ))}
+ </Swiper>
+ </div>
+)
+
+export default CustomersSliderMobile

apps/www/components/CustomerStories/CustomersSliderMobile.tsx

@@ -0,0 +1,52 @@
+import React from 'react'
+import { range } from 'lodash'
+import { cn } from 'ui'
+
+import { CompositionCol } from '.'
+import type { CompositionColType } from '.'
+
+interface Props {
+ className?: string
+ columns: CompositionColType[]
+}
+
+const compositionGap = 'gap-4'
+
+const CutomsersSliderDesktop: React.FC<Props> = ({ columns, className }) => (
+ <div
+ className={cn(
+ 'group/tw-marquee w-full items-stretch h-[300px] min-w-[300px] nowrap mb-16 md:mb-24 lg:mb-24',
+ compositionGap,
+ className
+ )}
+ >
+ {range(0, 2).map((_, idx1: number) => (
+ <div
+ key={`row-${idx1}`}
+ className={cn(
+ 'relative',
+ 'left-0 z-10',
+ 'w-auto h-full',
+ 'flex gap-4 items-end',
+ 'motion-safe:run motion-safe:animate-[marquee_50000ms_linear_both_infinite] group-hover/tw-marquee:pause',
+ 'will-change-transform transition-transform',
+ compositionGap
+ )}
+ >
+ {columns.map((column, idx2) => (
+ <CompositionCol
+ key={`customers-col-${idx1}-${idx2}`}
+ className={cn(
+ 'flex flex-col !h-full',
+ compositionGap,
+ column.type === 'expanded' ? 'w-[450px]' : 'w-[250px]'
+ )}
+ column={column}
+ />
+ ))}
+ </div>
+ ))}
+ </div>
+)
+
+export default CutomsersSliderDesktop