img {
+ opacity: 0.8;
+ position: absolute;
+ top: -1rem;
+ left: -1rem;
+ offset-path: path('${d}');
+ animation: move ${duration};
+ animation-fill-mode: both;
+ animation-delay: ${!invert ? '300ms' : '0s'};
+ @keyframes move {
+ 0% {
+ opacity: 0
+ offset-distance: 0%;
+ }
+ 10 % {
+ opacity: 1;
+ }
+ 30% {
+ filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.6));
+ }
+ 70% {
+ filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.1));
+ }
+ 90% {
+ offset-distance: 100%;
+ opacity: 1
+ }
+ 100% {
+ offset-distance: 100%;
+ opacity: 0
+ }
+ }
+ }
+ svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 200px;
+ height: 100px;
+ }
+ path {
+ stroke-dasharray: 230;
+ stroke-dashoffset: 230;
+ opacity: 0;
+ animation: draw ${duration};
+ animation-fill-mode: both;
+ }
+
+ @keyframes draw {
+ 0% {
+ opacity: 0;
+ stroke-dashoffset: 230;
+ stroke: red;
+ }
+ 30% {
+ stroke: red;
+ opacity: 1;
+ }
+ 90% {
+ stroke-dashoffset: 10;
+ stroke: #000094;
+ opacity: 1
+ }
+ 100%{
+ stroke-dashoffset: 10;
+
+ stroke: #000094;
+ opacity: 0;
+ }
+ }
+ `}
+ >
+
+
+
+)
diff --git a/web/app/UI.tsx b/web/app/UI.tsx
index 3393d4b..862d262 100644
--- a/web/app/UI.tsx
+++ b/web/app/UI.tsx
@@ -38,6 +38,7 @@ export const Cards = styled.div`
flex-wrap: wrap;
`
export const Header = styled.header`
+ position: relative;
display: flex;
align-items: center;
justify-content: center;
diff --git a/web/app/animation.svg b/web/app/animation.svg
new file mode 100644
index 0000000..a9c524e
--- /dev/null
+++ b/web/app/animation.svg
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/web/app/page.tsx b/web/app/page.tsx
index 1f6c0f3..61b63d5 100644
--- a/web/app/page.tsx
+++ b/web/app/page.tsx
@@ -3,6 +3,7 @@ import { Cards, LandingWrapper, Header, Card, LinkCard } from './UI'
import type { Metadata } from 'next'
import Image from 'next/image'
import logo from '@/public/logo.svg'
+import AnimatedIllustration from './AnimatedIllustrastion'
export const metadata: Metadata = {
title:
@@ -13,6 +14,8 @@ export const metadata: Metadata = {
export default () => (