diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.module.scss b/apps/site/src/app/(home)/sections/Landing/Landing.module.scss index c6481a77..8cfc0ac7 100644 --- a/apps/site/src/app/(home)/sections/Landing/Landing.module.scss +++ b/apps/site/src/app/(home)/sections/Landing/Landing.module.scss @@ -1,15 +1,25 @@ +@use "bootstrap-utils" as bootstrap; + .landing { - padding-top: 121.27%; - background-image: url("~@/assets/background/ocean-sand-background.svg"); + padding-top: 216.82%; + background-image: url("~@/assets/background/ocean-sand-mobile-background.svg"); background-size: cover; display: flex; flex-direction: column; justify-content: center; align-items: center; - text-align: center; + + @include bootstrap.media-breakpoint-up(md) { + padding-top: 121.27%; + background-image: url("~@/assets/background/ocean-sand-background.svg"); + } } .title { - margin-top: -190%; + margin-top: -355%; + + @include bootstrap.media-breakpoint-up(md) { + margin-top: -190%; + } } diff --git a/apps/site/src/app/(home)/sections/Landing/Title.module.scss b/apps/site/src/app/(home)/sections/Landing/Title.module.scss index be1109fe..c416b830 100644 --- a/apps/site/src/app/(home)/sections/Landing/Title.module.scss +++ b/apps/site/src/app/(home)/sections/Landing/Title.module.scss @@ -1,4 +1,11 @@ +@use "bootstrap-utils" as bootstrap; + .title { - width: clamp(0px, 40vw, 40vw); - height: clamp(0px, 14.53vw, 14.53vw); + width: 70vw; + height: 25.42vw; + + @include bootstrap.media-breakpoint-up(md) { + width: 40vw; + height: 14.53vw; + } } diff --git a/apps/site/src/assets/background/anteater-head-tiling.gif b/apps/site/src/assets/background/anteater-head-tiling.gif deleted file mode 100644 index 36cb53e2..00000000 Binary files a/apps/site/src/assets/background/anteater-head-tiling.gif and /dev/null differ diff --git a/apps/site/src/assets/background/ocean-sand-background.svg b/apps/site/src/assets/background/ocean-sand-background.svg index 4d649b14..10d48ba3 100644 --- a/apps/site/src/assets/background/ocean-sand-background.svg +++ b/apps/site/src/assets/background/ocean-sand-background.svg @@ -1,5 +1,6 @@ + @@ -33,6 +34,49 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/assets/background/ocean-sand-mobile-background.svg b/apps/site/src/assets/background/ocean-sand-mobile-background.svg new file mode 100644 index 00000000..357a29c9 --- /dev/null +++ b/apps/site/src/assets/background/ocean-sand-mobile-background.svg @@ -0,0 +1,124 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/site/src/lib/styles/globals.scss b/apps/site/src/lib/styles/globals.scss index f5609e83..384eb0e7 100644 --- a/apps/site/src/lib/styles/globals.scss +++ b/apps/site/src/lib/styles/globals.scss @@ -3,7 +3,11 @@ $container-padding: 8rem; .background { - background: linear-gradient(#009de9 50%, #00a6c4 60%); + background: linear-gradient(#01a6c4, #01a7c5 67%, #00c1a9 82%, #8dbd9e); + + @media screen and (min-height: 600px) { + background: #01a6c4; + } } .accordion {