parsa/canina
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

design: implement heuristic UX, WCAG accessibility, touch targets, and cognitive load enhancements

Browse Source
This commit is contained in:
پارسا آقایی 2026-07-10 18:42:11 +03:30
parent 756cb749b2
commit a74f4bda48
6 changed files with 85 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/application/app/page.tsx
View File

@ -3,6 +3,7 @@ import SmartAdvisor from "../components/SmartAdvisor";
import FeaturedProducts from "../components/FeaturedProducts"; import FeaturedProducts from "../components/FeaturedProducts";
import VetGallery from "../components/VetGallery"; import VetGallery from "../components/VetGallery";
import Link from 'next/link'; import Link from 'next/link';
import { toPersian } from "../lib/utils";
async function getHomeData() { async function getHomeData() {
try { try {
@ -73,7 +74,7 @@ export default async function Home() {
</div> </div>
<div> <div>
<div className="text-canino-blue text-xs font-bold uppercase tracking-[0.2em] mb-4">میراث ما از آلمان</div> <div className="text-canino-blue text-xs font-bold uppercase tracking-[0.2em] mb-4">میراث ما از آلمان</div>
<h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] mb-8"> <h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] mb-12">
چرا برند آلمانی Canino مرجع دامپزشکان است؟ چرا برند آلمانی Canino مرجع دامپزشکان است؟
</h2> </h2>
<div className="space-y-6"> <div className="space-y-6">
@ -82,9 +83,9 @@ export default async function Home() {
{ title: 'فاقد مواد نگهدارنده', desc: 'تمامی محصولات ۱۰۰٪ طبیعی و فاقد رنگ‌های مصنوعی و طعم‌دهنده‌های شیمیایی هستند.' }, { title: 'فاقد مواد نگهدارنده', desc: 'تمامی محصولات ۱۰۰٪ طبیعی و فاقد رنگ‌های مصنوعی و طعم‌دهنده‌های شیمیایی هستند.' },
{ title: 'تاییدیه اروپا', desc: 'مطابق با سخت‌گیرانه‌ترین استانداردهای ایمنی مواد غذایی و دارویی در اتحادیه اروپا.' } { title: 'تاییدیه اروپا', desc: 'مطابق با سخت‌گیرانه‌ترین استانداردهای ایمنی مواد غذایی و دارویی در اتحادیه اروپا.' }
].map((item, idx) => ( ].map((item, idx) => (
<div key={idx} className="flex gap-4"> <div key={idx} className="flex gap-4 items-center">
<div className="w-12 h-12 rounded-2xl bg-medical-gray-50 flex items-center justify-center flex-shrink-0 text-canino-blue font-bold"> <div className="w-12 h-12 rounded-2xl bg-medical-gray-50 flex items-center justify-center flex-shrink-0 text-canino-blue font-bold">
{idx + 1} {toPersian(idx + 1)}
</div> </div>
<div> <div>
<h4 className="text-lg font-bold text-medical-gray-900 mb-1">{item.title}</h4> <h4 className="text-lg font-bold text-medical-gray-900 mb-1">{item.title}</h4>

4
frontend/application/components/Header.tsx
View File

@ -130,7 +130,7 @@ export default function Header({
onMouseEnter={() => setIsMegaMenuOpen(true)} onMouseEnter={() => setIsMegaMenuOpen(true)}
onMouseLeave={() => setIsMegaMenuOpen(false)} onMouseLeave={() => setIsMegaMenuOpen(false)}
> >
<button className={`flex items-center gap-1.5 px-3 py-2 rounded-xl text-sm font-black transition-all whitespace-nowrap ${isMegaMenuOpen ? 'bg-medical-gray-50 text-canino-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canino-blue'} font-vazir`}> <button className={`flex items-center justify-center gap-1.5 px-4 py-3 rounded-xl text-sm font-black transition-all whitespace-nowrap focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none min-h-[48px] ${isMegaMenuOpen ? 'bg-medical-gray-50 text-canino-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canino-blue'} font-vazir`}>
راهکارهای درمانی راهکارهای درمانی
<ChevronDown className={`w-4 h-4 transition-transform duration-300 ${isMegaMenuOpen ? 'rotate-180' : ''}`} /> <ChevronDown className={`w-4 h-4 transition-transform duration-300 ${isMegaMenuOpen ? 'rotate-180' : ''}`} />
</button> </button>
@ -189,7 +189,7 @@ export default function Header({
<button <button
key={item.id} key={item.id}
onClick={item.action} onClick={item.action}
className={`px-3 py-2 rounded-xl text-sm font-black transition-all font-vazir whitespace-nowrap ${currentView === item.id ? 'bg-canino-blue/5 text-canino-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canino-blue'}`} className={`px-4 py-3 rounded-xl text-sm font-black transition-all font-vazir whitespace-nowrap focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none min-h-[48px] ${currentView === item.id ? 'bg-canino-blue/5 text-canino-blue' : 'text-medical-gray-600 hover:bg-medical-gray-50 hover:text-canino-blue'}`}
> >
{item.label} {item.label}
</button> </button>

2
frontend/application/components/HeaderButton.tsx
View File

@ -20,7 +20,7 @@ export default function HeaderButton({
badge, badge,
icon icon
}: HeaderButtonProps) { }: HeaderButtonProps) {
const baseStyles = "relative flex flex-col items-center justify-center rounded-xl transition-all duration-300 font-vazir select-none cursor-pointer overflow-visible"; const baseStyles = "relative flex flex-col items-center justify-center rounded-xl transition-all duration-300 font-vazir select-none cursor-pointer overflow-visible focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none";
const variants = { const variants = {
primary: "bg-canino-blue text-white hover:bg-medical-gray-900 shadow-lg shadow-canino-blue/20", primary: "bg-canino-blue text-white hover:bg-medical-gray-900 shadow-lg shadow-canino-blue/20",

72
frontend/application/components/Hero.tsx
View File

@ -80,7 +80,7 @@ export default function Hero({ banners = [] }: { banners?: any[] }) {
<div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-medical-gray-500 rounded-full blur-[100px] -ml-40 -mb-40" /> <div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-medical-gray-500 rounded-full blur-[100px] -ml-40 -mb-40" />
</div> </div>
<div className="max-w-7xl mx-auto px-4 relative flex flex-col lg:flex-row items-center gap-12"> <div className="max-w-7xl mx-auto px-4 relative flex flex-col lg:flex-row items-center gap-12 mb-16 lg:mb-20">
{/* Content */} {/* Content */}
<div className="lg:w-1/2 text-center lg:text-right"> <div className="lg:w-1/2 text-center lg:text-right">
<motion.div <motion.div
@ -113,51 +113,19 @@ export default function Hero({ banners = [] }: { banners?: any[] }) {
element.scrollIntoView({ behavior: 'smooth' }); element.scrollIntoView({ behavior: 'smooth' });
} }
}} }}
className="bg-medical-gray-900 text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-canino-blue hover:shadow-2xl transition-all flex items-center gap-2 group font-vazir" className="bg-medical-gray-900 text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-canino-blue hover:shadow-2xl focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all flex items-center gap-2 group font-vazir min-h-[48px]"
> >
{getText('hero_btn_advisor', "دستیار سلامت پت")} {getText('hero_btn_advisor', "دستیار سلامت پت")}
<ChevronLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" /> <ChevronLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
</button> </button>
<button <button
onClick={() => router.push('/shop')} onClick={() => router.push('/shop')}
className="bg-white border-2 border-medical-gray-200 text-medical-gray-700 px-10 py-5 rounded-full font-bold text-lg hover:border-canino-blue hover:text-canino-blue transition-all font-vazir" className="bg-white border-2 border-medical-gray-200 text-medical-gray-700 px-10 py-5 rounded-full font-bold text-lg hover:border-canino-blue hover:text-canino-blue focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all font-vazir min-h-[48px]"
> >
{getText('hero_btn_products', "مشاهده محصولات")} {getText('hero_btn_products', "مشاهده محصولات")}
</button> </button>
</div> </div>
</motion.div> </motion.div>
{/* Stats */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ delay: 0.8, duration: 0.6 }}
className="grid grid-cols-3 gap-8 mt-16 pt-8 border-t border-medical-gray-100"
>
<div className="flex flex-col items-center lg:items-end">
<Typewriter text={getText('hero_stat_founded', "۱۹۸۴ سال تأسیس")} />
</div>
<div className="flex flex-col items-center lg:items-end">
<StatCounter target={40} />
<div className="text-xs text-medical-gray-500 font-bold uppercase tracking-tight mt-3 font-vazir">{getText('hero_stat_agencies', "نمایندگی فعال")}</div>
</div>
<div className="flex flex-col items-center lg:items-end">
<div className="relative overflow-hidden group">
<motion.div
className="text-4xl lg:text-6xl font-black text-canino-blue font-vazir relative z-10"
>
۱۰۰٪
</motion.div>
<motion.div
initial={{ x: "-100%" }}
animate={{ x: "200%" }}
transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-12 z-20 pointer-events-none"
/>
</div>
<div className="text-xs text-medical-gray-500 font-bold uppercase tracking-tight mt-3 font-vazir">{getText('hero_stat_german_formula', "فرمول آلمانی")}</div>
</div>
</motion.div>
</div> </div>
{/* Visual Element */} {/* Visual Element */}
@ -195,6 +163,40 @@ export default function Hero({ banners = [] }: { banners?: any[] }) {
</motion.div> </motion.div>
</div> </div>
</div> </div>
{/* Stats - Centered, full-width row under Hero content to decrease cognitive load */}
<div className="max-w-7xl mx-auto px-4 relative">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.6 }}
className="grid grid-cols-1 md:grid-cols-3 gap-8 py-12 border-t border-medical-gray-150"
>
<div className="flex flex-col items-center justify-center text-center">
<Typewriter text={getText('hero_stat_founded', "۱۹۸۴ سال تأسیس")} />
</div>
<div className="flex flex-col items-center justify-center text-center">
<StatCounter target={40} />
<div className="text-sm text-medical-gray-600 font-extrabold uppercase tracking-tight mt-3 font-vazir">{getText('hero_stat_agencies', "نمایندگی فعال")}</div>
</div>
<div className="flex flex-col items-center justify-center text-center">
<div className="relative overflow-hidden group">
<motion.div
className="text-4xl lg:text-6xl font-black text-canino-blue font-vazir relative z-10"
>
۱۰۰٪
</motion.div>
<motion.div
initial={{ x: "-100%" }}
animate={{ x: "200%" }}
transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-12 z-20 pointer-events-none"
/>
</div>
<div className="text-sm text-medical-gray-600 font-extrabold uppercase tracking-tight mt-3 font-vazir">{getText('hero_stat_german_formula', "فرمول آلمانی")}</div>
</div>
</motion.div>
</div>
</section> </section>
); );
} }

52
frontend/application/components/SmartAdvisor.tsx
View File

@ -101,7 +101,7 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
<span className="text-canino-blue text-xs font-black uppercase tracking-widest font-vazir">تکنولوژی پایش هوشمند</span> <span className="text-canino-blue text-xs font-black uppercase tracking-widest font-vazir">تکنولوژی پایش هوشمند</span>
</motion.div> </motion.div>
<h2 className="text-4xl lg:text-5xl font-black text-medical-gray-900 mb-4 font-vazir italic">دستیار سلامت کانی‌نو</h2> <h2 className="text-4xl lg:text-5xl font-black text-medical-gray-900 mb-4 font-vazir italic">دستیار سلامت کانی‌نو</h2>
<p className="text-medical-gray-500 font-bold text-lg font-vazir">فقط چند قدم تا صدور شناسنامه هوشمند و دریافت پیشنهادات تخصصی</p> <p className="text-medical-gray-600 font-bold text-lg font-vazir">فقط چند قدم تا صدور شناسنامه هوشمند و دریافت پیشنهادات تخصصی</p>
</div> </div>
<div className="bg-medical-gray-50 rounded-[3.5rem] border border-medical-gray-100 p-8 lg:p-12 shadow-2xl shadow-medical-gray-200/50 relative overflow-hidden"> <div className="bg-medical-gray-50 rounded-[3.5rem] border border-medical-gray-100 p-8 lg:p-12 shadow-2xl shadow-medical-gray-200/50 relative overflow-hidden">
@ -126,20 +126,20 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
> >
<div className="text-center"> <div className="text-center">
<h3 className="text-2xl font-black text-medical-gray-900 mb-2 font-vazir uppercase italic tracking-tight">گام اول: هویت بصری</h3> <h3 className="text-2xl font-black text-medical-gray-900 mb-2 font-vazir uppercase italic tracking-tight">گام اول: هویت بصری</h3>
<p className="text-medical-gray-400 font-bold font-vazir">همدم شما رو با چه اسمی صدا می‌زنید؟</p> <p className="text-medical-gray-600 font-bold font-vazir">همدم شما رو با چه اسمی صدا می‌زنید؟</p>
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<button <button
onClick={() => setType("سگ")} onClick={() => setType("سگ")}
className={`flex flex-col items-center gap-4 p-8 rounded-[2.5rem] border-4 transition-all ${type === "سگ" ? 'border-canino-blue bg-white shadow-xl shadow-canino-blue/10 scale-105' : 'border-transparent bg-white/50 text-medical-gray-300 hover:bg-white'}`} className={`flex flex-col items-center gap-4 p-8 rounded-[2.5rem] border-4 transition-all focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none ${type === "سگ" ? 'border-canino-blue bg-white shadow-xl shadow-canino-blue/10 scale-105' : 'border-transparent bg-white/50 text-medical-gray-400 hover:bg-white'}`}
> >
<Dog className={`w-12 h-12 ${type === "سگ" ? 'text-canino-blue' : 'text-current'}`} /> <Dog className={`w-12 h-12 ${type === "سگ" ? 'text-canino-blue' : 'text-current'}`} />
<span className="text-lg font-black font-vazir">سگ</span> <span className="text-lg font-black font-vazir">سگ</span>
</button> </button>
<button <button
onClick={() => setType("گربه")} onClick={() => setType("گربه")}
className={`flex flex-col items-center gap-4 p-8 rounded-[2.5rem] border-4 transition-all ${type === "گربه" ? 'border-canino-blue bg-white shadow-xl shadow-canino-blue/10 scale-105' : 'border-transparent bg-white/50 text-medical-gray-300 hover:bg-white'}`} className={`flex flex-col items-center gap-4 p-8 rounded-[2.5rem] border-4 transition-all focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none ${type === "گربه" ? 'border-canino-blue bg-white shadow-xl shadow-canino-blue/10 scale-105' : 'border-transparent bg-white/50 text-medical-gray-400 hover:bg-white'}`}
> >
<Cat className={`w-12 h-12 ${type === "گربه" ? 'text-canino-blue' : 'text-current'}`} /> <Cat className={`w-12 h-12 ${type === "گربه" ? 'text-canino-blue' : 'text-current'}`} />
<span className="text-lg font-black font-vazir">گربه</span> <span className="text-lg font-black font-vazir">گربه</span>
@ -148,23 +148,23 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
<div className="grid md:grid-cols-2 gap-6"> <div className="grid md:grid-cols-2 gap-6">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-black text-medical-gray-400 pr-2">نام پت</label> <label className="text-xs font-black text-medical-gray-600 pr-2">نام پت</label>
<input <input
type="text" type="text"
value={name} value={name}
onChange={e => setName(e.target.value)} onChange={e => setName(e.target.value)}
placeholder="لوسی، تدی..." placeholder="لوسی، تدی..."
className="w-full bg-white border border-medical-gray-200 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-canino-blue/20 outline-none font-black text-lg font-vazir" className="w-full bg-white border border-medical-gray-300 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-canino-blue/30 focus-visible:ring-4 focus-visible:ring-canino-blue/40 outline-none font-black text-lg font-vazir placeholder-medical-gray-500 text-medical-gray-900"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-xs font-black text-medical-gray-400 pr-2">نژاد</label> <label className="text-xs font-black text-medical-gray-600 pr-2">نژاد</label>
<input <input
type="text" type="text"
value={breed} value={breed}
onChange={e => setBreed(e.target.value)} onChange={e => setBreed(e.target.value)}
placeholder="ژرمن، پرشین..." placeholder="ژرمن، پرشین..."
className="w-full bg-white border border-medical-gray-200 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-canino-blue/20 outline-none font-bold font-vazir" className="w-full bg-white border border-medical-gray-300 rounded-2xl py-4 px-6 focus:ring-2 focus:ring-canino-blue/30 focus-visible:ring-4 focus-visible:ring-canino-blue/40 outline-none font-bold font-vazir placeholder-medical-gray-500 text-medical-gray-900"
/> />
</div> </div>
</div> </div>
@ -172,7 +172,7 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
<button <button
onClick={handleNext} onClick={handleNext}
disabled={!name || !breed} disabled={!name || !breed}
className="w-full py-6 bg-medical-gray-900 text-white rounded-3xl font-black text-lg hover:bg-canino-blue transition-all shadow-xl shadow-medical-gray-900/10 flex items-center justify-center gap-3 font-vazir disabled:bg-medical-gray-200 disabled:text-medical-gray-500 disabled:cursor-not-allowed disabled:shadow-none" className="w-full py-6 bg-medical-gray-900 text-white rounded-3xl font-black text-lg hover:bg-canino-blue focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all shadow-xl shadow-medical-gray-900/10 flex items-center justify-center gap-3 font-vazir disabled:bg-medical-gray-200 disabled:text-medical-gray-500 disabled:cursor-not-allowed disabled:shadow-none min-h-[48px]"
> >
ثبت هویت و ادامه ثبت هویت و ادامه
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />
@ -195,36 +195,36 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
> >
<div className="text-center"> <div className="text-center">
<h3 className="text-2xl font-black text-medical-gray-900 mb-2 font-vazir uppercase italic tracking-tight">گام دوم: پایش فیزیکی</h3> <h3 className="text-2xl font-black text-medical-gray-900 mb-2 font-vazir uppercase italic tracking-tight">گام دوم: پایش فیزیکی</h3>
<p className="text-medical-gray-400 font-bold font-vazir">اطلاعات فیزیکی دقیق به دوزبندی صحیح مکمل‌ها کمک می‌کند</p> <p className="text-medical-gray-600 font-bold font-vazir">اطلاعات فیزیکی دقیق به دوزبندی صحیح مکمل‌ها کمک می‌کند</p>
</div> </div>
<div className="grid grid-cols-2 gap-6"> <div className="grid grid-cols-2 gap-6">
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-center text-xs font-black text-medical-gray-400 uppercase tracking-widest font-vazir">سن (سال)</label> <label className="block text-center text-xs font-black text-medical-gray-600 uppercase tracking-widest font-vazir">سن (سال)</label>
<div className="flex items-center gap-4 bg-white rounded-3xl p-2 border border-medical-gray-200"> <div className="flex items-center gap-4 bg-white rounded-3xl p-2 border border-medical-gray-200">
<button onClick={() => setAge(Math.max(0, age - 1))} className="w-10 h-10 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white transition-all shadow-sm">-</button> <button onClick={() => setAge(Math.max(0, age - 1))} className="w-12 h-12 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white focus-visible:ring-2 focus-visible:ring-canino-blue focus-visible:outline-none transition-all shadow-sm font-black text-lg">-</button>
<span className="flex-1 text-center text-2xl font-black text-canino-blue font-vazir">{toPersian(age.toString())}</span> <span className="flex-1 text-center text-2xl font-black text-canino-blue font-vazir">{toPersian(age.toString())}</span>
<button onClick={() => setAge(age + 1)} className="w-10 h-10 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white transition-all shadow-sm">+</button> <button onClick={() => setAge(age + 1)} className="w-12 h-12 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white focus-visible:ring-2 focus-visible:ring-canino-blue focus-visible:outline-none transition-all shadow-sm font-black text-lg">+</button>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-center text-xs font-black text-medical-gray-400 uppercase tracking-widest font-vazir">وزن (کیلوگرم)</label> <label className="block text-center text-xs font-black text-medical-gray-600 uppercase tracking-widest font-vazir">وزن (کیلوگرم)</label>
<div className="flex items-center gap-4 bg-white rounded-3xl p-2 border border-medical-gray-200"> <div className="flex items-center gap-4 bg-white rounded-3xl p-2 border border-medical-gray-200">
<button onClick={() => setWeight(Math.max(1, weight - 1))} className="w-10 h-10 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white transition-all shadow-sm">-</button> <button onClick={() => setWeight(Math.max(1, weight - 1))} className="w-12 h-12 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white focus-visible:ring-2 focus-visible:ring-canino-blue focus-visible:outline-none transition-all shadow-sm font-black text-lg">-</button>
<span className="flex-1 text-center text-2xl font-black text-canino-blue font-vazir">{toPersian(weight.toString())}</span> <span className="flex-1 text-center text-2xl font-black text-canino-blue font-vazir">{toPersian(weight.toString())}</span>
<button onClick={() => setWeight(weight + 1)} className="w-10 h-10 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white transition-all shadow-sm">+</button> <button onClick={() => setWeight(weight + 1)} className="w-12 h-12 flex items-center justify-center bg-medical-gray-50 rounded-xl text-medical-gray-900 hover:bg-canino-blue hover:text-white focus-visible:ring-2 focus-visible:ring-canino-blue focus-visible:outline-none transition-all shadow-sm font-black text-lg">+</button>
</div> </div>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<label className="block text-center text-xs font-black text-medical-gray-400 uppercase tracking-widest font-vazir">سطح فعالیت روزانه</label> <label className="block text-center text-xs font-black text-medical-gray-600 uppercase tracking-widest font-vazir">سطح فعالیت روزانه</label>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
{["کم", "متوسط", "زیاد"].map(level => ( {["کم", "متوسط", "زیاد"].map(level => (
<button <button
key={level} key={level}
onClick={() => setActivityLevel(level as any)} onClick={() => setActivityLevel(level as any)}
className={`py-4 rounded-2xl border-2 transition-all font-black italic ${activityLevel === level ? 'border-canino-blue bg-white text-canino-blue shadow-lg' : 'border-transparent bg-white/50 text-medical-gray-400 hover:bg-white'}`} className={`py-4 rounded-2xl border-2 transition-all font-black italic focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none min-h-[48px] ${activityLevel === level ? 'border-canino-blue bg-white text-canino-blue shadow-lg' : 'border-transparent bg-white/50 text-medical-gray-500 hover:bg-white'}`}
> >
{level} {level}
</button> </button>
@ -235,14 +235,14 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
<div className="flex gap-4 pt-4"> <div className="flex gap-4 pt-4">
<button <button
onClick={handleBack} onClick={handleBack}
className="flex-1 py-6 bg-medical-gray-100 text-medical-gray-500 rounded-3xl font-black text-lg hover:bg-medical-gray-200 transition-all flex items-center justify-center gap-3 font-vazir" className="flex-1 py-6 bg-medical-gray-100 text-medical-gray-600 rounded-3xl font-black text-lg hover:bg-medical-gray-200 focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all flex items-center justify-center gap-3 font-vazir min-h-[48px]"
> >
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />
قبلی قبلی
</button> </button>
<button <button
onClick={handleNext} onClick={handleNext}
className="flex-[2] py-6 bg-medical-gray-900 text-white rounded-3xl font-black text-lg hover:bg-canino-blue transition-all shadow-xl shadow-medical-gray-900/10 flex items-center justify-center gap-3 font-vazir" className="flex-[2] py-6 bg-medical-gray-900 text-white rounded-3xl font-black text-lg hover:bg-canino-blue focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all shadow-xl shadow-medical-gray-900/10 flex items-center justify-center gap-3 font-vazir min-h-[48px]"
> >
گام نهایی سلامت گام نهایی سلامت
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />
@ -261,7 +261,7 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
> >
<div className="text-center"> <div className="text-center">
<h3 className="text-2xl font-black text-medical-gray-900 mb-2 font-vazir uppercase italic tracking-tight">گام آخر: سوابق و حساسیت‌ها</h3> <h3 className="text-2xl font-black text-medical-gray-900 mb-2 font-vazir uppercase italic tracking-tight">گام آخر: سوابق و حساسیت‌ها</h3>
<p className="text-medical-gray-400 font-bold font-vazir">در صورت وجود هر یک از موارد زیر، آن را تیک بزنید</p> <p className="text-medical-gray-600 font-bold font-vazir">در صورت وجود هر یک از موارد زیر، آن را تیک بزنید</p>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
@ -273,12 +273,12 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
prev.includes(opt.condition) ? prev.filter(c => c !== opt.condition) : [...prev, opt.condition] prev.includes(opt.condition) ? prev.filter(c => c !== opt.condition) : [...prev, opt.condition]
); );
}} }}
className={`flex items-center gap-4 p-5 rounded-2xl border-2 transition-all text-right ${medicalConditions.includes(opt.condition) ? 'border-canino-blue bg-white shadow-md' : 'border-transparent bg-white/50 text-medical-gray-500 hover:bg-white'}`} className={`flex items-center gap-4 p-5 rounded-2xl border-2 transition-all text-right focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none min-h-[48px] ${medicalConditions.includes(opt.condition) ? 'border-canino-blue bg-white shadow-md' : 'border-transparent bg-white/50 text-medical-gray-600 hover:bg-white'}`}
> >
<div className={`w-8 h-8 rounded-lg flex items-center justify-center border ${medicalConditions.includes(opt.condition) ? 'bg-canino-blue border-canino-blue text-white' : 'border-medical-gray-200 text-transparent'}`}> <div className={`w-8 h-8 rounded-lg flex items-center justify-center border ${medicalConditions.includes(opt.condition) ? 'bg-canino-blue border-canino-blue text-white' : 'border-medical-gray-300 text-transparent'}`}>
<ShieldCheck className="w-5 h-5" /> <ShieldCheck className="w-5 h-5" />
</div> </div>
<span className={`text-sm font-black font-vazir ${medicalConditions.includes(opt.condition) ? 'text-canino-blue' : 'text-medical-gray-700'}`}>{opt.label}</span> <span className={`text-sm font-black font-vazir ${medicalConditions.includes(opt.condition) ? 'text-canino-blue' : 'text-medical-gray-900'}`}>{opt.label}</span>
</button> </button>
))} ))}
</div> </div>
@ -286,14 +286,14 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
<div className="flex gap-4 pt-4"> <div className="flex gap-4 pt-4">
<button <button
onClick={handleBack} onClick={handleBack}
className="flex-1 py-6 bg-medical-gray-100 text-medical-gray-500 rounded-3xl font-black text-lg hover:bg-medical-gray-200 transition-all flex items-center justify-center gap-3 font-vazir" className="flex-1 py-6 bg-medical-gray-100 text-medical-gray-600 rounded-3xl font-black text-lg hover:bg-medical-gray-200 focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all flex items-center justify-center gap-3 font-vazir min-h-[48px]"
> >
<ChevronRight className="w-5 h-5" /> <ChevronRight className="w-5 h-5" />
قبلی قبلی
</button> </button>
<button <button
onClick={handleSubmit} onClick={handleSubmit}
className="flex-[2] py-6 bg-canino-blue text-white rounded-3xl font-black text-lg hover:bg-indigo-700 transition-all shadow-xl shadow-canino-blue/20 flex items-center justify-center gap-3 font-vazir" className="flex-[2] py-6 bg-canino-blue text-white rounded-3xl font-black text-lg hover:bg-indigo-700 focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none transition-all shadow-xl shadow-canino-blue/20 flex items-center justify-center gap-3 font-vazir min-h-[48px]"
> >
تکمیل و صدور شناسنامه تکمیل و صدور شناسنامه
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />

6
frontend/application/components/VetGallery.tsx
View File

@ -66,11 +66,11 @@ export default function VetGallery({ testimonials = [] }: { testimonials?: any[]
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{displayItems.map((video: any, index: number) => ( {displayItems.map((video: any, index: number) => (
<motion.div <motion.button
key={video.id} key={video.id}
whileHover={{ y: -8 }} whileHover={{ y: -8 }}
onClick={() => setSelectedVideo(video)} onClick={() => setSelectedVideo(video)}
className="group cursor-pointer" className="w-full text-right block group cursor-pointer focus-visible:ring-4 focus-visible:ring-canino-blue/30 focus-visible:outline-none rounded-[2rem] p-2"
> >
<div className="relative aspect-video rounded-[2rem] overflow-hidden mb-4 shadow-xl"> <div className="relative aspect-video rounded-[2rem] overflow-hidden mb-4 shadow-xl">
<div className="absolute inset-0 bg-medical-gray-900/20 group-hover:bg-transparent transition-colors z-10" /> <div className="absolute inset-0 bg-medical-gray-900/20 group-hover:bg-transparent transition-colors z-10" />
@ -96,7 +96,7 @@ export default function VetGallery({ testimonials = [] }: { testimonials?: any[]
<ShieldCheck className="w-4 h-4 text-canino-blue" /> <ShieldCheck className="w-4 h-4 text-canino-blue" />
{video.doctor || video.vetName} {video.doctor || video.vetName}
</div> </div>
</motion.div> </motion.button>
))} ))}
</div> </div>
</div> </div>