diff --git a/apps/site/src/app/(home)/sections/Intro/Intro.module.scss b/apps/site/src/app/(home)/sections/Intro/Intro.module.scss index fdc172aa..5dc42433 100644 --- a/apps/site/src/app/(home)/sections/Intro/Intro.module.scss +++ b/apps/site/src/app/(home)/sections/Intro/Intro.module.scss @@ -2,15 +2,12 @@ .description { text-align: center; - font-size: 0.85rem; + font-size: 0.75rem; - @media screen and (min-width: 415px) { + @include bootstrap.media-breakpoint-up(sm) { font-size: 1rem; } - @media screen and (min-width: 500px) { - font-size: 1.25rem; - } @include bootstrap.media-breakpoint-up(xl) { font-size: 1.5rem; @@ -21,9 +18,6 @@ font-size: 1rem; font-weight: 600; - @media screen and (min-width: 415px) { - font-size: 1.25rem; - } @include bootstrap.media-breakpoint-up(sm) { font-size: 1.5rem; @@ -39,38 +33,20 @@ flex-direction: column; justify-content: center; width: 90vw; - margin-top: 3vw; + margin-top: 1vw; - @media screen and (min-width: 400px) { - margin-top: 7.5vw; - } - - @include bootstrap.media-breakpoint-up(sm) { - margin-top: 15vw; - } + transform: translateY(calc(-50% + 40vw)); - @media screen and (min-width: 650px) { - margin-top: 20vw; + @media (min-width: 400px) { + transform: translateY(calc(-50% + 40vw)); } @include bootstrap.media-breakpoint-up(md) { - margin-top: 1vw; + transform: translateY(calc(-50% + 18vw)); } - @media screen and (min-width: 850px) { - margin-top: 3vw; + @media (min-width: 1200px) { + transform: translateY(calc(-50% + 22vw)); } - @include bootstrap.media-breakpoint-up(lg) { - max-width: 80vw; - margin-top: 8vw; - } - - @include bootstrap.media-breakpoint-up(xl) { - margin-top: 12vw; - } - - @include bootstrap.media-breakpoint-up(xxl) { - margin-top: 15vw; - } } diff --git a/apps/site/src/app/(home)/sections/Landing/Characters.module.scss b/apps/site/src/app/(home)/sections/Landing/Characters.module.scss new file mode 100644 index 00000000..c0f67fcc --- /dev/null +++ b/apps/site/src/app/(home)/sections/Landing/Characters.module.scss @@ -0,0 +1,71 @@ +@use "bootstrap-utils" as bootstrap; + +.character { + position: absolute; + visibility: hidden; + right: 18vw; + top: 15.5vw; + transform: translateY(-70%); + width: 80px; + max-width: 7vw; + + @include bootstrap.media-breakpoint-up(md) { + visibility: visible; + } +} + +.characterFoam { + position: absolute; + visibility: hidden; + right: 18vw; + top: 16.4vw; + transform: translateY(-50%); + width: 80px; + max-width: 7vw; + + @include bootstrap.media-breakpoint-up(md) { + visibility: visible; + } +} + +.characterShadow { + position: absolute; + visibility: hidden; + right: 18vw; + top: 16.5vw; + transform: translateY(-20%); + width: 80px; + max-width: 7vw; + + @include bootstrap.media-breakpoint-up(md) { + visibility: visible; + } +} + +.mainCharacter { + position: absolute; + width: 300px; + visibility: hidden; + left: 10vw; + top: 32vw; + transform: translate(-50%, -50%); + max-width: 18vw; + + @include bootstrap.media-breakpoint-up(md) { + visibility: visible; + } +} + +.beachBall { + position: absolute; + width: 300px; + visibility: hidden; + right: 2vw; + top: 22vw; + transform: translate(calc(50% - 10vw), calc(-50% + 5vw)); + max-width: 14vw; + + @include bootstrap.media-breakpoint-up(md) { + visibility: visible; + } +} diff --git a/apps/site/src/app/(home)/sections/Landing/Characters.tsx b/apps/site/src/app/(home)/sections/Landing/Characters.tsx new file mode 100644 index 00000000..0de3642d --- /dev/null +++ b/apps/site/src/app/(home)/sections/Landing/Characters.tsx @@ -0,0 +1,71 @@ +import Image from "next/image"; +import { motion } from "framer-motion"; + +import waterAnteater from "@/assets/images/intro-water-anteater.svg"; +import waterAnteaterFoam from "@/assets/images/intro-character-foam.svg"; +import waterAnteaterShadow from "@/assets/images/intro-water-anteater-shadow.svg"; +import beachBall from "@/assets/images/intro-beach-ball.svg"; + +import mainCharacter from "@/assets/images/intro-main-anteater.svg"; + +import styles from "./Characters.module.scss"; + +export default function Characters() { + return ( +
+ + Anteater floating in the water + + + Reflection of anteater in the water + + + + Foam between anteater and the water + + + + Anteater standing on the shore + + + Beach ball + +
+ ); +} diff --git a/apps/site/src/app/(home)/sections/Landing/Landing.tsx b/apps/site/src/app/(home)/sections/Landing/Landing.tsx index e54553ff..c6c80ca7 100644 --- a/apps/site/src/app/(home)/sections/Landing/Landing.tsx +++ b/apps/site/src/app/(home)/sections/Landing/Landing.tsx @@ -1,6 +1,7 @@ "use client"; import ApplyButton from "./ApplyButton"; import Title from "@/app/(home)/sections/Landing/Title"; +import Characters from "./Characters"; import Intro from "../Intro"; import styles from "./Landing.module.scss"; @@ -8,6 +9,7 @@ const Landing = () => { return (
+ <ApplyButton /> <Intro /> diff --git a/apps/site/src/assets/images/intro-beach-ball.svg b/apps/site/src/assets/images/intro-beach-ball.svg new file mode 100644 index 00000000..0c1fcbc4 --- /dev/null +++ b/apps/site/src/assets/images/intro-beach-ball.svg @@ -0,0 +1,11 @@ +<svg width="182" height="184" viewBox="0 0 182 184" fill="none" xmlns="http://www.w3.org/2000/svg"> +<ellipse cx="77" cy="150" rx="77" ry="34" fill="#895C17"/> +<path d="M57.756 22.6034L57.1008 22.9778L56.5853 23.5288L46.1301 34.7052L45.699 35.1659L45.396 35.7194L37.1039 50.8615L36.7841 51.4455L36.6282 52.0928L31.9414 71.5612L31.77 72.2729L31.8099 73.0038L32.8915 92.8327L32.9315 93.567L33.1813 94.2586L37.8681 107.238L38.0927 107.859L38.4711 108.401L51.8106 127.509L52.1879 128.05L52.6924 128.474L68.5555 141.814L69.362 142.492L70.3735 142.787L96.3314 150.358L97.2906 150.638L98.2836 150.527L127.486 147.282L128.532 147.166L129.442 146.639L154.318 132.218L155.213 131.699L155.828 130.868L170.249 111.4L170.874 110.556L171.107 109.532L176.515 85.7369L176.639 85.1899V84.6288V59.7525V58.4343L175.989 57.2875L163.732 35.6559L163.353 34.987L162.79 34.4629L146.927 19.6813L146.387 19.1783L145.725 18.8526L123.733 8.03683L122.887 7.621L121.948 7.54144L100.677 5.73881L99.8819 5.67139L99.105 5.85502L79.276 10.5419L78.5728 10.7081L77.9455 11.0666L57.756 22.6034Z" fill="white" stroke="#DAFFF5" stroke-width="10"/> +<path d="M49.4211 38.121L64.5632 51.821L61.3184 57.9499L63.1211 65.1604L50.8632 74.1736L41.85 84.2683L37.1632 95.0841L35 73.4526L39.6868 51.821L49.4211 38.121Z" fill="#8E4EA8"/> +<path d="M87.6367 25.8632L80.4261 42.4474L86.1946 44.9711L89.4393 51.1L105.663 45.6921L124.41 42.4474H143.879L159.021 45.6921L167.674 51.1L169.837 48.5763L149.647 24.7816L122.608 10L103.5 10.7211L96.2893 15.7684L87.6367 25.8632Z" fill="#E84DA5"/> +<path d="M78.6236 134.382L86.5552 143.034L94.1262 147L127.295 145.558L152.171 130.776L156.497 121.763L146.042 115.634L125.492 100.132L84.7525 65.8816L77.1815 71.2895H69.971L68.1683 85.7105L68.8894 100.132L71.7736 119.239L78.6236 134.382Z" fill="#F1B274"/> +<path d="M58.7483 24.3399L58.3552 24.5645L58.0459 24.8952L47.5906 36.0715L47.332 36.3479L47.1501 36.68L38.858 51.8221L38.6662 52.1725L38.5727 52.5609L33.8858 72.0293L33.783 72.4563L33.8069 72.8949L34.8885 92.7238L34.9126 93.1644L35.0624 93.5794L39.7492 106.558L39.884 106.931L40.111 107.257L53.4505 126.365L53.6769 126.689L53.9796 126.943L69.8427 140.283L70.3266 140.69L70.9335 140.867L96.8914 148.438L97.4669 148.606L98.0627 148.539L127.265 145.295L127.893 145.225L128.439 144.908L153.315 130.487L153.852 130.176L154.221 129.678L168.642 110.209L169.017 109.703L169.157 109.088L174.565 85.2937L174.639 84.9655V84.6288V59.7525V58.9616L174.249 58.2735L161.992 36.6419L161.764 36.2406L161.427 35.9261L145.563 21.1445L145.24 20.8427L144.842 20.6473L122.85 9.83153L122.343 9.58203L121.779 9.53429L100.508 7.73166L100.031 7.69122L99.565 7.80139L79.7361 12.4882L79.3142 12.588L78.9378 12.8031L58.7483 24.3399Z" stroke="#1A1840" stroke-width="6"/> +<g style="mix-blend-mode:multiply" opacity="0.4"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M53.0493 34.628L50.6578 38.9625L46 58.1657L47.0749 77.7245L51.7326 90.5267L64.9893 109.374L80.754 122.532L106.551 130L135.572 126.799L160.294 112.575L167.475 102.953L166.232 108.424L151.811 127.892L126.934 142.313L97.7317 145.558L71.7738 137.987L55.9106 124.647L42.5712 105.539L37.8843 92.5604L36.8027 72.7314L41.4896 53.263L49.7817 38.1209L53.0493 34.628Z" fill="#00BCD8"/> +</g> +</svg> diff --git a/apps/site/src/assets/images/intro-character-foam.svg b/apps/site/src/assets/images/intro-character-foam.svg new file mode 100644 index 00000000..6fd1934d --- /dev/null +++ b/apps/site/src/assets/images/intro-character-foam.svg @@ -0,0 +1,3 @@ +<svg width="112" height="20" viewBox="0 0 112 20" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M84.0965 1.14516C67.5965 -2.35484 64.0965 3.14516 54.5965 4.64516C50.9965 0.645265 45.0965 2.31178 42.5966 3.64502C38.1966 1.24502 30.0966 2.64502 26.5966 3.64502C19.3966 6.84502 12.2632 6.97835 9.5965 6.64502C0.796502 3.04502 -0.403498 5.14502 0.0965023 6.64502C4.4965 11.845 16.5965 10.8117 22.0965 9.64502C35.2965 4.44502 43.2632 8.47835 45.5965 11.145C49.9965 18.345 58.7632 19.4784 62.5965 19.145C70.9965 15.945 79.0965 15.8117 82.0965 16.145C90.4965 17.745 99.5965 15.4784 103.097 14.145C116.697 10.545 109.763 5.64502 104.597 3.64502C93.7965 4.44502 86.4298 2.31178 84.0965 1.14516Z" fill="#DAFFF5"/> +</svg> diff --git a/apps/site/src/assets/images/intro-main-anteater.svg b/apps/site/src/assets/images/intro-main-anteater.svg new file mode 100644 index 00000000..f6393081 --- /dev/null +++ b/apps/site/src/assets/images/intro-main-anteater.svg @@ -0,0 +1,46 @@ +<svg width="312" height="360" viewBox="0 0 312 360" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path d="M96.8006 297.447C112.447 276.383 125.775 292.532 155.329 282L180.826 290.777H168.077L190.677 297.447C208.757 297.447 215.982 287.149 217.334 282C228.344 282 251.408 283.755 255.58 290.777C259.752 297.798 231.821 309.617 217.334 314.649C199.37 318.862 164.369 330.939 168.077 345.543C172.713 363.799 96.8006 368.362 20.8878 337.82C-39.8424 313.385 46.1921 300.724 96.8006 297.447Z" fill="#895C17"/> +<mask id="path-2-outside-1_409_325" maskUnits="userSpaceOnUse" x="20" y="0" width="292" height="306" fill="black"> +<rect fill="white" x="20" width="292" height="306"/> +<path d="M30 172V181L31.5 186.5L34 192L37.5 196L42.5 200.5L52 206L65.5 211.5L80 217.5L89.5 222.5L91 227L95 234.5L102 244L112.5 253L121.5 260L133.5 265.5L145.5 269.5L151.5 270.5L153.5 277.5L157.5 283.5L161.5 288L168 292L179 295L184.5 294.5L187.5 292L189.5 286L190.5 274.5L190 256.5H203L210 255.5L210.5 264L212.5 273.5L215.5 279L219 285L224 289.5L229 292L234.5 293.5L242.5 294.5L250.5 293L253.5 289L254 281L250.5 262.5L245 241.5L242.5 230L244 222L245.5 214L245 207.5L244 202.5L250.5 205L259.5 207.5L266.5 208.5H277.5L286.5 205L292 201L296 196L299.5 188L301 182L300.5 178.5L298.5 175L292 172.5L278.5 170.5L265 169.5L251.5 168.5L245 167.5L234.5 166.5L232 162L233.5 158L233 155.5L232 152.5L246.5 151L255.5 148.5L267 141.5L273 134.5L277 127.5L278 123V115L275.5 104.5L270 95L263.5 86.5L253.5 75.5L238 63.5L239 55.5L240 42L238 27L234.5 18L228.5 12L223 10H216L209 13L203.5 18L199 25L196.5 30.5L193.5 42V46H183.5L183 30.5L181 21.5L178 16L173.5 12L168 10H161L155.5 12L151 15L148.5 19L146.5 26L144.5 36.5L143.5 69.5L142.5 77.5L140 85L139.5 97.5L141 111L144 123L150.5 137L156.5 143.5L165 148L158 148.5L152 152.5L150.5 160L152 164.5L144 171L118 148.5L98.5 135L83 128L72.5 126.5H64L54 129.5L44 135L32.5 160.5L30 172Z"/> +</mask> +<path d="M30 172V181L31.5 186.5L34 192L37.5 196L42.5 200.5L52 206L65.5 211.5L80 217.5L89.5 222.5L91 227L95 234.5L102 244L112.5 253L121.5 260L133.5 265.5L145.5 269.5L151.5 270.5L153.5 277.5L157.5 283.5L161.5 288L168 292L179 295L184.5 294.5L187.5 292L189.5 286L190.5 274.5L190 256.5H203L210 255.5L210.5 264L212.5 273.5L215.5 279L219 285L224 289.5L229 292L234.5 293.5L242.5 294.5L250.5 293L253.5 289L254 281L250.5 262.5L245 241.5L242.5 230L244 222L245.5 214L245 207.5L244 202.5L250.5 205L259.5 207.5L266.5 208.5H277.5L286.5 205L292 201L296 196L299.5 188L301 182L300.5 178.5L298.5 175L292 172.5L278.5 170.5L265 169.5L251.5 168.5L245 167.5L234.5 166.5L232 162L233.5 158L233 155.5L232 152.5L246.5 151L255.5 148.5L267 141.5L273 134.5L277 127.5L278 123V115L275.5 104.5L270 95L263.5 86.5L253.5 75.5L238 63.5L239 55.5L240 42L238 27L234.5 18L228.5 12L223 10H216L209 13L203.5 18L199 25L196.5 30.5L193.5 42V46H183.5L183 30.5L181 21.5L178 16L173.5 12L168 10H161L155.5 12L151 15L148.5 19L146.5 26L144.5 36.5L143.5 69.5L142.5 77.5L140 85L139.5 97.5L141 111L144 123L150.5 137L156.5 143.5L165 148L158 148.5L152 152.5L150.5 160L152 164.5L144 171L118 148.5L98.5 135L83 128L72.5 126.5H64L54 129.5L44 135L32.5 160.5L30 172Z" stroke="#DAFFF5" stroke-width="20" mask="url(#path-2-outside-1_409_325)"/> +<path d="M30 172V181L31.5 186.5L34 192L37.5 196L42.5 200.5L52 206L65.5 211.5L80 217.5L89.5 222.5L91 227L95 234.5L102 244L112.5 253L121.5 260L133.5 265.5L145.5 269.5L151.5 270.5L153.5 277.5L157.5 283.5L161.5 288L168 292L179 295L184.5 294.5L187.5 292L189.5 286L190.5 274.5L190 256.5H203L210 255.5L210.5 264L212.5 273.5L215.5 279L219 285L224 289.5L229 292L234.5 293.5L242.5 294.5L250.5 293L253.5 289L254 281L250.5 262.5L245 241.5L242.5 230L244 222L245.5 214L245 207.5L244 202.5L250.5 205L259.5 207.5L266.5 208.5H277.5L286.5 205L292 201L296 196L299.5 188L301 182L300.5 178.5L298.5 175L292 172.5L278.5 170.5L265 169.5L251.5 168.5L245 167.5L234.5 166.5L232 162L233.5 158L233 155.5L232 152.5L246.5 151L255.5 148.5L267 141.5L273 134.5L277 127.5L278 123V115L275.5 104.5L270 95L263.5 86.5L253.5 75.5L238 63.5L239 55.5L240 42L238 27L234.5 18L228.5 12L223 10H216L209 13L203.5 18L199 25L196.5 30.5L193.5 42V46H183.5L183 30.5L181 21.5L178 16L173.5 12L168 10H161L155.5 12L151 15L148.5 19L146.5 26L144.5 36.5L143.5 69.5L142.5 77.5L140 85L139.5 97.5L141 111L144 123L150.5 137L156.5 143.5L165 148L158 148.5L152 152.5L150.5 160L152 164.5L144 171L118 148.5L98.5 135L83 128L72.5 126.5H64L54 129.5L44 135L32.5 160.5L30 172Z" stroke="#1A1840" stroke-width="12"/> +<path d="M170.103 161.21C180.772 168.84 182.268 173.713 169.116 192.104C155.963 210.495 149.975 239.001 139.306 231.371C117.694 215.915 114.178 193.762 139.306 174.182C162.17 156.367 163.742 156.662 170.103 161.21Z" fill="#4D548B"/> +<path d="M222.258 216.067C235.138 213.59 239.701 215.863 243.97 238.066C248.239 260.269 261.584 290.865 248.704 293.341C222.612 298.358 207.322 279.028 210.443 247.325C213.282 218.48 214.579 217.543 222.258 216.067Z" fill="#78638A"/> +<path d="M174.229 213.493C187.329 214.165 191.216 217.462 190.059 240.042C188.901 262.622 194.552 295.52 181.453 294.848C154.918 293.487 144.688 271.065 155.29 241.025C164.937 213.693 166.42 213.093 174.229 213.493Z" fill="#4D548B"/> +<mask id="mask0_409_325" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="149" y="142" width="97" height="115"> +<path d="M149.998 199.859C146.149 242.91 157.885 256.748 196.688 256.748C227.47 256.748 250.041 240.514 244.072 199.859C237.557 155.479 218.98 142.969 196.688 142.969C165.905 142.969 154.342 151.288 149.998 199.859Z" fill="#78638A"/> +</mask> +<g mask="url(#mask0_409_325)"> +<path d="M149.998 199.859C146.149 242.91 157.885 256.748 196.688 256.748C227.47 256.748 250.041 240.514 244.072 199.859C237.557 155.479 218.98 142.969 196.688 142.969C165.905 142.969 154.342 151.288 149.998 199.859Z" fill="#4D548B"/> +<ellipse cx="211.902" cy="208.337" rx="44.3081" ry="58.257" fill="#78638A"/> +</g> +<path d="M165.061 10.0695C146.597 10.0695 143.681 21.731 143.681 76.6372C136.393 80.0383 137.126 136.402 162.392 146.606C182.605 154.769 216.728 153.895 236.973 152.437C264.184 150.493 274.387 134.945 277.303 126.199C283.911 104.819 258.353 76.6372 236.973 63.5181C241.346 51.8566 242.998 12.0131 222.397 10.0695C201.795 8.12596 194.377 33.2305 193.243 46.0258H183.525C183.525 32.4207 183.525 10.0695 165.061 10.0695Z" fill="#78638A"/> +<path d="M172.349 51.8574C141.738 80.5252 140.28 142.72 245.719 138.347C238.688 142.488 229.085 147.836 218.489 153.275C196.116 153.788 177.7 152.789 162.392 146.607C137.126 136.403 136.393 80.039 143.681 76.6379C143.681 42.5282 144.807 25.1081 150.086 16.8054L151.942 26.5908L172.349 51.8574Z" fill="#4D548B"/> +<path d="M276.974 127.129C277.093 126.811 277.202 126.501 277.303 126.199C283.911 104.82 258.353 76.6375 236.973 63.5185C240.249 54.7838 241.998 30.2385 234.012 17.6509L232.005 63.49L234.124 65.0245C240.858 69.9014 250.916 78.7646 258.948 89.2908C267.094 99.9672 272.483 111.469 271.494 121.851C271.239 124.523 273.199 126.894 275.87 127.149C276.246 127.185 276.615 127.177 276.974 127.129Z" fill="#D874D1"/> +<path d="M185.038 46.0261L184.967 46.9048C184.75 49.5796 182.406 51.5721 179.731 51.3552C177.056 51.1383 175.064 48.7942 175.281 46.1194L177.728 15.9291C183.525 23.4931 183.525 36.7796 183.525 46.0261H185.038Z" fill="#D874D1"/> +<ellipse cx="248.149" cy="94.1298" rx="7.28843" ry="11.1756" fill="#403945"/> +<ellipse cx="162.944" cy="158.7" rx="12.4978" ry="11.0637" transform="rotate(8.20516 162.944 158.7)" fill="#EE70B7"/> +<ellipse cx="184.595" cy="162.384" rx="10.9909" ry="10.5968" transform="rotate(9.74409 184.595 162.384)" fill="#EE70B7"/> +<ellipse cx="201.847" cy="163.482" rx="10.1198" ry="10.6668" fill="#EE70B7"/> +<ellipse cx="221.9" cy="158.621" rx="11.5212" ry="9.9409" transform="rotate(-17.2941 221.9 158.621)" fill="#EE70B7"/> +<mask id="mask1_409_325" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="30" y="126" width="159" height="145"> +<path d="M91.0961 197.989C80.56 213.715 92.5559 240.223 117.89 257.196C143.224 274.168 172.302 275.179 182.838 259.452C193.374 243.726 181.378 217.218 156.044 200.245C130.71 183.273 101.632 182.262 91.0961 197.989Z" fill="#4D548B"/> +<path d="M43.9372 135.394C1.94616 213.14 65.0891 200.61 98.4005 228.939C131.712 257.268 168.488 274.111 183.214 256.794C197.941 239.478 179.524 200.726 146.212 172.396C112.901 144.067 78.4447 109.618 43.9372 135.394Z" fill="#4D548B"/> +</mask> +<g mask="url(#mask1_409_325)"> +<path d="M91.0961 197.989C80.56 213.715 92.5559 240.223 117.89 257.196C143.224 274.168 172.302 275.179 182.838 259.452C193.374 243.726 181.378 217.218 156.044 200.245C130.71 183.273 101.632 182.262 91.0961 197.989Z" fill="#78638A"/> +<path d="M43.9372 135.394C1.94616 213.14 65.0891 200.61 98.4005 228.939C131.712 257.268 168.488 274.111 183.214 256.794C197.941 239.478 179.524 200.726 146.212 172.396C112.901 144.067 78.4447 109.618 43.9372 135.394Z" fill="#78638A"/> +<ellipse cx="132.241" cy="239.97" rx="51.0312" ry="30.6509" transform="rotate(36.2182 132.241 239.97)" fill="#4D548B"/> +<ellipse cx="80.2583" cy="200.666" rx="33.3046" ry="24.3647" transform="rotate(-1.91944 80.2583 200.666)" fill="#4D548B"/> +</g> +<mask id="mask2_409_325" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="218" y="166" width="83" height="43"> +<path d="M219.21 181.128C221.079 168.145 224.719 164.576 247.098 167.799C269.477 171.021 302.754 168.409 300.884 181.391C297.097 207.69 273.832 215.822 244.89 202.511C218.557 190.399 218.095 188.868 219.21 181.128Z" fill="#78638A"/> +</mask> +<g mask="url(#mask2_409_325)"> +<path d="M219.21 181.128C221.079 168.145 224.719 164.576 247.098 167.799C269.477 171.021 302.754 168.409 300.884 181.391C297.097 207.69 273.832 215.822 244.89 202.511C218.557 190.399 218.095 188.868 219.21 181.128Z" fill="#D874D1"/> +<path d="M293.133 198.218C290.232 211.808 271.702 226.782 245.949 221.285C220.197 215.787 201.672 200.314 204.573 186.723C207.474 173.132 230.703 166.571 256.455 172.068C282.208 177.565 296.034 184.627 293.133 198.218Z" fill="#78638A"/> +<path d="M281.648 204.103C279.57 209.736 256.578 210.218 239.996 204.103C223.415 197.987 214.749 192.759 216.827 187.126C218.904 181.494 230.938 177.588 247.52 183.704C264.101 189.82 283.725 198.47 281.648 204.103Z" fill="#4D548B"/> +</g> +</svg> diff --git a/apps/site/src/assets/images/intro-water-anteater-shadow.svg b/apps/site/src/assets/images/intro-water-anteater-shadow.svg new file mode 100644 index 00000000..58050bbf --- /dev/null +++ b/apps/site/src/assets/images/intro-water-anteater-shadow.svg @@ -0,0 +1,53 @@ +<svg width="115" height="85" viewBox="0 0 115 85" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g style="mix-blend-mode:color-burn" opacity="0.5" filter="url(#filter0_df_378_1741)"> +<mask id="mask0_378_1741" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="53" y="5" width="58" height="34"> +<path d="M88.1611 22.3126C91.9382 18.6865 87.6378 12.5746 78.5558 8.6612C69.4739 4.74781 59.0496 4.51487 55.2726 8.14092C51.4955 11.767 55.7959 17.8789 64.8778 21.7923C73.9598 25.7057 84.384 25.9386 88.1611 22.3126Z" fill="#C679A5"/> +<path d="M105.067 36.745C120.12 18.8191 97.4844 21.7083 85.5425 15.1764C73.6007 8.64453 60.4169 4.76105 55.1376 8.75374C49.8583 12.7464 56.4607 21.6816 68.4026 28.2134C80.3444 34.7453 92.6965 42.6884 105.067 36.745Z" fill="#C679A5"/> +</mask> +<g mask="url(#mask0_378_1741)"> +<path d="M88.1611 22.3126C91.9382 18.6865 87.6378 12.5746 78.5558 8.6612C69.4739 4.74781 59.0496 4.51487 55.2726 8.14092C51.4955 11.767 55.7959 17.8789 64.8778 21.7923C73.9598 25.7057 84.384 25.9386 88.1611 22.3126Z" fill="#C679A5"/> +<path d="M105.067 36.745C120.12 18.8191 97.4844 21.7083 85.5425 15.1764C73.6007 8.64453 60.4169 4.76105 55.1376 8.75374C49.8583 12.7464 56.4607 21.6816 68.4026 28.2134C80.3444 34.7453 92.6965 42.6884 105.067 36.745Z" fill="#C679A5"/> +<ellipse cx="32.6587" cy="17.4569" rx="32.6587" ry="17.4569" transform="matrix(0.952787 0.303639 0.610285 -0.792182 53.1936 45.664)" fill="#F0BC89"/> +</g> +<mask id="mask1_378_1741" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="11" y="17" width="34" height="12"> +<path d="M44.4666 25.2375C43.5984 28.6398 42.0827 29.5591 32.964 28.5965C23.8453 27.634 10.2267 28.1488 11.095 24.7464C12.8537 17.8543 22.4256 15.8373 34.145 19.4852C44.8078 22.8042 44.9842 23.2091 44.4666 25.2375Z" fill="#C679A5"/> +</mask> +<g mask="url(#mask1_378_1741)"> +<path d="M44.4666 25.2375C43.5984 28.6398 42.0827 29.5591 32.964 28.5965C23.8453 27.634 10.2267 28.1488 11.095 24.7464C12.8537 17.8543 22.4256 15.8373 34.145 19.4852C44.8078 22.8042 44.9842 23.2091 44.4666 25.2375Z" fill="#C679A5"/> +<path d="M50.5158 31.7976C51.9195 29.4789 45.72 25.7617 36.6688 23.4951C27.6175 21.2284 16.0769 23.692 14.6733 26.0108C13.2696 28.3295 22.5344 29.6253 31.5856 31.8919C40.6368 34.1586 49.1121 34.1163 50.5158 31.7976Z" fill="#F0BC89"/> +</g> +<path d="M19.8989 69.3312C19.8989 64.9899 23.7979 61.4706 30.63 61.4706C37.4621 61.4706 43.0006 64.9899 43.0006 69.3312C43.0006 73.6724 38.6545 77 31.8224 77C24.9903 77 19.8989 73.6724 19.8989 69.3312Z" fill="#F0BC89"/> +<ellipse cx="75.6413" cy="64.7299" rx="12.3706" ry="7.86055" transform="rotate(-180 75.6413 64.7299)" fill="#C679A5"/> +<mask id="mask2_378_1741" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="3" width="40" height="32"> +<path d="M71.7867 19.8671C73.3644 8.55058 65.3205 -1.26966 52.6515 4.9129C41.5447 10.3331 30.7852 9.18023 33.2313 19.8671C35.9013 31.5329 43.5153 34.8214 52.6515 34.8214C65.2676 34.8214 70.0066 32.6347 71.7867 19.8671Z" fill="#F0BC89"/> +</mask> +<g mask="url(#mask2_378_1741)"> +<path d="M71.7867 19.8671C73.3644 8.55051 68.5545 4.91284 52.6515 4.91284C40.0354 4.91284 30.7852 9.18017 33.2313 19.8671C35.9013 31.5328 43.5153 34.8213 52.6515 34.8213C65.2676 34.8213 70.0066 32.6347 71.7867 19.8671Z" fill="#C679A5"/> +<path d="M72.4295 20.6341C72.4295 11.9516 63.2877 4.91301 52.0106 4.91301C40.7336 4.91301 32.1879 7.35029 32.1879 16.0328C32.1879 24.7153 40.7336 36.3552 52.0106 36.3552C63.2877 36.3552 72.4295 29.3166 72.4295 20.6341Z" fill="#F0BC89"/> +</g> +<mask id="mask3_378_1741" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="29" width="58" height="38"> +<path d="M19.452 48.2419C19.452 38.077 32.9626 29.8367 49.6287 29.8367C66.2949 29.8367 76.3865 38.077 76.3865 48.2419C76.3865 58.4068 72.2242 64.7708 49.6287 66.6471C21.0872 65.7536 19.452 58.4068 19.452 48.2419Z" fill="#F0BC89"/> +</mask> +<g mask="url(#mask3_378_1741)"> +<path d="M19.452 48.2419C19.452 38.077 32.9626 29.8367 49.6287 29.8367C66.2949 29.8367 76.3865 38.077 76.3865 48.2419C76.3865 58.4068 72.2242 64.7708 49.6287 66.6471C21.0872 65.7536 19.452 58.4068 19.452 48.2419Z" fill="#C679A5"/> +<path d="M66.7659 50.3512C66.7659 39.2333 77.6587 28.3033 60.208 28.3033C42.7574 28.3033 7.14868 38.083 7.14868 49.2009C7.14868 60.3187 21.2952 69.3315 38.7458 69.3315C56.1965 69.3315 66.7659 61.4691 66.7659 50.3512Z" fill="#F0BC89"/> +</g> +<path d="M44.4092 53.9372C42.2156 60.0285 33.9351 61.2956 28.399 56.387L17.9355 47.1096C11.1078 41.0558 13.9834 31.0687 22.6265 30.8174L36.5772 30.4119C44.0848 30.1936 50.2464 37.7287 47.8964 44.2542L44.4092 53.9372Z" fill="#F0BC89"/> +<path d="M63.4909 30.0269C59.1304 28.0212 58.5189 26.7403 63.8943 21.906C69.2696 17.0716 71.717 9.57848 76.0774 11.5841C84.9103 15.6469 86.3475 21.4702 76.0774 26.617C66.7332 31.2998 66.0905 31.2225 63.4909 30.0269Z" fill="#F0BC89"/> +<path d="M59.4784 44.562C60.7058 43.7791 61.0254 42.4926 59.8082 41.7031C58.5911 40.9137 56.2981 40.9203 55.0707 41.7031C53.8433 42.486 53.3745 43.7725 54.5917 44.562C55.8089 45.3514 58.251 45.3448 59.4784 44.562Z" fill="#78638A"/> +<path d="M39.1929 45.5301C40.4203 44.7472 40.7399 43.4607 39.5227 42.6712C38.3055 41.8818 36.0126 41.8884 34.7852 42.6712C33.5577 43.4541 33.089 44.7406 34.3062 45.5301C35.5234 46.3195 37.9655 46.3129 39.1929 45.5301Z" fill="#78638A"/> +</g> +<defs> +<filter id="filter0_df_378_1741" x="7.05542" y="0.912842" width="107.008" height="84.0872" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"> +<feFlood flood-opacity="0" result="BackgroundImageFix"/> +<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/> +<feOffset dy="4"/> +<feGaussianBlur stdDeviation="2"/> +<feComposite in2="hardAlpha" operator="out"/> +<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/> +<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_378_1741"/> +<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_378_1741" result="shape"/> +<feGaussianBlur stdDeviation="2" result="effect2_foregroundBlur_378_1741"/> +</filter> +</defs> +</svg> diff --git a/apps/site/src/assets/images/intro-water-anteater.svg b/apps/site/src/assets/images/intro-water-anteater.svg new file mode 100644 index 00000000..6c282af6 --- /dev/null +++ b/apps/site/src/assets/images/intro-water-anteater.svg @@ -0,0 +1,38 @@ +<svg width="111" height="116" viewBox="0 0 111 116" fill="none" xmlns="http://www.w3.org/2000/svg"> +<mask id="mask0_378_1764" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="53" y="59" width="58" height="53"> +<path d="M88.1611 85.5023C91.9382 91.1401 87.6378 100.643 78.5558 106.727C69.4739 112.812 59.0496 113.174 55.2726 107.536C51.4955 101.899 55.7959 92.3958 64.8778 86.3113C73.9598 80.2268 84.384 79.8646 88.1611 85.5023Z" fill="#C679A5"/> +<path d="M105.067 63.0629C120.12 90.9339 97.4844 86.442 85.5425 96.5977C73.6007 106.753 60.4169 112.791 55.1376 106.584C49.8583 100.376 56.4607 86.4834 68.4026 76.3277C80.3444 66.172 92.6965 53.8222 105.067 63.0629Z" fill="#C679A5"/> +</mask> +<g mask="url(#mask0_378_1764)"> +<path d="M88.1611 85.5023C91.9382 91.1401 87.6378 100.643 78.5558 106.727C69.4739 112.812 59.0496 113.174 55.2726 107.536C51.4955 101.899 55.7959 92.3958 64.8778 86.3113C73.9598 80.2268 84.384 79.8646 88.1611 85.5023Z" fill="#C679A5"/> +<path d="M105.067 63.0629C120.12 90.9339 97.4844 86.442 85.5425 96.5977C73.6007 106.753 60.4169 112.791 55.1376 106.584C49.8583 100.376 56.4607 86.4834 68.4026 76.3277C80.3444 66.172 92.6965 53.8222 105.067 63.0629Z" fill="#C679A5"/> +<ellipse cx="94.964" cy="55.2792" rx="34.7271" ry="23.996" transform="rotate(-26.3579 94.964 55.2792)" fill="#F1B274"/> +</g> +<mask id="mask1_378_1764" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="11" y="75" width="34" height="18"> +<path d="M44.4665 80.9546C43.5983 75.6646 42.0826 74.2353 32.9639 75.7319C23.8452 77.2285 10.2266 76.4281 11.0948 81.7181C12.8535 92.4339 22.4255 95.5699 34.1449 89.8982C44.8077 84.7379 44.9841 84.1083 44.4665 80.9546Z" fill="#C679A5"/> +</mask> +<g mask="url(#mask1_378_1764)"> +<path d="M44.4665 80.9546C43.5983 75.6646 42.0826 74.2353 32.9639 75.7319C23.8452 77.2285 10.2266 76.4281 11.0948 81.7181C12.8535 92.4339 22.4255 95.5699 34.1449 89.8982C44.8077 84.7379 44.9841 84.1083 44.4665 80.9546Z" fill="#C679A5"/> +<path d="M50.5158 70.7548C51.9195 74.36 45.72 80.1394 36.6688 83.6635C27.6175 87.1877 16.0769 83.3573 14.6733 79.7521C13.2696 76.147 22.5344 74.1323 31.5856 70.6081C40.6368 67.084 49.1121 67.1497 50.5158 70.7548Z" fill="#F1B274"/> +</g> +<path d="M19.8989 12.3981C19.8989 19.1478 23.7979 24.6196 30.63 24.6196C37.4621 24.6196 43.0006 19.1478 43.0006 12.3981C43.0006 5.64829 38.6545 0.474609 31.8224 0.474609C24.9903 0.474609 19.8989 5.64829 19.8989 12.3981Z" fill="#F1B274"/> +<ellipse cx="12.3706" cy="12.2215" rx="12.3706" ry="12.2215" transform="matrix(-1 0 0 1 88.0118 7.33069)" fill="#C679A5"/> +<mask id="mask2_378_1764" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="32" y="66" width="40" height="50"> +<path d="M71.7867 89.3045C73.3644 106.899 65.3205 122.168 52.6515 112.555C41.5447 104.128 30.7852 105.92 33.2313 89.3045C35.9013 71.1667 43.5153 66.0538 52.6515 66.0538C65.2676 66.0538 70.0066 69.4535 71.7867 89.3045Z" fill="#F0BC89"/> +</mask> +<g mask="url(#mask2_378_1764)"> +<path d="M71.7867 89.3046C73.3644 106.899 68.5545 112.555 52.6515 112.555C40.0354 112.555 30.7852 105.92 33.2313 89.3046C35.9013 71.1668 43.5153 66.0538 52.6515 66.0538C65.2676 66.0538 70.0066 69.4535 71.7867 89.3046Z" fill="#C679A5"/> +<path d="M72.4295 88.112C72.4295 101.612 63.2877 112.555 52.0106 112.555C40.7336 112.555 32.1879 108.766 32.1879 95.266C32.1879 81.7665 40.7336 63.6689 52.0106 63.6689C63.2877 63.6689 72.4295 74.6124 72.4295 88.112Z" fill="#F1B274"/> +</g> +<mask id="mask3_378_1764" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="19" y="16" width="58" height="58"> +<path d="M19.452 45.1876C19.452 60.9919 32.9626 73.8039 49.6287 73.8039C66.2949 73.8039 76.3865 60.9919 76.3865 45.1876C76.3865 29.3832 72.2242 19.4885 49.6287 16.5713C21.0872 17.9605 19.452 29.3832 19.452 45.1876Z" fill="#F0BC89"/> +</mask> +<g mask="url(#mask3_378_1764)"> +<path d="M19.452 45.1876C19.452 60.9919 32.9626 73.8039 49.6287 73.8039C66.2949 73.8039 76.3865 60.9919 76.3865 45.1876C76.3865 29.3832 72.2242 19.4885 49.6287 16.5713C21.0872 17.9605 19.452 29.3832 19.452 45.1876Z" fill="#C679A5"/> +<path d="M66.7659 41.9082C66.7659 59.1942 77.6587 76.1881 60.208 76.1881C42.7574 76.1881 7.14868 60.9827 7.14868 43.6967C7.14868 26.4107 21.2952 12.3976 38.7458 12.3976C56.1965 12.3976 66.7659 24.6222 66.7659 41.9082Z" fill="#F1B274"/> +</g> +<path d="M44.7699 37.8896C42.8531 29.6143 32.0917 27.4331 27.104 34.3089L11.0864 56.39C6.45627 62.7728 10.7789 71.7436 18.6563 72.0997L40.012 73.0649C46.5627 73.361 51.5877 67.3242 50.108 60.9358L44.7699 37.8896Z" fill="#F1B274"/> +<path d="M63.4909 73.5083C59.1304 76.6267 58.5189 78.6182 63.8943 86.1346C69.2696 93.651 71.717 105.301 76.0774 102.183C84.9103 95.8662 86.3475 86.8121 76.0774 78.8099C66.7332 71.5291 66.0905 71.6493 63.4909 73.5083Z" fill="#F1B274"/> +<path d="M59.4784 50.9091C60.7058 52.1263 61.0254 54.1266 59.8082 55.354C58.5911 56.5814 56.2981 56.5712 55.0707 55.354C53.8433 54.1368 53.3745 52.1365 54.5917 50.9091C55.8089 49.6817 58.251 49.6919 59.4784 50.9091Z" fill="#78638A"/> +<path d="M39.1929 49.4039C40.4203 50.6211 40.7399 52.6214 39.5227 53.8488C38.3055 55.0762 36.0126 55.066 34.7852 53.8488C33.5577 52.6316 33.089 50.6313 34.3062 49.4039C35.5234 48.1765 37.9655 48.1867 39.1929 49.4039Z" fill="#78638A"/> +</svg>