Merge pull request #21272 from overleaf/jel-gallery-categories-images

[web] Update categories images for gallery redesign

GitOrigin-RevId: 4a8afef62af5e873f63ce90f976fe924ba9ecbe9

services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss

@@ -107,12 +107,6 @@
 
   .gallery-container {
     --bs-gutter-y: var(--spacing-09);
-
-    .thumbnail {
-      background-color: var(--bg-light-secondary);
-      aspect-ratio: 1 / 1.414; // A4 Paper
-      object-fit: contain;
-    }
   }
 
   .gallery-thumbnail {
@@ -122,11 +116,18 @@
       display: inline-block;
     }
 
+    .thumbnail,
+    .thumbnail-tag {
+      width: 100%;
+      margin: 0 0 var(--spacing-08) 0;
+    }
+
     .thumbnail {
+      background-color: var(--bg-light-secondary);
+      aspect-ratio: 1 / 1.414; // A4 Paper
+      object-fit: contain;
       border-radius: var(--border-radius-base);
       box-shadow: 0 var(--spacing-01) var(--spacing-02) rgb(0 0 0 / 10%);
-      margin: 0 0 var(--spacing-08) 0;
-      width: 100%;
     }
 
     .caption {
@@ -183,6 +184,10 @@
     margin-top: var(--spacing-16);
     margin-bottom: var(--spacing-16);
 
+    a {
+      width: 100%;
+    }
+
     h2 {
       margin-bottom: var(--spacing-09);
     }

services/web/public/img/website-redesign/gallery/academic-journal.svg

@@ -0,0 +1,11 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#F1A4A1"/>
+    <rect x="195" y="86" width="111" height="22" rx="10" fill="#DADBEB"/>
+    <rect x="195" y="120" width="111" height="22" rx="10" fill="#F9D880"/>
+    <rect x="195" y="155" width="111" height="63" rx="10" fill="#DADBEB"/>
+    <rect x="78" y="86" width="111" height="22" rx="10" fill="#F9D880"/>
+    <rect x="136" y="55" width="111" height="22" rx="10" fill="#F9D880"/>
+    <rect x="78" y="23" width="228" height="22" rx="10" fill="#F9D880"/>
+    <rect x="78" y="120" width="111" height="63" rx="10" fill="#DADBEB"/>
+    <rect x="78" y="196" width="111" height="22" rx="10" fill="#F9D880"/>
+</svg>

services/web/public/img/website-redesign/gallery/bibliography.svg

@@ -0,0 +1,15 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_6696_10278)">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#F9D880"/>
+    <path d="M44.5508 83.7639C44.8142 82.4807 45.9436 81.5596 47.2536 81.5596H333.385C335.32 81.5596 336.447 83.7453 335.325 85.3216C330.323 92.3476 330.323 101.772 335.325 108.798C336.447 110.374 335.32 112.56 333.385 112.56H47.2025C45.9211 112.56 44.8151 111.661 44.5524 110.407C42.7296 101.706 42.7115 92.7235 44.4992 84.0151L44.5508 83.7639Z" fill="#C0A2CA"/>
+    <path d="M332.554 150.328C332.233 152.256 330.564 153.67 328.609 153.67L53.6131 153.67C52.4728 153.67 51.7767 152.416 52.3792 151.448C58.9631 140.87 58.9631 127.469 52.3792 116.891C51.7767 115.923 52.4728 114.67 53.6131 114.67L328.609 114.67C330.564 114.67 332.233 116.083 332.554 118.011L333.054 121.005C334.508 129.721 334.508 138.618 333.054 147.334L332.554 150.328Z" fill="#80CB9C"/>
+    <path d="M337.801 170.96C337.594 171.456 337.109 171.78 336.571 171.78L46.8211 171.78C46.2773 171.78 45.9782 171.147 46.3233 170.727C49.6387 166.689 49.6387 160.87 46.3233 156.832C45.9782 156.412 46.2773 155.78 46.8211 155.78L336.572 155.78C337.109 155.78 337.594 156.103 337.801 156.599C339.718 161.194 339.718 166.365 337.801 170.96Z" fill="#F1A4A1"/>
+    <path d="M66.2392 175.844C66.4667 174.707 67.4645 173.89 68.6233 173.89L311.2 173.89C311.999 173.89 312.451 174.805 311.966 175.439C307.479 181.314 307.479 189.465 311.966 195.34C312.451 195.975 311.999 196.89 311.2 196.89L68.6233 196.89C67.4645 196.89 66.4667 196.072 66.2392 194.935C64.9777 188.634 64.9777 182.145 66.2392 175.844Z" fill="#80CB9C"/>
+    <path d="M44.8927 202.889C44.953 200.724 46.7254 199 48.8911 199L334.208 199C335.817 199 336.767 200.802 335.859 202.13L333.794 205.145C326.014 216.511 326.014 231.489 333.794 242.855C335.578 245.461 333.712 249 330.554 249L48.8911 249C46.7253 249 44.953 247.276 44.8927 245.111L44.3047 224L44.8927 202.889Z" fill="#C0A2CA"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_6696_10278">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>

services/web/public/img/website-redesign/gallery/book.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#80CB9C"/>
+    <rect x="106.664" y="62.4418" width="155.151" height="59.8427" rx="4" transform="rotate(90 106.664 62.4418)" fill="#C0A2CA"/>
+    <rect x="204.773" y="62.4418" width="155.151" height="37.3845" rx="4" transform="rotate(90 204.773 62.4418)" fill="#F1A4A1"/>
+    <rect x="160.344" y="42.7887" width="174.804" height="46.6421" rx="4" transform="rotate(90 160.344 42.7887)" fill="#DADBEB"/>
+    <rect x="242.289" y="28.983" width="188.609" height="30.4748" rx="4" transform="rotate(90 242.289 28.983)" fill="#C0A2CA"/>
+    <rect x="289.789" y="40.9396" width="171.704" height="42.0938" rx="4" transform="rotate(73.9801 289.789 40.9396)" fill="#DADBEB"/>
+</svg>

services/web/public/img/website-redesign/gallery/calendar.svg

@@ -0,0 +1,9 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#F1A4A1"/>
+    <rect x="48.5391" y="34.7906" width="286.922" height="170.419" rx="10" fill="#DADBEB"/>
+    <ellipse cx="106.899" cy="84.5302" rx="38.751" ry="38.3239" fill="#80CB9C"/>
+    <rect x="169.734" y="46.2063" width="150.881" height="30.9852" rx="6" fill="#80CB9C"/>
+    <rect x="169.734" y="85.3455" width="150.881" height="30.9852" rx="6" fill="#80CB9C"/>
+    <rect x="169.734" y="124.485" width="150.881" height="30.9852" rx="6" fill="#80CB9C"/>
+    <rect x="169.734" y="163.624" width="150.881" height="30.9852" rx="6" fill="#80CB9C"/>
+</svg>

services/web/public/img/website-redesign/gallery/cv.svg

@@ -1,4 +1,4 @@
-<svg width="384" height="240" viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#clip0_6696_10233)">
 <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#80CB9C"/>
 <rect x="18" y="18" width="348" height="122" rx="10" fill="#DADBEB"/>

services/web/public/img/website-redesign/gallery/formal-letter.svg

@@ -0,0 +1,18 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_6696_10369)">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#80CB9C"/>
+    <rect x="358.875" y="298.361" width="333.742" height="238.098" rx="5" transform="rotate(-180 358.875 298.361)" fill="#C0A2CA"/>
+    <path d="M358.875 72.3632C358.875 78.9906 353.502 84.3632 346.875 84.3632L37.1328 84.3631C30.5054 84.3631 25.1328 78.9905 25.1328 72.3631L25.1328 35.7403C25.1328 34.6357 26.0282 33.7403 27.1328 33.7403L356.875 33.7403C357.98 33.7403 358.875 34.6358 358.875 35.7403L358.875 72.3632Z" fill="#DADBEB"/>
+    <line x1="173.926" y1="87.778" x2="209.449" y2="146.754" stroke="#DADBEB" stroke-width="3"/>
+    <line x1="210.112" y1="86.7354" x2="174.58" y2="148.278" stroke="#DADBEB" stroke-width="3"/>
+    <circle cx="192" cy="83.552" r="20" fill="#80CB9C"/>
+    <circle cx="192" cy="152.528" r="20" fill="#80CB9C"/>
+    <circle cx="192" cy="152.528" r="5" fill="#DADBEB"/>
+    <circle cx="192" cy="83.552" r="5" fill="#DADBEB"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_6696_10369">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>

services/web/public/img/website-redesign/gallery/homework.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_6696_10327)">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#F9D880"/>
+    <rect x="18" y="86" width="50" height="50" rx="25" fill="#80CB9C"/>
+    <rect x="18" y="152" width="50" height="50" rx="25" fill="#F1A4A1"/>
+    <rect x="18" y="218" width="50" height="50" rx="25" fill="#80CB9C"/>
+    <rect x="85.3438" y="158" width="350" height="41" rx="20.5" fill="#C0A2CA"/>
+    <rect x="85.3516" y="92" width="350" height="41" rx="20.5" fill="#C0A2CA"/>
+    <rect x="85.3438" y="224" width="350" height="41" rx="20.5" fill="#C0A2CA"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_6696_10327">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>

services/web/public/img/website-redesign/gallery/newsletter.svg

@@ -0,0 +1,16 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_6696_10355)">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#F1A4A1"/>
+    <rect x="25.7188" y="91.6661" width="317.492" height="308.291" rx="10" transform="rotate(-13.0453 25.7188 91.6661)" fill="#DADBEB"/>
+    <rect x="4.78906" y="94.0269" width="315" height="300" rx="10" transform="rotate(-17.3674 4.78906 94.0269)" fill="#C0A2CA"/>
+    <rect x="53.9453" y="101.774" width="226.313" height="46.3541" rx="4" transform="rotate(-17.3674 53.9453 101.774)" fill="#DADBEB"/>
+    <rect x="49.9609" y="172.056" width="132" height="147.424" rx="4" transform="rotate(-17.3674 49.9609 172.056)" fill="#DADBEB"/>
+    <rect x="186.836" y="129.152" width="132" height="85.3541" rx="4" transform="rotate(-17.3674 186.836 129.152)" fill="#DADBEB"/>
+    <rect x="213.641" y="216.327" width="132" height="85.3541" rx="4" transform="rotate(-17.3674 213.641 216.327)" fill="#DADBEB"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_6696_10355">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>

services/web/public/img/website-redesign/gallery/poster.svg

@@ -0,0 +1,14 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_6696_10315)">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#80CB9C"/>
+    <rect x="18" y="18" width="348" height="332" rx="10" fill="#DADBEB"/>
+    <rect x="188.898" y="120" width="139.141" height="128.762" rx="10" transform="rotate(90 188.898 120)" fill="#F9D880"/>
+    <rect x="324.859" y="120" width="139.141" height="128.762" rx="10" transform="rotate(90 324.859 120)" fill="#F9D880"/>
+    <rect x="56.0469" y="34.998" width="271.918" height="71.4513" rx="10" fill="#F1A4A1"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_6696_10315">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>

services/web/public/img/website-redesign/gallery/presentation.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#C0A2CA"/>
+    <rect x="67" y="18" width="249" height="163" rx="10" fill="#80CB9C"/>
+    <rect x="137" y="189" width="109" height="33" rx="10" fill="#F9D880"/>
+</svg>

services/web/public/img/website-redesign/gallery/report.svg

@@ -0,0 +1,8 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#DADBEB"/>
+    <rect x="119" y="10" width="239" height="220" rx="10" fill="#F9D880"/>
+    <rect x="85" y="57" width="231" height="48" rx="10" fill="#80CB9C"/>
+    <rect x="85" y="113" width="231" height="18" rx="9" fill="#80CB9C"/>
+    <rect x="195" y="139" width="121" height="18" rx="9" fill="#80CB9C"/>
+    <rect x="195" y="167" width="121" height="18" rx="9" fill="#80CB9C"/>
+</svg>

services/web/public/img/website-redesign/gallery/thesis.svg

@@ -0,0 +1,17 @@
+<svg viewBox="0 0 384 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clip-path="url(#clip0_6696_10259)">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="#F9D880"/>
+    <rect x="60" y="226" width="1033" height="31" fill="#80CB9C"/>
+    <rect x="20" y="186" width="1032" height="30" fill="#F1A4A1"/>
+    <rect x="121" y="145" width="1032" height="31" fill="#DADBEB"/>
+    <rect x="60" y="105" width="1033" height="31" fill="#F1A4A1"/>
+    <rect x="81" y="65" width="1032" height="31" fill="#80CB9C"/>
+    <rect x="40" y="25" width="1032" height="30" fill="#DADBEB"/>
+    <rect x="101" y="-16" width="1032" height="31" fill="#F1A4A1"/>
+    </g>
+    <defs>
+    <clipPath id="clip0_6696_10259">
+    <path d="M0 8.00001C0 3.58173 3.58172 0 8 0H376C380.418 0 384 3.58172 384 8V232C384 236.418 380.418 240 376 240H7.99999C3.58171 240 0 236.418 0 232V8.00001Z" fill="white"/>
+    </clipPath>
+    </defs>
+</svg>