feat: redesign Stats and TrustBar blocks to match new editorial direction
This commit is contained in:
@@ -1,19 +1,10 @@
|
|||||||
'use client'
|
'use client'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import type { Page } from '../../payload-types'
|
||||||
|
|
||||||
export interface StatsProps {
|
type Props = Extract<NonNullable<Page['layout']>[0], { blockType: 'stats' }>
|
||||||
eyebrow?: string | null
|
|
||||||
title?: string | null
|
|
||||||
subtitle?: string | null
|
|
||||||
items?: Array<{
|
|
||||||
id?: string | null
|
|
||||||
stat: string
|
|
||||||
label: string
|
|
||||||
description?: string | null
|
|
||||||
}> | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export const StatsBlock: React.FC<StatsProps> = ({ eyebrow, title, subtitle, items }) => {
|
export const StatsBlock: React.FC<Props> = ({ title, subtitle, items }) => {
|
||||||
if (!items || items.length === 0) return null
|
if (!items || items.length === 0) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -21,11 +12,6 @@ export const StatsBlock: React.FC<StatsProps> = ({ eyebrow, title, subtitle, ite
|
|||||||
<div className="container-premium">
|
<div className="container-premium">
|
||||||
{(title || subtitle) && (
|
{(title || subtitle) && (
|
||||||
<div className="max-w-3xl mb-16 md:mb-24">
|
<div className="max-w-3xl mb-16 md:mb-24">
|
||||||
{eyebrow && (
|
|
||||||
<div className="font-mono text-sm md:text-base font-bold text-accent tracking-widest uppercase mb-4">
|
|
||||||
// {eyebrow}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{title && (
|
{title && (
|
||||||
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-6 tracking-tight text-balance">
|
<h2 className="font-heading text-3xl sm:text-4xl md:text-5xl font-extrabold text-foreground mb-6 tracking-tight text-balance">
|
||||||
{title}
|
{title}
|
||||||
@@ -45,7 +31,7 @@ export const StatsBlock: React.FC<StatsProps> = ({ eyebrow, title, subtitle, ite
|
|||||||
key={item.id || index}
|
key={item.id || index}
|
||||||
className="flex flex-col p-8 sm:p-12 border-b border-r border-border hover:bg-foreground/[0.02] transition-colors"
|
className="flex flex-col p-8 sm:p-12 border-b border-r border-border hover:bg-foreground/[0.02] transition-colors"
|
||||||
>
|
>
|
||||||
<div className="font-heading text-5xl lg:text-7xl font-extrabold text-accent mb-4 tracking-tighter">
|
<div className="font-heading text-5xl lg:text-7xl font-extrabold text-accent mb-4 tracking-tight">
|
||||||
{item.stat}
|
{item.stat}
|
||||||
</div>
|
</div>
|
||||||
<div className="font-heading text-xl font-bold text-foreground mb-2">
|
<div className="font-heading text-xl font-bold text-foreground mb-2">
|
||||||
|
|||||||
@@ -1,6 +1,4 @@
|
|||||||
'use client'
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { motion } from 'framer-motion'
|
|
||||||
import { Shield, CheckCircle, MessageCircle, Star } from 'lucide-react'
|
import { Shield, CheckCircle, MessageCircle, Star } from 'lucide-react'
|
||||||
import type { Page } from '../../payload-types'
|
import type { Page } from '../../payload-types'
|
||||||
|
|
||||||
@@ -23,19 +21,15 @@ export const TrustBarBlock: React.FC<Props> = ({ items }) => {
|
|||||||
{items.map((item: NonNullable<Props['items']>[0], index: number) => {
|
{items.map((item: NonNullable<Props['items']>[0], index: number) => {
|
||||||
const Icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : CheckCircle
|
const Icon = item.icon ? iconMap[item.icon as keyof typeof iconMap] : CheckCircle
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<div
|
||||||
key={item.id || index}
|
key={item.id || index}
|
||||||
initial={{ opacity: 0, y: 10 }}
|
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
|
||||||
viewport={{ once: true }}
|
|
||||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
|
||||||
className="flex items-center gap-3"
|
className="flex items-center gap-3"
|
||||||
>
|
>
|
||||||
<div className="text-accent flex-shrink-0">
|
<div className="text-accent flex-shrink-0">
|
||||||
<Icon size={24} />
|
<Icon size={24} />
|
||||||
</div>
|
</div>
|
||||||
<span className="text-sm font-medium text-foreground">{item.text}</span>
|
<span className="text-sm font-medium text-foreground">{item.text}</span>
|
||||||
</motion.div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user