Skip to content

Commit 6955924

Browse files
mnapolimnapoli
committed
Landing responsive features
1 parent 1980230 commit 6955924

File tree

1 file changed

+42
-76
lines changed

1 file changed

+42
-76
lines changed

‎website/src/pages/cloud/features.jsx‎

Lines changed: 42 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -184,85 +184,51 @@ export default function Features() {
184184
</h2>
185185

186186
<div className="mx-auto max-w-2xl space-y-16">
187-
{tiers.map((tier) => (
188-
<div key={tier.id} className="border-t border-gray-900/10">
189-
<div
190-
className={classNames(
191-
tier.featured ? 'border-blue-600' : 'border-transparent',
192-
'-mt-px w-72 border-t-2 pt-10 md:w-80',
193-
)}
194-
>
195-
<h3
196-
className={classNames(
197-
tier.featured ? 'text-blue-600' : 'text-gray-900',
198-
'text-sm/6 font-semibold',
199-
)}
200-
>
201-
{tier.name}
202-
</h3>
203-
<p className="mt-1 text-sm/6 text-gray-600">{tier.description}</p>
204-
</div>
205187

206-
<div className="mt-10 space-y-10">
207-
{sections.map((section) => (
208-
<div key={section.name}>
209-
<h4 className="text-sm/6 font-semibold text-gray-900">{section.name}</h4>
210-
<div className="relative mt-6">
211-
{/* Fake card background */}
212-
<div
213-
aria-hidden="true"
214-
className="absolute inset-y-0 right-0 hidden w-1/2 rounded-lg bg-white shadow-sm sm:block"
215-
/>
216-
217-
<div
218-
className={classNames(
219-
tier.featured ? 'ring-2 ring-blue-600' : 'ring-1 ring-gray-900/10',
220-
'relative rounded-lg bg-white shadow-sm sm:rounded-none sm:bg-transparent sm:shadow-none sm:ring-0',
221-
)}
222-
>
223-
<dl className="divide-y divide-gray-200 text-sm/6">
224-
{section.features.map((feature) => (
225-
<div
226-
key={feature.name}
227-
className="flex items-center justify-between px-4 py-3 sm:grid sm:grid-cols-2 sm:px-0"
188+
{sections.map((section) => (
189+
<div key={section.name}>
190+
<h4 className="text-base/6 font-semibold text-gray-900">{section.name}</h4>
191+
<div className="mt-6 text-sm/6">
192+
{section.features.map((feature) => (
193+
<div key={feature.name} className="my-6">
194+
<div className="font-semibold text-gray-600">{feature.name}</div>
195+
{feature.description && (
196+
<div className="mt-1 text-xs/4 text-gray-500 text-pretty" dangerouslySetInnerHTML={{ __html: feature.description }}></div>
197+
)}
198+
<div className="mt-2 grid grid-cols-2 text-center text-gray-400 text-xs">
199+
<div>Bref</div>
200+
<div>Bref Cloud</div>
201+
</div>
202+
<div className="rounded bg-white ring-1 ring-gray-900/10 py-2 grid grid-cols-2 text-center divide-x divide-gray-200">
203+
{tiers.map((tier) => (
204+
<div className="px-1.5">
205+
{(typeof feature.tiers[tier.id] === 'string' || typeof feature.tiers[tier.id]?.title === 'string') && (
206+
<span
207+
className={classNames(
208+
tier.featured ? 'font-semibold text-blue-600' : 'text-gray-900',
209+
' text-sm/5',
210+
)}
228211
>
229-
<dt className="pr-4 text-gray-600">{feature.name}</dt>
230-
<dd className="flex items-center justify-end sm:justify-center sm:px-4">
231-
{typeof feature.tiers[tier.id] === 'string' ? (
232-
<span
233-
className={tier.featured ? 'font-semibold text-blue-600' : 'text-gray-900'}
234-
>
235-
{feature.tiers[tier.id]}
236-
</span>
237-
) : (
238-
<>
239-
{feature.tiers[tier.id] === true ? (
240-
<CheckIcon aria-hidden="true"
241-
className="mx-auto size-5 text-blue-600" />
242-
) : (
243-
<XMarkIcon aria-hidden="true"
244-
className="mx-auto size-5 text-gray-400" />
245-
)}
246-
247-
<span className="sr-only">
248-
{feature.tiers[tier.id] === true ? 'Yes' : 'No'}
249-
</span>
250-
</>
251-
)}
252-
</dd>
212+
{feature.tiers[tier.id]?.title || feature.tiers[tier.id]}
213+
</span>
214+
)}
215+
{(typeof feature.tiers[tier.id] === 'boolean' || typeof feature.tiers[tier.id]?.title === 'boolean') && (
216+
<div className="flex justify-center">
217+
{(feature.tiers[tier.id]?.title || feature.tiers[tier.id]) === true ? (
218+
<CheckIcon aria-hidden="true" className="block size-6 text-blue-600" />
219+
) : (
220+
<XMarkIcon aria-hidden="true" className="block size-6 text-gray-400" />
221+
)}
222+
<span className="sr-only">
223+
{(feature.tiers[tier.id]?.title || feature.tiers[tier.id]) === true ? 'Yes' : 'No'}
224+
</span>
253225
</div>
254-
))}
255-
</dl>
256-
</div>
257-
258-
{/* Fake card border */}
259-
<div
260-
aria-hidden="true"
261-
className={classNames(
262-
tier.featured ? 'ring-2 ring-blue-600' : 'ring-1 ring-gray-900/10',
263-
'pointer-events-none absolute inset-y-0 right-0 hidden w-1/2 rounded-lg sm:block',
264-
)}
265-
/>
226+
)}
227+
{typeof feature.tiers[tier.id]?.description === 'string' && (
228+
<div className="mt-1 text-gray-500 text-xs/4 text-pretty" dangerouslySetInnerHTML={{ __html: feature.tiers[tier.id].description }}></div>
229+
)}
230+
</div>
231+
))}
266232
</div>
267233
</div>
268234
))}

0 commit comments

Comments
 (0)