checkout page ui
This commit is contained in:
haniyeroozmand
@@ -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} />
|
||||
|
||||
@@ -3,15 +3,15 @@
|
||||
import { useCart } from "@/components/context/cartcontext";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import {
|
||||
Trash2,
|
||||
ShoppingBag,
|
||||
ChevronLeft,
|
||||
Plus,
|
||||
Minus,
|
||||
ShieldCheck,
|
||||
import {
|
||||
Trash2,
|
||||
ShoppingBag,
|
||||
ChevronLeft,
|
||||
Plus,
|
||||
Minus,
|
||||
ShieldCheck,
|
||||
Truck,
|
||||
CreditCard
|
||||
CreditCard, ChevronRight, Check
|
||||
} from "lucide-react";
|
||||
|
||||
export default function CartPage() {
|
||||
@@ -52,7 +52,7 @@ export default function CartPage() {
|
||||
return (
|
||||
<main className="bg-gray-50/30 min-h-screen pb-20">
|
||||
<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">
|
||||
@@ -64,54 +64,52 @@ export default function CartPage() {
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Breadcrumb (مراحل پرداخت) - کاملا رسپانسیو شده */}
|
||||
<div className="relative w-full max-w-2xl mx-auto px-2 sm:px-0">
|
||||
|
||||
{/* خط سراسری بکگراند */}
|
||||
{/*
|
||||
تنظیمات 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="h-full bg-[#ffb900] w-0 transition-all"></div>
|
||||
</div>
|
||||
{/* بخش هدر و تایملاین */}
|
||||
<div className="mb-10">
|
||||
|
||||
<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 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]">
|
||||
<Truck 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>
|
||||
{/* 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>
|
||||
|
||||
{/* مرحله 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 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-[0_0_15px_rgba(255,185,0,0.4)] mb-2 sm:mb-3 ring-[6px] ring-[#ffb900]/20 transition-all">
|
||||
<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 (اکتیو و فعلی) */}
|
||||
<Link href={'/checkout'} className="flex flex-col items-center w-1/3">
|
||||
{/* استفاده از ring زرد با opacity برای نشان دادن حالت اکتیو */}
|
||||
<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]">
|
||||
<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>
|
||||
</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>
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8">
|
||||
|
||||
|
||||
{/* بخش لیست محصولات */}
|
||||
<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">
|
||||
@@ -126,17 +124,17 @@ export default function CartPage() {
|
||||
|
||||
return (
|
||||
<div key={item.id} className="group flex flex-col sm:flex-row gap-4 sm:gap-6 items-start sm:items-center border-b border-gray-50 pb-6 last:border-0 last:pb-0">
|
||||
|
||||
|
||||
{/* تصویر محصول */}
|
||||
<div className="bg-gray-50/80 p-3 rounded-2xl border border-gray-100 shrink-0 relative group-hover:bg-white transition-colors duration-300 w-full sm:w-auto flex justify-center">
|
||||
<Image src={item.image} alt={item.title} width={100} height={100} className="object-contain w-24 h-24 drop-shadow-sm" />
|
||||
</div>
|
||||
|
||||
|
||||
{/* اطلاعات محصول */}
|
||||
<div className="flex-1 w-full">
|
||||
<p className="text-xs font-medium text-blue-500 mb-1.5">{item.brand}</p>
|
||||
<h3 className="text-sm md:text-base font-bold text-gray-800 line-clamp-2 leading-tight mb-3 group-hover:text-blue-600 transition-colors">{item.title}</h3>
|
||||
|
||||
|
||||
{/* ویژگیها (Badges) */}
|
||||
<div className="flex flex-wrap gap-2 text-[10px] md:text-xs font-medium text-gray-600">
|
||||
<span className="bg-gray-100/80 px-2.5 py-1 rounded-md" dir="ltr">L : {item.l}</span>
|
||||
@@ -149,21 +147,21 @@ export default function CartPage() {
|
||||
<span className="font-black text-base md:text-lg text-gray-900">
|
||||
{item.price ? `${itemTotal.toLocaleString('fa-IR')} ت` : 'استعلام'}
|
||||
</span>
|
||||
|
||||
|
||||
{/* کنترلر تعداد طرح کپسولی */}
|
||||
<div className="flex items-center gap-1 bg-gray-50 border border-gray-200 rounded-full p-1 shadow-sm">
|
||||
<button
|
||||
<button
|
||||
onClick={() => addToCart(item)}
|
||||
className="w-7 h-7 md:w-8 md:h-8 flex items-center justify-center rounded-full bg-white text-gray-600 hover:text-green-600 hover:shadow-sm transition-all"
|
||||
>
|
||||
<Plus size={14} strokeWidth={2.5} />
|
||||
</button>
|
||||
|
||||
|
||||
<span className="text-xs md:text-sm font-bold text-gray-800 w-6 text-center">
|
||||
{item.quantity}
|
||||
</span>
|
||||
|
||||
<button
|
||||
|
||||
<button
|
||||
onClick={() => decreaseQuantity(item.id)}
|
||||
className="w-7 h-7 md:w-8 md:h-8 flex items-center justify-center rounded-full bg-white text-gray-600 hover:text-red-500 hover:shadow-sm transition-all"
|
||||
>
|
||||
@@ -180,9 +178,9 @@ 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">
|
||||
<div className="flex justify-between items-center text-xs md:text-sm">
|
||||
<span className="text-gray-500">تعداد کالاها</span>
|
||||
@@ -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">
|
||||
|
||||
287
app/checkout/page.tsx
Normal file
287
app/checkout/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user