Marc Mintel
ce513080d2
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 22s
Build & Deploy / 🧪 QA (push) Failing after 1m5s
Build & Deploy / 🏗️ Build (push) Has been skipped
Build & Deploy / 🚀 Deploy (push) Has been skipped
Build & Deploy / 🧪 Post-Deploy Verification (push) Has been skipped
Build & Deploy / 🔔 Notify (push) Successful in 2s
- Refactor app/[locale]/[slug]/page.tsx to handle fullBleed layouts cleanly - Fix heading styling on 'About Us' and other MDX pages - Implement staggered Framer Motion animations across all core blocks - Resolve InteractiveGermanyMap reference error - Standardize typography tokens for prose and custom headings - Consolidate support CTA placement
74 lines
2.3 KiB
TypeScript
74 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import TrackedLink from '@/components/analytics/TrackedLink';
|
|
import { getButtonClasses, ButtonOverlay } from '@/components/ui/Button';
|
|
import { motion } from 'framer-motion';
|
|
|
|
export interface SupportCTAProps {
|
|
title: string;
|
|
description: string;
|
|
buttonLabel: string;
|
|
buttonHref: string;
|
|
}
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0, y: 30 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: {
|
|
duration: 0.8,
|
|
ease: [0.16, 1, 0.3, 1],
|
|
staggerChildren: 0.15,
|
|
delayChildren: 0.1,
|
|
},
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: {
|
|
opacity: 1,
|
|
y: 0,
|
|
transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] },
|
|
},
|
|
};
|
|
|
|
export const SupportCTA: React.FC<SupportCTAProps> = (props) => {
|
|
const { title, description, buttonLabel, buttonHref } = props;
|
|
|
|
return (
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true, margin: "-100px" }}
|
|
className="mt-24 p-8 md:p-12 bg-primary-dark rounded-3xl text-white shadow-2xl relative overflow-hidden group"
|
|
>
|
|
<div className="absolute top-0 right-0 w-64 h-full bg-accent/5 -skew-x-12 translate-x-1/2 transition-transform duration-700 group-hover:translate-x-1/3" />
|
|
<div className="relative z-10 max-w-2xl">
|
|
<motion.h3 variants={itemVariants} className="text-2xl md:text-3xl font-bold mb-4">{title}</motion.h3>
|
|
<motion.p variants={itemVariants} className="text-lg text-white/70 mb-8">{description}</motion.p>
|
|
<motion.div variants={itemVariants}>
|
|
<TrackedLink
|
|
href={buttonHref}
|
|
className={getButtonClasses('accent', 'lg')}
|
|
eventProperties={{
|
|
location: 'block_support_cta',
|
|
}}
|
|
>
|
|
<span className="relative z-10 flex items-center justify-center gap-2 transition-colors duration-500 group-hover/btn:text-primary-dark">
|
|
{buttonLabel}
|
|
<span className="ml-2 transition-transform group-hover/btn:translate-x-1">
|
|
→
|
|
</span>
|
|
</span>
|
|
<ButtonOverlay variant="accent" />
|
|
</TrackedLink>
|
|
</motion.div>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|