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 ( +
+ temp image + temp image + temp image +
+ ); }; 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;