Merge pull request #18857 from overleaf/jel-plans-page-css

[web] Add quotes to new plans page variants

GitOrigin-RevId: 794692730a7a6846bf4e43021c34798e9a2605da

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

@@ -13,3 +13,27 @@ mixin quoteLargeTextCentered(quote, person, position, affiliation, link, picture
 					div #{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.'
+		-var quotePerson = 'Christopher Collins'
+		-var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University'
+		-var quotePersonImg = buildImgPath("advocates/collins.jpg")
+		+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
+
+mixin collinsQuote2
+	.card.card-dark-green-bg
+		-var quote = 'We are writing collaboratively right up until the last minute. We are faced with deadlines all the time, and Overleaf gives us the ability to polish right up until the last possible second.'
+		-var quotePerson = 'Christopher Collins'
+		-var quotePersonPosition = 'Associate Professor and Lab Director, Ontario Tech University'
+		-var quotePersonImg = buildImgPath("advocates/collins.jpg")
+		+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)
+
+mixin bennettQuote1
+	.card.card-dark-green-bg
+		-var quote = 'With Overleaf, we now have a process for developing technical documentation which has virtually eliminated the time required to properly format and layout documents.'
+		-var quotePerson = 'Andrew Bennett'
+		-var quotePersonPosition = 'Software Architect, Symplectic'
+		-var quotePersonImg = buildImgPath("advocates/bennett.jpg")
+		+quoteLargeTextCentered(quote, quotePerson, quotePersonPosition, null, null, quotePersonImg, quotePerson)

services/web/app/views/subscriptions/plans-light-design.pug

@@ -1,4 +1,5 @@
 extends ../layout-website-redesign
+include ../_mixins/quote
 
 block vars
 	- entrypoint = 'pages/user/subscription/plans-v2/plans-v2-main'
@@ -12,7 +13,7 @@ block append meta
 
 block content
 	main.website-redesign#main-content
-		.plans
+		.plans-page
 			.container
 				//- if showInrGeoBanner
 				//- 	div.notification.notification-type-success.text-centered
@@ -37,9 +38,20 @@ block content
 					
 				+currency_and_payment_methods()
 
-				include ./plans/_university_info
+				//- TODO: hide for groups/students
+				.plans-page-quote-row
+					+collinsQuote1()
+
+				//- TODO: hide for individual/students
+				.plans-page-quote-row
+					+bennettQuote1()
+
+				//- TODO: hide for groups/students
+				.plans-page-quote-row
+					+collinsQuote2()
 
-				include ./plans/_quotes
+
+				include ./plans/_university_info
 
 				include ./plans/_faq
 

services/web/frontend/stylesheets/app/plans/plans-v2.less

@@ -80,6 +80,65 @@
   }
 }
 
+.plans-page {
+  p {
+    color: @neutral-70;
+    margin-bottom: @line-height-computed;
+  }
+
+  .plans-header {
+    h1,
+    h2 {
+      color: @neutral-70;
+    }
+  }
+
+  .circle {
+    font-size: 1.5rem;
+    font-weight: 700;
+    padding: 46px 18px;
+    margin: 0 auto @line-height-computed;
+    text-shadow: 0 -1px 1px darken(@link-color, 10%);
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    background-color: @brand-secondary;
+    color: white;
+    white-space: nowrap;
+    line-height: 1;
+
+    .small {
+      color: rgba(255, 255, 255, 0.85);
+      font-size: @font-size-base * 0.8;
+    }
+  }
+
+  .circle-lg {
+    height: 180px;
+    padding: 70px 8px;
+    width: 180px;
+  }
+
+  .circle-subtext {
+    font-size: 1rem;
+  }
+
+  .circle-img {
+    float: right;
+
+    @media (max-width: @screen-sm-max) {
+      float: left;
+      margin: 0 15px;
+    }
+  }
+
+  @media (max-width: @screen-xs-max) {
+    [data-ol-current-view='group'] [data-ol-plans-v2-m-a-switch-container] {
+      display: none;
+    }
+  }
+}
+
 .plans-v2-top-switch ul.plans-v2-nav {
   display: flex;
   justify-content: center;
@@ -1290,7 +1349,7 @@ p.plans-v2-table-green-highlighted-text {
 }
 
 .website-redesign {
-  .plans {
+  .plans-page {
     padding-top: calc(var(--spacing-16) + var(--header-height));
 
     h1 {
@@ -1307,3 +1366,7 @@ p.plans-v2-table-green-highlighted-text {
     }
   }
 }
+
+.plans-page-quote-row {
+  margin: var(--spacing-13) 0;
+}

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

@@ -26,6 +26,7 @@ blockquote.quote-large-text-centered {
 
   .quote-img {
     img {
+      border-radius: 50%;
       height: 64px;
       max-width: 64px;
     }