From 4ba247e82c880aea78cd240b95fccdf16d6a521e Mon Sep 17 00:00:00 2001
From: ayrisdev <ayris.dev@gmail.com>
Date: Tue, 14 Apr 2026 12:42:58 +0300
Subject: [PATCH] Refactor animation variants and fix JSX text for build
 stability

---
 app/[locale]/fleet/[slug]/page.tsx | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/app/[locale]/fleet/[slug]/page.tsx b/app/[locale]/fleet/[slug]/page.tsx
index e7e83a0..ad51524 100644
--- a/app/[locale]/fleet/[slug]/page.tsx
+++ b/app/[locale]/fleet/[slug]/page.tsx
@@ -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}