Add New GSAP Images and Update 'neler-yapariz' Template: Introduced new images for GSAP features, enhancing visual content in the 'neler-yapariz' template. Updated the template to include these images in the flip section, improving the overall aesthetic and user engagement. Additionally, made localization adjustments to ensure all text elements are translatable, further enhancing the user experience across different languages.

resources/views/templates/neler-yapariz.blade.php

@@ -19,9 +19,7 @@
     <main id="smooth-content" class="main">
         @include('templates.neler-yapariz.sections.hero')
 
-        <div id="content" class="">
             @include('templates.neler-yapariz.sections.flip')
-            @include('templates.neler-yapariz.sections.scrolltrigger')
             @include('templates.neler-yapariz.sections.slider')
             @include('templates.neler-yapariz.sections.inertia')
             @include('templates.neler-yapariz.sections.text')

resources/views/templates/neler-yapariz/css/main.css

@@ -2947,6 +2947,9 @@ body {
 ._w-ch {
     max-width: 41ch
 }
+.explainer-comp {
+    display: none !important;
+}
 
 .sub-nav-bg {
     background-color: var(--secondary);

resources/views/templates/neler-yapariz/js/section-selector.js

@@ -23,6 +23,30 @@ const createObserver = (section, cb) => {
 
     const sections = [...document.querySelectorAll("section")];
 
+    // Navigation height'ini hesapla (logo height'i ve üst/alt boşluklar için)
+    const navWrapper = document.querySelector("[data-module='nav']");
+    const navElement = navWrapper?.querySelector(".nav");
+    const logoElement = navWrapper?.querySelector(".logo-banner-w");
+    const getNavHeight = () => {
+      if (navWrapper && navElement) {
+        // Navigation element'inin toplam height'ini al (padding dahil)
+        const navHeight = navElement.offsetHeight;
+        
+        // Logo element'inin üstündeki boşluğu hesapla
+        if (logoElement) {
+          const logoRect = logoElement.getBoundingClientRect();
+          const navRect = navElement.getBoundingClientRect();
+          const topSpace = logoRect.top - navRect.top;
+          
+          // Logo height'i + üstündeki boşluk + altındaki boşluk
+          return navHeight + topSpace;
+        }
+        
+        return navHeight;
+      }
+      return 0;
+    };
+
     sections.forEach((section, index) => {
       createObserver(section, () => {
         items[currentIndex].classList.remove("current");
@@ -46,7 +70,15 @@ let flipAnimation = null
 
     items.forEach((item, index) => {
       item.addEventListener("click", () => {
-        lenis.scrollTo("#" + items[index].dataset.to);
+        const targetSection = document.getElementById(items[index].dataset.to);
+        if (targetSection) {
+          const navHeight = getNavHeight();
+          lenis.scrollTo(targetSection, {
+            offset: -navHeight
+          });
+        } else {
+          lenis.scrollTo("#" + items[index].dataset.to);
+        }
       });
 
       item.addEventListener("mouseenter", () => {

resources/views/templates/neler-yapariz/navigation.blade.php

@@ -5,16 +5,16 @@
     </div>
     </div>
     <div class="overflow-w">
-        <div class="sub-nav-bg" style="translate: none; rotate: none; scale: none; transform: translate(0%, 0%) translate(0px, -71.9062px);">
+        <div class="sub-nav-bg" style="translate: none; rotate: none; scale: none; transform: translate(0%, 150%) translate(0px, -71.9062px);">
             <ul data-animate="sectionselector" role="list" class="sub-nav-w w-list-unstyled">
                 <li data-to="flip" class="link-li-w">
-                    <div>Flip</div>
+                    <div>{{t("Faaliyetlerimiz")}}</div>
                 </li>
                 <li data-to="scrolltrigger" class="link-li-w">
                     <div>Scroll Trigger</div>
                 </li>
                 <li data-to="slider" class="link-li-w current">
-                    <div>Slider</div>
+                    <div>{{t("Yaptıklarımız")}}</div>
                     <div data-selector="highlight" class="current-highlight" data-flip-id="auto-1" style=""></div>
                 </li>
                 <li data-to="inertia" class="link-li-w">