401 lines
24 KiB
TypeScript
401 lines
24 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import { motion } from "motion/react";
|
||
import { ChevronRight, Calendar, User, ArrowLeft, Sparkles, BookOpen, Mail, Check } from "lucide-react";
|
||
import { toast } from "sonner";
|
||
import { Product } from "../lib/data/products";
|
||
import { productService } from "../lib/services/productService";
|
||
|
||
export interface BlogPost {
|
||
id: string;
|
||
slug: string;
|
||
title: string;
|
||
excerpt: string;
|
||
image: string;
|
||
date: string;
|
||
author: string;
|
||
content: string;
|
||
}
|
||
|
||
import { useRouter } from 'next/navigation';
|
||
import Image from 'next/image';
|
||
|
||
export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
|
||
const router = useRouter();
|
||
const [selectedPost, setSelectedPost] = React.useState<BlogPost | null>(null);
|
||
const [products, setProducts] = React.useState<Product[]>([]);
|
||
|
||
React.useEffect(() => {
|
||
productService.getProducts({ limit: 10 }).then(res => setProducts(res.data));
|
||
}, []);
|
||
|
||
if (selectedPost) {
|
||
return (
|
||
<div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Standard Breadcrumb Navigation & Integrated Back Button */}
|
||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir" dir="rtl">
|
||
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400 whitespace-nowrap">
|
||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
|
||
<ChevronRight className="w-3 h-3 text-medical-gray-300" />
|
||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => setSelectedPost(null)}>مجله سلامت</span>
|
||
<ChevronRight className="w-3 h-3 text-medical-gray-300" />
|
||
<span className="text-canina-blue font-black">{selectedPost.title}</span>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => setSelectedPost(null)}
|
||
className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
|
||
>
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
<span>بازگشت</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div className="grid lg:grid-cols-12 gap-12">
|
||
<div className="lg:col-span-8">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="bg-white rounded-[3.5rem] border border-medical-gray-200 shadow-2xl overflow-hidden"
|
||
>
|
||
<div className="aspect-video w-full overflow-hidden relative">
|
||
<Image src={selectedPost.image} alt={selectedPost.title} fill className="w-full h-full object-cover" unoptimized />
|
||
</div>
|
||
<div className="p-12">
|
||
<div className="flex items-center gap-4 text-xs font-bold text-canina-blue mb-8">
|
||
<div className="bg-canina-blue/10 px-4 py-1.5 rounded-full uppercase tracking-widest">تحقیق بالینی</div>
|
||
<div className="flex items-center gap-1">
|
||
<Calendar className="w-4 h-4" />
|
||
{selectedPost.date}
|
||
</div>
|
||
</div>
|
||
<h1 className="text-4xl lg:text-5xl font-black text-medical-gray-900 mb-10 leading-tight">
|
||
{selectedPost.title}
|
||
</h1>
|
||
<div className="prose prose-lg max-w-none text-medical-gray-600 leading-[2] text-justify space-y-6">
|
||
<p className="font-bold text-medical-gray-900 italic text-xl border-r-4 border-canina-blue pr-6 py-2">
|
||
{selectedPost.excerpt}
|
||
</p>
|
||
<div className="whitespace-pre-line">
|
||
{selectedPost.content}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-16 pt-10 border-t border-medical-gray-100 flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<div className="w-14 h-14 bg-medical-gray-100 rounded-full flex items-center justify-center text-medical-gray-400 border-2 border-white shadow-lg">
|
||
<User className="w-8 h-8" />
|
||
</div>
|
||
<div>
|
||
<div className="font-black text-medical-gray-900 text-lg">{selectedPost.author}</div>
|
||
<div className="font-bold text-medical-gray-400">تیم تحقیق و توسعه کنینا آلمان</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-4">
|
||
<button className="p-4 bg-medical-gray-100 rounded-2xl hover:bg-canina-blue hover:text-white transition-all text-medical-gray-400">
|
||
<Sparkles className="w-6 h-6" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
<div className="lg:col-span-4 space-y-10">
|
||
<div className="bg-canina-blue rounded-[3rem] p-10 text-white shadow-2xl relative overflow-hidden">
|
||
<div className="absolute top-0 left-0 p-8 opacity-10">
|
||
<Sparkles className="w-20 h-20" />
|
||
</div>
|
||
<h4 className="text-2xl font-black mb-6 italic relative z-10">محصولات پیشنهادی</h4>
|
||
<div className="space-y-6 relative z-10">
|
||
{products.slice(4, 7).map(p => (
|
||
<div
|
||
key={p.id}
|
||
onClick={() => router.push(`/shop/${p.slug || p.id}`)}
|
||
className="bg-white/10 border border-white/20 p-4 rounded-3xl flex items-center gap-4 cursor-pointer hover:bg-white/20 transition-all group"
|
||
>
|
||
<div className="w-16 h-16 bg-white rounded-2xl p-2 shrink-0 group-hover:scale-110 transition-transform relative overflow-hidden">
|
||
<Image src={p.image} alt={p.name} fill className="w-full h-full object-contain p-2" unoptimized />
|
||
</div>
|
||
<div>
|
||
<div className="text-[10px] font-black opacity-50 uppercase tracking-widest">{p.category}</div>
|
||
<div className="text-sm font-black font-vazir text-white">{p.name}</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-white rounded-[3rem] border border-medical-gray-200 p-10 shadow-xl">
|
||
<h4 className="text-xl font-black italic mb-6">محبوبترین مقالات</h4>
|
||
<div className="space-y-6">
|
||
{blogs.map(p => (
|
||
<div
|
||
key={p.id}
|
||
onClick={() => router.push(`/blog/${p.slug}`)}
|
||
className="flex items-center gap-4 cursor-pointer group"
|
||
>
|
||
<div className="w-16 h-16 rounded-2xl overflow-hidden shrink-0 relative">
|
||
<Image src={p.image} alt={p.title} fill className="w-full h-full object-cover group-hover:scale-110 transition-transform" unoptimized />
|
||
</div>
|
||
<div className="text-sm font-black text-medical-gray-900 group-hover:text-canina-blue transition-colors line-clamp-2">
|
||
{p.title}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="min-h-screen bg-medical-gray-50 pt-8 pb-20 px-4 font-vazir" dir="rtl">
|
||
<div className="max-w-7xl mx-auto">
|
||
{/* Breadcrumb Navigation & Integrated Back Button */}
|
||
<div className="flex items-center justify-between mb-8 pb-4 border-b border-medical-gray-200/60 font-vazir">
|
||
<div className="flex items-center gap-2 text-xs font-bold text-medical-gray-400">
|
||
<span className="cursor-pointer hover:text-canina-blue transition-colors" onClick={() => router.push('/')}>خانه</span>
|
||
<ChevronRight className="w-3 h-3 text-medical-gray-300" />
|
||
<span className="text-canina-blue font-black">مجله سلامت</span>
|
||
</div>
|
||
|
||
<button
|
||
onClick={() => router.push('/')}
|
||
className="px-3.5 py-1.5 bg-white border border-medical-gray-200 rounded-lg text-medical-gray-600 shadow-xs flex items-center gap-1.5 font-bold text-xs hover:border-canina-blue hover:text-canina-blue transition-all whitespace-nowrap"
|
||
>
|
||
<ChevronRight className="w-3.5 h-3.5" />
|
||
<span>بازگشت</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Header */}
|
||
<div className="mb-10 text-right">
|
||
<div className="inline-flex items-center gap-2 px-3 py-1 bg-canina-blue/10 text-canina-blue rounded-full text-xs font-black uppercase tracking-widest mb-3">
|
||
<BookOpen className="w-3.5 h-3.5" />
|
||
<span>Canina Science Blog</span>
|
||
</div>
|
||
<h1 className="text-3xl sm:text-4xl lg:text-5xl font-black text-medical-gray-900 leading-tight">
|
||
مجله تخصصی <span className="text-canina-blue">سلامت پتها</span>
|
||
</h1>
|
||
<p className="text-sm sm:text-base text-medical-gray-500 font-medium mt-3 max-w-xl leading-relaxed">
|
||
آخرین یافتههای علمی محققین کنینا آلمان در مورد تغذیه و سلامت پتها.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Featured Post */}
|
||
{blogs.length > 0 && (
|
||
<div className="mb-20">
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
className="bg-white rounded-[3.5rem] overflow-hidden border border-medical-gray-200 shadow-2xl flex flex-col lg:flex-row cursor-pointer group"
|
||
onClick={() => router.push(`/blog/${blogs[0].slug}`)}
|
||
>
|
||
<div className="lg:w-1/2 aspect-video lg:aspect-auto relative overflow-hidden">
|
||
<Image
|
||
src={blogs[0].image}
|
||
alt={blogs[0].title}
|
||
fill
|
||
className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
|
||
unoptimized
|
||
/>
|
||
</div>
|
||
<div className="lg:w-1/2 p-12 flex flex-col justify-center">
|
||
<div className="flex items-center gap-4 text-xs font-bold text-canina-blue mb-6">
|
||
<div className="bg-canina-blue/10 px-3 py-1 rounded-full uppercase tracking-widest">تخصصی</div>
|
||
<div className="flex items-center gap-1">
|
||
<Calendar className="w-3 h-3" />
|
||
{blogs[0].date}
|
||
</div>
|
||
</div>
|
||
<h2 className="text-3xl lg:text-4xl font-black text-medical-gray-900 mb-6 leading-tight group-hover:text-canina-blue transition-colors">
|
||
{blogs[0].title}
|
||
</h2>
|
||
<p className="text-lg text-medical-gray-500 mb-8 leading-relaxed italic">
|
||
{blogs[0].excerpt}
|
||
</p>
|
||
<div className="flex items-center justify-between pt-8 border-t border-medical-gray-100">
|
||
<div className="flex items-center gap-3">
|
||
<div className="w-10 h-10 bg-medical-gray-100 rounded-full flex items-center justify-center text-medical-gray-400">
|
||
<User className="w-6 h-6" />
|
||
</div>
|
||
<div className="text-sm">
|
||
<div className="font-black text-medical-gray-900">{blogs[0].author}</div>
|
||
<div className="font-bold text-medical-gray-400">نویسنده کنینا</div>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2 text-canina-blue font-black">
|
||
ادامه مطلب
|
||
<ArrowLeft className="w-5 h-5 group-hover:-translate-x-2 transition-transform" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Post Grid */}
|
||
<div className="grid md:grid-cols-2 gap-8">
|
||
{blogs.slice(1).map((post, idx) => (
|
||
<motion.div
|
||
key={post.id}
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ delay: idx * 0.1 }}
|
||
className="bg-white rounded-[3rem] overflow-hidden border border-medical-gray-200 shadow-xl group hover:shadow-2xl transition-all cursor-pointer"
|
||
onClick={() => router.push(`/blog/${post.slug}`)}
|
||
>
|
||
<div className="aspect-[16/9] overflow-hidden relative">
|
||
<Image
|
||
src={post.image}
|
||
alt={post.title}
|
||
fill
|
||
className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
|
||
unoptimized
|
||
/>
|
||
</div>
|
||
<div className="p-8">
|
||
<div className="flex items-center gap-4 text-[10px] font-bold text-canina-blue mb-4">
|
||
<div className="flex items-center gap-1">
|
||
<Calendar className="w-3 h-3" />
|
||
{post.date}
|
||
</div>
|
||
</div>
|
||
<h3 className="text-xl font-black text-medical-gray-900 mb-4 group-hover:text-canina-blue transition-colors line-clamp-2 leading-snug">
|
||
{post.title}
|
||
</h3>
|
||
<p className="text-sm text-medical-gray-500 line-clamp-3 leading-relaxed mb-6">
|
||
{post.excerpt}
|
||
</p>
|
||
<div className="flex items-center gap-2 text-medical-gray-900 font-bold group">
|
||
مطالعه مقاله
|
||
<ArrowLeft className="w-4 h-4 group-hover:-translate-x-1 transition-transform" />
|
||
</div>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
|
||
{/* Ultra-Premium Redesigned Newsletter / CTA Box */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
viewport={{ once: true }}
|
||
transition={{ duration: 0.7 }}
|
||
className="bg-gradient-to-br from-canina-blue via-canina-blue/95 to-medical-gray-900 rounded-[3rem] p-8 sm:p-14 text-white relative overflow-hidden font-vazir shadow-2xl border border-white/10"
|
||
dir="rtl"
|
||
>
|
||
{/* Decorative Glassmorphic Background Elements */}
|
||
<div className="absolute top-0 right-0 w-96 h-96 bg-canina-teal/15 rounded-full blur-[100px] pointer-events-none" />
|
||
<div className="absolute bottom-0 left-0 w-80 h-80 bg-canina-gold/10 rounded-full blur-[90px] pointer-events-none" />
|
||
<div className="absolute -top-12 -left-12 opacity-5 pointer-events-none select-none">
|
||
<span className="text-[180px] font-black italic tracking-tighter font-sans text-white">CANINA</span>
|
||
</div>
|
||
|
||
<div className="relative z-10 max-w-4xl mx-auto flex flex-col items-center text-center space-y-8">
|
||
|
||
{/* Top Premium Badge */}
|
||
<div className="inline-flex items-center gap-2.5 px-4 py-2 bg-white/10 backdrop-blur-md rounded-full border border-white/20 shadow-inner">
|
||
<div className="w-6 h-6 rounded-lg bg-canina-gold text-canina-dark flex items-center justify-center font-black text-xs italic shadow-md">
|
||
C
|
||
</div>
|
||
<span className="text-xs font-black text-white/90 tracking-wider font-vazir">
|
||
خبرنامه اختصاصی پژوهشگاه کنینا آلمان
|
||
</span>
|
||
<Sparkles className="w-3.5 h-3.5 text-canina-gold animate-pulse" />
|
||
</div>
|
||
|
||
{/* Headline & Description */}
|
||
<div className="space-y-4 max-w-2xl">
|
||
<h3 className="text-3xl sm:text-4xl lg:text-5xl font-black font-vazir text-white leading-tight">
|
||
مشترک <span className="text-transparent bg-clip-text bg-gradient-to-r from-canina-gold via-white to-canina-teal">خبرنامه علمی</span> شوید
|
||
</h3>
|
||
<p className="text-sm sm:text-base text-white/80 font-medium font-vazir leading-relaxed">
|
||
ماهانه یک ایمیل حاوی تازهترین یافتـههای پزشکی، کاتالوگهای درمانی اختصاصی کنینا و کدهای تخفیف ویژه برای شما ارسال میشود.
|
||
</p>
|
||
</div>
|
||
|
||
{/* Main Interactive Floating Input Bar */}
|
||
<div className="w-full max-w-xl">
|
||
<form onSubmit={(e) => { e.preventDefault(); toast.success("عضویت شما در خبرنامه علمی با موفقیت ثبت شد!"); }} className="w-full bg-white/15 backdrop-blur-xl border border-white/25 p-2 rounded-2xl sm:rounded-full flex flex-col sm:flex-row items-stretch sm:items-center gap-2 sm:gap-3 shadow-2xl hover:border-canina-gold/40 transition-all group" dir="ltr">
|
||
<input
|
||
type="email"
|
||
required
|
||
placeholder="آدرس ایمیل شما (name@domain.com)..."
|
||
className="flex-1 bg-transparent border-none text-xs sm:text-sm outline-none text-white placeholder:text-white/45 px-3 sm:px-4 py-2.5 sm:py-0 font-sans text-left"
|
||
/>
|
||
<button
|
||
type="submit"
|
||
className="bg-canina-gold hover:bg-white text-canina-dark px-6 sm:px-8 py-3.5 rounded-xl sm:rounded-full font-black text-xs sm:text-sm transition-all duration-300 whitespace-nowrap shadow-xl hover:scale-105 flex items-center justify-center gap-2 font-vazir cursor-pointer flex-shrink-0"
|
||
dir="rtl"
|
||
>
|
||
<span>عضویت آنی</span>
|
||
<Mail className="w-4 h-4" />
|
||
</button>
|
||
</form>
|
||
</div>
|
||
|
||
{/* Bottom Feature Micro Badges */}
|
||
<div className="pt-2 flex flex-wrap items-center justify-center gap-6 text-xs text-white/70 font-bold font-vazir border-t border-white/10 w-full max-w-xl">
|
||
<div className="flex items-center gap-2">
|
||
<Check className="w-4 h-4 text-canina-gold" />
|
||
<span>بدون اسپم (حداکثر ۱ ایمیل در ماه)</span>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<Check className="w-4 h-4 text-canina-gold" />
|
||
<span>امکان لغو عضویت با یک کلیک</span>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
|
||
{/* Synergy Products Cross-sell */}
|
||
<section className="mt-32 p-12 bg-canina-blue rounded-[4rem] text-white overflow-hidden relative shadow-2xl">
|
||
<div className="absolute inset-0 opacity-20 pointer-events-none">
|
||
<div className="grid grid-cols-6 h-full w-full">
|
||
{Array.from({ length: 36 }).map((_, i) => (
|
||
<div key={i} className="border border-white/20" />
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="relative z-10 flex flex-col lg:flex-row items-center gap-12">
|
||
<div className="flex-1">
|
||
<h3 className="text-3xl lg:text-4xl font-black italic mb-6">علم آلمانی در خدمت سلامت پت شما</h3>
|
||
<p className="text-white/80 mb-8 leading-relaxed max-w-xl">
|
||
تمامی مقالات این وبلاگ بر اساس کاتالوگهای رسمی و نتایج آزمایشگاهی کمپانی کنینا آلمان تدوین شده است.
|
||
</p>
|
||
<button
|
||
onClick={() => router.push('/shop')}
|
||
className="bg-white text-canina-blue px-8 py-4 rounded-2xl font-black hover:scale-105 transition-transform"
|
||
>
|
||
مشاهده محصولات تخصصی
|
||
</button>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4 flex-shrink-0">
|
||
{products.slice(0, 2).map((p) => (
|
||
<div
|
||
key={p.id}
|
||
onClick={() => router.push(`/shop/${p.slug || p.id}`)}
|
||
className="bg-white/10 border border-white/20 p-6 rounded-3xl cursor-pointer hover:bg-white/20 transition-all text-center group"
|
||
>
|
||
<div className="w-20 h-20 mx-auto mb-4 relative overflow-hidden">
|
||
<Image src={p.image} alt={p.name} fill className="w-full h-full object-contain group-hover:scale-110 transition-transform" unoptimized />
|
||
</div>
|
||
<h5 className="text-[10px] font-black">{p.name}</h5>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|