add pages
This commit is contained in:
Reza Taghizadeh
203
src/app/blog/page.tsx
Normal file
203
src/app/blog/page.tsx
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import Link from "next/link";
|
||||||
|
import { BookOpen, Clock, Calendar, ChevronLeft, Search, Sparkles } from "lucide-react";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
// دادههای فرضی برای نمایش در بلاگ (شما میتوانید این بخش را با API جایگزین کنید)
|
||||||
|
const MOCK_POSTS = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: "۱۰ راز طلایی برای داشتن پوستی شاداب در فصل پاییز",
|
||||||
|
excerpt: "با تغییر فصل، نیازهای پوست شما نیز تغییر میکند. در این مقاله به بررسی روتینهای مراقبتی ضروری برای جلوگیری از خشکی پوست میپردازیم...",
|
||||||
|
category: "مراقبت از پوست",
|
||||||
|
date: "۲۴ مهر ۱۴۰۴",
|
||||||
|
readTime: "۵ دقیقه مطالعه",
|
||||||
|
imageUrl: "https://placehold.co/600x400/fdf2f8/ec4899?text=Skin+Care",
|
||||||
|
isFeatured: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: "ترندهای آرایشی سال جدید: بازگشت به زیبایی طبیعی",
|
||||||
|
excerpt: "امسال تمرکز دنیای میکاپ بر روی درخشش طبیعی پوست و استفاده از رنگهای نود و ملایم است.",
|
||||||
|
category: "میکاپ",
|
||||||
|
date: "۱۲ آبان ۱۴۰۴",
|
||||||
|
readTime: "۳ دقیقه مطالعه",
|
||||||
|
imageUrl: "https://placehold.co/600x400/fdf2f8/ec4899?text=Makeup+Trends",
|
||||||
|
isFeatured: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: "چگونه بهترین رنگ مو را بر اساس تناژ پوستمان انتخاب کنیم؟",
|
||||||
|
excerpt: "انتخاب رنگ موی مناسب میتواند چهره شما را دگرگون کند. راهنمای جامع شناخت تناژ پوست و رنگهای سازگار با آن.",
|
||||||
|
category: "مراقبت از مو",
|
||||||
|
date: "۵ آذر ۱۴۰۴",
|
||||||
|
readTime: "۷ دقیقه مطالعه",
|
||||||
|
imageUrl: "https://placehold.co/600x400/fdf2f8/ec4899?text=Hair+Color",
|
||||||
|
isFeatured: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: "معرفی ۵ سرم آبرسان برتر سالونا برای انواع پوست",
|
||||||
|
excerpt: "بررسی تخصصی و مقایسه پرفروشترین سرمهای آبرسان موجود در فروشگاه سالونا همراه با نظرات مشتریان.",
|
||||||
|
category: "معرفی محصول",
|
||||||
|
date: "۱ دی ۱۴۰۴",
|
||||||
|
readTime: "۴ دقیقه مطالعه",
|
||||||
|
imageUrl: "https://placehold.co/600x400/fdf2f8/ec4899?text=Top+Serums",
|
||||||
|
isFeatured: false,
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const CATEGORIES = ["همه", "مراقبت از پوست", "مراقبت از مو", "میکاپ", "معرفی محصول"];
|
||||||
|
|
||||||
|
export default function BlogPage() {
|
||||||
|
const [activeCategory, setActiveCategory] = useState("همه");
|
||||||
|
|
||||||
|
// فیلتر کردن مقالات بر اساس دستهبندی
|
||||||
|
const filteredPosts = activeCategory === "همه"
|
||||||
|
? MOCK_POSTS
|
||||||
|
: MOCK_POSTS.filter(post => post.category === activeCategory);
|
||||||
|
|
||||||
|
const featuredPost = MOCK_POSTS.find(post => post.isFeatured);
|
||||||
|
const regularPosts = filteredPosts.filter(post => !post.isFeatured || activeCategory !== "همه");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50/50 font-vazir pb-20" dir="rtl">
|
||||||
|
{/* هدر مجله */}
|
||||||
|
<div className="bg-white border-b border-gray-100 py-12 mb-10">
|
||||||
|
<div className="container flex flex-col items-center text-center">
|
||||||
|
<div className="p-4 bg-salona-50 text-salona-500 rounded-full mb-4 animate-fade-in">
|
||||||
|
<BookOpen className="w-10 h-10" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl md:text-5xl font-black text-gray-900 font-iransans mb-4">
|
||||||
|
مجله زیبایی <span className="text-salona-500">سالونا</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg max-w-2xl">
|
||||||
|
جدیدترین مقالات آموزشی، ترفندهای زیبایی، و راهنمای جامع استفاده از محصولات آرایشی و بهداشتی را در اینجا بخوانید.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* نوار جستجو */}
|
||||||
|
<div className="relative w-full max-w-md mt-8">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="جستجو در مقالات..."
|
||||||
|
className="w-full bg-gray-50 border border-gray-200 rounded-full py-3 pr-12 pl-4 text-gray-700 focus:outline-none focus:border-salona-400 focus:ring-2 focus:ring-salona-100 transition-all"
|
||||||
|
/>
|
||||||
|
<Search className="absolute right-4 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container">
|
||||||
|
{/* نوار فیلتر دستهبندیها */}
|
||||||
|
<div className="flex gap-3 overflow-x-auto pb-4 mb-10 scrollbar-hide">
|
||||||
|
{CATEGORIES.map((cat) => (
|
||||||
|
<button
|
||||||
|
key={cat}
|
||||||
|
onClick={() => setActiveCategory(cat)}
|
||||||
|
className={`flex-shrink-0 cursor-pointer px-6 py-2.5 rounded-full text-sm font-medium transition-all ${
|
||||||
|
activeCategory === cat
|
||||||
|
? "bg-salona-500 text-white shadow-md shadow-salona-200"
|
||||||
|
: "bg-white text-gray-600 border border-gray-200 hover:border-salona-300 hover:text-salona-500"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{cat}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* مقاله ویژه (Featured) - فقط در صورت انتخاب تب "همه" نمایش داده میشود */}
|
||||||
|
{activeCategory === "همه" && featuredPost && (
|
||||||
|
<div className="bg-white rounded-3xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-xl transition-shadow duration-300 mb-12 flex flex-col md:flex-row animate-fade-in">
|
||||||
|
<div className="md:w-1/2">
|
||||||
|
{/* جایگزین با تگ Image در نکستجیاس برای بهینهسازی */}
|
||||||
|
<img
|
||||||
|
src={featuredPost.imageUrl}
|
||||||
|
alt={featuredPost.title}
|
||||||
|
className="w-full h-full object-cover min-h-[300px]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
|
||||||
|
<div className="flex items-center gap-2 mb-4">
|
||||||
|
<Sparkles className="w-5 h-5 text-salona-500" />
|
||||||
|
<span className="text-sm font-bold text-salona-500 tracking-wider">مقاله ویژه</span>
|
||||||
|
</div>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 font-iransans mb-4 leading-relaxed">
|
||||||
|
{featuredPost.title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 mb-6 leading-loose">
|
||||||
|
{featuredPost.excerpt}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-4 text-sm text-gray-400 mb-8">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>{featuredPost.date}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span>{featuredPost.readTime}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href={`/blog/${featuredPost.id}`}
|
||||||
|
className="inline-flex items-center justify-center gap-2 bg-salona-50 text-salona-600 px-6 py-3 rounded-xl font-medium hover:bg-salona-500 hover:text-white transition-colors w-max"
|
||||||
|
>
|
||||||
|
مطالعه کامل مقاله
|
||||||
|
<ChevronLeft className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* گرید سایر مقالات */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{regularPosts.map((post) => (
|
||||||
|
<Link key={post.id} href={`/blog/${post.id}`} className="group bg-white rounded-3xl border border-gray-100 overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col animate-fade-in">
|
||||||
|
<div className="relative overflow-hidden aspect-video">
|
||||||
|
<img
|
||||||
|
src={post.imageUrl}
|
||||||
|
alt={post.title}
|
||||||
|
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
|
||||||
|
/>
|
||||||
|
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm text-salona-600 px-3 py-1 rounded-full text-xs font-bold">
|
||||||
|
{post.category}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 flex flex-col flex-grow">
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 font-iransans mb-3 group-hover:text-salona-500 transition-colors line-clamp-2">
|
||||||
|
{post.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-500 text-sm mb-6 line-clamp-3 leading-relaxed">
|
||||||
|
{post.excerpt}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mt-auto pt-4 border-t border-gray-50 flex items-center justify-between text-xs text-gray-400">
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>{post.date}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-1">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span>{post.readTime}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* حالت خالی (وقتی دستهبندی مقالهای ندارد) */}
|
||||||
|
{regularPosts.length === 0 && (!featuredPost || activeCategory !== "همه") && (
|
||||||
|
<div className="text-center py-20">
|
||||||
|
<div className="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||||
|
<BookOpen className="w-10 h-10 text-gray-300" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-800 mb-2">مقالهای یافت نشد</h3>
|
||||||
|
<p className="text-gray-500">در حال حاضر در این دستهبندی مقالهای منتشر نشده است.</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
src/app/error.tsx
Normal file
44
src/app/error.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect } from "react";
|
||||||
|
import { ServerCrash, RefreshCw, Home } from "lucide-react";
|
||||||
|
|
||||||
|
export default function Error({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
useEffect(() => {
|
||||||
|
console.error(error);
|
||||||
|
}, [error]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50 flex items-center justify-center font-vazir" dir="rtl">
|
||||||
|
<div className="container text-center px-4 max-w-xl mx-auto">
|
||||||
|
<div className="inline-block p-6 bg-red-100 text-red-500 rounded-3xl mb-8">
|
||||||
|
<ServerCrash className="w-16 h-16" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 font-iransans mb-4">
|
||||||
|
یک خطای غیرمنتظره رخ داد!
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg mb-10">
|
||||||
|
تیم فنی ما از این مشکل مطلع شده است. لطفاً کمی صبر کرده و دوباره تلاش کنید یا به صفحه اصلی بازگردید.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => reset()}
|
||||||
|
className="flex items-center gap-2 bg-salona-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-salona-600 transition-all shadow-lg shadow-salona-200 hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-5 h-5" />
|
||||||
|
<span>تلاش مجدد</span>
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="/"
|
||||||
|
className="flex items-center gap-2 bg-white text-gray-700 px-6 py-3 rounded-xl font-bold border border-gray-200 hover:bg-gray-100 hover:text-salona-500 transition-all"
|
||||||
|
>
|
||||||
|
<Home className="w-5 h-5" />
|
||||||
|
<span>بازگشت به صفحه اصلی</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
167
src/app/faq/page.tsx
Normal file
167
src/app/faq/page.tsx
Normal file
@@ -0,0 +1,167 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
import { ChevronDown, MessageCircleQuestion, ShoppingBag, CalendarDays, ShieldCheck, Headset } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
// دادههای فرضی برای سوالات متداول
|
||||||
|
const FAQ_CATEGORIES = [
|
||||||
|
{
|
||||||
|
id: "shop",
|
||||||
|
title: "خرید و سفارش محصولات",
|
||||||
|
icon: <ShoppingBag className="w-6 h-6" />,
|
||||||
|
faqs: [
|
||||||
|
{
|
||||||
|
q: "چگونه میتوانم سفارش خود را پیگیری کنم؟",
|
||||||
|
a: "پس از ثبت سفارش، یک کد رهگیری پیامک میشود. همچنین میتوانید با مراجعه به بخش «سفارشهای من» در پنل کاربری، وضعیت لحظهای مرسوله خود را مشاهده کنید.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "آیا امکان مرجوع کردن کالای آرایشی وجود دارد؟",
|
||||||
|
a: "به دلیل رعایت مسائل بهداشتی، کالاهای آرایشی و بهداشتی تنها در صورت پلمپ بودن و وجود نقص فیزیکی در بستهبندی، تا ۷ روز قابل مرجوع کردن هستند.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "هزینه ارسال سفارشات چقدر است؟",
|
||||||
|
a: "هزینه ارسال برای سفارشهای بالای ۱ میلیون تومان کاملاً رایگان است. برای مبالغ کمتر، بر اساس تعرفه پست و آدرس شما محاسبه میشود.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "booking",
|
||||||
|
title: "رزرو نوبت آرایشگاه",
|
||||||
|
icon: <CalendarDays className="w-6 h-6" />,
|
||||||
|
faqs: [
|
||||||
|
{
|
||||||
|
q: "آیا میتوانم نوبت رزرو شده را لغو یا جابجا کنم؟",
|
||||||
|
a: "بله، تا ۲۴ ساعت قبل از زمان مقرر میتوانید نوبت خود را از طریق پنل کاربری به صورت رایگان لغو کرده یا به زمان دیگری موکول کنید.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
q: "مبلغ بیعانه نوبتدهی چگونه محاسبه میشود؟",
|
||||||
|
a: "بسته به نوع خدمات آرایشگاه (مثلاً رنگ مو یا میکاپ عروس)، مبلغی بین ۲۰ تا ۳۰ درصد کل هزینه به عنوان بیعانه در زمان رزرو آنلاین دریافت میشود.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "account",
|
||||||
|
title: "حساب کاربری و امنیت",
|
||||||
|
icon: <ShieldCheck className="w-6 h-6" />,
|
||||||
|
faqs: [
|
||||||
|
{
|
||||||
|
q: "چگونه اطلاعات پروفایل خود را ویرایش کنم؟",
|
||||||
|
a: "وارد حساب کاربری خود شوید، به بخش «تنظیمات پروفایل» بروید و اطلاعاتی مانند آدرس، شماره تماس و نام خود را ویرایش و ذخیره کنید.",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FAQPage() {
|
||||||
|
// وضعیت برای مدیریت تبهای باز (آیدی سوال باز شده را ذخیره میکند)
|
||||||
|
const [openItem, setOpenItem] = useState<string | null>(null);
|
||||||
|
|
||||||
|
const toggleItem = (id: string) => {
|
||||||
|
setOpenItem(openItem === id ? null : id);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50/30 font-vazir pb-24" dir="rtl">
|
||||||
|
{/* بخش هدر صفحه */}
|
||||||
|
<div className="bg-salona-50/50 border-b border-salona-100 py-16 mb-12">
|
||||||
|
<div className="container flex flex-col items-center text-center">
|
||||||
|
<div className="p-4 bg-white text-salona-500 rounded-2xl shadow-sm mb-6 animate-fade-in">
|
||||||
|
<MessageCircleQuestion className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-black text-gray-900 font-iransans mb-4">سوالات متداول</h1>
|
||||||
|
<p className="text-gray-500 text-lg max-w-xl">
|
||||||
|
پاسخ پرتکرارترین سوالات درباره خرید محصولات آرایشی و رزرو نوبت آرایشگاه را در اینجا پیدا کنید.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container max-w-4xl">
|
||||||
|
{/* لیست دستهبندیها و سوالات */}
|
||||||
|
<div className="space-y-12 animate-fade-in">
|
||||||
|
{FAQ_CATEGORIES.map((category) => (
|
||||||
|
<div
|
||||||
|
key={category.id}
|
||||||
|
className="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3 mb-6 pb-4 border-b border-gray-50">
|
||||||
|
<div className="p-3 bg-salona-50 text-salona-500 rounded-xl">{category.icon}</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800 font-iransans">{category.title}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
{category.faqs.map((faq, index) => {
|
||||||
|
const itemId = `${category.id}-${index}`;
|
||||||
|
const isOpen = openItem === itemId;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={itemId}
|
||||||
|
className={`border rounded-2xl transition-all duration-300 ${
|
||||||
|
isOpen
|
||||||
|
? "border-salona-300 bg-salona-50/30"
|
||||||
|
: "border-gray-100 bg-white hover:border-gray-200"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleItem(itemId)}
|
||||||
|
className="w-full cursor-pointer flex items-center justify-between p-5 text-right focus:outline-none"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`font-medium ${isOpen ? "text-salona-600" : "text-gray-700"}`}
|
||||||
|
>
|
||||||
|
{faq.q}
|
||||||
|
</span>
|
||||||
|
<ChevronDown
|
||||||
|
className={`w-5 h-5 text-gray-400 transition-transform duration-300 ${
|
||||||
|
isOpen ? "rotate-180 text-salona-500" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* محتوای آکاردئون */}
|
||||||
|
<div
|
||||||
|
className={`overflow-hidden transition-all duration-300 px-5 ${
|
||||||
|
isOpen ? "max-h-48 pb-5 opacity-100" : "max-h-0 opacity-0"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<p className="text-gray-600 text-sm leading-loose border-t border-salona-100/50 pt-4">
|
||||||
|
{faq.a}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* بخش تماس با پشتیبانی (CTA) */}
|
||||||
|
<div className="mt-16 bg-gradient-to-r from-salona-600 to-salona-400 rounded-3xl p-8 md:p-10 text-center text-white shadow-lg shadow-salona-200">
|
||||||
|
<div className="w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center mx-auto mb-6">
|
||||||
|
<Headset className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-2xl font-bold font-iransans mb-3">پاسخ سوال خود را پیدا نکردید؟</h3>
|
||||||
|
<p className="text-salona-50 mb-8 max-w-lg mx-auto">
|
||||||
|
تیم پشتیبانی سالونا در تمامی روزهای هفته آماده پاسخگویی و راهنمایی شما عزیزان میباشد.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
|
||||||
|
<a
|
||||||
|
href="tel:08691009185"
|
||||||
|
className="bg-white text-salona-600 px-8 py-3 rounded-xl font-bold hover:bg-salona-50 transition-colors w-full sm:w-auto"
|
||||||
|
>
|
||||||
|
تماس با پشتیبانی
|
||||||
|
</a>
|
||||||
|
<Link
|
||||||
|
href={"/tickets"}
|
||||||
|
className="bg-salona-700/30 text-white px-8 py-3 rounded-xl font-medium hover:bg-salona-700/50 transition-colors w-full sm:w-auto"
|
||||||
|
>
|
||||||
|
ارسال تیکت
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
32
src/app/global-error.tsx
Normal file
32
src/app/global-error.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ServerCrash, RefreshCw } from "lucide-react";
|
||||||
|
|
||||||
|
export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
|
||||||
|
return (
|
||||||
|
<html lang="fa" dir="rtl">
|
||||||
|
<body className="font-vazir">
|
||||||
|
<main className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||||||
|
<div className="container text-center px-4 max-w-xl mx-auto">
|
||||||
|
<div className="inline-block p-6 bg-red-100 text-red-500 rounded-3xl mb-8">
|
||||||
|
<ServerCrash className="w-16 h-16" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 font-iransans mb-4">
|
||||||
|
مشکلی در بارگذاری سایت پیش آمده!
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg mb-10">
|
||||||
|
یک خطای اساسی در برنامه رخ داده است. لطفاً صفحه را مجدداً بارگذاری کنید.
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => reset()}
|
||||||
|
className="flex cursor-pointer items-center gap-2 mx-auto bg-salona-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-salona-600 transition-all shadow-lg shadow-salona-200 hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<RefreshCw className="w-5 h-5" />
|
||||||
|
<span>بارگذاری مجدد سایت</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
src/app/not-found.tsx
Normal file
44
src/app/not-found.tsx
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
import Link from "next/link";
|
||||||
|
import { FileSearch2, Home, ShoppingBag, BookOpen } from "lucide-react";
|
||||||
|
|
||||||
|
export default function NotFound() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50 flex items-center justify-center font-vazir" dir="rtl">
|
||||||
|
<div className="container text-center px-4">
|
||||||
|
<div className="inline-block p-6 bg-salona-100 text-salona-500 rounded-3xl mb-8 animate-bounce">
|
||||||
|
<FileSearch2 className="w-16 h-16" strokeWidth={1.5} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h1 className="text-5xl md:text-7xl font-black text-gray-800 font-iransans mb-4">۴۰۴</h1>
|
||||||
|
<h2 className="text-2xl md:text-3xl font-bold text-gray-700 mb-4">
|
||||||
|
صفحهای که به دنبال آن بودید، پیدا نشد!
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-500 text-lg max-w-xl mx-auto mb-10">
|
||||||
|
ممکن است آدرس را اشتباه وارد کرده باشید یا این صفحه برای همیشه حذف شده باشد. پیشنهاد میکنیم به یکی
|
||||||
|
از بخشهای اصلی سایت بروید.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap justify-center items-center gap-4">
|
||||||
|
<Link href="/" passHref>
|
||||||
|
<button className="flex cursor-pointer items-center gap-2 bg-salona-500 text-white px-6 py-3 rounded-xl font-bold hover:bg-salona-600 transition-all shadow-lg shadow-salona-200 hover:-translate-y-1">
|
||||||
|
<Home className="w-5 h-5" />
|
||||||
|
<span>بازگشت به صفحه اصلی</span>
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/products" passHref>
|
||||||
|
<button className="flex cursor-pointer items-center gap-2 bg-white text-gray-700 px-6 py-3 rounded-xl font-bold border border-gray-200 hover:bg-gray-100 hover:text-salona-500 transition-all">
|
||||||
|
<ShoppingBag className="w-5 h-5" />
|
||||||
|
<span>مشاهده فروشگاه</span>
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
<Link href="/blog" passHref>
|
||||||
|
<button className="flex cursor-pointer items-center gap-2 bg-white text-gray-700 px-6 py-3 rounded-xl font-bold border border-gray-200 hover:bg-gray-100 hover:text-salona-500 transition-all">
|
||||||
|
<BookOpen className="w-5 h-5" />
|
||||||
|
<span>مجله زیبایی</span>
|
||||||
|
</button>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
124
src/app/privacy/page.tsx
Normal file
124
src/app/privacy/page.tsx
Normal file
@@ -0,0 +1,124 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { ShieldCheck, Database, Lock, Cookie, UserCog, Eye, CheckCircle2 } from "lucide-react";
|
||||||
|
|
||||||
|
const PRIVACY_SECTIONS = [
|
||||||
|
{
|
||||||
|
id: "collection",
|
||||||
|
title: "۱. چه اطلاعاتی را جمعآوری میکنیم؟",
|
||||||
|
icon: <Database className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"هنگام ثبتنام، ثبت سفارش یا رزرو نوبت در سالونا، اطلاعاتی نظیر نام و نام خانوادگی، شماره تماس، آدرس پستی و ایمیل شما دریافت میشود.",
|
||||||
|
"به منظور بهبود تجربه کاربری، اطلاعاتی درباره نحوه استفاده شما از سایت (مانند صفحات بازدید شده، مدت زمان حضور و نوع دستگاه) به صورت ناشناس جمعآوری میگردد.",
|
||||||
|
"در زمان پرداخت آنلاین، هیچگونه اطلاعات بانکی (مانند رمز دوم یا شماره کارت کامل) در سرورهای سالونا ذخیره نمیشود و تمامی تراکنشها از طریق درگاههای امن بانکی انجام میپذیرد.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "usage",
|
||||||
|
title: "۲. چگونه از اطلاعات شما استفاده میکنیم؟",
|
||||||
|
icon: <Eye className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"پردازش و ارسال سفارشات فروشگاه و همچنین ثبت دقیق و یادآوری نوبتهای آرایشگاه.",
|
||||||
|
"ارتباط با شما جهت پشتیبانی، اطلاعرسانی درباره وضعیت سفارشها، تغییرات نوبتها و همچنین ارسال پیشنهادات ویژه (در صورت رضایت شما).",
|
||||||
|
"تحلیل دادهها برای بهبود عملکرد سایت، رفع باگها و ارائه خدمات شخصیسازی شده.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "security",
|
||||||
|
title: "۳. امنیت دادهها و اطلاعات",
|
||||||
|
icon: <Lock className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"سالونا از پروتکلهای امنیتی استاندارد (مانند SSL) برای رمزنگاری اطلاعات در زمان تبادل دادهها بین مرورگر شما و سرورهای سایت استفاده میکند.",
|
||||||
|
"دسترسی به اطلاعات شخصی شما تنها برای پرسنل مجاز سالونا و صرفاً جهت ارائه خدمات (مانند ارسال کالا) امکانپذیر است.",
|
||||||
|
"ما متعهد میشویم که اطلاعات شخصی شما را به هیچ شخص ثالث، شرکت یا نهاد تبلیغاتی نفروشیم یا اجاره ندهیم، مگر با حکم مراجع قضایی ذیصلاح.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "rights",
|
||||||
|
title: "۴. حقوق شما در قبال دادههایتان",
|
||||||
|
icon: <UserCog className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"شما در هر زمان حق دارید با مراجعه به پنل کاربری خود، اطلاعات شخصیتان را مشاهده، ویرایش و یا تکمیل کنید.",
|
||||||
|
"در صورت تمایل به حذف کامل حساب کاربری و اطلاعات مرتبط، میتوانید درخواست خود را از طریق تیکت یا تماس با پشتیبانی ثبت نمایید.",
|
||||||
|
"شما میتوانید در هر زمان از دریافت پیامکها و ایمیلهای تبلیغاتی انصراف دهید (لغو اشتراک).",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "cookies",
|
||||||
|
title: "۵. سیاست استفاده از کوکیها (Cookies)",
|
||||||
|
icon: <Cookie className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"سالونا برای لاگین نگه داشتن کاربران، حفظ آیتمهای سبد خرید و ارائه تجربه کاربری روانتر، از کوکیها استفاده میکند.",
|
||||||
|
"کوکیها فایلهای متنی کوچکی هستند که در مرورگر شما ذخیره میشوند و هیچگونه خطری برای دستگاه شما ندارند.",
|
||||||
|
"شما میتوانید از طریق تنظیمات مرورگر خود، دریافت کوکیها را مسدود کنید؛ اما این کار ممکن است باعث اختلال در برخی عملکردهای سایت (مانند سبد خرید) شود.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function PrivacyPage() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50/50 font-vazir pb-24" dir="rtl">
|
||||||
|
{/* هدر صفحه */}
|
||||||
|
<div className="bg-white border-b border-gray-100 py-16 mb-12">
|
||||||
|
<div className="container flex flex-col items-center text-center">
|
||||||
|
<div className="p-4 bg-salona-50 text-salona-500 rounded-2xl mb-6 animate-fade-in">
|
||||||
|
<ShieldCheck className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-black text-gray-900 font-iransans mb-4">
|
||||||
|
حریم خصوصی کاربران
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg mb-4 max-w-2xl mx-auto">
|
||||||
|
حفاظت از اطلاعات شخصی شما برای سالونا در بالاترین اولویت قرار دارد. در این صفحه، نحوه مدیریت
|
||||||
|
دادههای شما را شفافسازی کردهاییم.
|
||||||
|
</p>
|
||||||
|
<div className="inline-flex items-center gap-2 bg-salona-50 text-salona-600 px-4 py-2 rounded-full text-sm font-medium">
|
||||||
|
<Lock className="w-4 h-4" />
|
||||||
|
<span>آخرین بهروزرسانی: ۲۶ اسفند ۱۴۰۴</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container max-w-4xl">
|
||||||
|
{/* محتوای حریم خصوصی */}
|
||||||
|
<div className="space-y-8 animate-fade-in">
|
||||||
|
{PRIVACY_SECTIONS.map((section) => (
|
||||||
|
<section
|
||||||
|
key={section.id}
|
||||||
|
className="bg-white rounded-3xl p-6 md:p-10 shadow-sm border border-gray-100 transition-shadow hover:shadow-md"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4 mb-6 pb-6 border-b border-gray-50">
|
||||||
|
<div className="p-3 bg-salona-50 text-salona-500 rounded-xl">{section.icon}</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800 font-iransans">{section.title}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{section.content.map((paragraph, index) => (
|
||||||
|
<li key={index} className="flex items-start gap-3">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-salona-300 shrink-0 mt-1" />
|
||||||
|
<p className="text-gray-600 leading-loose text-justify">{paragraph}</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* تماس با پشتیبانی حریم خصوصی */}
|
||||||
|
<div className="mt-12 bg-gradient-to-l from-gray-900 to-gray-800 rounded-3xl p-8 md:p-10 text-center text-white shadow-xl shadow-gray-200">
|
||||||
|
<ShieldCheck className="w-10 h-10 mx-auto mb-4 text-salona-400" />
|
||||||
|
<h3 className="text-2xl font-bold font-iransans mb-3">سوالات بیشتری درباره حریم خصوصی دارید؟</h3>
|
||||||
|
<p className="text-gray-300 mb-8 max-w-lg mx-auto">
|
||||||
|
اگر نگرانی یا سوالی در خصوص نحوه مدیریت دادههای خود دارید، تیم امنیت و پشتیبانی سالونا آماده
|
||||||
|
پاسخگویی به شماست.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="tel:08691009185"
|
||||||
|
className="inline-flex items-center gap-2 bg-salona-500 text-white px-8 py-3 rounded-xl font-bold hover:bg-salona-600 transition-colors"
|
||||||
|
>
|
||||||
|
تماس با ما
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
130
src/app/return-policy/page.tsx
Normal file
130
src/app/return-policy/page.tsx
Normal file
@@ -0,0 +1,130 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { RefreshCcw, PackageOpen, AlertTriangle, Clock, CreditCard, CheckCircle2, ListOrdered } from "lucide-react";
|
||||||
|
|
||||||
|
const RETURN_SECTIONS = [
|
||||||
|
{
|
||||||
|
id: "conditions",
|
||||||
|
title: "۱. شرایط پذیرش کالای مرجوعی",
|
||||||
|
icon: <PackageOpen className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"با توجه به رعایت پروتکلهای بهداشتی، محصولات آرایشی و بهداشتی تنها در صورت «باز نشدن پلمپ اصلی» و «عدم مخدوش شدن بستهبندی» تا ۷ روز پس از تحویل قابل بازگشت هستند.",
|
||||||
|
"در صورتی که کالای دریافتی از نظر فیزیکی آسیب دیده باشد (مثلاً شکستگی شیشه عطر یا نشتی محصول)، باید حداکثر تا ۲۴ ساعت پس از دریافت کالا، موضوع را به پشتیبانی اطلاع دهید.",
|
||||||
|
"اگر کالای ارسال شده با سفارش شما (از نظر رنگ، مدل، حجم یا برند) مغایرت دارد، لطفاً پیش از باز کردن پلمپ کالا، با پشتیبانی تماس بگیرید.",
|
||||||
|
"کالاهایی که دارای تاریخ انقضای کمتر از ۳ ماه باشند (مگر آنکه در زمان خرید در سایت قید شده باشد)، بدون قید و شرط قابل مرجوع کردن هستند.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "exceptions",
|
||||||
|
title: "۲. کالا در چه شرایطی قابل بازگشت نیست؟",
|
||||||
|
icon: <AlertTriangle className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"باز شدن پلمپ، سلفون یا وکیوم محصولات آرایشی، پوستی و عطریات (حتی اگر از محصول استفاده نشده باشد).",
|
||||||
|
"کالاهایی که به عنوان هدیه یا اشانتیون همراه سفارش ارسال شدهاند.",
|
||||||
|
"بروز حساسیت پوستی پس از استفاده از محصول (سالونا مسئولیتی در قبال ناسازگاری ترکیبات محصول با پوست شما ندارد، لطفاً پیش از خرید ترکیبات را مطالعه فرمایید).",
|
||||||
|
"آسیبدیدگی کالا به دلیل استفاده نادرست یا نگهداری در شرایط نامناسب توسط مشتری.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "steps",
|
||||||
|
title: "۳. مراحل ثبت درخواست مرجوعی",
|
||||||
|
icon: <ListOrdered className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"ثبت درخواست: وارد پروفایل کاربری خود شوید، به بخش «سفارشهای من» بروید و روی گزینه «درخواست مرجوعی» کلیک کنید، یا با پشتیبانی تماس بگیرید.",
|
||||||
|
"ارسال مستندات: در صورت وجود مغایرت یا آسیب فیزیکی، عکس واضح از کالا و کارتن پستی آن را برای کارشناسان ما در واتساپ یا تلگرام ارسال کنید.",
|
||||||
|
"تایید اولیه: کارشناسان ما درخواست شما را بررسی کرده و در صورت تایید، هماهنگیهای لازم برای بازگرداندن کالا را انجام میدهند.",
|
||||||
|
"ارسال کالا: کالا را به همراه فاکتور و با بستهبندی ایمن، به آدرس پستی سالونا ارسال نمایید (هزینه پست در صورت تایید اشتباه از سوی سالونا، به شما عودت داده میشود).",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "refund",
|
||||||
|
title: "۴. روند رسیدگی و استرداد وجه",
|
||||||
|
icon: <CreditCard className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"پس از رسیدن کالای مرجوعی به انبار سالونا، کارشناسان کنترل کیفیت وضعیت کالا را بررسی میکنند (این فرآیند ۱ تا ۲ روز کاری زمان میبرد).",
|
||||||
|
"در صورت تایید سلامت و پلمپ بودن کالا (یا تایید نقص اولیه)، مبلغ کالا به کیف پول شما در سایت یا شماره شبا بانکی اعلام شده عودت داده میشود.",
|
||||||
|
"واریز وجه به حساب بانکی مشتریان، بین ۲۴ تا ۴۸ ساعت کاری (پس از تایید نهایی انبار) انجام خواهد شد.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ReturnPolicyPage() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50/50 font-vazir pb-24" dir="rtl">
|
||||||
|
{/* هدر صفحه */}
|
||||||
|
<div className="bg-white border-b border-gray-100 py-16 mb-12">
|
||||||
|
<div className="container flex flex-col items-center text-center">
|
||||||
|
<div className="p-4 bg-salona-50 text-salona-500 rounded-2xl mb-6 animate-fade-in">
|
||||||
|
<RefreshCcw className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-black text-gray-900 font-iransans mb-4">
|
||||||
|
رویه بازگرداندن کالا
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg mb-4 max-w-2xl mx-auto">
|
||||||
|
رضایت شما اولویت ماست. در این صفحه شرایط و مراحل بازگرداندن محصولات آرایشی و بهداشتی خریداری شده
|
||||||
|
از سالونا را مطالعه فرمایید.
|
||||||
|
</p>
|
||||||
|
<div className="inline-flex items-center gap-2 bg-red-50 text-red-500 px-4 py-2 rounded-full text-sm font-medium">
|
||||||
|
<Clock className="w-4 h-4" />
|
||||||
|
<span>مهلت مرجوعی: ۷ روز پس از تحویل کالا</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container max-w-4xl">
|
||||||
|
{/* بخش هشدار بهداشتی */}
|
||||||
|
<div className="mb-10 bg-orange-50 border border-orange-100 rounded-2xl p-6 flex flex-col md:flex-row items-start md:items-center gap-4 text-orange-800 animate-fade-in">
|
||||||
|
<AlertTriangle className="w-8 h-8 shrink-0 text-orange-500" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-bold font-iransans text-lg mb-1">توجه مهم در خصوص لوازم آرایشی</h3>
|
||||||
|
<p className="text-sm leading-relaxed opacity-90 text-justify">
|
||||||
|
بر اساس قوانین وزارت بهداشت، لوازم آرایشی و مراقبت پوستی درهبندی کالاهای حساس قرار دارند.
|
||||||
|
لذا مرجوع کردن این کالاها صرفاً در صورت <strong>عدم بازگشایی پلمپ کارخانه</strong> و
|
||||||
|
دستنخوردگی کامل محصول امکانپذیر است.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* محتوای قوانین مرجوعی */}
|
||||||
|
<div className="space-y-8 animate-fade-in">
|
||||||
|
{RETURN_SECTIONS.map((section) => (
|
||||||
|
<section
|
||||||
|
key={section.id}
|
||||||
|
className="bg-white rounded-3xl p-6 md:p-10 shadow-sm border border-gray-100 transition-all hover:shadow-md hover:border-salona-100"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4 mb-6 pb-6 border-b border-gray-50">
|
||||||
|
<div className="p-3 bg-salona-50 text-salona-500 rounded-xl">{section.icon}</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800 font-iransans">{section.title}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{section.content.map((paragraph, index) => (
|
||||||
|
<li key={index} className="flex items-start gap-3">
|
||||||
|
<CheckCircle2
|
||||||
|
className={`w-5 h-5 shrink-0 mt-1 ${section.id === "exceptions" ? "text-red-400" : "text-salona-300"}`}
|
||||||
|
/>
|
||||||
|
<p className="text-gray-600 leading-loose text-justify">{paragraph}</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* دکمه ثبت درخواست مرجوعی */}
|
||||||
|
<div className="mt-12 text-center">
|
||||||
|
<button className="bg-salona-500 cursor-pointer text-white px-10 py-4 rounded-2xl font-bold font-iransans text-lg shadow-lg shadow-salona-200 hover:bg-salona-600 hover:-translate-y-1 transition-all">
|
||||||
|
ثبت درخواست مرجوعی در پنل کاربری
|
||||||
|
</button>
|
||||||
|
<p className="mt-4 text-gray-500 text-sm">
|
||||||
|
یا در صورت نیاز به راهنمایی بیشتر با{" "}
|
||||||
|
<a href="tel:08691009185" className="text-salona-500 font-bold hover:underline">
|
||||||
|
شماره پشتیبانی
|
||||||
|
</a>{" "}
|
||||||
|
تماس بگیرید.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
188
src/app/shipping/page.tsx
Normal file
188
src/app/shipping/page.tsx
Normal file
@@ -0,0 +1,188 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Truck,
|
||||||
|
Bike,
|
||||||
|
Package,
|
||||||
|
ShoppingCart,
|
||||||
|
Archive,
|
||||||
|
Ticket,
|
||||||
|
Home,
|
||||||
|
MapPin,
|
||||||
|
Clock,
|
||||||
|
DollarSign,
|
||||||
|
Gift,
|
||||||
|
} from "lucide-react";
|
||||||
|
|
||||||
|
const SHIPPING_METHODS = [
|
||||||
|
{
|
||||||
|
title: "پست پیشتاز سراسری",
|
||||||
|
icon: <Package className="w-8 h-8 text-blue-500" />,
|
||||||
|
description:
|
||||||
|
"استانداردترین و فراگیرترین روش ارسال برای تمام شهرها و روستاهای ایران. بستهها از طریق شرکت ملی پست جمهوری اسلامی ایران ارسال میشوند.",
|
||||||
|
features: [
|
||||||
|
{ icon: <MapPin className="w-4 h-4 text-gray-500" />, text: "محدوده: تمام نقاط ایران" },
|
||||||
|
{ icon: <Clock className="w-4 h-4 text-gray-500" />, text: "زمان تحویل: ۲ تا ۵ روز کاری" },
|
||||||
|
{ icon: <DollarSign className="w-4 h-4 text-gray-500" />, text: "هزینه: بر اساس وزن طبق تعرفه پست" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "ارسال با پیک موتوری (ویژه تهران)",
|
||||||
|
icon: <Bike className="w-8 h-8 text-green-500" />,
|
||||||
|
description:
|
||||||
|
"سریعترین روش برای دریافت سفارشات در شهر تهران. سفارش شما در همان روز یا نهایتاً روز کاری بعد به دستتان خواهد رسید.",
|
||||||
|
features: [
|
||||||
|
{ icon: <MapPin className="w-4 h-4 text-gray-500" />, text: "محدوده: مناطق ۲۲ گانه شهر تهران" },
|
||||||
|
{ icon: <Clock className="w-4 h-4 text-gray-500" />, text: "زمان تحویل: ۱ تا ۴ ساعت (پس از پردازش)" },
|
||||||
|
{ icon: <DollarSign className="w-4 h-4 text-gray-500" />, text: "هزینه: ثابت بر اساس تعرفه پیک" },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const PROCESS_STEPS = [
|
||||||
|
{
|
||||||
|
icon: <ShoppingCart className="w-6 h-6 text-white" />,
|
||||||
|
title: "ثبت سفارش",
|
||||||
|
description: "شما سفارش خود را نهایی و پرداخت میکنید.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Archive className="w-6 h-6 text-white" />,
|
||||||
|
title: "پردازش و بستهبندی",
|
||||||
|
description: "سفارش شما در انبار سالونا با دقت بستهبندی میشود.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Truck className="w-6 h-6 text-white" />,
|
||||||
|
title: "تحویل به واحد ارسال",
|
||||||
|
description: "بسته شما به پست یا واحد پیک تحویل داده میشود.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Ticket className="w-6 h-6 text-white" />,
|
||||||
|
title: "ارسال کد رهگیری",
|
||||||
|
description: "کد پیگیری از طریق پیامک برای شما ارسال میگردد.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Home className="w-6 h-6 text-white" />,
|
||||||
|
title: "تحویل به مشتری",
|
||||||
|
description: "بسته توسط مامور پست/پیک به شما تحویل داده میشود.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function ShippingPage() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50/50 font-vazir pb-24" dir="rtl">
|
||||||
|
{/* هدر صفحه */}
|
||||||
|
<div className="bg-white border-b border-gray-100 py-16 mb-12">
|
||||||
|
<div className="container flex flex-col items-center text-center">
|
||||||
|
<div className="p-4 bg-salona-50 text-salona-500 rounded-2xl mb-6 animate-fade-in">
|
||||||
|
<Truck className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-black text-gray-900 font-iransans mb-4">
|
||||||
|
روشهای ارسال و پیگیری سفارشات
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg mb-6 max-w-2xl mx-auto">
|
||||||
|
سفارش شما در سریعترین و امنترین حالت ممکن به دستتان میرسد. با روشهای ارسال سالونا آشنا شوید.
|
||||||
|
</p>
|
||||||
|
<div className="inline-flex items-center gap-2 bg-green-50 text-green-600 px-4 py-2 rounded-full text-sm font-medium">
|
||||||
|
<Gift className="w-4 h-4" />
|
||||||
|
<span>ارسال رایگان برای خریدهای بالای ۱ میلیون تومان</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container max-w-6xl">
|
||||||
|
{/* بخش روش های ارسال */}
|
||||||
|
<div className="mb-16 animate-fade-in">
|
||||||
|
<h2 className="text-2xl font-bold text-center text-gray-800 mb-8 font-iransans">
|
||||||
|
انتخاب روش ارسال مناسب شما
|
||||||
|
</h2>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||||
|
{SHIPPING_METHODS.map((method, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-white rounded-3xl p-8 border border-gray-100 shadow-sm transition-all hover:shadow-lg hover:border-salona-200 hover:-translate-y-1"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4 mb-4">
|
||||||
|
<div className="p-3 bg-gray-100 rounded-xl">{method.icon}</div>
|
||||||
|
<h3 className="text-xl font-bold text-gray-800">{method.title}</h3>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 leading-relaxed mb-6">{method.description}</p>
|
||||||
|
<div className="space-y-3 pt-6 border-t border-gray-100">
|
||||||
|
{method.features.map((feature, fIndex) => (
|
||||||
|
<div key={fIndex} className="flex items-center gap-3 text-sm">
|
||||||
|
{feature.icon}
|
||||||
|
<span className="text-gray-700 font-medium">{feature.text}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* بخش مراحل پردازش سفارش */}
|
||||||
|
<div className="mb-12 animate-fade-in">
|
||||||
|
<h2 className="text-2xl font-bold text-center text-gray-800 mb-10 font-iransans">
|
||||||
|
مراحل پردازش تا تحویل سفارش
|
||||||
|
</h2>
|
||||||
|
<div className="relative">
|
||||||
|
{/* خط عمودی */}
|
||||||
|
<div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-salona-200 hidden md:block" />
|
||||||
|
|
||||||
|
<div className="space-y-12 md:space-y-6">
|
||||||
|
{PROCESS_STEPS.map((step, index) => (
|
||||||
|
<div key={index} className="flex flex-col md:flex-row items-center gap-4 md:gap-0">
|
||||||
|
{/* سمت راست در دسکتاپ */}
|
||||||
|
<div className="md:w-1/2 md:pr-10 text-center md:text-right">
|
||||||
|
{index % 2 === 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-800">{step.title}</h3>
|
||||||
|
<p className="text-gray-500">{step.description}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* آیکون وسط */}
|
||||||
|
<div className="relative">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-salona-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg">
|
||||||
|
{step.icon}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* سمت چپ در دسکتاپ */}
|
||||||
|
<div className="md:w-1/2 md:pl-10 text-center md:text-left">
|
||||||
|
{index % 2 !== 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-lg font-bold text-gray-800">{step.title}</h3>
|
||||||
|
<p className="text-gray-500">{step.description}</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{/* نمایش محتوا در زیر آیکون برای حالت موبایل */}
|
||||||
|
<div className="md:hidden mt-2">
|
||||||
|
<h3 className="text-lg font-bold text-gray-800">{step.title}</h3>
|
||||||
|
<p className="text-gray-500">{step.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* بخش CTA */}
|
||||||
|
<div className="mt-16 bg-gradient-to-r from-salona-500 to-pink-500 rounded-3xl p-10 text-center text-white shadow-xl shadow-salona-200">
|
||||||
|
<h3 className="text-2xl font-bold font-iransans mb-3">آماده شروع خرید هستید؟</h3>
|
||||||
|
<p className="text-salona-100 mb-8 max-w-lg mx-auto">
|
||||||
|
از میان هزاران محصول آرایشی و بهداشتی، کالای مورد نظر خود را انتخاب کرده و ما آن را به سرعت برای
|
||||||
|
شما ارسال خواهیم کرد.
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href="/products"
|
||||||
|
className="inline-flex items-center gap-2 bg-white text-salona-500 px-8 py-3 rounded-xl font-bold hover:bg-salona-50 transition-colors"
|
||||||
|
>
|
||||||
|
مشاهده همه محصولات
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
111
src/app/terms/page.tsx
Normal file
111
src/app/terms/page.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Scale, ShoppingBag, CalendarCheck, ShieldAlert, CheckCircle2 } from "lucide-react";
|
||||||
|
|
||||||
|
const TERMS_SECTIONS = [
|
||||||
|
{
|
||||||
|
id: "general",
|
||||||
|
title: "۱. شرایط و قوانین عمومی",
|
||||||
|
icon: <Scale className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"کاربر گرامی، لطفاً موارد زیر را جهت استفاده بهینه از خدمات و برنامههای کاربردی سالونا به دقت ملاحظه فرمایید.",
|
||||||
|
"ورود کاربران به وبسایت سالونا هنگام استفاده از پروفایل شخصی، و سایر خدمات ارائه شده توسط سالونا به معنای آگاه بودن و پذیرفتن شرایط و قوانین و همچنین نحوه استفاده از سرویسها و خدمات سالونا است.",
|
||||||
|
"توجه داشته باشید که ثبت سفارش و یا رزرو نوبت نیز در هر زمان به معنی پذیرفتن کامل کلیه شرایط و قوانین سالونا از سوی کاربر است. قوانین مندرج، جایگزین کلیه توافقهای قبلی محسوب میشود.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "shop",
|
||||||
|
title: "۲. قوانین فروشگاه و ارسال محصولات",
|
||||||
|
icon: <ShoppingBag className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"روز کاری به معنی روز شنبه تا پنجشنبه هر هفته، به استثنای تعطیلات عمومی در ایران است و کلیه سفارشهای ثبت شده در طول روزهای کاری و اولین روز پس از تعطیلات پردازش میشوند.",
|
||||||
|
"سالونا همواره در ارسال و تحویل کلیه سفارشهای ثبت شده، نهایت دقت و تلاش خود را انجام میدهد. با وجود این، در صورتی که موجودی محصولی در سالونا به پایان برسد، حتی پس از اقدام مشتری به سفارشگذاری، حق کنسل کردن آن سفارش و یا استرداد وجه سفارش برای سالونا محفوظ است.",
|
||||||
|
"در صورت بروز مشکل در پردازش نهایی سبد خرید مانند اتمام موجودی کالا یا انصراف مشتری، مبلغ پرداخت شده طی ۲۴ الی ۴۸ ساعت کاری به حساب مشتری واریز خواهد شد.",
|
||||||
|
"کالاهای آرایشی و بهداشتی به دلیل رعایت اصول بهداشتی، تنها در صورت باز نشدن پلمپ و تطابق با شرایط مرجوعی، تا ۷ روز قابل بازگشت هستند.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "booking",
|
||||||
|
title: "۳. قوانین رزرو نوبت آرایشگاه",
|
||||||
|
icon: <CalendarCheck className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"رزرو نوبت تنها با پرداخت بیعانه (مبلغ مشخص شده در درگاه) قطعی میگردد و پیامک تایید برای شما ارسال خواهد شد.",
|
||||||
|
"در صورت لغو نوبت تا ۲۴ ساعت پیش از زمان مقرر، کل مبلغ بیعانه به کیف پول کاربری یا حساب بانکی شما عودت داده میشود.",
|
||||||
|
"لغو نوبت در کمتر از ۲۴ ساعت مانده به زمان رزرو، مشمول کسر هزینه لغو (برابر با مبلغ بیعانه) خواهد شد.",
|
||||||
|
"لطفاً ۱۵ دقیقه پیش از زمان تعیین شده در آرایشگاه حضور داشته باشید. تأخیر بیش از ۲۰ دقیقه ممکن است منجر به لغو نوبت شما توسط سالن گردد.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "privacy",
|
||||||
|
title: "۴. حریم خصوصی و امنیت دادهها",
|
||||||
|
icon: <ShieldAlert className="w-6 h-6" />,
|
||||||
|
content: [
|
||||||
|
"سالونا به اطلاعات خصوصی اشخاصی که از خدمات سایت استفاده میکنند، احترام گذاشته و از آن محافظت میکند.",
|
||||||
|
"ما متعهد میشویم در حد توان از حریم شخصی شما دفاع کنیم و در این راستا، تکنولوژی مورد نیاز برای هرچه مطمئنتر و امنتر شدن استفاده شما از سایت را توسعه دهیم.",
|
||||||
|
"حفظ و نگهداری رمز عبور و نام کاربری بر عهده کاربران است و لذا برای جلوگیری از هرگونه سوء استفاده احتمالی، کاربران نباید آن اطلاعات را برای شخص دیگری فاش کنند.",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function TermsPage() {
|
||||||
|
return (
|
||||||
|
<main className="min-h-screen bg-gray-50/50 font-vazir pb-24" dir="rtl">
|
||||||
|
{/* هدر صفحه */}
|
||||||
|
<div className="bg-white border-b border-gray-100 py-16 mb-12">
|
||||||
|
<div className="container flex flex-col items-center text-center">
|
||||||
|
<div className="p-4 bg-salona-50 text-salona-500 rounded-2xl mb-6 animate-fade-in">
|
||||||
|
<Scale className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-3xl md:text-4xl font-black text-gray-900 font-iransans mb-4">
|
||||||
|
قوانین و مقررات <span className="text-salona-500">سالونا</span>
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-500 text-lg mb-4">
|
||||||
|
لطفاً پیش از استفاده از خدمات سایت، موارد زیر را به دقت مطالعه فرمایید.
|
||||||
|
</p>
|
||||||
|
<div className="inline-flex items-center gap-2 bg-gray-50 text-gray-500 px-4 py-2 rounded-full text-sm">
|
||||||
|
<CalendarCheck className="w-4 h-4" />
|
||||||
|
<span>آخرین بهروزرسانی: ۲۶ اسفند ۱۴۰۴</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="container max-w-4xl">
|
||||||
|
{/* محتوای قوانین */}
|
||||||
|
<div className="space-y-10 animate-fade-in">
|
||||||
|
{TERMS_SECTIONS.map((section) => (
|
||||||
|
<div
|
||||||
|
key={section.id}
|
||||||
|
className="bg-white rounded-3xl p-6 md:p-10 shadow-sm border border-gray-100"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-4 mb-6 pb-6 border-b border-gray-50">
|
||||||
|
<div className="p-3 bg-salona-50 text-salona-500 rounded-xl">{section.icon}</div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-800 font-iransans">{section.title}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-4">
|
||||||
|
{section.content.map((paragraph, index) => (
|
||||||
|
<li key={index} className="flex items-start gap-3">
|
||||||
|
<CheckCircle2 className="w-5 h-5 text-salona-300 shrink-0 mt-1" />
|
||||||
|
<p className="text-gray-600 leading-loose text-justify">{paragraph}</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* پیام پایانی */}
|
||||||
|
<div className="mt-12 text-center bg-salona-50/50 rounded-2xl p-6 border border-salona-100">
|
||||||
|
<p className="text-gray-600 leading-relaxed">
|
||||||
|
عضویت در سایت سالونا و استفاده از خدمات آن به منزله مطالعه دقیق و پذیرش تمامی قوانین فوق
|
||||||
|
میباشد. در صورت داشتن هرگونه ابهام، با{" "}
|
||||||
|
<a href="tel:08691009185" className="text-salona-500 font-bold hover:underline">
|
||||||
|
پشتیبانی سالونا
|
||||||
|
</a>{" "}
|
||||||
|
تماس بگیرید.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user