108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
import { ArrowRight } from 'lucide-react'
|
||
import { toComponent } from '../lib/cms/icon'
|
||
import { toElevatedGradient, toTextColor } from '../lib/cms/color'
|
||
import type { Enum_Componentsharedcolor_Value, Enum_Componentsharedicon_Value } from '../graphql/graphql'
|
||
import type { Maybe } from '../lib/types'
|
||
|
||
export interface CaseCardCms {
|
||
id: string
|
||
title?: Maybe<string>
|
||
description?: Maybe<string>
|
||
pretitle?: Maybe<string>
|
||
badge?: Maybe<string>
|
||
footnote?: Maybe<string>
|
||
color?: Maybe<{ value?: Maybe<Enum_Componentsharedcolor_Value> }>
|
||
icon?: Maybe<{ value?: Maybe<Enum_Componentsharedicon_Value> }>
|
||
}
|
||
|
||
export interface CasesCmsData {
|
||
title?: Maybe<string>
|
||
description?: Maybe<string>
|
||
cards?: Maybe<Array<Maybe<CaseCardCms>>>
|
||
}
|
||
|
||
interface CasesProps {
|
||
data?: Maybe<CasesCmsData>
|
||
}
|
||
|
||
export function Cases({ data }: CasesProps) {
|
||
const title = data?.title ?? ''
|
||
const description = data?.description ?? ''
|
||
const cards = (data?.cards ?? []).filter((c): c is CaseCardCms => Boolean(c))
|
||
|
||
if (!title && !description && cards.length === 0) {
|
||
return null
|
||
}
|
||
|
||
return (
|
||
<section className="py-4 bg-white">
|
||
<div className="max-w-400 mx-auto px-6 xl:px-12 2xl:px-16">
|
||
<div className="mb-16">
|
||
<p className="text-sm uppercase tracking-wider text-gray-500 mb-4">Кейсы</p>
|
||
{title ? <h2 className="text-4xl lg:text-5xl text-gray-900 mb-6">{title}</h2> : null}
|
||
{description ? <p className="text-xl text-gray-600">{description}</p> : null}
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-3 gap-8">
|
||
{cards.map((caseItem, index) => {
|
||
const Icon = toComponent(caseItem.icon?.value)
|
||
const gradient = toElevatedGradient(caseItem.color?.value)
|
||
const iconColorClass = toTextColor(caseItem.color?.value)
|
||
const floatClass =
|
||
index === 0 ? 'animate-float' : index === 1 ? 'animate-float-delay-1' : 'animate-float-delay-2'
|
||
|
||
return (
|
||
<div
|
||
key={caseItem.id}
|
||
className="group bg-white rounded-2xl overflow-hidden border border-gray-100 hover:border-blue-200 hover:shadow-xl transition-all duration-300 cursor-pointer flex flex-col"
|
||
>
|
||
<div
|
||
className={`relative h-64 overflow-hidden bg-linear-to-br ${gradient} flex items-center justify-center`}
|
||
>
|
||
<div
|
||
className={`w-24 h-24 bg-white rounded-2xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300 shadow-md ${floatClass}`}
|
||
>
|
||
<Icon className={`w-12 h-12 ${iconColorClass}`} />
|
||
</div>
|
||
{caseItem.badge ? (
|
||
<div className="absolute top-4 left-4">
|
||
<span className="px-3 py-1 bg-white/90 backdrop-blur-sm text-gray-900 rounded-full border border-gray-200 text-sm">
|
||
{caseItem.badge}
|
||
</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<div className="p-6 flex flex-col flex-1">
|
||
{caseItem.pretitle ? <div className="text-sm text-blue-600 mb-2">{caseItem.pretitle}</div> : null}
|
||
|
||
{caseItem.title ? <h3 className="text-xl text-gray-900 mb-3">{caseItem.title}</h3> : null}
|
||
|
||
{caseItem.description ? (
|
||
<p className="text-gray-600 mb-4 leading-relaxed flex-1">{caseItem.description}</p>
|
||
) : null}
|
||
|
||
<div className="pt-4 border-t border-gray-100 flex items-center justify-between">
|
||
<span className="text-gray-900">{caseItem.footnote ?? ''}</span>
|
||
<ArrowRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 group-hover:translate-x-1 transition-all" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
<div className="text-center mt-12">
|
||
<button
|
||
type="button"
|
||
className="px-8 py-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-all shadow-md hover:shadow-lg inline-flex items-center gap-2"
|
||
>
|
||
Все кейсы
|
||
<ArrowRight className="w-5 h-5" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|