108 lines
4.3 KiB
TypeScript
108 lines
4.3 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ArrowRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface Feature189AbeshdeHamkarProps {
|
|
className?: string;
|
|
}
|
|
|
|
const Feature189AbeshdeHamkar = ({ className }: Feature189AbeshdeHamkarProps) => {
|
|
const features = [
|
|
{
|
|
title: "بهره‌وری بیشتر",
|
|
description:
|
|
"ثبت و پیگیری معاملات آبشده بدون تماس‌های مکرر؛ دسترسی لحظه‌ای به مانده و ریز تراکنش‌ها تا روی کار اصلی تمرکز کنید.",
|
|
},
|
|
{
|
|
title: "همکاری و شفافیت",
|
|
description:
|
|
"همه طرفین معامله به‌صورت شفاف به داده‌ها دسترسی دارند؛ همکاری بدون ابهام و تسویه بر اساس اعداد واقعی.",
|
|
},
|
|
{
|
|
title: "گزارش و تحلیل",
|
|
description:
|
|
"گزارش‌های تفصیلی و ابزارهای تحلیلی برای ارزیابی عملکرد و تصمیم‌گیری بر اساس داده.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
className={cn(
|
|
"bg-background py-16 sm:py-24 md:py-28 lg:py-32",
|
|
className
|
|
)}
|
|
dir="rtl"
|
|
>
|
|
<div className="container mx-auto max-w-6xl px-4 sm:px-6">
|
|
<div className="grid items-center gap-10 sm:gap-12 lg:grid-cols-2 lg:gap-16">
|
|
{/* تصاویر سکشن آبشده همکار */}
|
|
<div className="relative mb-8 lg:mb-0">
|
|
<div className="relative -top-8 z-10 mx-auto w-[55%] sm:-top-10 sm:w-[40%] lg:-top-12 lg:w-[35%]">
|
|
<img
|
|
alt="Professional Business Collaboration Meeting abshodeh-hamkar"
|
|
src="/assets/abshode-hamkar/Professional Business Collaboration Meeting abshodeh-hamkar.jpg"
|
|
className="h-[180px] rounded-xl object-cover shadow-lg sm:h-[260px] lg:h-[280px]"
|
|
/>
|
|
</div>
|
|
<div className="absolute left-0 top-4 z-0 w-[50%] -rotate-12 sm:top-6 sm:w-[35%]">
|
|
<img
|
|
alt="Financial Management Productivity Workspace abshodeh-hamkar"
|
|
src="/assets/abshode-hamkar/Financial Management Productivity Workspace abshodeh-hamkar.jpg"
|
|
className="h-[160px] rounded-xl object-cover shadow-lg sm:h-[240px] lg:h-[260px]"
|
|
/>
|
|
</div>
|
|
<div className="absolute right-0 top-4 z-20 w-[50%] rotate-12 sm:top-6 sm:w-[35%]">
|
|
<img
|
|
alt="Advanced Data Analysis Dashboard Office abshodeh-hamkar"
|
|
src="/assets/abshode-hamkar/Advanced Data Analysis Dashboard Office abshodeh-hamkar.jpg"
|
|
className="h-[160px] rounded-xl object-cover shadow-lg sm:h-[240px] lg:h-[260px]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* محتوا */}
|
|
<div className="max-w-xl lg:max-w-none lg:mr-auto">
|
|
<h2 className="text-heading-2 font-semibold leading-[var(--line-height-heading)] tracking-tight text-foreground lg:max-w-[90%]">
|
|
با ابزارهای حرفه‌ای، کسب‌وکارتان را متحول کنید
|
|
</h2>
|
|
|
|
<div className="mt-6 grid gap-6 sm:mt-10 sm:gap-8">
|
|
{features.map((feature) => (
|
|
<div key={feature.title} className="flex items-start gap-4">
|
|
<div>
|
|
<h3 className="text-heading-4 font-semibold leading-[var(--line-height-heading)] text-foreground">
|
|
{feature.title}
|
|
</h3>
|
|
<p className="text-body mt-1.5 leading-[var(--line-height-body)] text-muted-foreground">
|
|
{feature.description}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Button
|
|
asChild
|
|
variant="secondary"
|
|
className="mt-6 flex items-center gap-2 sm:mt-10"
|
|
>
|
|
<Link href="/contact">
|
|
بیشتر بدانید
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Feature189AbeshdeHamkar };
|