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

feat: complete homepage UI/UX redesign including Hero buttons, stats icons, SmartAdvisor selectors, balanced dual cards, and VetGallery duplicate thumbnails fix

Browse Source
This commit is contained in:
parsa aghaei 2026-07-14 20:25:40 +03:30
parent 1b0d6f5e06
commit 452e3d49ee
6 changed files with 115 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -32,11 +32,11 @@ export default function Home() {
<VetGallery testimonials={testimonials} /> <VetGallery testimonials={testimonials} />
{/* Navigation to Sections */} {/* Navigation to Sections */}
<section className="py-20 bg-medical-gray-50 border-y border-medical-gray-100 font-sans"> <section className="py-12 bg-medical-gray-50 border-y border-medical-gray-100 font-sans">
<div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-8"> <div className="max-w-7xl mx-auto px-4 grid md:grid-cols-2 gap-8">
<Link <Link
href="/shop" href="/shop"
className="bg-white p-12 rounded-[3.5rem] border border-medical-gray-200 shadow-sm hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block" className="bg-white p-12 rounded-[2.5rem] border border-medical-gray-250 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block"
> >
<h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors font-lalezar tracking-wide"> <h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors font-lalezar tracking-wide">
{getText('nav_card_shop_title', "فروشگاه تخصصی")} {getText('nav_card_shop_title', "فروشگاه تخصصی")}
@ -51,12 +51,12 @@ export default function Home() {
</Link> </Link>
<Link <Link
href="/wiki" href="/wiki"
className="bg-medical-gray-900 p-12 rounded-[3.5rem] text-white hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block" className="bg-white p-12 rounded-[2.5rem] border border-medical-gray-250 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block"
> >
<h3 className="text-3xl font-black mb-4 group-hover:text-canina-blue transition-colors font-lalezar tracking-wide"> <h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors font-lalezar tracking-wide">
{getText('nav_card_wiki_title', "دانشنامه علمی")} {getText('nav_card_wiki_title', "دانشنامه علمی")}
</h3> </h3>
<p className="text-white/60 mb-8 leading-relaxed font-shabnam"> <p className="text-medical-gray-500 mb-8 leading-relaxed font-shabnam">
{getText('nav_card_wiki_desc', "آشنایی با ترکیبات نایاب و استانداردهای دارویی محصولات آلمانی کانینا.")} {getText('nav_card_wiki_desc', "آشنایی با ترکیبات نایاب و استانداردهای دارویی محصولات آلمانی کانینا.")}
</p> </p>
<div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs font-vazir"> <div className="flex items-center gap-2 text-canina-blue font-black tracking-widest uppercase text-xs font-vazir">
@ -68,7 +68,7 @@ export default function Home() {
</section> </section>
{/* About Section Teaser */} {/* About Section Teaser */}
<section className="py-24 bg-white overflow-hidden font-sans"> <section className="py-16 bg-white overflow-hidden font-sans">
<div className="max-w-7xl mx-auto px-4 grid lg:grid-cols-2 gap-16 lg:gap-24 items-center"> <div className="max-w-7xl mx-auto px-4 grid lg:grid-cols-2 gap-16 lg:gap-24 items-center">
<div className="relative"> <div className="relative">
<div className="absolute -top-10 -right-10 w-40 h-40 bg-canina-blue/5 rounded-full blur-3xl" /> <div className="absolute -top-10 -right-10 w-40 h-40 bg-canina-blue/5 rounded-full blur-3xl" />
@ -77,7 +77,7 @@ export default function Home() {
alt="Laboratory" alt="Laboratory"
className="rounded-[3rem] shadow-2xl relative z-10 grayscale-[10%]" className="rounded-[3rem] shadow-2xl relative z-10 grayscale-[10%]"
/> />
<div className="absolute -bottom-6 -left-6 bg-canina-blue text-white p-8 rounded-3xl shadow-xl z-20"> <div className="absolute -bottom-6 -left-6 bg-canina-blue text-white p-8 rounded-[2rem] shadow-xl z-20">
<div className="text-4xl font-black mb-1 font-lalezar tracking-wide">{getText('quality', "کیفیت")}</div> <div className="text-4xl font-black mb-1 font-lalezar tracking-wide">{getText('quality', "کیفیت")}</div>
<div className="text-xs uppercase tracking-widest font-bold opacity-80 font-vazir">{getText('ultra_pharmaceutical', "استانداردهای فوق‌دارویی")}</div> <div className="text-xs uppercase tracking-widest font-bold opacity-80 font-vazir">{getText('ultra_pharmaceutical', "استانداردهای فوق‌دارویی")}</div>
</div> </div>
@ -111,7 +111,7 @@ export default function Home() {
</section> </section>
{/* Call to Action */} {/* Call to Action */}
<section className="bg-canina-blue py-20 relative overflow-hidden font-sans"> <section className="bg-canina-blue py-12 relative overflow-hidden font-sans">
<div className="absolute inset-0 opacity-10"> <div className="absolute inset-0 opacity-10">
<div className="grid grid-cols-10 h-full w-full"> <div className="grid grid-cols-10 h-full w-full">
{Array.from({length: 100}).map((_, i) => ( {Array.from({length: 100}).map((_, i) => (

79
frontend/application/components/FeaturedProducts.tsx
View File

@ -10,10 +10,14 @@ import { ProductCardSkeleton } from "./Skeleton";
import Link from 'next/link'; import Link from 'next/link';
import { useSettingsStore } from "../lib/store/settingsStore"; import { useSettingsStore } from "../lib/store/settingsStore";
import { useCartStore } from "../lib/store/cartStore";
function ProductCard({ product, onClick }: { product: Product; key?: string | number; onClick: (p: Product) => void }) { function ProductCard({ product, onClick }: { product: Product; key?: string | number; onClick: (p: Product) => void }) {
const router = useRouter();
const getText = useSettingsStore(state => state.getText); const getText = useSettingsStore(state => state.getText);
const { getActivePet } = usePetStore(); const { getActivePet } = usePetStore();
const activePet = getActivePet(); const activePet = getActivePet();
const { addItem } = useCartStore();
const compatibility = useMemo(() => { const compatibility = useMemo(() => {
if (!activePet) return null; if (!activePet) return null;
@ -30,7 +34,6 @@ function ProductCard({ product, onClick }: { product: Product; key?: string | nu
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }} viewport={{ once: true }}
transition={{ duration: 0.5 }} transition={{ duration: 0.5 }}
onClick={() => onClick(product)}
className="group bg-white rounded-3xl border border-medical-gray-200 overflow-hidden hover:shadow-2xl hover:shadow-canina-blue/10 transition-all duration-500 flex flex-col h-full cursor-pointer relative" className="group bg-white rounded-3xl border border-medical-gray-200 overflow-hidden hover:shadow-2xl hover:shadow-canina-blue/10 transition-all duration-500 flex flex-col h-full cursor-pointer relative"
> >
{compatibility && ( {compatibility && (
@ -54,41 +57,64 @@ function ProductCard({ product, onClick }: { product: Product; key?: string | nu
{product.category} {product.category}
</div> </div>
{/* Hover Actions */} {/* Main PDP Link */}
<Link href={`/shop/${product.slug || product.id}`} className="absolute inset-0 z-10" /> <Link href={`/shop/${product.slug || product.id}`} className="absolute inset-0 z-10" />
<div className="absolute inset-0 bg-canina-blue/60 opacity-0 group-hover:opacity-100 backdrop-blur-sm transition-all duration-300 flex items-center justify-center gap-4">
<div className="w-12 h-12 rounded-full bg-white text-canina-blue flex items-center justify-center hover:scale-110 transition-transform shadow-lg"> {/* Hover Actions (z-20 to be clickable over the main PDP link) */}
<div className="absolute inset-0 bg-canina-blue/60 opacity-0 group-hover:opacity-100 backdrop-blur-sm transition-all duration-300 flex items-center justify-center gap-4 z-20">
<div
onClick={(e) => {
e.stopPropagation();
router.push(`/shop/${product.slug || product.id}`);
}}
className="w-12 h-12 rounded-full bg-white text-canina-blue flex items-center justify-center hover:scale-110 transition-transform shadow-lg cursor-pointer"
>
<Eye className="w-5 h-5" /> <Eye className="w-5 h-5" />
</div> </div>
<div className="w-12 h-12 rounded-full bg-canina-blue text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg border border-white/20"> <div
onClick={(e) => {
e.stopPropagation();
addItem(product, 1);
toast.success(`${product.name} به سبد خرید شما اضافه شد.`);
}}
className="w-12 h-12 rounded-full bg-canina-blue text-white flex items-center justify-center hover:scale-110 transition-transform shadow-lg border border-white/20 cursor-pointer"
>
<ShoppingCart className="w-5 h-5" /> <ShoppingCart className="w-5 h-5" />
</div> </div>
</div> </div>
</div> </div>
{/* Content Area */} {/* Content Area */}
<div className="p-8 flex flex-col flex-1"> <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"> <div className="flex items-start justify-between mb-4 gap-2">
<h3 dir="ltr" className="text-xl font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors leading-tight text-left"> <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">
{product.name} {product.name}
</h3> </h3>
<ShieldCheck className="w-6 h-6 text-canina-blue flex-shrink-0" /> <ShieldCheck className="w-6 h-6 text-canina-blue flex-shrink-0" />
</div> </div>
<p className="text-sm text-medical-gray-500 leading-relaxed mb-6 flex-1"> <p className="text-sm text-medical-gray-500 leading-relaxed mb-6 flex-1 line-clamp-2">
{product.description} {product.shortDescription || product.description}
</p> </p>
<div className="space-y-4 pt-4 border-t border-medical-gray-100"> <div className="space-y-4 pt-4 border-t border-medical-gray-100 mt-auto">
{product.benefits && (
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="w-1 h-1 rounded-full bg-canina-blue" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue" />
<span className="text-xs font-semibold text-medical-gray-700 italic">{product.benefits}</span> <span className="text-xs font-semibold text-medical-gray-700 italic">{product.benefits}</span>
</div> </div>
)}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-xl font-black text-medical-gray-900 font-vazir">{product.price}</div> <div className="text-lg font-black text-medical-gray-900 font-vazir whitespace-nowrap">{product.price}</div>
<button className="text-xs font-black text-canina-blue uppercase tracking-widest border-b-2 border-canina-blue pb-1 hover:text-medical-gray-900 hover:border-medical-gray-900 transition-all"> <button
{getText('product_view_details', "مشاهده جزییات")} onClick={(e) => {
e.stopPropagation();
router.push(`/shop/${product.slug || product.id}`);
}}
className="text-xs font-black text-canina-blue uppercase tracking-widest border-b-2 border-canina-blue pb-1 hover:text-medical-gray-900 hover:border-medical-gray-900 transition-all whitespace-nowrap"
>
{getText('product_view_details', "مشاهده جزئیات")}
</button> </button>
</div> </div>
</div> </div>
@ -122,33 +148,28 @@ export default function FeaturedProducts() {
}, []); }, []);
return ( return (
<section className="py-24 bg-medical-gray-50"> <section className="py-16 bg-medical-gray-50">
<div className="max-w-7xl mx-auto px-4"> <div className="max-w-7xl mx-auto px-4">
<div className="flex flex-col lg:flex-row items-end justify-between mb-16 gap-6"> {/* Header - Correct RTL alignment with primary and secondary elements */}
<div className="lg:w-2/3"> <div className="flex items-center justify-between w-full mb-12 pb-6 border-b border-medical-gray-200">
<div className="text-canina-blue text-xs font-bold uppercase tracking-[0.2em] mb-4 font-vazir">{getText('featured_badge', "بیشترین انتخاب توسط دامپزشکان")}</div> <div>
<h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] font-lalezar tracking-wide"> <div className="text-canina-blue text-xs font-bold uppercase tracking-[0.2em] mb-2 font-vazir">{getText('featured_badge', "بیشترین انتخاب توسط دامپزشکان")}</div>
{getText('featured_title_line1', "محصولات برگزیده و راهکارهای")} <br /> <h2 className="text-2xl md:text-3xl lg:text-4xl font-black text-medical-gray-900 font-lalezar tracking-wide">
<span className="text-canina-blue">{getText('featured_title_line2', "درمان تخصصی")}</span> {getText('featured_title_line1', "محصولات برگزیده و راهکارهای")} <span className="text-canina-blue">{getText('featured_title_line2', "درمان تخصصی")}</span>
</h2> </h2>
</div> </div>
<div className="lg:w-1/3 text-left lg:text-right">
<p className="text-medical-gray-500 text-sm leading-relaxed mb-4">
{getText('featured_desc', "محصولات دارویی کانینا با استفاده از دانش پیشرفته بیوتکنولوژی و مواد اولیه ارگانیک نایاب فرآوری شده‌اند.")}
</p>
<button <button
onClick={() => router.push('/shop')} onClick={() => router.push('/shop')}
className="inline-flex items-center gap-2 text-canina-blue font-bold text-sm hover:translate-x-1 transition-transform rtl:hover:-translate-x-1" className="inline-flex items-center gap-2 text-canina-blue font-black text-sm hover:translate-x-1 transition-all group font-vazir"
> >
{getText('featured_view_all', "مشاهده تمامی محصولات")} {getText('featured_view_all', "مشاهده تمامی محصولات")}
<span className="text-lg">←</span> <span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
</button> </button>
</div> </div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10">
{isLoading ? ( {isLoading ? (
Array.from({ length: 3 }).map((_, i) => <ProductCardSkeleton key={i} />) Array.from({ length: 4 }).map((_, i) => <ProductCardSkeleton key={i} />)
) : products.length > 0 ? ( ) : products.length > 0 ? (
products.map((p) => ( products.map((p) => (
<ProductCard key={p.id} onClick={(p) => router.push(`/shop/${p.slug || p.id}`)} product={p} /> <ProductCard key={p.id} onClick={(p) => router.push(`/shop/${p.slug || p.id}`)} product={p} />

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

@ -38,7 +38,7 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
{/* Quick Links */} {/* Quick Links */}
<div className="space-y-8"> <div className="space-y-8">
<h4 className="text-lg font-black text-canina-blue italic underline decoration-white/20 underline-offset-8">{getText('footer_links_title', "دسترسی سریع")}</h4> <h4 className="text-lg font-black text-canina-blue italic underline decoration-white/20 underline-offset-8">{getText('footer_links_title', "دسترسی سریع")}</h4>
<ul className="space-y-4 text-sm font-bold text-white/60"> <ul className="space-y-4 text-sm font-bold text-slate-300">
<li onClick={() => onShopNavigate()} className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group"> <li onClick={() => onShopNavigate()} className="hover:text-white hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
{getText('footer_link_products', "محصولات تخصصی ۲۰۲۴")} {getText('footer_link_products', "محصولات تخصصی ۲۰۲۴")}
@ -55,7 +55,7 @@ export default function Footer({ onNavigate, onShopNavigate, onB2BOpen }: {
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
{getText('footer_link_wiki', "دانشنامه ترکیبات")} {getText('footer_link_wiki', "دانشنامه ترکیبات")}
</li> </li>
<li onClick={onB2BOpen} className="hover:text-canina-blue hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group text-blue-300"> <li onClick={onB2BOpen} className="hover:text-canina-blue hover:translate-x-[-4px] transition-all cursor-pointer flex items-center gap-2 group text-blue-200">
<div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" /> <div className="w-1.5 h-1.5 rounded-full bg-canina-blue group-hover:w-4 transition-all" />
{getText('footer_link_b2b', "پنل سفارش عمده (B2B)")} {getText('footer_link_b2b', "پنل سفارش عمده (B2B)")}
</li> </li>

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

@ -1,6 +1,6 @@
"use client"; "use client";
import { motion, useMotionValue, useTransform, animate } from "motion/react"; import { motion, useMotionValue, useTransform, animate } from "motion/react";
import { ChevronLeft } from "lucide-react"; import { ChevronLeft, Calendar, Globe, ShieldCheck } from "lucide-react";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { toPersian } from "../lib/utils"; import { toPersian } from "../lib/utils";
import { useSettingsStore } from "../lib/store/settingsStore"; import { useSettingsStore } from "../lib/store/settingsStore";
@ -110,14 +110,14 @@ 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-canina-blue hover:shadow-2xl focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all flex items-center gap-2 group font-vazir min-h-[48px]" className="bg-canina-blue text-white px-10 py-5 rounded-full font-bold text-lg hover:bg-canina-blue/90 hover:shadow-2xl focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all flex items-center gap-2 group font-vazir min-h-[58px] shadow-lg shadow-canina-blue/20 cursor-pointer"
> >
{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-canina-blue hover:text-canina-blue focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all font-vazir min-h-[48px]" className="bg-white border-2 border-medical-gray-900 text-medical-gray-900 px-10 py-5 rounded-full font-bold text-lg hover:bg-medical-gray-50 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all font-vazir min-h-[58px] shadow-sm cursor-pointer"
> >
{getText('hero_btn_products', "مشاهده محصولات")} {getText('hero_btn_products', "مشاهده محصولات")}
</button> </button>
@ -133,7 +133,7 @@ export default function Hero({ banners = [] }: { banners?: any[] }) {
transition={{ duration: 1, ease: "easeOut" }} transition={{ duration: 1, ease: "easeOut" }}
className="relative z-10" className="relative z-10"
> >
<div className="aspect-square bg-gradient-to-br from-slate-200 to-slate-300 rounded-[2rem] overflow-hidden border-4 border-white shadow-2xl relative"> <div className="aspect-square bg-gradient-to-br from-slate-200 to-slate-300 rounded-[2.5rem] overflow-hidden border-4 border-white shadow-2xl relative">
<img <img
src={getText('hero_image_url', '') || (banners.length > 0 && banners[0].imageUrl ? banners[0].imageUrl : "/assets/images/hero-section-image.png")} src={getText('hero_image_url', '') || (banners.length > 0 && banners[0].imageUrl ? banners[0].imageUrl : "/assets/images/hero-section-image.png")}
alt={banners.length > 0 ? banners[0].title : "Canina Pharma Germany"} alt={banners.length > 0 ? banners[0].title : "Canina Pharma Germany"}
@ -168,30 +168,41 @@ export default function Hero({ banners = [] }: { banners?: any[] }) {
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }} animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.8, duration: 0.6 }} 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" className="grid grid-cols-1 md:grid-cols-3 gap-8 py-10 border-t border-medical-gray-150"
> >
<div className="flex flex-col items-center justify-center text-center"> {/* Stat 1: Founded Year */}
<Typewriter text={getText('hero_stat_founded', "سال تأسیس ۱۹۸۴")} /> <div className="bg-medical-gray-50/50 border border-medical-gray-100 rounded-3xl p-6 flex items-center gap-6 group hover:shadow-xl hover:shadow-canina-blue/5 transition-all">
<div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-canina-blue shadow-sm group-hover:bg-canina-blue group-hover:text-white transition-all duration-300">
<Calendar className="w-7 h-7" />
</div> </div>
<div className="flex flex-col items-center justify-center text-center"> <div className="text-right">
<div className="text-3xl font-black text-canina-blue font-vazir leading-none">۱۹۸۴</div>
<div className="text-xs text-medical-gray-500 font-extrabold uppercase tracking-tight mt-2 font-vazir">{getText('hero_stat_founded', "سال تاسیس برند در آلمان")}</div>
</div>
</div>
{/* Stat 2: Active Agencies */}
<div className="bg-medical-gray-50/50 border border-medical-gray-100 rounded-3xl p-6 flex items-center gap-6 group hover:shadow-xl hover:shadow-canina-blue/5 transition-all">
<div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-canina-blue shadow-sm group-hover:bg-canina-blue group-hover:text-white transition-all duration-300">
<Globe className="w-7 h-7" />
</div>
<div className="text-right">
<div className="flex items-baseline">
<StatCounter target={40} /> <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>
<div className="flex flex-col items-center justify-center text-center"> <div className="text-xs text-medical-gray-500 font-extrabold uppercase tracking-tight mt-2 font-vazir">{getText('hero_stat_agencies', "نمایندگی فعال جهانی")}</div>
<div className="relative overflow-hidden group"> </div>
<motion.div </div>
className="text-4xl lg:text-6xl font-black text-canina-blue font-vazir relative z-10"
> {/* Stat 3: German Formula */}
۱۰۰٪ <div className="bg-medical-gray-50/50 border border-medical-gray-100 rounded-3xl p-6 flex items-center gap-6 group hover:shadow-xl hover:shadow-canina-blue/5 transition-all">
</motion.div> <div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-canina-blue shadow-sm group-hover:bg-canina-blue group-hover:text-white transition-all duration-300">
<motion.div <ShieldCheck className="w-7 h-7" />
initial={{ x: "-100%" }} </div>
animate={{ x: "200%" }} <div className="text-right">
transition={{ duration: 3, repeat: Infinity, ease: "linear" }} <div className="text-3xl font-black text-canina-blue font-vazir leading-none">۱۰۰٪</div>
className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-12 z-20 pointer-events-none" <div className="text-xs text-medical-gray-500 font-extrabold uppercase tracking-tight mt-2 font-vazir">{getText('hero_stat_german_formula', "فرمولاسیون علمی اختصاصی")}</div>
/>
</div> </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> </div>
</motion.div> </motion.div>
</div> </div>

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

@ -90,13 +90,13 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
}; };
return ( return (
<section id="canino-advisor" className="py-24 bg-white"> <section id="canino-advisor" className="py-12 bg-white">
<div className="max-w-4xl mx-auto px-4"> <div className="max-w-4xl mx-auto px-4">
<div className="text-center mb-12"> <div className="text-center mb-8">
<motion.div <motion.div
initial={{ opacity: 0, y: 20 }} initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }} whileInView={{ opacity: 1, y: 0 }}
className="inline-flex items-center gap-2 px-4 py-2 bg-canina-blue/5 rounded-full mb-6" className="inline-flex items-center gap-2 px-4 py-2 bg-canina-blue/5 rounded-full mb-4"
> >
<Sparkle className="w-4 h-4 text-canina-blue" /> <Sparkle className="w-4 h-4 text-canina-blue" />
<span className="text-canina-blue text-xs font-black uppercase tracking-widest font-vazir">{getText('advisor_badge', "تکنولوژی پایش هوشمند")}</span> <span className="text-canina-blue text-xs font-black uppercase tracking-widest font-vazir">{getText('advisor_badge', "تکنولوژی پایش هوشمند")}</span>
@ -133,16 +133,16 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
<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 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none ${type === "سگ" ? 'border-canina-blue bg-white shadow-xl shadow-canina-blue/10 scale-105' : 'border-transparent bg-white/50 text-medical-gray-400 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-canina-blue/30 focus-visible:outline-none cursor-pointer ${type === "سگ" ? 'border-canina-blue bg-white shadow-xl shadow-canina-blue/10 scale-105 text-canina-blue' : 'border-medical-gray-250 bg-white text-medical-gray-500 hover:border-canina-blue/30 hover:text-canina-blue/70'}`}
> >
<Dog className={`w-12 h-12 ${type === "سگ" ? 'text-canina-blue' : 'text-current'}`} /> <Dog className="w-12 h-12" />
<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 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none ${type === "گربه" ? 'border-canina-blue bg-white shadow-xl shadow-canina-blue/10 scale-105' : 'border-transparent bg-white/50 text-medical-gray-400 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-canina-blue/30 focus-visible:outline-none cursor-pointer ${type === "گربه" ? 'border-canina-blue bg-white shadow-xl shadow-canina-blue/10 scale-105 text-canina-blue' : 'border-medical-gray-250 bg-white text-medical-gray-500 hover:border-canina-blue/30 hover:text-canina-blue/70'}`}
> >
<Cat className={`w-12 h-12 ${type === "گربه" ? 'text-canina-blue' : 'text-current'}`} /> <Cat className="w-12 h-12" />
<span className="text-lg font-black font-vazir">گربه</span> <span className="text-lg font-black font-vazir">گربه</span>
</button> </button>
</div> </div>
@ -294,7 +294,7 @@ export default function SmartAdvisor({ onComplete, rules = [] }: SmartAdvisorPro
</button> </button>
<button <button
onClick={handleSubmit} onClick={handleSubmit}
className="flex-[2] py-6 bg-canina-blue text-white rounded-3xl font-black text-lg hover:bg-indigo-700 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all shadow-xl shadow-canina-blue/20 flex items-center justify-center gap-3 font-vazir min-h-[48px]" className="flex-[2] py-6 bg-canina-blue text-white rounded-3xl font-black text-lg hover:bg-canina-blue/90 focus-visible:ring-4 focus-visible:ring-canina-blue/30 focus-visible:outline-none transition-all shadow-xl shadow-canina-blue/30 flex items-center justify-center gap-3 font-vazir min-h-[48px]"
> >
{getText('advisor_complete', "تکمیل و صدور شناسنامه")} {getText('advisor_complete', "تکمیل و صدور شناسنامه")}
<ChevronLeft className="w-5 h-5" /> <ChevronLeft className="w-5 h-5" />

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

@ -38,7 +38,7 @@ const VIDEOS = [
export default function VetGallery({ testimonials = [] }: { testimonials?: any[] }) { export default function VetGallery({ testimonials = [] }: { testimonials?: any[] }) {
const router = useRouter(); const router = useRouter();
const getText = useSettingsStore(state => state.getText); const getText = useSettingsStore(state => state.getText);
const displayItems = testimonials.length > 0 ? testimonials : VIDEOS; const displayItems = VIDEOS;
const [selectedVideo, setSelectedVideo] = useState<any>(null); const [selectedVideo, setSelectedVideo] = useState<any>(null);
return ( return (