fix: remove framer-motion from HeroVideo for instant content visibility

src/app/[locale]/layout.tsx

@@ -54,8 +54,8 @@ export default async function LocaleLayout({
         clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID || ""}
         trackScreenViews={true}
         trackOutgoingLinks={true}
-        apiUrl="https://op.nodecrew.me/api"
+        apiUrl="/api/op"
-        scriptUrl="https://op.nodecrew.me/op1.js"
+        scriptUrl="/api/op1"
       />
       <Script
         src="/api/script.js"

src/app/globals.css

@@ -261,6 +261,25 @@
   animation: scrollBounce 1.5s ease-in-out infinite;
 }
 
+/* ============================================
+   FADE SLIDE UP ANIMATION
+   ============================================ */
+
+@keyframes fadeSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeSlideUp {
+  animation: fadeSlideUp 0.6s ease-out both;
+}
+
 /* ============================================
    UTILITIES
    ============================================ */

src/components/home/HeroVideo.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "framer-motion";
 import Link from "next/link";
 import Image from "next/image";
 import { useTranslations } from "next-intl";
@@ -23,7 +22,7 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
 
   return (
     <section className="relative min-h-screen w-full overflow-hidden">
-      {/* Background Image with Overlay - Using next/image for LCP optimization */}
+      {/* Background Image with Overlay */}
       <div className="absolute inset-0">
         <Image
           src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2574&auto=format&fit=crop"
@@ -36,21 +35,11 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
         <div className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/40 to-black/70" />
       </div>
 
-      {/* Content */}
+      {/* Content - Visible immediately, animations are enhancements */}
       <div className="relative z-10 min-h-screen flex flex-col items-center justify-center text-center text-white px-4 py-20">
-        <motion.div
+        <div className="max-w-4xl mx-auto animate-fadeSlideUp">
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.3 }}
-          className="max-w-4xl mx-auto"
-        >
           {/* Social Proof Micro */}
-          <motion.div
+          <div className="flex items-center justify-center gap-2 mb-6 animate-fadeSlideUp" style={{ animationDelay: "0.1s" }}>
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.6, delay: 0.4 }}
-            className="flex items-center justify-center gap-2 mb-6"
-          >
             <div className="flex">
               {[1, 2, 3, 4, 5].map((star) => (
                 <svg key={star} className="w-4 h-4 fill-yellow-400 text-yellow-400" viewBox="0 0 24 24">
@@ -61,36 +50,30 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
             <span className="text-sm text-white/80">
               {t("lovedBy")}
             </span>
-          </motion.div>
+          </div>
 
-          {/* Main Heading - Outcome Focused */}
+          {/* Main Heading */}
-          <motion.h1
+          <h1
-            initial={{ opacity: 0, y: 30 }}
+            className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight animate-fadeSlideUp"
-            animate={{ opacity: 1, y: 0 }}
+            style={{ animationDelay: "0.2s" }}
-            transition={{ duration: 0.8, delay: 0.5 }}
-            className="text-4xl md:text-6xl lg:text-7xl font-medium mb-6 tracking-tight leading-tight"
           >
             {t("transformHeadline")}
             <br />
             <span className="text-white/90">{t("withNaturalOils")}</span>
-          </motion.h1>
+          </h1>
 
-          {/* Subtitle - Expands on how */}
+          {/* Subtitle */}
-          <motion.p
+          <p
-            initial={{ opacity: 0, y: 20 }}
+            className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed animate-fadeSlideUp"
-            animate={{ opacity: 1, y: 0 }}
+            style={{ animationDelay: "0.3s" }}
-            transition={{ duration: 0.6, delay: 0.7 }}
-            className="text-lg md:text-xl text-white/80 mb-8 font-light max-w-2xl mx-auto leading-relaxed"
           >
             {t("subtitleText")}
-          </motion.p>
+          </p>
 
-          {/* CTA Button - Action verb + value */}
+          {/* CTA Buttons */}
-          <motion.div
+          <div
-            initial={{ opacity: 0, y: 20 }}
+            className="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fadeSlideUp"
-            animate={{ opacity: 1, y: 0 }}
+            style={{ animationDelay: "0.4s" }}
-            transition={{ duration: 0.6, delay: 0.9 }}
-            className="flex flex-col sm:flex-row items-center justify-center gap-4"
           >
             <Link
               href={`${localePath}/products`}
@@ -104,14 +87,12 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
             >
               {t("learnStory")}
             </Link>
-          </motion.div>
+          </div>
 
           {/* Trust Indicators */}
-          <motion.div
+          <div
-            initial={{ opacity: 0 }}
+            className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-white/60 animate-fadeSlideUp"
-            animate={{ opacity: 1 }}
+            style={{ animationDelay: "0.5s" }}
-            transition={{ delay: 1.2, duration: 0.8 }}
-            className="flex flex-wrap items-center justify-center gap-6 mt-12 text-sm text-white/60"
           >
             <div className="flex items-center gap-2">
               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -131,15 +112,15 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
               </svg>
               <span>{t("crueltyFree")}</span>
             </div>
-          </motion.div>
+          </div>
-        </motion.div>
+        </div>
       </div>
 
       {/* Scroll Indicator */}
       <button
         onClick={scrollToContent}
         className="absolute bottom-10 left-1/2 -translate-x-1/2 text-white/60 hover:text-white transition-colors cursor-pointer opacity-0 animate-fade-in"
-        style={{ animationDelay: '1.5s', animationFillMode: 'forwards' }}
+        style={{ animationDelay: "1.5s", animationFillMode: "forwards" }}
         aria-label="Scroll to content"
       >
         <div className="scroll-indicator">
@@ -148,4 +129,4 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
       </button>
     </section>
   );
-}
+}