checkout page ui
This commit is contained in:
haniyeroozmand
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user