Compare commits
No commits in common. "ada1d03d002f69b454bebb366be4153539cf02ac" and "22d5d5eb50fbb50fccd8f79ccb75c65d04bd9fd6" have entirely different histories.
ada1d03d00
...
22d5d5eb50
@ -9,155 +9,151 @@ import Link from 'next/link';
|
|||||||
import { toPersian } from "../lib/utils";
|
import { toPersian } from "../lib/utils";
|
||||||
import { useSettingsStore } from "../lib/store/settingsStore";
|
import { useSettingsStore } from "../lib/store/settingsStore";
|
||||||
import api from "../lib/services/api";
|
import api from "../lib/services/api";
|
||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function HomeClient() {
|
export default function HomeClient() {
|
||||||
const getText = useSettingsStore(state => state.getText);
|
const getText = useSettingsStore(state => state.getText);
|
||||||
const [data, setData] = useState<any>(null);
|
const [data, setData] = useState<any>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
api.get('/home')
|
api.get('/home')
|
||||||
.then(res => setData(res.data))
|
.then(res => setData(res.data))
|
||||||
.catch(err => console.error('Home data fetch error:', err));
|
.catch(err => console.error('Home data fetch error:', err));
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const banners = data?.heroBanners || [];
|
const banners = data?.heroBanners || [];
|
||||||
const testimonials = data?.vetTestimonials || [];
|
const testimonials = data?.vetTestimonials || [];
|
||||||
const rules = data?.smartAdvisorRules || [];
|
const rules = data?.smartAdvisorRules || [];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Hero banners={banners} />
|
<Hero banners={banners} />
|
||||||
<SmartAdvisor rules={rules} />
|
<SmartAdvisor rules={rules} />
|
||||||
<FeaturedProducts />
|
<FeaturedProducts />
|
||||||
<VetGallery testimonials={testimonials} />
|
<VetGallery testimonials={testimonials} />
|
||||||
|
|
||||||
{/* Navigation to Sections */}
|
{/* Navigation to Sections */}
|
||||||
<section className="py-12 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">
|
||||||
{/* Specialty Shop Card */}
|
{/* Specialty Shop Card */}
|
||||||
<Link
|
<Link
|
||||||
href="/shop"
|
href="/shop"
|
||||||
className="bg-gradient-to-br from-blue-50/60 to-canina-blue/5 p-12 rounded-[2.5rem] border border-blue-100/60 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block relative overflow-hidden"
|
className="bg-gradient-to-br from-blue-50/60 to-canina-blue/5 p-12 rounded-[2.5rem] border border-blue-100/60 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block relative overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="absolute -top-12 -left-12 w-32 h-32 bg-canina-blue/5 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700" />
|
<div className="absolute -top-12 -left-12 w-32 h-32 bg-canina-blue/5 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700" />
|
||||||
<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', "فروشگاه تخصصی")}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-medical-gray-600 mb-8 leading-relaxed font-shabnam">
|
<p className="text-medical-gray-600 mb-8 leading-relaxed font-shabnam">
|
||||||
{getText('nav_card_shop_desc', "دسترسی به تمامی محصولات بر اساس علائم بالینی و نیازهای پت شما.")}
|
{getText('nav_card_shop_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">
|
||||||
{getText('nav_card_shop_cta', "کاتالوگ کامل محصولات")}
|
{getText('nav_card_shop_cta', "کاتالوگ کامل محصولات")}
|
||||||
<span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
|
<span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
|
|
||||||
{/* Scientific Wiki Card */}
|
{/* Scientific Wiki Card */}
|
||||||
<Link
|
<Link
|
||||||
href="/wiki"
|
href="/wiki"
|
||||||
className="bg-gradient-to-br from-emerald-50/60 to-green-50/20 p-12 rounded-[2.5rem] border border-emerald-100/60 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block relative overflow-hidden"
|
className="bg-gradient-to-br from-emerald-50/60 to-green-50/20 p-12 rounded-[2.5rem] border border-emerald-100/60 shadow-md hover:shadow-2xl hover:-translate-y-2 transition-all cursor-pointer group block relative overflow-hidden"
|
||||||
>
|
>
|
||||||
<div className="absolute -top-12 -left-12 w-32 h-32 bg-emerald-500/5 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700" />
|
<div className="absolute -top-12 -left-12 w-32 h-32 bg-emerald-500/5 rounded-full blur-2xl group-hover:scale-150 transition-transform duration-700" />
|
||||||
<h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-emerald-700 transition-colors font-lalezar tracking-wide">
|
<h3 className="text-3xl font-black text-medical-gray-900 mb-4 group-hover:text-emerald-700 transition-colors font-lalezar tracking-wide">
|
||||||
{getText('nav_card_wiki_title', "دانشنامه علمی")}
|
{getText('nav_card_wiki_title', "دانشنامه علمی")}
|
||||||
</h3>
|
</h3>
|
||||||
<p className="text-medical-gray-600 mb-8 leading-relaxed font-shabnam">
|
<p className="text-medical-gray-600 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-emerald-700 font-black tracking-widest uppercase text-xs font-vazir">
|
<div className="flex items-center gap-2 text-emerald-700 font-black tracking-widest uppercase text-xs font-vazir">
|
||||||
{getText('nav_card_wiki_cta', "مطالعه مقالات تخصصی")}
|
{getText('nav_card_wiki_cta', "مطالعه مقالات تخصصی")}
|
||||||
<span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
|
<span className="text-lg group-hover:-translate-x-1 transition-transform">←</span>
|
||||||
</div>
|
</div>
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* About Section Teaser */}
|
{/* About Section Teaser */}
|
||||||
<section className="py-16 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 overflow-hidden rounded-[3rem]">
|
<div className="relative overflow-hidden rounded-[3rem]">
|
||||||
<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" />
|
||||||
<Image
|
<img
|
||||||
src="/assets/images/regenerated_image_1779109861747.png"
|
src="/assets/images/regenerated_image_1779109861747.png"
|
||||||
alt="آزمایشگاه تخصصی تولید مکملهای دارویی کانینا آلمان"
|
alt="آزمایشگاه تخصصی تولید مکملهای دارویی کانینا آلمان"
|
||||||
className="rounded-[3rem] shadow-2xl relative z-10 grayscale-[10%] w-full"
|
className="rounded-[3rem] shadow-2xl relative z-10 grayscale-[10%] w-full"
|
||||||
width={640}
|
/>
|
||||||
height={425}
|
<div className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 bg-canina-blue text-white p-4 sm:p-6 md:p-8 rounded-[1.5rem] sm:rounded-[2rem] shadow-2xl z-20 max-w-[80%] border border-white/10">
|
||||||
loading="lazy"
|
<div className="text-2xl sm:text-4xl font-black mb-1 font-lalezar tracking-wide">{getText('quality', "کیفیت")}</div>
|
||||||
/>
|
<div className="text-[10px] sm:text-xs uppercase tracking-widest font-bold opacity-90 font-vazir">{getText('ultra_pharmaceutical', "استانداردهای فوقدارویی")}</div>
|
||||||
<div className="absolute bottom-4 left-4 sm:bottom-6 sm:left-6 bg-canina-blue text-white p-4 sm:p-6 md:p-8 rounded-[1.5rem] sm:rounded-[2rem] shadow-2xl z-20 max-w-[80%] border border-white/10">
|
</div>
|
||||||
<div className="text-2xl sm:text-4xl font-black mb-1 font-lalezar tracking-wide">{getText('quality', "کیفیت")}</div>
|
</div>
|
||||||
<div className="text-[10px] sm:text-xs uppercase tracking-widest font-bold opacity-90 font-vazir">{getText('ultra_pharmaceutical', "استانداردهای فوقدارویی")}</div>
|
<div>
|
||||||
</div>
|
<div className="text-canina-blue text-xs font-bold uppercase tracking-[0.2em] mb-4 font-vazir">
|
||||||
</div>
|
{getText('about_label', "میراث ما از آلمان")}
|
||||||
<div>
|
</div>
|
||||||
<div className="text-canina-blue text-xs font-bold uppercase tracking-[0.2em] mb-4 font-vazir">
|
<h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] mb-12 font-lalezar tracking-wide">
|
||||||
{getText('about_label', "میراث ما از آلمان")}
|
{getText('about_title', "چرا برند آلمانی Canina مرجع دامپزشکان است؟")}
|
||||||
</div>
|
</h2>
|
||||||
<h2 className="text-3xl lg:text-5xl font-black text-medical-gray-900 leading-[1.2] mb-12 font-lalezar tracking-wide">
|
<div className="space-y-6">
|
||||||
{getText('about_title', "چرا برند آلمانی Canina مرجع دامپزشکان است؟")}
|
{[
|
||||||
</h2>
|
{ title: getText('about_item1_title', "مواد اولیه نایاب"), desc: getText('about_item1_desc', "استفاده از پودر صدف لبسبز اصل نیوزیلند و مواد ارگانیک با گرید دارویی.") },
|
||||||
<div className="space-y-6">
|
{ title: getText('about_item2_title', "فاقد مواد نگهدارنده"), desc: getText('about_item2_desc', "تمامی محصولات ۱۰۰٪ طبیعی و فاقد رنگهای مصنوعی و طعمدهندههای شیمیایی هستند.") },
|
||||||
{[
|
{ title: getText('about_item3_title', "تاییدیه اروپا"), desc: getText('about_item3_desc', "مطابق با سختگیرانهترین استانداردهای ایمنی مواد غذایی و دارویی در اتحادیه اروپا.") }
|
||||||
{ title: getText('about_item1_title', "مواد اولیه نایاب"), desc: getText('about_item1_desc', "استفاده از پودر صدف لبسبز اصل نیوزیلند و مواد ارگانیک با گرید دارویی.") },
|
].map((item, idx) => (
|
||||||
{ title: getText('about_item2_title', "فاقد مواد نگهدارنده"), desc: getText('about_item2_desc', "تمامی محصولات ۱۰۰٪ طبیعی و فاقد رنگهای مصنوعی و طعمدهندههای شیمیایی هستند.") },
|
<div key={idx} className="flex gap-4 items-center">
|
||||||
{ title: getText('about_item3_title', "تاییدیه اروپا"), desc: getText('about_item3_desc', "مطابق با سختگیرانهترین استانداردهای ایمنی مواد غذایی و دارویی در اتحادیه اروپا.") }
|
<div className="w-12 h-12 rounded-2xl bg-medical-gray-50 flex items-center justify-center flex-shrink-0 text-canina-blue font-black font-lalezar text-xl shadow-sm">
|
||||||
].map((item, idx) => (
|
{toPersian(idx + 1)}
|
||||||
<div key={idx} className="flex gap-4 items-center">
|
</div>
|
||||||
<div className="w-12 h-12 rounded-2xl bg-medical-gray-50 flex items-center justify-center flex-shrink-0 text-canina-blue font-black font-lalezar text-xl shadow-sm">
|
<div>
|
||||||
{toPersian(idx + 1)}
|
<h4 className="text-lg font-bold text-medical-gray-900 mb-1 font-shabnam">{item.title}</h4>
|
||||||
</div>
|
<p className="text-sm text-medical-gray-500 leading-relaxed font-medium font-sans">{item.desc}</p>
|
||||||
<div>
|
{idx === 0 && (
|
||||||
<h4 className="text-lg font-bold text-medical-gray-900 mb-1 font-shabnam">{item.title}</h4>
|
<span className="text-[10px] text-slate-400 mt-1 block">
|
||||||
<p className="text-sm text-medical-gray-500 leading-relaxed font-medium font-sans">{item.desc}</p>
|
* تهیه شده با بالاترین استانداردهای دارویی انسان - کاملاً بیخطر در صورت لیسیده شدن توسط حیوان.
|
||||||
{idx === 0 && (
|
</span>
|
||||||
<span className="text-[10px] text-slate-400 mt-1 block">
|
)}
|
||||||
* تهیه شده با بالاترین استانداردهای دارویی انسان - کاملاً بیخطر در صورت لیسیده شدن توسط حیوان.
|
{idx === 2 && (
|
||||||
</span>
|
<span className="text-[10px] text-slate-400 mt-1 block">
|
||||||
)}
|
* تاییدیه رسمی ایمنی مواد غذایی و دارویی (HACCP & IFS) از اتحادیه اروپا.
|
||||||
{idx === 2 && (
|
</span>
|
||||||
<span className="text-[10px] text-slate-400 mt-1 block">
|
)}
|
||||||
* تاییدیه رسمی ایمنی مواد غذایی و دارویی (HACCP & IFS) از اتحادیه اروپا.
|
</div>
|
||||||
</span>
|
</div>
|
||||||
)}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
{/* Call to Action */}
|
{/* Call to Action */}
|
||||||
<section className="bg-canina-blue py-12 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) => (
|
||||||
<div key={i} className="border border-white/20" />
|
<div key={i} className="border border-white/20" />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="max-w-4xl mx-auto px-4 text-center relative z-10">
|
<div className="max-w-4xl mx-auto px-4 text-center relative z-10">
|
||||||
<h2 className="text-3xl lg:text-5xl font-black text-white mb-8 leading-tight font-lalezar tracking-wide">
|
<h2 className="text-3xl lg:text-5xl font-black text-white mb-8 leading-tight font-lalezar tracking-wide">
|
||||||
{getText('cta_title', "میخواهید بدانید کدام محصول برای پت شما مناسبتر است؟")}
|
{getText('cta_title', "میخواهید بدانید کدام محصول برای پت شما مناسبتر است؟")}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-white/80 text-lg mb-10 leading-relaxed font-shabnam">
|
<p className="text-white/80 text-lg mb-10 leading-relaxed font-shabnam">
|
||||||
{getText('cta_desc', "تیم متخصص دامپزشکی کانینا ایران آماده پاسخگویی به سوالات شماست.")}
|
{getText('cta_desc', "تیم متخصص دامپزشکی کانینا ایران آماده پاسخگویی به سوالات شماست.")}
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-wrap justify-center gap-4">
|
<div className="flex flex-wrap justify-center gap-4">
|
||||||
<button className="bg-white text-canina-blue px-12 py-5 rounded-full font-black text-xl hover:scale-105 transition-transform shadow-2xl shadow-black/20 font-shabnam">
|
<button className="bg-white text-canina-blue px-12 py-5 rounded-full font-black text-xl hover:scale-105 transition-transform shadow-2xl shadow-black/20 font-shabnam">
|
||||||
{getText('cta_btn_primary', "دریافت رژیم مکمل رایگان")}
|
{getText('cta_btn_primary', "دریافت رژیم مکمل رایگان")}
|
||||||
</button>
|
</button>
|
||||||
<Link
|
<Link
|
||||||
href="/shop"
|
href="/shop"
|
||||||
className="bg-transparent border-2 border-white text-white px-12 py-5 rounded-full font-black text-xl hover:bg-white hover:text-canina-blue transition-all font-shabnam"
|
className="bg-transparent border-2 border-white text-white px-12 py-5 rounded-full font-black text-xl hover:bg-white hover:text-canina-blue transition-all font-shabnam"
|
||||||
>
|
>
|
||||||
{getText('cta_btn_secondary', "پروانه دامپزشکی و اصالت کالا")}
|
{getText('cta_btn_secondary', "پروانه دامپزشکی و اصالت کالا")}
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user