temporary images for intro

src/components/onboarding/Intro/index.tsx

@@ -1,5 +1,29 @@
+import TempImage from '@/public/assets/graphics/cat404.png';
+import Image from 'next/image';
+import styles from './style.module.scss';
+
 const Intro = () => {
-  return <p>hey</p>;
+  return (
+    <div className={styles.wrapper}>
+      <Image
+        src={TempImage}
+        alt="temp image"
+        width={256}
+        height={256}
+        className={styles.image}
+        style={{ animationDelay: '0.2s' }}
+      />
+      <Image src={TempImage} alt="temp image" width={256} height={256} className={styles.image} />
+      <Image
+        src={TempImage}
+        alt="temp image"
+        width={256}
+        height={256}
+        className={styles.image}
+        style={{ animationDelay: '0.4s' }}
+      />
+    </div>
+  );
 };
 
 export default Intro;

src/components/onboarding/Intro/style.module.scss

@@ -0,0 +1,27 @@
+@use 'src/styles/vars.scss' as vars;
+
+@keyframes appear {
+  from {
+    filter: blur(2rem);
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  to {
+    filter: blur(0);
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.wrapper {
+  align-items: center;
+  display: flex;
+  flex: auto;
+  gap: 1rem;
+  justify-content: center;
+
+  .image {
+    animation: appear 1.5s backwards;
+  }
+}

src/components/onboarding/Intro/style.module.scss.d.ts

@@ -0,0 +1,11 @@
+export type Styles = {
+  appear: string;
+  image: string;
+  wrapper: string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;