anjam shod

2025-12-15 16:08:40 +03:30
parent b36f1cc22e
commit adc5122b0a
27 changed files with 450 additions and 389 deletions
@@ -2,10 +2,10 @@ import Image from "next/image";

 export default function ContentSection() {
  return (
-    <section className="bg-white py-16 md:py-32">
+    <section className="bg-background py-16 md:py-32">
      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
        <h2 className="relative z-10 max-w-xl text-2xl font-medium md:text-3xl lg:text-4xl leading-relaxed tracking-normal">
-          اکوسیستم کنترل پی مدل‌های ما را گرد هم می‌آورد.
+          اکوسیستم فیپ: راهکارهای یکپارچه برای کسب‌وکارهای هوشمند
        </h2>
        <div className="grid gap-6 sm:grid-cols-2 md:gap-12 lg:gap-24">
          <div className="relative mb-6 sm:mb-0">
@@ -29,29 +29,25 @@ export default function ContentSection() {

          <div className="relative space-y-4">
            <p className="text-muted-foreground leading-relaxed tracking-normal">
-              کنترل پی در حال تکامل است تا فراتر از مدل‌ها باشد.{" "}
+              فیپ یک گروه متخصص است که در حوزه اینتگریشن و روش‌های نوین یکپارچه‌سازی فعالیت می‌کند.{" "}
              <span className="text-accent-foreground font-bold">
-                این پلتفرم از کل اکوسیستم پشتیبانی می‌کند
+                ما با استفاده از تکنولوژی‌های پیشرفته و رویکردهای نوآورانه
              </span>{" "}
-              — از محصولات تا نوآوری.
+              به کسب‌وکارها کمک می‌کنیم تا سیستم‌های خود را به شکلی کارآمد و قابل‌اعتماد بهم متصل کنند.
            </p>
            <p className="text-muted-foreground leading-relaxed tracking-normal">
-              این پلتفرم از کل اکوسیستم پشتیبانی می‌کند — از محصولات تا APIها و
-              پلتفرم‌هایی که به توسعه‌دهندگان و کسب‌وکارها کمک می‌کنند تا نوآوری
-              کنند
+              ما در زمینه یکپارچه‌سازی سیستم‌ها، اتوماسیون فرآیندها، ارتباطات چندکاناله و مدیریت داده‌ها تخصص داریم. با استفاده از روش‌های نوین و ابزارهای پیشرفته، راهکارهای سفارشی برای هر کسب‌وکار طراحی و پیاده‌سازی می‌کنیم که به آن‌ها امکان می‌دهد تا از قدرت اتوماسیون و ارتباطات هوشمند بهره‌مند شوند.
            </p>

            <div className="pt-6">
-              <blockquote className="border-s-4 ps-4">
-                <p className="leading-relaxed tracking-normal">
-                  استفاده از کنترل پی مانند باز کردن یک قدرت فوق‌العاده طراحی
-                  مخفی بوده است. این ترکیب کامل سادگی و تطبیق‌پذیری است که به ما
-                  امکان می‌دهد رابط‌های کاربری بسازیم که هم زیبا و هم کاربرپسند
-                  هستند.
+              <blockquote className="border-s-4 border-primary/30 ps-4">
+                <p className="leading-relaxed tracking-normal text-foreground">
+                  ماموریت ما این است که با استفاده از روش‌های نوین اینتگریشن، به کسب‌وکارها کمک کنیم تا 
+                  بدون پیچیدگی‌های فنی، سیستم‌های خود را بهم متصل کنند و به اهداف خود برسند.
                </p>

                <div className="mt-6 space-y-3">
-                  <div className="block font-medium not-italic">احمدرضا عزیزان، مدیر</div>
+                  <div className="block font-medium not-italic text-foreground">ماموریت فیپ</div>
                </div>
              </blockquote>
            </div>
@@ -6,10 +6,10 @@ import {
  AccordionTrigger,
 } from "@/components/ui/accordion";
 import {
-  ChartBarIncreasingIcon,
-  Database,
-  Fingerprint,
-  IdCard,
+  Link as LinkIcon,
+  BarChart3,
+  Share2,
+  Zap,
 } from "lucide-react";
 import Image from "next/image";
 import { useState } from "react";
@@ -23,24 +23,24 @@ export default function Features() {
  const images = {
    "item-1": {
      image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1207&h=929&fit=crop&q=80",
-      alt: "Database visualization",
+      alt: "System integration",
    },
    "item-2": {
      image: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1207&h=929&fit=crop&q=80",
-      alt: "Security authentication",
+      alt: "Management panels",
    },
    "item-3": {
      image: "https://images.unsplash.com/photo-1557683316-973673baf926?w=1207&h=929&fit=crop&q=80",
-      alt: "Identity management",
+      alt: "Social media integration",
    },
    "item-4": {
      image: "https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=1207&h=929&fit=crop&q=80",
-      alt: "Analytics dashboard",
+      alt: "Process automation",
    },
  };

  return (
-    <section className="bg-white py-12 md:py-20 lg:py-32">
+    <section className="bg-background py-12 md:py-20 lg:py-32">
      <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]"></div>
      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
        <div className="relative z-10 mx-auto max-w-2xl space-y-6 text-center">
@@ -48,8 +48,7 @@ export default function Features() {
            پایه و اساس ارتباطات هوشمند
          </h2>
          <p className="leading-relaxed tracking-normal">
-            پلتفرم ما برای اتصال آسان میان سیستم‌ها، APIها و سرویس‌های داخلی شما طراحی شده است.
-            از یکپارچه‌سازی داده‌ها و احراز هویت گرفته تا پردازش رویدادها و ارسال پیام در کانال‌هایی مثل تلگرام، واتساپ یا حتی سرویس‌های اختصاصی — همه‌چیز با دقت و مقیاس‌پذیری بالا مدیریت می‌شود تا توسعه‌دهندگان و کسب‌وکارها بتوانند سریع‌تر نوآوری کنند.
+            راه‌حل‌های یکپارچه‌سازی پیشرفته برای اتصال سیستم‌ها، اتوماسیون فرآیندها، تعامل با شبکه‌های اجتماعی و تحلیل داده‌ها. پلتفرم ما به شما امکان می‌دهد تا سیستم‌های مختلف را به راحتی بهم متصل کنید، فرآیندهای کسب‌وکار را خودکارسازی کنید و از قدرت داده‌ها برای تصمیم‌گیری بهتر استفاده کنید.
          </p>
        </div>

@@ -63,52 +62,52 @@ export default function Features() {
            <AccordionItem value="item-1">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
-                  <Database className="size-4" />
-                  تجمیع پایگاه داده
+                  <LinkIcon className="size-4" />
+                  یکپارچه‌سازی سیستم‌ها
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
-                  ما داده‌های موردنیاز شما را از سیستم‌های مختلف جمع‌آوری و هماهنگ می‌کنیم؛ از دیتابیس‌های محلی تا APIهای خارجی. این قابلیت برای گزارش‌گیری، اتوماسیون و ایجاد یک نمای واحد از اطلاعات کلیدی کسب‌وکار ضروری است.
+                  اتصال و هماهنگ‌سازی سیستم‌ها و سرویس‌های مختلف برای ایجاد جریان یکپارچه داده و فرآیند. ما به شما امکان می‌دهیم تا به سرویس‌ها و APIهای مختلف متصل شوید، داده‌ها را به صورت خودکار بین سیستم‌ها همگام‌سازی کنید و workflowهای یکپارچه ایجاد کنید.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-2">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
-                  <Fingerprint className="size-4" />
-                  احراز هویت پیشرفته
+                  <BarChart3 className="size-4" />
+                  پنل‌های مدیریتی قدرتمند
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
-                  سیستم احراز هویت امن و منعطف که از انواع روش‌ها پشتیبانی می‌کند—از OAuth تا توکن‌های اختصاصی—تا بتوانید کاربران، سرویس‌ها و اپلیکیشن‌های خود را با کمترین پیچیدگی مدیریت کنید.
+                  ارائه پنل‌های کاربری پیشرفته برای نمایش آمار، تحلیل داده‌ها و مدیریت اطلاعات با رابط کاربری حرفه‌ای. داشبوردهای تعاملی و قابل تنظیم، نمایش آمار و گزارش‌های زنده، و امکان ویرایش و مدیریت اطلاعات از طریق UI قدرتمند.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-3">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
-                  <IdCard className="size-4" />
-                  مدیریت هویت
+                  <Share2 className="size-4" />
+                  تعامل با شبکه‌های اجتماعی
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
-                  مدیریت یکپارچه کاربران، نقش‌ها و مجوزها در همه سیستم‌ها. هر تغییری در یک سرویس، بلافاصله در سایر سرویس‌های متصل هم منعکس می‌شود.
+                  ایجاد ارتباطات قدرتمند و خودکار با پلتفرم‌های مختلف شبکه‌های اجتماعی برای مدیریت و تعامل بهتر. اتصال به پلتفرم‌های مختلف اجتماعی، مدیریت و ارسال محتوا به صورت خودکار، نظارت و تحلیل تعاملات، و همگام‌سازی اطلاعات بین پلتفرم‌ها.
                </p>
              </AccordionContent>
            </AccordionItem>
            <AccordionItem value="item-4">
              <AccordionTrigger>
                <div className="flex items-center gap-2 text-base">
-                  <ChartBarIncreasingIcon className="size-4" />
-                  داشبورد تحلیل
+                  <Zap className="size-4" />
+                  اتوماسیون فرآیندها
                </div>
              </AccordionTrigger>
              <AccordionContent>
                <p className="leading-relaxed tracking-normal">
-                  داده‌های شما به گزارش‌ها و نمودارهای قابل‌درک تبدیل می‌شود؛ چه برای نمایش فروش ماهانه یک فروشگاه، چه برای نشان دادن آمار بازدید یک سایت، یا تحلیل رفتار کاربران در یک ربات تلگرام.
+                  ایجاد کارهای خودکار برای اتوماتیک‌سازی فرآیندهای کسب‌وکار و کاهش کارهای دستی. تعریف و اجرای workflowهای خودکار، اتوماسیون بر اساس رویداد و زمان، زمان‌بندی و اجرای کارهای تکراری، و اعلان‌ها و هشدارهای خودکار.
                </p>
              </AccordionContent>
            </AccordionItem>
@@ -112,7 +112,7 @@ export default function FooterSection() {
        </div>
        <span className="text-muted-foreground block text-center text-sm">
          {" "}
-          © {new Date().getFullYear()} کنترل پی، تمامی حقوق محفوظ است
+          © {new Date().getFullYear()} فیپ، تمامی حقوق محفوظ است
        </span>
      </div>
    </footer>
@@ -5,6 +5,7 @@ import { Menu, X } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import React from 'react'
 import { cn } from '@/lib/utils'
+import { ThemeToggle } from '@/components/theme-toggle'

 const menuItems = [
    { name: 'صفحه اصلی', href: '/' },
@@ -29,8 +30,8 @@ export const HeroHeader = () => {
            <nav
                data-state={menuState && 'active'}
                className="fixed z-20 w-full px-2">
-                <div className={cn('mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12', isScrolled && 'bg-background/50 max-w-4xl rounded-2xl border backdrop-blur-lg lg:px-5')}>
-                    <div className="relative flex flex-wrap items-center justify-between gap-6 py-3 lg:gap-0 lg:py-4">
+                <div className={cn('mx-auto mt-2 max-w-6xl px-6 transition-all duration-300 lg:px-12 bg-background/80 backdrop-blur-md rounded-2xl border border-border/50', isScrolled && 'bg-background/95 max-w-4xl shadow-lg lg:px-5')}>
+                    <div className="relative flex flex-wrap items-center justify-between gap-6 py-2 lg:gap-0 lg:py-3">
                        <div className="flex w-full justify-between lg:w-auto">
                            <Link
                                href="/"
@@ -48,39 +49,45 @@ export const HeroHeader = () => {
                            </button>
                        </div>

-                        <div className="absolute inset-0 m-auto hidden size-fit lg:block">
+                        <div className="absolute inset-0 m-auto hidden size-fit lg:flex items-center gap-8">
                            <ul className="flex gap-8 text-sm">
                                {menuItems.map((item, index) => (
                                    <li key={index}>
                                        <Link
                                            href={item.href}
-                                            className="text-muted-foreground hover:text-accent transition-colors duration-150">
-                                            <span>{item.name}</span>
+                                            className="text-muted-foreground hover:text-foreground transition-all duration-300 relative group">
+                                            <span className="relative z-10">{item.name}</span>
+                                            <span className="absolute bottom-0 right-0 w-0 h-0.5 bg-accent transition-all duration-300 group-hover:w-full"></span>
                                        </Link>
                                    </li>
                                ))}
                            </ul>
+                            <ThemeToggle />
                        </div>

                        <div className="bg-background in-data-[state=active]:block lg:in-data-[state=active]:flex mb-6 hidden w-full flex-wrap items-center justify-end space-y-8 rounded-3xl border p-6 shadow-2xl shadow-zinc-300/20 md:flex-nowrap lg:m-0 lg:flex lg:w-fit lg:gap-6 lg:space-y-0 lg:border-transparent lg:bg-transparent lg:p-0 lg:shadow-none dark:shadow-none dark:lg:bg-transparent">
-                            <div className="lg:hidden">
+                            <div className="lg:hidden w-full">
                                <ul className="space-y-6 text-base">
                                    {menuItems.map((item, index) => (
                                        <li key={index}>
                                            <Link
                                                href={item.href}
-                                                className="text-muted-foreground hover:text-accent transition-colors duration-150">
-                                                <span>{item.name}</span>
+                                                className="text-muted-foreground hover:text-foreground transition-all duration-300 relative group block">
+                                                <span className="relative z-10">{item.name}</span>
+                                                <span className="absolute bottom-0 right-0 w-0 h-0.5 bg-accent transition-all duration-300 group-hover:w-full"></span>
                                            </Link>
                                        </li>
                                    ))}
                                </ul>
+                                <div className="mt-6 flex justify-end">
+                                    <ThemeToggle />
+                                </div>
                            </div>
                            <div className="flex w-full flex-col space-y-3 sm:flex-row sm:gap-3 sm:space-y-0 md:w-fit">
                                <Button
                                    asChild
                                    size="sm"
-                                    className={cn(isScrolled ? 'lg:inline-flex' : 'hidden')}>
+                                    className={cn(isScrolled ? 'lg:inline-flex' : 'hidden', 'transition-all duration-300 hover:scale-105')}>
                                    <Link href="#">
                                        <span>شروع کنید</span>
                                    </Link>
@@ -6,6 +6,7 @@ import Image from "next/image";
 import { TextEffect } from "@/components/ui/text-effect";
 import { AnimatedGroup } from "@/components/ui/animated-group";
 import { HeroHeader } from "./header";
+import { LogoItem } from "@/components/ui/logo-item";

 const transitionVariants = {
  item: {
@@ -39,7 +40,7 @@ export default function HeroSection() {
          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
        </div>
-        <section className="bg-white">
+        <section className="bg-background">
          <div className="relative pt-24 md:pt-36">
            <AnimatedGroup
              variants={{
@@ -92,7 +93,7 @@ export default function HeroSection() {
                    <span className="text-foreground text-sm">
                      معرفی نسل جدید یکپارچه‌سازی و ارتباطات هوشمند
                    </span>
-                    <span className="dark:border-background block h-4 w-0.5 border-s bg-white dark:bg-zinc-700"></span>
+                    <span className="dark:border-background block h-4 w-0.5 border-s bg-card dark:bg-muted"></span>

                    <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
                      <div className="flex w-12 translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
@@ -174,16 +175,9 @@ export default function HeroSection() {
              <div className="mask-b-from-55% relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
                <div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
                  <Image
-                    className="bg-background aspect-15/8 relative hidden rounded-2xl dark:block object-cover"
-                    src="https://images.unsplash.com/photo-1557683316-973673baf926?w=2700&h=1440&fit=crop&q=80"
-                    alt="Modern abstract technology"
-                    width={2700}
-                    height={1440}
-                  />
-                  <Image
-                    className="z-2 border-border/25 aspect-15/8 relative rounded-2xl border dark:hidden object-cover"
-                    src="https://images.unsplash.com/photo-1557682250-33bd709cbe85?w=2700&h=1440&fit=crop&q=80"
-                    alt="Modern abstract design"
+                    className="bg-background aspect-15/8 relative rounded-2xl object-contain"
+                    src="/assets/hero-integration.png.png"
+                    alt="یکپارچه‌سازی سیستم‌ها و شبکه دیجیتال"
                    width={2700}
                    height={1440}
                  />
@@ -192,91 +186,73 @@ export default function HeroSection() {
            </AnimatedGroup>
          </div>
        </section>
-        <section className="bg-white pb-16 pt-16 md:pb-32">
+        <section className="bg-background pb-16 pt-16 md:pb-32">
          <div className="group relative m-auto max-w-5xl px-6">
            <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:text-accent transition-colors"
              >
-                <span> با مشتریان ما آشنا شوید</span>
+                <span> اتصال به سایر سیستم ها </span>

                <ChevronRight className="ml-1 inline-block size-3" />
              </Link>
            </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">
-                <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 className="group-hover:blur-xs mx-auto mt-12 grid max-w-4xl grid-cols-5 gap-x-12 gap-y-8 transition-all duration-500 group-hover:opacity-50 sm:gap-x-16 sm:gap-y-14">
+              <LogoItem
+                icon="logos:telegram"
+                alt="Telegram Logo"
+                size="md"
+                className="translate-x-1"
+              />
+              <LogoItem
+                icon="logos:whatsapp-icon"
+                alt="WhatsApp Logo"
+                size="md"
+                className="translate-x-4"
+              />
+              <LogoItem
+                icon="logos:wordpress-icon"
+                alt="WordPress Logo"
+                size="md"
+                className="-translate-x-2"
+              />
+              <LogoItem
+                icon="logos:microsoft-windows-icon"
+                alt="Microsoft Windows Logo"
+                size="md"
+                className="translate-x-2"
+              />
+              <LogoItem
+                icon="logos:google-icon"
+                alt="Google Logo"
+                size="md"
+                className="translate-x-5"
+              />
+              <div className="col-span-5 flex justify-center gap-12 sm:gap-16">
+                <LogoItem
+                  icon="logos:zapier-icon"
+                  alt="Zapier Logo"
+                  size="md"
+                  className="translate-x-0"
                />
-              </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"
+                <LogoItem
+                  icon="logos:android-icon"
+                  alt="Android Logo"
+                  size="md"
+                  className="translate-x-3"
                />
-              </div>
-              <div className="flex">
-                <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"
+                <LogoItem
+                  icon="logos:amp-icon"
+                  alt="AMP Logo"
+                  size="md"
+                  className="-translate-x-1"
                />
-              </div>
-              <div className="flex">
-                <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">
-                <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">
-                <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">
-                <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">
-                <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"
+                <LogoItem
+                  icon="logos:ios"
+                  alt="iOS Logo"
+                  size="md"
+                  className="translate-x-4"
                />
              </div>
            </div>
@@ -23,7 +23,7 @@ export function LoginForm({
              <div className="flex flex-col items-center gap-2 text-center">
                <h1 className="text-xl sm:text-2xl font-bold">خوش آمدید</h1>
                <p className="text-sm sm:text-base text-muted-foreground text-balance">
-                  به حساب کنترل پی خود وارد شوید
+                  به حساب فیپ خود وارد شوید
                </p>
              </div>
              <Field>
@@ -12,7 +12,7 @@ export const Logo = ({
  return (
    <Link href="/" className="flex items-center space-x-2">
      <LogoIcon className={className} uniColor={uniColor} />
-      <span className="font-bold">کنترل پی</span>
+      <span className="font-bold text-sm">فیپ</span>
    </Link>
  );
 };
@@ -24,7 +24,7 @@ export const LogoIcon = ({
  className?: string;
  uniColor?: boolean;
 }) => {
-  return <Image src="/assets/arablogo.svg" alt="Logo" width={80} height={80} className={cn("h-auto", className)} />;
+  return <Image src="/assets/flogo-1.png" alt="Logo" width={50} height={50} className={cn("h-auto", className)} />;
 };

 export const LogoStroke = ({ className }: { className?: string }) => {
@@ -49,11 +49,11 @@ const tableData = [

 export default function PricingComparator() {
  return (
-    <section className="bg-white py-16 md:py-32">
+    <section className="bg-background py-16 md:py-32">
      <div className="mx-auto max-w-5xl px-6">
        <div className="w-full overflow-auto lg:overflow-visible">
-          <table className="w-[200vw] border-separate border-spacing-x-3 md:w-full dark:[--color-muted:var(--color-zinc-900)]">
-            <thead className="bg-background sticky top-0">
+          <table className="w-[200vw] border-separate border-spacing-x-3 md:w-full">
+            <thead className="bg-background sticky top-0 z-10">
              <tr className="*:py-4 *:text-start *:font-medium">
                <th className="lg:w-2/5"></th>
                <th className="space-y-3">
@@ -63,7 +63,7 @@ export default function PricingComparator() {
                    <Link href="/login?utm_source=pricing-free">شروع کنید</Link>
                  </Button>
                </th>
-                <th className="bg-muted rounded-t-(--radius) space-y-3 px-4">
+                <th className="bg-muted rounded-t-xl space-y-3 px-4 border dark:border-transparent border-border">
                  <span className="block">حرفه‌ای</span>
                  <Button asChild size="sm">
                    <Link href="/login?utm_source=pricing-professional">
@@ -88,19 +88,19 @@ export default function PricingComparator() {
                  <span>ویژگی‌ها</span>
                </td>
                <td></td>
-                <td className="bg-muted border-none px-4"></td>
+                <td className="bg-muted border-x dark:border-x-transparent border-border px-4"></td>
                <td></td>
              </tr>
              {tableData.slice(-4).map((row, index) => (
-                <tr key={index} className="*:border-b *:py-3">
+                <tr key={index} className="*:border-b *:dark:border-b-transparent *:border-border *:py-3">
                  <td className="text-muted-foreground">{row.feature}</td>
-                  <td>
+                  <td className="text-foreground">
                    {row.free === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
-                        className="size-4"
+                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
@@ -112,14 +112,14 @@ export default function PricingComparator() {
                      row.free
                    )}
                  </td>
-                  <td className="bg-muted border-none px-4">
-                    <div className="-mb-3 border-b py-3">
+                  <td className="bg-muted border-x border-border px-4">
+                    <div className="-mb-3 border-b dark:border-b-transparent border-border py-3">
                      {row.pro === true ? (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
-                          className="size-4"
+                          className="size-4 text-primary"
                        >
                          <path
                            fillRule="evenodd"
@@ -128,17 +128,17 @@ export default function PricingComparator() {
                          />
                        </svg>
                      ) : (
-                        row.pro
+                        <span className="text-foreground">{row.pro}</span>
                      )}
                    </div>
                  </td>
-                  <td>
+                  <td className="text-foreground">
                    {row.startup === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
-                        className="size-4"
+                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
@@ -158,19 +158,19 @@ export default function PricingComparator() {
                  <span>مدل‌های هوش مصنوعی</span>
                </td>
                <td></td>
-                <td className="bg-muted border-none px-4"></td>
+                <td className="bg-muted border-x dark:border-x-transparent border-border px-4"></td>
                <td></td>
              </tr>
              {tableData.map((row, index) => (
-                <tr key={index} className="*:border-b *:py-3">
+                <tr key={index} className="*:border-b *:dark:border-b-transparent *:border-border *:py-3">
                  <td className="text-muted-foreground">{row.feature}</td>
-                  <td>
+                  <td className="text-foreground">
                    {row.free === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
-                        className="size-4"
+                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
@@ -182,14 +182,14 @@ export default function PricingComparator() {
                      row.free
                    )}
                  </td>
-                  <td className="bg-muted border-none px-4">
-                    <div className="-mb-3 border-b py-3">
+                  <td className="bg-muted border-x border-border px-4">
+                    <div className="-mb-3 border-b dark:border-b-transparent border-border py-3">
                      {row.pro === true ? (
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          viewBox="0 0 24 24"
                          fill="currentColor"
-                          className="size-4"
+                          className="size-4 text-primary"
                        >
                          <path
                            fillRule="evenodd"
@@ -198,17 +198,17 @@ export default function PricingComparator() {
                          />
                        </svg>
                      ) : (
-                        row.pro
+                        <span className="text-foreground">{row.pro}</span>
                      )}
                    </div>
                  </td>
-                  <td>
+                  <td className="text-foreground">
                    {row.startup === true ? (
                      <svg
                        xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 24 24"
                        fill="currentColor"
-                        className="size-4"
+                        className="size-4 text-primary"
                      >
                        <path
                          fillRule="evenodd"
@@ -225,7 +225,7 @@ export default function PricingComparator() {
              <tr className="*:py-6">
                <td></td>
                <td></td>
-                <td className="bg-muted rounded-b-(--radius) border-none px-4"></td>
+                <td className="bg-muted rounded-b-xl border-x border-b dark:border-x-transparent dark:border-b-transparent border-border px-4"></td>
                <td></td>
              </tr>
            </tbody>
@@ -6,15 +6,20 @@ export default function Pricing() {
  return (
    <>
      {/* Hero Section */}
-      <section className="bg-white py-20 md:py-28">
+      <section className="bg-background pt-32 pb-20 md:pt-40 md:pb-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 className="space-y-4 max-w-3xl mx-auto">
+              <p className="text-xl leading-relaxed tracking-normal text-muted-foreground">
+                هر راه‌حل با توجه به پیچیدگی، شرایط اجرا و نیازمندی‌های خاص شما طراحی می‌شود. به همین دلیل، قیمت‌گذاری ما کاملاً سفارشی و متناسب با شرایط واقعی کسب‌وکار شماست.
+              </p>
+              <p className="text-lg leading-relaxed tracking-normal text-foreground font-medium">
+                راه‌حل‌های ما از <span className="text-primary font-bold">۲ میلیون تومان</span> شروع می‌شوند و بر اساس نیازهای دقیق شما محاسبه می‌گردند.
+              </p>
+            </div>
          </div>
        </div>
      </section>
@@ -25,44 +30,44 @@ export default function Pricing() {
          <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> انجام دهیم. 
+                ما متعهد هستیم که راه‌حل‌های شما را در <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="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <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">
+                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <FileText className="size-7" />
                  </div>
-                  <h3 className="text-xl font-bold leading-tight">نوع پروژه</h3>
+                  <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="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <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">
+                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Code className="size-7" />
                  </div>
-                  <h3 className="text-xl font-bold leading-tight">پیچیدگی پروژه</h3>
+                  <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="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <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">
+                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Settings className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold leading-tight">اجرا و پیاده‌سازی</h3>
@@ -73,9 +78,9 @@ export default function Pricing() {
                </p>
              </div>

-              <div className="space-y-4 p-8 rounded-2xl border bg-white">
+              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <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">
+                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Users className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold leading-tight">تعداد کاربران</h3>
@@ -86,22 +91,22 @@ export default function Pricing() {
                </p>
              </div>

-              <div className="space-y-4 p-8 rounded-2xl border bg-white">
+              <div className="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <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">
+                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <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="space-y-4 p-8 rounded-2xl border dark:border-transparent bg-card transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <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">
+                  <div className="flex size-14 items-center justify-center rounded-xl bg-primary/10 text-primary shrink-0 transition-transform duration-300 group-hover:scale-110">
                    <Settings className="size-7" />
                  </div>
                  <h3 className="text-xl font-bold leading-tight">پشتیبانی و نگهداری</h3>
@@ -117,54 +122,23 @@ export default function Pricing() {
      </section>

      {/* Package Details */}
-      <section className="bg-white py-20 md:py-28">
+      <section className="bg-background 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="bg-card relative rounded-3xl border dark:border-transparent shadow-2xl shadow-zinc-950/5">
+            <div className="grid items-center gap-12 p-12 md:grid-cols-2">
              <div className="pb-12 text-center md:pb-0 md:pe-12">
-                <h3 className="text-3xl font-bold leading-tight tracking-normal mb-4">پکیج سازمانی</h3>
+                <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>
+                <h4 className="text-xl font-bold mb-6 leading-tight">ویژگی‌های راه‌حل سازمانی</h4>
                <ul role="list" className="space-y-4">
                  {[
                    "تجمیع پایگاه داده و یکپارچه‌سازی",
@@ -191,7 +165,7 @@ export default function Pricing() {
      {/* 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">
+          <div className="text-center space-y-8 p-12 rounded-2xl border dark:border-transparent bg-gradient-to-br from-primary/5 to-primary/10">
            <h2 className="text-3xl font-bold md:text-4xl leading-tight tracking-normal">
              برای اطلاع از قیمت با ما تماس بگیرید
            </h2>
@@ -0,0 +1,21 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <NextThemesProvider
+      attribute="class"
+      defaultTheme="light"
+      enableSystem
+      disableTransitionOnChange={false}
+    >
+      {children}
+    </NextThemesProvider>
+  )
+}
+
@@ -0,0 +1,43 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+import { useTheme } from 'next-themes'
+import { useEffect, useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  if (!mounted) {
+    return (
+      <Button
+        variant="ghost"
+        size="sm"
+        className="size-9 rounded-lg"
+        aria-label="Toggle theme"
+      >
+        <Sun className="size-4" />
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+      className="size-9 rounded-lg transition-all duration-300 hover:bg-muted"
+      aria-label="Toggle theme"
+    >
+      <Sun className="size-4 rotate-0 scale-100 transition-all duration-300 dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute size-4 rotate-90 scale-0 transition-all duration-300 dark:rotate-0 dark:scale-100" />
+    </Button>
+  )
+}
+
@@ -56,8 +56,8 @@ export const BorderBeam = ({
  size = 50,
  delay = 0,
  duration = 6,
-  colorFrom = "#ffaa40",
-  colorTo = "#9c40ff",
+  colorFrom = "#FCC61D",
+  colorTo = "#0046FF",
  transition,
  style,
  reverse = false,
@@ -9,16 +9,16 @@ const buttonVariants = cva(
  {
    variants: {
      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-accent hover:text-foreground transition-colors",
+        default: "bg-primary text-primary-foreground hover:bg-accent hover:text-foreground dark:hover:bg-[#FCC61D] dark: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-foreground dark:bg-input/30 dark:border-input dark:hover:bg-accent/20 transition-colors",
+          "border bg-background shadow-xs hover:bg-accent hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-[#FCC61D] dark:hover:text-foreground transition-colors",
        secondary:
-          "bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground transition-colors",
+          "bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground dark:hover:bg-[#FCC61D] dark:hover:text-foreground transition-colors",
        ghost:
-          "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",
+          "hover:bg-accent hover:text-foreground dark:hover:bg-[#FCC61D] dark:hover:text-foreground transition-colors",
+        link: "text-primary underline-offset-4 hover:text-accent hover:underline dark:hover:text-[#FCC61D] transition-colors",
      },
      size: {
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.ComponentProps<"div">) {
    <div
      data-slot="card"
      className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm transition-all duration-300 hover:shadow-md hover:border-border/80",
        className
      )}
      {...props}
@@ -0,0 +1,31 @@
+import { Icon } from "@iconify/react";
+import { cn } from "@/lib/utils";
+
+interface LogoItemProps {
+  icon: string;
+  alt: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const sizeMap = {
+  sm: "h-8",
+  md: "h-10",
+  lg: "h-12",
+};
+
+export function LogoItem({ icon, alt, size = "md", className }: LogoItemProps) {
+  return (
+    <div className={cn("flex", className)}>
+      <Icon
+        icon={icon}
+        className={cn(
+          "mx-auto w-fit dark:invert",
+          sizeMap[size]
+        )}
+        aria-label={alt}
+      />
+    </div>
+  );
+}
+
@@ -51,8 +51,8 @@ export const BorderBeam = ({
  size = 50,
  delay = 0,
  duration = 6,
-  colorFrom = "#ffaa40",
-  colorTo = "#9c40ff",
+  colorFrom = "#FCC61D",
+  colorTo = "#0046FF",
  transition,
  style,
  reverse = false,