feat(ui): add buttery smooth scroll reveal animations and disable annotator

app/[locale]/layout.tsx

@@ -215,7 +215,8 @@ export default async function Layout(props: {
             <Footer companyInfo={companyInfo} />
             <JsonLd />
             <AnalyticsShell />
-            {process.env.TARGET !== 'production' && <AnnotatorClientWrapper />}
+            {/* Annotator vorübergehend deaktiviert auf Staging laut Anforderung */}
+            {/* process.env.TARGET !== 'production' && <AnnotatorClientWrapper /> */}
             {feedbackEnabled && <FeedbackClientWrapper feedbackEnabled={feedbackEnabled} />}
           </TransitionProvider>
         </NextIntlClientProvider>

components/blocks/BenefitGrid.tsx

@@ -30,8 +30,8 @@ const containerVariants: Variants = {
 };
 
 const itemVariants: Variants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 40 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: [0.16, 1, 0.3, 1] } },
+  visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 
 const Icons = {
@@ -99,7 +99,7 @@ export function BenefitGrid({ badge, title, description, benefits }: BenefitGrid
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, amount: 0.1 }}
+          viewport={{ once: true, margin: "-50px" }}
         >
           {benefits.map((benefit, index) => {
             const bgPositionClasses = [

components/blocks/CertificatesBlock.tsx

@@ -93,8 +93,8 @@ export function CertificatesBlock({ badge, title, description, certificates = de
   };
 
   const itemVariants = {
-    hidden: { opacity: 0, y: 20 },
+    hidden: { opacity: 0, y: 40 },
-    show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' as const } },
+    show: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
   };
 
   if (!isMounted) {
@@ -125,8 +125,8 @@ export function CertificatesBlock({ badge, title, description, certificates = de
             <motion.div
               initial={{ opacity: 0, y: 20 }}
               whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
+              viewport={{ once: true, margin: "-50px" }}
-              transition={{ duration: 0.5 }}
+              transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
             >
               <h2 className="text-primary font-bold tracking-wider uppercase text-sm mb-3">{badgeText}</h2>
               <h3 className="font-heading text-2xl md:text-5xl font-extrabold text-neutral-dark mb-6">{titleText}</h3>

components/blocks/CompanyTimeline.tsx

@@ -118,8 +118,8 @@ export function CompanyTimeline({
                   key={i}
                   initial={{ opacity: 0, y: 40 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true, margin: "-100px" }}
+                  viewport={{ once: true, margin: "-50px" }}
-                  transition={{ duration: 0.7, ease: "easeOut" }}
+                  transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                   className="relative flex flex-col md:flex-row items-center w-full group"
                 >
                   {/* Timeline Dot with Pulse */}

components/blocks/CompetenceBentoGrid.tsx

@@ -109,10 +109,10 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
               return (
                 <motion.div 
                   key={idx}
-                  initial={{ opacity: 0, y: 20 }}
+                  initial={{ opacity: 0, y: 40 }}
                   whileInView={{ opacity: 1, y: 0 }}
-                  viewport={{ once: true }}
+                  viewport={{ once: true, margin: "-50px" }}
-                  transition={{ delay: idx * 0.1 }}
+                  transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                   className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
                 >
                   {item.href && (
@@ -136,10 +136,10 @@ export function CompetenceBentoGrid(props: CompetenceBentoGridProps) {
             return (
               <motion.div 
                 key={idx}
-                initial={{ opacity: 0, scale: 0.95 }}
+                initial={{ opacity: 0, y: 40, scale: 0.98 }}
-                whileInView={{ opacity: 1, scale: 1 }}
+                whileInView={{ opacity: 1, y: 0, scale: 1 }}
-                viewport={{ once: true }}
+                viewport={{ once: true, margin: "-50px" }}
-                transition={{ delay: idx * 0.1 }}
+                transition={{ delay: idx * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                 className={`${gridClasses} ${item.href ? 'cursor-pointer hover:-translate-y-1 transition-transform duration-300' : ''}`}
               >
                 {item.href && (

components/blocks/JobListingBlock.tsx

@@ -37,11 +37,11 @@ const containerVariants = {
 };
 
 const itemVariants = {
-  hidden: { opacity: 0, y: 30 },
+  hidden: { opacity: 0, y: 40 },
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.8, ease: [0.16, 1, 0.3, 1] as const },
+    transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] as const },
   },
 };
 

components/blocks/ReferencesSlider.tsx

@@ -127,8 +127,8 @@ export function ReferencesSlider(props: ReferencesSliderProps) {
                 key={ref.id}
                 initial={{ opacity: 0, x: 50 }}
                 whileInView={{ opacity: 1, x: 0 }}
-                viewport={{ once: true }}
+                viewport={{ once: true, margin: "-50px" }}
-                transition={{ delay: i * 0.1, duration: 0.6, ease: "easeOut" }}
+                transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
                 className="flex-shrink-0 w-[320px] md:w-[480px] snap-start group pointer-events-auto"
               >
                 <Link

components/blocks/ServiceDetailGrid.tsx

@@ -39,7 +39,7 @@ const containerVariants: Variants = {
 
 const itemVariants: Variants = {
   hidden: { opacity: 0, y: 40 },
-  visible: { opacity: 1, y: 0, transition: { duration: 0.7, ease: [0.16, 1, 0.3, 1] } },
+  visible: { opacity: 1, y: 0, transition: { duration: 1.0, ease: [0.16, 1, 0.3, 1] } },
 };
 
 const Icons = {
@@ -136,8 +136,8 @@ export function ServiceDetailGrid({
           <motion.div 
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true, amount: 0.1 }}
+            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1] }}
+            transition={{ duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
             className="max-w-4xl mx-auto mb-20 grid md:grid-cols-2 gap-0 bg-white rounded-2xl overflow-hidden shadow-lg border border-neutral-200 text-left"
           >
             {problemStatement && (
@@ -173,7 +173,7 @@ export function ServiceDetailGrid({
           variants={containerVariants}
           initial="hidden"
           whileInView="visible"
-          viewport={{ once: true, amount: 0.1 }}
+          viewport={{ once: true, margin: "-50px" }}
         >
           {panels.map((panel, idx) => {
             const isFullWidth = panel.fullWidth;

components/blocks/TeamGrid.tsx

@@ -42,10 +42,10 @@ export function TeamGrid({ members }: TeamGridProps) {
           {members.map((member, i) => (
             <motion.div
               key={member.id}
-              initial={{ opacity: 0, y: 30 }}
+              initial={{ opacity: 0, y: 40 }}
               whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true, amount: 0.1 }}
+              viewport={{ once: true, margin: "-50px" }}
-              transition={{ delay: i * 0.1, duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
+              transition={{ delay: i * 0.1, duration: 1.0, ease: [0.16, 1, 0.3, 1] }}
               className="group flex flex-col bg-white rounded-[2rem] border border-neutral-100 shadow-[0_8px_30px_rgb(0,0,0,0.04)] hover:shadow-[0_20px_40px_rgba(238,114,3,0.1)] transition-all duration-500 hover:-translate-y-2 overflow-hidden"
             >
               {/* Card Banner */}