Merge pull request #19992 from overleaf/jel-cms-quote

[web] Add new quote option to CMS

GitOrigin-RevId: 5c66620eb755fc9af9c8ba22d64ff969c5c140ca

services/web/app/views/_mixins/quote.pug

@@ -14,6 +14,18 @@ mixin quoteLargeTextCentered(quote, person, position, affiliation, link, picture
 			if link
 				.quote-link !{link}
 
+mixin quoteLeftGreenBorder({quote, person, position, affiliation, link})
+	blockquote.quote-left-green-border
+		.quote !{quote}
+		footer
+			| #{person}
+			| #{position || affiliation ? ',' : ''}
+			| #{position}
+			| #{position && affiliation ? ' at ' : ''}
+			| #{affiliation}
+			if link
+				.quote-link !{link}
+
 mixin collinsQuote1
 	.card.card-dark-green-bg
 		-var quote = 'Overleaf is indispensable for us. We use it in our research, thesis writing, project proposals, and manuscripts for publication. When it comes to writing, it’s our main tool.'

services/web/frontend/stylesheets/app/cms-page.less

@@ -150,7 +150,7 @@
   /*
     quotes
   */
-  blockquote:not(.quote-large-text-centered) {
+  blockquote:not(.quote-large-text-centered):not(.quote-left-green-border) {
     margin: 0;
     position: relative;
     /*

services/web/frontend/stylesheets/components/quote.less

@@ -59,3 +59,39 @@ blockquote.quote-large-text-centered {
     }
   }
 }
+
+blockquote.quote-left-green-border {
+  border-left: 2px solid var(--green-60) !important;
+  text-align: left;
+  font-size: var(--font-size-07) !important;
+  line-height: var(--line-height-06) !important;
+  color: var(--neutral-90);
+  padding: var(--spacing-04) 0 var(--spacing-04) var(--spacing-06) !important;
+
+  // customize open/close quote placement.
+  // Otherwise, close is after footer and before is above quote
+  &:before,
+  &:after {
+    content: none;
+  }
+  .quote {
+    &:before {
+      content: open-quote;
+    }
+    &:after {
+      content: close-quote;
+    }
+  }
+
+  footer {
+    .heading-xs();
+    color: var(--neutral-70);
+    font-weight: 400;
+    margin: var(--spacing-09) 0 0 0;
+    padding: 0;
+  }
+
+  .quote-link {
+    margin-top: var(--spacing-05);
+  }
+}