ar.badiei/aragrp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial commit

Browse Source
This commit is contained in:
ahmadrezabd
2025-12-04 14:27:31 +03:30
parent 89308c8a8c
commit ab297039ba
10 changed files with 534 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about/page.tsx
+229 -45
View File
@@ -1,79 +1,263 @@
import ContentSection from "@/components/content-1";
import Features from "@/components/features-12";
import HeroSection from "@/components/hero-section";
export default function AboutPage() {
return (
<>
<section className="bg-white py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-3xl space-y-8 text-center">
<h1 className="text-3xl font-semibold md:text-4xl lg:text-5xl leading-relaxed tracking-normal">
{/* 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-lg leading-relaxed tracking-normal text-muted-foreground">
کنترل پی یک پلتفرم یکپارچه‌سازی و ارتباطات هوشمند است که به کسب‌وکارها کمک می‌کند تا سیستم‌ها، داده‌ها و فرآیندهای خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
<p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
ما یک گروه متخصص هستیم که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کنیم.
هدف ما ارائه راهکارهای هوشمند و کارآمد برای اتصال سیستم‌ها، داده‌ها و فرآیندهای کسب‌وکار است.
</p>
</div>
</div>
</section>
<div className="mt-16 md:mt-24 space-y-12">
<div className="grid gap-8 md:grid-cols-2">
{/* Our Story */}
<section className="bg-muted/30 py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="grid gap-12 lg:grid-cols-2 items-center">
<div className="space-y-6">
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
داستان ما
</h2>
<div className="space-y-4 text-muted-foreground leading-relaxed tracking-normal">
<p>
کنترل پی یک گروه متخصص است که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کند.
ما با استفاده از تکنولوژی‌های پیشرفته و رویکردهای نوآورانه، به کسب‌وکارها کمک می‌کنیم تا
سیستم‌های خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
</p>
<p>
ما در زمینه یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها، ارتباطات چندکاناله و مدیریت داده‌ها
تخصص داریم. با استفاده از روش‌های نوین و ابزارهای پیشرفته، راهکارهای سفارشی برای هر کسب‌وکار
طراحی و پیاده‌سازی می‌کنیم.
</p>
</div>
</div>
<div className="relative aspect-square rounded-2xl bg-gradient-to-br from-primary/20 to-primary/5 p-8 flex items-center justify-center">
<div className="text-center space-y-4">
<div className="text-5xl font-bold text-primary">۱۰+</div>
<div className="text-lg font-medium">سال تجربه</div>
</div>
</div>
</div>
</div>
</section>
{/* Mission & Vision */}
<section className="bg-white py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="grid gap-12 md:grid-cols-2">
<div className="space-y-6 p-8 rounded-2xl border bg-muted/30">
<div className="space-y-4">
<h2 className="text-2xl font-semibold md:text-3xl leading-relaxed tracking-normal">
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
ماموریت ما
</h2>
<p className="leading-relaxed tracking-normal text-muted-foreground">
ما باور داریم که ارتباطات و یکپارچه‌سازی باید ساده، سریع و قابل‌اعتماد باشد. هدف ما این است که به کسب‌وکارها کمک کنیم تا بدون پیچیدگی‌های فنی، سیستم‌های خود را بهم متصل کنند و از قدرت اتوماسیون و ارتباطات هوشمند بهره‌مند شوند.
<p className="leading-relaxed tracking-normal text-muted-foreground text-lg">
ماموریت ما این است که با استفاده از روش‌های نوین اینتگریشن، به کسب‌وکارها کمک کنیم تا
بدون پیچیدگی‌های فنی، سیستم‌های خود را بهم متصل کنند و از قدرت اتوماسیون و ارتباطات هوشمند
بهره‌مند شوند.
</p>
</div>
</div>
<div className="space-y-6 p-8 rounded-2xl border bg-muted/30">
<div className="space-y-4">
<h2 className="text-2xl font-semibold md:text-3xl leading-relaxed tracking-normal">
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
چشم‌انداز ما
</h2>
<p className="leading-relaxed tracking-normal text-muted-foreground">
ما می‌خواهیم به پلتفرم پیشرو در حوزه یکپارچه‌سازی و ارتباطات هوشمند تبدیل شویم. چشم‌انداز ما این است که هر کسب‌وکاری، از کوچک تا بزرگ، بتواند به راحتی از خدمات ما استفاده کند و به اهداف خود برسد.
<p className="leading-relaxed tracking-normal text-muted-foreground text-lg">
ما می‌خواهیم به گروه پیشرو در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی تبدیل شویم.
چشم‌انداز ما این است که هر کسب‌وکاری، از کوچک تا بزرگ، بتواند به راحتی از خدمات ما استفاده کند
و به اهداف خود برسد.
</p>
</div>
</div>
</div>
</div>
</section>
<div className="mt-12 rounded-2xl border bg-muted/50 p-8 md:p-12">
<h2 className="mb-6 text-2xl font-semibold md:text-3xl leading-relaxed tracking-normal">
چرا کنترل پی؟
{/* Our Values */}
<section className="bg-muted/30 py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="text-center space-y-12">
<div className="space-y-4">
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
ارزش‌های ما
</h2>
<div className="grid gap-6 md:grid-cols-3">
<div className="space-y-2">
<h3 className="font-semibold text-lg">سادگی</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
رابط کاربری ساده و قابل فهم که نیاز به تخصص فنی ندارد
</p>
</div>
<div className="space-y-2">
<h3 className="font-semibold text-lg">قابلیت اطمینان</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
زیرساخت قدرتمند و پایدار که همیشه در دسترس است
</p>
</div>
<div className="space-y-2">
<h3 className="font-semibold text-lg">مقیاس‌پذیری</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
قابلیت رشد همراه با نیازهای کسب‌وکار شما
</p>
</div>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
ارزش‌هایی که در تمام کارهای ما رعایت می‌شود
</p>
</div>
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-4">
<div className="space-y-4 p-6 rounded-xl bg-white border">
<h3 className="font-bold text-xl">کیفیت</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
تعهد به کیفیت و نوآوری در تمام پروژه‌ها و خدمات
</p>
</div>
<div className="space-y-4 p-6 rounded-xl bg-white border">
<h3 className="font-bold text-xl">شفافیت</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
شفافیت کامل در ارتباطات، قیمت‌گذاری و فرآیندها
</p>
</div>
<div className="space-y-4 p-6 rounded-xl bg-white border">
<h3 className="font-bold text-xl">مشتری‌محوری</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
تمرکز بر نیازهای مشتری و رضایت کامل آن‌ها
</p>
</div>
<div className="space-y-4 p-6 rounded-xl bg-white border">
<h3 className="font-bold text-xl">نوآوری</h3>
<p className="text-sm leading-relaxed tracking-normal text-muted-foreground">
استفاده از آخرین تکنولوژی‌ها و روش‌های نوین
</p>
</div>
</div>
</div>
</div>
</section>
<div className="mt-12">
<h2 className="mb-8 text-2xl font-semibold md:text-3xl leading-relaxed tracking-normal text-center">
{/* Why Choose Us */}
<section className="bg-white py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="text-center space-y-12">
<div className="space-y-4">
<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">
مزایای رقابتی که ما را از دیگران متمایز می‌کند
</p>
</div>
<div className="grid gap-8 md:grid-cols-3">
<div className="space-y-4 text-center">
<div className="flex justify-center">
<div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary">
<svg className="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
</div>
<h3 className="font-bold text-xl">سادگی</h3>
<p className="text-muted-foreground leading-relaxed tracking-normal">
رابط کاربری ساده و قابل فهم که نیاز به تخصص فنی ندارد
</p>
</div>
<div className="space-y-4 text-center">
<div className="flex justify-center">
<div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary">
<svg className="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
</div>
<h3 className="font-bold text-xl">قابلیت اطمینان</h3>
<p className="text-muted-foreground leading-relaxed tracking-normal">
زیرساخت قدرتمند و پایدار که همیشه در دسترس است
</p>
</div>
<div className="space-y-4 text-center">
<div className="flex justify-center">
<div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary">
<svg className="size-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
</svg>
</div>
</div>
<h3 className="font-bold text-xl">مقیاس‌پذیری</h3>
<p className="text-muted-foreground leading-relaxed tracking-normal">
قابلیت رشد همراه با نیازهای کسب‌وکار شما
</p>
</div>
</div>
</div>
</div>
</section>
{/* Our Team */}
<section className="bg-muted/30 py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="text-center space-y-12">
<div className="space-y-4">
<h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
تیم ما
</h2>
<p className="mx-auto max-w-2xl text-center leading-relaxed tracking-normal text-muted-foreground">
تیم کنترل پی متشکل از متخصصان با تجربه در حوزه‌های فناوری اطلاعات، توسعه نرم‌افزار و مدیریت کسب‌وکار است. ما با همکاری یکدیگر، راهکارهای نوآورانه و کاربردی برای چالش‌های یکپارچه‌سازی ارائه می‌دهیم.
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
تیم کنترل پی متشکل از متخصصان با تجربه در حوزه‌های اینتگریشن، فناوری اطلاعات، توسعه نرم‌افزار
و مدیریت کسب‌وکار است. ما با همکاری یکدیگر و استفاده از روش‌های نوین، راهکارهای نوآورانه و
کاربردی برای چالش‌های یکپارچه‌سازی ارائه می‌دهیم.
</p>
</div>
<div className="grid gap-8 md:grid-cols-3">
<div className="space-y-4 p-8 rounded-2xl bg-white border text-center">
<div className="flex justify-center">
<div className="size-24 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
<span className="text-3xl font-bold text-primary">ت</span>
</div>
</div>
<h3 className="font-bold text-xl">تخصص</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
متخصصان با تجربه در حوزه اینتگریشن و یکپارچه‌سازی
</p>
</div>
<div className="space-y-4 p-8 rounded-2xl bg-white border text-center">
<div className="flex justify-center">
<div className="size-24 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
<span className="text-3xl font-bold text-primary">ن</span>
</div>
</div>
<h3 className="font-bold text-xl">نوآوری</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
استفاده از آخرین تکنولوژی‌ها و روش‌های نوین
</p>
</div>
<div className="space-y-4 p-8 rounded-2xl bg-white border text-center">
<div className="flex justify-center">
<div className="size-24 rounded-full bg-gradient-to-br from-primary/20 to-primary/5 flex items-center justify-center">
<span className="text-3xl font-bold text-primary">پ</span>
</div>
</div>
<h3 className="font-bold text-xl">پشتیبانی</h3>
<p className="text-sm text-muted-foreground leading-relaxed">
پشتیبانی کامل و مستمر در تمام مراحل پروژه
</p>
</div>
</div>
</div>
</div>
</section>
{/* CTA 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-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">
با ما تماس بگیرید تا درباره نیازهای شما صحبت کنیم و بهترین راهکار را پیشنهاد دهیم
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="/pricing"
className="inline-flex items-center justify-center rounded-lg bg-primary px-8 py-3 text-base font-medium text-white hover:bg-accent hover:text-foreground transition-colors"
>
مشاهده قیمت‌ها
</a>
<a
href="#contact"
className="inline-flex items-center justify-center rounded-lg border border-primary px-8 py-3 text-base font-medium text-primary hover:bg-accent hover:text-foreground hover:border-accent transition-colors"
>
تماس با ما
</a>
</div>
</div>
</div>
</section>
</>
);
}
app/solutions/page.tsx
+37 -22
View File
@@ -96,43 +96,49 @@ const solutions = [
export default function SolutionsPage() {
return (
<>
<section className="bg-white py-16 md:py-32">
<div className="mx-auto max-w-5xl px-6">
<div className="mx-auto max-w-3xl space-y-6 text-center">
<h1 className="text-3xl font-semibold md:text-4xl lg:text-5xl leading-relaxed tracking-normal">
{/* 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-lg leading-relaxed tracking-normal text-muted-foreground">
<p className="text-xl leading-relaxed tracking-normal text-muted-foreground max-w-2xl mx-auto">
مجموعه‌ای از ابزارهای قدرتمند برای یکپارچه‌سازی، اتوماسیون و ارتباطات هوشمند که به کسب‌وکار شما کمک می‌کند تا کارآمدتر و سریع‌تر عمل کند.
</p>
</div>
</div>
</section>
<div className="mt-16 md:mt-24 grid gap-8 md:grid-cols-2 lg:grid-cols-2">
{/* Solutions Grid */}
<section className="bg-muted/30 py-20 md:py-28">
<div className="mx-auto max-w-6xl px-6">
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-2">
{solutions.map((solution, index) => {
const Icon = solution.icon;
return (
<div
key={index}
className="group rounded-2xl border bg-white p-6 transition-all hover:shadow-lg"
className="group rounded-2xl border bg-white p-8 transition-all hover:shadow-lg"
>
<div className="mb-4 flex items-center gap-3">
<div className="flex size-12 items-center justify-center rounded-xl bg-primary/10 text-primary">
<Icon className="size-6" />
<div className="mb-6 flex items-center gap-4">
<div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0">
<Icon className="size-7" />
</div>
<h2 className="text-xl font-semibold leading-relaxed tracking-normal">
<h2 className="text-2xl font-bold leading-tight tracking-normal">
{solution.title}
</h2>
</div>
<p className="mb-4 leading-relaxed tracking-normal text-muted-foreground">
<p className="mb-6 leading-relaxed tracking-normal text-muted-foreground text-lg">
{solution.description}
</p>
<ul className="space-y-2">
<ul className="space-y-3">
{solution.features.map((feature, featureIndex) => (
<li
key={featureIndex}
className="flex items-start gap-2 text-sm leading-relaxed tracking-normal"
className="flex items-start gap-3 text-base leading-relaxed tracking-normal"
>
<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
<span className="mt-1.5 size-2 shrink-0 rounded-full bg-primary" />
<span className="text-muted-foreground">{feature}</span>
</li>
))}
@@ -141,21 +147,30 @@ export default function SolutionsPage() {
);
})}
</div>
</div>
</section>
<div className="mt-16 text-center">
<h2 className="mb-4 text-2xl font-semibold md:text-3xl leading-relaxed tracking-normal">
{/* CTA 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-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="mb-8 text-muted-foreground leading-relaxed tracking-normal">
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
همین حالا شروع کنید و از قدرت یکپارچه‌سازی و ارتباطات هوشمند بهره‌مند شوید
</p>
<Button asChild size="lg">
<Link href="/pricing">مشاهده قیمت‌ها</Link>
</Button>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Button asChild size="lg">
<Link href="/pricing">مشاهده قیمت‌ها</Link>
</Button>
<Button asChild size="lg" variant="outline">
<Link href="/about">درباره ما</Link>
</Button>
</div>
</div>
</div>
</section>
</>
);
}
components/content-1.tsx
+2 -2
View File
@@ -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>
components/footer.tsx
+4 -4
View File
@@ -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"
components/header.tsx
+2 -2
View File
@@ -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>
components/hero-section.tsx
+61 -11
View File
@@ -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>
components/logo.tsx
+1 -1
View File
@@ -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 }) => {
components/pricing.tsx
+183 -61
View File
@@ -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>
</>
);
}
components/ui/button.tsx
+5 -5
View File
@@ -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",
public/assets/arablogo.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 283.46 283.46">
<!-- Generator: Adobe Illustrator 29.0.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 192) -->
<path d="M202.34,109.35c2.6-.69,5.06.05,7.35.05,7.6,0,16.55-.82,24.18.1,15.21,1.83,22.94,18.07,11.05,28.99l-4.57,2.77c12.98,2.51,17.27,20.94,6.24,28.78-2.27,1.62-8.92,4.14-11.57,4.14h-32.68v-64.82ZM207.91,113.4c-.16,7.24-1.37,16.45-.53,23.57.09.74.06,1.3.79,1.75h24.32c.45,0,3.48-.67,4.21-.86,12.01-3.11,11.98-17.83,1.46-22.53-1.29-.58-5.49-1.93-6.68-1.93h-23.56ZM231.98,143.28c-7.57-.7-16.13.52-23.81,0l-.76.76v24.81l.76.76h22.29c1.71,0,6.49-.83,8.26-1.37,7.83-2.35,11.31-8.65,8.1-16.51-2.18-5.33-9.49-7.97-14.84-8.46Z"/>
<path d="M233.24,104.28l-4.04,1.53c-11.19-28.53-38.33-50.97-68.39-56.99-44.64-8.94-90.04,14.94-106.93,56.99l-4.06-1.8c2.35-5.27,4.84-10.48,7.91-15.38,23.76-37.92,70.53-54.76,113.46-41.58,27.81,8.54,51.51,30.12,62.06,57.23Z"/>
<path d="M229.2,177.72l4.02,1.76c-7.01,17.21-18.74,31.85-33.76,42.72-51.89,37.49-125.73,16.09-149.56-42.72l4.01-1.54c23.46,56.22,92.85,76.49,143.02,40.71,14.34-10.23,25.75-24.52,32.27-40.93Z"/>
<path d="M194.73,174.17l-5.33-.49-6.37-14.4-1.69-.84-37.46.1-6.96,15.57-5.51.06,28.86-64.59c.72-.48,5.46-.64,6.05.58l28.42,64.01ZM180.55,153.41l-17.73-38.99-16.73,38.99h34.45Z"/>
<path d="M93.9,174.17l-5.51-.06-6.59-15.33-38.73-.23-7.16,15.13-5.33.49,28.87-64.57c1.61-.29,5.04-.85,6.04.56l28.41,64.02ZM79.21,153.41l-16.73-38.99-17.73,38.99h34.45Z"/>
<path d="M105.05,136.19c.42-.75.86-1.48,1.52-2.28,5.55-6.84,15.92-7.62,23.35-3.49l-1.86,3.71c-8.26-4.62-19.46-.36-22.15,8.74-.16.54-.85,3.45-.85,3.71v27.6h-4.56v-45.32c1.01-1.18,3.55-1.18,4.56,0v7.34Z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB