121 lines
4.2 KiB
TypeScript
121 lines
4.2 KiB
TypeScript
'use client'
|
|
|
|
import { CircleArrowRight, Files, Settings } from 'lucide-react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export interface AboutCompanySectionProps {
|
|
className?: string
|
|
mainHeading: string
|
|
description?: string
|
|
title: string
|
|
subtitle: string
|
|
bio: string
|
|
vision: string
|
|
philosophyHeading: string
|
|
outro: string
|
|
imageLogo?: { src: string; alt: string }
|
|
imageOffice?: { src: string; alt: string }
|
|
}
|
|
|
|
export function AboutCompanySection({
|
|
className,
|
|
mainHeading,
|
|
description,
|
|
title,
|
|
subtitle,
|
|
bio,
|
|
vision,
|
|
philosophyHeading,
|
|
outro,
|
|
imageLogo,
|
|
imageOffice,
|
|
}: AboutCompanySectionProps) {
|
|
const valueCards = [
|
|
{
|
|
icon: Files,
|
|
heading: philosophyHeading,
|
|
body: vision,
|
|
},
|
|
{
|
|
icon: CircleArrowRight,
|
|
heading: 'همراهی تخصصی',
|
|
body: 'تیم ما با تمرکز بر کیفیت اجرا، پاسخگویی سریع و توسعه مستمر کنار کسبوکار شما است.',
|
|
},
|
|
{
|
|
icon: Settings,
|
|
heading: 'رویکرد اجرایی',
|
|
body: outro,
|
|
},
|
|
]
|
|
|
|
return (
|
|
<section className={cn('py-20 md:py-24 lg:py-32', className)} dir="rtl">
|
|
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6 flex flex-col gap-14 lg:gap-24">
|
|
<div className="flex flex-col items-center gap-4 text-center md:gap-6">
|
|
<h1 className="text-heading-1 font-bold text-foreground">{mainHeading}</h1>
|
|
<p className="text-body mx-auto max-w-3xl text-muted-foreground md:text-body-sm">
|
|
{description ?? bio}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div className="overflow-hidden rounded-2xl border border-border bg-card">
|
|
{imageOffice ? (
|
|
<img
|
|
src={imageOffice.src}
|
|
alt={imageOffice.alt}
|
|
className="h-auto w-full object-contain"
|
|
/>
|
|
) : (
|
|
<div className="flex h-full min-h-64 items-center justify-center bg-muted p-8">
|
|
<div className="text-center">
|
|
<p className="text-heading-3 font-semibold text-foreground">{title}</p>
|
|
<p className="mt-2 text-body-sm text-muted-foreground">{subtitle}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col justify-between gap-8 rounded-2xl border border-border bg-accent/30 p-8 md:p-10">
|
|
<div className="flex items-center gap-4">
|
|
{imageLogo ? (
|
|
<img src={imageLogo.src} alt={imageLogo.alt} className="h-14 w-14 rounded-xl object-cover" />
|
|
) : (
|
|
<div className="flex h-14 w-14 items-center justify-center rounded-xl bg-muted text-heading-4 font-semibold text-muted-foreground">
|
|
{title.slice(0, 1)}
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="text-caption font-medium text-muted-foreground">معرفی برند</p>
|
|
<h2 className="text-heading-3 font-semibold text-foreground">{title}</h2>
|
|
</div>
|
|
</div>
|
|
<p className="text-body leading-[var(--line-height-relaxed)] text-foreground">{bio}</p>
|
|
<p className="text-body-sm text-muted-foreground">{vision}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-8 md:gap-14">
|
|
<div className="max-w-3xl">
|
|
<h2 className="text-heading-2 mb-4 font-semibold text-foreground">{philosophyHeading}</h2>
|
|
<p className="text-body text-muted-foreground">{outro}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-8 md:grid-cols-3">
|
|
{valueCards.map(({ icon: Icon, heading, body }, idx) => (
|
|
<div key={idx} className="flex flex-col rounded-2xl border border-border bg-card p-6">
|
|
<div className="mb-4 flex h-12 w-12 items-center justify-center rounded-xl bg-accent">
|
|
<Icon className="h-5 w-5 text-primary" />
|
|
</div>
|
|
<h3 className="text-heading-4 mb-3 font-medium text-foreground">{heading}</h3>
|
|
<p className="text-body-sm text-muted-foreground">{body}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|