paulnicoue/components/ServicesSection.vue

<template>

    <div class="services-wrapper">
        <section id="prestations" class="services">
            <div class="services__illustration">
                <svg viewBox="0 0 1139.17088 654.54324" xmlns="http://www.w3.org/2000/svg">
                    <g>
                        <rect x="586.171" y="32.543" width="255" height="2" fill="var(--primary-color)"/>
                        <rect x="796" y="22" width="28" height="28" fill="var(--secondary-accent-color)"/>
                        <path d="M 841 34 L 807 34 L 807 0 L 841 0 L 841 34 Z M 808.478 32.522 L 839.522 32.522 L 839.522 1.478 L 808.478 1.478 L 808.478 32.522 Z" fill="var(--primary-color)"/>
                        <rect x="304.171" y="447.543" width="733" height="2" fill="var(--primary-color)"/>
                        <circle cx="246.827" cy="521.765" r="59.243" fill="var(--secondary-color)"/>
                        <circle cx="256.46" cy="513.095" r="59.243" fill="var(--secondary-accent-color)"/>
                        <path d="M 320.171 654.543 C 253.199 654.543 211.341 582.043 244.827 524.043 C 278.313 466.043 362.029 466.043 395.516 524.043 C 403.151 537.269 407.171 552.272 407.171 567.543 C 407.117 615.569 368.198 654.489 320.171 654.543 Z M 320.171 482.543 C 254.738 482.543 213.843 553.377 246.559 610.043 C 279.276 666.71 361.067 666.71 393.784 610.043 C 401.244 597.122 405.171 582.464 405.171 567.543 C 405.118 520.621 367.094 482.596 320.171 482.543 Z" fill="var(--primary-color)"/>
                        <rect x="192.672" y="652.543" width="255" height="2" fill="var(--primary-color)"/>
                        <rect x="406.171" y="560.543" width="733" height="2" fill="var(--primary-color)"/>
                        <rect x="471" y="550" width="28" height="28" fill="var(--secondary-accent-color)"/>
                        <rect x="1078" y="550" width="28" height="28" fill="var(--secondary-accent-color)"/>
                        <path d="M 516 562 L 482 562 L 482 528 L 516 528 L 516 562 Z M 483.478 560.522 L 514.522 560.522 L 514.522 529.478 L 483.478 529.478 L 483.478 560.522 Z" fill="var(--primary-color)"/>
                        <path d="M 1123 562 L 1089 562 L 1089 528 L 1123 528 L 1123 562 Z M 1090.478 560.522 L 1121.522 560.522 L 1121.522 529.478 L 1090.478 529.478 L 1090.478 560.522 Z" fill="var(--primary-color)"/>
                    </g>
                    <g>
                        <path d="M 683.793 18.652 L 423.623 18.652 L 423.623 13.29 L 305.652 13.29 L 305.652 18.652 L 44.41 18.652 C 34.691 18.652 26.812 26.531 26.812 36.251 L 26.812 392.503 C 26.812 402.222 34.691 410.101 44.41 410.101 L 683.793 410.101 C 693.512 410.101 701.391 402.222 701.391 392.503 L 701.391 36.251 C 701.391 26.531 693.512 18.652 683.793 18.652 Z" fill="var(--primary-color)"/>
                        <rect x="50.406" y="49.754" width="627.391" height="353.913" fill="var(--primary-accent-color)"/>
                        <polygon points="498.374 403.667 50.406 403.667 50.406 49.754 498.374 403.667" opacity="0.1"/>
                        <circle cx="363.565" cy="33.667" r="6.435" fill="var(--primary-accent-color)"/>
                        <rect x="614.917" y="56.934" width="24.492" height="24.492" fill="var(--secondary-color)"/>
                        <path d="M 650.78 92.797 L 621.04 92.797 L 621.04 63.057 L 650.78 63.057 L 650.78 92.797 Z M 622.333 91.504 L 649.487 91.504 L 649.487 64.35 L 622.333 64.35 L 622.333 91.504 Z" fill="var(--primary-color)"/>
                        <circle cx="148.574" cy="316.876" r="60.307" fill="var(--secondary-color)"/>
                        <path d="M 163.171 354.543 C 104.667 354.543 68.101 291.21 97.353 240.543 C 126.606 189.877 199.737 189.877 228.989 240.543 C 235.66 252.097 239.171 265.202 239.171 278.543 C 239.124 320.497 205.125 354.496 163.171 354.543 Z M 163.171 204.543 C 106.206 204.543 70.603 266.21 99.085 315.543 C 127.568 364.877 198.775 364.877 227.257 315.543 C 233.752 304.294 237.171 291.533 237.171 278.543 C 237.125 237.693 204.021 204.589 163.171 204.543 Z" fill="var(--primary-color)"/>
                        <rect x="439.102" y="145.279" width="200.307" height="5.248" fill="var(--primary-color)"/>
                        <rect x="439.102" y="161.898" width="200.307" height="5.248" fill="var(--primary-color)"/>
                        <rect x="439.102" y="178.518" width="200.307" height="5.248" fill="var(--primary-color)"/>
                        <rect x="439.102" y="195.137" width="200.307" height="5.248" fill="var(--primary-color)"/>
                        <rect x="439.102" y="211.757" width="200.307" height="5.248" fill="var(--primary-color)"/>
                        <rect x="509.953" y="240.622" width="58.605" height="12.246" fill="var(--primary-color)"/>
                        <path d="M 719.007 397.232 L 657.778 397.232 L 657.778 392.82 C 657.778 392.337 657.386 391.946 656.903 391.946 L 635.91 391.946 C 635.427 391.946 635.035 392.337 635.035 392.82 L 635.035 397.232 L 621.915 397.232 L 621.915 392.82 C 621.915 392.337 621.523 391.946 621.04 391.946 L 600.047 391.946 C 599.564 391.946 599.173 392.337 599.173 392.82 L 599.173 397.232 L 586.052 397.232 L 586.052 392.82 C 586.052 392.337 585.66 391.946 585.177 391.946 L 564.184 391.946 C 563.701 391.946 563.31 392.337 563.31 392.82 L 563.31 397.232 L 550.189 397.232 L 550.189 392.82 C 550.189 392.337 549.798 391.946 549.314 391.946 L 528.322 391.946 C 527.838 391.946 527.447 392.337 527.447 392.82 L 527.447 397.232 L 514.326 397.232 L 514.326 392.82 C 514.326 392.337 513.935 391.946 513.452 391.946 L 492.459 391.946 C 491.976 391.946 491.584 392.337 491.584 392.82 L 491.584 397.232 L 478.463 397.232 L 478.463 392.82 C 478.463 392.337 478.072 391.946 477.589 391.946 L 456.596 391.946 C 456.113 391.946 455.721 392.337 455.721 392.82 L 455.721 397.232 L 442.6 397.232 L 442.6 392.82 C 442.6 392.337 442.209 391.946 441.726 391.946 L 277.281 391.946 C 276.798 391.946 276.407 392.337 276.407 392.82 L 276.407 397.232 L 263.286 397.232 L 263.286 392.82 C 263.286 392.337 262.894 391.946 262.411 391.946 L 241.418 391.946 C 240.935 391.946 240.544 392.337 240.544 392.82 L 240.544 397.232 L 227.423 397.232 L 227.423 392.82 C 227.423 392.337 227.032 391.946 226.548 391.946 L 205.556 391.946 C 205.072 391.946 204.681 392.337 204.681 392.82 L 204.681 397.232 L 191.56 397.232 L 191.56 392.82 C 191.56 392.337 191.169 391.946 190.686 391.946 L 169.693 391.946 C 169.21 391.946 168.818 392.337 168.818 392.82 L 168.818 397.232 L 155.697 397.232 L 155.697 392.82 C 155.697 392.337 155.306 391.946 154.823 391.946 L 133.83 391.946 C 133.347 391.946 132.955 392.337 132.955 392.82 L 132.955 397.232 L 119.835 397.232 L 119.835 392.82 C 119.835 392.337 119.443 391.946 118.96 391.946 L 97.967 391.946 C 97.484 391.946 97.092 392.337 97.092 392.82 L 97.092 397.232 L 83.972 397.232 L 83.972 392.82 C 83.972 392.337 83.58 391.946 83.097 391.946 L 62.104 391.946 C 61.621 391.946 61.229 392.337 61.229 392.82 L 61.229 397.232 L 20.993 397.232 C 9.399 397.232 0 406.631 0 418.225 L 0 427.717 C 0 439.311 9.399 448.71 20.993 448.71 L 719.007 448.71 C 730.601 448.71 740 439.311 740 427.717 L 740 418.225 C 740 406.631 730.601 397.232 719.007 397.232 Z" fill="var(--primary-color)"/>
                    </g>
                    <g>
                        <path d="M 1057.171 231.958 L 1054.793 231.958 L 1054.793 166.797 C 1054.793 145.968 1037.908 129.083 1017.079 129.083 L 879.025 129.083 C 858.197 129.083 841.312 145.968 841.312 166.797 L 841.312 524.278 C 841.312 545.107 858.197 561.992 879.025 561.992 L 1017.079 561.992 C 1037.908 561.992 1054.793 545.107 1054.793 524.278 L 1054.793 278.341 L 1057.171 278.341 L 1057.171 231.958 Z" fill="var(--primary-color)"/>
                        <path d="M 1046.761 169.013 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 169.013 C 851.723 153.462 864.33 140.855 879.881 140.853 L 896.711 140.853 C 893.124 149.653 899.598 159.284 909.101 159.283 L 988.191 159.283 C 997.695 159.284 1004.169 149.653 1000.581 140.853 L 1018.601 140.853 C 1034.153 140.855 1046.76 153.462 1046.761 169.013 Z" fill="var(--primary-accent-color)"/>
                        <path d="M 1046.761 487.853 L 1046.761 525.973 C 1046.764 541.528 1034.156 554.14 1018.601 554.143 L 879.881 554.143 C 864.326 554.14 851.719 541.528 851.721 525.973 L 851.721 333.763 L 968.591 426.093 L 970.591 427.673 L 992.331 444.843 L 994.361 446.453 L 1046.761 487.853 Z" opacity="0.1"/>
                        <rect x="929.684" y="211.179" width="24.492" height="24.492" fill="var(--secondary-color)"/>
                        <path d="M 939.059 217.303 L 939.059 247.043 L 968.799 247.043 L 968.799 217.303 L 939.059 217.303 Z M 967.509 245.753 L 940.349 245.753 L 940.349 218.593 L 967.509 218.593 L 967.509 245.753 Z" fill="var(--primary-color)"/>
                        <circle cx="937.241" cy="498.707" r="43.868" fill="var(--secondary-color)"/>
                        <path d="M 950.171 532.543 C 907.832 532.543 881.37 486.71 902.54 450.043 C 923.709 413.377 976.633 413.377 997.803 450.043 C 1002.63 458.404 1005.171 467.889 1005.171 477.543 C 1005.137 507.905 980.533 532.509 950.171 532.543 Z M 950.171 424.543 C 909.372 424.543 883.872 468.71 904.272 504.043 C 924.672 539.377 975.671 539.377 996.071 504.043 C 1000.722 495.986 1003.171 486.847 1003.171 477.543 C 1003.139 448.286 979.429 424.576 950.171 424.543 Z" fill="var(--primary-color)"/>
                        <rect x="878.621" y="280.875" width="141.24" height="5.248" fill="var(--primary-color)"/>
                        <rect x="878.621" y="297.494" width="141.24" height="5.248" fill="var(--primary-color)"/>
                        <rect x="878.621" y="314.114" width="141.24" height="5.248" fill="var(--primary-color)"/>
                        <rect x="878.621" y="330.733" width="141.24" height="5.248" fill="var(--primary-color)"/>
                        <rect x="878.621" y="347.352" width="141.24" height="5.248" fill="var(--primary-color)"/>
                        <rect x="928.58" y="376.218" width="41.324" height="12.246" fill="var(--primary-color)"/>
                    </g>
                </svg>
            </div>
            <h2 class="services__title">Prestations</h2>
            <ul class="services__list">
                <li>
                    <h3>Intégration web et développement front-end</h3>
                    <p>Intégration de maquettes dans le respect des standards W3C et de la charte graphique définie par votre agence de communication digitale.</p>
                </li>
                <li>
                    <h3>Création de site internet sur mesure</h3>
                    <p>Accompagnement de votre entreprise ou association dans la création ou la refonte de son site vitrine, portfolio ou e-commerce.</p>
                </li>
            </ul>
        </section>
    </div>

</template>

<script setup>
</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    .services-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        color: var(--primary-color);
        background-image: var(--primary-accent-gradient);
        background-size: 100%;
    }

    .services {
        display: grid;
        grid:
            'illustration' auto
            'title' auto
            'list' auto
            / 1fr;
        place-content: start;
        place-items: start;
        row-gap: 2rem;
        column-gap: 1rem;

        &__illustration {
            grid-area: illustration;
            width: 100%;
            display: flex;
            justify-content: center;

            svg {
                max-width: 30rem;
                height: auto;
            }
        }

        &__title {
            grid-area: title;
        }

        &__list {
            grid-area: list;
            display: flex;
            flex-direction: column;
            gap: 2rem;

            h3 {
                margin-bottom: 0.5rem;
            }
        }

        @media screen and (min-width: $tablet-media-query) {

            grid:
                'title illustration' auto
                'list list' auto
                / auto 1fr;

            &__title {
                place-self: end start;
            }

            &__list {
                flex-direction: row;
                gap: 4rem;
            }
        }
    }

</style>