AOS component

site/app/(marketing)/layout.tsx

@@ -1,5 +1,6 @@
 import Header from '@/components/layout/Header';
 import Footer from '@/components/layout/Footer';
+import AOS from '@/components/AOS';
 
 export default function CoreLayout({
   children
@@ -8,9 +9,11 @@ export default function CoreLayout({
 }) {
   return (
     <>
-      <Header />
-      <main className="main">{children}</main>
-      <Footer />
+      <AOS>
+        <Header />
+        <main className="main">{children}</main>
+        <Footer />
+      </AOS>
     </>
   );
 }

site/components/AOS.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { useEffect } from 'react';
+
+import AOS from 'aos';
+
+export default function AOSComponent({ children }: { children: React.ReactNode }) {
+  useEffect(() => {
+    AOS.init();
+  }, []);
+
+  return <>{children}</>;
+}

site/components/layout/hero/Ui.tsx

@@ -1,6 +1,7 @@
 import Browser from '@/components/Browser';
 import ResponsiveImage from '@/components/ResponsiveImage';
 import { uiDownloadUrl } from '@/config/site';
+import React from 'react';
 
 export default function LayoutHeroUi() {
   return (
@@ -11,8 +12,7 @@ export default function LayoutHeroUi() {
             Develop beautiful web apps with Tabler
           </h1>
           <p className="hero-description mt-4" data-aos="zoom-y-out" data-aos-delay="150">
-            Tabler is a free and open source web application UI kit based on Bootstrap&nbsp;5, with hundreds responsive
-            components and multiple layouts.
+            Tabler is a free and open source web application UI kit based on Bootstrap&nbsp;5, with hundreds responsive components and multiple layouts.
           </p>
 
           <div className="mt-5" data-aos="zoom-y-out" data-aos-delay="300">
@@ -30,8 +30,8 @@ export default function LayoutHeroUi() {
             </div>
           </div>
 
-          <div className="hero-img img-overlap-margin">
-            <Browser data-aos="zoom-y-out" data-aos-delay="450">
+          <div className="hero-img img-overlap-margin" data-aos="zoom-y-out" data-aos-delay="450">
+            <Browser>
               <ResponsiveImage src="/img/tabler/preview.png" width={1040} height={760} priority />
             </Browser>
           </div>

site/styles/vendors/_animate.scss

@@ -1,5 +1,5 @@
 $aos-distance: 50px;
-// @import 'aos/src/sass/aos.scss';
+@import 'aos/src/sass/aos.scss';
 
 
 @keyframes float {