checkout page ui

app/blog/page.tsx

@@ -47,14 +47,14 @@ export default function BlogListingPage() {
                استفاده از گرادیانت ملایم و استایل‌های مدرن
             */}
             <div className="bg-gradient-to-b from-gray-50/80 to-transparent pt-12 pb-8 mb-8 border-b border-gray-100">
-                <div className="container mx-auto px-4 max-w-7xl">
+                <div className="container mx-auto px-4 max-w-6xl">
                     <div className="flex flex-col md:flex-row items-center justify-between gap-6">
                         <div className="text-center md:text-right">
                             <h1 className="text-3xl md:text-4xl font-black text-gray-800 mb-4 flex items-center justify-center md:justify-start gap-3">
                                 <BookOpen className="text-[#ffb900]" size={32} />
                                 وبلاگ و مقالات آموزشی
                             </h1>
-                            <p className="text-gray-500 text-sm md:text-base font-medium max-w-2xl">
+                            <p className="text-gray-500 text-xs  max-w-2xl">
                                 جدیدترین اخبار، آموزش‌ها، ترفندها و مقالات تخصصی در حوزه صنعت و قطعات را اینجا بخوانید.
                             </p>
                         </div>
@@ -73,7 +73,7 @@ export default function BlogListingPage() {
                 </div>
             </div>
 
-            <div className="container mx-auto px-4 max-w-7xl">
+            <div className="container mx-auto px-4 max-w-6xl">
                 
                 {/* بخش فیلترها و جستجو */}
                 <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6 mb-10 bg-white p-4 rounded-3xl shadow-sm border border-gray-100">
@@ -111,7 +111,7 @@ export default function BlogListingPage() {
                 </div>
 
                 {/* گرید مقالات */}
-                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 md:gap-8">
+                <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 gap-2 md:gap-5">
                     {filteredArticles.map((article) => (
                         <div key={article.title} className="transform hover:-translate-y-1 transition-transform duration-300">
                             <ArticleCard article={article} />

app/cart/page.tsx

@@ -11,7 +11,7 @@ import {
     Minus,
     ShieldCheck,
     Truck,
-    CreditCard
+    CreditCard, ChevronRight, Check
 } from "lucide-react";
 
 export default function CartPage() {
@@ -64,45 +64,43 @@ export default function CartPage() {
                         </h1>
                     </div>
 
-                    {/* Breadcrumb (مراحل پرداخت) - کاملا رسپانسیو شده */}
+                    {/* بخش هدر و تایم‌لاین */}
-                    <div className="relative w-full max-w-2xl mx-auto px-2 sm:px-0">
+                    <div className="mb-10">
 
-                        {/* خط سراسری بک‌گراند */}
+                        {/* Breadcrumb (تایم‌لاین اکتیو شده برای مرحله ۲) */}
-                        {/* 
+                        <div className="relative w-full max-w-2xl mx-auto px-2 sm:px-0 mb-12">
-                            تنظیمات top: در موبایل آیکون 40px است (وسط آن میشود 20px) 
+                            {/* خط سراسری بک‌گراند */}
-                            در دسکتاپ آیکون 48px است (وسط آن میشود 24px)
+                            <div className="absolute top-[20px] sm:top-[24px] left-[16.5%] right-[16.5%] h-[2px] bg-gray-200 z-0">
-                        */}
+                                {/* پر شدن خط مرحله دوم (۵۰ درصد پیشرفت) */}
-                        <div className="absolute top-[20px] sm:top-[24px] left-[16.5%] right-[16.5%] h-[2px] bg-gray-200 z-0">
+                                <div className="h-full bg-[#ffb900] w-[50%] transition-all duration-500 ease-in-out"></div>
-                            {/* پر شدن خط مرحله اول (درصد پیشرفت) */}
-                            <div className="h-full bg-[#ffb900] w-0 transition-all"></div>
-                        </div>
-
-                        <div className="flex justify-between relative z-10">
-                            
-                            {/* مرحله 1 */}
-                            <div className="flex flex-col items-center w-1/3">
-                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-[#ffb900] text-black rounded-full flex items-center justify-center shadow-md mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
-                                    <ShoppingBag className="w-4 h-4 sm:w-5 sm:h-5" />
-                                </div>
-                                <span className="text-[10px] sm:text-sm font-bold text-gray-800 text-center">سبد خرید</span>
                             </div>
 
-                            {/* مرحله 2 */}
+                            <div className="flex justify-between relative z-10">
-                            <div className="flex flex-col items-center w-1/3">
+                                {/* مرحله 1 (تکمیل شده) */}
-                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white border-2 border-gray-200 text-gray-400 rounded-full flex items-center justify-center mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
+                                <Link href="/cart" className="flex flex-col items-center w-1/3 group cursor-pointer">
-                                    <Truck className="w-4 h-4 sm:w-5 sm:h-5" />
+                                    <div className=" w-10 h-10 sm:w-12 sm:h-12 bg-[#ffb900] text-[#1A2332] rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(255,185,0,0.4)] mb-2 sm:mb-3 ring-[6px] ring-[#ffb900]/20 transition-all">
-                                </div>
+                                        <ShoppingBag className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
-                                <span className="text-[10px] sm:text-sm font-medium text-gray-400 text-center">اطلاعات ارسال</span>
+                                    </div>
-                            </div>
+                                    <span className="text-[10px] sm:text-sm font-bold text-[#1A2332] text-center">سبد خرید</span>
+                                </Link>
 
-                            {/* مرحله 3 */}
+                                {/* مرحله 2 (اکتیو و فعلی) */}
-                            <div className="flex flex-col items-center w-1/3">
+                                <Link href={'/checkout'} className="flex flex-col items-center w-1/3">
-                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white border-2 border-gray-200 text-gray-400 rounded-full flex items-center justify-center mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
+                                    {/* استفاده از ring زرد با opacity برای نشان دادن حالت اکتیو */}
-                                    <CreditCard className="w-4 h-4 sm:w-5 sm:h-5" />
+                                    <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white border-2 border-gray-200 text-gray-400 rounded-full flex items-center justify-center mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
-                                </div>
+                                        <Truck className="w-4 h-4 sm:w-5 sm:h-5" strokeWidth={2} />
-                                <span className="text-[10px] sm:text-sm font-medium text-gray-400 text-center">پرداخت</span>
+                                    </div>
-                            </div>
+                                    <span className="text-[10px] sm:text-sm font-bold text-[#1A2332] text-center">اطلاعات ارسال</span>
+                                </Link>
 
+                                {/* مرحله 3 (غیرفعال) */}
+                                <div className="flex flex-col items-center w-1/3">
+                                    <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white border-2 border-gray-200 text-gray-400 rounded-full flex items-center justify-center mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
+                                        <CreditCard className="w-4 h-4 sm:w-5 sm:h-5" />
+                                    </div>
+                                    <span className="text-[10px] sm:text-sm font-medium text-gray-400 text-center">پرداخت</span>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -111,7 +109,7 @@ export default function CartPage() {
 
                     {/* بخش لیست محصولات */}
                     <div className="flex-1">
-                        <div className="bg-white rounded-[2rem] p-4 md:p-8 shadow-sm border border-gray-100">
+                        <div className="bg-white rounded-[1rem] p-4 md:p-8 shadow-sm ">
                             <div className="flex justify-between items-center mb-6 pb-6 border-b border-gray-100">
                                 <h2 className="text-base md:text-lg font-bold text-gray-800">محصولات انتخاب شده</h2>
                                 <button onClick={clearCart} className="text-xs md:text-sm text-red-500 hover:text-red-700 transition flex items-center gap-1.5 bg-red-50 hover:bg-red-100 px-3 py-1.5 rounded-lg">
@@ -180,7 +178,7 @@ export default function CartPage() {
 
                     {/* بخش صورتحساب (Sidebar) */}
                     <div className="w-full lg:w-[340px] shrink-0">
-                        <div className="bg-white rounded-[2rem] p-6 md:p-8 shadow-xl shadow-gray-200/20 border border-gray-100 sticky top-6">
+                        <div className="bg-white rounded-[1rem] p-4 md:p-8 shadow-sm sticky top-6">
                             <h2 className="text-lg md:text-xl font-bold text-gray-800 mb-6">خلاصه صورتحساب</h2>
 
                             <div className="space-y-4 mb-6">
@@ -206,10 +204,10 @@ export default function CartPage() {
                                 </span>
                             </div>
 
-                            <button className="w-full bg-[#ffb900] hover:bg-[#e5a600] text-black py-3 md:py-4 rounded-xl font-bold text-base md:text-lg transition-all shadow-[0_4px_15px_rgba(255,185,0,0.2)] hover:shadow-[0_6px_20px_rgba(255,185,0,0.3)] flex justify-center items-center gap-2 mb-6">
+                            <Link href={'/checkout'} className="w-full bg-[#ffb900] hover:bg-[#e5a600] text-black py-3 md:py-4 rounded-xl font-bold text-base md:text-lg transition-all shadow-[0_4px_15px_rgba(255,185,0,0.2)] hover:shadow-[0_6px_20px_rgba(255,185,0,0.3)] flex justify-center items-center gap-2 mb-6">
                                 تایید و ادامه
                                 <ChevronLeft size={20} />
-                            </button>
+                            </Link>
 
                             {/* بج‌های اعتماد (Trust Badges) */}
                             <div className="flex items-center justify-center gap-2 md:gap-4 text-[10px] md:text-xs font-medium text-gray-400 bg-gray-50 py-3 rounded-xl border border-gray-100">

app/checkout/page.tsx

@@ -0,0 +1,287 @@
+'use client';
+
+import { useCart } from "@/components/context/cartcontext";
+import Link from "next/link";
+import { useState } from "react";
+import {
+    ShoppingBag,
+    ChevronLeft,
+    ChevronRight,
+    Truck,
+    CreditCard,
+    Check,
+    MapPin,
+    User,
+    Phone,
+    Mail
+} from "lucide-react";
+
+export default function CheckoutPage() {
+    const { cart } = useCart();
+
+    // استیت برای روش ارسال (صرفا جهت نمایش UI)
+    const [shippingMethod, setShippingMethod] = useState('post');
+
+    // محاسبه قیمت کل و تعداد
+    const parsePrice = (priceStr?: string | null) => {
+        if (!priceStr) return 0;
+        return Number(priceStr.toString().replace(/,/g, ''));
+    };
+
+    const totalPrice = cart.reduce((total, item) => total + (parsePrice(item.price) * item.quantity), 0);
+    const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
+
+    // هزینه ارسال فرضی
+    const shippingCost = shippingMethod === 'post' ? 45000 : 75000;
+    const finalPrice = totalPrice + shippingCost;
+
+    return (
+        <main className="bg-gray-50/30 min-h-screen pb-20" dir="rtl">
+            <div className="container mx-auto px-4 py-8 max-w-6xl">
+
+                {/* بخش هدر و تایم‌لاین */}
+                <div className="mb-10">
+                    <div className="flex items-center justify-between mb-8">
+                        <h1 className="text-xl md:text-3xl font-black text-[#1A2332]">
+                            اطلاعات ارسال
+                        </h1>
+                        <Link href="/cart" className="text-sm text-gray-500 hover:text-[#1A2332] flex items-center gap-1 transition-colors">
+                            <ChevronRight size={16} />
+                            بازگشت به سبد خرید
+                        </Link>
+                    </div>
+
+                    {/* Breadcrumb (تایم‌لاین اکتیو شده برای مرحله ۲) */}
+                    <div className="relative w-full max-w-2xl mx-auto px-2 sm:px-0 mb-12">
+                        {/* خط سراسری بک‌گراند */}
+                        <div className="absolute top-[20px] sm:top-[24px] left-[16.5%] right-[16.5%] h-[2px] bg-gray-200 z-0">
+                            {/* پر شدن خط مرحله دوم (۵۰ درصد پیشرفت) */}
+                            <div className="h-full bg-[#ffb900] w-[50%] transition-all duration-500 ease-in-out"></div>
+                        </div>
+
+                        <div className="flex justify-between relative z-10">
+                            {/* مرحله 1 (تکمیل شده) */}
+                            <Link href="/cart" className="flex flex-col items-center w-1/3 group cursor-pointer">
+                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-[#ffb900] text-[#1A2332] rounded-full flex items-center justify-center shadow-md mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc] transition-transform group-hover:scale-110">
+                                    <ShoppingBag className="w-5 h-5 sm:w-6 sm:h-6" strokeWidth={2} />
+                                </div>
+                                <span className="text-[10px] sm:text-sm font-bold text-[#1A2332] text-center">سبد خرید</span>
+                            </Link>
+
+                            {/* مرحله 2 (اکتیو و فعلی) */}
+                            <div className="flex flex-col items-center w-1/3">
+                                {/* استفاده از ring زرد با opacity برای نشان دادن حالت اکتیو */}
+                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-[#ffb900] text-[#1A2332] rounded-full flex items-center justify-center shadow-[0_0_15px_rgba(255,185,0,0.4)] mb-2 sm:mb-3 ring-[6px] ring-[#ffb900]/20 transition-all">
+                                    <Truck className="w-4 h-4 sm:w-5 sm:h-5" strokeWidth={2} />
+                                </div>
+                                <span className="text-[10px] sm:text-sm font-bold text-[#1A2332] text-center">اطلاعات ارسال</span>
+                            </div>
+
+                            {/* مرحله 3 (غیرفعال) */}
+                            <div className="flex flex-col items-center w-1/3">
+                                <div className="w-10 h-10 sm:w-12 sm:h-12 bg-white border-2 border-gray-200 text-gray-400 rounded-full flex items-center justify-center mb-2 sm:mb-3 ring-[6px] ring-[#f8fafc] sm:ring-[#f8fafc]">
+                                    <CreditCard className="w-4 h-4 sm:w-5 sm:h-5" />
+                                </div>
+                                <span className="text-[10px] sm:text-sm font-medium text-gray-400 text-center">پرداخت</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
+
+                    {/* بخش فرم اطلاعات */}
+                    <div className="flex-1 space-y-6">
+
+                        {/* فرم مشخصات گیرنده */}
+                        <div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm ">
+                            <div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-100">
+                                <div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
+                                    <User size={20} />
+                                </div>
+                                <h2 className="text-base md:text-lg font-bold text-[#1A2332]">مشخصات گیرنده</h2>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-gray-600 block">نام و نام خانوادگی</label>
+                                    <input
+                                        type="text"
+                                        placeholder="مثال: علی رضایی"
+                                        className="w-full bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-gray-600 block">شماره موبایل</label>
+                                    <div className="relative">
+                                        <input
+                                            type="tel"
+                                            placeholder="09123456789"
+                                            className="w-full text-right bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl pl-4 pr-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]"
+                                        />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {/* فرم آدرس */}
+                        <div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm">
+                            <div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-100">
+                                <div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
+                                    <MapPin size={20} />
+                                </div>
+                                <h2 className="text-base md:text-lg font-bold text-[#1A2332]">آدرس پستی</h2>
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-gray-600 block">استان</label>
+                                    <select className="w-full bg-gray-50 text-[13px] border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all appearance-none cursor-pointer">
+                                        <option value="">انتخاب استان...</option>
+                                        <option value="tehran">تهران</option>
+                                        <option value="alborz">البرز</option>
+                                    </select>
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-gray-600 block">شهر</label>
+                                    <select className="w-full text-[13px] bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all appearance-none cursor-pointer">
+                                        <option value="">انتخاب شهر...</option>
+                                        <option value="tehran">تهران</option>
+                                        <option value="karaj">کرج</option>
+                                    </select>
+                                </div>
+                            </div>
+
+                            <div className="space-y-2 mb-5">
+                                <label className="text-sm font-medium text-gray-600 block">آدرس دقیق پستی</label>
+                                <textarea
+                                    rows={3}
+                                    placeholder="خیابان، کوچه، پلاک، واحد..."
+                                    className="w-full text-[13px] bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 resize-none"
+                                />
+                            </div>
+
+                            <div className="grid grid-cols-1 md:grid-cols-2 gap-5 mb-5">
+                                <div className=" space-y-2">
+                                    <label className="text-sm font-medium text-gray-600 block">کد پستی (۱۰ رقمی)</label>
+                                    <input
+                                        type="text"
+                                        placeholder="1234567890"
+                                        className="w-full bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]"
+                                    />
+                                </div>
+
+                                <div className="space-y-2">
+                                    <label className="text-sm font-medium text-gray-600 block">ایمیل</label>
+                                    <input
+                                        type="email"
+                                        placeholder="test@email.com"
+                                        className="w-full bg-gray-50 border border-gray-200 text-[#1A2332] rounded-xl px-4 py-3 outline-none focus:ring-2 focus:ring-[#ffb900]/40 focus:border-[#ffb900] transition-all placeholder:text-gray-400 placeholder:text-[13px]"
+                                    />
+                                </div>
+
+                            </div>
+
+                        </div>
+
+
+                    </div>
+
+                    {/* بخش صورتحساب (Sidebar) */}
+                    <div className="w-full lg:w-[400px] shrink-0">
+                        <div className="bg-white rounded-[1rem] p-6 md:p-8 shadow-sm sticky top-6">
+                            <h2 className="text-lg md:text-xl font-bold text-[#1A2332] mb-6">خلاصه سفارش</h2>
+
+                            <div className="space-y-4 mb-6">
+                                <div className="flex justify-between items-center text-xs md:text-sm">
+                                    <span className="text-gray-500">مبلغ کالاها ({totalItems})</span>
+                                    <span className="font-bold text-[#1A2332]">{totalPrice > 0 ? totalPrice.toLocaleString('fa-IR') : '۰'} <span className="text-[10px] font-normal text-gray-500">تومان</span></span>
+                                </div>
+
+                                <div className="flex justify-between items-center text-xs md:text-sm">
+                                    <span className="text-gray-500">هزینه ارسال</span>
+                                    <span className="font-bold text-[#1A2332]">{shippingCost.toLocaleString('fa-IR')} <span className="text-[10px] font-normal text-gray-500">تومان</span></span>
+                                </div>
+                            </div>
+
+                            {/* خط‌چین جداکننده */}
+                            <div className="w-full border-t-2 border-dashed border-gray-100 my-6"></div>
+
+                            {/* انتخاب روش ارسال */}
+                            <div className="bg-white rounded-[1rem] pt-4 pb-4">
+                                <div className="flex items-center gap-3 mb-6 pb-4 ">
+                                    <div className="bg-[#1A2332]/5 p-2 rounded-lg text-[#1A2332]">
+                                        <Truck size={20} />
+                                    </div>
+                                    <h2 className="text-base md:text-lg font-bold text-[#1A2332]">نحوه ارسال</h2>
+                                </div>
+
+                                <div className="space-y-3">
+                                    {/* گزینه پست */}
+                                    <label className={`flex items-center justify-between p-4 rounded-xl border-1 cursor-pointer transition-all ${shippingMethod === 'post' ? 'border-[#ffb900] bg-[#ffb900]/3' : 'border-gray-100 hover:border-gray-200 bg-white'}`}>
+                                        <div className="flex items-center gap-3">
+                                            <div className={`w-5 h-5 rounded-full border-1 flex items-center justify-center ${shippingMethod === 'post' ? 'border-[#ffb900]' : 'border-gray-300'}`}>
+                                                {shippingMethod === 'post' && <div className="w-2.5 h-2.5 bg-[#ffb900] rounded-full" />}
+                                            </div>
+                                            <div>
+                                                <div className="font-bold text-[#1A2332]">پست پیشتاز</div>
+                                                <div className="text-xs text-gray-500 mt-1">زمان تحویل: ۳ تا ۵ روز کاری</div>
+                                            </div>
+                                        </div>
+                                        <div className="font-bold text-[#1A2332]">۴۵,۰۰۰ <span className="text-xs font-normal text-gray-500">تومان</span></div>
+                                        <input
+                                            type="radio"
+                                            name="shipping"
+                                            value="post"
+                                            className="hidden"
+                                            checked={shippingMethod === 'post'}
+                                            onChange={() => setShippingMethod('post')}
+                                        />
+                                    </label>
+
+                                    {/* گزینه تیپاکس */}
+                                    <label className={`flex items-center justify-between p-4 rounded-xl border-1 cursor-pointer transition-all ${shippingMethod === 'tipax' ? 'border-[#ffb900] bg-[#ffb900]/3' : 'border-gray-100 hover:border-gray-200 bg-white'}`}>
+                                        <div className="flex items-center gap-3">
+                                            <div className={`w-5 h-5 rounded-full border-1 flex items-center justify-center ${shippingMethod === 'tipax' ? 'border-[#ffb900]' : 'border-gray-300'}`}>
+                                                {shippingMethod === 'tipax' && <div className="w-2.5 h-2.5 bg-[#ffb900] rounded-full" />}
+                                            </div>
+                                            <div>
+                                                <div className="font-bold text-[#1A2332]">تیپاکس (پس‌کرایه)</div>
+                                                <div className="text-xs text-gray-500 mt-1">زمان تحویل: ۱ تا ۲ روز کاری</div>
+                                            </div>
+                                        </div>
+                                        <div className="font-bold text-[#1A2332]">۷۵,۰۰۰ <span className="text-xs font-normal text-gray-500">تومان</span></div>
+                                        <input
+                                            type="radio"
+                                            name="shipping"
+                                            value="tipax"
+                                            className="hidden"
+                                            checked={shippingMethod === 'tipax'}
+                                            onChange={() => setShippingMethod('tipax')}
+                                        />
+                                    </label>
+                                </div>
+                            </div>
+                            {/* خط‌چین جداکننده */}
+                            <div className="w-full border-t-2 border-dashed border-gray-100 my-6"></div>
+
+                            <div className="flex justify-between items-center mb-8">
+                                <span className="text-sm font-bold text-gray-600">مبلغ قابل پرداخت</span>
+                                <span className="font-black text-[1em] md:text-2xl text-[#1A2332] tracking-tight">
+                                    {finalPrice > 0 ? finalPrice.toLocaleString('fa-IR') : 'استعلام'}
+                                    {finalPrice > 0 && <span className="text-xs md:text-sm font-medium text-gray-500 mr-1">تومان</span>}
+                                </span>
+                            </div>
+
+                            <Link href="/payment" className="w-full bg-[#ffb900] hover:bg-[#e5a600] text-[#1A2332] py-3 md:py-4 rounded-xl text-base text-[1em] transition-all shadow-[0_4px_15px_rgba(255,185,0,0.2)] hover:shadow-[0_6px_20px_rgba(255,185,0,0.3)] flex justify-center items-center gap-2 mb-4">
+                                پرداخت و ثبت نهایی
+                                <ChevronLeft size={20} strokeWidth={2} />
+                            </Link>
+
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+    );
+}