amiirkhl/my-protfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add dark mode coloring palette and luminous moon illustration

Browse Source
This commit is contained in:
Amirhossein Khalili
2026-09-06 12:33:38 +03:30
parent 9c3820866d
commit 5927ee40e2
5 changed files with 226 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
public/assets/bg-illustrations/left.svg
View File

@@ -1,30 +1,30 @@
<svg width="397" height="600" viewBox="0 0 397 600" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M186.387 120.496L290.519 60.9917L186.387 0.859037L80.0237 60.9917L186.387 120.496Z" fill="#9DCDFD"/>
<path d="M186.387 252.892V120.496L80.0237 60.9915L29.4452 162.282L186.387 252.892Z" fill="#0E4073"/>
<path d="M186.387 252.892V120.496L289.775 60.9915L344.073 161.852L186.387 252.892Z" fill="#0C234F"/>
<path d="M246.727 163.846L336.474 112.562L307.482 94.9104L215.811 146.736L246.727 163.846Z" fill="#9DCDFD"/>
<path d="M246.726 255.171V163.846L215.81 146.737L217.785 234.035L246.726 255.171Z" fill="#0C234F"/>
<path d="M246.726 255.17V163.846L335.833 112.562L366.682 176.707L246.726 255.17Z" fill="#0E4073"/>
<path d="M102.272 241.521L170.129 202.745L102.272 163.56L32.9596 202.745L102.272 241.521Z" fill="#9DCDFD"/>
<path d="M102.272 327.798V241.521L32.9597 202.745L0.00019455 268.751L102.272 327.798Z" fill="#0C234F"/>
<path d="M102.272 327.798V241.521L169.645 202.745L205.028 268.471L102.272 327.798Z" fill="#2066AB"/>
<path d="M142.154 371.607L210.95 332.295L142.154 292.568L71.8843 332.295L142.154 371.607Z" fill="#9DCDFD"/>
<path d="M142.155 506.161V371.607L71.8845 332.295L29 434.774L142.155 506.161Z" fill="#0C234F"/>
<path d="M142.155 506.161V371.607L210.459 332.295L267.026 434.774L142.155 506.161Z" fill="#0F4174"/>
<path d="M223.425 402.62L264.715 379.025L246.215 367.944L204.039 391.788L223.425 402.62Z" fill="#9DCDFD"/>
<path d="M206.717 493.25L223.425 402.62L203.908 391.692L185.698 481.067L206.717 493.25Z" fill="#0C234F"/>
<path d="M206.717 493.251L223.424 402.62L264.42 379.025L298.371 440.532L206.717 493.251Z" fill="#0F4174"/>
<path d="M101.374 521.773L162.665 486.75L101.374 451.356L38.7697 486.75L101.374 521.773Z" fill="#9DCDFD"/>
<path d="M101.374 599.7V521.773L38.7699 486.75L9 546.368L101.374 599.7Z" fill="#2066AB"/>
<path d="M101.374 599.7V521.773L162.227 486.75L194.186 546.115L101.374 599.7Z" fill="#0C234F"/>
<path d="M377.212 147.913C377.212 145.704 379.003 143.913 381.212 143.913H382.325C384.535 143.913 386.325 145.704 386.325 147.913V153.583C386.325 155.792 384.535 157.583 382.325 157.583H381.212C379.003 157.583 377.212 155.792 377.212 153.583V147.913Z" fill="#08234B"/>
<path d="M395.909 136.892L381.769 93.4106L367.629 136.892C366.949 138.983 366.938 141.357 368.608 142.787C370.825 144.686 374.933 146.571 381.769 146.571C388.605 146.571 392.713 144.686 394.929 142.787C396.599 141.357 396.589 138.983 395.909 136.892Z" fill="#104179"/>
<path d="M288.222 499.73C288.222 497.795 289.79 496.227 291.725 496.227H292.699C294.634 496.227 296.202 497.795 296.202 499.73V504.695C296.202 506.63 294.634 508.198 292.699 508.198H291.725C289.79 508.198 288.222 506.63 288.222 504.695V499.73Z" fill="#08234B"/>
<path d="M304.595 490.078L292.212 452L279.829 490.078C279.233 491.909 279.224 493.988 280.687 495.241C282.628 496.904 286.225 498.555 292.212 498.555C298.199 498.555 301.796 496.904 303.737 495.241C305.2 493.988 305.191 491.909 304.595 490.078Z" fill="#104179"/>
<path d="M252.563 536.209C252.563 534.222 254.173 532.611 256.16 532.611H257.161C259.148 532.611 260.759 534.222 260.759 536.209V541.308C260.759 543.295 259.148 544.906 257.161 544.906H256.16C254.173 544.906 252.563 543.295 252.563 541.308V536.209Z" fill="#08234B"/>
<path d="M269.379 526.296L256.661 487.189L243.943 526.296C243.331 528.177 243.322 530.312 244.824 531.598C246.818 533.306 250.513 535.002 256.661 535.002C262.809 535.002 266.504 533.306 268.498 531.598C269.999 530.312 269.99 528.177 269.379 526.296Z" fill="#2166A9"/>
<path d="M231.674 315.593C231.674 313.582 233.304 311.953 235.314 311.953H236.327C238.337 311.953 239.967 313.582 239.967 315.593V320.752C239.967 322.762 238.337 324.391 236.327 324.391H235.314C233.304 324.391 231.674 322.762 231.674 320.752V315.593Z" fill="#08234B"/>
<path d="M248.687 305.564L235.82 266L222.954 305.564C222.335 307.467 222.326 309.627 223.845 310.928C225.862 312.656 229.6 314.371 235.82 314.371C242.041 314.371 245.778 312.656 247.795 310.928C249.315 309.627 249.306 307.467 248.687 305.564Z" fill="#2166A9"/>
<path d="M272.96 350.096C272.96 347.795 274.825 345.93 277.125 345.93H278.285C280.585 345.93 282.45 347.795 282.45 350.096V356.001C282.45 358.301 280.585 360.166 278.285 360.166H277.125C274.825 360.166 272.96 358.301 272.96 356.001V350.096Z" fill="#08234B"/>
<path d="M292.431 338.619L277.705 293.336L262.979 338.619C262.271 340.796 262.26 343.268 263.999 344.758C266.308 346.735 270.586 348.699 277.705 348.699C284.824 348.699 289.102 346.735 291.411 344.758C293.15 343.268 293.139 340.796 292.431 338.619Z" fill="#2166A9"/>
<path d="M186.387 120.496L290.519 60.9917L186.387 0.859037L80.0237 60.9917L186.387 120.496Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M186.387 252.892V120.496L80.0237 60.9915L29.4452 162.282L186.387 252.892Z" fill="var(--hero-illus-cube-side, #0E4073)"/>
<path d="M186.387 252.892V120.496L289.775 60.9915L344.073 161.852L186.387 252.892Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M246.727 163.846L336.474 112.562L307.482 94.9104L215.811 146.736L246.727 163.846Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M246.726 255.171V163.846L215.81 146.737L217.785 234.035L246.726 255.171Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M246.726 255.17V163.846L335.833 112.562L366.682 176.707L246.726 255.17Z" fill="var(--hero-illus-cube-side, #0E4073)"/>
<path d="M102.272 241.521L170.129 202.745L102.272 163.56L32.9596 202.745L102.272 241.521Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M102.272 327.798V241.521L32.9597 202.745L0.00019455 268.751L102.272 327.798Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M102.272 327.798V241.521L169.645 202.745L205.028 268.471L102.272 327.798Z" fill="var(--hero-illus-cube-front, #2066AB)"/>
<path d="M142.154 371.607L210.95 332.295L142.154 292.568L71.8843 332.295L142.154 371.607Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M142.155 506.161V371.607L71.8845 332.295L29 434.774L142.155 506.161Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M142.155 506.161V371.607L210.459 332.295L267.026 434.774L142.155 506.161Z" fill="var(--hero-illus-cube-side, #0F4174)"/>
<path d="M223.425 402.62L264.715 379.025L246.215 367.944L204.039 391.788L223.425 402.62Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M206.717 493.25L223.425 402.62L203.908 391.692L185.698 481.067L206.717 493.25Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M206.717 493.251L223.424 402.62L264.42 379.025L298.371 440.532L206.717 493.251Z" fill="var(--hero-illus-cube-side, #0F4174)"/>
<path d="M101.374 521.773L162.665 486.75L101.374 451.356L38.7697 486.75L101.374 521.773Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M101.374 599.7V521.773L38.7699 486.75L9 546.368L101.374 599.7Z" fill="var(--hero-illus-cube-front, #2066AB)"/>
<path d="M101.374 599.7V521.773L162.227 486.75L194.186 546.115L101.374 599.7Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M377.212 147.913C377.212 145.704 379.003 143.913 381.212 143.913H382.325C384.535 143.913 386.325 145.704 386.325 147.913V153.583C386.325 155.792 384.535 157.583 382.325 157.583H381.212C379.003 157.583 377.212 155.792 377.212 153.583V147.913Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M395.909 136.892L381.769 93.4106L367.629 136.892C366.949 138.983 366.938 141.357 368.608 142.787C370.825 144.686 374.933 146.571 381.769 146.571C388.605 146.571 392.713 144.686 394.929 142.787C396.599 141.357 396.589 138.983 395.909 136.892Z" fill="var(--hero-illus-tree-dark, #104179)"/>
<path d="M288.222 499.73C288.222 497.795 289.79 496.227 291.725 496.227H292.699C294.634 496.227 296.202 497.795 296.202 499.73V504.695C296.202 506.63 294.634 508.198 292.699 508.198H291.725C289.79 508.198 288.222 506.63 288.222 504.695V499.73Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M304.595 490.078L292.212 452L279.829 490.078C279.233 491.909 279.224 493.988 280.687 495.241C282.628 496.904 286.225 498.555 292.212 498.555C298.199 498.555 301.796 496.904 303.737 495.241C305.2 493.988 305.191 491.909 304.595 490.078Z" fill="var(--hero-illus-tree-dark, #104179)"/>
<path d="M252.563 536.209C252.563 534.222 254.173 532.611 256.16 532.611H257.161C259.148 532.611 260.759 534.222 260.759 536.209V541.308C260.759 543.295 259.148 544.906 257.161 544.906H256.16C254.173 544.906 252.563 543.295 252.563 541.308V536.209Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M269.379 526.296L256.661 487.189L243.943 526.296C243.331 528.177 243.322 530.312 244.824 531.598C246.818 533.306 250.513 535.002 256.661 535.002C262.809 535.002 266.504 533.306 268.498 531.598C269.999 530.312 269.99 528.177 269.379 526.296Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
<path d="M231.674 315.593C231.674 313.582 233.304 311.953 235.314 311.953H236.327C238.337 311.953 239.967 313.582 239.967 315.593V320.752C239.967 322.762 238.337 324.391 236.327 324.391H235.314C233.304 324.391 231.674 322.762 231.674 320.752V315.593Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M248.687 305.564L235.82 266L222.954 305.564C222.335 307.467 222.326 309.627 223.845 310.928C225.862 312.656 229.6 314.371 235.82 314.371C242.041 314.371 245.778 312.656 247.795 310.928C249.315 309.627 249.306 307.467 248.687 305.564Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
<path d="M272.96 350.096C272.96 347.795 274.825 345.93 277.125 345.93H278.285C280.585 345.93 282.45 347.795 282.45 350.096V356.001C282.45 358.301 280.585 360.166 278.285 360.166H277.125C274.825 360.166 272.96 358.301 272.96 356.001V350.096Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M292.431 338.619L277.705 293.336L262.979 338.619C262.271 340.796 262.26 343.268 263.999 344.758C266.308 346.735 270.586 348.699 277.705 348.699C284.824 348.699 289.102 346.735 291.411 344.758C293.15 343.268 293.139 340.796 292.431 338.619Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

8
public/assets/bg-illustrations/moon.svg Normal file
View File

@@ -0,0 +1,8 @@
<svg width="139" height="139" viewBox="0 0 139 139" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Bright Half-Moon Crescent (Rotated 45° so U-shape points up-left) -->
<path
d="M70 20 A 48 48 0 0 1 70 116 A 66 66 0 0 0 70 20 Z"
transform="rotate(45 69.5 69.5)"
fill="var(--hero-illus-moon, #FFFDF0)"
/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 336 B

60
public/assets/bg-illustrations/right.svg
View File

@@ -1,32 +1,32 @@
<svg width="435" height="533" viewBox="0 0 435 533" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M140.264 127.277L218.754 82.4256L140.264 37.1004L60.0923 82.4256L140.264 127.277Z" fill="#9DCDFD"/>
<path d="M140.264 227.071V127.277L60.0922 82.4253L21.9685 158.773L140.264 227.071Z" fill="#0E4073"/>
<path d="M140.264 227.071V127.277L218.193 82.4253L259.12 158.449L140.264 227.071Z" fill="#0C234F"/>
<path d="M288.859 97.6992L373.291 49.4527L288.859 0.696517L202.619 49.4527L288.859 97.6992Z" fill="#9DCDFD"/>
<path d="M288.859 303.774V97.6992L202.618 49.4526L161.608 230.306L288.859 303.774Z" fill="#2066AB"/>
<path d="M288.859 303.774V97.6992L372.687 49.4526L416.712 229.958L288.859 303.774Z" fill="#0C234F"/>
<path d="M169.297 277.84L227.61 244.518L169.297 210.845L109.734 244.518L169.297 277.84Z" fill="#9DCDFD"/>
<path d="M169.297 405.142V277.84L109.734 244.518L81.4104 354.4L169.297 405.142Z" fill="#0E4073"/>
<path d="M169.297 405.142V277.84L227.193 244.518L257.6 354.16L169.297 405.142Z" fill="#0C234F"/>
<path d="M154.855 321.143L169.865 311.806L101.694 272.44L85.2234 282.188L154.855 321.143Z" fill="#9DCDFD"/>
<path d="M154.854 413.893V321.143L85.2227 282.189L52.1113 354.574L154.854 413.893Z" fill="#0E4073"/>
<path d="M154.855 413.891V321.142L170.137 311.807L193.873 390.73L154.855 413.891Z" fill="#0C234F"/>
<path d="M306.189 321.775L390.62 273.529L306.189 224.772L219.948 273.529L306.189 321.775Z" fill="#9DCDFD"/>
<path d="M306.188 489.878V321.775L219.947 273.529L178.937 416.411L306.188 489.878Z" fill="#2066AB"/>
<path d="M306.188 489.878V321.775L390.016 273.529L434.041 416.062L306.188 489.878Z" fill="#0C234F"/>
<path d="M165.12 434.59L218.281 404.213L165.12 373.514L110.821 404.213L165.12 434.59Z" fill="#9DCDFD"/>
<path d="M165.12 502.18V434.59L110.821 404.213L84.9999 455.922L165.12 502.18Z" fill="#2066AB"/>
<path d="M165.12 502.18V434.59L217.901 404.213L245.621 455.703L165.12 502.18Z" fill="#0C234F"/>
<path d="M9.43677 127.451C9.43677 125.49 11.0263 123.901 12.9871 123.901H13.9751C15.9359 123.901 17.5254 125.49 17.5254 127.451V132.483C17.5254 134.444 15.9359 136.034 13.9751 136.034H12.9871C11.0263 136.034 9.43677 134.444 9.43677 132.483V127.451Z" fill="#08234B"/>
<path d="M26.0317 117.669L13.4811 79.0759L0.930565 117.669C0.327057 119.525 0.318001 121.632 1.80006 122.901C3.76753 124.587 7.41366 126.26 13.4811 126.26C19.5486 126.26 23.1947 124.587 25.1622 122.901C26.6442 121.632 26.6352 119.525 26.0317 117.669Z" fill="#2166A9"/>
<path d="M82.4635 265.581C82.4635 263.594 84.0742 261.983 86.0611 261.983H87.0624C89.0493 261.983 90.66 263.594 90.66 265.581V270.68C90.66 272.667 89.0493 274.278 87.0624 274.278H86.0611C84.0742 274.278 82.4635 272.667 82.4635 270.68V265.581Z" fill="#08234B"/>
<path d="M99.2796 255.668L86.5617 216.561L73.8439 255.668C73.2323 257.549 73.2231 259.684 74.7249 260.97C76.7186 262.678 80.4134 264.374 86.5617 264.374C92.7101 264.374 96.4048 262.678 98.3985 260.97C99.9004 259.684 99.8912 257.549 99.2796 255.668Z" fill="#2166A9"/>
<path d="M243.821 522.185C243.821 519.936 245.643 518.114 247.892 518.114H249.025C251.273 518.114 253.096 519.936 253.096 522.185V527.955C253.096 530.204 251.273 532.026 249.025 532.026H247.892C245.643 532.026 243.821 530.204 243.821 527.955V522.185Z" fill="#08234B"/>
<path d="M262.85 510.968L248.458 466.715L234.067 510.968C233.375 513.096 233.365 515.512 235.064 516.968C237.32 518.9 241.501 520.819 248.458 520.819C255.416 520.819 259.597 518.9 261.853 516.968C263.552 515.512 263.542 513.096 262.85 510.968Z" fill="#2166A9"/>
<path d="M71.1348 430.778C71.1348 428.53 72.9574 426.707 75.2058 426.707H76.3388C78.5871 426.707 80.4098 428.53 80.4098 430.778V436.549C80.4098 438.797 78.5871 440.62 76.3388 440.62H75.2058C72.9574 440.62 71.1348 438.797 71.1348 436.549V430.778Z" fill="#08234B"/>
<path d="M90.1636 419.561L75.7723 375.308L61.381 419.561C60.689 421.689 60.6786 424.105 62.378 425.561C64.6341 427.494 68.815 429.412 75.7723 429.412C82.7297 429.412 86.9106 427.494 89.1666 425.561C90.866 424.105 90.8556 421.689 90.1636 419.561Z" fill="#2166A9"/>
<path d="M51.9467 237.191C51.9467 234.916 53.7905 233.073 56.065 233.073H57.2112C59.4857 233.073 61.3295 234.916 61.3295 237.191V243.028C61.3295 245.303 59.4857 247.147 57.2112 247.147H56.065C53.7905 247.147 51.9467 245.303 51.9467 243.028V237.191Z" fill="#08234B"/>
<path d="M71.1967 225.844L56.6381 181.076L42.0795 225.844C41.3794 227.996 41.3689 230.441 43.0881 231.913C45.3703 233.868 49.5998 235.809 56.6381 235.809C63.6763 235.809 67.9058 233.868 70.1881 231.913C71.9073 230.441 71.8968 227.996 71.1967 225.844Z" fill="#104179"/>
<path d="M44.5629 482.815C44.5629 480.54 46.4067 478.696 48.6812 478.696H49.8274C52.1019 478.696 53.9457 480.54 53.9457 482.815V488.652C53.9457 490.927 52.1019 492.771 49.8274 492.771H48.6812C46.4067 492.771 44.5629 490.927 44.5629 488.652V482.815Z" fill="#08234B"/>
<path d="M63.8129 471.468L49.2543 426.7L34.6957 471.468C33.9956 473.62 33.9851 476.064 35.7043 477.537C37.9865 479.492 42.2161 481.433 49.2543 481.433C56.2926 481.433 60.5221 479.492 62.8043 477.537C64.5235 476.064 64.513 473.62 63.8129 471.468Z" fill="#104179"/>
<path d="M140.264 127.277L218.754 82.4256L140.264 37.1004L60.0923 82.4256L140.264 127.277Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M140.264 227.071V127.277L60.0922 82.4253L21.9685 158.773L140.264 227.071Z" fill="var(--hero-illus-cube-side, #0E4073)"/>
<path d="M140.264 227.071V127.277L218.193 82.4253L259.12 158.449L140.264 227.071Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M288.859 97.6992L373.291 49.4527L288.859 0.696517L202.619 49.4527L288.859 97.6992Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M288.859 303.774V97.6992L202.618 49.4526L161.608 230.306L288.859 303.774Z" fill="var(--hero-illus-cube-front, #2066AB)"/>
<path d="M288.859 303.774V97.6992L372.687 49.4526L416.712 229.958L288.859 303.774Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M169.297 277.84L227.61 244.518L169.297 210.845L109.734 244.518L169.297 277.84Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M169.297 405.142V277.84L109.734 244.518L81.4104 354.4L169.297 405.142Z" fill="var(--hero-illus-cube-side, #0E4073)"/>
<path d="M169.297 405.142V277.84L227.193 244.518L257.6 354.16L169.297 405.142Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M154.855 321.143L169.865 311.806L101.694 272.44L85.2234 282.188L154.855 321.143Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M154.854 413.893V321.143L85.2227 282.189L52.1113 354.574L154.854 413.893Z" fill="var(--hero-illus-cube-side, #0E4073)"/>
<path d="M154.855 413.891V321.142L170.137 311.807L193.873 390.73L154.855 413.891Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M306.189 321.775L390.62 273.529L306.189 224.772L219.948 273.529L306.189 321.775Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M306.188 489.878V321.775L219.947 273.529L178.937 416.411L306.188 489.878Z" fill="var(--hero-illus-cube-front, #2066AB)"/>
<path d="M306.188 489.878V321.775L390.016 273.529L434.041 416.062L306.188 489.878Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M165.12 434.59L218.281 404.213L165.12 373.514L110.821 404.213L165.12 434.59Z" fill="var(--hero-illus-cube-top, #9DCDFD)"/>
<path d="M165.12 502.18V434.59L110.821 404.213L84.9999 455.922L165.12 502.18Z" fill="var(--hero-illus-cube-front, #2066AB)"/>
<path d="M165.12 502.18V434.59L217.901 404.213L245.621 455.703L165.12 502.18Z" fill="var(--hero-illus-cube-shadow, #0C234F)"/>
<path d="M9.43677 127.451C9.43677 125.49 11.0263 123.901 12.9871 123.901H13.9751C15.9359 123.901 17.5254 125.49 17.5254 127.451V132.483C17.5254 134.444 15.9359 136.034 13.9751 136.034H12.9871C11.0263 136.034 9.43677 134.444 9.43677 132.483V127.451Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M26.0317 117.669L13.4811 79.0759L0.930565 117.669C0.327057 119.525 0.318001 121.632 1.80006 122.901C3.76753 124.587 7.41366 126.26 13.4811 126.26C19.5486 126.26 23.1947 124.587 25.1622 122.901C26.6442 121.632 26.6352 119.525 26.0317 117.669Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
<path d="M82.4635 265.581C82.4635 263.594 84.0742 261.983 86.0611 261.983H87.0624C89.0493 261.983 90.66 263.594 90.66 265.581V270.68C90.66 272.667 89.0493 274.278 87.0624 274.278H86.0611C84.0742 274.278 82.4635 272.667 82.4635 270.68V265.581Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M99.2796 255.668L86.5617 216.561L73.8439 255.668C73.2323 257.549 73.2231 259.684 74.7249 260.97C76.7186 262.678 80.4134 264.374 86.5617 264.374C92.7101 264.374 96.4048 262.678 98.3985 260.97C99.9004 259.684 99.8912 257.549 99.2796 255.668Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
<path d="M243.821 522.185C243.821 519.936 245.643 518.114 247.892 518.114H249.025C251.273 518.114 253.096 519.936 253.096 522.185V527.955C253.096 530.204 251.273 532.026 249.025 532.026H247.892C245.643 532.026 243.821 530.204 243.821 527.955V522.185Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M262.85 510.968L248.458 466.715L234.067 510.968C233.375 513.096 233.365 515.512 235.064 516.968C237.32 518.9 241.501 520.819 248.458 520.819C255.416 520.819 259.597 518.9 261.853 516.968C263.552 515.512 263.542 513.096 262.85 510.968Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
<path d="M71.1348 430.778C71.1348 428.53 72.9574 426.707 75.2058 426.707H76.3388C78.5871 426.707 80.4098 428.53 80.4098 430.778V436.549C80.4098 438.797 78.5871 440.62 76.3388 440.62H75.2058C72.9574 440.62 71.1348 438.797 71.1348 436.549V430.778Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M90.1636 419.561L75.7723 375.308L61.381 419.561C60.689 421.689 60.6786 424.105 62.378 425.561C64.6341 427.494 68.815 429.412 75.7723 429.412C82.7297 429.412 86.9106 427.494 89.1666 425.561C90.866 424.105 90.8556 421.689 90.1636 419.561Z" fill="var(--hero-illus-tree-light, #2166A9)"/>
<path d="M51.9467 237.191C51.9467 234.916 53.7905 233.073 56.065 233.073H57.2112C59.4857 233.073 61.3295 234.916 61.3295 237.191V243.028C61.3295 245.303 59.4857 247.147 57.2112 247.147H56.065C53.7905 247.147 51.9467 245.303 51.9467 243.028V237.191Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M71.1967 225.844L56.6381 181.076L42.0795 225.844C41.3794 227.996 41.3689 230.441 43.0881 231.913C45.3703 233.868 49.5998 235.809 56.6381 235.809C63.6763 235.809 67.9058 233.868 70.1881 231.913C71.9073 230.441 71.8968 227.996 71.1967 225.844Z" fill="var(--hero-illus-tree-dark, #104179)"/>
<path d="M44.5629 482.815C44.5629 480.54 46.4067 478.696 48.6812 478.696H49.8274C52.1019 478.696 53.9457 480.54 53.9457 482.815V488.652C53.9457 490.927 52.1019 492.771 49.8274 492.771H48.6812C46.4067 492.771 44.5629 490.927 44.5629 488.652V482.815Z" fill="var(--hero-illus-tree-trunk, #08234B)"/>
<path d="M63.8129 471.468L49.2543 426.7L34.6957 471.468C33.9956 473.62 33.9851 476.064 35.7043 477.537C37.9865 479.492 42.2161 481.433 49.2543 481.433C56.2926 481.433 60.5221 479.492 62.8043 477.537C64.5235 476.064 64.513 473.62 63.8129 471.468Z" fill="var(--hero-illus-tree-dark, #104179)"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.0 KiB

After

Width:  |  Height:  |  Size: 5.9 KiB

150
src/components/HeroIllustrations.tsx Normal file
View File

@@ -0,0 +1,150 @@
import React from 'react';
interface IllustrationProps {
className?: string;
}
export const HeroIllustrationLeft: React.FC<IllustrationProps> = ({ className }) => {
return (
<svg
width="397"
height="600"
viewBox="0 0 397 600"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
className={className}
>
<path d="M186.387 120.496L290.519 60.9917L186.387 0.859037L80.0237 60.9917L186.387 120.496Z" fill="var(--hero-illus-cube-top)" />
<path d="M186.387 252.892V120.496L80.0237 60.9915L29.4452 162.282L186.387 252.892Z" fill="var(--hero-illus-cube-side)" />
<path d="M186.387 252.892V120.496L289.775 60.9915L344.073 161.852L186.387 252.892Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M246.727 163.846L336.474 112.562L307.482 94.9104L215.811 146.736L246.727 163.846Z" fill="var(--hero-illus-cube-top)" />
<path d="M246.726 255.171V163.846L215.81 146.737L217.785 234.035L246.726 255.171Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M246.726 255.17V163.846L335.833 112.562L366.682 176.707L246.726 255.17Z" fill="var(--hero-illus-cube-side)" />
<path d="M102.272 241.521L170.129 202.745L102.272 163.56L32.9596 202.745L102.272 241.521Z" fill="var(--hero-illus-cube-top)" />
<path d="M102.272 327.798V241.521L32.9597 202.745L0.00019455 268.751L102.272 327.798Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M102.272 327.798V241.521L169.645 202.745L205.028 268.471L102.272 327.798Z" fill="var(--hero-illus-cube-front)" />
<path d="M142.154 371.607L210.95 332.295L142.154 292.568L71.8843 332.295L142.154 371.607Z" fill="var(--hero-illus-cube-top)" />
<path d="M142.155 506.161V371.607L71.8845 332.295L29 434.774L142.155 506.161Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M142.155 506.161V371.607L210.459 332.295L267.026 434.774L142.155 506.161Z" fill="var(--hero-illus-cube-side)" />
<path d="M223.425 402.62L264.715 379.025L246.215 367.944L204.039 391.788L223.425 402.62Z" fill="var(--hero-illus-cube-top)" />
<path d="M206.717 493.25L223.425 402.62L203.908 391.692L185.698 481.067L206.717 493.25Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M206.717 493.251L223.424 402.62L264.42 379.025L298.371 440.532L206.717 493.251Z" fill="var(--hero-illus-cube-side)" />
<path d="M101.374 521.773L162.665 486.75L101.374 451.356L38.7697 486.75L101.374 521.773Z" fill="var(--hero-illus-cube-top)" />
<path d="M101.374 599.7V521.773L38.7699 486.75L9 546.368L101.374 599.7Z" fill="var(--hero-illus-cube-front)" />
<path d="M101.374 599.7V521.773L162.227 486.75L194.186 546.115L101.374 599.7Z" fill="var(--hero-illus-cube-shadow)" />
{/* Tree Trunks */}
<path d="M377.212 147.913C377.212 145.704 379.003 143.913 381.212 143.913H382.325C384.535 143.913 386.325 145.704 386.325 147.913V153.583C386.325 155.792 384.535 157.583 382.325 157.583H381.212C379.003 157.583 377.212 155.792 377.212 153.583V147.913Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M288.222 499.73C288.222 497.795 289.79 496.227 291.725 496.227H292.699C294.634 496.227 296.202 497.795 296.202 499.73V504.695C296.202 506.63 294.634 508.198 292.699 508.198H291.725C289.79 508.198 288.222 506.63 288.222 504.695V499.73Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M252.563 536.209C252.563 534.222 254.173 532.611 256.16 532.611H257.161C259.148 532.611 260.759 534.222 260.759 536.209V541.308C260.759 543.295 259.148 544.906 257.161 544.906H256.16C254.173 544.906 252.563 543.295 252.563 541.308V536.209Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M231.674 315.593C231.674 313.582 233.304 311.953 235.314 311.953H236.327C238.337 311.953 239.967 313.582 239.967 315.593V320.752C239.967 322.762 238.337 324.391 236.327 324.391H235.314C233.304 324.391 231.674 322.762 231.674 320.752V315.593Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M272.96 350.096C272.96 347.795 274.825 345.93 277.125 345.93H278.285C280.585 345.93 282.45 347.795 282.45 350.096V356.001C282.45 358.301 280.585 360.166 278.285 360.166H277.125C274.825 360.166 272.96 358.301 272.96 356.001V350.096Z" fill="var(--hero-illus-tree-trunk)" />
{/* Tree Foliage */}
<path d="M395.909 136.892L381.769 93.4106L367.629 136.892C366.949 138.983 366.938 141.357 368.608 142.787C370.825 144.686 374.933 146.571 381.769 146.571C388.605 146.571 392.713 144.686 394.929 142.787C396.599 141.357 396.589 138.983 395.909 136.892Z" fill="var(--hero-illus-tree-dark)" />
<path d="M304.595 490.078L292.212 452L279.829 490.078C279.233 491.909 279.224 493.988 280.687 495.241C282.628 496.904 286.225 498.555 292.212 498.555C298.199 498.555 301.796 496.904 303.737 495.241C305.2 493.988 305.191 491.909 304.595 490.078Z" fill="var(--hero-illus-tree-dark)" />
<path d="M269.379 526.296L256.661 487.189L243.943 526.296C243.331 528.177 243.322 530.312 244.824 531.598C246.818 533.306 250.513 535.002 256.661 535.002C262.809 535.002 266.504 533.306 268.498 531.598C269.999 530.312 269.99 528.177 269.379 526.296Z" fill="var(--hero-illus-tree-light)" />
<path d="M248.687 305.564L235.82 266L222.954 305.564C222.335 307.467 222.326 309.627 223.845 310.928C225.862 312.656 229.6 314.371 235.82 314.371C242.041 314.371 245.778 312.656 247.795 310.928C249.315 309.627 249.306 307.467 248.687 305.564Z" fill="var(--hero-illus-tree-light)" />
<path d="M292.431 338.619L277.705 293.336L262.979 338.619C262.271 340.796 262.26 343.268 263.999 344.758C266.308 346.735 270.586 348.699 277.705 348.699C284.824 348.699 289.102 346.735 291.411 344.758C293.15 343.268 293.139 340.796 292.431 338.619Z" fill="var(--hero-illus-tree-light)" />
</svg>
);
};
export const HeroIllustrationRight: React.FC<IllustrationProps> = ({ className }) => {
return (
<svg
width="435"
height="533"
viewBox="0 0 435 533"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
className={className}
>
<path d="M140.264 127.277L218.754 82.4256L140.264 37.1004L60.0923 82.4256L140.264 127.277Z" fill="var(--hero-illus-cube-top)" />
<path d="M140.264 227.071V127.277L60.0922 82.4253L21.9685 158.773L140.264 227.071Z" fill="var(--hero-illus-cube-side)" />
<path d="M140.264 227.071V127.277L218.193 82.4253L259.12 158.449L140.264 227.071Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M288.859 97.6992L373.291 49.4527L288.859 0.696517L202.619 49.4527L288.859 97.6992Z" fill="var(--hero-illus-cube-top)" />
<path d="M288.859 303.774V97.6992L202.618 49.4526L161.608 230.306L288.859 303.774Z" fill="var(--hero-illus-cube-front)" />
<path d="M288.859 303.774V97.6992L372.687 49.4526L416.712 229.958L288.859 303.774Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M169.297 277.84L227.61 244.518L169.297 210.845L109.734 244.518L169.297 277.84Z" fill="var(--hero-illus-cube-top)" />
<path d="M169.297 405.142V277.84L109.734 244.518L81.4104 354.4L169.297 405.142Z" fill="var(--hero-illus-cube-side)" />
<path d="M169.297 405.142V277.84L227.193 244.518L257.6 354.16L169.297 405.142Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M154.855 321.143L169.865 311.806L101.694 272.44L85.2234 282.188L154.855 321.143Z" fill="var(--hero-illus-cube-top)" />
<path d="M154.854 413.893V321.143L85.2227 282.189L52.1113 354.574L154.854 413.893Z" fill="var(--hero-illus-cube-side)" />
<path d="M154.855 413.891V321.142L170.137 311.807L193.873 390.73L154.855 413.891Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M306.189 321.775L390.62 273.529L306.189 224.772L219.948 273.529L306.189 321.775Z" fill="var(--hero-illus-cube-top)" />
<path d="M306.188 489.878V321.775L219.947 273.529L178.937 416.411L306.188 489.878Z" fill="var(--hero-illus-cube-front)" />
<path d="M306.188 489.878V321.775L390.016 273.529L434.041 416.062L306.188 489.878Z" fill="var(--hero-illus-cube-shadow)" />
<path d="M165.12 434.59L218.281 404.213L165.12 373.514L110.821 404.213L165.12 434.59Z" fill="var(--hero-illus-cube-top)" />
<path d="M165.12 502.18V434.59L110.821 404.213L84.9999 455.922L165.12 502.18Z" fill="var(--hero-illus-cube-front)" />
<path d="M165.12 502.18V434.59L217.901 404.213L245.621 455.703L165.12 502.18Z" fill="var(--hero-illus-cube-shadow)" />
{/* Tree Trunks */}
<path d="M9.43677 127.451C9.43677 125.49 11.0263 123.901 12.9871 123.901H13.9751C15.9359 123.901 17.5254 125.49 17.5254 127.451V132.483C17.5254 134.444 15.9359 136.034 13.9751 136.034H12.9871C11.0263 136.034 9.43677 134.444 9.43677 132.483V127.451Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M82.4635 265.581C82.4635 263.594 84.0742 261.983 86.0611 261.983H87.0624C89.0493 261.983 90.66 263.594 90.66 265.581V270.68C90.66 272.667 89.0493 274.278 87.0624 274.278H86.0611C84.0742 274.278 82.4635 272.667 82.4635 270.68V265.581Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M243.821 522.185C243.821 519.936 245.643 518.114 247.892 518.114H249.025C251.273 518.114 253.096 519.936 253.096 522.185V527.955C253.096 530.204 251.273 532.026 249.025 532.026H247.892C245.643 532.026 243.821 530.204 243.821 527.955V522.185Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M71.1348 430.778C71.1348 428.53 72.9574 426.707 75.2058 426.707H76.3388C78.5871 426.707 80.4098 428.53 80.4098 430.778V436.549C80.4098 438.797 78.5871 440.62 76.3388 440.62H75.2058C72.9574 440.62 71.1348 438.797 71.1348 436.549V430.778Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M51.9467 237.191C51.9467 234.916 53.7905 233.073 56.065 233.073H57.2112C59.4857 233.073 61.3295 234.916 61.3295 237.191V243.028C61.3295 245.303 59.4857 247.147 57.2112 247.147H56.065C53.7905 247.147 51.9467 245.303 51.9467 243.028V237.191Z" fill="var(--hero-illus-tree-trunk)" />
<path d="M44.5629 482.815C44.5629 480.54 46.4067 478.696 48.6812 478.696H49.8274C52.1019 478.696 53.9457 480.54 53.9457 482.815V488.652C53.9457 490.927 52.1019 492.771 49.8274 492.771H48.6812C46.4067 492.771 44.5629 490.927 44.5629 488.652V482.815Z" fill="var(--hero-illus-tree-trunk)" />
{/* Tree Foliage */}
<path d="M26.0317 117.669L13.4811 79.0759L0.930565 117.669C0.327057 119.525 0.318001 121.632 1.80006 122.901C3.76753 124.587 7.41366 126.26 13.4811 126.26C19.5486 126.26 23.1947 124.587 25.1622 122.901C26.6442 121.632 26.6352 119.525 26.0317 117.669Z" fill="var(--hero-illus-tree-light)" />
<path d="M99.2796 255.668L86.5617 216.561L73.8439 255.668C73.2323 257.549 73.2231 259.684 74.7249 260.97C76.7186 262.678 80.4134 264.374 86.5617 264.374C92.7101 264.374 96.4048 262.678 98.3985 260.97C99.9004 259.684 99.8912 257.549 99.2796 255.668Z" fill="var(--hero-illus-tree-light)" />
<path d="M262.85 510.968L248.458 466.715L234.067 510.968C233.375 513.096 233.365 515.512 235.064 516.968C237.32 518.9 241.501 520.819 248.458 520.819C255.416 520.819 259.597 518.9 261.853 516.968C263.552 515.512 263.542 513.096 262.85 510.968Z" fill="var(--hero-illus-tree-light)" />
<path d="M90.1636 419.561L75.7723 375.308L61.381 419.561C60.689 421.689 60.6786 424.105 62.378 425.561C64.6341 427.494 68.815 429.412 75.7723 429.412C82.7297 429.412 86.9106 427.494 89.1666 425.561C90.866 424.105 90.8556 421.689 90.1636 419.561Z" fill="var(--hero-illus-tree-light)" />
<path d="M71.1967 225.844L56.6381 181.076L42.0795 225.844C41.3794 227.996 41.3689 230.441 43.0881 231.913C45.3703 233.868 49.5998 235.809 56.6381 235.809C63.6763 235.809 67.9058 233.868 70.1881 231.913C71.9073 230.441 71.8968 227.996 71.1967 225.844Z" fill="var(--hero-illus-tree-dark)" />
<path d="M63.8129 471.468L49.2543 426.7L34.6957 471.468C33.9956 473.62 33.9851 476.064 35.7043 477.537C37.9865 479.492 42.2161 481.433 49.2543 481.433C56.2926 481.433 60.5221 479.492 62.8043 477.537C64.5235 476.064 64.513 473.62 63.8129 471.468Z" fill="var(--hero-illus-tree-dark)" />
</svg>
);
};
export const HeroIllustrationSun: React.FC<IllustrationProps> = ({ className }) => {
return (
<svg
width="139"
height="139"
viewBox="0 0 139 139"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
className={className}
>
<path
d="M108.635 69.2868C108.635 91.0182 91.0183 108.635 69.287 108.635C47.5556 108.635 29.9388 91.0182 29.9388 69.2868C29.9388 47.5555 47.5556 29.9387 69.287 29.9387C91.0183 29.9387 108.635 47.5555 108.635 69.2868Z"
fill="var(--hero-illus-sun)"
/>
<rect x="64.1548" width="10.2647" height="22.2402" fill="var(--hero-illus-sun)" />
<rect x="64.1548" y="116.333" width="10.2647" height="22.2402" fill="var(--hero-illus-sun)" />
<rect x="0.00012207" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 0.00012207 74.4192)" fill="var(--hero-illus-sun)" />
<rect x="116.334" y="74.4192" width="10.2647" height="22.2402" transform="rotate(-90 116.334 74.4192)" fill="var(--hero-illus-sun)" />
<rect x="108.375" y="126.725" width="10.2647" height="22.2402" transform="rotate(150 108.375 126.725)" fill="var(--hero-illus-sun)" />
<rect x="50.2089" y="25.9771" width="10.2647" height="22.2402" transform="rotate(150 50.2089 25.9771)" fill="var(--hero-illus-sun)" />
<rect x="99.4855" y="6.71606" width="10.2647" height="22.2402" transform="rotate(30 99.4855 6.71606)" fill="var(--hero-illus-sun)" />
<rect x="41.3184" y="107.464" width="10.2647" height="22.2402" transform="rotate(30 41.3184 107.464)" fill="var(--hero-illus-sun)" />
<rect x="6.71667" y="39.0881" width="10.2647" height="22.2402" transform="rotate(-60 6.71667 39.0881)" fill="var(--hero-illus-sun)" />
<rect x="107.464" y="97.2551" width="10.2647" height="22.2402" transform="rotate(-60 107.464 97.2551)" fill="var(--hero-illus-sun)" />
<rect x="11.849" y="108.375" width="10.2647" height="22.2402" transform="rotate(-120 11.849 108.375)" fill="var(--hero-illus-sun)" />
<rect x="112.597" y="50.208" width="10.2647" height="22.2402" transform="rotate(-120 112.597 50.208)" fill="var(--hero-illus-sun)" />
</svg>
);
};
export const HeroIllustrationMoon: React.FC<IllustrationProps> = ({ className }) => {
return (
<svg
width="139"
height="139"
viewBox="0 0 139 139"
fill="none"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
className={className}
>
{/* Bright Half-Moon Crescent (Rotated 45° so U-shape points up-left) */}
<path
d="M70 20 A 48 48 0 0 1 70 116 A 66 66 0 0 0 70 20 Z"
transform="rotate(45 69.5 69.5)"
fill="var(--hero-illus-moon)"
/>
</svg>
);
};

30
src/components/ScenicHeroJourney.tsx
View File

@@ -3,31 +3,21 @@
import React from 'react';
import { HeroSection } from './HeroSection';
import { RiverJourney } from './RiverJourney';
import {
HeroIllustrationLeft,
HeroIllustrationRight,
HeroIllustrationSun,
HeroIllustrationMoon,
} from './HeroIllustrations';
import styles from './ScenicHeroJourney.module.css';
type BackdropImgProps = {
name: 'left' | 'right' | 'sun';
className: string;
};
function BackdropImg({ name, className }: BackdropImgProps) {
return (
<img
src={`/assets/bg-illustrations/${name}.svg`}
alt=""
aria-hidden="true"
draggable={false}
className={className}
/>
);
}
function HeroBackdrop() {
return (
<div className={styles.heroBackdrop} aria-hidden="true">
<BackdropImg name="left" className={styles.backdropLeft} />
<BackdropImg name="right" className={styles.backdropRight} />
<BackdropImg name="sun" className={styles.backdropSun} />
<HeroIllustrationLeft className={styles.backdropLeft} />
<HeroIllustrationRight className={styles.backdropRight} />
<HeroIllustrationSun className={styles.backdropSun} />
<HeroIllustrationMoon className={styles.backdropMoon} />
</div>
);
}