From 33db0be06bad73512e34bbf07ab84c26fba21d06 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Fri, 10 May 2024 17:46:10 +0200
Subject: [PATCH] add icon list block and a fun happy placeholder piggy

---
 web/public/assets/icons/neufneuf.svg          |  6 ++
 web/src/components/blocks/IconListBlock.tsx   | 75 +++++++++++++++++++
 .../blocks/iconListBlock.module.scss          | 60 +++++++++++++++
 web/src/components/general/Body.tsx           |  2 +
 4 files changed, 143 insertions(+)
 create mode 100644 web/public/assets/icons/neufneuf.svg
 create mode 100644 web/src/components/blocks/IconListBlock.tsx
 create mode 100644 web/src/components/blocks/iconListBlock.module.scss

diff --git a/web/public/assets/icons/neufneuf.svg b/web/public/assets/icons/neufneuf.svg
new file mode 100644
index 0000000..c7c9761
--- /dev/null
+++ b/web/public/assets/icons/neufneuf.svg
@@ -0,0 +1,6 @@
+<svg width="120" height="120" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.6652 71.3249C71.1722 70.6766 70.304 69.9918 69.193 69.6548C68.0856 69.3106 66.7649 69.252 65.4184 69.6988C64.7488 69.9222 64.0792 70.2921 63.4943 70.8451C62.9167 71.3981 62.42 72.1965 62.3097 73.1304C62.2618 73.5918 62.2986 74.0606 62.4274 74.4964C62.5635 74.9323 62.7769 75.3205 63.0307 75.6501C63.5531 76.2983 64.2043 76.7158 64.8555 76.9685C66.1689 77.4812 67.4712 77.3934 68.516 77.0454C69.5645 76.6902 70.3555 76.0236 70.7308 75.3461C71.1207 74.6686 71.095 74.0753 71.014 73.8519C70.9662 73.72 70.8338 73.6541 70.694 73.6468C71.1391 73.6468 71.5806 73.5955 71.9043 73.4124C72.2318 73.2366 72.412 72.918 72.3127 72.5664C72.2943 72.5371 72.1692 71.9841 71.6652 71.3322V71.3249Z" fill="#720328"/>
+<path d="M25.0197 84.9194C25.8585 84.436 25.9983 83.1212 25.3361 81.9749C24.6739 80.8323 23.4561 80.2939 22.6173 80.7737C21.7785 81.2534 21.6387 82.5719 22.3009 83.7182C22.9631 84.8608 24.1809 85.3992 25.0197 84.9194Z" fill="#720328"/>
+<path d="M17.2644 74.3426C16.4183 74.7162 16.1902 76.0456 16.753 77.3128C17.3159 78.5799 18.4601 79.3051 19.3062 78.9315C20.1524 78.558 20.3805 77.2285 19.8176 75.9614C19.2547 74.6942 18.1106 73.9691 17.2644 74.3426Z" fill="#720328"/>
+<path d="M116.85 61.7407C116.677 61.1218 116.486 60.5248 116.269 59.9462L115.507 57.8184C115.275 57.1006 114.955 56.423 114.65 55.7345L113.737 53.6763C111.155 48.2597 107.789 43.3375 104.275 38.6387C101.247 34.6028 98.1351 30.6805 95.0926 26.7545C92.9367 24.0077 90.8949 21.2134 88.923 18.3824L87.5103 16.2253L86.8039 15.1485L86.1491 14.0462L84.8431 11.8414L83.1471 8.61859C82.8196 7.97402 82.3671 7.60778 81.9845 7.38072C81.635 7.17929 81.0942 6.99617 80.524 7.00716C80.0052 7.01082 79.4939 7.16464 79.1407 7.38438C79.0782 7.42467 79.023 7.47228 78.9715 7.52721L78.4932 8.03628L78.2173 8.33293L78.0775 8.47942C78.0333 8.53069 77.9818 8.56732 77.9487 8.66254L77.2902 10.1311L77.1246 10.4974L76.9812 10.8306L76.8193 11.2115C76.6022 11.7169 76.3999 12.237 76.1975 12.757C75.7965 13.7971 75.4323 14.8629 75.1012 15.9433C74.4537 18.1114 73.9681 20.382 73.8283 22.7222C73.7511 23.8905 73.7621 25.0808 73.8798 26.2527C73.9939 27.421 74.1999 28.5563 74.4353 29.6514C74.9099 31.8451 75.5022 33.9033 75.8738 35.903C76.0614 36.9028 76.1902 37.8806 76.2307 38.8438C76.2711 39.8107 76.2307 40.8105 76.1497 41.8433C76.1387 42.0081 76.124 42.1765 76.1093 42.345C75.4323 42.2022 74.7885 41.9348 74.1337 41.7078C73.2323 41.3928 72.3126 41.1218 71.3855 40.8984C69.3584 40.4113 67.3313 40.2099 65.2601 40.122C65.2453 40.122 65.2306 40.122 65.2159 40.122C65.2306 38.5984 64.2815 36.8259 63.4758 35.7748C62.2764 34.2073 60.6467 32.9328 59.0721 31.7572C57.446 30.545 55.7279 29.4536 53.8737 28.6259C51.6038 27.6114 49.1353 26.9779 46.6777 26.6995C44.2276 26.4322 41.851 26.4834 39.57 26.4871C37.2854 26.5018 35.1075 26.4248 32.9001 26.1428C29.1255 25.6777 25.4282 24.6523 21.9148 23.224C19.0783 22.107 16.2602 20.404 12.7947 19.4261C11.0729 18.9464 9.1231 18.6973 7.16959 19.0379L6.44116 19.1808C6.14316 19.2577 5.8562 19.3492 5.58396 19.4628C5.31172 19.5763 5.04684 19.7045 4.79299 19.8583C4.66423 19.9352 4.54282 20.0121 4.41038 20.1037C4.24115 20.2135 4.09031 20.3454 3.93948 20.4736C3.34717 21.0046 2.85787 21.6528 2.64449 22.3853L2.56355 22.66L2.5194 22.9383C2.49365 23.1178 2.50101 23.3082 2.49365 23.495C2.50469 23.6818 2.51573 23.8722 2.55619 24.0553C2.61138 24.2348 2.64081 24.4252 2.70335 24.601C2.8689 25.0075 3.08596 25.3957 3.38763 25.729C3.65988 26.033 3.98362 26.304 4.34416 26.5201C4.52075 26.6336 4.71205 26.7325 4.89968 26.824L5.04316 26.89L5.14249 26.9339L5.33012 27.0145C5.57293 27.1134 5.79734 27.1976 5.996 27.2672L6.53313 27.4943L7.61106 27.9411C7.79501 28.007 7.96792 28.0985 8.13715 28.1938L8.65588 28.4684C9.0017 28.6552 9.3512 28.8273 9.69334 29.0251L10.6903 29.677C11.3673 30.0835 11.9816 30.6182 12.6144 31.1053C15.1124 33.1452 17.3124 35.6576 19.5198 38.2176C21.7235 40.7849 23.9235 43.4584 26.4215 45.9597C27.0763 46.586 27.7312 47.2159 28.4191 47.8129L29.4824 48.6882L30.0158 49.124L30.5824 49.5268C32.1018 50.6512 33.577 51.5338 35.0596 52.4933C36.1523 53.1892 37.1934 53.9766 38.2934 54.6834C38.5362 54.8409 38.7901 54.9947 39.0476 55.1339C39.0035 55.1888 38.9556 55.2401 38.9115 55.295C37.5613 56.9248 36.3804 58.6717 35.1369 60.349C35.1369 60.349 34.7653 60.8471 34.758 60.8544L34.7212 60.8874C34.6733 60.935 34.5777 60.99 34.5078 61.0412C34.1951 61.2536 33.8051 61.4734 33.3894 61.6748C32.558 62.085 31.6382 62.4512 30.7074 62.7918C28.8349 63.473 26.8813 64.059 24.9205 64.6266C22.9155 65.2016 20.9178 65.8425 18.887 66.3663C18.1365 66.5567 17.3603 66.6373 16.6061 66.7838C16.378 66.8277 16.1425 66.8753 15.9328 66.9705C14.0639 67.0767 12.5923 67.9301 11.5475 68.8383C5.19032 74.3684 12.1582 82.3011 15.1345 85.6887C19.4057 90.5523 23.6145 93.0976 27.1205 93.0976C28.4155 93.0976 29.6111 92.746 30.6817 92.0392C30.9282 92.0392 31.1784 92.0282 31.2556 92.0246C32.3078 91.9916 33.3894 92.1747 34.4416 92.2333C34.5372 92.237 35.1001 92.2956 35.8322 92.3688C37.2081 94.7017 38.871 96.8918 40.9312 98.6644C42.9436 100.397 45.4011 101.437 47.7593 102.605C49.4884 103.458 51.2359 104.268 52.9908 105.07C53.848 105.462 54.7089 105.846 55.5624 106.249C56.3055 106.601 56.7727 106.732 57.5858 106.912C58.1376 107.036 60.1059 107.201 60.2309 105.861C60.3744 104.279 57.538 102.931 56.2172 102.396C52.4353 100.862 48.4547 99.2064 45.0038 97.0163C43.3078 95.9396 41.9944 94.5882 40.7693 93.0134C40.6995 92.9218 40.6222 92.8303 40.5486 92.7387C40.6443 92.7424 40.4861 92.7314 40.1807 92.7094C41.2954 92.7497 41.8804 92.7204 42.0974 92.7021C44.5513 92.5593 46.8801 91.4459 48.7085 89.8418C49.6393 89.0214 50.4192 88.0729 51.0851 87.0291C51.648 86.1465 52.5236 84.894 52.0159 83.8063C51.8135 83.3741 51.2286 83.0372 50.25 82.8724C49.2125 82.6929 48.5393 84.2348 48.1125 84.9196C47.5239 85.8609 46.6667 86.6483 45.747 87.2709C42.3071 89.6111 38.6319 88.842 34.7616 88.5014L33.4299 88.3659C34.4342 84.8024 32.5138 79.9352 27.8489 74.6248C25.6931 72.1711 23.883 70.4278 22.2091 69.2119C23.986 68.7468 25.7593 68.256 27.5325 67.7286C28.879 67.3258 30.2623 67.0072 31.6088 66.5164C32.6646 66.1282 33.7131 65.6924 34.7727 65.165C35.3061 64.8903 35.8322 64.6083 36.3841 64.2384C36.5202 64.1505 36.6637 64.0407 36.8035 63.9418C36.8734 63.8869 36.9396 63.8466 37.0168 63.777L37.2707 63.5572C37.3663 63.462 37.4841 63.3998 37.554 63.2862L37.771 62.9859L38.0065 62.66C39.8349 60.1037 41.7112 57.6096 43.7824 55.3023C46.159 52.6691 48.7784 50.285 51.6369 48.3476C52.0895 48.0473 52.5383 47.7396 53.0055 47.4686C53.2373 47.3294 53.4654 47.183 53.7008 47.0511L54.4072 46.6629C57.3651 45.0588 60.5915 44.0626 63.8952 43.8978C67.3276 43.7257 70.7858 44.4582 74.0638 45.7363C74.3102 45.8206 74.5531 45.9231 74.8069 45.989C75.241 46.0952 75.5317 46.1245 75.7965 46.0147C75.7377 46.7947 75.6898 47.5895 75.6862 48.4098C75.6862 49.0068 75.7009 49.6111 75.7561 50.2227L75.7929 50.6548C75.7929 50.6548 75.7965 50.6915 75.8002 50.7098L75.8664 51.1456L76.0062 52.0319C76.0099 52.0575 76.0136 52.0795 76.021 52.1051L76.2343 52.9731L76.341 53.3906C76.3447 53.4126 76.3521 53.4346 76.3594 53.4529L76.4955 53.863L76.7825 54.709C76.7899 54.731 76.7972 54.753 76.8083 54.7713L77.1578 55.588L77.3307 55.9835C77.338 56.0019 77.3491 56.0202 77.3564 56.0385L77.5551 56.4194L77.9708 57.2031C77.9818 57.2214 77.9929 57.2397 78.0039 57.258L78.4748 58.0088L78.7066 58.3714C78.7066 58.3714 78.7287 58.4043 78.7397 58.419L78.9935 58.7633L79.5196 59.4737C79.5196 59.4737 79.5454 59.5067 79.5564 59.5214L80.1303 60.1952L80.4099 60.5212C80.4099 60.5212 80.4357 60.5505 80.4504 60.5651L80.7521 60.8728L81.3959 61.5246C82.7019 62.7625 84.1293 63.9052 85.7628 64.7475C86.436 65.0698 87.1534 65.4104 87.8635 65.5093C88.1063 65.5496 88.3307 65.5788 88.5404 65.5752C88.7538 65.5679 88.9451 65.5422 89.1143 65.5019C89.4564 65.425 89.7103 65.2895 89.8758 65.1101C90.207 64.7512 90.1702 64.2201 89.8023 63.6232C89.6625 63.3961 89.5116 63.18 89.3424 62.9823C89.1768 62.7735 89.0039 62.5648 88.8016 62.3816C88.6029 62.1985 88.3822 62.0374 88.1431 61.8543C87.9039 61.6785 87.628 61.543 87.33 61.3818C84.523 59.9535 82.1685 57.5474 80.7852 54.7054C80.0935 53.2844 79.6337 51.7645 79.4865 50.2117C79.3283 48.6369 79.4387 46.9705 79.6042 45.2346C79.7367 43.8283 79.9317 42.3743 80.031 40.8544C80.0751 40.0927 80.0935 39.3163 80.0678 38.5252C80.0273 37.7378 79.9574 36.9504 79.8323 36.196C79.4534 33.8045 78.7875 31.5997 78.2762 29.4792C78.0186 28.4172 77.7979 27.3771 77.6581 26.3516C77.5183 25.3298 77.4741 24.3153 77.5072 23.2862C77.6139 20.6164 78.2909 17.9209 79.2437 15.273C79.4792 14.6102 79.7367 13.9473 80.0052 13.2881L80.4909 12.1198C80.535 12.0429 80.5424 11.911 80.6491 11.8964C80.7631 11.8854 80.7852 12.0136 80.8367 12.0905L81.4879 13.3247C83.4046 16.6977 85.4905 19.9645 87.7457 23.0738C89.9899 26.1868 92.3223 29.2265 94.6732 32.204C96.1484 34.0938 97.6384 35.9616 99.0842 37.844C100.239 39.3089 101.325 40.8032 102.439 42.2864C103.495 43.799 104.599 45.2859 105.574 46.8387L106.328 47.9923L106.703 48.571L107.049 49.1606L108.44 51.5228C108.881 52.3175 109.279 53.1342 109.702 53.94C109.908 54.3465 110.125 54.7457 110.316 55.1559L110.857 56.401L111.42 57.6939L111.699 58.3384C111.788 58.5545 111.858 58.7779 111.935 58.9976L112.858 61.6455C113.436 63.4217 113.829 65.1137 113.627 66.5677L113.557 67.0474C113.55 67.0877 113.542 67.128 113.531 67.1646C113.487 67.3221 113.436 67.4759 113.392 67.6298C113.366 67.7177 113.347 67.8055 113.314 67.8934L113.2 68.1461C113.119 68.311 113.064 68.4867 112.969 68.6479C112.612 69.3034 112.126 69.9041 111.571 70.4571C110.412 71.5228 108.933 72.3542 107.336 72.7644C106.869 72.9072 106.383 72.9731 105.916 73.1013C104.963 73.2954 104.415 73.3686 104.021 73.658C103.745 73.8447 103.543 74.1451 103.311 74.6065C103.105 75.0167 103.249 75.5148 103.635 75.7638C104.393 76.2472 105.294 76.5988 106.302 76.6904C107.608 76.8112 109.106 76.5475 110.566 75.6942C110.776 75.5697 110.986 75.4525 111.199 75.3353C111.405 75.2035 111.615 75.0753 111.828 74.9471C112.259 74.7091 112.663 74.4087 113.086 74.1304C113.303 73.9986 113.491 73.8228 113.693 73.6689C113.892 73.5041 114.098 73.3577 114.286 73.1782C114.65 72.8083 115.043 72.4677 115.345 72.0355C116.386 70.7134 117.133 69.08 117.391 67.3587C117.567 66.2381 117.641 64.3849 116.861 61.7444L116.85 61.7407ZM24.9094 77.1848C28.581 81.3672 31.2299 86.5054 28.8643 88.5637C26.4987 90.6219 21.7345 87.3221 18.0629 83.1434C11.5806 75.7601 12.3311 73.31 14.1081 71.7645C15.3994 70.6402 16.698 70.545 18.4566 71.4496C20.2114 72.3505 22.2606 74.1743 24.9094 77.1884V77.1848ZM58.5681 41.0339C57.1112 41.4294 55.7169 41.9788 54.3557 42.5941C52.0416 43.6854 49.8527 44.9929 47.8513 46.5164C45.46 48.3439 43.3005 50.3985 41.3028 52.5702C41.049 52.1637 40.6884 51.7975 40.1807 51.4862C38.9998 50.7611 37.8188 50.0103 36.6489 49.2522L34.8978 48.1059L34.0369 47.5272L33.2349 46.9376C31.0937 45.3774 29.1439 43.4913 27.2824 41.4734C25.774 39.8473 24.4165 38.0381 22.9228 36.3168C20.5756 33.6103 18.0997 30.8966 15.2154 28.4867L14.0455 27.5748L13.4569 27.1207L12.8315 26.7069L11.5806 25.8792L10.2562 25.154L9.59401 24.7951C9.36959 24.6779 9.13046 24.59 8.89869 24.4875L7.50069 23.8942C7.25788 23.788 7.05186 23.722 6.86791 23.6488L6.61407 23.5426L6.56624 23.5206C6.51473 23.495 6.46323 23.4584 6.4338 23.4034C6.38965 23.3119 6.4338 23.2057 6.5037 23.1397C6.51106 23.1324 6.52209 23.1251 6.53313 23.1141C6.55152 23.0995 6.53313 23.1141 6.58831 23.0738C6.67661 23.0152 6.77226 22.9603 6.87159 22.9127C6.97092 22.8651 7.07393 22.8211 7.17694 22.7882C7.22845 22.7698 7.27628 22.7625 7.3241 22.7442L7.53748 22.7039L7.98263 22.616L8.43514 22.5721C8.58598 22.5501 8.74049 22.5464 8.89501 22.5501C9.04952 22.5501 9.20404 22.5391 9.35856 22.5501C9.98398 22.5794 10.6204 22.671 11.2642 22.8175C12.5556 23.1214 13.8653 23.6268 15.1897 24.2201C16.5178 24.8098 17.8532 25.4836 19.2843 26.1136C20.7118 26.7435 22.1723 27.3075 23.6549 27.7946C25.5275 28.4135 27.4405 28.9079 29.3757 29.2815C32.3998 29.8711 35.5158 30.1568 38.5693 30.1714C41.5934 30.1971 44.4851 30.1092 47.1854 30.5377C52.7369 31.4276 57.8948 34.7603 61.0661 39.3822C61.2794 39.7191 61.5259 40.0451 61.754 40.371C60.6761 40.5248 59.6055 40.7629 58.557 41.0376L58.5681 41.0339Z" fill="#720328"/>
+</svg>
diff --git a/web/src/components/blocks/IconListBlock.tsx b/web/src/components/blocks/IconListBlock.tsx
new file mode 100644
index 0000000..20f3868
--- /dev/null
+++ b/web/src/components/blocks/IconListBlock.tsx
@@ -0,0 +1,75 @@
+import styles from "./iconListBlock.module.scss";
+
+export const IconListBlock = ({ block }: any) => {
+  return (
+    <div className={styles.iconListBlock}>
+      <ul className={styles.iconList}>
+        <li className={styles.iconListItem}>
+          <div className={styles.icon}>
+            <img src="/assets/icons/neufneuf.svg" />
+          </div>
+          <div className={styles.text}>
+            <h2>Et viktig poeng i denne lista</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+              molestie tortor a interdum blandit. Sed ac purus sit amet libero
+              posuere molestie.
+            </p>
+          </div>
+        </li>
+        <li className={styles.iconListItem}>
+          <div className={styles.icon}>
+            <img src="/assets/icons/neufneuf.svg" />
+          </div>
+          <div className={styles.text}>
+            <h2>Et viktig poeng i denne lista</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+              molestie tortor a interdum blandit. Sed ac purus sit amet libero
+              posuere molestie.
+            </p>
+          </div>
+        </li>
+        <li className={styles.iconListItem}>
+          <div className={styles.icon}>
+            <img src="/assets/icons/neufneuf.svg" />
+          </div>
+          <div className={styles.text}>
+            <h2>Et viktig poeng i denne lista</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+              molestie tortor a interdum blandit. Sed ac purus sit amet libero
+              posuere molestie.
+            </p>
+          </div>
+        </li>
+        <li className={styles.iconListItem}>
+          <div className={styles.icon}>
+            <img src="/assets/icons/neufneuf.svg" />
+          </div>
+          <div className={styles.text}>
+            <h2>Et viktig poeng i denne lista</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+              molestie tortor a interdum blandit. Sed ac purus sit amet libero
+              posuere molestie.
+            </p>
+          </div>
+        </li>
+        <li className={styles.iconListItem}>
+          <div className={styles.icon}>
+            <img src="/assets/icons/neufneuf.svg" />
+          </div>
+          <div className={styles.text}>
+            <h2>Et viktig poeng i denne lista</h2>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
+              molestie tortor a interdum blandit. Sed ac purus sit amet libero
+              posuere molestie.
+            </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  );
+};
diff --git a/web/src/components/blocks/iconListBlock.module.scss b/web/src/components/blocks/iconListBlock.module.scss
new file mode 100644
index 0000000..e95679a
--- /dev/null
+++ b/web/src/components/blocks/iconListBlock.module.scss
@@ -0,0 +1,60 @@
+.iconListBlock {
+  margin: 5rem auto;
+  max-width: 68rem;
+}
+
+.iconList {
+  list-style: none;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: var(--spacing-gap-column);
+  row-gap: var(--spacing-gap-row);
+}
+
+.iconListItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.6rem;
+
+  &:nth-of-type(3n+1) {
+    .icon {
+      background: var(--color-goldenBeige);
+    }
+  }
+
+  &:nth-of-type(3n+2) {
+    .icon {
+      background: var(--color-neufPink);
+    }
+  }
+
+  &:nth-of-type(3n+3) {
+    .icon {
+      background: var(--color-goldenOrange);
+    }
+  }
+}
+
+.text {
+  margin-bottom: 1rem;
+
+  h2 {
+    font-size: var(--font-size-lead);
+    margin: .5rem 0;
+  }
+}
+
+.icon {
+  flex: none;
+  width: 3.4rem;
+  height: 3.4rem;
+  background: var(--color-goldenBeige);
+  border-radius: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  img {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/web/src/components/general/Body.tsx b/web/src/components/general/Body.tsx
index ce689d6..9a7f8be 100644
--- a/web/src/components/general/Body.tsx
+++ b/web/src/components/general/Body.tsx
@@ -1,9 +1,11 @@
 import { FeaturedBlock } from "../blocks/FeaturedBlock";
+import { IconListBlock } from "../blocks/IconListBlock";
 import styles from "./body.module.scss";
 
 export const Body = () => {
   return (
     <>
+      <IconListBlock />
       <FeaturedBlock />
       <FeaturedBlock />
       <div className={styles.body}>