Add marketing motion reveals to blog and occasions
This commit is contained in:
Codex Agent
@@ -7,6 +7,7 @@ import { Card, CardContent } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { motion, useReducedMotion } from 'framer-motion';
|
||||
|
||||
interface OccasionsProps {
|
||||
type: string;
|
||||
@@ -17,6 +18,20 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
const { localizedPath } = useLocalizedRoutes();
|
||||
const locale = i18n.language || 'de';
|
||||
const isEn = locale.toLowerCase().startsWith('en');
|
||||
const shouldReduceMotion = useReducedMotion();
|
||||
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 occasionsContent = {
|
||||
hochzeit: {
|
||||
@@ -123,9 +138,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.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-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<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-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -138,10 +153,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.3fr)_1fr] md:items-center">
|
||||
<div className="space-y-5">
|
||||
<Badge
|
||||
@@ -199,15 +215,16 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl space-y-10">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||||
<div className="space-y-8">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={stagger}>
|
||||
<motion.div className="space-y-8" variants={revealUp}>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">{t('occasions.weddings.benefits_title')}</h2>
|
||||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||||
@@ -254,9 +271,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<li>5. After the wedding, go through the gallery together and mark favorites for your album.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<aside className="space-y-6">
|
||||
<motion.aside className="space-y-6" variants={revealUp}>
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
@@ -309,51 +326,55 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</motion.aside>
|
||||
</motion.div>
|
||||
|
||||
<Separator className="my-8" />
|
||||
<motion.div variants={revealUp}>
|
||||
<Separator className="my-8" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
What couples say
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
“We ended up with more than 800 guest photos – from little mishaps to the most emotional moments. Our
|
||||
photographer loved how well the Fotospiel App complemented her work.”
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<motion.div variants={revealUp}>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
What couples say
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
“We ended up with more than 800 guest photos – from little mishaps to the most emotional moments. Our
|
||||
photographer loved how well the Fotospiel App complemented her work.”
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Next step
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
Try the Fotospiel App with a test event or set up your wedding gallery right away. You can start small and
|
||||
upgrade later at any time.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button asChild size="sm" className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Next step
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
Try the Fotospiel App with a test event or set up your wedding gallery right away. You can start small and
|
||||
upgrade later at any time.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<Button asChild size="sm" className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||||
>
|
||||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
}
|
||||
@@ -363,9 +384,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.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-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<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-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -378,10 +399,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.3fr)_1fr] md:items-center">
|
||||
<div className="space-y-5">
|
||||
<Badge
|
||||
@@ -438,14 +460,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl space-y-10">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">{t('occasions.weddings.benefits_title')}</h2>
|
||||
@@ -549,12 +572,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Separator className="my-8" />
|
||||
<motion.div variants={revealUp}>
|
||||
<Separator className="my-8" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<motion.div variants={revealUp}>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Was Paare berichten
|
||||
@@ -566,7 +592,7 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Nächster Schritt
|
||||
@@ -590,8 +616,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
@@ -604,9 +631,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.title} />
|
||||
|
||||
<section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -619,10 +646,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.4fr)_1fr] md:items-center">
|
||||
<div className="space-y-5">
|
||||
<Badge
|
||||
@@ -679,16 +707,17 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl space-y-10">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">How to turn your party into a photo challenge</h2>
|
||||
@@ -789,29 +818,32 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</li>
|
||||
</ul>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</Card>
|
||||
</aside>
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={revealUp}>
|
||||
<Separator className="my-8" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div variants={revealUp}>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
What hosts say
|
||||
</p>
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
What hosts say
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
“The kids loved the challenges – and we ended up with all photos in one place instead of scrolling through
|
||||
hundreds of chat messages.”
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Next step
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Next step
|
||||
</p>
|
||||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||||
Create your birthday event in the Fotospiel App now and test the flow with a few friends – your QR code will be
|
||||
@@ -833,8 +865,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
}
|
||||
@@ -844,9 +877,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.title} />
|
||||
|
||||
<section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -859,10 +892,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.4fr)_1fr] md:items-center">
|
||||
<div className="space-y-5">
|
||||
<Badge
|
||||
@@ -920,14 +954,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl space-y-10">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">So wird eure Party zur Foto-Challenge</h2>
|
||||
@@ -1030,12 +1065,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Separator className="my-8" />
|
||||
<motion.div variants={revealUp}>
|
||||
<Separator className="my-8" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<motion.div variants={revealUp}>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Was Gastgeber:innen berichten
|
||||
@@ -1047,7 +1085,7 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Nächster Schritt
|
||||
@@ -1071,8 +1109,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
@@ -1085,9 +1124,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.title} />
|
||||
|
||||
<section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -1100,10 +1139,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.5fr)_1fr] md:items-center">
|
||||
<div className="space-y-5">
|
||||
<Badge
|
||||
@@ -1159,16 +1199,17 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl space-y-10">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Why the Fotospiel App fits your company</h2>
|
||||
@@ -1271,12 +1312,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Separator className="my-8" />
|
||||
<motion.div variants={revealUp}>
|
||||
<Separator className="my-8" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<motion.div variants={revealUp}>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
What companies say
|
||||
@@ -1288,7 +1332,7 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Next step
|
||||
@@ -1312,8 +1356,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
@@ -1324,9 +1369,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.title} />
|
||||
|
||||
<section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -1339,10 +1384,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-8 p-6 md:p-10">
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.5fr)_1fr] md:items-center">
|
||||
<div className="space-y-5">
|
||||
<Badge
|
||||
@@ -1400,14 +1446,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl space-y-10">
|
||||
<div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Warum die Fotospiel App fürs Unternehmen passt</h2>
|
||||
@@ -1511,12 +1558,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</aside>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Separator className="my-8" />
|
||||
<motion.div variants={revealUp}>
|
||||
<Separator className="my-8" />
|
||||
</motion.div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<motion.div variants={revealUp}>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Was Unternehmen berichten
|
||||
@@ -1528,7 +1578,7 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="spacey-3 space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
Nächster Schritt
|
||||
@@ -1552,8 +1602,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
@@ -1567,9 +1618,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.title} />
|
||||
|
||||
<section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -1582,10 +1633,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-6 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-6 p-6 md:p-10">
|
||||
<div className="space-y-4 text-center md:text-left">
|
||||
<Badge
|
||||
variant="outline"
|
||||
@@ -1613,14 +1665,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-5xl space-y-10">
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-8 md:grid-cols-2" variants={revealUp}>
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
@@ -1646,8 +1699,8 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
@@ -1658,9 +1711,9 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<MarketingLayout title={content.title}>
|
||||
<Head title={content.title} />
|
||||
|
||||
<section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14">
|
||||
<div className="container mx-auto max-w-5xl space-y-8">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||||
<section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||||
<nav className="flex flex-wrap items-center gap-2">
|
||||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||||
{t('nav.home')}
|
||||
@@ -1673,10 +1726,11 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||||
{t('nav.discover_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<Card className="rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-6 p-6 md:p-10">
|
||||
<motion.div variants={revealUp}>
|
||||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||||
<CardContent className="space-y-6 p-6 md:p-10">
|
||||
<div className="space-y-4 text-center md:text-left">
|
||||
<Badge
|
||||
variant="outline"
|
||||
@@ -1704,14 +1758,15 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white px-4 py-14 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-5xl space-y-10">
|
||||
<div className="grid gap-8 md:grid-cols-2">
|
||||
<section className="bg-white px-4 py-14 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">
|
||||
<motion.div className="container mx-auto max-w-5xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||||
<motion.div className="grid gap-8 md:grid-cols-2" variants={revealUp}>
|
||||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||||
<CardContent className="space-y-3 p-6">
|
||||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||||
@@ -1737,8 +1792,8 @@ const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||||
</ol>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</section>
|
||||
</MarketingLayout>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user