style: improve health advisor UX, fix broken thumbnails, add Persian equivalents to product names for SEO, and refine card title alignments
This commit is contained in:
parsa aghaei
parent
711fb414ab
commit
cf705ea121
@ -276,7 +276,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Canina NovaGard Green Augenpflege",
|
||||
"name": "Canina NovaGard Green Augenpflege (مراقبت چشم)",
|
||||
"category_slug": "special-care",
|
||||
"description": "قطره چشم برای تمیز کردن و مراقبت از چشم های گریان و گرفتگی چشم. نقره کلوئیدی از التهاب جلوگیری می کند.",
|
||||
"ingredients": "آب بدون مواد معدنی، هیالورونات سدیم، نقره کلوئیدی.",
|
||||
@ -286,7 +286,7 @@
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Canina NovaGard Green Pfotenpflege",
|
||||
"name": "Canina NovaGard Green Pfotenpflege (مراقبت پنجه)",
|
||||
"category_slug": "special-care",
|
||||
"description": "کرم مراقبت از پنجه 100% طبیعی برای تسکین پوست خارش دار، التیام زخم ها و خراشیدگی پوست سگ ها در زمستان و تابستان.",
|
||||
"ingredients": "وازلین، روغن پالپ سنجد دریایی، روغن کالاندولا، پانتنول.",
|
||||
|
||||
@ -87,7 +87,7 @@ function ProductCard({ product, onClick }: { product: Product; key?: string | nu
|
||||
{/* Content Area */}
|
||||
<div className="p-8 flex flex-col flex-1" onClick={() => router.push(`/shop/${product.slug || product.id}`)}>
|
||||
<div className="flex items-start justify-between mb-4 gap-2">
|
||||
<h3 dir="ltr" className="text-base md:text-lg font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors leading-tight text-left line-clamp-2 flex-1">
|
||||
<h3 dir="ltr" className="text-base md:text-lg font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors leading-tight text-left line-clamp-2 flex-1 min-h-[3rem]">
|
||||
{product.name}
|
||||
</h3>
|
||||
<ShieldCheck className="w-6 h-6 text-canina-blue flex-shrink-0" />
|
||||
|
||||
@ -157,6 +157,12 @@ export default function Hero({ banners = [] }: { banners?: any[] }) {
|
||||
<span className="text-[7px] lg:text-[8px] font-bold text-medical-gray-500 uppercase tracking-widest mt-0.5 leading-tight">{getText('hero_quality_standard', "استاندارد کیفی آلمان")}</span>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* 3D Action Badge clarifying the 3D mark */}
|
||||
<div className="absolute bottom-28 right-6 bg-canina-gold text-medical-gray-900 px-4 py-2 rounded-2xl text-xs font-black shadow-2xl z-20 flex items-center gap-1.5 font-vazir border border-white/20 select-none animate-bounce">
|
||||
<span className="text-sm">✨</span>
|
||||
<span>فرمول ۳کاره (تاثیر سهبعدی)</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
@ -59,6 +59,8 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
|
||||
const [name, setName] = useState("");
|
||||
const [type, setType] = useState<"سگ" | "گربه">("سگ");
|
||||
const [breed, setBreed] = useState("");
|
||||
const [showError, setShowError] = useState(false);
|
||||
const [shake, setShake] = useState(false);
|
||||
|
||||
// Step 2 Data
|
||||
const [age, setAge] = useState<number>(3);
|
||||
@ -68,7 +70,17 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
|
||||
// Step 3 Data
|
||||
const [medicalConditions, setMedicalConditions] = useState<string[]>([]);
|
||||
|
||||
const handleNext = () => setStep(s => s + 1);
|
||||
const handleNext = () => {
|
||||
if (step === 1) {
|
||||
if (!name.trim() || !breed.trim()) {
|
||||
setShowError(true);
|
||||
setShake(true);
|
||||
setTimeout(() => setShake(false), 500);
|
||||
return;
|
||||
}
|
||||
}
|
||||
setStep(s => s + 1);
|
||||
};
|
||||
const handleBack = () => setStep(s => s - 1);
|
||||
|
||||
const handleSubmit = () => {
|
||||
@ -153,9 +165,17 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
|
||||
<input
|
||||
type="text"
|
||||
value={name}
|
||||
onChange={e => setName(e.target.value)}
|
||||
onChange={e => {
|
||||
setName(e.target.value);
|
||||
if (e.target.value.trim() && breed.trim()) setShowError(false);
|
||||
}}
|
||||
placeholder={getText('advisor_pet_name_placeholder', "لوسی، تدی...")}
|
||||
className="w-full bg-white border border-medical-gray-300 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-canina-blue/30 focus-visible:ring-4 focus-visible:ring-canina-blue/40 outline-none font-black text-lg font-vazir placeholder-medical-gray-500 text-medical-gray-900"
|
||||
className={cn(
|
||||
"w-full bg-white border rounded-2xl py-4 px-6 focus:ring-2 outline-none font-black text-lg font-vazir placeholder-medical-gray-500 text-medical-gray-900 transition-all",
|
||||
showError && !name.trim()
|
||||
? "border-red-500 focus:ring-red-500/30"
|
||||
: "border-medical-gray-300 focus:ring-canina-blue/30 focus-visible:ring-4 focus-visible:ring-canina-blue/40"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
@ -163,23 +183,35 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
|
||||
<input
|
||||
type="text"
|
||||
value={breed}
|
||||
onChange={e => setBreed(e.target.value)}
|
||||
onChange={e => {
|
||||
setBreed(e.target.value);
|
||||
if (name.trim() && e.target.value.trim()) setShowError(false);
|
||||
}}
|
||||
placeholder={getText('advisor_pet_breed_placeholder', "ژرمن، پرشین...")}
|
||||
className="w-full bg-white border border-medical-gray-300 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-canina-blue/30 focus-visible:ring-4 focus-visible:ring-canina-blue/40 outline-none font-bold font-vazir placeholder-medical-gray-500 text-medical-gray-900"
|
||||
className={cn(
|
||||
"w-full bg-white border rounded-2xl py-4 px-6 focus:ring-2 outline-none font-bold font-vazir placeholder-medical-gray-500 text-medical-gray-900 transition-all",
|
||||
showError && !breed.trim()
|
||||
? "border-red-500 focus:ring-red-500/30"
|
||||
: "border-medical-gray-300 focus:ring-canina-blue/30 focus-visible:ring-4 focus-visible:ring-canina-blue/40"
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
<motion.button
|
||||
onClick={handleNext}
|
||||
disabled={!name || !breed}
|
||||
className="w-full py-6 rounded-3xl font-black text-lg flex items-center justify-center gap-3 font-vazir min-h-[48px] transition-all focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:shadow-none disabled:border-2 disabled:border-gray-400 bg-medical-gray-900 text-white hover:bg-canina-blue shadow-xl shadow-medical-gray-900/10"
|
||||
animate={shake ? { x: [-10, 10, -10, 10, -5, 5, -2, 2, 0] } : { x: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className={cn(
|
||||
"w-full py-6 rounded-3xl font-black text-lg flex items-center justify-center gap-3 font-vazir min-h-[48px] transition-all focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none bg-medical-gray-900 text-white hover:bg-canina-blue shadow-xl shadow-medical-gray-900/10",
|
||||
(!name.trim() || !breed.trim()) ? "opacity-60 cursor-pointer" : ""
|
||||
)}
|
||||
>
|
||||
{getText('advisor_submit_btn', "ثبت هویت و ادامه")}
|
||||
<ChevronLeft className="w-5 h-5" />
|
||||
</button>
|
||||
{(!name || !breed) && (
|
||||
<p className="text-center text-xs font-black text-amber-600 mt-2 font-vazir animate-pulse">
|
||||
</motion.button>
|
||||
{showError && (!name.trim() || !breed.trim()) && (
|
||||
<p className="text-center text-xs font-black text-red-500 mt-2 font-vazir animate-pulse">
|
||||
{getText('advisor_validation_warning', "⚠️ لطفاً ابتدا نام و نژاد پت را در بالا وارد کنید.")}
|
||||
</p>
|
||||
)}
|
||||
|
||||
@ -29,7 +29,7 @@ const VIDEOS = [
|
||||
title: "تغذیه هوشمند تولهسگها",
|
||||
doctor: "دکتر هلگا فیشر",
|
||||
duration: "۳:۱۰",
|
||||
thumbnail: "https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&q=80&w=400",
|
||||
thumbnail: "https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&q=80&w=400",
|
||||
videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
|
||||
description: "دوز مصرفی مکملهای کلسیم در نژادهای بزرگ برای جلوگیری از بدشکلیهای استخوانی."
|
||||
}
|
||||
|
||||
@ -28,7 +28,7 @@ const ALL_VIDEOS = [
|
||||
title: "تغذیه هوشمند تولهسگهای نژاد بزرگ",
|
||||
doctor: "دکتر هلگا فیشر",
|
||||
duration: "۳:۱۰",
|
||||
thumbnail: "https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&q=80&w=600",
|
||||
thumbnail: "https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&q=80&w=600",
|
||||
videoUrl: "https://www.w3schools.com/html/mov_bbb.mp4",
|
||||
description: "دوز مصرفی مکملهای کلسیم در نژادهای بزرگ برای جلوگیری از بدشکلیهای استخوانی."
|
||||
},
|
||||
|
||||
@ -1131,7 +1131,7 @@ export const PRODUCTS: Product[] = [
|
||||
{
|
||||
id: "novagard-augenpflege",
|
||||
artNo: "NG0013",
|
||||
name: "Canina NovaGard Green Augenpflege",
|
||||
name: "Canina NovaGard Green Augenpflege (مراقبت چشم)",
|
||||
scientificTagline: "قطره چشم ضدالتهاب با نقره کلوئیدی و هیالورونات",
|
||||
description: "قطره چشمی استریل با هیالورونات سدیم (مرطوبکننده و محافظ قرنیه) و نقره کلوئیدی (ضدالتهاب و ضدعفونیکننده). ایدهآل برای تمیز کردن چشمهای گرفته و گریان.",
|
||||
shortDescription: "قطره چشم ضدالتهاب برای تمیز کردن چشمهای گریان و گرفته.",
|
||||
@ -1162,7 +1162,7 @@ export const PRODUCTS: Product[] = [
|
||||
{
|
||||
id: "novagard-pfotenpflege",
|
||||
artNo: "NG0016",
|
||||
name: "Canina NovaGard Green Pfotenpflege",
|
||||
name: "Canina NovaGard Green Pfotenpflege (مراقبت پنجه)",
|
||||
scientificTagline: "کرم ۱۰۰٪ طبیعی برای ترمیم پنجههای ترک خورده",
|
||||
description: "کرم ۱۰۰٪ طبیعی با روغن پالپ سنجد دریایی (Sea Buckthorn)، روغن کالاندولا و پانتنول (پروویتامین B5) برای تسکین پوست خارشدار، التیام زخمها و خراشیدگی پنجه در تابستان و زمستان.",
|
||||
shortDescription: "کرم طبیعی پنجه با سنجد دریایی و کالاندولا برای زمستان و تابستان.",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user