Commit d0186c77a684c4e299ea0a673a2dc7ebfb07fe55

Authored by Digvijay Singh
1 parent 8735e1f16d
Exists in master

changes in ui

config/dev.env.js
... ... @@ -7,7 +7,7 @@ module.exports = merge(prodEnv, {
7 7 // APIurl: '"https://cors-anywhere.herokuapp.com/https://www.gigsfor.me/_functions"',
8 8 // APIurl: '"https://stg-api.gigsfor.me/api"',
9 9 APIurl: '"https://stg-api.gigsfor.me/api"',
10   - siteUrl: '"http://134.209.156.59:8080"',
  10 + siteUrl: '"http://localhost:8080"',
11 11 imageUrl: '"https://stg-api.gigsfor.me/"',
12 12 fileUploadKey: '"AYqgvDoo4RyBC0STV6og2z"',
13 13 landbotUrl: '"https://landbot.io/u/H-347617-SIJESECF8DSSQ06L/index.html"',
... ...
... ... @@ -13,7 +13,7 @@ module.exports = {
13 13 proxyTable: {},
14 14  
15 15 // Various Dev Server settings
16   - host: '134.209.156.59', // can be overwritten by process.env.HOST
  16 + host: 'localhost', // can be overwritten by process.env.HOST
17 17 port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
18 18 autoOpenBrowser: false,
19 19 errorOverlay: true,
... ...
... ... @@ -15,6 +15,7 @@
15 15 <!--<link href="https://fonts.googleapis.com/css?family=Montserrat:100,400,500,600,700,800,900&display=swap" rel="stylesheet">-->
16 16 <script src="//static.filestackapi.com/filestack-js/3.x.x/filestack.min.js"></script>
17 17 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
  18 + <script src="https://unpkg.com/vue-star-rating/dist/VueStarRating.umd.min.js"></script>`
18 19  
19 20 <!--<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800&display=swap" rel="stylesheet">-->
20 21 <!--<script src="/socket.io/socket.io.js"></script>-->
... ...
package-lock.json
... ... @@ -21408,6 +21408,14 @@
21408 21408 "vue": "^2.2.4"
21409 21409 }
21410 21410 },
  21411 + "vue-star-rating": {
  21412 + "version": "1.7.0",
  21413 + "resolved": "https://registry.npmjs.org/vue-star-rating/-/vue-star-rating-1.7.0.tgz",
  21414 + "integrity": "sha512-2qdONqnIlvFzJoallfr7VuFRB6hBzYgBVEbXC3yYZz2TfMhx36WtYQ5p7JRjW+pzZx2PGQYZ75UFoBE0jwIANw==",
  21415 + "requires": {
  21416 + "vue": "^2.3.3"
  21417 + }
  21418 + },
21411 21419 "vue-stepper": {
21412 21420 "version": "1.4.2",
21413 21421 "resolved": "https://registry.npmjs.org/vue-stepper/-/vue-stepper-1.4.2.tgz",
... ...
... ... @@ -34,6 +34,7 @@
34 34 "vue-meta": "^2.3.2",
35 35 "vue-router": "^3.0.1",
36 36 "vue-social-sharing": "^2.4.7",
  37 + "vue-star-rating": "^1.7.0",
37 38 "vue-stepper": "^1.4.2",
38 39 "vue-toast-notification": "0.0.3",
39 40 "vue-video-player": "^5.0.2",
... ...
src/assets/css/custom.css
... ... @@ -138,7 +138,7 @@ h1{font-family: &#39;Bebas Neue&#39;, cursive;font-style: normal; font-weight: 600; font
138 138 font-family: 'Montserrat', sans-serif;
139 139  
140 140 }
141   -.user-profile-photo{ width: 40px; position: relative;
  141 +.user-profile-photo{ width: 40px; position: relative; display: block;
142 142 height: 40px;
143 143 border-radius: 100px;
144 144 padding: 1px;}
... ... @@ -218,6 +218,11 @@ h1{font-family: &#39;Bebas Neue&#39;, cursive;font-style: normal; font-weight: 600; font
218 218 .rose-bud{ background: #fba29a;}
219 219 .pattens-blue{ background: #ceeced;}
220 220  
  221 +.insight-design{ background: #FBC647;}
  222 +.insight-product{ background: #9DDADB;}
  223 +.insight-marketing{ background: #F74536;}
  224 +.insight-pricing{ background: #C1C0FE;}
  225 +.insight-psychology{ background: #477970;}
221 226 /* add new card */
222 227 .add-card-warpper{ width: 283px; background: transparent; border-radius: 4px; padding:23px; height: 356px; float: left; margin-right: 0px; border:2px dashed #fff;}
223 228 .add-card-warpper a{ display: block;
... ... @@ -875,7 +880,7 @@ color: #514DA7;opacity:1;
875 880 }
876 881 .single-author-comments{ width: 1000px; display: block; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; height: 100%;}
877 882 .s-user-comments { display: block; position: absolute; bottom: 37px; width: 400px;}
878   - .single-author-li-comments{ width: 100%; display: block; float: left;}
  883 + .single-author-li-comments{ width: 100%; display: block; float: left; position: relative; z-index: 1;}
879 884 .a-intro-comments{background: #FFFFFF; width: 100%; padding: 15px; float: left; margin-bottom: 15px; position: relative;
880 885 border: 1px solid #201E6A;
881 886 box-shadow: 0px 4px 8px 5px rgba(0, 0, 0, 0.0975743);
... ... @@ -1003,7 +1008,7 @@ color: #514DA7;opacity:1;
1003 1008 margin-bottom: -20px;}
1004 1009 .custom-c-style{border-radius:0px 25px 25px 25px;}
1005 1010 .mobile-screen-one{ width: 379px; display: block;height:726px;position: absolute; border: 1px solid #000000;
1006   - border-radius: 25px 25px 0 0;
  1011 + border-radius: 45px 45px 0 0;
1007 1012 bottom: 0;
1008 1013 top: unset;
1009 1014 background-position: bottom;}
... ... @@ -1343,4 +1348,20 @@ input:focus{ outline: none;}
1343 1348 .joined_wrapper{ position: relative;}
1344 1349 .each-ft{ width: 366px; bottom: 0px;margin-left: -11px;background: #fff; display: block;float: left; z-index: 1; position: relative;}
1345 1350 .reply-Wdth{ width: 64px;}
1346   -.discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;}
1347 1351 \ No newline at end of file
  1352 +.discard_bt{width: 70px;float: right; margin-top: 3px; margin-right: 20px;}
  1353 +.full-w-height-profile{ min-height: 330px; border:2px solid #fff; border-radius: 10px; width: 100%;}
  1354 +.full-w-height-profile.ex-light p{font-weight: 500; font-weight: normal; font-size: 14px; line-height: 21px; color: #000; opacity: 0.7; width: 100%; display: block; text-align: center;}
  1355 +.full-w-height-profile.ex-light.seats_bg{background-image:url('../images/seats.svg'); background-repeat: no-repeat; background-position: bottom center; }
  1356 +.full-w-height-profile.ex-light .bt-spc-top{ margin-top: 100px;}
  1357 +.full-w-height-profile .add-role{ width: 107px; margin: 0 auto; display: block; margin-top: 50px; margin-bottom: 20px;}
  1358 +.full-w-height-profile.spotlight_bg {background-image:url('../images/spot-light-ps.svg'); background-repeat: no-repeat; background-size: contain; background-position: bottom -3px right 50px;}
  1359 +.update_profile{ margin-right: 15px; margin-top: 2px; z-index: 11; background: #514DA7; border-radius: 5px;width: 146px; text-transform: uppercase; color: #fff; text-align: center; height: 35px; font-weight: 600; font-size: 12px; font-style: normal; line-height: 14px;}
  1360 +.update_profile span{width: 11px;
  1361 + height: 11px;
  1362 + display: inline-block;
  1363 + background: #EF484F;
  1364 + border-radius: 10px;
  1365 + margin: 12px 0 0 0;}
  1366 +.update_profile:hover{ color: #fff; text-decoration: none;}
  1367 +.top-area-blank{ width: 195px; height: 30px; display: block; margin: 0 auto; background: #DFE7EF; border-radius: 0px 0px 23.4986px 23.4986px; position: absolute; z-index: 1; left: 0; right: 0; top: 15px;}
  1368 +.custom-selected-style-2{ border-radius:25px 25px 25px 0px;border: 1.09903px solid #EF484F;}
1348 1369 \ No newline at end of file
... ...
src/assets/images/add-role.svg
... ... @@ -0,0 +1,6 @@
  1 +<svg width="107" height="126" viewBox="0 0 107 126" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M4.18182 121.273H12.5455V125.455H16.7273V121.273H75.2727V125.455H79.4545V121.273H87.8182V125.455H92V0H87.8182V4.18182H79.4545V0H75.2727V4.18182H16.7273V0H12.5455V4.18182H4.18182V0H0V125.455H4.18182V121.273ZM79.4545 8.36364H87.8182V16.7273H79.4545V8.36364ZM79.4545 20.9091H87.8182V29.2727H79.4545V20.9091ZM79.4545 33.4545H87.8182V41.8182H79.4545V33.4545ZM79.4545 46H87.8182V54.3636H79.4545V46ZM79.4545 58.5455H87.8182V66.9091H79.4545V58.5455ZM79.4545 71.0909H87.8182V79.4545H79.4545V71.0909ZM79.4545 83.6364H87.8182V92H79.4545V83.6364ZM79.4545 96.1818H87.8182V104.545H79.4545V96.1818ZM79.4545 108.727H87.8182V117.091H79.4545V108.727ZM16.7273 33.4545V8.36364H75.2727V41.8182H16.7273V33.4545ZM16.7273 71.0909V46H75.2727V79.4545H16.7273V71.0909ZM16.7273 108.727V83.6364H75.2727V117.091H16.7273V108.727ZM4.18182 8.36364H12.5455V16.7273H4.18182V8.36364ZM4.18182 20.9091H12.5455V29.2727H4.18182V20.9091ZM4.18182 33.4545H12.5455V41.8182H4.18182V33.4545ZM4.18182 46H12.5455V54.3636H4.18182V46ZM4.18182 58.5455H12.5455V66.9091H4.18182V58.5455ZM4.18182 71.0909H12.5455V79.4545H4.18182V71.0909ZM4.18182 83.6364H12.5455V92H4.18182V83.6364ZM4.18182 96.1818H12.5455V104.545H4.18182V96.1818ZM4.18182 108.727H12.5455V117.091H4.18182V108.727Z" fill="white"/>
  3 +<circle cx="91" cy="81" r="15" fill="#DFE7EF" stroke="white" stroke-width="2"/>
  4 +<path d="M91 74V88" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  5 +<path d="M84 81H98" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
  6 +</svg>
... ...
src/assets/images/behind-blue.svg
... ... @@ -0,0 +1,22 @@
  1 +<svg width="96" height="90" viewBox="0 0 96 90" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M37.6245 41.4506C38.8067 41.4506 39.7686 40.4628 39.7686 39.2486C39.7686 38.0345 38.8067 37.0466 37.6245 37.0466C36.4423 37.0466 35.4805 38.0344 35.4805 39.2486C35.4805 40.4628 36.4423 41.4506 37.6245 41.4506ZM37.6245 37.7854C38.4101 37.7854 39.0493 38.4418 39.0493 39.2486C39.0493 40.0555 38.4101 40.7119 37.6245 40.7119C36.8389 40.7119 36.1998 40.0554 36.1998 39.2486C36.1998 38.4418 36.8389 37.7854 37.6245 37.7854Z" fill="#514DA7"/>
  3 +<path d="M57.6714 41.4506C58.8536 41.4506 59.8155 40.4628 59.8155 39.2486C59.8155 38.0345 58.8536 37.0466 57.6714 37.0466C56.4892 37.0466 55.5273 38.0344 55.5273 39.2486C55.5273 40.4628 56.4892 41.4506 57.6714 41.4506ZM57.6714 37.7854C58.457 37.7854 59.0961 38.4418 59.0961 39.2486C59.0961 40.0555 58.457 40.7119 57.6714 40.7119C56.8858 40.7119 56.2466 40.0554 56.2466 39.2486C56.2466 38.4418 56.8858 37.7854 57.6714 37.7854Z" fill="#514DA7"/>
  4 +<path d="M51.4586 54.5519C51.3015 54.3389 51.0523 54.2117 50.792 54.2117H44.5024C44.2421 54.2117 43.9929 54.3389 43.8359 54.5519L41.9869 57.0586C41.7939 57.3203 41.7623 57.6655 41.9046 57.9595C42.0469 58.2534 42.3338 58.436 42.6534 58.436H52.641C52.9606 58.436 53.2475 58.2534 53.3898 57.9595C53.532 57.6655 53.5005 57.3203 53.3075 57.0586L51.4586 54.5519ZM52.7456 57.6306C52.7336 57.6555 52.704 57.6973 52.641 57.6973H42.6534C42.5904 57.6973 42.5607 57.6556 42.5487 57.6306C42.5367 57.6057 42.5221 57.5563 42.5602 57.5047L44.4092 54.9979C44.4312 54.9682 44.466 54.9504 44.5023 54.9504H50.792C50.8284 54.9504 50.8631 54.9682 50.8851 54.998L52.7341 57.5047C52.7722 57.5563 52.7577 57.6058 52.7456 57.6306Z" fill="#514DA7"/>
  5 +<path d="M58.9541 56.3048V42.355C58.9541 42.151 58.7931 41.9856 58.5944 41.9856C58.3957 41.9856 58.2348 42.151 58.2348 42.355V56.3006H57.1082V42.355C57.1082 42.151 56.9473 41.9856 56.7486 41.9856C56.5499 41.9856 56.3889 42.151 56.3889 42.355V43.5045C54.152 44.8784 50.9808 45.6635 47.6475 45.6635C44.3142 45.6635 41.1429 44.8784 38.906 43.5045V42.355C38.906 42.151 38.7451 41.9856 38.5464 41.9856C38.3477 41.9856 38.1867 42.151 38.1867 42.355V56.3006H37.0602V42.355C37.0602 42.151 36.8992 41.9856 36.7006 41.9856C36.5019 41.9856 36.3409 42.151 36.3409 42.355V56.3048C35.7982 56.3537 35.3711 56.8231 35.3711 57.393C35.3711 57.9954 35.8483 58.4855 36.4348 58.4855H38.8111C39.3976 58.4855 39.8749 57.9954 39.8749 57.393C39.8749 56.8235 39.4483 56.3544 38.9061 56.3049V44.3556C41.2234 45.6615 44.3659 46.4023 47.6476 46.4023C50.9292 46.4023 54.0718 45.6615 56.389 44.3556V56.3048C55.8465 56.354 55.4197 56.8233 55.4197 57.393C55.4197 57.9953 55.8969 58.4855 56.4834 58.4855H58.8597C59.4462 58.4855 59.9234 57.9954 59.9234 57.393C59.9233 56.8233 59.4965 56.354 58.9541 56.3048ZM39.1555 57.393C39.1555 57.588 39.001 57.7468 38.811 57.7468H36.4348C36.2449 57.7468 36.0904 57.5881 36.0904 57.393C36.0904 57.1979 36.2449 57.0393 36.4348 57.0393H38.8111C39.001 57.0393 39.1555 57.1979 39.1555 57.393ZM58.8596 57.7467H56.4833C56.2934 57.7467 56.1389 57.588 56.1389 57.393C56.1389 57.1979 56.2934 57.0392 56.4833 57.0392H58.8596C59.0495 57.0392 59.204 57.1979 59.204 57.393C59.204 57.588 59.0495 57.7467 58.8596 57.7467Z" fill="#514DA7"/>
  6 +<path d="M23.7857 78.8105C23.4401 78.3892 23.2502 77.935 23.2161 77.4478C23.1773 76.968 23.3114 76.4922 23.6184 76.0206C24.053 75.353 24.6497 75.0079 25.4083 74.9853C26.1549 74.9652 27.0253 75.2787 28.0193 75.9259L31.9592 78.4911L26.999 86.1097L23.2767 83.6862C22.348 83.0815 21.7527 82.4408 21.4907 81.7641C21.2216 81.0826 21.2854 80.4371 21.6822 79.8276C21.9231 79.4575 22.2288 79.1864 22.5991 79.0143C22.9622 78.8375 23.3577 78.7695 23.7857 78.8105ZM26.1112 83.641L27.2804 81.8452L25.5281 80.7043C25.0928 80.4209 24.713 80.2821 24.3889 80.288C24.0648 80.294 23.8058 80.4457 23.6122 80.7432C23.4185 81.0407 23.3869 81.3352 23.5173 81.6267C23.643 81.9256 23.9236 82.2167 24.3589 82.5001L26.1112 83.641ZM27.2854 77.3387C26.8211 77.0364 26.4232 76.8858 26.0918 76.887C25.7531 76.8835 25.4799 77.0414 25.272 77.3606C24.861 77.9919 25.1235 78.6122 26.0595 79.2216L28.1166 80.5609L29.3425 78.678L27.2854 77.3387Z" fill="#514DA7"/>
  7 +<path d="M15.8036 65.1499L17.1891 64.185L21.2119 69.9613L13.7518 75.1569L9.82543 69.5191L11.2109 68.5542L13.9423 72.4762L15.5622 71.348L13.15 67.8843L14.4928 66.9491L16.905 70.4128L18.6315 69.2104L15.8036 65.1499Z" fill="#514DA7"/>
  8 +<path d="M4.09614 52.8744L12.9346 50.7463L13.4271 52.7917L9.80335 53.6643L10.7702 57.6795L14.3939 56.8069L14.8864 58.8524L6.04798 60.9806L5.55546 58.9351L9.04034 58.096L8.07354 54.0808L4.58866 54.9199L4.09614 52.8744Z" fill="#514DA7"/>
  9 +<path d="M4.11483 45.4483L4.26057 43.3495L13.3298 43.9792L13.1841 46.078L4.11483 45.4483Z" fill="#514DA7"/>
  10 +<path d="M8.94099 26.9748L17.4005 30.304L16.768 31.9113L9.97197 34.1077L15.1081 36.129L14.3471 38.0626L5.88761 34.7334L6.52492 33.114L13.3162 30.9297L8.18002 28.9084L8.94099 26.9748Z" fill="#514DA7"/>
  11 +<path d="M13.4169 20.4625L16.2229 17.4322C16.8935 16.708 17.6245 16.1989 18.4158 15.9051C19.2067 15.599 19.9942 15.5258 20.7784 15.6856C21.5686 15.839 22.2972 16.2246 22.9642 16.8423C23.6313 17.4599 24.0716 18.1568 24.2852 18.9328C24.5047 19.7024 24.4954 20.4962 24.2573 21.3141C24.0187 22.1198 23.5641 22.8847 22.8935 23.6089L20.0875 26.6392L13.4169 20.4625ZM21.5555 22.5116C22.1731 21.8445 22.4801 21.1435 22.4763 20.4084C22.4721 19.6611 22.1524 18.9933 21.5171 18.4051C20.8818 17.8168 20.1946 17.5522 19.4556 17.6112C18.716 17.6581 18.0374 18.015 17.4197 18.682L16.1138 20.0924L20.2495 23.9219L21.5555 22.5116Z" fill="#514DA7"/>
  12 +<path d="M27.2263 14.4261L30.4431 12.6482L31.2284 14.069L28.0116 15.847L27.2263 14.4261Z" fill="#514DA7"/>
  13 +<path d="M38.2547 6.86969L35.4194 7.52125L35.0355 5.85049L42.7564 4.07615L43.1404 5.74692L40.3052 6.39848L41.9573 13.5878L39.9068 14.059L38.2547 6.86969Z" fill="#514DA7"/>
  14 +<path d="M57.1979 4.88587L56.2333 13.9256L54.1413 13.7024L54.5367 9.9961L50.4301 9.55792L50.0346 13.2642L47.9426 13.041L48.9071 4.00124L50.9992 4.22446L50.6189 7.78871L54.7255 8.22689L55.1058 4.66264L57.1979 4.88587Z" fill="#514DA7"/>
  15 +<path d="M67.5069 17.2842L66.7297 18.7831L60.4807 15.5429L64.6654 7.47223L70.7646 10.6347L69.9874 12.1335L65.7445 9.93356L64.8358 11.686L68.5829 13.6289L67.8297 15.0817L64.0826 13.1388L63.1141 15.0065L67.5069 17.2842Z" fill="#514DA7"/>
  16 +<path d="M74.1487 19.1877L76.7167 21.8172L75.5552 22.9515L72.9873 20.322L74.1487 19.1877Z" fill="#514DA7"/>
  17 +<path d="M78.2002 32.2867C77.8846 31.641 77.6641 30.973 77.5386 30.2827C77.4247 29.5963 77.4185 29.0018 77.5198 28.4993L79.257 28.4453C79.1714 28.9208 79.1687 29.4377 79.2488 29.996C79.329 30.5543 79.487 31.0746 79.7227 31.5569C79.9851 32.0936 80.2568 32.4523 80.5378 32.6329C80.8266 32.8098 81.1033 32.8336 81.3677 32.7043C81.5622 32.6092 81.6836 32.4535 81.7321 32.2371C81.7921 32.0247 81.802 31.7789 81.7619 31.4997C81.7256 31.2283 81.6553 30.8676 81.5509 30.4175C81.3946 29.7229 81.2933 29.1412 81.2472 28.6723C81.2011 28.2033 81.271 27.7451 81.457 27.2976C81.6468 26.8578 82.014 26.5049 82.5585 26.2388C83.033 26.0068 83.5236 25.926 84.0302 25.9964C84.5446 26.063 85.0401 26.2978 85.5166 26.701C85.9969 27.1119 86.4196 27.6907 86.7846 28.4374C87.0394 28.9586 87.2262 29.4985 87.3451 30.0572C87.4639 30.6159 87.498 31.1389 87.4471 31.6263L85.7268 31.7445C85.7858 30.7808 85.6309 29.9217 85.2621 29.1672C85.0035 28.6383 84.7259 28.2873 84.4293 28.1142C84.1365 27.949 83.8501 27.9348 83.5701 28.0717C83.2901 28.2085 83.1504 28.4551 83.151 28.8113C83.1633 29.1716 83.2497 29.6835 83.4102 30.3471C83.5666 31.0416 83.6679 31.6233 83.714 32.0923C83.7601 32.5612 83.6922 33.0137 83.5101 33.4496C83.3319 33.8933 82.9705 34.2482 82.426 34.5144C81.9593 34.7425 81.4668 34.8194 80.9486 34.7451C80.442 34.6747 79.9485 34.434 79.4682 34.0231C78.9879 33.6122 78.5652 33.0334 78.2002 32.2867Z" fill="#514DA7"/>
  18 +<path d="M81.7994 45.8587C81.7107 44.9365 81.8285 44.0815 82.1528 43.2936C82.4866 42.5134 82.9861 41.8739 83.6514 41.375C84.3261 40.8839 85.1116 40.5952 86.0079 40.509C86.9042 40.4228 87.726 40.5568 88.4733 40.9112C89.2301 41.2733 89.8424 41.8058 90.3101 42.5089C90.7873 43.2197 91.0707 44.0405 91.1602 44.9713C91.2356 45.7556 91.1657 46.4756 90.9505 47.1312C90.736 47.7955 90.391 48.368 89.9153 48.8487L88.5449 47.6236C89.1928 46.9437 89.4732 46.1513 89.3861 45.2464C89.3323 44.6862 89.1592 44.1983 88.867 43.7828C88.5834 43.3665 88.2098 43.0545 87.7462 42.8468C87.2835 42.6478 86.772 42.5752 86.2118 42.6291C85.6516 42.683 85.1634 42.8518 84.747 43.1353C84.3315 43.4276 84.02 43.8055 83.8123 44.269C83.6133 44.7318 83.5407 45.2433 83.5946 45.8035C83.6816 46.7084 84.1123 47.4324 84.8864 47.9755L83.7747 49.4393C83.2075 49.059 82.7554 48.5632 82.4183 47.952C82.0811 47.3407 81.8748 46.643 81.7994 45.8587Z" fill="#514DA7"/>
  19 +<path d="M81.4443 60.5974L79.8139 60.1587L81.643 53.3614L90.4218 55.7237L88.6366 62.3579L87.0063 61.9192L88.2481 57.3041L86.3419 56.7911L85.2451 60.867L83.6649 60.4418L84.7617 56.3659L82.73 55.8192L81.4443 60.5974Z" fill="#514DA7"/>
  20 +<path d="M79.5886 77.46L72.2692 72.068L73.2936 70.6773L80.4259 70.3017L75.9819 67.0281L77.2143 65.355L84.5338 70.747L83.5016 72.1481L76.3771 72.5133L80.8211 75.787L79.5886 77.46Z" fill="#514DA7"/>
  21 +<path d="M63.6839 80.1079L62.7816 78.6809L68.7311 74.9189L73.5897 82.6028L67.7829 86.2745L66.8806 84.8475L70.9201 82.2933L69.8651 80.6248L66.2976 82.8806L65.423 81.4975L68.9905 79.2417L67.8661 77.4634L63.6839 80.1079Z" fill="#514DA7"/>
  22 +</svg>
... ...
src/assets/images/behind-red.svg
... ... @@ -0,0 +1,22 @@
  1 +<svg width="99" height="93" viewBox="0 0 99 93" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M38.7632 42.6981C39.981 42.6981 40.9718 41.6806 40.9718 40.4299C40.9718 39.1792 39.981 38.1616 38.7632 38.1616C37.5455 38.1616 36.5547 39.1791 36.5547 40.4299C36.5547 41.6806 37.5454 42.6981 38.7632 42.6981ZM38.7632 38.9226C39.5725 38.9226 40.2309 39.5987 40.2309 40.4299C40.2309 41.261 39.5725 41.9372 38.7632 41.9372C37.954 41.9372 37.2956 41.261 37.2956 40.4299C37.2956 39.5988 37.954 38.9226 38.7632 38.9226Z" fill="#EF484F"/>
  3 +<path d="M59.4117 42.6981C60.6295 42.6981 61.6202 41.6806 61.6202 40.4299C61.6202 39.1792 60.6295 38.1616 59.4117 38.1616C58.1939 38.1616 57.2031 39.1791 57.2031 40.4299C57.2031 41.6806 58.1939 42.6981 59.4117 42.6981ZM59.4117 38.9226C60.2209 38.9226 60.8793 39.5987 60.8793 40.4299C60.8793 41.261 60.2209 41.9372 59.4117 41.9372C58.6024 41.9372 57.9441 41.261 57.9441 40.4299C57.9441 39.5988 58.6024 38.9226 59.4117 38.9226Z" fill="#EF484F"/>
  4 +<path d="M53.0143 56.1935C52.8525 55.9741 52.5958 55.843 52.3277 55.843H45.8488C45.5807 55.843 45.324 55.9741 45.1622 56.1935L43.2576 58.7756C43.0588 59.0452 43.0263 59.4008 43.1729 59.7036C43.3194 60.0064 43.615 60.1945 43.9442 60.1945H54.2323C54.5615 60.1945 54.857 60.0063 55.0036 59.7036C55.1501 59.4008 55.1176 59.0452 54.9188 58.7756L53.0143 56.1935ZM54.3401 59.3648C54.3277 59.3905 54.2972 59.4335 54.2323 59.4335H43.9442C43.8793 59.4335 43.8487 59.3905 43.8363 59.3648C43.8239 59.3392 43.809 59.2883 43.8482 59.2351L45.7529 56.6529C45.7755 56.6223 45.8113 56.604 45.8488 56.604H52.3276C52.3651 56.604 52.4009 56.6223 52.4236 56.653L54.3282 59.2351C54.3675 59.2883 54.3525 59.3392 54.3401 59.3648Z" fill="#EF484F"/>
  5 +<path d="M60.7339 57.9993V43.6298C60.7339 43.4196 60.5681 43.2493 60.3634 43.2493C60.1588 43.2493 59.993 43.4196 59.993 43.6298V57.9949H58.8325V43.6298C58.8325 43.4196 58.6667 43.2493 58.4621 43.2493C58.2574 43.2493 58.0916 43.4196 58.0916 43.6298V44.8138C55.7874 46.2291 52.5208 47.0378 49.0872 47.0378C45.6536 47.0378 42.3869 46.2291 40.0827 44.8138V43.6298C40.0827 43.4196 39.9169 43.2493 39.7122 43.2493C39.5076 43.2493 39.3418 43.4196 39.3418 43.6298V57.9949H38.1813V43.6298C38.1813 43.4196 38.0155 43.2493 37.8109 43.2493C37.6062 43.2493 37.4404 43.4196 37.4404 43.6298V57.9993C36.8813 58.0497 36.4414 58.5332 36.4414 59.1202C36.4414 59.7407 36.9329 60.2456 37.5372 60.2456H39.9849C40.5891 60.2456 41.0807 59.7408 41.0807 59.1202C41.0807 58.5336 40.6413 58.0504 40.0828 57.9994V45.6906C42.4697 47.0358 45.7069 47.7988 49.0872 47.7988C52.4676 47.7988 55.7047 47.0358 58.0916 45.6906V57.9993C57.5329 58.05 57.0932 58.5334 57.0932 59.1202C57.0932 59.7407 57.5847 60.2456 58.1889 60.2456H60.6367C61.2409 60.2456 61.7324 59.7407 61.7324 59.1202C61.7323 58.5334 61.2927 58.05 60.7339 57.9993ZM40.3397 59.1202C40.3397 59.3211 40.1805 59.4846 39.9849 59.4846H37.5372C37.3415 59.4846 37.1824 59.3212 37.1824 59.1202C37.1824 58.9193 37.3415 58.7559 37.5372 58.7559H39.9849C40.1805 58.7559 40.3397 58.9193 40.3397 59.1202ZM60.6366 59.4846H58.1888C57.9932 59.4846 57.834 59.3211 57.834 59.1202C57.834 58.9192 57.9932 58.7558 58.1888 58.7558H60.6366C60.8322 58.7558 60.9914 58.9193 60.9914 59.1202C60.9914 59.3211 60.8322 59.4846 60.6366 59.4846Z" fill="#EF484F"/>
  6 +<path d="M24.5591 81.5175C24.2135 81.0962 24.0237 80.642 23.9895 80.1549C23.9507 79.675 24.0848 79.1992 24.3919 78.7276C24.8265 78.0601 25.4231 77.715 26.1817 77.6923C26.9284 77.6722 27.7987 77.9857 28.7928 78.6329L32.7327 81.1981L27.7724 88.8167L24.0502 86.3933C23.1214 85.7886 22.5261 85.1479 22.2642 84.4711C21.995 83.7896 22.0588 83.1441 22.4557 82.5346C22.6966 82.1646 23.0022 81.8935 23.3726 81.7213C23.7357 81.5445 24.1312 81.4765 24.5591 81.5175ZM26.8846 86.348L28.0538 84.5522L26.3016 83.4114C25.8662 83.1279 25.4865 82.9891 25.1623 82.9951C24.8382 83.001 24.5793 83.1527 24.3856 83.4502C24.1919 83.7477 24.1603 84.0422 24.2907 84.3338C24.4165 84.6326 24.697 84.9237 25.1323 85.2072L26.8846 86.348ZM28.0589 80.0458C27.5945 79.7434 27.1966 79.5929 26.8652 79.5941C26.5266 79.5905 26.2533 79.7484 26.0455 80.0677C25.6345 80.6989 25.897 81.3193 26.833 81.9287L28.89 83.2679L30.1159 81.385L28.0589 80.0458Z" fill="#EF484F"/>
  7 +<path d="M16.1396 67.5049L17.525 66.54L21.5479 72.3163L14.0877 77.5119L10.1614 71.8741L11.5468 70.9092L14.2782 74.8311L15.8981 73.703L13.4859 70.2393L14.8287 69.3041L17.2409 72.7678L18.9674 71.5654L16.1396 67.5049Z" fill="#EF484F"/>
  8 +<path d="M4.17036 54.7682L13.0088 52.64L13.5013 54.6855L9.87757 55.5581L10.8444 59.5733L14.4681 58.7007L14.9607 60.7462L6.1222 62.8744L5.62968 60.8289L9.11456 59.9898L8.14776 55.9746L4.66288 56.8137L4.17036 54.7682Z" fill="#EF484F"/>
  9 +<path d="M4.11874 46.8399L4.26447 44.7411L13.3337 45.3708L13.188 47.4696L4.11874 46.8399Z" fill="#EF484F"/>
  10 +<path d="M8.99568 28.0067L17.4552 31.336L16.8227 32.9433L10.0267 35.1396L15.1628 37.161L14.4018 39.0946L5.9423 35.7653L6.57961 34.1459L13.3709 31.9617L8.23471 29.9403L8.99568 28.0067Z" fill="#EF484F"/>
  11 +<path d="M13.7099 21.0221L16.5159 17.9918C17.1865 17.2676 17.9175 16.7585 18.7088 16.4647C19.4996 16.1585 20.2872 16.0854 21.0714 16.2452C21.8615 16.3986 22.5901 16.7842 23.2572 17.4018C23.9242 18.0195 24.3646 18.7163 24.5782 19.4924C24.7977 20.262 24.7884 21.0558 24.5503 21.8737C24.3116 22.6793 23.857 23.4443 23.1864 24.1685L20.3804 27.1988L13.7099 21.0221ZM21.8484 23.0712C22.4661 22.4041 22.7731 21.703 22.7693 20.968C22.7651 20.2207 22.4453 19.5529 21.8101 18.9646C21.1748 18.3764 20.4876 18.1118 19.7485 18.1708C19.009 18.2176 18.3304 18.5746 17.7127 19.2416L16.4068 20.6519L20.5425 24.4815L21.8484 23.0712Z" fill="#EF484F"/>
  12 +<path d="M27.9021 14.6454L31.1188 12.8674L31.9041 14.2883L28.6874 16.0662L27.9021 14.6454Z" fill="#EF484F"/>
  13 +<path d="M39.2781 6.93146L36.4429 7.58302L36.0589 5.91225L43.7799 4.13792L44.1638 5.80868L41.3286 6.46024L42.9808 13.6496L40.9303 14.1208L39.2781 6.93146Z" fill="#EF484F"/>
  14 +<path d="M58.6471 4.88587L57.6825 13.9256L55.5905 13.7024L55.9859 9.9961L51.8793 9.55792L51.4838 13.2642L49.3918 13.041L50.3563 4.00124L52.4484 4.22446L52.0681 7.78871L56.1747 8.22689L56.555 4.66264L58.6471 4.88587Z" fill="#EF484F"/>
  15 +<path d="M69.4756 17.3897L68.6985 18.8885L62.4495 15.6484L66.6342 7.5777L72.7333 10.7402L71.9561 12.239L67.7133 10.039L66.8046 11.7915L70.5517 13.7344L69.7984 15.1871L66.0513 13.2442L65.0829 15.112L69.4756 17.3897Z" fill="#EF484F"/>
  16 +<path d="M76.5472 19.571L79.1151 22.2005L77.9537 23.3348L75.3857 20.7053L76.5472 19.571Z" fill="#EF484F"/>
  17 +<path d="M80.8525 32.9744C80.5369 32.3288 80.3164 31.6608 80.191 30.9704C80.0771 30.284 80.0708 29.6896 80.1721 29.1871L81.9093 29.133C81.8237 29.6085 81.821 30.1254 81.9012 30.6838C81.9813 31.2421 82.1393 31.7624 82.375 32.2446C82.6374 32.7814 82.9091 33.14 83.1901 33.3207C83.479 33.4975 83.7556 33.5213 84.0201 33.392C84.2146 33.297 84.336 33.1413 84.3844 32.9249C84.4444 32.7124 84.4544 32.4666 84.4143 32.1875C84.378 31.9161 84.3077 31.5553 84.2033 31.1052C84.0469 30.4107 83.9456 29.829 83.8995 29.36C83.8534 28.891 83.9233 28.4328 84.1094 27.9853C84.2992 27.5456 84.6663 27.1927 85.2108 26.9265C85.6853 26.6946 86.1759 26.6138 86.6825 26.6842C87.1969 26.7507 87.6924 26.9856 88.1689 27.3887C88.6493 27.7996 89.0719 28.3784 89.4369 29.1252C89.6917 29.6463 89.8785 30.1863 89.9974 30.7449C90.1163 31.3036 90.1503 31.8267 90.0995 32.3141L88.3791 32.4322C88.4381 31.4686 88.2832 30.6095 87.9144 29.855C87.6559 29.326 87.3783 28.975 87.0817 28.802C86.7889 28.6367 86.5025 28.6225 86.2224 28.7594C85.9424 28.8963 85.8027 29.1428 85.8034 29.4991C85.8156 29.8593 85.902 30.3712 86.0626 31.0348C86.219 31.7293 86.3202 32.3111 86.3663 32.78C86.4125 33.249 86.3445 33.7014 86.1625 34.1373C85.9842 34.581 85.6229 34.936 85.0784 35.2021C84.6116 35.4303 84.1192 35.5072 83.601 35.4328C83.0943 35.3624 82.6009 35.1218 82.1205 34.7109C81.6402 34.3 81.2175 33.7212 80.8525 32.9744Z" fill="#EF484F"/>
  18 +<path d="M84.6392 47.0379C84.5505 46.1157 84.6683 45.2607 84.9927 44.4728C85.3264 43.6926 85.8259 43.0531 86.4912 42.5542C87.1659 42.0631 87.9514 41.7744 88.8477 41.6882C89.744 41.602 90.5659 41.736 91.3132 42.0904C92.07 42.4525 92.6822 42.985 93.15 43.6881C93.6271 44.3989 93.9105 45.2197 94 46.1505C94.0755 46.9348 94.0056 47.6548 93.7903 48.3104C93.5759 48.9747 93.2308 49.5472 92.7552 50.0279L91.3848 48.8028C92.0326 48.1229 92.313 47.3305 92.226 46.4255C92.1721 45.8654 91.999 45.3775 91.7068 44.962C91.4232 44.5457 91.0497 44.2337 90.5861 44.026C90.1233 43.827 89.6119 43.7544 89.0517 43.8083C88.4915 43.8622 88.0032 44.031 87.5869 44.3145C87.1714 44.6068 86.8598 44.9847 86.6522 45.4482C86.4531 45.911 86.3805 46.4225 86.4344 46.9827C86.5215 47.8876 86.9521 48.6116 87.7263 49.1547L86.6146 50.6185C86.0474 50.2382 85.5952 49.7424 85.2581 49.1312C84.921 48.5199 84.7147 47.8222 84.6392 47.0379Z" fill="#EF484F"/>
  19 +<path d="M84.2841 62.2732L82.6538 61.8345L84.4829 55.0372L93.2616 57.3995L91.4764 64.0337L89.8461 63.595L91.088 58.9799L89.1817 58.4669L88.085 62.5428L86.5048 62.1176L87.6015 58.0417L85.5699 57.495L84.2841 62.2732Z" fill="#EF484F"/>
  20 +<path d="M82.2449 79.6321L74.9254 74.2401L75.9499 72.8494L83.0821 72.4739L78.6382 69.2002L79.8706 67.5272L87.19 72.9191L86.1579 74.3203L79.0334 74.6854L83.4773 77.9591L82.2449 79.6321Z" fill="#EF484F"/>
  21 +<path d="M65.9886 82.6753L65.0863 81.2483L71.0358 77.4863L75.8944 85.1702L70.0876 88.8419L69.1853 87.4149L73.2248 84.8607L72.1698 83.1922L68.6023 85.4479L67.7277 84.0648L71.2952 81.8091L70.1708 80.0308L65.9886 82.6753Z" fill="#EF484F"/>
  22 +</svg>
... ...
src/assets/images/critique-blue.svg
... ... @@ -0,0 +1,22 @@
  1 +<svg width="86" height="90" viewBox="0 0 86 90" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M79.1555 21.7147C79.623 22.4317 79.8927 23.1822 79.9646 23.9662C80.0255 24.7479 79.8904 25.4854 79.5593 26.1788C79.2172 26.8698 78.6977 27.4426 78.0008 27.897C77.3038 28.3514 76.5736 28.5936 75.81 28.6235C75.0353 28.6512 74.3059 28.4773 73.6219 28.102C72.9268 27.7244 72.3433 27.1737 71.8714 26.4499C71.4737 25.8401 71.2226 25.2207 71.1181 24.5917C71.0092 23.956 71.0465 23.3395 71.2301 22.7422L72.8768 23.1584C72.6375 23.9925 72.7473 24.7614 73.2061 25.465C73.4901 25.9006 73.8407 26.2259 74.2579 26.441C74.6684 26.6604 75.1079 26.7558 75.5763 26.7273C76.0404 26.6921 76.4903 26.5325 76.9259 26.2485C77.3615 25.9645 77.689 25.6172 77.9084 25.2067C78.1234 24.7895 78.2167 24.3467 78.1882 23.8782C78.153 23.4141 77.9934 22.9643 77.7093 22.5287C77.2505 21.825 76.5879 21.4167 75.7215 21.3036L76.0048 19.6289C76.6321 19.6975 77.2146 19.9098 77.7524 20.2658C78.2902 20.6219 78.7579 21.1048 79.1555 21.7147Z" fill="#514DA7"/>
  3 +<path d="M68.3539 10.8248L68.1226 13.6615L68.1968 13.7223L69.5051 14.7953L70.989 12.986L72.4921 14.2188L67.1652 20.7138L64.3538 18.408C63.7786 17.9361 63.3593 17.4319 63.0959 16.8951C62.8264 16.3533 62.7218 15.8123 62.7821 15.272C62.8424 14.7317 63.0704 14.2203 63.4661 13.7378C63.8618 13.2553 64.3218 12.9342 64.846 12.7744C65.359 12.6157 65.905 12.6186 66.484 12.7831L66.7395 9.50071L68.3539 10.8248ZM64.9878 14.9858C64.6884 15.3508 64.5777 15.7255 64.6555 16.1101C64.7282 16.5008 64.9903 16.8813 65.4418 17.2517L66.6666 18.2562L68.5234 15.9923L67.2987 14.9877C66.8471 14.6174 66.4226 14.4348 66.0252 14.44C65.6278 14.4451 65.282 14.6271 64.9878 14.9858Z" fill="#514DA7"/>
  4 +<path d="M59.7766 15.6286L58.0195 14.7969L61.6131 7.20441L63.3702 8.03607L59.7766 15.6286Z" fill="#514DA7"/>
  5 +<path d="M51.7976 11.1922L54.4335 11.7188L54.1232 13.2721L46.945 11.8379L47.2554 10.2846L49.8913 10.8113L51.2268 4.12738L53.1332 4.50828L51.7976 11.1922Z" fill="#514DA7"/>
  6 +<path d="M44.279 12.0738L42.3372 12.1664L41.9372 3.77592L43.879 3.68335L44.279 12.0738Z" fill="#514DA7"/>
  7 +<path d="M25.8689 6.90029C26.0176 6.4944 26.249 6.14481 26.5631 5.85152C26.8696 5.56083 27.2423 5.34048 27.6814 5.19046C28.2719 4.98872 28.8496 4.93508 29.4145 5.02953C29.9768 5.11641 30.6744 5.37684 31.5075 5.81082C32.2577 5.65595 32.9801 5.667 33.6746 5.84397C34.3615 6.02353 34.9635 6.35045 35.4806 6.82474C35.9928 7.30918 36.3704 7.90721 36.6135 8.61883C36.8799 9.39858 36.9337 10.1622 36.7748 10.9097C36.611 11.6674 36.2605 12.3366 35.7235 12.9174C35.1788 13.5008 34.4939 13.9335 33.6688 14.2154C32.8436 14.4973 32.0409 14.5729 31.2607 14.4421C30.4805 14.3113 29.7939 13.9964 29.2007 13.4974C28.6101 13.006 28.1816 12.3704 27.9152 11.5906C27.5996 10.667 27.584 9.76777 27.8684 8.89283C28.1453 8.02048 28.6649 7.30191 29.4272 6.73711C29.1707 6.60494 28.9412 6.52696 28.7386 6.50318C28.5259 6.4744 28.3173 6.49494 28.1129 6.56477C27.6208 6.73289 27.2566 7.07714 27.0201 7.59753L25.8689 6.90029ZM34.7512 9.25508C34.5831 8.76301 34.3271 8.36014 33.9832 8.04647C33.6318 7.73539 33.2293 7.53474 32.7757 7.44451C32.3248 7.36186 31.8647 7.40072 31.3953 7.56108C30.9259 7.72143 30.5382 7.97226 30.2321 8.31355C29.9286 8.66241 29.7368 9.06609 29.6567 9.5246C29.5691 9.9857 29.6093 10.4623 29.7775 10.9544C29.9456 11.4464 30.2054 11.848 30.5568 12.1591C30.9007 12.4728 31.2981 12.6709 31.749 12.7536C32.2026 12.8438 32.664 12.8087 33.1334 12.6484C33.6027 12.488 33.9892 12.2334 34.2927 11.8845C34.5988 11.5432 34.7956 11.1421 34.8833 10.681C34.9633 10.2224 34.9193 9.74716 34.7512 9.25508Z" fill="#514DA7"/>
  8 +<path d="M18.8764 12.7709C19.8154 12.0239 20.7546 11.701 21.6939 11.8022C22.6269 11.9085 23.4769 12.4437 24.2439 13.4078L27.1724 17.089L25.6511 18.2993L22.7674 14.6744C21.8311 13.4974 20.8746 13.2974 19.8979 14.0744C19.4221 14.4529 19.1711 14.8826 19.1448 15.3636C19.1234 15.8508 19.3543 16.398 19.8374 17.0053L22.7211 20.6302L21.2186 21.8255L18.2901 18.1442C17.5231 17.1801 17.1958 16.2291 17.3084 15.2911C17.4146 14.3581 17.9373 13.518 18.8764 12.7709Z" fill="#514DA7"/>
  9 +<path d="M9.55516 26.6189L8.24031 25.7794L11.7404 20.2975L18.8204 24.8179L15.4042 30.1683L14.0894 29.3288L16.4658 25.6068L14.9285 24.6252L12.8297 27.9123L11.5553 27.0987L13.6541 23.8115L12.0156 22.7654L9.55516 26.6189Z" fill="#514DA7"/>
  10 +<path d="M5.57117 32.3718C5.66776 32.0583 5.85606 31.8275 6.13609 31.6794C6.41612 31.5313 6.71669 31.5068 7.03779 31.6057C7.36654 31.707 7.59732 31.8953 7.73014 32.1706C7.8706 32.4483 7.89254 32.7439 7.79595 33.0573C7.69936 33.3708 7.51488 33.6027 7.24249 33.7532C6.97776 33.906 6.68101 33.9318 6.35226 33.8305C6.03116 33.7315 5.79656 33.542 5.64845 33.262C5.50034 32.982 5.47458 32.6852 5.57117 32.3718Z" fill="#514DA7"/>
  11 +<path d="M7.5206 62.4699C7.16889 61.6895 7.01781 60.9064 7.06734 60.1207C7.12746 59.339 7.37437 58.631 7.8081 57.9968C8.2524 57.3666 8.85381 56.8806 9.61234 56.5387C10.3709 56.1969 11.1297 56.0699 11.8888 56.1577C12.6585 56.2496 13.3525 56.5335 13.9707 57.0096C14.5994 57.4896 15.0913 58.1235 15.4463 58.9112C15.7454 59.5749 15.8983 60.2256 15.9048 60.8632C15.9147 61.5081 15.783 62.1115 15.5097 62.6734L13.9467 62.0089C14.3113 61.2215 14.3211 60.4449 13.976 59.6791C13.7623 59.205 13.4659 58.8297 13.0868 58.553C12.7149 58.2731 12.2954 58.1112 11.8281 58.0673C11.3641 58.0307 10.895 58.1193 10.4209 58.3329C9.94686 58.5466 9.56985 58.8393 9.28992 59.2112C9.01327 59.5903 8.85301 60.0136 8.80913 60.4809C8.77255 60.9449 8.86108 61.4139 9.07474 61.888C9.41987 62.6538 10.0118 63.1592 10.8505 63.4042L10.3131 65.0154C9.70379 64.8512 9.16085 64.5518 8.68422 64.1173C8.20759 63.6828 7.81972 63.1336 7.5206 62.4699Z" fill="#514DA7"/>
  12 +<path d="M16.5189 74.8917L17.1837 72.1244L17.1198 72.0528L15.9921 70.7914L14.2475 72.351L12.9519 70.9017L19.2143 65.3032L21.6376 68.014C22.1335 68.5686 22.4703 69.1314 22.6479 69.7022C22.8309 70.2791 22.8511 70.8298 22.7084 71.3544C22.5657 71.8789 22.2618 72.3492 21.7966 72.7651C21.3314 73.1809 20.8275 73.4275 20.2849 73.5048C19.7537 73.5827 19.2146 73.4959 18.6678 73.2443L17.9105 76.4484L16.5189 74.8917ZM20.485 71.2979C20.8368 70.9833 21.0039 70.63 20.9862 70.2381C20.9745 69.8409 20.774 69.4245 20.3847 68.9892L19.329 67.8082L17.1461 69.7597L18.2018 70.9406C18.5911 71.376 18.9824 71.6217 19.3759 71.6777C19.7693 71.7337 20.139 71.6071 20.485 71.2979Z" fill="#514DA7"/>
  13 +<path d="M25.7354 71.4636L27.3437 72.5556L22.6252 79.5051L21.0169 78.4132L25.7354 71.4636Z" fill="#514DA7"/>
  14 +<path d="M32.9355 77.0748L30.412 76.149L30.9575 74.6619L37.8297 77.183L37.2841 78.6701L34.7606 77.7443L32.413 84.1433L30.588 83.4738L32.9355 77.0748Z" fill="#514DA7"/>
  15 +<path d="M40.5012 77.36L42.4342 77.5671L41.5391 85.9193L39.6061 85.7121L40.5012 77.36Z" fill="#514DA7"/>
  16 +<path d="M57.8966 85.3032C57.6872 85.6814 57.4048 85.9913 57.0493 86.2328C56.7018 86.4729 56.2996 86.6333 55.8426 86.714C55.2282 86.8225 54.6491 86.7867 54.1055 86.6065C53.5632 86.4342 52.9139 86.0695 52.1575 85.5126C51.3924 85.5502 50.6803 85.4282 50.0213 85.1466C49.3701 84.8635 48.8256 84.4479 48.3875 83.8997C47.956 83.3423 47.6749 82.6933 47.5441 81.9527C47.4007 81.1413 47.465 80.3785 47.737 79.6643C48.0154 78.9409 48.4646 78.3335 49.0846 77.8422C49.7125 77.3494 50.4558 77.0273 51.3145 76.8756C52.1732 76.7239 52.9779 76.7727 53.7287 77.0219C54.4795 77.2711 55.1096 77.6879 55.619 78.2722C56.127 78.8486 56.4526 79.5426 56.596 80.354C56.7657 81.3151 56.6428 82.2061 56.2272 83.0269C55.8195 83.8463 55.1956 84.4764 54.3555 84.9172C54.5886 85.0873 54.8034 85.1996 54.9999 85.2543C55.2057 85.3154 55.4149 85.3272 55.6276 85.2897C56.1397 85.1992 56.5526 84.9151 56.8663 84.4372L57.8966 85.3032ZM49.4821 81.6105C49.5725 82.1225 49.7635 82.56 50.055 82.9228C50.3545 83.2842 50.7213 83.5444 51.1556 83.7033C51.5884 83.8543 52.0491 83.8867 52.5375 83.8004C53.026 83.7141 53.4477 83.5259 53.8026 83.2358C54.1562 82.9377 54.4077 82.5684 54.5574 82.1276C54.7149 81.6855 54.7484 81.2084 54.658 80.6963C54.5675 80.1842 54.3726 79.7475 54.0732 79.386C53.7816 79.0232 53.4194 78.7663 52.9865 78.6153C52.5523 78.4564 52.0909 78.4201 51.6025 78.5063C51.1141 78.5926 50.6931 78.7848 50.3395 79.0828C49.9846 79.373 49.7283 79.7391 49.5708 80.1812C49.4212 80.622 49.3916 81.0984 49.4821 81.6105Z" fill="#514DA7"/>
  17 +<path d="M65.7113 80.5773C64.6685 81.1711 63.6908 81.3457 62.7783 81.1012C61.8727 80.8527 61.1152 80.1932 60.5056 79.1225L58.178 75.0347L59.8673 74.0728L62.1593 78.0981C62.9035 79.4051 63.8178 79.7498 64.9023 79.1323C65.4307 78.8314 65.7448 78.4454 65.8448 77.9743C65.9408 77.4961 65.7968 76.9199 65.4128 76.2455L63.1209 72.2203L64.7894 71.2703L67.1169 75.3581C67.7265 76.4287 67.9036 77.4188 67.6482 78.3283C67.3997 79.2339 66.7541 79.9835 65.7113 80.5773Z" fill="#514DA7"/>
  18 +<path d="M77.0487 68.3275L78.2188 69.3592L73.9173 74.2377L67.6168 68.6822L71.8151 63.9208L72.9852 64.9525L70.0646 68.2648L71.4327 69.4711L74.0121 66.5459L75.1462 67.5459L72.5668 70.4711L74.025 71.7568L77.0487 68.3275Z" fill="#514DA7"/>
  19 +<path d="M81.8714 63.2559C81.7278 63.5507 81.5062 63.7498 81.2067 63.8531C80.9073 63.9564 80.6065 63.9344 80.3044 63.7873C79.9952 63.6366 79.7961 63.4151 79.7072 63.1226C79.6111 62.8266 79.6349 62.5312 79.7785 62.2363C79.9222 61.9415 80.1401 61.7406 80.4324 61.6339C80.7175 61.5236 81.0147 61.5437 81.3239 61.6944C81.626 61.8415 81.8287 62.0649 81.932 62.3643C82.0352 62.6638 82.0151 62.961 81.8714 63.2559Z" fill="#514DA7"/>
  20 +<path d="M33.3065 50.484H31.1773C30.8008 50.484 30.4398 50.3345 30.1736 50.0683C29.9074 49.8021 29.7578 49.441 29.7578 49.0646V44.0964C29.7578 43.7199 29.9074 43.3589 30.1736 43.0927C30.4398 42.8265 30.8008 42.6769 31.1773 42.6769H33.3065M38.2746 41.2575V38.4185C38.2746 37.8538 38.0503 37.3122 37.651 36.9129C37.2517 36.5136 36.7101 36.2893 36.1454 36.2893L33.3065 42.6769V50.484H41.3123C41.6546 50.4879 41.9868 50.3679 42.2477 50.1462C42.5085 49.9245 42.6805 49.616 42.7318 49.2775L43.7112 42.8899C43.7421 42.6864 43.7284 42.4787 43.671 42.2811C43.6136 42.0835 43.514 41.9007 43.379 41.7454C43.2439 41.5901 43.0768 41.4661 42.889 41.3818C42.7013 41.2976 42.4975 41.2551 42.2918 41.2575H38.2746Z" stroke="#514DA7" stroke-linecap="round" stroke-linejoin="round"/>
  21 +<path d="M56.1044 44.8059H57.9994C58.4011 44.7988 58.7914 44.9394 59.0962 45.2011C59.4011 45.4628 59.5992 45.8273 59.6531 46.2254V51.1935C59.5992 51.5917 59.4011 51.9562 59.0962 52.2178C58.7914 52.4795 58.4011 52.6201 57.9994 52.613H56.1044M51.1362 54.0325V56.8714C51.1362 57.4361 51.3606 57.9777 51.7599 58.377C52.1592 58.7763 52.7008 59.0006 53.2655 59.0006L56.1044 52.613V44.8059H48.0986C47.7562 44.8021 47.4241 44.922 47.1632 45.1438C46.9024 45.3655 46.7304 45.674 46.6791 46.0125L45.6997 52.4001C45.6688 52.6035 45.6825 52.8113 45.7399 53.0089C45.7973 53.2065 45.8969 53.3893 46.0319 53.5445C46.1669 53.6998 46.3341 53.8239 46.5218 53.9081C46.7096 53.9924 46.9134 54.0348 47.1191 54.0325H51.1362Z" stroke="#514DA7" stroke-linecap="round" stroke-linejoin="round"/>
  22 +</svg>
... ...
src/assets/images/critique-red.svg
... ... @@ -0,0 +1,22 @@
  1 +<svg width="90" height="94" viewBox="0 0 90 94" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M82.0031 23.0074C82.4707 23.7244 82.7404 24.4749 82.8123 25.2589C82.8731 26.0406 82.738 26.7781 82.407 27.4715C82.0649 28.1625 81.5454 28.7353 80.8484 29.1897C80.1515 29.6441 79.4212 29.8863 78.6576 29.9163C77.8829 29.9439 77.1536 29.77 76.4695 29.3947C75.7744 29.0171 75.1909 28.4664 74.719 27.7426C74.3214 27.1328 74.0703 26.5134 73.9658 25.8844C73.8569 25.2487 73.8942 24.6322 74.0778 24.035L75.7244 24.4511C75.4852 25.2852 75.5949 26.0541 76.0537 26.7577C76.3378 27.1933 76.6884 27.5186 77.1055 27.7337C77.516 27.9531 77.9555 28.0486 78.424 28.02C78.8881 27.9848 79.3379 27.8252 79.7735 27.5412C80.2091 27.2572 80.5366 26.9099 80.756 26.4994C80.9711 26.0823 81.0644 25.6394 81.0358 25.1709C81.0006 24.7068 80.841 24.257 80.557 23.8214C80.0982 23.1178 79.4356 22.7094 78.5691 22.5963L78.8525 20.9217C79.4797 20.9902 80.0622 21.2025 80.6 21.5585C81.1378 21.9146 81.6055 22.3976 82.0031 23.0074Z" fill="#EF484F"/>
  3 +<path d="M70.9594 11.7831L70.7281 14.6197L70.8023 14.6806L72.1106 15.7536L73.5945 13.9443L75.0976 15.1771L69.7707 21.672L66.9593 19.3662C66.384 18.8944 65.9647 18.3901 65.7014 17.8534C65.4318 17.3116 65.3272 16.7705 65.3875 16.2302C65.4478 15.6899 65.6759 15.1786 66.0716 14.6961C66.4673 14.2136 66.9273 13.8925 67.4515 13.7327C67.9645 13.574 68.5104 13.5769 69.0895 13.7414L69.345 10.459L70.9594 11.7831ZM67.5932 15.9441C67.2939 16.309 67.1831 16.6838 67.2609 17.0683C67.3336 17.4591 67.5958 17.8396 68.0473 18.2099L69.2721 19.2144L71.1289 16.9505L69.9041 15.946C69.4526 15.5757 69.0281 15.3931 68.6307 15.3982C68.2333 15.4034 67.8875 15.5853 67.5932 15.9441Z" fill="#EF484F"/>
  4 +<path d="M62.1242 16.3954L60.3671 15.5638L63.9607 7.97125L65.7178 8.80291L62.1242 16.3954Z" fill="#EF484F"/>
  5 +<path d="M53.9187 11.8599L56.5546 12.3866L56.2443 13.9399L49.0661 12.5056L49.3765 10.9523L52.0124 11.479L53.3479 4.7951L55.2542 5.17601L53.9187 11.8599Z" fill="#EF484F"/>
  6 +<path d="M46.0837 12.6942L44.1419 12.7868L43.7419 4.39629L45.6837 4.30372L46.0837 12.6942Z" fill="#EF484F"/>
  7 +<path d="M27.4392 7.52968C27.588 7.12379 27.8194 6.7742 28.1334 6.48092C28.4399 6.19022 28.8127 5.96987 29.2517 5.81986C29.8422 5.61812 30.4199 5.56447 30.9848 5.65892C31.5471 5.7458 32.2447 6.00623 33.0778 6.44021C33.828 6.28535 34.5504 6.2964 35.2449 6.47337C35.9318 6.65292 36.5338 6.97984 37.051 7.45413C37.5631 7.93858 37.9407 8.53661 38.1838 9.24822C38.4502 10.028 38.504 10.7916 38.3451 11.5391C38.1813 12.2968 37.8308 12.966 37.2938 13.5468C36.7491 14.1302 36.0642 14.5629 35.2391 14.8448C34.4139 15.1267 33.6112 15.2023 32.831 15.0715C32.0509 14.9407 31.3642 14.6258 30.771 14.1268C30.1804 13.6354 29.7519 12.9998 29.4855 12.22C29.1699 11.2964 29.1544 10.3972 29.4388 9.52223C29.7156 8.64988 30.2352 7.9313 30.9975 7.3665C30.741 7.23433 30.5115 7.15636 30.3089 7.13257C30.0962 7.1038 29.8876 7.12433 29.6832 7.19416C29.1912 7.36228 28.8269 7.70653 28.5904 8.22693L27.4392 7.52968ZM36.3215 9.88448C36.1534 9.39241 35.8974 8.98953 35.5535 8.67586C35.2021 8.36478 34.7996 8.16413 34.3461 8.07391C33.8951 7.99126 33.435 8.03011 32.9656 8.19047C32.4962 8.35083 32.1085 8.60165 31.8024 8.94294C31.4989 9.2918 31.3071 9.69549 31.2271 10.154C31.1394 10.6151 31.1797 11.0917 31.3478 11.5838C31.5159 12.0758 31.7757 12.4774 32.1271 12.7885C32.471 13.1022 32.8684 13.3003 33.3193 13.383C33.7729 13.4732 34.2343 13.4381 34.7037 13.2778C35.173 13.1174 35.5595 12.8628 35.863 12.5139C36.1691 12.1726 36.366 11.7714 36.4536 11.3104C36.5337 10.8518 36.4896 10.3766 36.3215 9.88448Z" fill="#EF484F"/>
  8 +<path d="M20.0717 13.5388C21.0108 12.7917 21.9499 12.4688 22.8892 12.5701C23.8222 12.6763 24.6722 13.2115 25.4392 14.1756L28.3677 17.8569L26.8464 19.0671L23.9627 15.4422C23.0264 14.2652 22.0699 14.0652 21.0932 14.8422C20.6174 15.2207 20.3664 15.6504 20.3401 16.1314C20.3188 16.6186 20.5496 17.1658 21.0328 17.7731L23.9164 21.398L22.4139 22.5933L19.4854 18.9121C18.7184 17.9479 18.3912 16.9969 18.5037 16.0589C18.6099 15.1259 19.1326 14.2858 20.0717 13.5388Z" fill="#EF484F"/>
  9 +<path d="M10.4419 27.6482L9.12703 26.8087L12.6271 21.3268L19.7071 25.8472L16.2909 31.1976L14.9761 30.3581L17.3525 26.6361L15.8152 25.6545L13.7164 28.9416L12.442 28.1279L14.5408 24.8408L12.9023 23.7947L10.4419 27.6482Z" fill="#EF484F"/>
  10 +<path d="M6.27039 33.7392C6.36698 33.4258 6.55528 33.195 6.83531 33.0469C7.11534 32.8988 7.41591 32.8742 7.73701 32.9731C8.06576 33.0744 8.29654 33.2627 8.42935 33.538C8.56982 33.8157 8.59175 34.1113 8.49517 34.4247C8.39858 34.7382 8.2141 34.9702 7.94171 35.1206C7.67697 35.2734 7.38023 35.2992 7.05148 35.1979C6.73038 35.099 6.49578 34.9095 6.34767 34.6294C6.19956 34.3494 6.1738 34.0527 6.27039 33.7392Z" fill="#EF484F"/>
  11 +<path d="M8.17685 64.571C7.82514 63.7906 7.67406 63.0075 7.72359 62.2218C7.78371 61.44 8.03062 60.7321 8.46435 60.0979C8.90865 59.4677 9.51006 58.9816 10.2686 58.6398C11.0271 58.2979 11.7859 58.1709 12.5451 58.2588C13.3148 58.3506 14.0087 58.6346 14.6269 59.1106C15.2557 59.5907 15.7476 60.2246 16.1026 61.0123C16.4017 61.676 16.5545 62.3266 16.5611 62.9643C16.5709 63.6092 16.4392 64.2126 16.1659 64.7745L14.6029 64.11C14.9676 63.3226 14.9774 62.546 14.6322 61.7802C14.4186 61.3061 14.1222 60.9308 13.743 60.6541C13.3712 60.3742 12.9516 60.2123 12.4843 60.1684C12.0203 60.1318 11.5513 60.2203 11.0772 60.434C10.6031 60.6477 10.2261 60.9404 9.94617 61.3123C9.66952 61.6914 9.50926 62.1146 9.46538 62.5819C9.4288 63.0459 9.51733 63.515 9.73099 63.9891C10.0761 64.7549 10.6681 65.2603 11.5068 65.5053L10.9693 67.1164C10.36 66.9523 9.8171 66.6529 9.34047 66.2184C8.86384 65.7838 8.47597 65.2347 8.17685 64.571Z" fill="#EF484F"/>
  12 +<path d="M17.3627 77.3602L18.0275 74.5929L17.9635 74.5213L16.8358 73.2599L15.0913 74.8195L13.7957 73.3702L20.0581 67.7718L22.4814 70.4825C22.9772 71.0371 23.314 71.5999 23.4917 72.1708C23.6747 72.7476 23.6949 73.2983 23.5522 73.8229C23.4095 74.3475 23.1055 74.8177 22.6403 75.2336C22.1751 75.6495 21.6712 75.896 21.1287 75.9733C20.5974 76.0512 20.0584 75.9644 19.5115 75.7128L18.7543 78.9169L17.3627 77.3602ZM21.3287 73.7664C21.6806 73.4518 21.8477 73.0986 21.83 72.7066C21.8182 72.3094 21.6177 71.893 21.2285 71.4577L20.1728 70.2768L17.9899 72.2282L19.0456 73.4091C19.4348 73.8445 19.8262 74.0902 20.2196 74.1462C20.6131 74.2022 20.9828 74.0756 21.3287 73.7664Z" fill="#EF484F"/>
  13 +<path d="M26.8018 74.1611L28.4101 75.2531L23.6917 82.2027L22.0833 81.1107L26.8018 74.1611Z" fill="#EF484F"/>
  14 +<path d="M34.2128 79.9049L31.6893 78.9791L32.2349 77.492L39.107 80.0131L38.5614 81.5002L36.0379 80.5744L33.6904 86.9734L31.8653 86.3038L34.2128 79.9049Z" fill="#EF484F"/>
  15 +<path d="M42.0833 80.2857L44.0162 80.4929L43.1211 88.8451L41.1882 88.6379L42.0833 80.2857Z" fill="#EF484F"/>
  16 +<path d="M59.713 88.2561C59.5036 88.6343 59.2212 88.9441 58.8657 89.1856C58.5182 89.4257 58.116 89.5861 57.6591 89.6668C57.0446 89.7754 56.4655 89.7395 55.9219 89.5594C55.3796 89.387 54.7303 89.0224 53.9739 88.4655C53.2088 88.5031 52.4967 88.3811 51.8377 88.0994C51.1866 87.8164 50.642 87.4008 50.204 86.8526C49.7724 86.2952 49.4913 85.6462 49.3605 84.9056C49.2171 84.0942 49.2815 83.3314 49.5534 82.6172C49.8318 81.8937 50.281 81.2864 50.901 80.795C51.5289 80.3023 52.2722 79.9801 53.1309 79.8285C53.9896 79.6768 54.7943 79.7256 55.5451 79.9748C56.2959 80.224 56.926 80.6408 57.4354 81.2251C57.9434 81.8015 58.2691 82.4955 58.4124 83.3069C58.5821 84.268 58.4592 85.159 58.0436 85.9798C57.6359 86.7992 57.012 87.4293 56.1719 87.8701C56.405 88.0402 56.6198 88.1525 56.8163 88.2072C57.0221 88.2683 57.2313 88.2801 57.444 88.2425C57.9561 88.1521 58.369 87.868 58.6827 87.3901L59.713 88.2561ZM51.2985 84.5633C51.3889 85.0754 51.5799 85.5129 51.8715 85.8757C52.1709 86.2371 52.5377 86.4973 52.972 86.6562C53.4048 86.8072 53.8655 86.8396 54.3539 86.7533C54.8424 86.667 55.2641 86.4788 55.619 86.1887C55.9726 85.8906 56.2241 85.5212 56.3738 85.0805C56.5313 84.6384 56.5648 84.1613 56.4744 83.6492C56.3839 83.1371 56.189 82.7004 55.8896 82.3389C55.598 81.9761 55.2358 81.7192 54.8029 81.5682C54.3687 81.4093 53.9073 81.373 53.4189 81.4592C52.9305 81.5455 52.5095 81.7376 52.1559 82.0357C51.801 82.3258 51.5447 82.692 51.3872 83.1341C51.2376 83.5749 51.208 84.0513 51.2985 84.5633Z" fill="#EF484F"/>
  17 +<path d="M67.9183 83.4511C66.8755 84.0448 65.8979 84.2195 64.9853 83.975C64.0798 83.7265 63.3222 83.0669 62.7126 81.9963L60.385 77.9085L62.0744 76.9466L64.3663 80.9719C65.1105 82.2788 66.0248 82.6236 67.1094 82.0061C67.6377 81.7052 67.9519 81.3192 68.0518 80.848C68.1478 80.3699 68.0038 79.7937 67.6199 79.1193L65.3279 75.0941L66.9964 74.1441L69.324 78.2319C69.9336 79.3025 70.1107 80.2925 69.8552 81.2021C69.6068 82.1076 68.9611 82.8573 67.9183 83.4511Z" fill="#EF484F"/>
  18 +<path d="M79.5995 70.9901L80.7696 72.0218L76.4681 76.9003L70.1675 71.3448L74.3659 66.5834L75.536 67.6151L72.6154 70.9274L73.9835 72.1337L76.5628 69.2085L77.6969 70.2085L75.1176 73.1337L76.5757 74.4194L79.5995 70.9901Z" fill="#EF484F"/>
  19 +<path d="M84.6605 65.6138C84.5168 65.9086 84.2953 66.1077 83.9958 66.211C83.6963 66.3143 83.3956 66.2923 83.0935 66.1452C82.7842 65.9945 82.5851 65.773 82.4963 65.4805C82.4002 65.1845 82.4239 64.8891 82.5676 64.5943C82.7112 64.2994 82.9292 64.0985 83.2215 63.9918C83.5066 63.8815 83.8037 63.9017 84.113 64.0523C84.4151 64.1995 84.6177 64.4228 84.721 64.7222C84.8243 65.0217 84.8041 65.3189 84.6605 65.6138Z" fill="#EF484F"/>
  20 +<path d="M34.6271 52.4887H32.4133C32.0219 52.4887 31.6465 52.3332 31.3698 52.0564C31.093 51.7796 30.9375 51.4042 30.9375 51.0128V45.8474C30.9375 45.4559 31.093 45.0806 31.3698 44.8038C31.6465 44.527 32.0219 44.3715 32.4133 44.3715H34.6271M39.7926 42.8957V39.944C39.7926 39.3569 39.5593 38.7938 39.1442 38.3786C38.729 37.9635 38.1659 37.7302 37.5788 37.7302L34.6271 44.3715V52.4887H42.9509C43.3068 52.4927 43.6522 52.3679 43.9234 52.1374C44.1946 51.9069 44.3733 51.5861 44.4267 51.2342L45.445 44.5929C45.4771 44.3814 45.4629 44.1654 45.4032 43.9599C45.3436 43.7545 45.24 43.5644 45.0996 43.403C44.9592 43.2416 44.7854 43.1126 44.5902 43.025C44.395 42.9374 44.1831 42.8933 43.9692 42.8957H39.7926Z" stroke="#EF484F" stroke-linecap="round" stroke-linejoin="round"/>
  21 +<path d="M58.3307 46.5852H60.301C60.7186 46.5778 61.1244 46.7241 61.4414 46.9961C61.7583 47.2682 61.9644 47.6471 62.0203 48.0611V53.2265C61.9644 53.6405 61.7583 54.0194 61.4414 54.2915C61.1244 54.5635 60.7186 54.7097 60.301 54.7024H58.3307M53.1653 56.1782V59.1299C53.1653 59.717 53.3985 60.2801 53.8137 60.6953C54.2288 61.1104 54.7919 61.3437 55.379 61.3437L58.3307 54.7024V46.5852H50.007C49.6511 46.5812 49.3057 46.7059 49.0345 46.9365C48.7633 47.167 48.5845 47.4878 48.5311 47.8397L47.5128 54.481C47.4807 54.6925 47.495 54.9085 47.5546 55.1139C47.6143 55.3194 47.7179 55.5094 47.8583 55.6709C47.9986 55.8323 48.1724 55.9613 48.3676 56.0489C48.5628 56.1365 48.7747 56.1806 48.9886 56.1782H53.1653Z" stroke="#EF484F" stroke-linecap="round" stroke-linejoin="round"/>
  22 +</svg>
... ...
src/assets/images/juxtapose-blue.svg
... ... @@ -0,0 +1,29 @@
  1 +<svg width="89" height="90" viewBox="0 0 89 90" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M82.9911 28.0089C83.2443 28.5691 83.3753 29.1322 83.3841 29.6983C83.3815 30.2601 83.2546 30.7783 83.0035 31.2528L81.244 30.7653C81.6482 30.0411 81.7202 29.3909 81.4599 28.815C81.1069 28.0339 80.4728 27.8502 79.5575 28.2638L75.6166 30.0449L76.9324 32.9563L75.3939 33.6516L73.2169 28.8349L78.5899 26.4066C79.6077 25.9466 80.4871 25.8532 81.2281 26.1263C81.9613 26.4031 82.549 27.0306 82.9911 28.0089Z" fill="#514DA7"/>
  3 +<path d="M75.5383 16.6577C76.3896 17.6385 76.7823 18.639 76.7163 19.6593C76.6446 20.6731 76.1053 21.617 75.0984 22.491L71.2536 25.828L69.8745 24.2391L73.6604 20.9531C74.8897 19.8862 75.0617 18.8427 74.1763 17.8226C73.745 17.3257 73.2687 17.0742 72.7474 17.068C72.2196 17.0675 71.6386 17.3425 71.0044 17.893L67.2185 21.179L65.8564 19.6097L69.7011 16.2727C70.7081 15.3987 71.7213 15.0008 72.7407 15.079C73.7545 15.1506 74.687 15.6769 75.5383 16.6577Z" fill="#514DA7"/>
  4 +<path d="M63.8592 7.84053L64.0638 11.6792L67.5582 10.1311L69.6119 11.4029L64.318 13.5628L64.6821 19.0431L62.6504 17.785L62.4249 14.1777L59.1282 15.6038L57.1959 14.4073L62.2011 12.3436L61.7945 6.56191L63.8592 7.84053Z" fill="#514DA7"/>
  5 +<path d="M54.1273 12.0539L56.9179 12.8759L56.4335 14.5203L48.8341 12.282L49.3184 10.6375L52.1091 11.4595L54.1933 4.38327L56.2115 4.97772L54.1273 12.0539Z" fill="#514DA7"/>
  6 +<path d="M41.9171 5.28412L46.1373 5.36191L46.9783 3.42899L49.1338 3.46872L44.9149 12.4836L42.8373 12.4453L38.9405 3.28084L41.148 3.32153L41.9171 5.28412ZM42.5499 6.89349L43.9271 10.4L45.4326 6.94662L42.5499 6.89349Z" fill="#514DA7"/>
  7 +<path d="M34.6298 14.1113C33.8566 14.3362 33.1499 14.402 32.5096 14.3087C31.861 14.2179 31.314 13.9803 30.8685 13.5959C30.4231 13.2115 30.106 12.695 29.9174 12.0466C29.7312 11.4064 29.7217 10.8005 29.8891 10.2289C30.0588 9.66552 30.393 9.17155 30.8917 8.74696C31.3845 8.3331 32.0174 8.01372 32.7906 7.78881L34.5489 7.27732L33.8488 4.87054L35.869 4.28287L38.4083 13.0121L34.6298 14.1113ZM33.3817 9.40224C32.7748 9.57878 32.3508 9.84187 32.1099 10.1915C31.8714 10.5494 31.8222 10.9695 31.9625 11.4517C32.1052 11.9422 32.372 12.2703 32.7629 12.4361C33.1562 12.6103 33.6563 12.6091 34.2632 12.4325L35.9092 11.9537L35.0277 8.9234L33.3817 9.40224Z" fill="#514DA7"/>
  8 +<path d="M20.05 11.3597C20.8312 10.8301 21.6512 10.52 22.5102 10.4292C23.3621 10.3434 24.1663 10.4728 24.9231 10.8175C25.6775 11.1743 26.3049 11.7217 26.8053 12.4599C27.3058 13.198 27.5796 13.98 27.6268 14.8057C27.6717 15.6434 27.4966 16.4421 27.1015 17.2016C26.6992 17.966 26.1075 18.6129 25.3263 19.1425C24.5452 19.6721 23.7287 19.9798 22.8768 20.0657C22.025 20.1515 21.2183 20.0185 20.4567 19.6666C19.7 19.3219 19.0714 18.7804 18.571 18.0423C18.0706 17.3041 17.7979 16.5162 17.753 15.6785C17.7129 14.8479 17.8904 14.0528 18.2856 13.2933C18.6807 12.5338 19.2689 11.8893 20.05 11.3597ZM21.0557 12.8431C20.6114 13.1444 20.2781 13.5168 20.0558 13.9604C19.8384 14.4111 19.7532 14.8873 19.8003 15.3888C19.8403 15.8952 20.0182 16.3813 20.334 16.8471C20.6498 17.3129 21.0355 17.6581 21.4911 17.8827C21.9395 18.1122 22.4109 18.2058 22.9053 18.1635C23.4045 18.1284 23.8763 17.9603 24.3206 17.659C24.7649 17.3578 25.0958 16.9818 25.3132 16.5311C25.5355 16.0875 25.6267 15.6125 25.5867 15.1061C25.5396 14.6046 25.3582 14.1209 25.0424 13.6551C24.7266 13.1893 24.3444 12.8416 23.896 12.6122C23.4404 12.3876 22.963 12.2928 22.4637 12.3279C21.9694 12.3702 21.5 12.5419 21.0557 12.8431Z" fill="#514DA7"/>
  9 +<path d="M11.8126 19.4293C12.2671 18.8727 12.7816 18.393 13.3563 17.9903C13.9322 17.5999 14.4695 17.3456 14.9683 17.2275L15.7439 18.7828C15.2762 18.9039 14.8055 19.1176 14.3319 19.424C13.8583 19.7303 13.4517 20.0913 13.1122 20.5072C12.7344 20.9699 12.5222 21.3667 12.4756 21.6976C12.4358 22.0339 12.5299 22.2951 12.7579 22.4813C12.9256 22.6182 13.1178 22.6634 13.3347 22.6168C13.5527 22.5825 13.7801 22.4887 14.0169 22.3356C14.2483 22.1891 14.5466 21.9744 14.9118 21.6913C15.4773 21.2588 15.9633 20.9236 16.37 20.6856C16.7767 20.4476 17.2222 20.3195 17.7065 20.3013C18.1853 20.2898 18.6594 20.4757 19.1289 20.859C19.538 21.193 19.8166 21.6049 19.9645 22.0945C20.1191 22.5896 20.113 23.1379 19.9461 23.7393C19.7737 24.3475 19.4247 24.9735 18.8991 25.6173C18.5322 26.0667 18.1199 26.4622 17.6621 26.8038C17.2044 27.1454 16.7435 27.3951 16.2795 27.5527L15.4527 26.0395C16.3527 25.6901 17.0683 25.1901 17.5995 24.5395C17.9718 24.0835 18.1745 23.6845 18.2077 23.3427C18.2354 23.0077 18.1285 22.7416 17.887 22.5444C17.6456 22.3473 17.3632 22.3235 17.0399 22.4731C16.7178 22.6349 16.2889 22.9275 15.7533 23.3508C15.1878 23.7833 14.7017 24.1186 14.295 24.3566C13.8883 24.5946 13.449 24.7221 12.9769 24.739C12.4993 24.7627 12.0257 24.5828 11.5563 24.1995C11.1539 23.871 10.8781 23.4558 10.7289 22.954C10.581 22.4644 10.5932 21.9155 10.7656 21.3073C10.9379 20.6992 11.2869 20.0732 11.8126 19.4293Z" fill="#514DA7"/>
  10 +<path d="M6.34814 33.6189L4.78937 32.9703L7.49372 26.4714L15.8871 29.9641L13.2476 36.3071L11.6888 35.6585L13.525 31.246L11.7024 30.4875L10.0808 34.3845L8.57002 33.7558L10.1916 29.8589L8.24917 29.0505L6.34814 33.6189Z" fill="#514DA7"/>
  11 +<path d="M3.53268 39.2805C3.58133 38.9288 3.74234 38.6496 4.0157 38.4426C4.28907 38.2357 4.60586 38.1572 4.96607 38.207C5.33486 38.258 5.61413 38.4191 5.8039 38.69C6.00223 38.9622 6.07708 39.2741 6.02843 39.6258C5.97977 39.9774 5.82305 40.2573 5.55826 40.4654C5.30205 40.6747 4.98955 40.7538 4.62076 40.7028C4.26055 40.6529 3.97699 40.4913 3.77007 40.218C3.56316 39.9446 3.48402 39.6321 3.53268 39.2805Z" fill="#514DA7"/>
  12 +<path d="M4.86152 57.0424C4.68101 56.4548 4.62208 55.8796 4.68472 55.3169C4.75818 54.76 4.94938 54.262 5.25832 53.8229L6.94233 54.5283C6.44996 55.1958 6.29657 55.8317 6.48217 56.4359C6.73387 57.2553 7.33975 57.5175 8.29982 57.2226L12.4339 55.9526L11.4958 52.8986L13.1097 52.4028L14.6618 57.4556L9.02555 59.187C7.95788 59.515 7.07371 59.4967 6.37303 59.1323C5.68062 58.7653 5.17678 58.0687 4.86152 57.0424Z" fill="#514DA7"/>
  13 +<path d="M10.8223 69.2428C10.1014 68.1625 9.83809 67.1204 10.0322 66.1165C10.2311 65.1199 10.8852 64.2516 11.9943 63.5115L16.2292 60.686L17.3969 62.4361L13.2269 65.2184C11.8728 66.1219 11.5707 67.1353 12.3203 68.2589C12.6855 68.8062 13.1263 69.1158 13.6426 69.1877C14.1661 69.2547 14.7772 69.0552 15.4758 68.5891L19.6459 65.8067L20.7992 67.5352L16.5643 70.3608C15.4552 71.1009 14.3999 71.3678 13.3984 71.1617C12.4018 70.9628 11.5431 70.3231 10.8223 69.2428Z" fill="#514DA7"/>
  14 +<path d="M21.2997 79.4624L21.5809 75.6286L17.9192 76.7236L16.0422 75.203L21.5663 73.728L21.8961 68.2455L23.7529 69.7497L23.5218 73.3567L26.972 72.3577L28.738 73.7884L23.5125 75.2044L23.1868 80.9912L21.2997 79.4624Z" fill="#514DA7"/>
  15 +<path d="M31.4833 76.5107L28.8186 75.3434L29.5065 73.7732L36.763 76.952L36.0751 78.5222L33.4104 77.3549L30.4505 84.1118L28.5233 83.2676L31.4833 76.5107Z" fill="#514DA7"/>
  16 +<path d="M42.7393 84.7649L38.5627 84.1556L37.4847 85.967L35.3514 85.6558L40.6734 77.2449L42.7295 77.5449L45.4396 87.1276L43.2548 86.8088L42.7393 84.7649ZM42.3145 83.0886L41.3905 79.4364L39.4615 82.6724L42.3145 83.0886Z" fill="#514DA7"/>
  17 +<path d="M51.081 76.9274C51.8764 76.8018 52.5858 76.8256 53.2092 76.9989C53.8412 77.1708 54.3539 77.4755 54.7473 77.913C55.1407 78.3505 55.3901 78.9028 55.4954 79.5698C55.5995 80.2283 55.5324 80.8306 55.2943 81.3766C55.0549 81.9141 54.6611 82.3619 54.1128 82.7203C53.5718 83.0687 52.9036 83.3057 52.1083 83.4313L50.2995 83.717L50.6905 86.1928L48.6123 86.5211L47.1941 77.5413L51.081 76.9274ZM51.7254 81.7562C52.3497 81.6576 52.8034 81.4501 53.0865 81.1336C53.3683 80.8086 53.47 80.3981 53.3916 79.9021C53.3119 79.3975 53.0887 79.0384 52.7218 78.8246C52.3536 78.6022 51.8573 78.5404 51.233 78.639L49.5397 78.9064L50.032 82.0237L51.7254 81.7562Z" fill="#514DA7"/>
  18 +<path d="M65.2015 81.4967C64.3598 81.9236 63.5072 82.1278 62.6436 82.1095C61.7877 82.0872 61.0062 81.8574 60.299 81.42C59.5956 80.971 59.0422 80.3488 58.6389 79.5534C58.2355 78.758 58.0625 77.9478 58.1197 77.1227C58.1808 76.286 58.4552 75.5158 58.943 74.8122C59.4385 74.1047 60.1071 73.5375 60.9488 73.1107C61.7905 72.6838 62.6392 72.4815 63.4951 72.5038C64.351 72.526 65.1345 72.7597 65.8456 73.2048C66.5528 73.6422 67.1081 74.2586 67.5114 75.054C67.9148 75.8493 68.0859 76.6654 68.0248 77.5021C67.9598 78.3311 67.6835 79.0974 67.1957 79.801C66.7079 80.5046 66.0432 81.0699 65.2015 81.4967ZM64.3909 79.8983C64.8697 79.6555 65.2473 79.3281 65.5237 78.9161C65.7963 78.4963 65.9408 78.0347 65.9573 77.5313C65.9815 77.0239 65.8663 76.5192 65.6118 76.0173C65.3573 75.5154 65.0182 75.1243 64.5945 74.844C64.1786 74.5598 63.7228 74.4075 63.227 74.3871C62.7273 74.359 62.2381 74.4663 61.7594 74.7091C61.2806 74.9519 60.905 75.2832 60.6324 75.7029C60.356 76.1149 60.2056 76.5746 60.1814 77.082C60.1649 77.5855 60.2839 78.0882 60.5385 78.5901C60.793 79.092 61.1282 79.4851 61.5442 79.7692C61.9678 80.0495 62.4295 80.2037 62.9291 80.2318C63.4249 80.2522 63.9121 80.1411 64.3909 79.8983Z" fill="#514DA7"/>
  19 +<path d="M74.3865 74.5293C73.8655 75.0242 73.2945 75.4351 72.6737 75.7621C72.0532 76.0769 71.4881 76.2614 70.9783 76.3156L70.4051 74.6749C70.8843 74.6137 71.3782 74.4611 71.8867 74.2169C72.3951 73.9728 72.844 73.6659 73.2332 73.2962C73.6664 72.8848 73.9269 72.5179 74.0148 72.1956C74.0968 71.867 74.0364 71.5959 73.8336 71.3825C73.6846 71.2256 73.4995 71.1565 73.2786 71.1753C73.0579 71.1819 72.8205 71.2462 72.5663 71.3683C72.3183 71.4844 71.9953 71.6598 71.5973 71.8945C70.9818 72.2523 70.4574 72.5236 70.0239 72.7084C69.5905 72.8932 69.1324 72.9641 68.6497 72.9211C68.1732 72.8721 67.7263 72.6278 67.3089 72.1884C66.9452 71.8055 66.7208 71.3618 66.6358 70.8574C66.5448 70.3468 66.6201 69.8036 66.8615 69.228C67.1091 68.6465 67.5343 68.0695 68.137 67.4971C68.5576 67.0976 69.0165 66.7572 69.5136 66.4761C70.0108 66.1949 70.4995 66.0054 70.9797 65.9075L71.609 67.5129C70.6721 67.746 69.8992 68.1518 69.2903 68.7302C68.8634 69.1356 68.612 69.5058 68.536 69.8407C68.4663 70.1696 68.5388 70.4471 68.7534 70.6731C68.9681 70.8991 69.2452 70.9582 69.5848 70.8506C69.9247 70.7308 70.3871 70.4946 70.9718 70.1422C71.5873 69.7845 72.1118 69.5132 72.5453 69.3283C72.9787 69.1435 73.4307 69.0725 73.9011 69.1152C74.3779 69.152 74.825 69.3901 75.2424 69.8295C75.6001 70.2062 75.8214 70.6528 75.9061 71.1694C75.9911 71.6738 75.9097 72.2168 75.662 72.7983C75.4144 73.3799 74.9892 73.9569 74.3865 74.5293Z" fill="#514DA7"/>
  20 +<path d="M81.5969 61.1423L83.0614 61.9823L79.5591 68.0883L71.6732 63.565L75.0915 57.6055L76.556 58.4456L74.178 62.5913L75.8904 63.5735L77.9905 59.9122L79.41 60.7264L77.3099 64.3877L79.1349 65.4345L81.5969 61.1423Z" fill="#514DA7"/>
  21 +<path d="M85.1057 55.8813C85.0131 56.2239 84.8182 56.4807 84.5209 56.6515C84.2236 56.8223 83.8994 56.8602 83.5484 56.7654C83.189 56.6682 82.9322 56.4733 82.7782 56.1805C82.6157 55.8855 82.5808 55.5667 82.6734 55.224C82.766 54.8813 82.9568 54.6234 83.2457 54.4504C83.5263 54.2751 83.8463 54.236 84.2057 54.3331C84.5567 54.428 84.8176 54.624 84.9884 54.9213C85.1592 55.2186 85.1983 55.5386 85.1057 55.8813Z" fill="#514DA7"/>
  22 +<path d="M42.8652 47.4114C42.683 47.3203 42.4613 47.3941 42.3702 47.5763C42.3636 47.5892 41.7163 48.8475 40.1183 48.8475C38.5373 48.8475 37.8933 47.6282 37.8661 47.5747C37.7746 47.3933 37.5537 47.3206 37.3718 47.4114C37.1897 47.5025 37.1159 47.7238 37.207 47.9063C37.2413 47.9749 38.0704 49.5851 40.1183 49.5851C42.1666 49.5851 42.9957 47.9749 43.03 47.9063C43.1211 47.7238 43.0473 47.5025 42.8652 47.4114Z" fill="#514DA7"/>
  23 +<path d="M38.9674 42.9991C39.0769 42.3781 38.3792 41.7721 37.3439 41.5896C37.157 41.5568 36.9704 41.5398 36.7889 41.5398C35.9938 41.5398 35.4232 41.8614 35.3354 42.3593C35.2263 42.9803 35.924 43.5862 36.9593 43.7688C37.1462 43.802 37.3328 43.8186 37.5139 43.8186C38.3095 43.8186 38.88 43.497 38.9674 42.9991ZM36.062 42.4872C36.0694 42.4444 36.2789 42.2774 36.7889 42.2774C36.9276 42.2774 37.071 42.2903 37.2156 42.3161C37.9189 42.44 38.2575 42.7812 38.2412 42.8715C38.2338 42.9139 38.0243 43.081 37.5139 43.081C37.3756 43.081 37.2322 43.0681 37.0876 43.0427C36.3843 42.9183 36.0458 42.5776 36.062 42.4872Z" fill="#514DA7"/>
  24 +<path d="M48.2311 39.6275C48.2311 37.4324 47.1608 37.0459 44.9119 37.0459C44.2042 37.0459 43.6535 37.2727 43.0705 37.5124C42.3417 37.8123 41.5153 38.1523 40.1175 38.1523C38.7201 38.1523 37.8936 37.8123 37.1649 37.5124C36.5818 37.2727 36.0312 37.0459 35.3231 37.0459C33.0745 37.0459 32.0039 37.4324 32.0039 39.6275C32.0039 44.5093 34.868 54.0107 40.1175 54.0107C45.3673 54.0107 48.2311 44.5093 48.2311 39.6275ZM40.1175 53.2731C35.5418 53.2731 32.7415 44.4385 32.7415 39.6275C32.7415 38.094 33.1759 37.7835 35.3231 37.7835C35.8855 37.7835 36.3258 37.9649 36.8842 38.1947C37.6373 38.5041 38.5744 38.8899 40.1175 38.8899C41.6609 38.8899 42.598 38.5041 43.3511 38.1947C43.9094 37.965 44.3498 37.7835 44.9119 37.7835C47.0594 37.7835 47.4934 38.094 47.4934 39.6275C47.4935 44.4385 44.6936 53.2731 40.1175 53.2731Z" fill="#514DA7"/>
  25 +<path d="M43.4442 41.54C43.2632 41.54 43.0765 41.557 42.8896 41.5898C42.4463 41.668 42.0391 41.8318 41.7437 42.0508C41.3757 42.3241 41.2056 42.6608 41.2658 42.9994C41.3535 43.4969 41.9241 43.8189 42.7192 43.8189C42.9003 43.8189 43.0869 43.8023 43.2739 43.7691C44.3091 43.5865 45.0072 42.9806 44.8977 42.3592C44.8099 41.8616 44.2394 41.54 43.4442 41.54ZM43.1455 43.0429C43.0013 43.0684 42.8575 43.0813 42.7192 43.0813C42.2091 43.0813 41.9997 42.9142 41.9919 42.8714C41.9889 42.8519 42.0291 42.7579 42.1833 42.6432C42.3858 42.4931 42.6896 42.3743 43.0179 42.3164C43.1625 42.2906 43.3059 42.2777 43.4442 42.2777C43.9546 42.2777 44.1641 42.4447 44.1711 42.4871C44.1874 42.5775 43.8488 42.919 43.1455 43.0429Z" fill="#514DA7"/>
  26 +<path d="M50.8143 42.2092C50.1099 42.2092 49.6518 42.3984 49.1219 42.6179C48.9751 42.6787 48.8183 42.7436 48.6443 42.8096C48.4536 42.8815 48.3573 43.0943 48.4296 43.285C48.5019 43.4756 48.7162 43.5715 48.905 43.4993C49.0872 43.4303 49.2506 43.3628 49.4036 43.2994C49.9174 43.0873 50.2567 42.9468 50.8143 42.9468C52.9618 42.9468 53.3959 43.2573 53.3959 44.7908C53.3959 49.6018 50.5959 58.4364 46.0199 58.4364C44.3101 58.4364 42.5373 57.0626 41.2782 54.7617C41.1805 54.5828 40.9562 54.5175 40.7777 54.6149C40.5989 54.713 40.5336 54.9369 40.6313 55.1157C42.0217 57.6567 44.0365 59.174 46.0199 59.174C51.2698 59.174 54.1335 49.6726 54.1335 44.7908C54.1335 42.5957 53.0632 42.2092 50.8143 42.2092Z" fill="#514DA7"/>
  27 +<path d="M46.0206 52.5354C43.9727 52.5354 43.1436 54.1459 43.1094 54.2145C43.0182 54.3967 43.092 54.6184 43.2742 54.7095C43.4564 54.8006 43.678 54.7268 43.7691 54.5446C43.7758 54.5317 44.423 53.273 46.0206 53.273C47.6021 53.273 48.246 54.4923 48.2733 54.5458C48.3382 54.6745 48.468 54.7482 48.6026 54.7482C48.6583 54.7482 48.7144 54.7361 48.7675 54.7095C48.9497 54.6184 49.0234 54.3968 48.9323 54.2146C48.898 54.1459 48.069 52.5354 46.0206 52.5354Z" fill="#514DA7"/>
  28 +<path d="M50.7687 47.5225C50.6809 47.025 50.1104 46.7034 49.3152 46.7034C49.1342 46.7034 48.9475 46.7204 48.7606 46.7532C48.3173 46.8313 47.9101 46.9951 47.6151 47.2142C47.247 47.4874 47.077 47.8242 47.1367 48.1627C47.2245 48.6602 47.795 48.9822 48.5902 48.9822C48.7712 48.9822 48.9579 48.9656 49.1448 48.9324C50.18 48.7499 50.8782 48.1439 50.7687 47.5225ZM48.5902 48.2446C48.0801 48.2446 47.8706 48.0775 47.8629 48.0348C47.8599 48.0153 47.9001 47.9212 48.0543 47.8065C48.2568 47.6564 48.5606 47.5377 48.8889 47.4797C49.0335 47.4539 49.1769 47.441 49.3152 47.441C49.8257 47.441 50.0351 47.6081 50.0425 47.6505C50.0587 47.7409 49.7202 48.0823 49.0165 48.2063C48.8723 48.2317 48.7285 48.2446 48.5902 48.2446Z" fill="#514DA7"/>
  29 +</svg>
... ...
src/assets/images/juxtapose-red.png

3.49 KB

src/assets/images/retake-blue.svg
... ... @@ -0,0 +1,23 @@
  1 +<svg width="100" height="103" viewBox="0 0 100 103" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M84.7248 28.0392L83.6246 30.6897L83.677 30.7711L84.6003 32.2058L86.5844 30.9289L87.6452 32.5773L80.5226 37.1609L78.5385 34.0779C78.1326 33.447 77.8863 32.8333 77.7997 32.2367C77.7088 31.6333 77.7759 31.0817 78.0011 30.5819C78.2262 30.0821 78.6033 29.6619 79.1324 29.3214C79.6615 28.9809 80.2023 28.8152 80.7549 28.8241C81.2963 28.8306 81.8193 29.0024 82.324 29.3395L83.5854 26.2687L84.7248 28.0392ZM80.2063 30.9902C79.8061 31.2477 79.5838 31.573 79.5394 31.9661C79.4882 32.3636 79.6219 32.8099 79.9406 33.3051L80.8049 34.6482L83.2877 33.0505L82.4233 31.7074C82.1047 31.2122 81.7538 30.9056 81.3709 30.7875C80.9879 30.6694 80.5997 30.737 80.2063 30.9902Z" fill="#514DA7"/>
  3 +<path d="M71.5719 17.6039L72.491 16.3274L77.8134 20.1591L72.8646 27.033L67.6699 23.2932L68.5889 22.0166L72.2027 24.6182L73.2772 23.1256L70.0858 20.828L70.9766 19.5907L74.168 21.8883L75.3133 20.2975L71.5719 17.6039Z" fill="#514DA7"/>
  4 +<path d="M61.4434 18.8871L64.0401 19.6638L63.5824 21.194L56.511 19.0788L56.9687 17.5486L59.5654 18.3254L61.535 11.7408L63.4129 12.3025L61.4434 18.8871Z" fill="#514DA7"/>
  5 +<path d="M47.3874 12.3474L51.3163 12.1796L51.9884 10.3342L53.9951 10.2485L50.5848 18.8719L48.6506 18.9545L44.5053 10.6538L46.5604 10.566L47.3874 12.3474ZM48.0674 13.808L49.5477 16.9905L50.7512 13.6933L48.0674 13.808Z" fill="#514DA7"/>
  6 +<path d="M36.7691 16.5824L37.3491 15.045L36.5076 13.0756L38.299 12.3101L41.627 20.0989L39.8356 20.8644L38.2809 17.2259L36.3862 22.3382L34.3834 23.194L36.1269 18.3437L30.8663 15.486L32.9692 14.5874L36.7691 16.5824Z" fill="#514DA7"/>
  7 +<path d="M21.7221 25.0232L20.6328 23.8883L25.3642 19.347L31.2295 25.4576L26.6116 29.89L25.5223 28.7552L28.7348 25.6718L27.4612 24.3449L24.6241 27.068L23.5683 25.9681L26.4054 23.245L25.048 21.8308L21.7221 25.0232Z" fill="#514DA7"/>
  8 +<path d="M15.5201 31.0128C15.6788 30.7226 15.9114 30.5326 16.2179 30.4428C16.5244 30.353 16.8263 30.3893 17.1236 30.5518C17.428 30.7182 17.618 30.9508 17.6936 31.2496C17.7764 31.5523 17.7384 31.8487 17.5798 32.1389C17.4211 32.4291 17.1921 32.6211 16.8926 32.7148C16.6002 32.8123 16.3019 32.7779 15.9975 32.6115C15.7002 32.449 15.5067 32.2145 15.4169 31.9079C15.327 31.6014 15.3615 31.303 15.5201 31.0128Z" fill="#514DA7"/>
  9 +<path d="M17.415 74.3498L18.5224 71.7023L18.4702 71.6208L17.5508 70.1836L15.5632 71.4551L14.5069 69.8038L21.6418 65.2395L23.6175 68.3279C24.0218 68.9598 24.2664 69.5742 24.3514 70.1711C24.4407 70.7747 24.3721 71.3261 24.1456 71.8253C23.9191 72.3245 23.5408 72.7436 23.0108 73.0827C22.4808 73.4218 21.9395 73.5861 21.387 73.5757C20.8456 73.5677 20.3231 73.3944 19.8193 73.056L18.5496 76.1234L17.415 74.3498ZM21.9414 71.4111C22.3424 71.1546 22.5656 70.8299 22.611 70.4369C22.6633 70.0396 22.5307 69.5929 22.2134 69.0969L21.3527 67.7514L18.8657 69.3424L19.7264 70.6879C20.0437 71.1839 20.3937 71.4915 20.7763 71.6106C21.159 71.7297 21.5473 71.6632 21.9414 71.4111Z" fill="#514DA7"/>
  10 +<path d="M30.5378 84.8212L29.6153 86.0953L24.3033 82.2491L29.2706 75.3886L34.4552 79.1425L33.5327 80.4166L29.926 77.8052L28.8474 79.2949L32.0326 81.6012L31.1385 82.8361L27.9533 80.5298L26.8037 82.1175L30.5378 84.8212Z" fill="#514DA7"/>
  11 +<path d="M40.6779 83.565L38.0833 82.7813L38.5451 81.2523L45.6108 83.3866L45.149 84.9156L42.5544 84.1318L40.567 90.711L38.6906 90.1442L40.6779 83.565Z" fill="#514DA7"/>
  12 +<path d="M54.7265 90.1425L50.7971 90.2997L50.1201 92.1432L48.1131 92.2235L51.5467 83.6094L53.4811 83.532L57.604 91.8438L55.5486 91.9261L54.7265 90.1425ZM54.0504 88.6801L52.5787 85.4935L51.3663 88.7874L54.0504 88.6801Z" fill="#514DA7"/>
  13 +<path d="M65.3504 85.936L64.7662 87.4718L65.6024 89.4435L63.8089 90.2041L60.502 82.4063L62.2955 81.6457L63.8403 85.2884L65.7488 80.1812L67.7539 79.3309L65.9974 84.1765L71.2502 87.0483L69.1448 87.9412L65.3504 85.936Z" fill="#514DA7"/>
  14 +<path d="M80.4123 77.537L81.4985 78.6748L76.7548 83.2033L70.9061 77.0769L75.536 72.6569L76.6222 73.7947L73.4014 76.8694L74.6714 78.1997L77.5159 75.4843L78.5686 76.587L75.7242 79.3025L77.0777 80.7203L80.4123 77.537Z" fill="#514DA7"/>
  15 +<path d="M86.632 71.5631C86.4725 71.8528 86.2394 72.0422 85.9327 72.1312C85.6259 72.2202 85.3241 72.1831 85.0272 72.0197C84.7234 71.8525 84.534 71.6194 84.4591 71.3204C84.3772 71.0175 84.4159 70.7212 84.5754 70.4314C84.7348 70.1417 84.9644 69.9503 85.2641 69.8574C85.5567 69.7607 85.855 69.7959 86.1589 69.9631C86.4557 70.1264 86.6486 70.3615 86.7376 70.6683C86.8266 70.975 86.7914 71.2733 86.632 71.5631Z" fill="#514DA7"/>
  16 +<path d="M54.2658 43.8606C54.1889 43.6794 54.0111 43.5613 53.8141 43.5613H51.9185L50.823 41.3698C50.6569 41.0376 50.1121 41.0376 49.946 41.3698L48.8505 43.5613H46.9549C46.7555 43.5613 46.5762 43.6818 46.5012 43.866C46.4258 44.0507 46.4699 44.2624 46.6125 44.4015L48.2484 45.9992L47.4709 48.2906C47.4052 48.4836 47.4664 48.6973 47.6242 48.8266C47.7139 48.9001 47.8241 48.9378 47.9348 48.9378C48.0191 48.9378 48.1039 48.9163 48.1803 48.8722L50.4301 47.5699L52.5809 48.8673C52.7543 48.9721 52.9748 48.9589 53.135 48.835C53.2947 48.71 53.3618 48.4998 53.303 48.3058L52.6034 45.9953L54.1648 44.3932C54.3025 44.2521 54.3423 44.0424 54.2658 43.8606ZM51.7005 45.5186C51.5756 45.6464 51.5305 45.8317 51.582 46.0021L51.996 47.37L50.6883 46.5812C50.5355 46.4891 50.3439 46.4872 50.1895 46.5768L48.8177 47.371L49.2753 46.0217C49.3361 45.8429 49.2885 45.6454 49.1539 45.5136L48.1578 44.5411H49.1534C49.3391 44.5411 49.5086 44.4363 49.5919 44.2702L50.3846 42.6843L51.1773 44.2702C51.2606 44.4363 51.4301 44.5411 51.6158 44.5411H52.6525L51.7005 45.5186Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  17 +<path d="M41.0719 51.8775H42.5417V52.8574C42.5417 53.1279 42.7612 53.3473 43.0316 53.3473C43.302 53.3473 43.5215 53.1279 43.5215 52.8574V51.3876C43.5215 51.1172 43.302 50.8977 43.0316 50.8977H41.5618V39.1392H59.1995V50.8977H57.7297C57.4588 50.8977 57.2398 51.1172 57.2398 51.3876V52.8574C57.2398 53.1279 57.4588 53.3473 57.7297 53.3473C58.0007 53.3473 58.2196 53.1279 58.2196 52.8574V51.8775H59.6894C59.9604 51.8775 60.1794 51.658 60.1794 51.3876V38.6493C60.1794 38.3788 59.9604 38.1593 59.6894 38.1593H58.2196V37.6694C58.2196 37.3989 58.0007 37.1794 57.7297 37.1794C57.4588 37.1794 57.2398 37.3989 57.2398 37.6694V38.1593H43.5216V37.6694C43.5216 37.3989 43.3021 37.1794 43.0317 37.1794C42.7613 37.1794 42.5418 37.3989 42.5418 37.6694V38.1593H41.0719C40.8015 38.1593 40.582 38.3788 40.582 38.6492V51.3876C40.582 51.658 40.8015 51.8775 41.0719 51.8775Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  18 +<path d="M44.5039 51.3874C44.5039 51.6578 44.7234 51.8773 44.9938 51.8773H55.7724C56.0433 51.8773 56.2623 51.6578 56.2623 51.3874C56.2623 51.117 56.0433 50.8975 55.7724 50.8975H44.9939C44.7234 50.8974 44.5039 51.1169 44.5039 51.3874Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  19 +<path d="M39.877 56.7294L48.2745 60.7283C48.3426 60.7606 48.4141 60.7758 48.4852 60.7758C48.6679 60.7758 48.8438 60.6729 48.9276 60.4966C49.0437 60.2521 48.9403 59.9601 48.6959 59.8435L40.2984 55.8445C40.0544 55.7289 39.7614 55.8318 39.6453 56.0763C39.5292 56.3207 39.6325 56.6133 39.877 56.7294Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  20 +<path d="M63.0834 53.658C62.9839 53.4067 62.7007 53.2828 62.4479 53.3812C62.3989 53.4008 57.4652 55.3071 50.3788 55.3071C43.2919 55.3071 38.3587 53.4008 38.3097 53.3812C38.0593 53.2837 37.7738 53.4062 37.6748 53.658C37.5758 53.9094 37.6993 54.194 37.9506 54.293C38.1573 54.3748 43.094 56.287 50.3788 56.287C57.6632 56.287 62.6003 54.3748 62.8066 54.293C63.0584 54.194 63.1823 53.9094 63.0834 53.658Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  21 +<path d="M60.8776 65.6434L52.56 61.6828C52.3145 61.5662 52.023 61.6705 51.9069 61.9145C51.7908 62.159 51.8947 62.4515 52.1391 62.5676L60.4563 66.5282C60.5244 66.5605 60.5959 66.5757 60.6665 66.5757C60.8497 66.5757 61.0251 66.4729 61.1094 66.2965C61.226 66.052 61.1221 65.7595 60.8776 65.6434Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  22 +<path d="M60.4544 55.8447L39.877 65.6434C39.6326 65.7595 39.5292 66.052 39.6453 66.2965C39.7296 66.4729 39.905 66.5758 40.0877 66.5758C40.1588 66.5758 40.2303 66.5606 40.2984 66.5282L60.8757 56.7295C61.1202 56.6134 61.2241 56.3209 61.1075 56.0764C60.9914 55.8324 60.6998 55.7286 60.4544 55.8447Z" fill="#514DA7" stroke="#514DA7" stroke-width="0.32758"/>
  23 +</svg>
... ...
src/assets/images/retake-red.svg
... ... @@ -0,0 +1,23 @@
  1 +<svg width="98" height="100" viewBox="0 0 98 100" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M82.9044 26.6747L81.8043 29.3252L81.8567 29.4066L82.7799 30.8413L84.7641 29.5644L85.8249 31.2128L78.7023 35.7964L76.7182 32.7134C76.3123 32.0825 76.066 31.4688 75.9794 30.8722C75.8885 30.2688 75.9556 29.7172 76.1807 29.2174C76.4059 28.7176 76.783 28.2974 77.3121 27.9569C77.8412 27.6164 78.382 27.4507 78.9346 27.4596C79.476 27.4661 79.999 27.6379 80.5037 27.975L81.7651 24.9042L82.9044 26.6747ZM78.386 29.6257C77.9858 29.8832 77.7635 30.2085 77.7191 30.6016C77.6679 30.9991 77.8016 31.4454 78.1203 31.9406L78.9846 33.2837L81.4674 31.686L80.603 30.3429C80.2843 29.8477 79.9335 29.5411 79.5506 29.423C79.1676 29.3049 78.7794 29.3725 78.386 29.6257Z" fill="#EF484F"/>
  3 +<path d="M69.9743 16.5617L70.8933 15.2851L76.2157 19.1169L71.2669 25.9908L66.0722 22.2509L66.9913 20.9744L70.605 23.576L71.6796 22.0834L68.4881 19.7857L69.3789 18.5484L72.5704 20.8461L73.7156 19.2552L69.9743 16.5617Z" fill="#EF484F"/>
  4 +<path d="M60.1504 18.0468L62.7472 18.8235L62.2894 20.3537L55.218 18.2385L55.6757 16.7083L58.2724 17.485L60.242 10.9005L62.12 11.4622L60.1504 18.0468Z" fill="#EF484F"/>
  5 +<path d="M46.3718 11.5874L50.3007 11.4195L50.9727 9.57418L52.9795 9.48846L49.5692 18.1119L47.635 18.1945L43.4897 9.89381L45.5448 9.80603L46.3718 11.5874ZM47.0518 13.048L48.5321 16.2305L49.7356 12.9333L47.0518 13.048Z" fill="#EF484F"/>
  6 +<path d="M36.1128 15.7984L36.6928 14.2611L35.8513 12.2916L37.6427 11.5262L40.9707 19.315L39.1793 20.0804L37.6247 16.442L35.73 21.5543L33.7271 22.41L35.4706 17.5597L30.21 14.7021L32.313 13.8035L36.1128 15.7984Z" fill="#EF484F"/>
  7 +<path d="M21.3979 24.0898L20.3086 22.955L25.04 18.4136L30.9052 24.5242L26.2874 28.9567L25.1981 27.8219L28.4105 24.7384L27.1369 23.4115L24.2999 26.1347L23.2441 25.0348L26.0812 22.3116L24.7238 20.8974L21.3979 24.0898Z" fill="#EF484F"/>
  8 +<path d="M15.4498 29.8019C15.6085 29.5117 15.8411 29.3217 16.1476 29.2319C16.4541 29.142 16.756 29.1784 17.0533 29.3409C17.3576 29.5073 17.5476 29.7399 17.6233 30.0387C17.7061 30.3414 17.6681 30.6378 17.5095 30.928C17.3508 31.2182 17.1217 31.4101 16.8223 31.5038C16.5299 31.6014 16.2316 31.567 15.9272 31.4006C15.6299 31.238 15.4364 31.0035 15.3466 30.697C15.2567 30.3905 15.2911 30.0921 15.4498 29.8019Z" fill="#EF484F"/>
  9 +<path d="M17.4424 72.2124L18.5497 69.5648L18.4975 69.4833L17.5781 68.0461L15.5905 69.3176L14.5342 67.6664L21.6692 63.102L23.6449 66.1904C24.0492 66.8224 24.2938 67.4368 24.3787 68.0336C24.468 68.6372 24.3994 69.1887 24.1729 69.6879C23.9464 70.1871 23.5682 70.6062 23.0382 70.9453C22.5081 71.2843 21.9669 71.4486 21.4144 71.4382C20.873 71.4302 20.3504 71.257 19.8466 70.9185L18.5769 73.9859L17.4424 72.2124ZM21.9688 69.2736C22.3697 69.0172 22.5929 68.6924 22.6384 68.2995C22.6906 67.9021 22.5581 67.4555 22.2408 66.9594L21.38 65.614L18.893 67.205L19.7537 68.5504C20.071 69.0465 20.421 69.3541 20.8037 69.4732C21.1863 69.5923 21.5747 69.5258 21.9688 69.2736Z" fill="#EF484F"/>
  10 +<path d="M30.3464 82.3605L29.4239 83.6346L24.1119 79.7885L29.0792 72.9279L34.2638 76.6818L33.3413 77.9559L29.7346 75.3445L28.656 76.8342L31.8412 79.1405L30.9471 80.3754L27.7619 78.0691L26.6123 79.6568L30.3464 82.3605Z" fill="#EF484F"/>
  11 +<path d="M40.1779 80.9017L37.5833 80.118L38.0451 78.589L45.1108 80.7233L44.649 82.2523L42.0544 81.4685L40.067 88.0477L38.1906 87.4809L40.1779 80.9017Z" fill="#EF484F"/>
  12 +<path d="M53.9413 87.3981L50.0119 87.5553L49.3349 89.3988L47.3279 89.4791L50.7615 80.865L52.696 80.7876L56.8188 89.0994L54.7635 89.1817L53.9413 87.3981ZM53.2652 85.9357L51.7936 82.7491L50.5812 86.043L53.2652 85.9357Z" fill="#EF484F"/>
  13 +<path d="M64.2059 83.2153L63.6217 84.7511L64.4579 86.7228L62.6644 87.4834L59.3575 79.6856L61.151 78.925L62.6958 82.5677L64.6043 77.4605L66.6094 76.6102L64.8528 81.4558L70.1057 84.3276L68.0003 85.2205L64.2059 83.2153Z" fill="#EF484F"/>
  14 +<path d="M78.9435 74.9642L80.0297 76.102L75.2861 80.6306L69.4374 74.5041L74.0673 70.0842L75.1534 71.2219L71.9327 74.2967L73.2027 75.627L76.0471 72.9115L77.0999 74.0143L74.2554 76.7298L75.609 78.1476L78.9435 74.9642Z" fill="#EF484F"/>
  15 +<path d="M84.9093 69.2674C84.7499 69.5572 84.5168 69.7466 84.21 69.8356C83.9032 69.9246 83.6014 69.8874 83.3046 69.7241C83.0007 69.5568 82.8113 69.3237 82.7364 69.0247C82.6545 68.7219 82.6933 68.4255 82.8527 68.1358C83.0122 67.846 83.2417 67.6547 83.5414 67.5618C83.8341 67.465 84.1323 67.5002 84.4362 67.6675C84.7331 67.8308 84.926 68.0658 85.015 68.3726C85.104 68.6794 85.0688 68.9777 84.9093 69.2674Z" fill="#EF484F"/>
  16 +<path d="M53.2645 42.3609C53.1902 42.1858 53.0185 42.0717 52.8282 42.0717H50.9975L49.9395 39.9552C49.7791 39.6344 49.2529 39.6344 49.0925 39.9552L48.0345 42.0717H46.2038C46.0112 42.0717 45.838 42.1881 45.7656 42.3661C45.6928 42.5445 45.7353 42.7488 45.873 42.8833L47.453 44.4263L46.7021 46.6393C46.6387 46.8257 46.6978 47.032 46.8502 47.1569C46.9368 47.2279 47.0432 47.2643 47.1502 47.2643C47.2316 47.2643 47.3134 47.2435 47.3872 47.201L49.56 45.9432L51.6372 47.1962C51.8047 47.2974 52.0176 47.2847 52.1724 47.165C52.3266 47.0443 52.3914 46.8413 52.3347 46.6539L51.6589 44.4225L53.167 42.8752C53.3 42.7389 53.3383 42.5364 53.2645 42.3609ZM50.787 43.9621C50.6663 44.0856 50.6228 44.2645 50.6725 44.4291L51.0723 45.7502L49.8094 44.9883C49.6618 44.8994 49.4768 44.8975 49.3277 44.9841L48.0029 45.7511L48.4448 44.448C48.5035 44.2753 48.4575 44.0846 48.3275 43.9573L47.3655 43.018H48.327C48.5063 43.018 48.6701 42.9168 48.7505 42.7564L49.5161 41.2247L50.2817 42.7564C50.3621 42.9168 50.5258 43.018 50.7052 43.018H51.7064L50.787 43.9621Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  17 +<path d="M40.5239 50.1034H41.9434V51.0497C41.9434 51.3109 42.1554 51.5229 42.4165 51.5229C42.6777 51.5229 42.8897 51.3109 42.8897 51.0497V49.6302C42.8897 49.369 42.6777 49.157 42.4165 49.157H40.997V37.8009H58.0312V49.157H56.6117C56.35 49.157 56.1385 49.369 56.1385 49.6302V51.0497C56.1385 51.3109 56.35 51.5229 56.6117 51.5229C56.8734 51.5229 57.0849 51.3109 57.0849 51.0497V50.1034H58.5044C58.766 50.1034 58.9775 49.8914 58.9775 49.6302V37.3277C58.9775 37.0665 58.766 36.8546 58.5044 36.8546H57.0849V36.3814C57.0849 36.1202 56.8734 35.9082 56.6117 35.9082C56.35 35.9082 56.1385 36.1202 56.1385 36.3814V36.8545H42.8898V36.3814C42.8898 36.1202 42.6778 35.9082 42.4166 35.9082C42.1554 35.9082 41.9434 36.1202 41.9434 36.3814V36.8545H40.5239C40.2628 36.8545 40.0508 37.0665 40.0508 37.3277V49.6301C40.0507 49.8914 40.2627 50.1034 40.5239 50.1034Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  18 +<path d="M43.8359 49.6301C43.8359 49.8913 44.0479 50.1033 44.3091 50.1033H54.7189C54.9805 50.1033 55.192 49.8913 55.192 49.6301C55.192 49.369 54.9805 49.157 54.7189 49.157H44.3091C44.0479 49.1569 43.8359 49.3689 43.8359 49.6301Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  19 +<path d="M39.3714 54.7891L47.4815 58.6511C47.5473 58.6823 47.6164 58.697 47.6849 58.697C47.8614 58.697 48.0313 58.5976 48.1122 58.4273C48.2244 58.1912 48.1246 57.9092 47.8884 57.7966L39.7783 53.9345C39.5426 53.8228 39.2597 53.9222 39.1476 54.1583C39.0354 54.3944 39.1352 54.6769 39.3714 54.7891Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  20 +<path d="M61.7831 51.8227C61.687 51.5799 61.4135 51.4603 61.1693 51.5554C61.122 51.5743 56.3572 53.4154 49.5132 53.4154C42.6688 53.4154 37.9044 51.5743 37.8571 51.5554C37.6153 51.4612 37.3395 51.5795 37.2439 51.8227C37.1483 52.0654 37.2676 52.3404 37.5103 52.4359C37.71 52.5149 42.4777 54.3617 49.5132 54.3617C56.5484 54.3617 61.3165 52.5149 61.5157 52.4359C61.7589 52.3404 61.8787 52.0654 61.7831 51.8227Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  21 +<path d="M59.655 63.3981L51.622 59.573C51.3849 59.4604 51.1033 59.5612 50.9912 59.7968C50.8791 60.0329 50.9794 60.3154 51.2155 60.4275L59.2481 64.2526C59.3138 64.2838 59.3829 64.2985 59.4511 64.2985C59.628 64.2985 59.7974 64.1992 59.8788 64.0288C59.9914 63.7927 59.8911 63.5103 59.655 63.3981Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  22 +<path d="M59.2446 53.9346L39.3714 63.398C39.1353 63.5102 39.0354 63.7927 39.1476 64.0288C39.229 64.1991 39.3984 64.2985 39.5749 64.2985C39.6435 64.2985 39.7126 64.2838 39.7783 64.2526L59.6515 54.7891C59.8876 54.677 59.9879 54.3945 59.8753 54.1584C59.7632 53.9228 59.4816 53.8225 59.2446 53.9346Z" fill="#EF484F" stroke="#EF484F" stroke-width="0.32758"/>
  23 +</svg>
... ...
src/assets/images/seats.svg
... ... @@ -0,0 +1,24 @@
  1 +<svg width="346" height="57" viewBox="0 0 346 57" fill="none" xmlns="http://www.w3.org/2000/svg">
  2 +<path d="M29.8572 57.0006H1.57143C1.15466 57.0006 0.754961 56.835 0.460261 56.5403C0.165561 56.2456 0 55.8459 0 55.4291V36.572C0.00249521 34.4889 0.831101 32.4919 2.30406 31.0189C3.77702 29.5459 5.77407 28.7173 7.85715 28.7148H23.5714C25.6545 28.7173 27.6516 29.5459 29.1245 31.0189C30.5975 32.4919 31.4261 34.4889 31.4286 36.572V55.4291C31.4286 55.8459 31.263 56.2456 30.9683 56.5403C30.6736 56.835 30.2739 57.0006 29.8572 57.0006ZM3.14286 53.8577H28.2857V36.572C28.2857 35.3217 27.7891 34.1226 26.905 33.2385C26.0209 32.3544 24.8218 31.8577 23.5714 31.8577H7.85715C6.60684 31.8577 5.40774 32.3544 4.52364 33.2385C3.63954 34.1226 3.14286 35.3217 3.14286 36.572V53.8577Z" fill="white"/>
  3 +<path d="M147.857 57.0006H119.571C119.155 57.0006 118.755 56.835 118.46 56.5403C118.166 56.2456 118 55.8459 118 55.4291V36.572C118.002 34.4889 118.831 32.4919 120.304 31.0189C121.777 29.5459 123.774 28.7173 125.857 28.7148H141.571C143.655 28.7173 145.652 29.5459 147.125 31.0189C148.597 32.4919 149.426 34.4889 149.429 36.572V55.4291C149.429 55.8459 149.263 56.2456 148.968 56.5403C148.674 56.835 148.274 57.0006 147.857 57.0006ZM121.143 53.8577H146.286V36.572C146.286 35.3217 145.789 34.1226 144.905 33.2385C144.021 32.3544 142.822 31.8577 141.571 31.8577H125.857C124.607 31.8577 123.408 32.3544 122.524 33.2385C121.64 34.1226 121.143 35.3217 121.143 36.572V53.8577Z" fill="white"/>
  4 +<path d="M265.857 57.0006H237.571C237.155 57.0006 236.755 56.835 236.46 56.5403C236.166 56.2456 236 55.8459 236 55.4291V36.572C236.002 34.4889 236.831 32.4919 238.304 31.0189C239.777 29.5459 241.774 28.7173 243.857 28.7148H259.571C261.655 28.7173 263.652 29.5459 265.125 31.0189C266.597 32.4919 267.426 34.4889 267.429 36.572V55.4291C267.429 55.8459 267.263 56.2456 266.968 56.5403C266.674 56.835 266.274 57.0006 265.857 57.0006ZM239.143 53.8577H264.286V36.572C264.286 35.3217 263.789 34.1226 262.905 33.2385C262.021 32.3544 260.822 31.8577 259.571 31.8577H243.857C242.607 31.8577 241.408 32.3544 240.524 33.2385C239.64 34.1226 239.143 35.3217 239.143 36.572V53.8577Z" fill="white"/>
  5 +<path d="M69.1428 57.0006H40.8571C40.4403 57.0006 40.0406 56.835 39.7459 56.5403C39.4512 56.2456 39.2856 55.8459 39.2856 55.4291V36.572C39.2881 34.4889 40.1167 32.4919 41.5897 31.0189C43.0627 29.5459 45.0597 28.7173 47.1428 28.7148H62.8571C64.9402 28.7173 66.9372 29.5459 68.4102 31.0189C69.8831 32.4919 70.7117 34.4889 70.7142 36.572V55.4291C70.7142 55.8459 70.5487 56.2456 70.254 56.5403C69.9593 56.835 69.5596 57.0006 69.1428 57.0006ZM42.4285 53.8577H67.5714V36.572C67.5714 35.3217 67.0747 34.1226 66.1906 33.2385C65.3065 32.3544 64.1074 31.8577 62.8571 31.8577H47.1428C45.8925 31.8577 44.6934 32.3544 43.8093 33.2385C42.9252 34.1226 42.4285 35.3217 42.4285 36.572V53.8577Z" fill="white"/>
  6 +<path d="M187.143 57.0006H158.857C158.44 57.0006 158.041 56.835 157.746 56.5403C157.451 56.2456 157.286 55.8459 157.286 55.4291V36.572C157.288 34.4889 158.117 32.4919 159.59 31.0189C161.063 29.5459 163.06 28.7173 165.143 28.7148H180.857C182.94 28.7173 184.937 29.5459 186.41 31.0189C187.883 32.4919 188.712 34.4889 188.714 36.572V55.4291C188.714 55.8459 188.549 56.2456 188.254 56.5403C187.959 56.835 187.56 57.0006 187.143 57.0006ZM160.429 53.8577H185.571V36.572C185.571 35.3217 185.075 34.1226 184.191 33.2385C183.306 32.3544 182.107 31.8577 180.857 31.8577H165.143C163.892 31.8577 162.693 32.3544 161.809 33.2385C160.925 34.1226 160.429 35.3217 160.429 36.572V53.8577Z" fill="white"/>
  7 +<path d="M305.143 57.0006H276.857C276.44 57.0006 276.041 56.835 275.746 56.5403C275.451 56.2456 275.286 55.8459 275.286 55.4291V36.572C275.288 34.4889 276.117 32.4919 277.59 31.0189C279.063 29.5459 281.06 28.7173 283.143 28.7148H298.857C300.94 28.7173 302.937 29.5459 304.41 31.0189C305.883 32.4919 306.712 34.4889 306.714 36.572V55.4291C306.714 55.8459 306.549 56.2456 306.254 56.5403C305.959 56.835 305.56 57.0006 305.143 57.0006ZM278.429 53.8577H303.571V36.572C303.571 35.3217 303.075 34.1226 302.191 33.2385C301.306 32.3544 300.107 31.8577 298.857 31.8577H283.143C281.892 31.8577 280.693 32.3544 279.809 33.2385C278.925 34.1226 278.429 35.3217 278.429 36.572V53.8577Z" fill="white"/>
  8 +<path d="M108.429 57.0006H80.1432C79.7264 57.0006 79.3267 56.835 79.032 56.5403C78.7373 56.2456 78.5718 55.8459 78.5718 55.4291V36.572C78.5743 34.4889 79.4029 32.4919 80.8758 31.0189C82.3488 29.5459 84.3458 28.7173 86.4289 28.7148H102.143C104.226 28.7173 106.223 29.5459 107.696 31.0189C109.169 32.4919 109.998 34.4889 110 36.572V55.4291C110 55.8459 109.835 56.2456 109.54 56.5403C109.245 56.835 108.846 57.0006 108.429 57.0006ZM81.7146 53.8577H106.858V36.572C106.858 35.3217 106.361 34.1226 105.477 33.2385C104.593 32.3544 103.394 31.8577 102.143 31.8577H86.4289C85.1786 31.8577 83.9795 32.3544 83.0954 33.2385C82.2113 34.1226 81.7146 35.3217 81.7146 36.572V53.8577Z" fill="white"/>
  9 +<path d="M226.429 57.0006H198.143C197.726 57.0006 197.327 56.835 197.032 56.5403C196.737 56.2456 196.572 55.8459 196.572 55.4291V36.572C196.574 34.4889 197.403 32.4919 198.876 31.0189C200.349 29.5459 202.346 28.7173 204.429 28.7148H220.143C222.226 28.7173 224.223 29.5459 225.696 31.0189C227.169 32.4919 227.998 34.4889 228 36.572V55.4291C228 55.8459 227.835 56.2456 227.54 56.5403C227.245 56.835 226.846 57.0006 226.429 57.0006ZM199.715 53.8577H224.858V36.572C224.858 35.3217 224.361 34.1226 223.477 33.2385C222.593 32.3544 221.394 31.8577 220.143 31.8577H204.429C203.179 31.8577 201.98 32.3544 201.095 33.2385C200.211 34.1226 199.715 35.3217 199.715 36.572V53.8577Z" fill="white"/>
  10 +<path d="M344.429 57.0006H316.143C315.726 57.0006 315.327 56.835 315.032 56.5403C314.737 56.2456 314.572 55.8459 314.572 55.4291V36.572C314.574 34.4889 315.403 32.4919 316.876 31.0189C318.349 29.5459 320.346 28.7173 322.429 28.7148H338.143C340.226 28.7173 342.223 29.5459 343.696 31.0189C345.169 32.4919 345.998 34.4889 346 36.572V55.4291C346 55.8459 345.835 56.2456 345.54 56.5403C345.245 56.835 344.846 57.0006 344.429 57.0006ZM317.715 53.8577H342.858V36.572C342.858 35.3217 342.361 34.1226 341.477 33.2385C340.593 32.3544 339.394 31.8577 338.143 31.8577H322.429C321.179 31.8577 319.98 32.3544 319.095 33.2385C318.211 34.1226 317.715 35.3217 317.715 36.572V53.8577Z" fill="white"/>
  11 +<path d="M91.1426 30.2856H87.9997V22.4284C87.9997 21.1781 87.5031 19.979 86.619 19.0949C85.7349 18.2108 84.5358 17.7141 83.2854 17.7141H65.9997C64.7494 17.7141 63.5503 18.2108 62.6662 19.0949C61.7821 19.979 61.2854 21.1781 61.2854 22.4284V30.2856H58.1426V22.4284C58.1451 20.3454 58.9737 18.3483 60.4466 16.8754C61.9196 15.4024 63.9166 14.5738 65.9997 14.5713H83.2854C85.3685 14.5738 87.3656 15.4024 88.8385 16.8754C90.3115 18.3483 91.1401 20.3454 91.1426 22.4284V30.2856Z" fill="white"/>
  12 +<path d="M209.143 30.2856H206V22.4284C206 21.1781 205.503 19.979 204.619 19.0949C203.735 18.2108 202.536 17.7141 201.285 17.7141H184C182.749 17.7141 181.55 18.2108 180.666 19.0949C179.782 19.979 179.285 21.1781 179.285 22.4284V30.2856H176.143V22.4284C176.145 20.3454 176.974 18.3483 178.447 16.8754C179.92 15.4024 181.917 14.5738 184 14.5713H201.285C203.369 14.5738 205.366 15.4024 206.839 16.8754C208.311 18.3483 209.14 20.3454 209.143 22.4284V30.2856Z" fill="white"/>
  13 +<path d="M190.143 15.7143H187V7.85715C187 6.60684 186.503 5.40775 185.619 4.52365C184.735 3.63954 183.536 3.14286 182.285 3.14286H165C163.749 3.14286 162.55 3.63954 161.666 4.52365C160.782 5.40775 160.285 6.60684 160.285 7.85715V15.7143H157.143V7.85715C157.145 5.77407 157.974 3.77702 159.447 2.30406C160.92 0.831102 162.917 0.00249521 165 0H182.285C184.369 0.00249521 186.366 0.831102 187.839 2.30406C189.311 3.77702 190.14 5.77407 190.143 7.85715V15.7143Z" fill="white"/>
  14 +<path d="M327.143 30.2856H324V22.4284C324 21.1781 323.503 19.979 322.619 19.0949C321.735 18.2108 320.536 17.7141 319.285 17.7141H302C300.749 17.7141 299.55 18.2108 298.666 19.0949C297.782 19.979 297.285 21.1781 297.285 22.4284V30.2856H294.143V22.4284C294.145 20.3454 294.974 18.3483 296.447 16.8754C297.92 15.4024 299.917 14.5738 302 14.5713H319.285C321.369 14.5738 323.366 15.4024 324.839 16.8754C326.311 18.3483 327.14 20.3454 327.143 22.4284V30.2856Z" fill="white"/>
  15 +<path d="M130 30.2856H126.857V22.4284C126.857 21.1781 126.36 19.979 125.476 19.0949C124.592 18.2108 123.393 17.7141 122.143 17.7141H104.857C103.607 17.7141 102.408 18.2108 101.524 19.0949C100.64 19.979 100.143 21.1781 100.143 22.4284V30.2856H97V22.4284C97.0025 20.3454 97.8311 18.3483 99.3041 16.8754C100.777 15.4024 102.774 14.5738 104.857 14.5713H122.143C124.226 14.5738 126.223 15.4024 127.696 16.8754C129.169 18.3483 129.998 20.3454 130 22.4284V30.2856Z" fill="white"/>
  16 +<path d="M111 15.7143H107.857V7.85715C107.857 6.60684 107.36 5.40775 106.476 4.52365C105.592 3.63954 104.393 3.14286 103.143 3.14286H85.8571C84.6068 3.14286 83.4077 3.63954 82.5236 4.52365C81.6395 5.40775 81.1429 6.60684 81.1429 7.85715V15.7143H78V7.85715C78.0025 5.77407 78.8311 3.77702 80.3041 2.30406C81.777 0.831102 83.7741 0.00249521 85.8571 0H103.143C105.226 0.00249521 107.223 0.831102 108.696 2.30406C110.169 3.77702 110.998 5.77407 111 7.85715V15.7143Z" fill="white"/>
  17 +<path d="M248 30.2856H244.857V22.4284C244.857 21.1781 244.36 19.979 243.476 19.0949C242.592 18.2108 241.393 17.7141 240.143 17.7141H222.857C221.607 17.7141 220.408 18.2108 219.524 19.0949C218.64 19.979 218.143 21.1781 218.143 22.4284V30.2856H215V22.4284C215.002 20.3454 215.831 18.3483 217.304 16.8754C218.777 15.4024 220.774 14.5738 222.857 14.5713H240.143C242.226 14.5738 244.223 15.4024 245.696 16.8754C247.169 18.3483 247.998 20.3454 248 22.4284V30.2856Z" fill="white"/>
  18 +<path d="M229 15.7143H225.857V7.85715C225.857 6.60684 225.36 5.40775 224.476 4.52365C223.592 3.63954 222.393 3.14286 221.143 3.14286H203.857C202.607 3.14286 201.408 3.63954 200.524 4.52365C199.64 5.40775 199.143 6.60684 199.143 7.85715V15.7143H196V7.85715C196.002 5.77407 196.831 3.77702 198.304 2.30406C199.777 0.831102 201.774 0.00249521 203.857 0H221.143C223.226 0.00249521 225.223 0.831102 226.696 2.30406C228.169 3.77702 228.998 5.77407 229 7.85715V15.7143Z" fill="white"/>
  19 +<path d="M51.857 30.2856H48.7141V22.4284C48.7141 21.1781 48.2174 19.979 47.3333 19.0949C46.4492 18.2108 45.2501 17.7141 43.9998 17.7141H26.7141C25.4638 17.7141 24.2647 18.2108 23.3806 19.0949C22.4965 19.979 21.9998 21.1781 21.9998 22.4284V30.2856H18.8569V22.4284C18.8594 20.3454 19.688 18.3483 21.161 16.8754C22.634 15.4024 24.631 14.5738 26.7141 14.5713H43.9998C46.0829 14.5738 48.0799 15.4024 49.5529 16.8754C51.0259 18.3483 51.8545 20.3454 51.857 22.4284V30.2856Z" fill="white"/>
  20 +<path d="M169.857 30.2856H166.714V22.4284C166.714 21.1781 166.217 19.979 165.333 19.0949C164.449 18.2108 163.25 17.7141 162 17.7141H144.714C143.464 17.7141 142.265 18.2108 141.381 19.0949C140.496 19.979 140 21.1781 140 22.4284V30.2856H136.857V22.4284C136.859 20.3454 137.688 18.3483 139.161 16.8754C140.634 15.4024 142.631 14.5738 144.714 14.5713H162C164.083 14.5738 166.08 15.4024 167.553 16.8754C169.026 18.3483 169.854 20.3454 169.857 22.4284V30.2856Z" fill="white"/>
  21 +<path d="M150.857 15.7143H147.714V7.85715C147.714 6.60684 147.217 5.40775 146.333 4.52365C145.449 3.63954 144.25 3.14286 143 3.14286H125.714C124.464 3.14286 123.265 3.63954 122.381 4.52365C121.496 5.40775 121 6.60684 121 7.85715V15.7143H117.857V7.85715C117.859 5.77407 118.688 3.77702 120.161 2.30406C121.634 0.831102 123.631 0.00249521 125.714 0H143C145.083 0.00249521 147.08 0.831102 148.553 2.30406C150.026 3.77702 150.854 5.77407 150.857 7.85715V15.7143Z" fill="white"/>
  22 +<path d="M287.857 30.2856H284.714V22.4284C284.714 21.1781 284.217 19.979 283.333 19.0949C282.449 18.2108 281.25 17.7141 280 17.7141H262.714C261.464 17.7141 260.265 18.2108 259.381 19.0949C258.496 19.979 258 21.1781 258 22.4284V30.2856H254.857V22.4284C254.859 20.3454 255.688 18.3483 257.161 16.8754C258.634 15.4024 260.631 14.5738 262.714 14.5713H280C282.083 14.5738 284.08 15.4024 285.553 16.8754C287.026 18.3483 287.854 20.3454 287.857 22.4284V30.2856Z" fill="white"/>
  23 +<path d="M268.857 15.7143H265.714V7.85715C265.714 6.60684 265.217 5.40775 264.333 4.52365C263.449 3.63954 262.25 3.14286 261 3.14286H243.714C242.464 3.14286 241.265 3.63954 240.381 4.52365C239.496 5.40775 239 6.60684 239 7.85715V15.7143H235.857V7.85715C235.859 5.77407 236.688 3.77702 238.161 2.30406C239.634 0.831102 241.631 0.00249521 243.714 0H261C263.083 0.00249521 265.08 0.831102 266.553 2.30406C268.026 3.77702 268.854 5.77407 268.857 7.85715V15.7143Z" fill="white"/>
  24 +</svg>
... ...
src/assets/images/spot-light-ps.svg
... ... @@ -0,0 +1,12 @@
  1 +<svg xmlns="http://www.w3.org/2000/svg" width="603.49" height="331.712" viewBox="0 0 603.49 331.712">
  2 + <g id="Group_1" data-name="Group 1" transform="translate(-584.474 -359.287)">
  3 + <line id="Line_1" data-name="Line 1" x2="125" y2="266" transform="translate(1017.5 359.5)" fill="none" stroke="#ebf0f5" stroke-width="1"/>
  4 + <line id="Line_2" data-name="Line 2" x1="538" y2="28" transform="translate(584.5 662.5)" fill="none" stroke="#ebf0f5" stroke-width="1"/>
  5 + <g id="Group_410" data-name="Group 410" transform="translate(1118.55 618.46)">
  6 + <path id="Path_1" data-name="Path 1" d="M34,41.106a4.083,4.083,0,1,1,4.083,4.083A4.083,4.083,0,0,1,34,41.106Z" fill="#fff"/>
  7 + <path id="Path_2" data-name="Path 2" d="M66.407,32.757,28.65,13.712,25.317,3.54,21.436,4.811,24.77,14.984,12.62,38.972,2.45,42.3l1.271,3.881,10.17-3.332L28.3,50.11l2.3-10.946a8.166,8.166,0,1,1,15.983,3.357L43.825,55.645l-.442,2.1,8.264,4.146,3.62-7.146,6.768,3.428,7.379-14.57-6.767-3.428Z" fill="#fff"/>
  8 + <path id="Path_3" data-name="Path 3" d="M34,67.1h1.5V50.4a9.247,9.247,0,0,0,5.166,0V67.1H50.877v1.083H25.3V67.1Z" fill="none" stroke="#fff" stroke-width="3"/>
  9 + <rect id="Rectangle_1" data-name="Rectangle 1" width="8.19" height="24.41" rx="4.095" transform="translate(42.194 61.433) rotate(180)" fill="#fff"/>
  10 + </g>
  11 + </g>
  12 +</svg>
... ...
src/components/AuthorIntro.vue
... ... @@ -33,12 +33,13 @@
33 33 <img src="../assets/images/comment-user.svg" /> <a href="javascript:void(0);" @click="goToProfile">View My Profile</a>
34 34 </div><!-- footer -->
35 35 </div><!-- comment box 1 -->
36   - <div class="comment-box-s-1 comment-w-397">
  36 + <!-- <div class="comment-box-s-1 comment-w-397">
37 37 <p>
38 38 Use arrow keys to navigate <br/>
39 39 <img src="../assets/images/key-arrow.jpg" class="key-arrow" />
40 40 </p>
41   - </div><!-- comment box 1 -->
  41 + </div> -->
  42 + <!-- comment box 1 -->
42 43 <div class="user-photo">
43 44 <!-- <img src="../assets/images/comment-photo.png" /> -->
44 45 <img :src="currentSlideData.payload.metaData.authorImage" />
... ...
src/components/EpisodeIntro.vue
... ... @@ -67,7 +67,10 @@
67 67 </div><!-- top section -->
68 68 </div><!-- info section-->
69 69 <div class="u-img-info">
70   - <img src="../assets/images/jxtapose.svg" />
  70 + <img src="../assets/images/retake-red.svg" v-if="currentSlideData.payload.metaData.type == 'Retake'"/>
  71 + <img src="../assets/images/behind-red.svg" v-if="currentSlideData.payload.metaData.type == 'Behind-the-scenes'"/>
  72 + <img src="../assets/images/critique-red.svg" v-if="currentSlideData.payload.metaData.type == 'Critique'"/>
  73 + <img src="../assets/images/jxtapose.svg" v-if="currentSlideData.payload.metaData.type == 'Juxtapose'"/>
71 74 </div><!-- image info -->
72 75 <div class="start">
73 76 <a href="javascript:void(0);" @click="goNext">
... ...
src/components/NoScreenshotSingleAuthor.vue
... ... @@ -38,7 +38,6 @@
38 38 <button
39 39 type="button"
40 40 class="bc-sort-list dropdown-toggle"
41   -
42 41 data-toggle="dropdown"
43 42 aria-haspopup="true"
44 43 aria-expanded="false"
... ... @@ -46,9 +45,15 @@
46 45 BEST
47 46 </button>
48 47 <div class="dropdown-menu short_by">
49   - <a class="dropdown-item" href="#">BEST 1</a>
50   - <a class="dropdown-item" href="#">BEST 2</a>
51   - <a class="dropdown-item" href="#">BEST 3</a>
  48 + <a class="dropdown-item" href="javasript:void(0);"
  49 + >BEST 1</a
  50 + >
  51 + <a class="dropdown-item" href="javasript:void(0);"
  52 + >BEST 2</a
  53 + >
  54 + <a class="dropdown-item" href="javasript:void(0);"
  55 + >BEST 3</a
  56 + >
52 57 </div>
53 58 </div>
54 59 <a
... ... @@ -62,176 +67,113 @@
62 67 </div>
63 68 <!-- top head -->
64 69 <div class="bounce-board-body">
65   - <!-- <ul class="bounced-user-comments">
66   - <li class="bc_border">
67   - <div class="lbord"></div>
68   - <div class="parent-full-width parent_bg">
69   - <div class="full-width">
70   - <div class="b-user-head">
71   - <img src="../assets/images/b-user1.png" />
72   - <span class="head-content">wanderingirl </span>
73   - <ul>
74   - <li>
75   - <span></span
76   - ><img src="../assets/images/u-info-icon.png" />6pts
77   - </li>
78   - <li><span></span>3days ago</li>
79   - <li><span class="au">Author</span></li>
80   - </ul>
81   - </div>
82   - <p>
83   - I wonder what the difference between โ€œDunzo Assistantโ€
84   - and โ€œPickup and Dropโ€ are. If they are the same, there
85   - are two โ€œcall to actionsโ€ for the same workflow...
86   - </p>
87   - <div class="joined_wrapper">
88   - <ul class="joined-info info_bc_spc">
89   - <li>
90   - <img src="../assets/images/purple-heart.png" />
91   - </li>
92   - <li><a href="#"> 4</a></li>
93   - <li class="comment-spc">
94   - <img src="../assets/images/purple-comment.png" />
95   - </li>
96   - <li><a href="#"> 6</a></li>
97   - </ul>
98   - <div class="add_rply">
99   - <input type="text" placeholder="Add your reply" />
100   - </div>
101   - </div>
102   - </div>
103   - </div>
104   - <div class="child-full-width">
105   - <div class="full-width">
106   - <div class="b-user-head">
107   - <img src="../assets/images/b-user1.png" />
108   - <span class="head-content">Onenoisyboi </span>
109   - <ul>
110   - <li>
111   - <span></span
112   - ><img src="../assets/images/u-info-icon.png" />6pts
113   - </li>
114   - <li><span></span>3days ago</li>
115   - <li><span class="red">Mod</span></li>
116   - </ul>
117   - </div>
118   - <p>
119   - I really liked the palette of the icons dunzo has they
120   - dont match with my jeans
121   - </p>
122   - <div class="joined_wrapper">
123   - <ul class="joined-info info_bc_spc">
124   - <li>
125   - <img src="../assets/images/purple-heart.png" />
126   - </li>
127   - <li><a href="#"> 4</a></li>
128   - <li class="comment-spc">
129   - <img src="../assets/images/purple-comment.png" />
130   - </li>
131   - <li><a href="#"> 6</a></li>
132   - </ul>
133   - <div class="add_rply">
134   - <input type="text" placeholder="Add your reply" />
135   - </div>
136   - </div>
137   - </div>
138   - </div>
139   - </li>
140   - </ul> -->
  70 +
141 71 <!-- all user comments -->
142 72 <ul class="bounced-user-comments">
143   - <li class="bc_border" v-for="(cmnt, j) in currentSlideData.payload.comments" :key="j">
  73 + <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
144 74 <div class="bc_brd_l"></div>
145 75 <!-- border -->
146 76 <div class="parent-full-width">
147 77 <div class="full-width">
148 78 <div class="b-user-head">
149   - <img src="../assets/images/b-user1.png" />
150   - <span class="head-content">wanderingirl </span>
  79 + <img :src="cmnt.user.profilePic" />
  80 + <span class="head-content">{{ cmnt.user.name }} </span>
151 81 <ul>
152 82 <li>
153 83 <span></span
154   - ><img src="../assets/images/u-info-icon.png" />6pts
  84 + ><img src="../assets/images/u-info-icon.png" />{{
  85 + cmnt.user.karmaPoints
  86 + }}pts
155 87 </li>
156   - <li><span></span>3days ago</li>
  88 + <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
157 89 </ul>
158 90 </div>
159 91 <!-- header -->
160 92 <p>
161   - {{cmnt.comment}}
  93 + {{ cmnt.comment }}
162 94 </p>
163 95 <div class="joined_wrapper">
164 96 <ul class="joined-info info_bc_spc">
165 97 <li>
166 98 <img src="../assets/images/purple-heart.png" />
167 99 </li>
168   - <li><a href="#"> 0</a></li>
  100 + <li><a href="javasript:void(0);"> 0</a></li>
169 101 <li class="comment-spc">
170 102 <img src="../assets/images/purple-comment.png" />
171 103 </li>
172   - <li><a href="#"> 0</a></li>
  104 + <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
173 105 </ul>
174   - <div class="add_rply">
175   - <input type="text" @click="eachRply" class="add_Rply_C" placeholder="Add your reply" />
  106 + <div class="add_rply" v-if="!cmnt.childInput">
  107 + <input
  108 + type="text"
  109 + @click="eachRply(cmnt)"
  110 + class="add_Rply_C"
  111 + placeholder="Add your reply"
  112 + />
176 113 </div>
177 114 <!-- rly form -->
178   -
179 115 </div>
180 116 <!-- joined wrapper -->
181 117 </div>
182 118 <!-- full width -->
183 119 </div>
  120 + <div class="comments-footer each-ft" v-if="cmnt.childInput">
  121 + <textarea v-model="comment"></textarea>
  122 + <div class="comments-footer-wrp">
  123 + <a
  124 + @click="createChildComment(cmnt)"
  125 + href="javasript:void(0);"
  126 + class="add_comments_chat reply-Wdth"
  127 + >Reply</a
  128 + >
  129 + <a href="javasript:void(0);" class="discard_bt"
  130 + @click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
  131 + /></a>
  132 + </div>
  133 + </div>
184 134 <!-- parent -->
185   - <!-- <div class="child-full-width">
  135 + <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
186 136 <div class="full-width">
187 137 <div class="b-user-head">
188   - <img src="../assets/images/b-user1.png" />
189   - <span class="head-content">Onenoisyboi </span>
  138 + <img :src="childCmnt.user.profilePic" />
  139 + <span class="head-content">{{childCmnt.user.name }} </span>
190 140 <ul>
191 141 <li>
192 142 <span></span
193   - ><img src="../assets/images/u-info-icon.png" />6pts
  143 + ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
194 144 </li>
195   - <li><span></span>3days ago</li>
  145 + <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
196 146 </ul>
197 147 </div>
198 148 <p>
199   - I really liked the palette of the icons dunzo has they
200   - dont match with my jeans
  149 + {{childCmnt.comment}}
201 150 </p>
202 151 <div class="joined_wrapper">
203 152 <ul class="joined-info info_bc_spc">
204 153 <li>
205 154 <img src="../assets/images/purple-heart.png" />
206 155 </li>
207   - <li><a href="#"> 4</a></li>
208   - <li class="comment-spc">
209   - <img src="../assets/images/purple-comment.png" />
210   - </li>
211   - <li><a href="#"> 6</a></li>
  156 + <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
  157 +
212 158 </ul>
213   - <div class="add_rply">
214   - <input type="text" placeholder="Add your reply" />
215   - </div>
  159 +
216 160 </div>
217 161 </div>
218   - </div> -->
219   - <div class="comments-footer each-ft">
220   - <textarea></textarea>
221   - <div class="comments-footer-wrp">
222   - <a href="#" class="add_comments_chat reply-Wdth">Reply</a>
223   - <a href="#" class="discard_bt"><img src="../assets/images/discard.svg" /></a>
224   - </div>
225   - </div>
226   - <!-- comments footer -->
  162 + </div>
  163 + <!-- eree -->
  164 +
  165 + <!-- comments footer -->
227 166 </li>
228 167 </ul>
229 168 </div>
230 169 <!-- bounce board body -->
231   - <div class="comments-footer">
232   - <textarea></textarea>
  170 + <div class="comments-footer" v-if="parentInput">
  171 + <textarea v-model="comment"></textarea>
233 172 <div class="comments-footer-wrp">
234   - <a href="#" class="add_comments_chat"
  173 + <a
  174 + href="javasript:void(0);"
  175 + class="add_comments_chat"
  176 + @click="createComment"
235 177 ><img src="../assets/images/add-comment.svg" /> Comment</a
236 178 >
237 179 </div>
... ... @@ -345,31 +287,39 @@
345 287 <!-- comments box -->
346 288 </div>
347 289 </div>
348   - <!-- single author comments -->
  290 + <!-- single author comments -->
349 291 <div class="footer-nav">
350 292 <div class="footer-top white-bg">
351 293 <div class="row">
352 294 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
353 295 <div class="row h-100p">
354   -
355   - <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r ">
  296 + <div
  297 + class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
  298 + >
356 299 <div class="ft-comments-group testi-photos-ct">
357 300 <div class="c-with-photos">
358   - <span class="count-comments">{{currentSlideData.payload.comments.length - 1}}+ Comments</span
  301 + <span class="count-comments"
  302 + >{{ commentList.length - 1 }}+ Comments</span
359 303 ><!-- count commets -->
360 304 <ul class="comments-photos">
361   - <li><img src="../assets/images/c-photo-1.png" /></li>
362   - <li><img src="../assets/images/c-photo-2.png" /></li>
363   - <li><img src="../assets/images/c-photo-3.png" /></li>
  305 + <!-- <li><img src="../assets/images/c-photo-1.png" /></li>
  306 + <li><img src="../assets/images/c-photo-2.png" /></li> -->
  307 + <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
  308 + <!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> -->
364 309 </ul>
365 310 <!-- comment photos -->
366 311 </div>
367 312 <div class="comments-detail all-c-space">
368   - <span>Saudrika commented <a href="javascript:void(0);" @click="open_ct_box">View All</a></span>
  313 + <span
  314 + >{{ commentList[commentList.length - 1].user.name }}
  315 + <a href="javascript:void(0);" @click="open_ct_box"
  316 + >View All</a
  317 + ></span
  318 + >
369 319 <p>
370 320 <!-- I wonder what the difference between โ€œDunzo Assistantโ€
371 321 and โ€œPickup and Drop... -->
372   - {{currentSlideData.payload.comments[2].comment}}
  322 + {{ commentList[commentList.length - 1].comment }}
373 323 </p>
374 324 </div>
375 325 <!-- comments detail -->
... ... @@ -379,20 +329,24 @@
379 329 </div>
380 330 </div>
381 331 <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
382   - <div class="comment-frm no-c-frm ">
  332 + <div class="comment-frm no-c-frm">
383 333 <div class="row">
384 334 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
385 335 <div class="form-group frm-wdth addfrm-spc">
386   -
387 336 <input
388 337 type="text"
389 338 class="form-control"
390   - placeholder="Kathy, Something on your mind?" id="open_ct_box" @click="open_ct_box"
  339 + placeholder="Kathy, Something on your mind?"
  340 + id="open_ct_box"
  341 + v-model="comment"
391 342 />
392 343 </div>
393 344 </div>
394 345 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
395   - <a href="javascript:void(0);" @click="open_ct_box" class="add-comment"
  346 + <a
  347 + href="javascript:void(0);"
  348 + @click="createComment"
  349 + class="add-comment"
396 350 ><img src="../assets/images/add-comment.svg" />
397 351 Comment</a
398 352 >
... ... @@ -401,21 +355,22 @@
401 355 <!-- comment from -->
402 356 </div>
403 357 </div>
404   - <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
405   - <ul class="top-intro-bt">
406   - <li>
407   - <a href="javascript:void(0);" @click="goBack"
408   - ><img src="../assets/images/skip-prev.svg" /> Prev</a
409   - >
410   - </li>
411   - <li>
412   - <a href="javascript:void(0);" @click="goNext"
413   - ><img src="../assets/images/skip-next.svg" /> Skip to
414   - next slide</a
415   - >
416   - </li>
417   - </ul>
418   - </div><!-- buttons list -->
  358 + <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
  359 + <ul class="top-intro-bt">
  360 + <li>
  361 + <a href="javascript:void(0);" @click="goBack"
  362 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  363 + >
  364 + </li>
  365 + <li>
  366 + <a href="javascript:void(0);" @click="goNext"
  367 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  368 + slide</a
  369 + >
  370 + </li>
  371 + </ul>
  372 + </div>
  373 + <!-- buttons list -->
419 374 </div>
420 375 </div>
421 376 <!-- footer top -->
... ... @@ -438,15 +393,22 @@
438 393 <script>
439 394 import Vue from "vue";
440 395 import router from "../router";
  396 +import axios from "axios";
  397 +import moment from 'moment';
441 398  
442 399 export default {
443   - name: "NoScreenshotSingleAuthor",
  400 + name: "noscreenshotSingleautho",
444 401  
445 402 data() {
446 403 return {
447 404 allSlide: [],
448 405 currentSlideIndex: null,
449 406 currentSlideData: null,
  407 + //
  408 + usertoken: null,
  409 + commentList: [],
  410 + comment: null,
  411 + parentInput:true,
450 412 };
451 413 },
452 414 mounted() {
... ... @@ -457,6 +419,12 @@ export default {
457 419 this.allSlide = JSON.parse(allSlideData);
458 420 this.getCurrentSlideData();
459 421 }
  422 + var userdata = localStorage.getItem("spotlight_usertoken");
  423 + if (userdata) {
  424 + userdata = JSON.parse(userdata);
  425 + this.usertoken = userdata.token;
  426 + this.getComment();
  427 + }
460 428 },
461 429 methods: {
462 430 getCurrentSlideData() {
... ... @@ -487,25 +455,115 @@ export default {
487 455 },
488 456 });
489 457 },
  458 + createComment() {
  459 + console.log("===", this.comment);
  460 + var obj = {
  461 + caseStudyId: this.currentSlideData.caseStudyId,
  462 + slideId: this.currentSlideData.slideId,
  463 + comment: this.comment,
  464 +
  465 + };
  466 + axios
  467 + .post("/bounceBoard/comment", obj, {
  468 + headers: {
  469 + Authorization: "Bearer " + this.usertoken,
  470 + },
  471 + })
  472 + .then((response) => {
  473 + this.comment = null;
  474 + this.getComment();
  475 + console.log(response);
  476 + })
  477 + .catch((error) => {
  478 + if (error.response) {
  479 + this.$toaster.error(error.response.data.message);
  480 + }
  481 + });
  482 + },
  483 + createChildComment(cmnt) {
  484 + console.log(cmnt,"===", this.comment);
  485 + var obj = {
  486 + caseStudyId: this.currentSlideData.caseStudyId,
  487 + slideId: this.currentSlideData.slideId,
  488 + comment: this.comment,
  489 + parentId: cmnt._id,
  490 +
  491 + };
  492 + axios
  493 + .post("/bounceBoard/comment", obj, {
  494 + headers: {
  495 + Authorization: "Bearer " + this.usertoken,
  496 + },
  497 + })
  498 + .then((response) => {
  499 + this.comment = null;
  500 + this.discardRply(cmnt);
  501 + this.getComment();
  502 + console.log(response);
  503 + })
  504 + .catch((error) => {
  505 + if (error.response) {
  506 + this.$toaster.error(error.response.data.message);
  507 + }
  508 + });
  509 + },
  510 + getComment() {
  511 + axios
  512 + .get(
  513 + `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
  514 + {
  515 + headers: {
  516 + Authorization: "Bearer " + this.usertoken,
  517 + },
  518 + }
  519 + )
  520 + .then((response) => {
  521 + console.log(response.data);
  522 + var comments = [];
  523 + var keys = Object.keys(response.data.data)
  524 + response.data.data
  525 + keys.forEach((key_) => {
  526 + comments.push(response.data.data[key_])
  527 + });
  528 + comments.forEach((coment_)=>{
  529 + coment_.childInput = false;
  530 + });
  531 + console.log("comments",comments)
  532 + this.commentList = comments;
  533 + })
  534 + .catch((error) => console.log(error));
  535 + },
  536 + dateGenerator(curreDate){
  537 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  538 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  539 + var result = todayDate.diff(endDate, 'days');
  540 + return result;
  541 + },
490 542 goToLogin() {
491 543 this.$router.push("/");
492 544 },
493 545 goToSignUp() {
494 546 this.$router.push("/signup");
495 547 },
496   - chtbox_close(){
497   -$("#cht_box_close").removeClass("cht_close");
498   -$("#open_ct_box, .c_hide").show();
499   -$(".footer-top").addClass("white-bg");
500   - },
501   - open_ct_box(){
502   -$("#cht_box_close").addClass("cht_close");
503   -$("#open_ct_box, .c_hide").hide();
504   -$(".footer-top").removeClass("white-bg");
  548 + chtbox_close() {
  549 + $("#cht_box_close").removeClass("cht_close");
  550 + $("#open_ct_box, .c_hide").show();
  551 + $(".footer-top").addClass("white-bg");
  552 + },
  553 + open_ct_box() {
  554 + $("#cht_box_close").addClass("cht_close");
  555 + $("#open_ct_box, .c_hide").hide();
  556 + $(".footer-top").removeClass("white-bg");
  557 + },
  558 + eachRply(cmnt) {
  559 + cmnt.childInput = true;
  560 + this.parentInput = false;
  561 + },
  562 + discardRply(cmnt) {
  563 + cmnt.childInput = false;
  564 + this.parentInput = true;
  565 +
505 566 },
506   -eachRply(){
507   - var t = $(this).parent(".add_rply").hide();
508   -}
509 567 },
510 568 };
511 569 //
... ...
src/components/Profile.vue
... ... @@ -12,14 +12,14 @@
12 12  
13 13 <ul>
14 14 <li>
15   - <a href="#"
  15 + <a href="javasript:void(0);"
16 16 ><img src="../assets/images/replace.svg" /><span
17 17 >Replace Avatar</span
18 18 ></a
19 19 >
20 20 </li>
21 21 <li>
22   - <a href="#"
  22 + <a href="javasript:void(0);"
23 23 ><img src="../assets/images/randomise.svg" /><span
24 24 >Randomise Avatar</span
25 25 ></a
... ... @@ -295,7 +295,7 @@
295 295 <!-- profile -->
296 296 <div class="container-fluid inner-wrp">
297 297 <nav class="navbar navbar-expand-sm spotLight-nav">
298   - <a class="navbar-brand" href="#"
  298 + <a class="navbar-brand" href="javasript:void(0);"
299 299 ><img src="../assets/images/logo.png"
300 300 /></a>
301 301 <button
... ... @@ -315,23 +315,23 @@
315 315 <div class="collapse navbar-collapse" id="navbarsExample03">
316 316 <ul class="navbar-nav mr-auto">
317 317 <li class="nav-item active">
318   - <a class="nav-link" href="#">About</a>
  318 + <a class="nav-link" href="javasript:void(0);">About</a>
319 319 </li>
320 320 <li class="nav-item">
321   - <a class="nav-link" href="#">Masterclass</a>
  321 + <a class="nav-link" href="javasript:void(0);">Masterclass</a>
322 322 </li>
323 323 <li class="nav-item">
324   - <a class="nav-link" href="#">Stories</a>
  324 + <a class="nav-link" href="javasript:void(0);">Stories</a>
325 325 </li>
326 326 <li class="nav-item">
327   - <a class="nav-link" href="#">Library</a>
  327 + <a class="nav-link" href="javasript:void(0);">Library</a>
328 328 </li>
329 329 </ul>
330 330 </div>
331   - <div class="user-profile-photo common_color">
332   - <a href="javascript:void(0);" @click="userprofileshowDialog"
333   - ><img src="../assets/images/m-user.svg"
334   - /></a>
  331 + <a href="javasript:void(0);" class="update_profile"><span></span> Update Profile</a>
  332 + <div class="">
  333 +
  334 + <a href="javascript:void(0);" class="user-profile-photo common_color" @click="userprofileshowDialog"><img src="../assets/images/m-user.svg" /></a>
335 335 <div class="sub-menu-user" id="userprofileshow" style="display: none">
336 336 <ul>
337 337 <li>
... ... @@ -355,7 +355,7 @@
355 355 <div class="user-profile">
356 356 <h1>
357 357 {{ userData.firstName }} {{ userData.lastName }}
358   - <a href="#" class="tags">{{ userData.role }}</a>
  358 + <a href="javasript:void(0);" class="tags">{{ userData.role }}</a>
359 359 </h1>
360 360 <ul class="joined-info">
361 361 <li>
... ... @@ -365,10 +365,10 @@
365 365 <img src="../assets/images/u-info-icon.png" /> <span></span>
366 366 </li>
367 367 <li>
368   - <a href="#">{{ userData.karmaPoints }} Karma</a> <span></span>
  368 + <a href="javasript:void(0);">{{ userData.karmaPoints }} Karma</a> <span></span>
369 369 </li>
370 370 <li>
371   - <a href="#"
  371 + <a href="javasript:void(0);"
372 372 >Joined on
373 373 {{ moment(userData.createdAt).format("MMM YYYY") }}</a
374 374 >
... ... @@ -429,20 +429,21 @@
429 429 <div class="profile-data-wrp">
430 430 <div class="container-fluid data-wrp" id="case-study-0">
431 431 <div class="row" v-if="caseStudies.length == 0">
432   - <div class="col-lg-12">
433   - <div class="profile-buttons">
434   - <a
435   - href="javascript:void(0);"
436   - class="profile-sm-bt center-and-spc bt-active"
437   - @click="addProfileDialog"
438   - >Update Profile</a
439   - >
440   - <a href="#" class="profile-md-bt center-and-spc"
441   - >Explore Case-studies</a
442   - >
443   - <a href="#" class="profile-lg-bt">Publish Your Case Study</a>
444   - </div>
445   - </div>
  432 + <div class="col-6 col-lg-6">
  433 + <div class="full-w-height-profile ex-light seats_bg">
  434 + <a href="javasript:void(0);" class="profile-md-bt center-and-spc bt-spc-top">Explore Spotlights</a>
  435 + <p>Explore the spotlights others has put together</p>
  436 + </div><!-- full width -->
  437 + </div><!-- col 6 -->
  438 + <div class="col-6 col-lg-6">
  439 + <div class="full-w-height-profile ex-light spotlight_bg">
  440 + <img src="../assets/images/add-role.svg" class="add-role" />
  441 + <div class="clearfix"></div><!-- clearfix -->
  442 + <a href="javasript:void(0);" class="profile-md-bt center-and-spc">Publish Spotlight</a>
  443 + <p>Share your own insights through Spotlight</p>
  444 + </div><!-- full width -->
  445 + </div><!-- col 6 -->
  446 +
446 447 </div>
447 448  
448 449 <div class="profile-data-wrp" v-if="caseStudies.length != 0">
... ... @@ -456,7 +457,10 @@
456 457 <img :src="study.intro.logoURL" />
457 458 </div>
458 459 <div class="c-tag">
459   - <img src="../assets/images/c-tag.png" />
  460 + <img src="../assets/images/retake-blue.svg" v-if="study.intro.type == 'Retake'"/>
  461 + <img src="../assets/images/behind-blue.svg" v-if="study.intro.type == 'Behind-the-scenes'"/>
  462 + <img src="../assets/images/critique-blue.svg" v-if="study.intro.type == 'Critique'"/>
  463 + <img src="../assets/images/juxtapose-blue.svg" v-if="study.intro.type == 'Juxtapose'"/>
460 464 </div>
461 465 </div>
462 466 <!-- company detail-->
... ... @@ -473,12 +477,16 @@
473 477 {{ area }}
474 478 </span>
475 479 </p>
476   - <ul class="tags-list">
  480 + <ul class="tags-list" >
477 481 <li v-for="(tags, j) in study.insightTags" :key="j">
478   - <a href="#" class="cape-honey">{{ tags }}</a>
  482 + <a href="javasript:void(0);" class="insight-design" v-if="tags == 'Design'" >Design</a>
  483 + <a href="javasript:void(0);" class="insight-product" v-if="tags == 'Product'">Product</a>
  484 + <a href="javasript:void(0);" class="insight-marketing" v-if="tags == 'Marketing'">Marketing</a>
  485 + <a href="javasript:void(0);" class="insight-pricing" v-if="tags == 'Pricing'">Pricing</a>
  486 + <a href="javasript:void(0);" class="insight-psychology" v-if="tags == 'Psychology'">Psychology</a>
479 487 </li>
480   - <!-- <li><a href="#" class="rose-bud">Marketing</a></li>
481   - <li><a href="#" class="pattens-blue">Product</a></li> -->
  488 + <!-- <li><a href="javasript:void(0);" class="rose-bud">Marketing</a></li>
  489 + <li><a href="javasript:void(0);" class="pattens-blue">Product</a></li> -->
482 490 </ul>
483 491 <div class="clearfix"></div>
484 492 </div>
... ... @@ -502,13 +510,13 @@
502 510 <div class="replies-wrp">
503 511 <!-- <h1>PhonePe vs GooglePay <span>Critique</span></h1>
504 512 <ul class="joined-info">
505   - <li><a href="#">37D</a> <span></span></li>
  513 + <li><a href="javasript:void(0);">37D</a> <span></span></li>
506 514 <li><img src="../assets/images/heart.png" /></li>
507   - <li><a href="#"> 4</a></li>
  515 + <li><a href="javasript:void(0);"> 4</a></li>
508 516 <li class="comment-spc">
509 517 <img src="../assets/images/comment.svg" />
510 518 </li>
511   - <li><a href="#"> 6</a></li>
  519 + <li><a href="javasript:void(0);"> 6</a></li>
512 520 </ul>
513 521 <p>
514 522 I wonder what the difference between โ€œ<strong>
... ... @@ -673,6 +681,7 @@ export default {
673 681 payload: {
674 682 metaData: slides_.metaData,
675 683 comments: slides_.comments,
  684 + insight: slides_.insight?slides_.insight:null,
676 685 },
677 686 };
678 687 // slides_
... ... @@ -729,6 +738,22 @@ export default {
729 738 url: "SingleMobileScreenInsightTwo",
730 739 tempId: "T3_cqNIf7tuqL4jyON63dA7",
731 740 },
  741 + {
  742 + url: "TwoScreenWithoutInsight",
  743 + tempId: "T4_4QC8W7kIYnJtZ26Jt0Go",
  744 + },
  745 + {
  746 + url: "noscreenshotSingleautho",
  747 + tempId: "T5_za3c3sYgx7bVvtKz5r0e",
  748 + },
  749 + {
  750 + url: "SingleMobileScreenInsightOne",
  751 + tempId: "T6_za3c3sYgx7bVvtKz5sgf",
  752 + },
  753 + {
  754 + url: "TwoScreenWithInsight",
  755 + tempId: "T7_za3c3sYgx7bVvtKzasdf",
  756 + },
732 757 ];
733 758 var i = routes.findIndex((routes_) => routes_.tempId == tempId);
734 759 return routes[i].url;
... ...
src/components/SingleMobileInsight.vue
... ... @@ -16,9 +16,18 @@
16 16 <!-- menu wrapper -->
17 17 <div class="intro-startup">
18 18 <div class="single-mobileInsight">
  19 + <div class="top-area-blank"></div>
19 20 <img src="../assets/images/slide.png" class="slide-img" />
20 21 <div class="single-left-Insight-comments">
21   - <img src="../assets/images/author-thoughts.svg" class="author-thoughts" />
  22 + <div class="author-thoughts">
  23 +
  24 + <img
  25 + src="../assets/images/thoughts-upper.svg"
  26 + class="upper-th"
  27 + />
  28 + <img src="../assets/images/user.png" class="dynamic-thoughts"
  29 + />
  30 + </div><!-- user thoughts -->
22 31 <div class="single-author-li-comments">
23 32 <div class="a-intro-comments custom-c-style">
24 33 <p>I wonder what the difference between โ€œ <strong>Dunzo Assistant </strong>โ€ and โ€œ<strong>Pickup and Drop </strong>โ€ are. If they are the same, there are two โ€œcall to actionsโ€ for the same workflow</p>
... ...
src/components/SingleMobileScreenInsightOne.vue
... ... @@ -26,8 +26,7 @@
26 26 <div class="intro-startup">
27 27  
28 28  
29   -
30   - <!-- chat box -->
  29 + <!-- chat box -->
31 30 <div class="bounce-board-wrp" id="cht_box_close">
32 31 <div class="inner-wrp-bc">
33 32 <div class="bc-top-head">
... ... @@ -40,7 +39,6 @@
40 39 <button
41 40 type="button"
42 41 class="bc-sort-list dropdown-toggle"
43   -
44 42 data-toggle="dropdown"
45 43 aria-haspopup="true"
46 44 aria-expanded="false"
... ... @@ -48,9 +46,15 @@
48 46 BEST
49 47 </button>
50 48 <div class="dropdown-menu short_by">
51   - <a class="dropdown-item" href="#">BEST 1</a>
52   - <a class="dropdown-item" href="#">BEST 2</a>
53   - <a class="dropdown-item" href="#">BEST 3</a>
  49 + <a class="dropdown-item" href="javasript:void(0);"
  50 + >BEST 1</a
  51 + >
  52 + <a class="dropdown-item" href="javasript:void(0);"
  53 + >BEST 2</a
  54 + >
  55 + <a class="dropdown-item" href="javasript:void(0);"
  56 + >BEST 3</a
  57 + >
54 58 </div>
55 59 </div>
56 60 <a
... ... @@ -64,117 +68,49 @@
64 68 </div>
65 69 <!-- top head -->
66 70 <div class="bounce-board-body">
67   - <!-- <ul class="bounced-user-comments">
68   - <li class="bc_border">
69   - <div class="lbord"></div>
70   - <div class="parent-full-width parent_bg">
71   - <div class="full-width">
72   - <div class="b-user-head">
73   - <img src="../assets/images/b-user1.png" />
74   - <span class="head-content">wanderingirl </span>
75   - <ul>
76   - <li>
77   - <span></span
78   - ><img src="../assets/images/u-info-icon.png" />6pts
79   - </li>
80   - <li><span></span>3days ago</li>
81   - <li><span class="au">Author</span></li>
82   - </ul>
83   - </div>
84   - <p>
85   - I wonder what the difference between โ€œDunzo Assistantโ€
86   - and โ€œPickup and Dropโ€ are. If they are the same, there
87   - are two โ€œcall to actionsโ€ for the same workflow...
88   - </p>
89   - <div class="joined_wrapper">
90   - <ul class="joined-info info_bc_spc">
91   - <li>
92   - <img src="../assets/images/purple-heart.png" />
93   - </li>
94   - <li><a href="#"> 4</a></li>
95   - <li class="comment-spc">
96   - <img src="../assets/images/purple-comment.png" />
97   - </li>
98   - <li><a href="#"> 6</a></li>
99   - </ul>
100   - <div class="add_rply">
101   - <input type="text" placeholder="Add your reply" />
102   - </div>
103   - </div>
104   - </div>
105   - </div>
106   - <div class="child-full-width">
107   - <div class="full-width">
108   - <div class="b-user-head">
109   - <img src="../assets/images/b-user1.png" />
110   - <span class="head-content">Onenoisyboi </span>
111   - <ul>
112   - <li>
113   - <span></span
114   - ><img src="../assets/images/u-info-icon.png" />6pts
115   - </li>
116   - <li><span></span>3days ago</li>
117   - <li><span class="red">Mod</span></li>
118   - </ul>
119   - </div>
120   - <p>
121   - I really liked the palette of the icons dunzo has they
122   - dont match with my jeans
123   - </p>
124   - <div class="joined_wrapper">
125   - <ul class="joined-info info_bc_spc">
126   - <li>
127   - <img src="../assets/images/purple-heart.png" />
128   - </li>
129   - <li><a href="#"> 4</a></li>
130   - <li class="comment-spc">
131   - <img src="../assets/images/purple-comment.png" />
132   - </li>
133   - <li><a href="#"> 6</a></li>
134   - </ul>
135   - <div class="add_rply">
136   - <input type="text" placeholder="Add your reply" />
137   - </div>
138   - </div>
139   - </div>
140   - </div>
141   - </li>
142   - </ul> -->
  71 +
143 72 <!-- all user comments -->
144 73 <ul class="bounced-user-comments">
145   - <li class="bc_border" v-for="(cmnt, j) in currentSlideData.payload.comments" :key="j">
  74 + <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
146 75 <div class="bc_brd_l"></div>
147 76 <!-- border -->
148 77 <div class="parent-full-width">
149 78 <div class="full-width">
150 79 <div class="b-user-head">
151   - <img src="../assets/images/b-user1.png" />
152   - <span class="head-content">wanderingirl </span>
  80 + <img :src="cmnt.user.profilePic" />
  81 + <span class="head-content">{{ cmnt.user.name }} </span>
153 82 <ul>
154 83 <li>
155 84 <span></span
156   - ><img src="../assets/images/u-info-icon.png" />6pts
  85 + ><img src="../assets/images/u-info-icon.png" />{{
  86 + cmnt.user.karmaPoints
  87 + }}pts
157 88 </li>
158   - <li><span></span>3days ago</li>
  89 + <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
159 90 </ul>
160 91 </div>
161 92 <!-- header -->
162 93 <p>
163   - {{cmnt.comment}}
  94 + {{ cmnt.comment }}
164 95 </p>
165 96 <div class="joined_wrapper">
166 97 <ul class="joined-info info_bc_spc">
167 98 <li>
168 99 <img src="../assets/images/purple-heart.png" />
169 100 </li>
170   - <li><a href="#"> 0</a></li>
  101 + <li><a href="javasript:void(0);"> 0</a></li>
171 102 <li class="comment-spc">
172 103 <img src="../assets/images/purple-comment.png" />
173 104 </li>
174   - <li><a href="#"> 0</a></li>
  105 + <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
175 106 </ul>
176   - <div class="add_rply">
177   - <input type="text" placeholder="Add your reply" />
  107 + <div class="add_rply" v-if="!cmnt.childInput">
  108 + <input
  109 + type="text"
  110 + @click="eachRply(cmnt)"
  111 + class="add_Rply_C"
  112 + placeholder="Add your reply"
  113 + />
178 114 </div>
179 115 <!-- rly form -->
180 116 </div>
... ... @@ -182,50 +118,63 @@
182 118 </div>
183 119 <!-- full width -->
184 120 </div>
  121 + <div class="comments-footer each-ft" v-if="cmnt.childInput">
  122 + <textarea v-model="comment"></textarea>
  123 + <div class="comments-footer-wrp">
  124 + <a
  125 + @click="createChildComment(cmnt)"
  126 + href="javasript:void(0);"
  127 + class="add_comments_chat reply-Wdth"
  128 + >Reply</a
  129 + >
  130 + <a href="javasript:void(0);" class="discard_bt"
  131 + @click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
  132 + /></a>
  133 + </div>
  134 + </div>
185 135 <!-- parent -->
186   - <!-- <div class="child-full-width">
  136 + <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
187 137 <div class="full-width">
188 138 <div class="b-user-head">
189   - <img src="../assets/images/b-user1.png" />
190   - <span class="head-content">Onenoisyboi </span>
  139 + <img :src="childCmnt.user.profilePic" />
  140 + <span class="head-content">{{childCmnt.user.name }} </span>
191 141 <ul>
192 142 <li>
193 143 <span></span
194   - ><img src="../assets/images/u-info-icon.png" />6pts
  144 + ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
195 145 </li>
196   - <li><span></span>3days ago</li>
  146 + <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
197 147 </ul>
198 148 </div>
199 149 <p>
200   - I really liked the palette of the icons dunzo has they
201   - dont match with my jeans
  150 + {{childCmnt.comment}}
202 151 </p>
203 152 <div class="joined_wrapper">
204 153 <ul class="joined-info info_bc_spc">
205 154 <li>
206 155 <img src="../assets/images/purple-heart.png" />
207 156 </li>
208   - <li><a href="#"> 4</a></li>
209   - <li class="comment-spc">
210   - <img src="../assets/images/purple-comment.png" />
211   - </li>
212   - <li><a href="#"> 6</a></li>
  157 + <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
  158 +
213 159 </ul>
214   - <div class="add_rply">
215   - <input type="text" placeholder="Add your reply" />
216   - </div>
  160 +
217 161 </div>
218 162 </div>
219   - </div> -->
  163 + </div>
  164 + <!-- eree -->
220 165  
  166 + <!-- comments footer -->
221 167 </li>
222 168 </ul>
223 169 </div>
224 170 <!-- bounce board body -->
225   - <div class="comments-footer">
226   - <textarea></textarea>
  171 + <div class="comments-footer" v-if="parentInput">
  172 + <textarea v-model="comment"></textarea>
227 173 <div class="comments-footer-wrp">
228   - <a href="#" class="add_comments_chat"
  174 + <a
  175 + href="javasript:void(0);"
  176 + class="add_comments_chat"
  177 + @click="createComment"
229 178 ><img src="../assets/images/add-comment.svg" /> Comment</a
230 179 >
231 180 </div>
... ... @@ -238,29 +187,33 @@
238 187  
239 188  
240 189 <div class="single-mobileInsight">
241   - <img src="../assets/images/slide.png" class="slide-img" />
  190 + <div class="top-area-blank"></div>
  191 + <img :src="currentSlideData.payload.metaData.mobileImage" class="m-screen" />
242 192 <div class="single-left-Insight-comments">
  193 + <div class="author-thoughts">
  194 +
243 195 <img
244   - src="../assets/images/author-thoughts.svg"
245   - class="author-thoughts"
  196 + src="../assets/images/thoughts-upper.svg"
  197 + class="upper-th"
246 198 />
  199 + <img
  200 + :src="currentSlideData.payload.metaData.authorImage"
  201 + class="dynamic-thoughts"
  202 + />
  203 + </div><!-- user thoughts -->
247 204 <div class="single-author-li-comments">
248 205 <div class="a-intro-comments custom-c-style">
249 206 <p>
250   - I wonder what the difference between โ€œ
251   - <strong>Dunzo Assistant </strong>โ€ and โ€œ<strong
252   - >Pickup and Drop </strong
253   - >โ€ are. If they are the same, there are two โ€œcall to actionsโ€
254   - for the same workflow
  207 + {{currentSlideData.payload.comments[0].comment}}
255 208 </p>
256 209 <ul class="rly-comment-set">
257 210 <li>
258 211 <img src="../assets/images/color-heart.svg" />
259   - <a href="#">4</a>
  212 + <a href="javascript:void(0);">0</a>
260 213 </li>
261 214 <li>
262 215 <img src="../assets/images/rply.svg" />
263   - <a href="#">Reply</a>
  216 + <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
264 217 </li>
265 218 </ul>
266 219 </div>
... ... @@ -270,20 +223,16 @@
270 223 <div class="single-author-li-comments">
271 224 <div class="a-intro-comments custom-c-style">
272 225 <p>
273   - I wonder what the difference between โ€œ
274   - <strong>Dunzo Assistant </strong>โ€ and โ€œ<strong
275   - >Pickup and Drop </strong
276   - >โ€ are. If they are the same, there are two โ€œcall to actionsโ€
277   - for the same workflow
  226 + {{currentSlideData.payload.comments[1].comment}}
278 227 </p>
279 228 <ul class="rly-comment-set">
280 229 <li>
281 230 <img src="../assets/images/color-heart.svg" />
282   - <a href="#">4</a>
  231 + <a href="javascript:void(0);">0</a>
283 232 </li>
284 233 <li>
285 234 <img src="../assets/images/rply.svg" />
286   - <a href="#">Reply</a>
  235 + <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
287 236 </li>
288 237 </ul>
289 238 </div>
... ... @@ -297,10 +246,10 @@
297 246 <div class="a-intro-comments custom-selected-style">
298 247 <img src="../assets/images/rect.svg" class="rect" />
299 248 <div class="top-wrp">
300   - PRODUCT Insight
  249 + {{currentSlideData.payload.insight.tag}} Insight
301 250 <a href="#"><img src="../assets/images/link-red.svg" /></a>
302 251 </div>
303   - <div class="top-head">
  252 + <!-- <div class="top-head">
304 253 Decide on using multiple call to action vs single call to
305 254 action depending on the stage of the user journey
306 255 </div>
... ... @@ -312,9 +261,11 @@
312 261 <strong> engage stage </strong>, it may be better to use a
313 262 single CTA for each use case in order to
314 263 <strong> avoid ambiguity.</strong>
315   - </p>
  264 + </p> -->
  265 + <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
  266 + <p>{{currentSlideData.payload.insight.description}}
316 267 <div class="footer">
317   - <a href="#" class="cit-16">16 Citations</a>
  268 + <a href="#" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
318 269 <a href="#" class="ft-share"
319 270 ><img src="../assets/images/reply-red.svg" /> Share from
320 271 library</a
... ... @@ -329,67 +280,65 @@
329 280 <!-- single mobile Right insight -->
330 281 </div>
331 282 <!-- Single Mobile Insight -->
  283 + <!-- single author comments -->
332 284 <div class="footer-nav">
333 285 <div class="footer-top white-bg">
334 286 <div class="row">
335   - <div class="col-6 col-sm-7 col-md-7 col-lg-6">
  287 + <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
336 288 <div class="row h-100p">
337   - <div class="col-4 col-sm-5 col-md-4 col-lg-4 col-xl-4">
338   - <ul class="top-intro-bt">
339   - <li>
340   - <a href="#"
341   - ><img src="../assets/images/skip-prev.svg" /> Prev</a
342   - >
343   - </li>
344   - <li>
345   - <a href="#"
346   - ><img src="../assets/images/skip-next.svg" /> Skip to
347   - next slide</a
348   - >
349   - </li>
350   - </ul>
351   - </div>
352 289 <div
353   - class="col-8 col-sm-7 col-md-5 col-lg-8 col-xl-8 bord-r c_hide"
  290 + class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
354 291 >
355   - <div class="ft-comments-group no-comment-count">
356   - <div class="row">
357   - <div class="col-12">
358   - <img
359   - src="../assets/images/u-comments.svg"
360   - class="no-comments-img"
361   - />
362   - <div class="comments-detail">
363   - <span class="no-c-yet">No comments yet</span>
364   - <p>
365   - Be the first one to post a comment to start a
366   - discussion
367   - </p>
368   - </div>
369   - <!-- comments detail -->
370   - </div>
  292 + <div class="ft-comments-group testi-photos-ct">
  293 + <div class="c-with-photos">
  294 + <span class="count-comments"
  295 + >{{ commentList.length - 1 }}+ Comments</span
  296 + ><!-- count commets -->
  297 + <ul class="comments-photos">
  298 + <li><img src="../assets/images/c-photo-1.png" /></li>
  299 + <li><img src="../assets/images/c-photo-2.png" /></li>
  300 + <li><img src="../assets/images/c-photo-3.png" /></li>
  301 + </ul>
  302 + <!-- comment photos -->
  303 + </div>
  304 + <div class="comments-detail all-c-space">
  305 + <span
  306 + >{{ commentList[commentList.length - 1].user.name }}
  307 + <a href="javascript:void(0);" @click="open_ct_box"
  308 + >View All</a
  309 + ></span
  310 + >
  311 + <p>
  312 + <!-- I wonder what the difference between โ€œDunzo Assistantโ€
  313 + and โ€œPickup and Drop... -->
  314 + {{ commentList[commentList.length - 1].comment }}
  315 + </p>
371 316 </div>
  317 + <!-- comments detail -->
372 318 </div>
373 319 <!-- comments Group -->
374 320 </div>
375 321 </div>
376 322 </div>
377   - <div class="col-6 col-sm-5 col-md-6 col-lg-6">
  323 + <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
378 324 <div class="comment-frm no-c-frm">
379 325 <div class="row">
380 326 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
381   - <div class="form-group frm-wdth">
  327 + <div class="form-group frm-wdth addfrm-spc">
382 328 <input
383 329 type="text"
384 330 class="form-control"
385   - @click="open_ct_box"
386 331 placeholder="Kathy, Something on your mind?"
387 332 id="open_ct_box"
  333 + v-model="comment"
388 334 />
389 335 </div>
390 336 </div>
391 337 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
392   - <a href="#" class="add-comment"
  338 + <a
  339 + href="javascript:void(0);"
  340 + @click="createComment"
  341 + class="add-comment"
393 342 ><img src="../assets/images/add-comment.svg" />
394 343 Comment</a
395 344 >
... ... @@ -398,6 +347,22 @@
398 347 <!-- comment from -->
399 348 </div>
400 349 </div>
  350 + <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
  351 + <ul class="top-intro-bt">
  352 + <li>
  353 + <a href="javascript:void(0);" @click="goBack"
  354 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  355 + >
  356 + </li>
  357 + <li>
  358 + <a href="javascript:void(0);" @click="goNext"
  359 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  360 + slide</a
  361 + >
  362 + </li>
  363 + </ul>
  364 + </div>
  365 + <!-- buttons list -->
401 366 </div>
402 367 </div>
403 368 <!-- footer top -->
... ... @@ -420,7 +385,8 @@
420 385 <script>
421 386 import Vue from "vue";
422 387 import router from "../router";
423   -
  388 +import axios from "axios";
  389 +import moment from 'moment';
424 390 export default {
425 391 name: "SingleMobileScreenInsightOne",
426 392  
... ... @@ -429,16 +395,27 @@ export default {
429 395 allSlide: [],
430 396 currentSlideIndex: null,
431 397 currentSlideData: null,
  398 + //
  399 + usertoken: null,
  400 + commentList: [],
  401 + comment: null,
  402 + parentInput: true,
432 403 };
433 404 },
434 405 mounted() {
435   - var allSlideData = localStorage.getItem(
  406 + var allSlideData = localStorage.getItem(
436 407 "spotlight_slide" + this.$route.params.caseStudyId
437 408 );
438 409 if (allSlideData) {
439 410 this.allSlide = JSON.parse(allSlideData);
440 411 this.getCurrentSlideData();
441 412 }
  413 + var userdata = localStorage.getItem("spotlight_usertoken");
  414 + if (userdata) {
  415 + userdata = JSON.parse(userdata);
  416 + this.usertoken = userdata.token;
  417 + this.getComment();
  418 + }
442 419 },
443 420 methods: {
444 421 getCurrentSlideData() {
... ... @@ -469,6 +446,90 @@ export default {
469 446 },
470 447 });
471 448 },
  449 + createComment() {
  450 + console.log("===", this.comment);
  451 + var obj = {
  452 + caseStudyId: this.currentSlideData.caseStudyId,
  453 + slideId: this.currentSlideData.slideId,
  454 + comment: this.comment,
  455 +
  456 + };
  457 + axios
  458 + .post("/bounceBoard/comment", obj, {
  459 + headers: {
  460 + Authorization: "Bearer " + this.usertoken,
  461 + },
  462 + })
  463 + .then((response) => {
  464 + this.comment = null;
  465 + this.getComment();
  466 + console.log(response);
  467 + })
  468 + .catch((error) => {
  469 + if (error.response) {
  470 + this.$toaster.error(error.response.data.message);
  471 + }
  472 + });
  473 + },
  474 + createChildComment(cmnt) {
  475 + console.log(cmnt,"===", this.comment);
  476 + var obj = {
  477 + caseStudyId: this.currentSlideData.caseStudyId,
  478 + slideId: this.currentSlideData.slideId,
  479 + comment: this.comment,
  480 + parentId: cmnt._id,
  481 +
  482 + };
  483 + axios
  484 + .post("/bounceBoard/comment", obj, {
  485 + headers: {
  486 + Authorization: "Bearer " + this.usertoken,
  487 + },
  488 + })
  489 + .then((response) => {
  490 + this.comment = null;
  491 + this.discardRply(cmnt);
  492 + this.getComment();
  493 + console.log(response);
  494 + })
  495 + .catch((error) => {
  496 + if (error.response) {
  497 + this.$toaster.error(error.response.data.message);
  498 + }
  499 + });
  500 + },
  501 + getComment() {
  502 + axios
  503 + .get(
  504 + `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
  505 + {
  506 + headers: {
  507 + Authorization: "Bearer " + this.usertoken,
  508 + },
  509 + }
  510 + )
  511 + .then((response) => {
  512 + console.log(response.data);
  513 + var comments = [];
  514 + var keys = Object.keys(response.data.data)
  515 + response.data.data
  516 + keys.forEach((key_) => {
  517 + comments.push(response.data.data[key_])
  518 + });
  519 + comments.forEach((coment_)=>{
  520 + coment_.childInput = false;
  521 + });
  522 + console.log("comments",comments)
  523 + this.commentList = comments;
  524 + })
  525 + .catch((error) => console.log(error));
  526 + },
  527 + dateGenerator(curreDate){
  528 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  529 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  530 + var result = todayDate.diff(endDate, 'days');
  531 + return result;
  532 + },
472 533 goToLogin() {
473 534 this.$router.push("/");
474 535 },
... ... @@ -485,6 +546,16 @@ export default {
485 546 $("#open_ct_box, .c_hide").hide();
486 547 $(".footer-top").removeClass("white-bg");
487 548 },
  549 + eachRply(cmnt) {
  550 + cmnt.childInput = true;
  551 + this.parentInput = false;
  552 + },
  553 + discardRply(cmnt) {
  554 + cmnt.childInput = false;
  555 + this.parentInput = true;
  556 +
  557 + },
488 558 },
489 559 };
  560 +//
490 561 </script>
... ...
src/components/SingleMobileScreenInsightTwo.vue
... ... @@ -24,10 +24,7 @@
24 24 </nav>
25 25 <!-- menu wrapper -->
26 26 <div class="intro-startup">
27   -
28   -
29   -
30   - <!-- chat box -->
  27 + <!-- chat box -->
31 28 <div class="bounce-board-wrp" id="cht_box_close">
32 29 <div class="inner-wrp-bc">
33 30 <div class="bc-top-head">
... ... @@ -40,7 +37,6 @@
40 37 <button
41 38 type="button"
42 39 class="bc-sort-list dropdown-toggle"
43   -
44 40 data-toggle="dropdown"
45 41 aria-haspopup="true"
46 42 aria-expanded="false"
... ... @@ -48,9 +44,15 @@
48 44 BEST
49 45 </button>
50 46 <div class="dropdown-menu short_by">
51   - <a class="dropdown-item" href="#">BEST 1</a>
52   - <a class="dropdown-item" href="#">BEST 2</a>
53   - <a class="dropdown-item" href="#">BEST 3</a>
  47 + <a class="dropdown-item" href="javasript:void(0);"
  48 + >BEST 1</a
  49 + >
  50 + <a class="dropdown-item" href="javasript:void(0);"
  51 + >BEST 2</a
  52 + >
  53 + <a class="dropdown-item" href="javasript:void(0);"
  54 + >BEST 3</a
  55 + >
54 56 </div>
55 57 </div>
56 58 <a
... ... @@ -64,117 +66,49 @@
64 66 </div>
65 67 <!-- top head -->
66 68 <div class="bounce-board-body">
67   - <!-- <ul class="bounced-user-comments">
68   - <li class="bc_border">
69   - <div class="lbord"></div>
70   - <div class="parent-full-width parent_bg">
71   - <div class="full-width">
72   - <div class="b-user-head">
73   - <img src="../assets/images/b-user1.png" />
74   - <span class="head-content">wanderingirl </span>
75   - <ul>
76   - <li>
77   - <span></span
78   - ><img src="../assets/images/u-info-icon.png" />6pts
79   - </li>
80   - <li><span></span>3days ago</li>
81   - <li><span class="au">Author</span></li>
82   - </ul>
83   - </div>
84   - <p>
85   - I wonder what the difference between โ€œDunzo Assistantโ€
86   - and โ€œPickup and Dropโ€ are. If they are the same, there
87   - are two โ€œcall to actionsโ€ for the same workflow...
88   - </p>
89   - <div class="joined_wrapper">
90   - <ul class="joined-info info_bc_spc">
91   - <li>
92   - <img src="../assets/images/purple-heart.png" />
93   - </li>
94   - <li><a href="#"> 4</a></li>
95   - <li class="comment-spc">
96   - <img src="../assets/images/purple-comment.png" />
97   - </li>
98   - <li><a href="#"> 6</a></li>
99   - </ul>
100   - <div class="add_rply">
101   - <input type="text" placeholder="Add your reply" />
102   - </div>
103   - </div>
104   - </div>
105   - </div>
106   - <div class="child-full-width">
107   - <div class="full-width">
108   - <div class="b-user-head">
109   - <img src="../assets/images/b-user1.png" />
110   - <span class="head-content">Onenoisyboi </span>
111   - <ul>
112   - <li>
113   - <span></span
114   - ><img src="../assets/images/u-info-icon.png" />6pts
115   - </li>
116   - <li><span></span>3days ago</li>
117   - <li><span class="red">Mod</span></li>
118   - </ul>
119   - </div>
120   - <p>
121   - I really liked the palette of the icons dunzo has they
122   - dont match with my jeans
123   - </p>
124   - <div class="joined_wrapper">
125   - <ul class="joined-info info_bc_spc">
126   - <li>
127   - <img src="../assets/images/purple-heart.png" />
128   - </li>
129   - <li><a href="#"> 4</a></li>
130   - <li class="comment-spc">
131   - <img src="../assets/images/purple-comment.png" />
132   - </li>
133   - <li><a href="#"> 6</a></li>
134   - </ul>
135   - <div class="add_rply">
136   - <input type="text" placeholder="Add your reply" />
137   - </div>
138   - </div>
139   - </div>
140   - </div>
141   - </li>
142   - </ul> -->
  69 +
143 70 <!-- all user comments -->
144 71 <ul class="bounced-user-comments">
145   - <li class="bc_border" v-for="(cmnt, j) in currentSlideData.payload.comments" :key="j">
  72 + <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
146 73 <div class="bc_brd_l"></div>
147 74 <!-- border -->
148 75 <div class="parent-full-width">
149 76 <div class="full-width">
150 77 <div class="b-user-head">
151   - <img src="../assets/images/b-user1.png" />
152   - <span class="head-content">wanderingirl </span>
  78 + <img :src="cmnt.user.profilePic" />
  79 + <span class="head-content">{{ cmnt.user.name }} </span>
153 80 <ul>
154 81 <li>
155 82 <span></span
156   - ><img src="../assets/images/u-info-icon.png" />6pts
  83 + ><img src="../assets/images/u-info-icon.png" />{{
  84 + cmnt.user.karmaPoints
  85 + }}pts
157 86 </li>
158   - <li><span></span>3days ago</li>
  87 + <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
159 88 </ul>
160 89 </div>
161 90 <!-- header -->
162 91 <p>
163   - {{cmnt.comment}}
  92 + {{ cmnt.comment }}
164 93 </p>
165 94 <div class="joined_wrapper">
166 95 <ul class="joined-info info_bc_spc">
167 96 <li>
168 97 <img src="../assets/images/purple-heart.png" />
169 98 </li>
170   - <li><a href="#"> 0</a></li>
  99 + <li><a href="javasript:void(0);"> 0</a></li>
171 100 <li class="comment-spc">
172 101 <img src="../assets/images/purple-comment.png" />
173 102 </li>
174   - <li><a href="#"> 0</a></li>
  103 + <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
175 104 </ul>
176   - <div class="add_rply">
177   - <input type="text" placeholder="Add your reply" />
  105 + <div class="add_rply" v-if="!cmnt.childInput">
  106 + <input
  107 + type="text"
  108 + @click="eachRply(cmnt)"
  109 + class="add_Rply_C"
  110 + placeholder="Add your reply"
  111 + />
178 112 </div>
179 113 <!-- rly form -->
180 114 </div>
... ... @@ -182,50 +116,63 @@
182 116 </div>
183 117 <!-- full width -->
184 118 </div>
  119 + <div class="comments-footer each-ft" v-if="cmnt.childInput">
  120 + <textarea v-model="comment"></textarea>
  121 + <div class="comments-footer-wrp">
  122 + <a
  123 + @click="createChildComment(cmnt)"
  124 + href="javasript:void(0);"
  125 + class="add_comments_chat reply-Wdth"
  126 + >Reply</a
  127 + >
  128 + <a href="javasript:void(0);" class="discard_bt"
  129 + @click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
  130 + /></a>
  131 + </div>
  132 + </div>
185 133 <!-- parent -->
186   - <!-- <div class="child-full-width">
  134 + <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
187 135 <div class="full-width">
188 136 <div class="b-user-head">
189   - <img src="../assets/images/b-user1.png" />
190   - <span class="head-content">Onenoisyboi </span>
  137 + <img :src="childCmnt.user.profilePic" />
  138 + <span class="head-content">{{childCmnt.user.name }} </span>
191 139 <ul>
192 140 <li>
193 141 <span></span
194   - ><img src="../assets/images/u-info-icon.png" />6pts
  142 + ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
195 143 </li>
196   - <li><span></span>3days ago</li>
  144 + <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
197 145 </ul>
198 146 </div>
199 147 <p>
200   - I really liked the palette of the icons dunzo has they
201   - dont match with my jeans
  148 + {{childCmnt.comment}}
202 149 </p>
203 150 <div class="joined_wrapper">
204 151 <ul class="joined-info info_bc_spc">
205 152 <li>
206 153 <img src="../assets/images/purple-heart.png" />
207 154 </li>
208   - <li><a href="#"> 4</a></li>
209   - <li class="comment-spc">
210   - <img src="../assets/images/purple-comment.png" />
211   - </li>
212   - <li><a href="#"> 6</a></li>
  155 + <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
  156 +
213 157 </ul>
214   - <div class="add_rply">
215   - <input type="text" placeholder="Add your reply" />
216   - </div>
  158 +
217 159 </div>
218 160 </div>
219   - </div> -->
  161 + </div>
  162 + <!-- eree -->
220 163  
  164 + <!-- comments footer -->
221 165 </li>
222 166 </ul>
223 167 </div>
224 168 <!-- bounce board body -->
225   - <div class="comments-footer">
226   - <textarea></textarea>
  169 + <div class="comments-footer" v-if="parentInput">
  170 + <textarea v-model="comment"></textarea>
227 171 <div class="comments-footer-wrp">
228   - <a href="#" class="add_comments_chat"
  172 + <a
  173 + href="javasript:void(0);"
  174 + class="add_comments_chat"
  175 + @click="createComment"
229 176 ><img src="../assets/images/add-comment.svg" /> Comment</a
230 177 >
231 178 </div>
... ... @@ -236,23 +183,23 @@
236 183 <!-- bounceboard wrp -->
237 184 <!-- chat box -->
238 185  
239   -
240 186 <div class="single-mobileInsight">
  187 + <div class="top-area-blank"></div>
241 188 <!-- <img src="../assets/images/slide.png" class="slide-img" /> -->
242   - <img :src="currentSlideData.payload.metaData.mobileImage" class="slide-img" />
  189 + <img
  190 + :src="currentSlideData.payload.metaData.mobileImage"
  191 + class="m-screen"
  192 + />
243 193 <div class="single-left-Insight-comments">
244 194 <div class="author-thoughts">
245   -
246   - <img
247   - src="../assets/images/thoughts-upper.svg"
248   - class="upper-th"
249   - />
  195 + <img src="../assets/images/thoughts-upper.svg" class="upper-th" />
250 196 <img
251   - :src="currentSlideData.payload.metaData.authorImage"
252   - class="dynamic-thoughts"
253   - />
254   - </div><!-- user thoughts -->
255   -
  197 + :src="currentSlideData.payload.metaData.authorImage"
  198 + class="dynamic-thoughts"
  199 + />
  200 + </div>
  201 + <!-- user thoughts -->
  202 +
256 203 <div class="single-author-li-comments">
257 204 <div class="a-intro-comments custom-c-style">
258 205 <!-- <p>
... ... @@ -262,7 +209,7 @@
262 209 >โ€ are. If they are the same, there are two โ€œcall to actionsโ€
263 210 for the same workflow
264 211 </p> -->
265   - <p> {{currentSlideData.payload.comments[0].comment}} </p>
  212 + <p>{{ currentSlideData.payload.comments[0].comment }}</p>
266 213 <ul class="rly-comment-set">
267 214 <li>
268 215 <img src="../assets/images/color-heart.svg" />
... ... @@ -270,7 +217,7 @@
270 217 </li>
271 218 <li>
272 219 <img src="../assets/images/rply.svg" />
273   - <a href="javascript:void(0);">Reply</a>
  220 + <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
274 221 </li>
275 222 </ul>
276 223 </div>
... ... @@ -280,7 +227,7 @@
280 227 <div class="single-author-li-comments">
281 228 <div class="a-intro-comments custom-c-style">
282 229 <p>
283   - {{currentSlideData.payload.comments[1].comment}}
  230 + {{ currentSlideData.payload.comments[1].comment }}
284 231 </p>
285 232 <ul class="rly-comment-set">
286 233 <li>
... ... @@ -299,10 +246,10 @@
299 246 </div>
300 247 <!-- single mobile Left insight -->
301 248 <div class="c-product-insight-wrp two-screen-spc-top">
302   - <div class="single-author-li-comments">
303   - <div class="a-intro-comments ">
  249 + <div class="single-author-li-comments">
  250 + <div class="a-intro-comments">
304 251 <p>
305   - {{currentSlideData.payload.comments[2].comment}}
  252 + {{ currentSlideData.payload.comments[2].comment }}
306 253 </p>
307 254 <ul class="rly-comment-set">
308 255 <li>
... ... @@ -317,10 +264,10 @@
317 264 </div>
318 265 <!-- comments box -->
319 266 </div>
320   - <div class="single-author-li-comments">
  267 + <div class="single-author-li-comments">
321 268 <div class="a-intro-comments">
322 269 <p>
323   - {{currentSlideData.payload.comments[3].comment}}
  270 + {{ currentSlideData.payload.comments[3].comment }}
324 271 </p>
325 272 <ul class="rly-comment-set">
326 273 <li>
... ... @@ -339,32 +286,41 @@
339 286 </div>
340 287 <!-- single mobile Right insight -->
341 288 </div>
342   - <!-- Single Mobile Insight -->
343   - <div class="footer-nav">
  289 + <!-- single author comments -->
  290 + <div class="footer-nav">
344 291 <div class="footer-top white-bg">
345 292 <div class="row">
346 293 <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
347 294 <div class="row h-100p">
348   -
349   - <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r ">
350   - <div class="ft-comments-group no-comment-count">
351   - <div class="row">
352   - <div class="col-12">
353   - <img
354   - src="../assets/images/u-comments.svg"
355   - class="no-comments-img"
356   - />
357   - <div class="comments-detail">
358   - <!-- <span class="no-c-yet">No comments yet</span> -->
359   - <p>
360   - <!-- Be the first one to post a comment to start a
361   - discussion -->
362   - {{currentSlideData.payload.comments.length - 1}}+ Comments
363   - </p>
364   - </div>
365   - <!-- comments detail -->
366   - </div>
  295 + <div
  296 + class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
  297 + >
  298 + <div class="ft-comments-group testi-photos-ct">
  299 + <div class="c-with-photos">
  300 + <span class="count-comments"
  301 + >{{ commentList.length - 1 }}+ Comments</span
  302 + ><!-- count commets -->
  303 + <ul class="comments-photos">
  304 + <li><img src="../assets/images/c-photo-1.png" /></li>
  305 + <li><img src="../assets/images/c-photo-2.png" /></li>
  306 + <li><img src="../assets/images/c-photo-3.png" /></li>
  307 + </ul>
  308 + <!-- comment photos -->
367 309 </div>
  310 + <div class="comments-detail all-c-space">
  311 + <span
  312 + >{{ commentList[commentList.length - 1].user.name }}
  313 + <a href="javascript:void(0);" @click="open_ct_box"
  314 + >View All</a
  315 + ></span
  316 + >
  317 + <p>
  318 + <!-- I wonder what the difference between โ€œDunzo Assistantโ€
  319 + and โ€œPickup and Drop... -->
  320 + {{ commentList[commentList.length - 1].comment }}
  321 + </p>
  322 + </div>
  323 + <!-- comments detail -->
368 324 </div>
369 325 <!-- comments Group -->
370 326 </div>
... ... @@ -375,16 +331,20 @@
375 331 <div class="row">
376 332 <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
377 333 <div class="form-group frm-wdth addfrm-spc">
378   -
379 334 <input
380 335 type="text"
381 336 class="form-control"
382   - placeholder="Kathy, Something on your mind?" id="open_ct_box"
  337 + placeholder="Kathy, Something on your mind?"
  338 + id="open_ct_box"
  339 + v-model="comment"
383 340 />
384 341 </div>
385 342 </div>
386 343 <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
387   - <a href="javascript:void(0);" @click="open_ct_box" class="add-comment"
  344 + <a
  345 + href="javascript:void(0);"
  346 + @click="createComment"
  347 + class="add-comment"
388 348 ><img src="../assets/images/add-comment.svg" />
389 349 Comment</a
390 350 >
... ... @@ -393,21 +353,22 @@
393 353 <!-- comment from -->
394 354 </div>
395 355 </div>
396   - <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
397   - <ul class="top-intro-bt">
398   - <li>
399   - <a href="javascript:void(0);" @click="goBack"
400   - ><img src="../assets/images/skip-prev.svg" /> Prev</a
401   - >
402   - </li>
403   - <li>
404   - <a href="javascript:void(0);" @click="goNext"
405   - ><img src="../assets/images/skip-next.svg" /> Skip to
406   - next slide</a
407   - >
408   - </li>
409   - </ul>
410   - </div><!-- buttons list -->
  356 + <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
  357 + <ul class="top-intro-bt">
  358 + <li>
  359 + <a href="javascript:void(0);" @click="goBack"
  360 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  361 + >
  362 + </li>
  363 + <li>
  364 + <a href="javascript:void(0);" @click="goNext"
  365 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  366 + slide</a
  367 + >
  368 + </li>
  369 + </ul>
  370 + </div>
  371 + <!-- buttons list -->
411 372 </div>
412 373 </div>
413 374 <!-- footer top -->
... ... @@ -420,7 +381,6 @@
420 381 <!-- footer top -->
421 382 </div>
422 383 <!-- footer -->
423   -
424 384 </div>
425 385 <!-- body wrapper -->
426 386 </div>
... ... @@ -431,6 +391,8 @@
431 391 <script>
432 392 import Vue from "vue";
433 393 import router from "../router";
  394 +import axios from "axios";
  395 +import moment from 'moment';
434 396  
435 397 export default {
436 398 name: "SingleMobileScreenInsightTwo",
... ... @@ -440,6 +402,11 @@ export default {
440 402 allSlide: [],
441 403 currentSlideIndex: null,
442 404 currentSlideData: null,
  405 + //
  406 + usertoken: null,
  407 + commentList: [],
  408 + comment: null,
  409 + parentInput: true,
443 410 };
444 411 },
445 412 mounted() {
... ... @@ -450,6 +417,12 @@ export default {
450 417 this.allSlide = JSON.parse(allSlideData);
451 418 this.getCurrentSlideData();
452 419 }
  420 + var userdata = localStorage.getItem("spotlight_usertoken");
  421 + if (userdata) {
  422 + userdata = JSON.parse(userdata);
  423 + this.usertoken = userdata.token;
  424 + this.getComment();
  425 + }
453 426 },
454 427 methods: {
455 428 getCurrentSlideData() {
... ... @@ -480,6 +453,90 @@ export default {
480 453 },
481 454 });
482 455 },
  456 + createComment() {
  457 + console.log("===", this.comment);
  458 + var obj = {
  459 + caseStudyId: this.currentSlideData.caseStudyId,
  460 + slideId: this.currentSlideData.slideId,
  461 + comment: this.comment,
  462 +
  463 + };
  464 + axios
  465 + .post("/bounceBoard/comment", obj, {
  466 + headers: {
  467 + Authorization: "Bearer " + this.usertoken,
  468 + },
  469 + })
  470 + .then((response) => {
  471 + this.comment = null;
  472 + this.getComment();
  473 + console.log(response);
  474 + })
  475 + .catch((error) => {
  476 + if (error.response) {
  477 + this.$toaster.error(error.response.data.message);
  478 + }
  479 + });
  480 + },
  481 + createChildComment(cmnt) {
  482 + console.log(cmnt,"===", this.comment);
  483 + var obj = {
  484 + caseStudyId: this.currentSlideData.caseStudyId,
  485 + slideId: this.currentSlideData.slideId,
  486 + comment: this.comment,
  487 + parentId: cmnt._id,
  488 +
  489 + };
  490 + axios
  491 + .post("/bounceBoard/comment", obj, {
  492 + headers: {
  493 + Authorization: "Bearer " + this.usertoken,
  494 + },
  495 + })
  496 + .then((response) => {
  497 + this.comment = null;
  498 + this.discardRply(cmnt);
  499 + this.getComment();
  500 + console.log(response);
  501 + })
  502 + .catch((error) => {
  503 + if (error.response) {
  504 + this.$toaster.error(error.response.data.message);
  505 + }
  506 + });
  507 + },
  508 + getComment() {
  509 + axios
  510 + .get(
  511 + `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
  512 + {
  513 + headers: {
  514 + Authorization: "Bearer " + this.usertoken,
  515 + },
  516 + }
  517 + )
  518 + .then((response) => {
  519 + console.log(response.data);
  520 + var comments = [];
  521 + var keys = Object.keys(response.data.data)
  522 + response.data.data
  523 + keys.forEach((key_) => {
  524 + comments.push(response.data.data[key_])
  525 + });
  526 + comments.forEach((coment_)=>{
  527 + coment_.childInput = false;
  528 + });
  529 + console.log("comments",comments)
  530 + this.commentList = comments;
  531 + })
  532 + .catch((error) => console.log(error));
  533 + },
  534 + dateGenerator(curreDate){
  535 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  536 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  537 + var result = todayDate.diff(endDate, 'days');
  538 + return result;
  539 + },
483 540 goToLogin() {
484 541 this.$router.push("/");
485 542 },
... ... @@ -496,6 +553,16 @@ export default {
496 553 $("#open_ct_box, .c_hide").hide();
497 554 $(".footer-top").removeClass("white-bg");
498 555 },
  556 + eachRply(cmnt) {
  557 + cmnt.childInput = true;
  558 + this.parentInput = false;
  559 + },
  560 + discardRply(cmnt) {
  561 + cmnt.childInput = false;
  562 + this.parentInput = true;
  563 +
  564 + },
499 565 },
500 566 };
  567 +//
501 568 </script>
... ...
src/components/TwoScreenWithInsight.vue
1 1 <template>
2 2 <main class="landing-page">
3   -
4 3 <div class="container-fluid episode-intro">
5   - <nav class="navbar navbar-expand-sm spotLight-nav">
6   - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>
7   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
  4 + <nav class="navbar navbar-expand-sm spotLight-nav">
  5 + <a class="navbar-brand" href="#"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
8 17 <span class="navbar-toggler-icon"></span>
9 18 <span class="navbar-toggler-icon"></span>
10 19 <span class="navbar-toggler-icon"></span>
11 20 </button>
12 21 <div class="user-profile-photo insights-profile">
13   - <a href="#"><img src="../assets/images/user.png"></a>
  22 + <a href="#"><img src="../assets/images/user.png" /></a>
14 23 </div>
15 24 </nav>
16 25 <!-- menu wrapper -->
17   - <div class="intro-startup">
  26 + <div class="intro-startup">
  27 + <!-- chat box -->
  28 + <div class="bounce-board-wrp" id="cht_box_close">
  29 + <div class="inner-wrp-bc">
  30 + <div class="bc-top-head">
  31 + <span class="bc-head">
  32 + <img src="../assets/images/bounce-icon.svg" /> Bounce Board
  33 + </span>
  34 + <div class="action-sort">
  35 + <span class="sort-by">SORT BY</span>
  36 + <div class="btn-group">
  37 + <button
  38 + type="button"
  39 + class="bc-sort-list dropdown-toggle"
  40 + data-toggle="dropdown"
  41 + aria-haspopup="true"
  42 + aria-expanded="false"
  43 + >
  44 + BEST
  45 + </button>
  46 + <div class="dropdown-menu short_by">
  47 + <a class="dropdown-item" href="javasript:void(0);"
  48 + >BEST 1</a
  49 + >
  50 + <a class="dropdown-item" href="javasript:void(0);"
  51 + >BEST 2</a
  52 + >
  53 + <a class="dropdown-item" href="javasript:void(0);"
  54 + >BEST 3</a
  55 + >
  56 + </div>
  57 + </div>
  58 + <a
  59 + href="javasript:void(0);"
  60 + @click="chtbox_close"
  61 + class="close_chat_bx"
  62 + ><img src="../assets/images/close.png" alt="close" /></a
  63 + ><!-- close -->
  64 + </div>
  65 + <!-- action sort -->
  66 + </div>
  67 + <!-- top head -->
  68 + <div class="bounce-board-body">
  69 + <!-- all user comments -->
  70 + <ul class="bounced-user-comments">
  71 + <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
  72 + <div class="bc_brd_l"></div>
  73 + <!-- border -->
  74 + <div class="parent-full-width">
  75 + <div class="full-width">
  76 + <div class="b-user-head">
  77 + <img :src="cmnt.user.profilePic" />
  78 + <span class="head-content">{{ cmnt.user.name }} </span>
  79 + <ul>
  80 + <li>
  81 + <span></span
  82 + ><img src="../assets/images/u-info-icon.png" />{{
  83 + cmnt.user.karmaPoints
  84 + }}pts
  85 + </li>
  86 + <li>
  87 + <span></span>{{ dateGenerator(cmnt.createdAt) }}days
  88 + ago
  89 + </li>
  90 + </ul>
  91 + </div>
  92 + <!-- header -->
  93 + <p>
  94 + {{ cmnt.comment }}
  95 + </p>
  96 + <div class="joined_wrapper">
  97 + <ul class="joined-info info_bc_spc">
  98 + <li>
  99 + <img src="../assets/images/purple-heart.png" />
  100 + </li>
  101 + <li><a href="javasript:void(0);"> 0</a></li>
  102 + <li class="comment-spc">
  103 + <img src="../assets/images/purple-comment.png" />
  104 + </li>
  105 + <li>
  106 + <a href="javasript:void(0);">
  107 + {{ cmnt.children.length }}</a
  108 + >
  109 + </li>
  110 + </ul>
  111 + <div class="add_rply" v-if="!cmnt.childInput">
  112 + <input
  113 + type="text"
  114 + @click="eachRply(cmnt)"
  115 + class="add_Rply_C"
  116 + placeholder="Add your reply"
  117 + />
  118 + </div>
  119 + <!-- rly form -->
  120 + </div>
  121 + <!-- joined wrapper -->
  122 + </div>
  123 + <!-- full width -->
  124 + </div>
  125 + <div class="comments-footer each-ft" v-if="cmnt.childInput">
  126 + <textarea v-model="comment"></textarea>
  127 + <div class="comments-footer-wrp">
  128 + <a
  129 + @click="createChildComment(cmnt)"
  130 + href="javasript:void(0);"
  131 + class="add_comments_chat reply-Wdth"
  132 + >Reply</a
  133 + >
  134 + <a
  135 + href="javasript:void(0);"
  136 + class="discard_bt"
  137 + @click="discardRply(cmnt)"
  138 + ><img src="../assets/images/discard.svg"
  139 + /></a>
  140 + </div>
  141 + </div>
  142 + <!-- parent -->
  143 + <div
  144 + class="child-full-width"
  145 + v-for="(childCmnt, i) in cmnt.children"
  146 + :key="i"
  147 + >
  148 + <div class="full-width">
  149 + <div class="b-user-head">
  150 + <img :src="childCmnt.user.profilePic" />
  151 + <span class="head-content"
  152 + >{{ childCmnt.user.name }}
  153 + </span>
  154 + <ul>
  155 + <li>
  156 + <span></span
  157 + ><img src="../assets/images/u-info-icon.png" />{{
  158 + childCmnt.user.karmaPoints
  159 + }}pts
  160 + </li>
  161 + <li>
  162 + <span></span
  163 + >{{ dateGenerator(childCmnt.createdAt) }}days ago
  164 + </li>
  165 + </ul>
  166 + </div>
  167 + <p>
  168 + {{ childCmnt.comment }}
  169 + </p>
  170 + <div class="joined_wrapper">
  171 + <ul class="joined-info info_bc_spc">
  172 + <li>
  173 + <img src="../assets/images/purple-heart.png" />
  174 + </li>
  175 + <li>
  176 + <a href="javasript:void(0);">
  177 + {{ childCmnt.likes.length }}</a
  178 + >
  179 + </li>
  180 + </ul>
  181 + </div>
  182 + </div>
  183 + </div>
  184 + <!-- eree -->
  185 +
  186 + <!-- comments footer -->
  187 + </li>
  188 + </ul>
  189 + </div>
  190 + <!-- bounce board body -->
  191 + <div class="comments-footer" v-if="parentInput">
  192 + <textarea v-model="comment"></textarea>
  193 + <div class="comments-footer-wrp">
  194 + <a
  195 + href="javasript:void(0);"
  196 + class="add_comments_chat"
  197 + @click="createComment"
  198 + ><img src="../assets/images/add-comment.svg" /> Comment</a
  199 + >
  200 + </div>
  201 + </div>
  202 + <!-- comments footer -->
  203 + </div>
  204 + </div>
  205 + <!-- bounceboard wrp -->
  206 + <!-- chat box -->
  207 +
18 208 <div class="allMWrp">
19   -<div class="mobile-screen-one p-left">
20   - <div class="m-screen-comments">
21   - <div class="single-author-li-comments">
22   - <div class="a-intro-comments">
23   - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
24   - <ul class="rly-comment-set">
25   - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
26   - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
27   - </ul>
28   - </div><!-- comments box -->
29   - </div><!-- single author comments -->
30   - <div class="single-author-li-comments">
31   - <div class="a-intro-comments">
32   - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
33   - <ul class="rly-comment-set">
34   - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
35   - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
36   - </ul>
37   - </div><!-- comments box -->
38   - </div><!-- single author comments -->
39   - </div><!-- comments -->
40   - <img src="../assets/images/help-screen.png" class="m-screen" />
41   - <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />
42   - </div><!-- mobile screen one -->
43   - <div class="mobile-screen-one p-right">
44   - <div class="view-ticket-wrp-ps">
45   - <div class="single-author-li-comments ">
46   - <div class="a-intro-comments custom-selected-style">
47   - <img src="../assets/images/rect.svg" class="rect" />
48   - <div class="top-wrp">
49   - Design Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>
  209 + <div class="mobile-screen-one p-left">
  210 + <div class="top-area-blank"></div>
  211 + <div class="m-screen-comments">
  212 + <div class="single-author-li-comments">
  213 + <div class="a-intro-comments">
  214 + <p>{{ currentSlideData.payload.comments[0].comment }}</p>
  215 + <ul class="rly-comment-set">
  216 + <li>
  217 + <img src="../assets/images/color-heart.svg" />
  218 + <a href="javascript:void(0);">0</a>
  219 + </li>
  220 + <li>
  221 + <img src="../assets/images/rply.svg" />
  222 + <a href="javascript:void(0);" @click="open_ct_box"
  223 + >Reply</a
  224 + >
  225 + </li>
  226 + </ul>
  227 + </div>
  228 + <!-- comments box -->
50 229 </div>
51   - <div class="top-head">Jakobโ€™s law</div>
52   - <p>By leveraging existing mental models, we can create superior user experiences in which the user can focus on their task rather than learning new models.</p>
53   -<div class="footer">
54   - <a href="#" class="cit-16">16 Citations</a>
55   - <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
56   - </div><!-- footer -->
57   -
58   - </div><!-- comments box -->
59   - </div><!-- single author comments -->
60   - </div><!-- comments -->
61   - <img src="../assets/images/slide2.png" class="m-screen" />
62   -
63   - </div><!-- mobile screen Two -->
64   - </div>
65   - <div class="footer-nav">
66   - <div class="footer-top white-bg">
67   - <div class="row">
68   - <div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
69   - <div class="row h-100p">
70   - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
71   - <ul class="top-intro-bt">
72   - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
73   - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
74   - </ul>
  230 + <!-- single author comments -->
  231 + <div class="single-author-li-comments">
  232 + <div class="a-intro-comments">
  233 + <p>{{ currentSlideData.payload.comments[1].comment }}</p>
  234 + <ul class="rly-comment-set">
  235 + <li>
  236 + <img src="../assets/images/color-heart.svg" />
  237 + <a href="javascript:void(0);">0</a>
  238 + </li>
  239 + <li>
  240 + <img src="../assets/images/rply.svg" />
  241 + <a href="javascript:void(0);" @click="open_ct_box"
  242 + >Reply</a
  243 + >
  244 + </li>
  245 + </ul>
  246 + </div>
  247 + <!-- comments box -->
  248 + </div>
  249 + <!-- single author comments -->
  250 + </div>
  251 + <!-- comments -->
  252 + <img
  253 + :src="currentSlideData.payload.metaData.mobileImage1"
  254 + class="m-screen"
  255 + />
  256 + <!-- <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" /> -->
  257 + <img
  258 + :src="currentSlideData.payload.metaData.authorImage"
  259 + class="user-photo-bottom"
  260 + />
75 261 </div>
76   - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
77   - <div class="ft-comments-group">
78   - <div class="c-with-photos">
79   - <span class="count-comments">16+ Comments</span><!-- count commets -->
80   - <ul class="comments-photos">
81   - <li><img src="../assets/images/c-photo-1.png" /></li>
82   - <li><img src="../assets/images/c-photo-2.png" /></li>
83   - <li><img src="../assets/images/c-photo-3.png" /></li>
84   - </ul><!-- comment photos -->
  262 + <!-- mobile screen one -->
  263 + <div class="mobile-screen-one p-right">
  264 + <div class="top-area-blank"></div>
  265 + <div class="view-ticket-wrp-ps">
  266 + <div class="single-author-li-comments">
  267 + <div class="a-intro-comments custom-selected-style">
  268 + <img src="../assets/images/rect.svg" class="rect" />
  269 +
  270 + <div class="top-wrp">
  271 + {{ currentSlideData.payload.insight.tag }} Insight
  272 + <a href="#"><img src="../assets/images/link-red.svg" /></a>
  273 + </div>
  274 + <div class="top-head">
  275 + {{ currentSlideData.payload.insight.title }}
  276 + </div>
  277 + <p>{{ currentSlideData.payload.insight.description }}</p>
  278 + <div class="footer">
  279 + <a href="#" class="cit-16"
  280 + >{{
  281 + currentSlideData.payload.insight.citations.length
  282 + }}
  283 + Citations</a
  284 + >
  285 + <a href="#" class="ft-share"
  286 + ><img src="../assets/images/reply-red.svg" /> Share from
  287 + library</a
  288 + >
85 289 </div>
86   - <div class="comments-detail all-c-space">
87   - <span>Saudrika commented <a href="#">View All</a></span>
88   - <p>I wonder what the difference between โ€œDunzo Assistantโ€ and โ€œPickup and Drop...</p>
89   - </div><!-- comments detail -->
90   -
91   - </div><!-- comments Group -->
92   - </div></div>
  290 + <!-- footer -->
  291 + </div>
  292 + <!-- comments box -->
93 293 </div>
94   - <div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
95   -
96   - <div class="comment-frm no-c-frm">
97   - <div class="row">
98   - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
99   - <div class="form-group frm-wdth addfrm-spc">
100   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
101   - </div></div>
102   - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
103   - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
104   - </div>
105   - </div><!-- comment from -->
106   - </div> </div></div>
107   - </div><!-- footer top -->
108   - <div class="footer-bottom">
109   - <ul>
110   - <li class="active"></li>
111   - <li></li>
112   - </ul>
113   - </div><!-- footer top -->
114   - </div><!-- footer -->
115   -
116   - </div>
  294 + <!-- single author comments -->
  295 + </div>
  296 + <!-- comments -->
  297 + <!-- <img src="../assets/images/slide2.png" class="m-screen" /> -->
  298 + <img
  299 + :src="currentSlideData.payload.metaData.mobileImage2"
  300 + class="m-screen"
  301 + />
  302 + </div>
  303 + <!-- mobile screen Two -->
  304 + </div>
  305 + <div class="footer-nav">
  306 + <div class="footer-top white-bg">
  307 + <div class="row">
  308 + <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
  309 + <div class="row h-100p">
  310 + <div
  311 + class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
  312 + >
  313 + <div class="ft-comments-group testi-photos-ct">
  314 + <div class="c-with-photos">
  315 + <span class="count-comments"
  316 + >{{ commentList.length - 1 }}+ Comments</span
  317 + ><!-- count commets -->
  318 + <ul class="comments-photos">
  319 + <!-- <li><img src="../assets/images/c-photo-1.png" /></li>
  320 + <li><img src="../assets/images/c-photo-2.png" /></li> -->
  321 + <!-- <li><img src="../assets/images/c-photo-3.png" /></li> -->
  322 + <!-- <li><img :src="commentList[commentList.length - 1].user.profilePic" /></li> -->
  323 + </ul>
  324 + <!-- comment photos -->
  325 + </div>
  326 + <div class="comments-detail all-c-space">
  327 + <span
  328 + >{{ commentList[commentList.length - 1].user.name }}
  329 + <a href="javascript:void(0);" @click="open_ct_box"
  330 + >View All</a
  331 + ></span
  332 + >
  333 + <p>
  334 + <!-- I wonder what the difference between โ€œDunzo Assistantโ€
  335 + and โ€œPickup and Drop... -->
  336 + {{ commentList[commentList.length - 1].comment }}
  337 + </p>
  338 + </div>
  339 + <!-- comments detail -->
  340 + </div>
  341 + <!-- comments Group -->
  342 + </div>
  343 + </div>
  344 + </div>
  345 + <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
  346 + <div class="comment-frm no-c-frm">
  347 + <div class="row">
  348 + <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
  349 + <div class="form-group frm-wdth addfrm-spc">
  350 + <input
  351 + type="text"
  352 + class="form-control"
  353 + placeholder="Kathy, Something on your mind?"
  354 + id="open_ct_box"
  355 + v-model="comment"
  356 + />
  357 + </div>
  358 + </div>
  359 + <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
  360 + <a
  361 + href="javascript:void(0);"
  362 + @click="createComment"
  363 + class="add-comment"
  364 + ><img src="../assets/images/add-comment.svg" />
  365 + Comment</a
  366 + >
  367 + </div>
  368 + </div>
  369 + <!-- comment from -->
  370 + </div>
  371 + </div>
  372 + <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
  373 + <ul class="top-intro-bt">
  374 + <li>
  375 + <a href="javascript:void(0);" @click="goBack"
  376 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  377 + >
  378 + </li>
  379 + <li>
  380 + <a href="javascript:void(0);" @click="goNext"
  381 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  382 + slide</a
  383 + >
  384 + </li>
  385 + </ul>
  386 + </div>
  387 + <!-- buttons list -->
  388 + </div>
  389 + </div>
  390 + <!-- footer top -->
  391 + <div class="footer-bottom">
  392 + <ul>
  393 + <li class="active"></li>
  394 + <li></li>
  395 + </ul>
  396 + </div>
  397 + <!-- footer top -->
  398 + </div>
  399 + <!-- footer -->
  400 + </div>
117 401 <!-- body wrapper -->
118 402 </div>
119 403 <!-- main wrapper -->
... ... @@ -123,22 +407,173 @@
123 407 <script>
124 408 import Vue from "vue";
125 409 import router from "../router";
126   -
  410 +import axios from "axios";
  411 +import moment from "moment";
127 412 export default {
128 413 name: "TwoScreenWithInsight",
129   -
130 414 data() {
131   - return {};
  415 + return {
  416 + allSlide: [],
  417 + currentSlideIndex: null,
  418 + currentSlideData: null,
  419 + //
  420 + usertoken: null,
  421 + commentList: [],
  422 + comment: null,
  423 + parentInput: true,
  424 + };
  425 + },
  426 + mounted() {
  427 + var allSlideData = localStorage.getItem(
  428 + "spotlight_slide" + this.$route.params.caseStudyId
  429 + );
  430 + if (allSlideData) {
  431 + this.allSlide = JSON.parse(allSlideData);
  432 + this.getCurrentSlideData();
  433 + }
  434 + var userdata = localStorage.getItem("spotlight_usertoken");
  435 + if (userdata) {
  436 + userdata = JSON.parse(userdata);
  437 + this.usertoken = userdata.token;
  438 + this.getComment();
  439 + }
132 440 },
133   - mounted() {},
134 441 methods: {
  442 + getCurrentSlideData() {
  443 + var i = this.allSlide.findIndex(
  444 + (slide_) => slide_.slideId == this.$route.params.slideId
  445 + );
  446 + this.currentSlideIndex = i;
  447 + this.currentSlideData = this.allSlide[i];
  448 + console.log("currentSlideData", this.currentSlideData);
  449 + },
  450 + goNext() {
  451 + this.currentSlideIndex++;
  452 + this.$router.push({
  453 + name: this.allSlide[this.currentSlideIndex].ur,
  454 + params: {
  455 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  456 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  457 + },
  458 + });
  459 + },
  460 + goBack() {
  461 + this.currentSlideIndex--;
  462 + this.$router.push({
  463 + name: this.allSlide[this.currentSlideIndex].ur,
  464 + params: {
  465 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  466 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  467 + },
  468 + });
  469 + },
  470 + createComment() {
  471 + console.log("===", this.comment);
  472 + var obj = {
  473 + caseStudyId: this.currentSlideData.caseStudyId,
  474 + slideId: this.currentSlideData.slideId,
  475 + comment: this.comment,
  476 + };
  477 + axios
  478 + .post("/bounceBoard/comment", obj, {
  479 + headers: {
  480 + Authorization: "Bearer " + this.usertoken,
  481 + },
  482 + })
  483 + .then((response) => {
  484 + this.comment = null;
  485 + this.getComment();
  486 + console.log(response);
  487 + })
  488 + .catch((error) => {
  489 + if (error.response) {
  490 + this.$toaster.error(error.response.data.message);
  491 + }
  492 + });
  493 + },
  494 + createChildComment(cmnt) {
  495 + console.log(cmnt, "===", this.comment);
  496 + var obj = {
  497 + caseStudyId: this.currentSlideData.caseStudyId,
  498 + slideId: this.currentSlideData.slideId,
  499 + comment: this.comment,
  500 + parentId: cmnt._id,
  501 + };
  502 + axios
  503 + .post("/bounceBoard/comment", obj, {
  504 + headers: {
  505 + Authorization: "Bearer " + this.usertoken,
  506 + },
  507 + })
  508 + .then((response) => {
  509 + this.comment = null;
  510 + this.discardRply(cmnt);
  511 + this.getComment();
  512 + console.log(response);
  513 + })
  514 + .catch((error) => {
  515 + if (error.response) {
  516 + this.$toaster.error(error.response.data.message);
  517 + }
  518 + });
  519 + },
  520 + getComment() {
  521 + axios
  522 + .get(
  523 + `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
  524 + {
  525 + headers: {
  526 + Authorization: "Bearer " + this.usertoken,
  527 + },
  528 + }
  529 + )
  530 + .then((response) => {
  531 + console.log(response.data);
  532 + var comments = [];
  533 + var keys = Object.keys(response.data.data);
  534 + response.data.data;
  535 + keys.forEach((key_) => {
  536 + comments.push(response.data.data[key_]);
  537 + });
  538 + comments.forEach((coment_) => {
  539 + coment_.childInput = false;
  540 + });
  541 + console.log("comments", comments);
  542 + this.commentList = comments;
  543 + })
  544 + .catch((error) => console.log(error));
  545 + },
  546 + dateGenerator(curreDate) {
  547 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  548 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  549 + var result = todayDate.diff(endDate, "days");
  550 + return result;
  551 + },
135 552 goToLogin() {
136 553 this.$router.push("/");
137 554 },
138 555 goToSignUp() {
139 556 this.$router.push("/signup");
140 557 },
141   -
  558 + chtbox_close() {
  559 + $("#cht_box_close").removeClass("cht_close");
  560 + $("#open_ct_box, .c_hide").show();
  561 + $(".footer-top").addClass("white-bg");
  562 + },
  563 + open_ct_box() {
  564 + $("#cht_box_close").addClass("cht_close");
  565 + $("#open_ct_box, .c_hide").hide();
  566 + $(".footer-top").removeClass("white-bg");
  567 + },
  568 + eachRply(cmnt) {
  569 + cmnt.childInput = true;
  570 + this.parentInput = false;
  571 + },
  572 + discardRply(cmnt) {
  573 + cmnt.childInput = false;
  574 + this.parentInput = true;
  575 + },
142 576 },
143 577 };
  578 +//
144 579 </script>
... ...
src/components/TwoScreenWithoutInsight.vue
1 1 <template>
2 2 <main class="landing-page">
3   -
4 3 <div class="container-fluid episode-intro">
5   - <nav class="navbar navbar-expand-sm spotLight-nav">
6   - <a class="navbar-brand" href="#"><img src="../assets/images/logo.png"></a>
7   - <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
  4 + <nav class="navbar navbar-expand-sm spotLight-nav">
  5 + <a class="navbar-brand" href="javasript:void(0);"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
8 17 <span class="navbar-toggler-icon"></span>
9 18 <span class="navbar-toggler-icon"></span>
10 19 <span class="navbar-toggler-icon"></span>
11 20 </button>
12 21 <div class="user-profile-photo insights-profile">
13   - <a href="#"><img src="../assets/images/lock.svg"></a>
  22 + <a href="javasript:void(0);"
  23 + ><img src="../assets/images/lock.svg"
  24 + /></a>
14 25 </div>
15 26 </nav>
16 27 <!-- menu wrapper -->
17   - <div class="intro-startup">
  28 + <div class="intro-startup">
  29 + <!-- chat box -->
  30 + <div class="bounce-board-wrp" id="cht_box_close">
  31 + <div class="inner-wrp-bc">
  32 + <div class="bc-top-head">
  33 + <span class="bc-head">
  34 + <img src="../assets/images/bounce-icon.svg" /> Bounce Board
  35 + </span>
  36 + <div class="action-sort">
  37 + <span class="sort-by">SORT BY</span>
  38 + <div class="btn-group">
  39 + <button
  40 + type="button"
  41 + class="bc-sort-list dropdown-toggle"
  42 + data-toggle="dropdown"
  43 + aria-haspopup="true"
  44 + aria-expanded="false"
  45 + >
  46 + BEST
  47 + </button>
  48 + <div class="dropdown-menu short_by">
  49 + <a class="dropdown-item" href="javasript:void(0);"
  50 + >BEST 1</a
  51 + >
  52 + <a class="dropdown-item" href="javasript:void(0);"
  53 + >BEST 2</a
  54 + >
  55 + <a class="dropdown-item" href="javasript:void(0);"
  56 + >BEST 3</a
  57 + >
  58 + </div>
  59 + </div>
  60 + <a
  61 + href="javasript:void(0);"
  62 + @click="chtbox_close"
  63 + class="close_chat_bx"
  64 + ><img src="../assets/images/close.png" alt="close" /></a
  65 + ><!-- close -->
  66 + </div>
  67 + <!-- action sort -->
  68 + </div>
  69 + <!-- top head -->
  70 + <div class="bounce-board-body">
  71 +
  72 + <!-- all user comments -->
  73 + <ul class="bounced-user-comments">
  74 + <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
  75 + <div class="bc_brd_l"></div>
  76 + <!-- border -->
  77 + <div class="parent-full-width">
  78 + <div class="full-width">
  79 + <div class="b-user-head">
  80 + <img :src="cmnt.user.profilePic" />
  81 + <span class="head-content">{{ cmnt.user.name }} </span>
  82 + <ul>
  83 + <li>
  84 + <span></span
  85 + ><img src="../assets/images/u-info-icon.png" />{{
  86 + cmnt.user.karmaPoints
  87 + }}pts
  88 + </li>
  89 + <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
  90 + </ul>
  91 + </div>
  92 + <!-- header -->
  93 + <p>
  94 + {{ cmnt.comment }}
  95 + </p>
  96 + <div class="joined_wrapper">
  97 + <ul class="joined-info info_bc_spc">
  98 + <li>
  99 + <img src="../assets/images/purple-heart.png" />
  100 + </li>
  101 + <li><a href="javasript:void(0);"> 0</a></li>
  102 + <li class="comment-spc">
  103 + <img src="../assets/images/purple-comment.png" />
  104 + </li>
  105 + <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
  106 + </ul>
  107 + <div class="add_rply" v-if="!cmnt.childInput">
  108 + <input
  109 + type="text"
  110 + @click="eachRply(cmnt)"
  111 + class="add_Rply_C"
  112 + placeholder="Add your reply"
  113 + />
  114 + </div>
  115 + <!-- rly form -->
  116 + </div>
  117 + <!-- joined wrapper -->
  118 + </div>
  119 + <!-- full width -->
  120 + </div>
  121 + <div class="comments-footer each-ft" v-if="cmnt.childInput">
  122 + <textarea v-model="comment"></textarea>
  123 + <div class="comments-footer-wrp">
  124 + <a
  125 + @click="createChildComment(cmnt)"
  126 + href="javasript:void(0);"
  127 + class="add_comments_chat reply-Wdth"
  128 + >Reply</a
  129 + >
  130 + <a href="javasript:void(0);" class="discard_bt"
  131 + @click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
  132 + /></a>
  133 + </div>
  134 + </div>
  135 + <!-- parent -->
  136 + <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
  137 + <div class="full-width">
  138 + <div class="b-user-head">
  139 + <img :src="childCmnt.user.profilePic" />
  140 + <span class="head-content">{{childCmnt.user.name }} </span>
  141 + <ul>
  142 + <li>
  143 + <span></span
  144 + ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
  145 + </li>
  146 + <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
  147 + </ul>
  148 + </div>
  149 + <p>
  150 + {{childCmnt.comment}}
  151 + </p>
  152 + <div class="joined_wrapper">
  153 + <ul class="joined-info info_bc_spc">
  154 + <li>
  155 + <img src="../assets/images/purple-heart.png" />
  156 + </li>
  157 + <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
  158 +
  159 + </ul>
  160 +
  161 + </div>
  162 + </div>
  163 + </div>
  164 + <!-- eree -->
  165 +
  166 + <!-- comments footer -->
  167 + </li>
  168 + </ul>
  169 + </div>
  170 + <!-- bounce board body -->
  171 + <div class="comments-footer" v-if="parentInput">
  172 + <textarea v-model="comment"></textarea>
  173 + <div class="comments-footer-wrp">
  174 + <a
  175 + href="javasript:void(0);"
  176 + class="add_comments_chat"
  177 + @click="createComment"
  178 + ><img src="../assets/images/add-comment.svg" /> Comment</a
  179 + >
  180 + </div>
  181 + </div>
  182 + <!-- comments footer -->
  183 + </div>
  184 + </div>
  185 + <!-- bounceboard wrp -->
  186 + <!-- chat box -->
  187 +
18 188 <div class="allMWrp">
19   -<div class="mobile-screen-one p-left">
20   - <div class="m-screen-comments">
21   - <div class="single-author-li-comments">
22   - <div class="a-intro-comments">
23   - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
24   - <ul class="rly-comment-set">
25   - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
26   - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
27   - </ul>
28   - </div><!-- comments box -->
29   - </div><!-- single author comments -->
30   - <div class="single-author-li-comments">
31   - <div class="a-intro-comments">
32   - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
33   - <ul class="rly-comment-set">
34   - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
35   - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
36   - </ul>
37   - </div><!-- comments box -->
38   - </div><!-- single author comments -->
39   - </div><!-- comments -->
40   - <img src="../assets/images/m-screen-1.png" class="m-screen" />
41   - <img src="../assets/images/top-user-demo.svg" class="user-photo-bottom" />
42   - </div><!-- mobile screen one -->
43   - <div class="mobile-screen-one p-right">
44   - <div class="m-screen-right">
45   - <div class="single-author-li-comments">
46   - <div class="a-intro-comments">
47   - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
48   - <ul class="rly-comment-set">
49   - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
50   - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
51   - </ul>
52   - </div><!-- comments box -->
53   - </div><!-- single author comments -->
54   - <div class="single-author-li-comments">
55   - <div class="a-intro-comments">
56   - <p>As he was getting <strong>impatient</strong>, hopelessly I've <strong>switched back to the PhonePe app</strong> to search for support.</p>
57   - <ul class="rly-comment-set">
58   - <li><img src="../assets/images/color-heart.svg" /> <a href="#">4</a></li>
59   - <li><img src="../assets/images/rply.svg" /> <a href="#">Reply</a></li>
60   - </ul>
61   - </div><!-- comments box -->
62   - </div><!-- single author comments -->
63   - </div><!-- comments -->
64   - <img src="../assets/images/slide2.png" class="m-screen" />
65   - <img src="../assets/images/user-easy-1.png" class="user-photo-bottom-r" />
66   - </div><!-- mobile screen Two -->
67   - </div>
68   - <div class="footer-nav">
69   - <div class="footer-top white-bg">
70   - <div class="row">
71   - <div class="col-8 col-sm-8 col-md-8 col-lg-8 ">
72   - <div class="row h-100p">
73   - <div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
74   - <ul class="top-intro-bt">
75   - <li><a href="#"><img src="../assets/images/skip-prev.svg"> Prev</a></li>
76   - <li><a href="#"><img src="../assets/images/skip-next.svg"> Skip to next slide</a></li>
77   - </ul>
  189 + <div class="mobile-screen-one p-left">
  190 + <div class="top-area-blank"></div>
  191 + <!-- fixed area -->
  192 + <div class="m-screen-comments">
  193 + <div class="single-author-li-comments">
  194 + <div class="a-intro-comments">
  195 + <p>{{ currentSlideData.payload.comments[0].comment }}</p>
  196 + <ul class="rly-comment-set">
  197 + <li>
  198 + <img src="../assets/images/color-heart.svg" />
  199 + <a href="javascript:void(0);">0</a>
  200 + </li>
  201 + <li>
  202 + <img src="../assets/images/rply.svg" />
  203 + <a href="javascript:void(0);" @click="open_ct_box"
  204 + >Reply</a
  205 + >
  206 + </li>
  207 + </ul>
  208 + </div>
  209 + <!-- comments box -->
  210 + </div>
  211 + <!-- single author comments -->
  212 + <div class="single-author-li-comments">
  213 + <div class="a-intro-comments">
  214 + <p>{{ currentSlideData.payload.comments[1].comment }}</p>
  215 + <ul class="rly-comment-set">
  216 + <li>
  217 + <img src="../assets/images/color-heart.svg" />
  218 + <a href="javascript:void(0);">0</a>
  219 + </li>
  220 + <li>
  221 + <img src="../assets/images/rply.svg" />
  222 + <a href="javascript:void(0);" @click="open_ct_box"
  223 + >Reply</a
  224 + >
  225 + </li>
  226 + </ul>
  227 + </div>
  228 + <!-- comments box -->
  229 + </div>
  230 + <!-- single author comments -->
  231 + </div>
  232 + <!-- comments -->
  233 + <img
  234 + :src="currentSlideData.payload.metaData.mobileImage1"
  235 + class="m-screen"
  236 + />
  237 + <img
  238 + :src="currentSlideData.payload.metaData.authorImage"
  239 + class="user-photo-bottom"
  240 + />
  241 + </div>
  242 + <!-- mobile screen one -->
  243 + <div class="mobile-screen-one p-right">
  244 + <div class="top-area-blank"></div>
  245 + <!-- fixed area -->
  246 + <div class="m-screen-right">
  247 + <div class="single-author-li-comments">
  248 + <div class="a-intro-comments">
  249 + <p>{{ currentSlideData.payload.comments[2].comment }}</p>
  250 + <ul class="rly-comment-set">
  251 + <li>
  252 + <img src="../assets/images/color-heart.svg" />
  253 + <a href="javascript:void(0);">0</a>
  254 + </li>
  255 + <li>
  256 + <img src="../assets/images/rply.svg" />
  257 + <a href="javascript:void(0);" @click="open_ct_box"
  258 + >Reply</a
  259 + >
  260 + </li>
  261 + </ul>
  262 + </div>
  263 + <!-- comments box -->
  264 + </div>
  265 + <!-- single author comments -->
  266 + <div class="single-author-li-comments">
  267 + <div class="a-intro-comments">
  268 + <p>{{ currentSlideData.payload.comments[3].comment }}</p>
  269 + <ul class="rly-comment-set">
  270 + <li>
  271 + <img src="../assets/images/color-heart.svg" />
  272 + <a href="javascript:void(0);">0</a>
  273 + </li>
  274 + <li>
  275 + <img src="../assets/images/rply.svg" />
  276 + <a href="javascript:void(0);" @click="open_ct_box"
  277 + >Reply</a
  278 + >
  279 + </li>
  280 + </ul>
  281 + </div>
  282 + <!-- comments box -->
  283 + </div>
  284 + <!-- single author comments -->
  285 + </div>
  286 + <!-- comments -->
  287 + <img
  288 + :src="currentSlideData.payload.metaData.mobileImage2"
  289 + class="m-screen"
  290 + />
  291 + <img
  292 + :src="currentSlideData.payload.metaData.authorImage"
  293 + class="user-photo-bottom-r"
  294 + />
78 295 </div>
79   - <div class="col-8 col-sm-8 col-md-8 col-lg-8 col-xl-8 bord-r">
80   - <div class="ft-comments-group">
81   - <div class="c-with-photos">
82   - <span class="count-comments">16+ Comments</span><!-- count commets -->
83   - <ul class="comments-photos">
84   - <li><img src="../assets/images/c-photo-1.png" /></li>
85   - <li><img src="../assets/images/c-photo-2.png" /></li>
86   - <li><img src="../assets/images/c-photo-3.png" /></li>
87   - </ul><!-- comment photos -->
  296 + <!-- mobile screen Two -->
  297 + </div>
  298 +
  299 + <!-- single author comments -->
  300 + <div class="footer-nav">
  301 + <div class="footer-top white-bg">
  302 + <div class="row">
  303 + <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
  304 + <div class="row h-100p">
  305 + <div
  306 + class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
  307 + >
  308 + <div class="ft-comments-group testi-photos-ct">
  309 + <div class="c-with-photos">
  310 + <span class="count-comments"
  311 + >{{ commentList.length - 1 }}+ Comments</span
  312 + ><!-- count commets -->
  313 + <ul class="comments-photos">
  314 + <li><img src="../assets/images/c-photo-1.png" /></li>
  315 + <li><img src="../assets/images/c-photo-2.png" /></li>
  316 + <li><img src="../assets/images/c-photo-3.png" /></li>
  317 + </ul>
  318 + <!-- comment photos -->
  319 + </div>
  320 + <div class="comments-detail all-c-space">
  321 + <span
  322 + >{{ commentList[commentList.length - 1].user.name }}
  323 + <a href="javascript:void(0);" @click="open_ct_box"
  324 + >View All</a
  325 + ></span
  326 + >
  327 + <p>
  328 + <!-- I wonder what the difference between โ€œDunzo Assistantโ€
  329 + and โ€œPickup and Drop... -->
  330 + {{ commentList[commentList.length - 1].comment }}
  331 + </p>
  332 + </div>
  333 + <!-- comments detail -->
  334 + </div>
  335 + <!-- comments Group -->
88 336 </div>
89   - <div class="comments-detail all-c-space">
90   - <span>Saudrika commented <a href="#">View All</a></span>
91   - <p>I wonder what the difference between โ€œDunzo Assistantโ€ and โ€œPickup and Drop...</p>
92   - </div><!-- comments detail -->
93   -
94   - </div><!-- comments Group -->
95   - </div></div>
  337 + </div>
96 338 </div>
97   - <div class="col-4 col-sm-4 col-md-4 col-lg-4 ">
98   -
99   - <div class="comment-frm no-c-frm">
100   - <div class="row">
101   - <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
102   - <div class="form-group frm-wdth addfrm-spc">
103   - <input type="text" class="form-control" placeholder="Kathy, Something on your mind?" id="">
104   - </div></div>
105   - <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
106   - <a href="#" class="add-comment"><img src="../assets/images/add-comment.svg" /> Comment</a>
107   - </div>
108   - </div><!-- comment from -->
109   - </div> </div></div>
110   - </div><!-- footer top -->
111   - <div class="footer-bottom">
112   - <ul>
113   - <li class="active"></li>
114   - <li></li>
115   - </ul>
116   - </div><!-- footer top -->
117   - </div><!-- footer -->
118   -
119   - </div>
  339 + <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
  340 + <div class="comment-frm no-c-frm">
  341 + <div class="row">
  342 + <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
  343 + <div class="form-group frm-wdth addfrm-spc">
  344 + <input
  345 + type="text"
  346 + class="form-control"
  347 + placeholder="Kathy, Something on your mind?"
  348 + id="open_ct_box"
  349 + v-model="comment"
  350 + />
  351 + </div>
  352 + </div>
  353 + <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
  354 + <a
  355 + href="javascript:void(0);"
  356 + @click="createComment"
  357 + class="add-comment"
  358 + ><img src="../assets/images/add-comment.svg" />
  359 + Comment</a
  360 + >
  361 + </div>
  362 + </div>
  363 + <!-- comment from -->
  364 + </div>
  365 + </div>
  366 + <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
  367 + <ul class="top-intro-bt">
  368 + <li>
  369 + <a href="javascript:void(0);" @click="goBack"
  370 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  371 + >
  372 + </li>
  373 + <li>
  374 + <a href="javascript:void(0);" @click="goNext"
  375 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  376 + slide</a
  377 + >
  378 + </li>
  379 + </ul>
  380 + </div>
  381 + <!-- buttons list -->
  382 + </div>
  383 + </div>
  384 + <!-- footer top -->
  385 + <div class="footer-bottom">
  386 + <ul>
  387 + <li class="active"></li>
  388 + <li></li>
  389 + </ul>
  390 + </div>
  391 + <!-- footer top -->
  392 + </div>
  393 + <!-- footer -->
  394 + </div>
120 395 <!-- body wrapper -->
121 396 </div>
122 397 <!-- main wrapper -->
... ... @@ -126,22 +401,180 @@
126 401 <script>
127 402 import Vue from "vue";
128 403 import router from "../router";
  404 +import axios from "axios";
  405 +import moment from 'moment';
129 406  
130 407 export default {
131 408 name: "TwoScreenWithoutInsight",
132 409  
133 410 data() {
134   - return {};
  411 + return {
  412 + allSlide: [],
  413 + currentSlideIndex: null,
  414 + currentSlideData: null,
  415 + //
  416 + usertoken: null,
  417 + commentList: [],
  418 + comment: null,
  419 + parentInput: true,
  420 + };
  421 + },
  422 + mounted() {
  423 + var allSlideData = localStorage.getItem(
  424 + "spotlight_slide" + this.$route.params.caseStudyId
  425 + );
  426 + if (allSlideData) {
  427 + this.allSlide = JSON.parse(allSlideData);
  428 + this.getCurrentSlideData();
  429 + }
  430 + var userdata = localStorage.getItem("spotlight_usertoken");
  431 + if (userdata) {
  432 + userdata = JSON.parse(userdata);
  433 + this.usertoken = userdata.token;
  434 + this.getComment();
  435 + }
135 436 },
136   - mounted() {},
137 437 methods: {
  438 + getCurrentSlideData() {
  439 + var i = this.allSlide.findIndex(
  440 + (slide_) => slide_.slideId == this.$route.params.slideId
  441 + );
  442 + this.currentSlideIndex = i;
  443 + this.currentSlideData = this.allSlide[i];
  444 + console.log(this.currentSlideData, "this.usertoken", this.usertoken);
  445 + console.log("currentSlideData", this.currentSlideData);
  446 + },
  447 + goNext() {
  448 + this.currentSlideIndex++;
  449 + this.$router.push({
  450 + name: this.allSlide[this.currentSlideIndex].ur,
  451 + params: {
  452 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  453 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  454 + },
  455 + });
  456 + },
  457 + goBack() {
  458 + this.currentSlideIndex--;
  459 + this.$router.push({
  460 + name: this.allSlide[this.currentSlideIndex].ur,
  461 + params: {
  462 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  463 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  464 + },
  465 + });
  466 + },
  467 +
  468 + createComment() {
  469 + console.log("===", this.comment);
  470 + var obj = {
  471 + caseStudyId: this.currentSlideData.caseStudyId,
  472 + slideId: this.currentSlideData.slideId,
  473 + comment: this.comment,
  474 +
  475 + };
  476 + axios
  477 + .post("/bounceBoard/comment", obj, {
  478 + headers: {
  479 + Authorization: "Bearer " + this.usertoken,
  480 + },
  481 + })
  482 + .then((response) => {
  483 + this.comment = null;
  484 + this.getComment();
  485 + console.log(response);
  486 + })
  487 + .catch((error) => {
  488 + if (error.response) {
  489 + this.$toaster.error(error.response.data.message);
  490 + }
  491 + });
  492 + },
  493 + createChildComment(cmnt) {
  494 + console.log(cmnt,"===", this.comment);
  495 + var obj = {
  496 + caseStudyId: this.currentSlideData.caseStudyId,
  497 + slideId: this.currentSlideData.slideId,
  498 + comment: this.comment,
  499 + parentId: cmnt._id,
  500 +
  501 + };
  502 + axios
  503 + .post("/bounceBoard/comment", obj, {
  504 + headers: {
  505 + Authorization: "Bearer " + this.usertoken,
  506 + },
  507 + })
  508 + .then((response) => {
  509 + this.comment = null;
  510 + this.discardRply(cmnt);
  511 + this.getComment();
  512 + console.log(response);
  513 + })
  514 + .catch((error) => {
  515 + if (error.response) {
  516 + this.$toaster.error(error.response.data.message);
  517 + }
  518 + });
  519 + },
  520 + getComment() {
  521 + axios
  522 + .get(
  523 + `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
  524 + {
  525 + headers: {
  526 + Authorization: "Bearer " + this.usertoken,
  527 + },
  528 + }
  529 + )
  530 + .then((response) => {
  531 + console.log(response.data);
  532 + var comments = [];
  533 + var keys = Object.keys(response.data.data)
  534 + response.data.data
  535 + keys.forEach((key_) => {
  536 + comments.push(response.data.data[key_])
  537 + });
  538 + comments.forEach((coment_)=>{
  539 + coment_.childInput = false;
  540 + });
  541 + console.log("comments",comments)
  542 + this.commentList = comments;
  543 + })
  544 + .catch((error) => console.log(error));
  545 + },
  546 + dateGenerator(curreDate){
  547 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  548 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  549 + var result = todayDate.diff(endDate, 'days');
  550 + return result;
  551 + },
138 552 goToLogin() {
139 553 this.$router.push("/");
140 554 },
141 555 goToSignUp() {
142 556 this.$router.push("/signup");
143 557 },
144   -
  558 + chtbox_close() {
  559 + $("#cht_box_close").removeClass("cht_close");
  560 + $("#open_ct_box, .c_hide").show();
  561 + $(".footer-top").addClass("white-bg");
  562 + },
  563 + open_ct_box() {
  564 + $("#cht_box_close").addClass("cht_close");
  565 + $("#open_ct_box, .c_hide").hide();
  566 + $(".footer-top").removeClass("white-bg");
  567 + },
  568 + eachRply(cmnt) {
  569 + cmnt.childInput = true;
  570 + this.parentInput = false;
  571 + },
  572 + discardRply(cmnt) {
  573 + cmnt.childInput = false;
  574 + this.parentInput = true;
  575 +
  576 + },
145 577 },
146 578 };
  579 +//
147 580 </script>
... ...
src/components/noscreenshotSingleautho.vue
... ... @@ -0,0 +1,529 @@
  1 +<template>
  2 + <main class="landing-page">
  3 + <div class="container-fluid episode-intro">
  4 + <nav class="navbar navbar-expand-sm spotLight-nav">
  5 + <a class="navbar-brand" href="#"
  6 + ><img src="../assets/images/logo.png"
  7 + /></a>
  8 + <button
  9 + class="navbar-toggler"
  10 + type="button"
  11 + data-toggle="collapse"
  12 + data-target="#navbarsExample03"
  13 + aria-controls="navbarsExample03"
  14 + aria-expanded="false"
  15 + aria-label="Toggle navigation"
  16 + >
  17 + <span class="navbar-toggler-icon"></span>
  18 + <span class="navbar-toggler-icon"></span>
  19 + <span class="navbar-toggler-icon"></span>
  20 + </button>
  21 + <div class="user-profile-photo insights-profile">
  22 + <a href="#"><img src="../assets/images/lock.svg" /></a>
  23 + </div>
  24 + </nav>
  25 + <!-- menu wrapper -->
  26 + <div class="intro-startup">
  27 +
  28 + <!-- chat box -->
  29 + <div class="bounce-board-wrp" id="cht_box_close">
  30 + <div class="inner-wrp-bc">
  31 + <div class="bc-top-head">
  32 + <span class="bc-head">
  33 + <img src="../assets/images/bounce-icon.svg" /> Bounce Board
  34 + </span>
  35 + <div class="action-sort">
  36 + <span class="sort-by">SORT BY</span>
  37 + <div class="btn-group">
  38 + <button
  39 + type="button"
  40 + class="bc-sort-list dropdown-toggle"
  41 + data-toggle="dropdown"
  42 + aria-haspopup="true"
  43 + aria-expanded="false"
  44 + >
  45 + BEST
  46 + </button>
  47 + <div class="dropdown-menu short_by">
  48 + <a class="dropdown-item" href="javasript:void(0);"
  49 + >BEST 1</a
  50 + >
  51 + <a class="dropdown-item" href="javasript:void(0);"
  52 + >BEST 2</a
  53 + >
  54 + <a class="dropdown-item" href="javasript:void(0);"
  55 + >BEST 3</a
  56 + >
  57 + </div>
  58 + </div>
  59 + <a
  60 + href="javasript:void(0);"
  61 + @click="chtbox_close"
  62 + class="close_chat_bx"
  63 + ><img src="../assets/images/close.png" alt="close" /></a
  64 + ><!-- close -->
  65 + </div>
  66 + <!-- action sort -->
  67 + </div>
  68 + <!-- top head -->
  69 + <div class="bounce-board-body">
  70 +
  71 + <!-- all user comments -->
  72 + <ul class="bounced-user-comments">
  73 + <li class="bc_border" v-for="(cmnt, j) in commentList" :key="j">
  74 + <div class="bc_brd_l"></div>
  75 + <!-- border -->
  76 + <div class="parent-full-width">
  77 + <div class="full-width">
  78 + <div class="b-user-head">
  79 + <img :src="cmnt.user.profilePic" />
  80 + <span class="head-content">{{ cmnt.user.name }} </span>
  81 + <ul>
  82 + <li>
  83 + <span></span
  84 + ><img src="../assets/images/u-info-icon.png" />{{
  85 + cmnt.user.karmaPoints
  86 + }}pts
  87 + </li>
  88 + <li><span></span>{{dateGenerator(cmnt.createdAt)}}days ago</li>
  89 + </ul>
  90 + </div>
  91 + <!-- header -->
  92 + <p>
  93 + {{ cmnt.comment }}
  94 + </p>
  95 + <div class="joined_wrapper">
  96 + <ul class="joined-info info_bc_spc">
  97 + <li>
  98 + <img src="../assets/images/purple-heart.png" />
  99 + </li>
  100 + <li><a href="javasript:void(0);"> 0</a></li>
  101 + <li class="comment-spc">
  102 + <img src="../assets/images/purple-comment.png" />
  103 + </li>
  104 + <li><a href="javasript:void(0);"> {{cmnt.children.length}}</a></li>
  105 + </ul>
  106 + <div class="add_rply" v-if="!cmnt.childInput">
  107 + <input
  108 + type="text"
  109 + @click="eachRply(cmnt)"
  110 + class="add_Rply_C"
  111 + placeholder="Add your reply"
  112 + />
  113 + </div>
  114 + <!-- rly form -->
  115 + </div>
  116 + <!-- joined wrapper -->
  117 + </div>
  118 + <!-- full width -->
  119 + </div>
  120 + <div class="comments-footer each-ft" v-if="cmnt.childInput">
  121 + <textarea v-model="comment"></textarea>
  122 + <div class="comments-footer-wrp">
  123 + <a
  124 + @click="createChildComment(cmnt)"
  125 + href="javasript:void(0);"
  126 + class="add_comments_chat reply-Wdth"
  127 + >Reply</a
  128 + >
  129 + <a href="javasript:void(0);" class="discard_bt"
  130 + @click="discardRply(cmnt)"><img src="../assets/images/discard.svg"
  131 + /></a>
  132 + </div>
  133 + </div>
  134 + <!-- parent -->
  135 + <div class="child-full-width" v-for="(childCmnt, i) in cmnt.children" :key="i">
  136 + <div class="full-width">
  137 + <div class="b-user-head">
  138 + <img :src="childCmnt.user.profilePic" />
  139 + <span class="head-content">{{childCmnt.user.name }} </span>
  140 + <ul>
  141 + <li>
  142 + <span></span
  143 + ><img src="../assets/images/u-info-icon.png" />{{childCmnt.user.karmaPoints}}pts
  144 + </li>
  145 + <li><span></span>{{dateGenerator(childCmnt.createdAt)}}days ago</li>
  146 + </ul>
  147 + </div>
  148 + <p>
  149 + {{childCmnt.comment}}
  150 + </p>
  151 + <div class="joined_wrapper">
  152 + <ul class="joined-info info_bc_spc">
  153 + <li>
  154 + <img src="../assets/images/purple-heart.png" />
  155 + </li>
  156 + <li><a href="javasript:void(0);"> {{childCmnt.likes.length}}</a></li>
  157 +
  158 + </ul>
  159 +
  160 + </div>
  161 + </div>
  162 + </div>
  163 + <!-- eree -->
  164 +
  165 + <!-- comments footer -->
  166 + </li>
  167 + </ul>
  168 + </div>
  169 + <!-- bounce board body -->
  170 + <div class="comments-footer" v-if="parentInput">
  171 + <textarea v-model="comment"></textarea>
  172 + <div class="comments-footer-wrp">
  173 + <a
  174 + href="javasript:void(0);"
  175 + class="add_comments_chat"
  176 + @click="createComment"
  177 + ><img src="../assets/images/add-comment.svg" /> Comment</a
  178 + >
  179 + </div>
  180 + </div>
  181 + <!-- comments footer -->
  182 + </div>
  183 + </div>
  184 + <!-- bounceboard wrp -->
  185 + <!-- chat box -->
  186 +
  187 + <div class="single-author-comments">
  188 + <!-- <img class="s-user-comments" src="../assets/images/u-info.png" /> -->
  189 + <div class="ct-l-400">
  190 + <div class="single-author-li-comments">
  191 + <div class="a-intro-comments right-corner">
  192 + <p>
  193 + {{currentSlideData.payload.comments[0].comment}}
  194 + </p>
  195 + <ul class="rly-comment-set">
  196 + <li>
  197 + <img src="../assets/images/color-heart.svg" />
  198 + <a href="javascript:void(0);">0</a>
  199 + </li>
  200 + <li>
  201 + <img src="../assets/images/rply.svg" />
  202 + <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
  203 + </li>
  204 + </ul>
  205 + </div>
  206 +
  207 + </div> <!-- comments box -->
  208 + <div class="single-author-li-comments">
  209 + <div class="a-intro-comments right-corner">
  210 + <p>
  211 + {{currentSlideData.payload.comments[0].comment}}
  212 + </p>
  213 + <ul class="rly-comment-set">
  214 + <li>
  215 + <img src="../assets/images/color-heart.svg" />
  216 + <a href="javascript:void(0);">0</a>
  217 + </li>
  218 + <li>
  219 + <img src="../assets/images/rply.svg" />
  220 + <a href="javascript:void(0);" @click="open_ct_box">Reply</a>
  221 + </li>
  222 + </ul>
  223 + </div>
  224 +
  225 + </div> <!-- comments box -->
  226 + </div>
  227 + <img
  228 + class="s-user-comments m-0"
  229 + :src="currentSlideData.payload.metaData.authorImage"
  230 + />
  231 + <div class="comments-a-wrp ct-width">
  232 + <div class="single-author-li-comments ">
  233 + <div class="a-intro-comments custom-selected-style custom-selected-style-2">
  234 +
  235 + <div class="top-wrp">
  236 + {{currentSlideData.payload.insight.tag}} Insight <a href="#"><img src="../assets/images/link-red.svg" /></a>
  237 + </div>
  238 + <div class="top-head">{{currentSlideData.payload.insight.title}}</div>
  239 + <p>{{currentSlideData.payload.insight.description}}
  240 +</p>
  241 +<div class="footer">
  242 + <a href="#" class="cit-16">{{currentSlideData.payload.insight.citations.length}} Citations</a>
  243 + <a href="#" class="ft-share"><img src="../assets/images/reply-red.svg" /> Share from library</a>
  244 + </div><!-- footer -->
  245 +
  246 + </div><!-- comments box -->
  247 + </div><!-- single author comments -->
  248 + <!-- single author comments -->
  249 +
  250 + </div>
  251 + </div>
  252 + <!-- single author comments -->
  253 + <div class="footer-nav">
  254 + <div class="footer-top white-bg">
  255 + <div class="row">
  256 + <div class="col-6 col-sm-6 col-md-6 col-lg-6 c_hide">
  257 + <div class="row h-100p">
  258 + <div
  259 + class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 bord-r"
  260 + >
  261 + <div class="ft-comments-group testi-photos-ct">
  262 + <div class="c-with-photos">
  263 + <span class="count-comments"
  264 + >{{ commentList.length - 1 }}+ Comments</span
  265 + ><!-- count commets -->
  266 + <ul class="comments-photos">
  267 + <li><img src="../assets/images/c-photo-1.png" /></li>
  268 + <li><img src="../assets/images/c-photo-2.png" /></li>
  269 + <li><img src="../assets/images/c-photo-3.png" /></li>
  270 + </ul>
  271 + <!-- comment photos -->
  272 + </div>
  273 + <div class="comments-detail all-c-space">
  274 + <span
  275 + >{{ commentList[commentList.length - 1].user.name }}
  276 + <a href="javascript:void(0);" @click="open_ct_box"
  277 + >View All</a
  278 + ></span
  279 + >
  280 + <p>
  281 + <!-- I wonder what the difference between โ€œDunzo Assistantโ€
  282 + and โ€œPickup and Drop... -->
  283 + {{ commentList[commentList.length - 1].comment }}
  284 + </p>
  285 + </div>
  286 + <!-- comments detail -->
  287 + </div>
  288 + <!-- comments Group -->
  289 + </div>
  290 + </div>
  291 + </div>
  292 + <div class="col-4 col-sm-4 col-md-4 col-lg-4 c_hide">
  293 + <div class="comment-frm no-c-frm">
  294 + <div class="row">
  295 + <div class="col-8 col-sm-8 col-md-8 col-lg-10 col-xl-10">
  296 + <div class="form-group frm-wdth addfrm-spc">
  297 + <input
  298 + type="text"
  299 + class="form-control"
  300 + placeholder="Kathy, Something on your mind?"
  301 + id="open_ct_box"
  302 + v-model="comment"
  303 + />
  304 + </div>
  305 + </div>
  306 + <div class="col-2 col-sm-4 col-md-4 col-lg-4 col-xl-2">
  307 + <a
  308 + href="javascript:void(0);"
  309 + @click="createComment"
  310 + class="add-comment"
  311 + ><img src="../assets/images/add-comment.svg" />
  312 + Comment</a
  313 + >
  314 + </div>
  315 + </div>
  316 + <!-- comment from -->
  317 + </div>
  318 + </div>
  319 + <div class="col-2 col-sm-2 col-md-2 col-lg-2 col-xl-2">
  320 + <ul class="top-intro-bt">
  321 + <li>
  322 + <a href="javascript:void(0);" @click="goBack"
  323 + ><img src="../assets/images/skip-prev.svg" /> Prev</a
  324 + >
  325 + </li>
  326 + <li>
  327 + <a href="javascript:void(0);" @click="goNext"
  328 + ><img src="../assets/images/skip-next.svg" /> Skip to next
  329 + slide</a
  330 + >
  331 + </li>
  332 + </ul>
  333 + </div>
  334 + <!-- buttons list -->
  335 + </div>
  336 + </div>
  337 + <!-- footer top -->
  338 + <div class="footer-bottom">
  339 + <ul>
  340 + <li class="active"></li>
  341 + <li></li>
  342 + </ul>
  343 + </div>
  344 + <!-- footer top -->
  345 + </div>
  346 + <!-- footer -->
  347 + </div>
  348 + <!-- body wrapper -->
  349 + </div>
  350 + <!-- main wrapper -->
  351 + </main>
  352 +</template>
  353 +
  354 +<script>
  355 +import Vue from "vue";
  356 +import router from "../router";
  357 +import axios from "axios";
  358 +import moment from 'moment';
  359 +export default {
  360 + name: "noscreenshotSingleautho",
  361 +data() {
  362 + return {
  363 + allSlide: [],
  364 + currentSlideIndex: null,
  365 + currentSlideData: null,
  366 + //
  367 + usertoken: null,
  368 + commentList: [],
  369 + comment: null,
  370 + parentInput: true,
  371 + };
  372 + },
  373 + mounted() {
  374 + var allSlideData = localStorage.getItem(
  375 + "spotlight_slide" + this.$route.params.caseStudyId
  376 + );
  377 + if (allSlideData) {
  378 + this.allSlide = JSON.parse(allSlideData);
  379 + this.getCurrentSlideData();
  380 + }
  381 + var userdata = localStorage.getItem("spotlight_usertoken");
  382 + if (userdata) {
  383 + userdata = JSON.parse(userdata);
  384 + this.usertoken = userdata.token;
  385 + this.getComment();
  386 + }
  387 + },
  388 + methods: {
  389 + getCurrentSlideData() {
  390 + var i = this.allSlide.findIndex(
  391 + (slide_) => slide_.slideId == this.$route.params.slideId
  392 + );
  393 + this.currentSlideIndex = i;
  394 + this.currentSlideData = this.allSlide[i];
  395 + console.log("currentSlideData", this.currentSlideData);
  396 + },
  397 + goNext() {
  398 + this.currentSlideIndex++;
  399 + this.$router.push({
  400 + name: this.allSlide[this.currentSlideIndex].ur,
  401 + params: {
  402 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  403 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  404 + },
  405 + });
  406 + },
  407 + goBack() {
  408 + this.currentSlideIndex--;
  409 + this.$router.push({
  410 + name: this.allSlide[this.currentSlideIndex].ur,
  411 + params: {
  412 + caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
  413 + slideId: this.allSlide[this.currentSlideIndex].slideId,
  414 + },
  415 + });
  416 + },
  417 + createComment() {
  418 + console.log("===", this.comment);
  419 + var obj = {
  420 + caseStudyId: this.currentSlideData.caseStudyId,
  421 + slideId: this.currentSlideData.slideId,
  422 + comment: this.comment,
  423 +
  424 + };
  425 + axios
  426 + .post("/bounceBoard/comment", obj, {
  427 + headers: {
  428 + Authorization: "Bearer " + this.usertoken,
  429 + },
  430 + })
  431 + .then((response) => {
  432 + this.comment = null;
  433 + this.getComment();
  434 + console.log(response);
  435 + })
  436 + .catch((error) => {
  437 + if (error.response) {
  438 + this.$toaster.error(error.response.data.message);
  439 + }
  440 + });
  441 + },
  442 + createChildComment(cmnt) {
  443 + console.log(cmnt,"===", this.comment);
  444 + var obj = {
  445 + caseStudyId: this.currentSlideData.caseStudyId,
  446 + slideId: this.currentSlideData.slideId,
  447 + comment: this.comment,
  448 + parentId: cmnt._id,
  449 +
  450 + };
  451 + axios
  452 + .post("/bounceBoard/comment", obj, {
  453 + headers: {
  454 + Authorization: "Bearer " + this.usertoken,
  455 + },
  456 + })
  457 + .then((response) => {
  458 + this.comment = null;
  459 + this.discardRply(cmnt);
  460 + this.getComment();
  461 + console.log(response);
  462 + })
  463 + .catch((error) => {
  464 + if (error.response) {
  465 + this.$toaster.error(error.response.data.message);
  466 + }
  467 + });
  468 + },
  469 + getComment() {
  470 + axios
  471 + .get(
  472 + `/bounceBoard/comments?slideId=${this.currentSlideData.slideId}&caseStudyId=${this.currentSlideData.caseStudyId}`,
  473 + {
  474 + headers: {
  475 + Authorization: "Bearer " + this.usertoken,
  476 + },
  477 + }
  478 + )
  479 + .then((response) => {
  480 + console.log(response.data);
  481 + var comments = [];
  482 + var keys = Object.keys(response.data.data)
  483 + response.data.data
  484 + keys.forEach((key_) => {
  485 + comments.push(response.data.data[key_])
  486 + });
  487 + comments.forEach((coment_)=>{
  488 + coment_.childInput = false;
  489 + });
  490 + console.log("comments",comments)
  491 + this.commentList = comments;
  492 + })
  493 + .catch((error) => console.log(error));
  494 + },
  495 + dateGenerator(curreDate){
  496 + var todayDate = moment(new Date(), "DD.MM.YYYY");
  497 + var endDate = moment(new Date(curreDate), "DD.MM.YYYY");
  498 + var result = todayDate.diff(endDate, 'days');
  499 + return result;
  500 + },
  501 + goToLogin() {
  502 + this.$router.push("/");
  503 + },
  504 + goToSignUp() {
  505 + this.$router.push("/signup");
  506 + },
  507 + chtbox_close() {
  508 + $("#cht_box_close").removeClass("cht_close");
  509 + $("#open_ct_box, .c_hide").show();
  510 + $(".footer-top").addClass("white-bg");
  511 + },
  512 + open_ct_box() {
  513 + $("#cht_box_close").addClass("cht_close");
  514 + $("#open_ct_box, .c_hide").hide();
  515 + $(".footer-top").removeClass("white-bg");
  516 + },
  517 + eachRply(cmnt) {
  518 + cmnt.childInput = true;
  519 + this.parentInput = false;
  520 + },
  521 + discardRply(cmnt) {
  522 + cmnt.childInput = false;
  523 + this.parentInput = true;
  524 +
  525 + },
  526 + },
  527 +};
  528 +//
  529 +</script>
... ...
src/components/outro.vue
... ... @@ -28,22 +28,24 @@
28 28 <div class="thanks-l-wrp">
29 29 <div class="thanks-pay-wrp">
30 30 <!-- <img src="../assets/images/thanks.svg" class="thanks-img" /> -->
31   - <img :src="currentSlideData.payload.metaData.authorImage[0]" class="thanks-img" />
  31 + <img
  32 + :src="currentSlideData.payload.metaData.authorImage[0]"
  33 + class="thanks-img"
  34 + />
32 35 <div class="blacktext-wrp">
33 36 CHeck out other case studies here
34 37 <img src="../assets/images/arrow-bottom.svg" />
35 38 </div>
36   - <ul class="" >
  39 + <ul class="">
37 40 <li v-for="(study, i) in caseStudies" :key="i">
38 41 <a href="javascript:void(0);">
39 42 <img :src="study.intro.logoURL" />
40 43 <span
41   - ><img src="../assets/images/p-eye.svg" /> 0
42   - Views</span
  44 + ><img src="../assets/images/p-eye.svg" /> 0 Views</span
43 45 >
44 46 </a>
45 47 </li>
46   -
  48 +
47 49 <!-- <li class="payments-spc-57">
48 50 <a href="#">
49 51 <img src="../assets/images/g-pay.svg" />
... ... @@ -125,10 +127,9 @@
125 127 <li>
126 128 <p class="wdth">How would you rate this case study?</p>
127 129 <span class="rating-list">
128   - <a href="javascript:void(0);"
129   - ><img src="../assets/images/f-review.svg"
130   - /></a>
131   - <a href="javascript:void(0);"
  130 + <star-rating @rating-selected ="updateRating" v-bind:star-size="30" v-model="rating" active-color="#514da6">
  131 + </star-rating>
  132 + <!-- <a href="javascript:void(0);"
132 133 ><img src="../assets/images/f-review.svg"
133 134 /></a>
134 135 <a href="javascript:void(0);"
... ... @@ -136,7 +137,7 @@
136 137 /></a>
137 138 <a href="javascript:void(0);"
138 139 ><img src="../assets/images/e-review.svg"
139   - /></a>
  140 + /></a> -->
140 141 </span>
141 142 </li>
142 143 </ul>
... ... @@ -160,18 +161,24 @@
160 161 </li>
161 162 </ul>
162 163 </div>
  164 + <!-- <star-rating v-model="rating"></star-rating> -->
  165 +
163 166 <!-- follow us -->
164 167 <div class="p-users">
165 168 <span>Author</span>
166   - <h1>{{currentSlideData.payload.metaData.authors[0]}}</h1>
  169 + <h1>{{ currentSlideData.payload.metaData.authors[0] }}</h1>
167 170 <!-- <span>Author</span>
168 171 <h1>Pramod</h1>
169 172 <span>Author</span>
170 173 <h1>Sarthak</h1> -->
171   - <span>Designer</span>
172   - <h1>{{currentSlideData.payload.metaData.designer}}</h1>
173   - <span>Illustrations</span>
174   - <h1>{{currentSlideData.payload.metaData.illustrations}}</h1>
  174 + <span v-if="currentSlideData.payload.metaData.designer"
  175 + >Designer</span
  176 + >
  177 + <h1>{{ currentSlideData.payload.metaData.designer }}</h1>
  178 + <span v-if="currentSlideData.payload.metaData.illustrations"
  179 + >Illustrations</span
  180 + >
  181 + <h1>{{ currentSlideData.payload.metaData.illustrations }}</h1>
175 182 </div>
176 183 <!-- users -->
177 184 </div>
... ... @@ -219,6 +226,7 @@ export default {
219 226 allSlide: [],
220 227 currentSlideIndex: null,
221 228 currentSlideData: null,
  229 + rating: 0,
222 230 };
223 231 },
224 232 mounted() {
... ... @@ -229,6 +237,7 @@ export default {
229 237 this.allSlide = JSON.parse(allSlideData);
230 238 this.getCurrentSlideData();
231 239 this.getCaseStudies();
  240 + this.getRating();
232 241 }
233 242 },
234 243 methods: {
... ... @@ -278,6 +287,44 @@ export default {
278 287 .catch((error) => console.log(error));
279 288 }
280 289 },
  290 +
  291 + getRating() {
  292 + var userdata = localStorage.getItem("spotlight_usertoken");
  293 + if (userdata) {
  294 + userdata = JSON.parse(userdata);
  295 + axios
  296 + .get("/caseStudy/rating?caseStudyId="+this.$route.params.caseStudyId, {
  297 + headers: {
  298 + Authorization: "Bearer " + userdata.token,
  299 + },
  300 + })
  301 + .then((response) => {
  302 + this.rating = response.data.data.Avgrating;
  303 + })
  304 + .catch((error) => console.log(error));
  305 + }
  306 + },
  307 + updateRating() {
  308 + var userdata = localStorage.getItem("spotlight_usertoken");
  309 + if (userdata) {
  310 + userdata = JSON.parse(userdata);
  311 + var obj = {
  312 + "caseStudyId":this.$route.params.caseStudyId,
  313 + "rating":this.rating
  314 + }
  315 + axios
  316 + .post("/caseStudy/rating",obj, {
  317 + headers: {
  318 + Authorization: "Bearer " + userdata.token,
  319 + },
  320 + })
  321 + .then((response) => {
  322 + console.log("response",response)
  323 + // this.rating = response.data.data.Avgrating;
  324 + })
  325 + .catch((error) => console.log(error));
  326 + }
  327 + },
281 328 goToLogin() {
282 329 this.$router.push("/");
283 330 },
... ... @@ -290,3 +337,9 @@ export default {
290 337 },
291 338 };
292 339 </script>
  340 +<style>
  341 +.vue-star-rating-rating-text[data-v-fde73a0c] {
  342 + margin-left: 7px;
  343 + display: none;
  344 +}
  345 +</style>
... ...
... ... @@ -13,7 +13,9 @@ import { Auth0Plugin } from &quot;./auth&quot;
13 13 import Vuelidate from 'vuelidate'
14 14 import moment from 'moment'
15 15 import Toaster from 'v-toaster'
16   -
  16 +import StarRating from 'vue-star-rating'
  17 +
  18 +
17 19 // You need a specific loader for CSS files like https://github.com/webpack/css-loader
18 20 import 'v-toaster/dist/v-toaster.css'
19 21  
... ... @@ -38,6 +40,7 @@ Vue.config.productionTip = false
38 40  
39 41 Vue.prototype.moment = moment
40 42 axios.defaults.baseURL = 'http://174.138.121.70:3006/pg'
  43 +Vue.component('star-rating', VueStarRating.default);
41 44  
42 45 /* eslint-disable no-new */
43 46 new Vue({
... ...
src/router/index.js
... ... @@ -35,6 +35,8 @@ import ReadingFlowBounceBoard from &#39;@/components/ReadingFlowBounceBoard&#39;
35 35 import ReadingFlowBounceBoard_chat from '@/components/ReadingFlowBounceBoard_chat'
36 36 import Otp from '@/components/Otp'
37 37 import ChangePassword from '@/components/ChangePassword'
  38 +import noscreenshotSingleautho from '@/components/noscreenshotSingleautho'
  39 +
38 40  
39 41 import router from '../router'
40 42 Vue.use(Router)
... ... @@ -115,7 +117,7 @@ export default new Router({
115 117 component: SingleMobileInsight,
116 118 },
117 119 {
118   - path: '/two-screen-without-insight',
  120 + path: '/two-screen-without-insight/:caseStudyId/:slideId',
119 121 name: 'TwoScreenWithoutInsight',
120 122 component: TwoScreenWithoutInsight,
121 123 },
... ... @@ -140,7 +142,7 @@ export default new Router({
140 142 component: SingleScreengrabOneInsight,
141 143 },
142 144 {
143   - path: '/two-screen-with-insight',
  145 + path: '/two-screen-with-insight/:caseStudyId/:slideId',
144 146 name: 'TwoScreenWithInsight',
145 147 component: TwoScreenWithInsight,
146 148 },
... ... @@ -213,13 +215,20 @@ export default new Router({
213 215 path: '/changepassword',
214 216 name: 'ChangePassword',
215 217 component: ChangePassword,
216   - }
217   -
218   -
219   -
  218 + },
  219 + {
  220 + path: '/noscreenshot-s-autho/:caseStudyId/:slideId',
  221 + name: 'noscreenshotSingleautho',
  222 + component: noscreenshotSingleautho,
  223 + },
220 224 ],
221 225 scrollBehavior(to, from, savedPosition) {
222 226 this.seen = false
223 227 return { x: 0, y: 0 }
224 228 }
225   -})
226 229 \ No newline at end of file
  230 +})
  231 +
  232 +// noscreenshot-s-autho
  233 +//two-screen-without-insight
  234 +//single-m-screen-insight-one
  235 +//two-screen-with-insight
227 236 \ No newline at end of file
... ...