initial commit
This commit is contained in:
ahmadrezabd
@@ -51,8 +51,8 @@ export default function ContentSection() {
|
||||
</p>
|
||||
|
||||
<div className="mt-6 space-y-3">
|
||||
<cite className="block font-medium">جان دو، مدیرعامل</cite>
|
||||
<div className="h-12 w-20 rounded-lg bg-gradient-to-br from-[#216583] to-[#00818A] opacity-80"></div>
|
||||
<div className="block font-medium not-italic">احمدرضا بدیعی، مدیرعامل</div>
|
||||
<div className="block font-medium not-italic">احمدرضا عزیزان</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
@@ -41,7 +41,7 @@ export default function FooterSection() {
|
||||
<Link
|
||||
key={index}
|
||||
href={link.href}
|
||||
className="text-muted-foreground hover:text-primary block duration-150"
|
||||
className="text-muted-foreground hover:text-accent transition-colors duration-150"
|
||||
>
|
||||
<span>{link.title}</span>
|
||||
</Link>
|
||||
@@ -53,7 +53,7 @@ export default function FooterSection() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="X/Twitter"
|
||||
className="text-muted-foreground hover:text-primary block"
|
||||
className="text-muted-foreground hover:text-accent transition-colors duration-150"
|
||||
>
|
||||
<svg
|
||||
className="size-6"
|
||||
@@ -73,7 +73,7 @@ export default function FooterSection() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="LinkedIn"
|
||||
className="text-muted-foreground hover:text-primary block"
|
||||
className="text-muted-foreground hover:text-accent transition-colors duration-150"
|
||||
>
|
||||
<svg
|
||||
className="size-6"
|
||||
@@ -94,7 +94,7 @@ export default function FooterSection() {
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="Instagram"
|
||||
className="text-muted-foreground hover:text-primary block"
|
||||
className="text-muted-foreground hover:text-accent transition-colors duration-150"
|
||||
>
|
||||
<svg
|
||||
className="size-6"
|
||||
|
||||
@@ -54,7 +54,7 @@ export const HeroHeader = () => {
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-muted-foreground hover:text-accent-foreground block duration-150">
|
||||
className="text-muted-foreground hover:text-accent transition-colors duration-150">
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
@@ -69,7 +69,7 @@ export const HeroHeader = () => {
|
||||
<li key={index}>
|
||||
<Link
|
||||
href={item.href}
|
||||
className="text-muted-foreground hover:text-accent-foreground block duration-150">
|
||||
className="text-muted-foreground hover:text-accent transition-colors duration-150">
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
+61
-11
@@ -197,7 +197,7 @@ export default function HeroSection() {
|
||||
<div className="absolute inset-0 z-10 flex scale-95 items-center justify-center opacity-0 duration-500 group-hover:scale-100 group-hover:opacity-100">
|
||||
<Link
|
||||
href="/"
|
||||
className="block text-sm duration-150 hover:opacity-75"
|
||||
className="block text-sm duration-150 hover:text-accent transition-colors"
|
||||
>
|
||||
<span> با مشتریان ما آشنا شوید</span>
|
||||
|
||||
@@ -206,28 +206,78 @@ export default function HeroSection() {
|
||||
</div>
|
||||
<div className="group-hover:blur-xs mx-auto mt-12 grid max-w-2xl grid-cols-4 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-12 w-20 rounded-lg bg-gradient-to-br from-[#216583] to-[#00818A] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nvidia.svg"
|
||||
alt="Nvidia Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<img
|
||||
className="mx-auto h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/column.svg"
|
||||
alt="Column Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-10 w-16 rounded-lg bg-gradient-to-br from-[#293462] to-[#216583] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/github.svg"
|
||||
alt="GitHub Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-10 w-16 rounded-lg bg-gradient-to-br from-[#00818A] to-[#216583] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nike.svg"
|
||||
alt="Nike Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-12 w-20 rounded-lg bg-gradient-to-br from-[#F7BE16] to-[#00818A] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/lemonsqueezy.svg"
|
||||
alt="Lemon Squeezy Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-12 w-20 rounded-lg bg-gradient-to-br from-[#216583] to-[#293462] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/laravel.svg"
|
||||
alt="Laravel Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-10 w-16 rounded-lg bg-gradient-to-br from-[#00818A] to-[#F7BE16] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-7 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/lilly.svg"
|
||||
alt="Lilly Logo"
|
||||
height="28"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-14 w-24 rounded-lg bg-gradient-to-br from-[#293462] to-[#216583] opacity-80"></div>
|
||||
</div>
|
||||
<div className="flex">
|
||||
<div className="mx-auto h-12 w-20 rounded-lg bg-gradient-to-br from-[#216583] to-[#00818A] opacity-80"></div>
|
||||
<img
|
||||
className="mx-auto h-6 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/openai.svg"
|
||||
alt="OpenAI Logo"
|
||||
height="24"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+1
-1
@@ -24,7 +24,7 @@ export const LogoIcon = ({
|
||||
className?: string;
|
||||
uniColor?: boolean;
|
||||
}) => {
|
||||
return <Image src="/assets/logo.svg" alt="Logo" width={35} height={100} />;
|
||||
return <Image src="/assets/arablogo.svg" alt="Logo" width={80} height={80} className={cn("h-auto", className)} />;
|
||||
};
|
||||
|
||||
export const LogoStroke = ({ className }: { className?: string }) => {
|
||||
|
||||
+183
-61
@@ -1,61 +1,170 @@
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Check } from "lucide-react";
|
||||
import { Check, FileText, Code, Settings, Users, Clock } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Pricing() {
|
||||
return (
|
||||
<div className="relative bg-white py-16 md:py-32">
|
||||
<div className="mx-auto max-w-5xl px-6">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<h1 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl leading-relaxed tracking-normal">
|
||||
قیمتگذاری
|
||||
</h1>
|
||||
<p className="mt-4 text-lg leading-relaxed tracking-normal text-muted-foreground">
|
||||
قیمتها بر اساس نوع سرویس و بازه زمانی تعیین میشوند
|
||||
</p>
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="bg-white py-20 md:py-28">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="text-center space-y-6">
|
||||
<h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
|
||||
قیمتگذاری
|
||||
</h1>
|
||||
<p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
|
||||
قیمتها بر اساس نوع سرویس و بازه زمانی تعیین میشوند
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 md:mt-20">
|
||||
</section>
|
||||
|
||||
{/* Pricing Factors - بخش اصلی توضیحات */}
|
||||
<section className="bg-muted/30 py-20 md:py-28">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="space-y-12">
|
||||
<div className="text-center space-y-4 max-w-3xl mx-auto">
|
||||
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
|
||||
پروژهها بر اساس چه عواملی قیمتگذاری میشوند؟
|
||||
</h2>
|
||||
<p className="text-lg leading-relaxed tracking-normal text-muted-foreground">
|
||||
ما متعهد هستیم که پروژههای شما را در <strong className="text-foreground">کمترین زمان ممکن</strong> و با <strong className="text-foreground">بهترین قیمت</strong> انجام دهیم.
|
||||
قیمتگذاری ما بر اساس نیازهای خاص شما انجام میشود و عوامل مختلفی در تعیین قیمت نهایی نقش دارند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="space-y-4 p-8 rounded-2xl border bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
|
||||
<FileText className="size-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold leading-tight">نوع پروژه</h3>
|
||||
</div>
|
||||
<p className="leading-relaxed tracking-normal text-muted-foreground">
|
||||
نوع پروژه شما یکی از مهمترین عوامل در تعیین قیمت است. پروژههای یکپارچهسازی،
|
||||
اتوماسیون، ارتباطات چندکاناله و مدیریت دادهها هر کدام نیازمندیها و پیچیدگیهای خاص خود را دارند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-8 rounded-2xl border bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
|
||||
<Code className="size-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold leading-tight">پیچیدگی پروژه</h3>
|
||||
</div>
|
||||
<p className="leading-relaxed tracking-normal text-muted-foreground">
|
||||
میزان پیچیدگی فنی پروژه، تعداد سیستمهای متصل، حجم دادهها و نیاز به سفارشیسازی
|
||||
از عوامل مهم در تعیین قیمت هستند. پروژههای پیچیدهتر نیاز به زمان و تخصص بیشتری دارند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-8 rounded-2xl border bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
|
||||
<Settings className="size-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold leading-tight">اجرا و پیادهسازی</h3>
|
||||
</div>
|
||||
<p className="leading-relaxed tracking-normal text-muted-foreground">
|
||||
مراحل اجرا و پیادهسازی شامل طراحی، توسعه، تست و استقرار میشود.
|
||||
میزان زمان و منابع مورد نیاز برای هر مرحله در قیمت نهایی تاثیر دارد.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-8 rounded-2xl border bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
|
||||
<Users className="size-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold leading-tight">تعداد کاربران</h3>
|
||||
</div>
|
||||
<p className="leading-relaxed tracking-normal text-muted-foreground">
|
||||
تعداد کاربرانی که از سیستم استفاده میکنند و حجم ترافیک مورد انتظار
|
||||
در تعیین قیمت موثر است. سیستمهای با کاربران بیشتر نیاز به زیرساخت قویتری دارند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-8 rounded-2xl border bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
|
||||
<Clock className="size-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold leading-tight">بازه زمانی</h3>
|
||||
</div>
|
||||
<p className="leading-relaxed tracking-normal text-muted-foreground">
|
||||
بازه زمانی استفاده از سرویس (ماهانه، سالانه) و مدت زمان مورد نیاز برای تکمیل پروژه
|
||||
در قیمتگذاری تاثیر دارد. قراردادهای بلندمدت معمولاً شامل تخفیفهای ویژه میشوند.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 p-8 rounded-2xl border bg-white">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
|
||||
<Settings className="size-7" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold leading-tight">پشتیبانی و نگهداری</h3>
|
||||
</div>
|
||||
<p className="leading-relaxed tracking-normal text-muted-foreground">
|
||||
نیاز به پشتیبانی فنی، بهروزرسانیها، نگهداری و مستندات کامل
|
||||
از عوامل مهم در تعیین قیمت هستند. پشتیبانی ۲۴/۷ و نگهداری مستمر نیاز به منابع بیشتری دارد.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Package Details */}
|
||||
<section className="bg-white py-20 md:py-28">
|
||||
<div className="mx-auto max-w-6xl px-6">
|
||||
<div className="bg-card relative rounded-3xl border shadow-2xl shadow-zinc-950/5">
|
||||
<div className="grid items-center gap-12 divide-y p-12 md:grid-cols-2 md:divide-x md:divide-y-0">
|
||||
<div className="pb-12 text-center md:pb-0 md:pe-12">
|
||||
<h3 className="text-2xl font-semibold leading-relaxed tracking-normal">پکیج سازمانی</h3>
|
||||
<p className="mt-2 text-lg leading-relaxed tracking-normal">برای شرکت شما با هر اندازهای</p>
|
||||
|
||||
<div className="mt-8 rounded-2xl border bg-muted/30 p-6">
|
||||
<p className="text-muted-foreground text-sm leading-relaxed tracking-normal">
|
||||
قیمتگذاری ما بر اساس نیازهای خاص شما انجام میشود. عوامل موثر در تعیین قیمت شامل:
|
||||
</p>
|
||||
<ul className="mt-4 space-y-2 text-right text-sm leading-relaxed tracking-normal">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
|
||||
<span className="text-muted-foreground">نوع و تعداد سرویسهای مورد نیاز</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
|
||||
<span className="text-muted-foreground">بازه زمانی استفاده (ماهانه، سالانه)</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
|
||||
<span className="text-muted-foreground">حجم داده و ترافیک</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
|
||||
<span className="text-muted-foreground">نیاز به پشتیبانی و سفارشیسازی</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8">
|
||||
<Button asChild size="lg">
|
||||
<Link href="#">دریافت پیشنهاد قیمت</Link>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<p className="text-muted-foreground mt-8 text-sm leading-relaxed tracking-normal">
|
||||
برای دریافت پیشنهاد قیمت دقیق، با ما تماس بگیرید تا بر اساس نیازهای شما بهترین راهکار را پیشنهاد دهیم.
|
||||
<h3 className="text-3xl font-bold leading-tight tracking-normal mb-4">پکیج سازمانی</h3>
|
||||
<p className="text-lg leading-relaxed tracking-normal text-muted-foreground mb-8">
|
||||
برای شرکت شما با هر اندازهای
|
||||
</p>
|
||||
|
||||
<p className="text-muted-foreground leading-relaxed tracking-normal mb-8">
|
||||
ما راهکارهای سفارشی برای کسبوکارهای مختلف ارائه میدهیم.
|
||||
تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین پکیج را طراحی کند.
|
||||
</p>
|
||||
|
||||
<div className="mt-8 flex flex-wrap items-center justify-center gap-6">
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nvidia.svg"
|
||||
alt="Nvidia Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/column.svg"
|
||||
alt="Column Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-4 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/github.svg"
|
||||
alt="GitHub Logo"
|
||||
height="16"
|
||||
width="auto"
|
||||
/>
|
||||
<img
|
||||
className="h-5 w-fit dark:invert"
|
||||
src="https://html.tailus.io/blocks/customers/nike.svg"
|
||||
alt="Nike Logo"
|
||||
height="20"
|
||||
width="auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<h4 className="text-xl font-bold mb-6 leading-tight">ویژگیهای پکیج سازمانی</h4>
|
||||
<ul role="list" className="space-y-4">
|
||||
{[
|
||||
"تجمیع پایگاه داده و یکپارچهسازی",
|
||||
@@ -67,27 +176,40 @@ export default function Pricing() {
|
||||
"ذخیرهسازی نامحدود",
|
||||
"API و Webhooks نامحدود"
|
||||
].map((item, index) => (
|
||||
<li key={index} className="flex items-center gap-2 leading-relaxed tracking-normal">
|
||||
<Check className="size-4 text-primary shrink-0" />
|
||||
<span>{item}</span>
|
||||
<li key={index} className="flex items-center gap-3 leading-relaxed tracking-normal">
|
||||
<Check className="size-5 text-primary shrink-0" />
|
||||
<span className="text-base">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<p className="text-muted-foreground mt-6 text-sm leading-relaxed tracking-normal">
|
||||
ما راهکارهای سفارشی برای کسبوکارهای مختلف ارائه میدهیم.
|
||||
تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین پکیج را طراحی کند.
|
||||
</p>
|
||||
<div className="mt-12 flex flex-wrap items-center justify-between gap-6">
|
||||
<div className="h-12 w-20 rounded-lg bg-gradient-to-br from-[#216583] to-[#00818A] opacity-80"></div>
|
||||
<div className="h-10 w-16 rounded-lg bg-gradient-to-br from-[#293462] to-[#216583] opacity-80"></div>
|
||||
<div className="h-10 w-16 rounded-lg bg-gradient-to-br from-[#00818A] to-[#216583] opacity-80"></div>
|
||||
<div className="h-12 w-20 rounded-lg bg-gradient-to-br from-[#F7BE16] to-[#00818A] opacity-80"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section - اطلاع از قیمت */}
|
||||
<section className="bg-muted/30 py-20 md:py-28">
|
||||
<div className="mx-auto max-w-4xl px-6">
|
||||
<div className="text-center space-y-8 p-12 rounded-2xl border bg-gradient-to-br from-primary/5 to-primary/10">
|
||||
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
|
||||
برای اطلاع از قیمت با ما تماس بگیرید
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto leading-relaxed">
|
||||
برای دریافت قیمت دقیق و مشاوره رایگان، با تیم ما در تماس باشید.
|
||||
ما آمادهایم تا بر اساس نیازهای شما بهترین پیشنهاد را ارائه دهیم.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button asChild size="lg" className="text-base px-8 py-6">
|
||||
<Link href="#chat">شروع گفتگو با تیم</Link>
|
||||
</Button>
|
||||
<Button asChild size="lg" variant="outline" className="text-base px-8 py-6">
|
||||
<Link href="/about">درباره ما</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,16 +9,16 @@ const buttonVariants = cva(
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
default: "bg-primary text-primary-foreground hover:bg-accent hover:text-foreground transition-colors",
|
||||
destructive:
|
||||
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||
outline:
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||
"border bg-background shadow-xs hover:bg-accent hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-accent/20 transition-colors",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
"bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground transition-colors",
|
||||
ghost:
|
||||
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||
link: "text-primary underline-offset-4 hover:underline",
|
||||
"hover:bg-accent hover:text-foreground dark:hover:bg-accent/50 transition-colors",
|
||||
link: "text-primary underline-offset-4 hover:text-accent hover:underline transition-colors",
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||
|
||||
Reference in New Issue
Block a user