mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 20:35:07 +03:00
Terry Sutton
3f828ff8f5
Move the /pricing/ page to the app router <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added a dedicated pricing page with pricing plans, interactive cost calculators, add-ons options, and plan comparison tools. * **Updates** * Enhanced pricing components with performance improvements and streamlined navigation handling. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
73 lines
2.4 KiB
TypeScript
73 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useBreakpoint } from 'common'
|
|
import { useTheme } from 'next-themes'
|
|
import Image from 'next/image'
|
|
import React, { useState } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
const PricingComputeAnimation = () => {
|
|
const { resolvedTheme } = useTheme()
|
|
const [triggerAnimation, setTriggerAnimation] = useState(false)
|
|
const isTablet = useBreakpoint(1023)
|
|
|
|
return (
|
|
<figure
|
|
className="h-full relative lg:absolute lg:-right-24 xl:-right-10 aspect-[541/285]"
|
|
onMouseEnter={() => setTriggerAnimation(true)}
|
|
>
|
|
<Image
|
|
fill
|
|
src={`/images/pricing/compute/compute-cube-${
|
|
resolvedTheme?.includes('dark') ? 'dark' : 'light'
|
|
}-active.svg`}
|
|
alt="Compute addon grid"
|
|
className={cn(
|
|
'absolute inset-0 z-20 transition-opacity opacity-0 !ease-[cubic-bezier(.76,0,.23,1)] duration-300',
|
|
triggerAnimation && 'opacity-100'
|
|
)}
|
|
/>
|
|
<Image
|
|
fill
|
|
src={`/images/pricing/compute/compute-cube-${
|
|
resolvedTheme?.includes('dark') ? 'dark' : 'light'
|
|
}-active.svg`}
|
|
alt="Compute addon grid"
|
|
className={cn(
|
|
'absolute inset-0 z-20 transition-all opacity-0 !ease-[cubic-bezier(.76,0,.23,1)] duration-500 delay-500 -translate-y-[18%] blur-md',
|
|
triggerAnimation && 'opacity-100 -translate-y-[8%] blur-none'
|
|
)}
|
|
/>
|
|
<Image
|
|
fill
|
|
src={`/images/pricing/compute/compute-cube-${
|
|
resolvedTheme?.includes('dark') ? 'dark' : 'light'
|
|
}-active.svg`}
|
|
alt="Compute addon grid"
|
|
className={cn(
|
|
'absolute inset-0 z-20 transition-all opacity-0 !ease-[cubic-bezier(.76,0,.23,1)] duration-500 delay-1000 -translate-y-[24%] blur-md',
|
|
triggerAnimation && 'opacity-100 -translate-y-[16%] blur-none'
|
|
)}
|
|
/>
|
|
<Image
|
|
fill
|
|
src={`/images/pricing/compute/compute-cube-${
|
|
resolvedTheme?.includes('dark') ? 'dark' : 'light'
|
|
}.svg`}
|
|
alt="Compute addon grid"
|
|
className="absolute inset-0 z-10"
|
|
/>
|
|
<Image
|
|
fill
|
|
src={`/images/pricing/compute/compute-grid${isTablet ? '-mobile' : ''}-${
|
|
resolvedTheme?.includes('dark') ? 'dark' : 'light'
|
|
}.svg`}
|
|
alt="Compute addon grid"
|
|
className="absolute inset-0 z-0 object-contain object-center"
|
|
/>
|
|
</figure>
|
|
)
|
|
}
|
|
|
|
export default PricingComputeAnimation
|