feat(blog): complete ultra-premium redesign of science newsletter card
This commit is contained in:
parsa aghaei
parent
cd52ac2b7d
commit
1a1d828358
@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
import React from "react";
|
||||
import { motion } from "motion/react";
|
||||
import { ChevronRight, Calendar, User, ArrowLeft, Sparkles, BookOpen } from "lucide-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";
|
||||
|
||||
@ -257,42 +258,79 @@ export default function BlogPage({ blogs = [] }: { blogs: BlogPost[] }) {
|
||||
</motion.div>
|
||||
))}
|
||||
|
||||
{/* Newsletter / CTA Box */}
|
||||
<div className="bg-canina-blue rounded-[2.5rem] sm:rounded-[3rem] p-8 sm:p-12 text-white relative overflow-hidden font-vazir shadow-2xl" dir="rtl">
|
||||
<div className="absolute top-0 right-0 w-80 h-80 bg-white/5 rounded-full blur-3xl pointer-events-none" />
|
||||
{/* 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="flex flex-col gap-6 relative z-10 text-right max-w-3xl">
|
||||
{/* Line 1: Icon + Title */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-white/10 backdrop-blur-md rounded-xl flex items-center justify-center text-white font-black text-xl italic border border-white/20 shadow-inner flex-shrink-0">
|
||||
<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>
|
||||
<h3 className="text-2xl sm:text-3xl font-black font-vazir text-white leading-tight">
|
||||
مشترک خبرنامه علمی شوید
|
||||
</h3>
|
||||
<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>
|
||||
|
||||
{/* Line 2: Natural Text Flow */}
|
||||
<p className="text-white/80 font-medium text-xs sm:text-base font-vazir leading-relaxed text-right max-w-2xl">
|
||||
ماهانه یک ایمیل حاوی مهمترین نکات سلامت پتها، دستاوردهای پژوهشی کانینا آلمان و کدهای تخفیف اختصاصی دریافت کنید.
|
||||
</p>
|
||||
{/* 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>
|
||||
|
||||
{/* Line 3: Input Field and Submit Button */}
|
||||
<div className="pt-2 w-full max-w-2xl">
|
||||
<div className="w-full bg-white/10 border border-white/20 p-1.5 rounded-2xl sm:rounded-full flex items-center gap-2 shadow-2xl backdrop-blur-md">
|
||||
<button className="bg-white text-canina-blue px-6 sm:px-8 py-3.5 rounded-xl sm:rounded-full font-black text-xs hover:bg-canina-gold hover:text-canina-dark transition-all whitespace-nowrap shadow-lg font-vazir flex-shrink-0">
|
||||
عضویت
|
||||
</button>
|
||||
{/* 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 items-center gap-3 shadow-2xl hover:border-canina-gold/40 transition-all group">
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
dir="ltr"
|
||||
placeholder="you@example.com..."
|
||||
className="flex-1 bg-transparent border-none text-xs outline-none text-white placeholder:text-white/40 px-4 font-sans text-left"
|
||||
placeholder="آدرس ایمیل شما (e.g. name@domain.com)..."
|
||||
className="flex-1 bg-transparent border-none text-xs sm:text-sm outline-none text-white placeholder:text-white/45 px-4 font-sans text-left"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
className="bg-canina-gold hover:bg-white text-canina-dark 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 gap-2 font-vazir cursor-pointer"
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Synergy Products Cross-sell */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user