fix: revert HeroVideo aspect-ratio, fix ProblemSection scroll animation with useEffect

src/components/home/HeroVideo.tsx

@@ -21,7 +21,7 @@ export default function HeroVideo({ locale = "sr" }: HeroVideoProps) {
   };
 
   return (
-    <section className="relative w-full overflow-hidden" style={{ aspectRatio: '3/4', maxHeight: '100vh' }}>
+    <section className="relative min-h-screen w-full overflow-hidden">
       {/* Background Image with Overlay */}
       <div className="absolute inset-0">
         <Image

src/components/home/ProblemSection.tsx

@@ -1,13 +1,34 @@
 "use client";
 
 import { useTranslations } from "next-intl";
+import { useEffect, useRef } from "react";
 
 export default function ProblemSection() {
   const t = useTranslations("ProblemSection");
   const problems = t.raw("problems") as Array<{ problem: string; description: string }>;
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add("animate-visible");
+            observer.unobserve(entry.target);
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+
+    const animatedElements = sectionRef.current?.querySelectorAll(".animate-on-scroll");
+    animatedElements?.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
 
   return (
-    <section className="py-24 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
+    <section ref={sectionRef} className="py-24 bg-gradient-to-b from-[#fefcfb] to-[#faf9f7]">
       <div className="container mx-auto px-4">
         <div className="max-w-3xl mx-auto text-center animate-on-scroll">
           <span className="text-xs uppercase tracking-[0.3em] text-[#c9a962] mb-4 block font-medium">
@@ -55,21 +76,6 @@ export default function ProblemSection() {
         </div>
       </div>
 
-      <script dangerouslySetInnerHTML={{ __html: `
-        (function() {
-          const observer = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-              if (entry.isIntersecting) {
-                entry.target.classList.add('animate-visible');
-                observer.unobserve(entry.target);
-              }
-            });
-          }, { threshold: 0.1 });
-          
-          document.querySelectorAll('.animate-on-scroll').forEach(el => observer.observe(el));
-        })();
-      `}} />
-
       <style>{`
         @keyframes fadeInUp {
           from {