six bug
This commit is contained in:
mr.sabri
+38
-27
@@ -13,21 +13,21 @@ const FEATURES = [
|
||||
description: "گزارش سفارشی را بدون SQL بسازید و سریع منتشر کنید.",
|
||||
image: "/block-media/shadcnblocks/block/placeholder-1.svg",
|
||||
imageAlt: "گزارشساز",
|
||||
icon: <Workflow />,
|
||||
icon: <Workflow className="size-5 sm:size-6" />,
|
||||
},
|
||||
{
|
||||
title: "Pivot تعاملی",
|
||||
description: "ابعاد مختلف را بچرخانید و الگوی پنهان را پیدا کنید.",
|
||||
image: "/block-media/shadcnblocks/block/placeholder-2.svg",
|
||||
imageAlt: "تحلیل داده سازمان",
|
||||
icon: <Users />,
|
||||
icon: <Users className="size-5 sm:size-6" />,
|
||||
},
|
||||
{
|
||||
title: "داشبورد مدیریتی",
|
||||
description: "نمای اجرایی برای تصمیمهای سریع طراحی کنید.",
|
||||
image: "/block-media/shadcnblocks/block/placeholder-3.svg",
|
||||
imageAlt: "داشبورد هوش تجاری",
|
||||
icon: <Flag />,
|
||||
icon: <Flag className="size-5 sm:size-6" />,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -41,54 +41,62 @@ const Feature184 = ({ className }: Feature184Props) => {
|
||||
const activeFeature = FEATURES.find((f) => f.title === activeTab);
|
||||
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-20 md:py-32", className)}>
|
||||
<div className="container mx-auto flex flex-col items-center px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-12 max-w-3xl text-center">
|
||||
<section
|
||||
dir="rtl"
|
||||
lang="fa"
|
||||
className={cn(
|
||||
"w-full max-w-full overflow-x-hidden py-20 md:py-32",
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="container mx-auto flex min-w-0 flex-col items-center px-4 sm:px-6 lg:px-8">
|
||||
<div className="mb-8 w-full max-w-3xl text-center sm:mb-12">
|
||||
<h2 className="text-xl leading-tight font-semibold tracking-tight text-balance sm:text-3xl md:text-xl lg:text-2xll">
|
||||
تصمیم استراتژیک را دادهمحور کنید
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-2">
|
||||
<div className="relative h-[300px] overflow-hidden rounded-xl sm:h-[420px]">
|
||||
<div className="grid w-full min-w-0 gap-6 sm:gap-8 lg:grid-cols-2">
|
||||
<div className="relative h-[220px] min-w-0 overflow-hidden rounded-xl sm:h-[300px] md:h-[420px]">
|
||||
<img
|
||||
src={activeFeature?.image}
|
||||
alt={activeFeature?.imageAlt ?? activeTab}
|
||||
className="h-full w-full object-cover"
|
||||
className="h-full w-full max-w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative flex flex-col justify-between">
|
||||
<div className="relative flex min-w-0 flex-col justify-between">
|
||||
<Tabs
|
||||
defaultValue={FEATURES[0].title}
|
||||
onValueChange={(value) => setActiveTab(value)}
|
||||
className="h-full w-full"
|
||||
value={activeTab}
|
||||
onValueChange={setActiveTab}
|
||||
className="h-full w-full min-w-0"
|
||||
>
|
||||
<TabsList className="flex !h-full w-full flex-col gap-4 rounded-xl border-none bg-transparent p-0">
|
||||
<TabsList className="flex !h-auto w-full min-w-0 flex-col gap-3 rounded-xl border-none bg-transparent p-0 sm:gap-4">
|
||||
{FEATURES.map((feature) => (
|
||||
<TabsTrigger
|
||||
key={feature.title}
|
||||
value={feature.title}
|
||||
className={cn(
|
||||
"group relative flex h-full w-full flex-col items-start rounded-xl p-6 text-start transition-all",
|
||||
"group relative flex h-auto w-full min-w-0 flex-col items-stretch rounded-xl p-4 text-start whitespace-normal transition-all sm:p-6",
|
||||
"border border-border/50 bg-card hover:border-primary/50",
|
||||
"data-[state=active]:z-20 data-[state=active]:scale-[1.02] data-[state=active]:border-primary data-[state=active]:bg-primary/95 data-[state=active]:shadow-lg",
|
||||
"data-[state=active]:z-10 data-[state=active]:border-primary data-[state=active]:bg-primary/95 data-[state=active]:shadow-lg",
|
||||
"sm:data-[state=active]:scale-[1.02]",
|
||||
)}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex w-full min-w-0 items-start gap-3 sm:items-center sm:justify-between sm:gap-4">
|
||||
<div className="flex min-w-0 flex-1 items-start gap-3 sm:items-center sm:gap-6">
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg bg-muted p-4 transition-colors",
|
||||
"shrink-0 rounded-lg bg-muted p-2.5 transition-colors sm:p-4",
|
||||
"group-data-[state=active]:bg-background",
|
||||
)}
|
||||
>
|
||||
{feature.icon}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2 text-start">
|
||||
<div className="flex min-w-0 flex-col gap-1.5 text-start sm:gap-2">
|
||||
<h3
|
||||
className={cn(
|
||||
"text-xl font-medium",
|
||||
"text-base font-medium text-pretty sm:text-xl",
|
||||
"group-data-[state=active]:text-primary-foreground",
|
||||
)}
|
||||
>
|
||||
@@ -96,7 +104,7 @@ const Feature184 = ({ className }: Feature184Props) => {
|
||||
</h3>
|
||||
<span
|
||||
className={cn(
|
||||
"text-sm text-muted-foreground transition-colors",
|
||||
"text-sm text-pretty text-muted-foreground transition-colors",
|
||||
"group-data-[state=active]:text-primary-foreground/90",
|
||||
)}
|
||||
>
|
||||
@@ -104,7 +112,7 @@ const Feature184 = ({ className }: Feature184Props) => {
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="ps-8">
|
||||
<div className="shrink-0 pt-1 sm:ps-4 sm:pt-0">
|
||||
<ChevronUp
|
||||
className={cn(
|
||||
"size-5 text-muted-foreground transition-all duration-300",
|
||||
@@ -120,14 +128,17 @@ const Feature184 = ({ className }: Feature184Props) => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 flex flex-col items-center justify-center gap-4 sm:flex-row">
|
||||
<div className="mt-10 flex w-full min-w-0 flex-col items-stretch justify-center gap-3 sm:mt-12 sm:flex-row sm:items-center sm:gap-4">
|
||||
<Button className="w-full gap-2 sm:w-auto">
|
||||
<Zap className="size-4" />
|
||||
شروع کنید
|
||||
</Button>
|
||||
<Button variant="outline" className="w-full gap-2 sm:w-auto">
|
||||
<Pyramid className="size-4" />
|
||||
داشبوردهای تعاملی به تیمها اجازه میدهد سؤال جدید بپرسند بدون اینکه هر بار به تیم داده وابسته باشند.
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-auto w-full gap-2 whitespace-normal px-4 py-2 text-pretty sm:w-auto"
|
||||
>
|
||||
<Pyramid className="size-4 shrink-0" />
|
||||
بیشتر بدانید
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user