Add marketing motion reveals to blog and occasions
This commit is contained in:
Codex Agent
@@ -8,6 +8,7 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
|
||||
interface PostSummary {
|
||||
id: number;
|
||||
@@ -56,12 +57,26 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
);
|
||||
const { t, i18n } = useTranslation('marketing');
|
||||
const locale = i18n.language || 'de';
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
const articles = posts?.data ?? [];
|
||||
const isLandingLayout = posts.current_page === 1;
|
||||
const featuredPost = isLandingLayout ? articles[0] : null;
|
||||
const gridPosts = isLandingLayout ? articles.slice(1, 4) : [];
|
||||
const listPosts = isLandingLayout ? [] : articles;
|
||||
const dateLocale = locale === 'en' ? 'en-US' : 'de-DE';
|
||||
const viewportOnce = { once: true, amount: 0.25 };
|
||||
const revealUp = {
|
||||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 18 },
|
||||
visible: {
|
||||
opacity: 1,
|
||||
y: 0,
|
||||
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
|
||||
},
|
||||
};
|
||||
const stagger = {
|
||||
hidden: {},
|
||||
visible: { transition: { staggerChildren: 0.12 } },
|
||||
};
|
||||
|
||||
const buildArticleHref = React.useCallback(
|
||||
(slug?: string | null) => {
|
||||
@@ -194,8 +209,20 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
|
||||
return (
|
||||
<div className="space-y-16">
|
||||
<div className="grid gap-8 lg:grid-cols-12 lg:items-center">
|
||||
<div className="order-2 space-y-6 rounded-3xl border border-gray-200 bg-white p-8 shadow-xl dark:border-gray-800 dark:bg-gray-950 lg:order-1 lg:col-span-6">
|
||||
<motion.div
|
||||
className="grid gap-8 lg:grid-cols-12 lg:items-center"
|
||||
variants={stagger}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
>
|
||||
<motion.div
|
||||
className="order-2 space-y-6 rounded-3xl border border-gray-200 bg-white p-8 shadow-xl dark:border-gray-800 dark:bg-gray-950 lg:order-1 lg:col-span-6"
|
||||
variants={revealUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
>
|
||||
<Badge variant="outline" className="w-fit border-pink-200 text-pink-600 dark:border-pink-500 dark:text-pink-300">
|
||||
{t('blog.posts_title')}
|
||||
</Badge>
|
||||
@@ -213,9 +240,15 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="order-1 lg:order-2 lg:col-span-6">
|
||||
<div className="relative overflow-hidden rounded-3xl border border-gray-200 bg-gradient-to-br from-pink-200 via-white to-amber-100 shadow-2xl dark:border-gray-800 dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
|
||||
</motion.div>
|
||||
<motion.div
|
||||
className="order-1 lg:order-2 lg:col-span-6"
|
||||
variants={revealUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
>
|
||||
<div className="relative overflow-hidden rounded-3xl border border-gray-200 bg-gradient-to-br from-pink-200 via-white to-amber-100 shadow-2xl transition-transform duration-200 ease-out hover:-translate-y-1 dark:border-gray-800 dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
|
||||
{featuredPost.featured_image && (
|
||||
<img
|
||||
src={featuredPost.featured_image}
|
||||
@@ -229,82 +262,100 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
|
||||
{gridPosts.length > 0 && (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
<motion.div
|
||||
className="grid gap-6 md:grid-cols-2 lg:grid-cols-3"
|
||||
variants={stagger}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
>
|
||||
{gridPosts.map((post) => (
|
||||
<Card key={post.id} className="flex h-full flex-col overflow-hidden border-gray-200 shadow-sm transition hover:-translate-y-1 hover:shadow-lg dark:border-gray-800">
|
||||
{post.featured_image && (
|
||||
<div className="aspect-video">
|
||||
<img src={post.featured_image} alt={post.title} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="flex flex-1 flex-col space-y-4 p-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
{post.title || 'Untitled'}
|
||||
</h3>
|
||||
<MarkdownPreview
|
||||
html={post.excerpt_html}
|
||||
fallback={post.excerpt}
|
||||
className="text-sm leading-relaxed text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
{renderPostMeta(post)}
|
||||
<Button asChild variant="ghost" className="justify-start p-0 text-pink-600 hover:text-pink-700">
|
||||
<Link href={buildArticleHref(post.slug)}>
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<motion.div key={post.id} variants={revealUp}>
|
||||
<Card className="flex h-full flex-col overflow-hidden border-gray-200 shadow-sm transition-transform duration-200 ease-out hover:-translate-y-1 hover:shadow-lg dark:border-gray-800">
|
||||
{post.featured_image && (
|
||||
<div className="aspect-video">
|
||||
<img src={post.featured_image} alt={post.title} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
)}
|
||||
<CardContent className="flex flex-1 flex-col space-y-4 p-6">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
{post.title || 'Untitled'}
|
||||
</h3>
|
||||
<MarkdownPreview
|
||||
html={post.excerpt_html}
|
||||
fallback={post.excerpt}
|
||||
className="text-sm leading-relaxed text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1" />
|
||||
{renderPostMeta(post)}
|
||||
<Button asChild variant="ghost" className="justify-start p-0 text-pink-600 hover:text-pink-700">
|
||||
<Link href={buildArticleHref(post.slug)}>
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderListView = () => (
|
||||
<div className="space-y-6">
|
||||
<motion.div
|
||||
className="space-y-6"
|
||||
variants={stagger}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
>
|
||||
{listPosts.map((post) => (
|
||||
<Card key={post.id} className="overflow-hidden border-gray-200 shadow-sm hover:shadow-lg dark:border-gray-800">
|
||||
<div className="grid gap-0 md:grid-cols-3">
|
||||
{post.featured_image && (
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
)}
|
||||
<CardContent className="md:col-span-2">
|
||||
<div className="space-y-4 py-6">
|
||||
<h3 className="text-2xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
{post.title || 'Untitled'}
|
||||
</h3>
|
||||
<MarkdownPreview
|
||||
html={post.excerpt_html}
|
||||
fallback={post.excerpt}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
<motion.div key={post.id} variants={revealUp}>
|
||||
<Card className="overflow-hidden border-gray-200 shadow-sm transition-transform duration-200 ease-out hover:-translate-y-1 hover:shadow-lg dark:border-gray-800">
|
||||
<div className="grid gap-0 md:grid-cols-3">
|
||||
{post.featured_image && (
|
||||
<img
|
||||
src={post.featured_image}
|
||||
alt={post.title}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
{renderPostMeta(post)}
|
||||
<Button asChild variant="outline" className="w-fit border-pink-200 text-pink-600 hover:bg-pink-50 dark:border-pink-500/40 dark:text-pink-200">
|
||||
<Link href={buildArticleHref(post.slug)}>
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
<CardContent className="md:col-span-2">
|
||||
<div className="space-y-4 py-6">
|
||||
<h3 className="text-2xl font-semibold text-gray-900 dark:text-gray-50">
|
||||
{post.title || 'Untitled'}
|
||||
</h3>
|
||||
<MarkdownPreview
|
||||
html={post.excerpt_html}
|
||||
fallback={post.excerpt}
|
||||
className="text-gray-600 dark:text-gray-300"
|
||||
/>
|
||||
{renderPostMeta(post)}
|
||||
<Button asChild variant="outline" className="w-fit border-pink-200 text-pink-600 hover:bg-pink-50 dark:border-pink-500/40 dark:text-pink-200">
|
||||
<Link href={buildArticleHref(post.slug)}>
|
||||
{t('blog.read_more')}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</div>
|
||||
</Card>
|
||||
</motion.div>
|
||||
))}
|
||||
{listPosts.length === 0 && (
|
||||
<Card className="p-8 text-center text-gray-600 dark:text-gray-300">{t('blog.empty')}</Card>
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="p-8 text-center text-gray-600 dark:text-gray-300">{t('blog.empty')}</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
|
||||
return (
|
||||
@@ -312,29 +363,46 @@ const Blog: React.FC<Props> = ({ posts }) => {
|
||||
<Head title={t('blog.title')} />
|
||||
|
||||
<section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-12">
|
||||
<div className="container mx-auto max-w-3xl space-y-5 text-center">
|
||||
<Badge variant="outline" className="border-pink-200 text-pink-600 dark:border-pink-500/50 dark:text-pink-200">
|
||||
Fotospiel Blog
|
||||
</Badge>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-gray-50 md:text-4xl">{t('blog.hero_title')}</h1>
|
||||
<p className="text-base leading-relaxed text-gray-600 dark:text-gray-300 md:text-lg">{t('blog.hero_description')}</p>
|
||||
<div className="flex flex-wrap justify-center gap-2.5">
|
||||
<motion.div
|
||||
className="container mx-auto max-w-3xl space-y-5 text-center"
|
||||
variants={stagger}
|
||||
initial="hidden"
|
||||
animate="visible"
|
||||
>
|
||||
<motion.div variants={revealUp}>
|
||||
<Badge variant="outline" className="border-pink-200 text-pink-600 dark:border-pink-500/50 dark:text-pink-200">
|
||||
Fotospiel Blog
|
||||
</Badge>
|
||||
</motion.div>
|
||||
<motion.h1 className="text-3xl font-bold text-gray-900 dark:text-gray-50 md:text-4xl" variants={revealUp}>
|
||||
{t('blog.hero_title')}
|
||||
</motion.h1>
|
||||
<motion.p className="text-base leading-relaxed text-gray-600 dark:text-gray-300 md:text-lg" variants={revealUp}>
|
||||
{t('blog.hero_description')}
|
||||
</motion.p>
|
||||
<motion.div className="flex flex-wrap justify-center gap-2.5" variants={revealUp}>
|
||||
<Button asChild className="bg-[#FFB6C1] hover:bg-[#FF69B4] text-white px-6 py-2.5 text-base">
|
||||
<Link href={localizedPath('/packages')}>{t('home.cta_explore')}</Link>
|
||||
</Button>
|
||||
<Button asChild variant="outline" className="border-gray-300 text-gray-800 hover:bg-gray-100 px-6 py-2.5 text-base dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800">
|
||||
<Link href="#articles">{t('blog.hero_cta')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section id="articles" className="bg-white px-4 py-16 dark:bg-gray-950">
|
||||
<section id="articles" className="bg-white px-4 py-16 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<div className="container mx-auto max-w-6xl space-y-12">
|
||||
<div className="text-center">
|
||||
<motion.div
|
||||
className="text-center"
|
||||
variants={revealUp}
|
||||
initial="hidden"
|
||||
whileInView="visible"
|
||||
viewport={viewportOnce}
|
||||
>
|
||||
<h2 className="text-3xl font-bold text-gray-900 dark:text-gray-50">{t('blog.posts_title')}</h2>
|
||||
<Separator className="mx-auto mt-4 w-24" />
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{isLandingLayout ? renderLandingGrid() : renderListView()}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user