diff --git a/public/background.svg b/public/background.svg new file mode 100644 index 0000000..b05b477 --- /dev/null +++ b/public/background.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/lightning.svg b/public/lightning.svg new file mode 100644 index 0000000..2a543b7 --- /dev/null +++ b/public/lightning.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/app/favicon.ico b/src/app/favicon.ico index 718d6fe..53a43fd 100644 Binary files a/src/app/favicon.ico and b/src/app/favicon.ico differ diff --git a/src/app/globals.css b/src/app/globals.css index a511208..e7eb104 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -89,3 +89,113 @@ @apply flex items-center justify-between; } } + + + +/* Lightning SVGs */ + +.lightning { + position: fixed; + height: 5rem; + width: 5rem; + top: -10%; + z-index: -1; + opacity: 0.4; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + cursor: default; + -webkit-animation-name: lightnings-fall, lightnings-shake; + -webkit-animation-duration: 10s, 3s; + -webkit-animation-timing-function: linear, ease-in-out; + -webkit-animation-iteration-count: infinite, infinite; + -webkit-animation-play-state: running, running; + animation-name: lightnings-fall, lightnings-shake; + animation-duration: 10s, 3s; + animation-timing-function: linear, ease-in-out; + animation-iteration-count: infinite, infinite; + animation-play-state: running, running; +} + +@-webkit-keyframes lightnings-fall { + 0% { top: -10% } + 100% { top: 100% } +} + +@-webkit-keyframes lightnings-shake { + 0% { -webkit-transform: translateX(0px); transform: translateX(0px) } + 50% { -webkit-transform: translateX(80px); transform: translateX(80px) } + 100% { -webkit-transform: translateX(0px); transform: translateX(0px) } +} + +@keyframes lightnings-fall { + 0% { top: -10% } + 100% { top: 100% } +} + +@keyframes lightnings-shake { + 0% { transform: translateX(0px) } + 50% { transform: translateX(80px) } + 100% { transform: translateX(0px) } +} + +.lightning:nth-of-type(0) { + left: 1%; + -webkit-animation-delay: 0s, 0s; + animation-delay: 0s, 0s; +} + +.lightning:nth-of-type(1) { + left: 10%; + -webkit-animation-delay: 1s, 1s; + animation-delay: 1s, 1s; +} + +.lightning:nth-of-type(2) { + left: 20%; + -webkit-animation-delay: 6s, .5s; + animation-delay: 6s, .5s; +} + +.lightning:nth-of-type(3) { + left: 30%; + -webkit-animation-delay: 4s, 2s; + animation-delay: 4s, 2s; +} + +.lightning:nth-of-type(4) { + left: 40%; + -webkit-animation-delay: 2s, 2s; + animation-delay: 2s, 2s; +} + +.lightning:nth-of-type(5) { + left: 50%; + -webkit-animation-delay: 8s, 3s; + animation-delay: 8s, 3s; +} + +.lightning:nth-of-type(6) { + left: 60%; + -webkit-animation-delay: 6s, 2s; + animation-delay: 6s, 2s; +} + +.lightning:nth-of-type(7) { + left: 70%; + -webkit-animation-delay: 2.5s, 1s; + animation-delay: 2.5s, 1s; +} + +.lightning:nth-of-type(8) { + left: 80%; + -webkit-animation-delay: 1s, 0s; + animation-delay: 1s, 0s; +} + +.lightning:nth-of-type(9) { + left: 90%; + -webkit-animation-delay: 3s, 1.5s; + animation-delay: 3s, 1.5s; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index fe97a5e..80cb00b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,7 +20,25 @@ export default function RootLayout({ }) { return ( - + +
+ + + + + + + + + +
{children}