mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Prashant SridharanandTerry Sutton
99f0518137
## I have read the [CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md) file. YES ## What kind of change does this PR introduce? Created a new solution page for Hosted Postgres. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Added Hosted Postgres solution with a dedicated landing page (hero, features, pricing comparison, security, results, CTAs) * Introduced a reusable pricing comparison table component * Enhanced feature grids to support optional headers and richer icon options * **Updates** * Updated company stats (databases managed → 44M, daily launches → 200K, registered developers → 9M) * Added Hosted Postgres link to Solutions navigation * **Refactor** * Consolidated and exported component prop interfaces for cleaner prop contracts <!-- end of auto-generated comment: release notes by coderabbit.ai --> --------- Co-authored-by: Terry Sutton <saltcod@gmail.com>
87 lines
2.9 KiB
TypeScript
87 lines
2.9 KiB
TypeScript
import SectionContainer from '~/components/Layouts/SectionContainer'
|
|
import type { IconType } from '~/data/solutions/solutions.utils'
|
|
import React from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
interface Feature {
|
|
id: string
|
|
title: string
|
|
description: string | React.ReactNode
|
|
icon: string | IconType
|
|
iconNoStroke?: boolean
|
|
className?: string
|
|
}
|
|
|
|
export interface FeatureGridProps {
|
|
id: string
|
|
features: Feature[]
|
|
heading?: React.ReactNode
|
|
subheading?: React.ReactNode
|
|
className?: string
|
|
}
|
|
|
|
const FeatureGrid = ({ id, features, heading, subheading, className }: FeatureGridProps) => {
|
|
return (
|
|
<SectionContainer id={id} className={cn('flex flex-col gap-12 py-16 md:py-24', className)}>
|
|
{(heading || subheading) && (
|
|
<div className="flex flex-col gap-2 max-w-xl">
|
|
{heading && <h2 className="h2 text-foreground-lighter m-0!">{heading}</h2>}
|
|
{subheading && <p className="text-foreground-lighter">{subheading}</p>}
|
|
</div>
|
|
)}
|
|
<div
|
|
className="
|
|
grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
|
|
sm:divide-x divide-y border border-default rounded-md overflow-hidden
|
|
[&>div:nth-child(2n+1)]:sm:border-l-0!
|
|
[&>div:nth-child(2)]:sm:border-t-0!
|
|
[&>div:nth-child(3)]:lg:border-t-0!
|
|
[&>div:nth-child(3n)]:lg:border-l!
|
|
[&>div:nth-child(4n)]:lg:border-l-0!
|
|
[&>div:nth-child(3n-1)]:lg:border-l!
|
|
"
|
|
>
|
|
{features.map((feature) => (
|
|
<div
|
|
key={feature.id}
|
|
className={cn(
|
|
'text-sm bg-default p-4 md:p-6 flex flex-col gap-2 md:gap-4 text-foreground-lighter',
|
|
feature.className
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
{feature.icon &&
|
|
(typeof feature.icon === 'string' ? (
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 25 25"
|
|
fill={feature.iconNoStroke ? 'currentColor' : 'none'}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d={feature.icon}
|
|
stroke={feature.iconNoStroke ? 'none' : 'currentColor'}
|
|
strokeMiterlimit="10"
|
|
strokeLinejoin="round"
|
|
strokeLinecap="round"
|
|
strokeWidth="1.5"
|
|
/>
|
|
</svg>
|
|
) : (
|
|
<feature.icon className="w-[18px] h-[18px]" strokeWidth={1.5} />
|
|
))}
|
|
<h3 className="">{feature.title}</h3>
|
|
</div>
|
|
<p className="text-base">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</SectionContainer>
|
|
)
|
|
}
|
|
|
|
export default FeatureGrid
|