diff --git a/src/components/onboarding/Intro/index.tsx b/src/components/onboarding/Intro/index.tsx
index 3a6e0c28..9509a61c 100644
--- a/src/components/onboarding/Intro/index.tsx
+++ b/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
hey
;
+ return (
+
+
+
+
+
+ );
};
export default Intro;
diff --git a/src/components/onboarding/Intro/style.module.scss b/src/components/onboarding/Intro/style.module.scss
new file mode 100644
index 00000000..545723d7
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/src/components/onboarding/Intro/style.module.scss.d.ts b/src/components/onboarding/Intro/style.module.scss.d.ts
new file mode 100644
index 00000000..dadb0fb5
--- /dev/null
+++ b/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;