Refactor animation variants and fix JSX text for build stability
This commit is contained in:
@@ -12,6 +12,16 @@ interface PageProps {
|
||||
params: Promise<{ locale: string; slug: string }>;
|
||||
}
|
||||
|
||||
const fadeInUp: Variants = {
|
||||
hidden: { opacity: 0, y: 40 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
|
||||
};
|
||||
|
||||
const staggerContainer: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.15 } }
|
||||
};
|
||||
|
||||
export default function YachtPage({ params }: PageProps) {
|
||||
const { slug, locale: _locale } = use(params);
|
||||
const yacht = yachts.find((y) => y.slug === slug);
|
||||
@@ -50,23 +60,13 @@ export default function YachtPage({ params }: PageProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const fadeInUp: Variants = {
|
||||
hidden: { opacity: 0, y: 40 },
|
||||
visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
|
||||
};
|
||||
|
||||
const staggerContainer: Variants = {
|
||||
hidden: { opacity: 0 },
|
||||
visible: { opacity: 1, transition: { staggerChildren: 0.15 } }
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-surface">
|
||||
<main className="bg-surface min-h-screen">
|
||||
{/* Editorial Hero Section */}
|
||||
<section className="relative h-[90vh] md:h-screen w-full overflow-hidden">
|
||||
<section className="relative h-[70vh] md:h-[90vh] w-full overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ scale: 1.1, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
initial={{ scale: 1.1 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ duration: 1.5, ease: "easeOut" }}
|
||||
className="absolute inset-0 z-0"
|
||||
>
|
||||
@@ -89,7 +89,7 @@ export default function YachtPage({ params }: PageProps) {
|
||||
className="flex flex-col items-center"
|
||||
>
|
||||
<motion.span variants={fadeInUp} className="font-label text-[10px] md:text-xs tracking-[0.5em] text-secondary uppercase mb-6">
|
||||
The Fleet Collection
|
||||
{"The Fleet Collection"}
|
||||
</motion.span>
|
||||
<motion.h1 variants={fadeInUp} className="text-white font-headline text-5xl md:text-8xl lg:text-9xl mb-4 uppercase tracking-tighter">
|
||||
{yacht.name}
|
||||
|
||||
Reference in New Issue
Block a user