mirror of
https://github.com/supabase/supabase.git
synced 2026-10-18 07:39:07 +03:00
Francesco Sansalvadore
e76aa11508
* new homepage logos marquee * add products claim * logos spacing * dashboard table editor demo * dashboard table editor demo * dashboard recordings * rls policies * update hp frameworks * add dataAPIs to homepage bento * tweet section update * padding * hp products update * new customer stories hp section * height * finish homepage details * update logos * fix database visual * improve functions visual ux * animate data-apis visual * realtime visual update * reduce-motion and update chatbase logo * lighter heading paragraph * improve video tabs components * add priority to offsetted images * video plays inline * fix mobile tweets spacing * smoll * load video slightly before the component enters the viewport * fix product pointer-events * theme based and light weight dashboard video * testimonials margin * remove yellow tint from light mode recordings * fix vitest window-matchMedia error * fix vitest window-matchMedia error * fix url type * remove tweet
52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import Image from 'next/image'
|
|
import { range } from 'lodash'
|
|
|
|
const DataAPIsVisual = () => (
|
|
<figure className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute z-0 inset-0 flex flex-nowrap">
|
|
{range(0, 3).map((_, idx1: number) => (
|
|
<div
|
|
key={`row-${idx1}`}
|
|
className="relative h-full !aspect-[330/430] -right-10 -left-10 items-end pb-2 z-10 flex pause animate-[marquee-reverse_30000ms_linear_both_infinite] motion-safe:group-hover:run will-change-transform"
|
|
>
|
|
<Image
|
|
src="/images/index/products/data-apis-lines-dark.svg"
|
|
alt="Supabase restful DataAPIs"
|
|
fill
|
|
sizes="100%"
|
|
quality={100}
|
|
className="hidden dark:block !h-full !aspect-[330/430]"
|
|
/>
|
|
<Image
|
|
src="/images/index/products/data-apis-lines-light.svg"
|
|
alt="Supabase restful DataAPIs"
|
|
fill
|
|
sizes="100%"
|
|
quality={100}
|
|
className="dark:block !h-full !aspect-[330/430]"
|
|
/>
|
|
</div>
|
|
))}
|
|
<Image
|
|
src="/images/index/products/data-apis-dark.svg"
|
|
alt="Supabase restful DataAPIs"
|
|
fill
|
|
sizes="100%"
|
|
quality={100}
|
|
className="hidden dark:block absolute h-full aspect-[330/430] inset-0 z-10 object-contain xl:object-cover 2xl:object-contain object-center bottom-0"
|
|
/>
|
|
<Image
|
|
src="/images/index/products/data-apis-light.svg"
|
|
alt="Supabase restful DataAPIs"
|
|
fill
|
|
sizes="100%"
|
|
quality={100}
|
|
className="dark:hidden absolute h-full aspect-[330/430] inset-0 z-10 object-contain xl:object-cover 2xl:object-contain object-center bottom-0"
|
|
/>
|
|
</div>
|
|
</figure>
|
|
)
|
|
|
|
export default DataAPIsVisual
|