fx

src/app/eternal-ai/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import EternalAi from '@/modules/eternal-ai';
+
+export default function EternalAiPage() {
+  return (
+    <EternalAi />
+  );
+}

src/modules/eternal-ai/index.tsx

@@ -0,0 +1,10 @@
+import s from './styles.module.scss';
+import Image from 'next/image';
+
+export default function EternalAi() {
+
+  return <div className={s.eternalAi}>
+    <video className={s.eternalAi_video} playsInline loop autoPlay muted src={'landing/loop-videos.webm'} />
+    <Image loading={'eager'} src={'landing/images/eternail.svg'} width={485} height={213} alt={'eternail'} />
+  </div>;
+}

src/modules/eternal-ai/styles.module.scss

@@ -0,0 +1,26 @@
+.eternalAi {
+  display: flex;
+  height: 100vh;
+  align-items: center;
+  justify-content: center;
+  padding: 32px;
+
+  video {
+    mix-blend-mode: luminosity;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    top: 0;
+    left: 0;
+  }
+
+  img {
+    aspect-ratio: 485/213;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    position: relative;
+    z-index: 2;
+  }
+}