Merge pull request #21026 from overleaf/as-gallery-begin-card

Move begin_now_card mixin to generic location and add to template gallery

GitOrigin-RevId: 6167e7063ecb18b9465613c0a25bbbdd83b5727a

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

@@ -0,0 +1,23 @@
+mixin begin_now_card()
+	- var registerURL = '/register'
+	- var plansURL = '/user/subscription/plans'
+	- var isUserLoggedIn = !!getSessionUser()
+	
+	div.card.card-pattern.cta-card
+		.card-body
+			p.dm-mono
+				span.font-size-display-xs
+					span.text-purple-bright \begin
+					span.text-green-bright {
+					span now
+					span.text-green-bright }
+			p #{translate("discover_why_people_worldwide_trust_overleaf", {count: 18})}
+			p
+				if !isUserLoggedIn
+					a.btn.btn-primary.card-link(
+						href=registerURL
+					) #{translate("sign_up_for_free")}
+				a.card-link(
+					class = isUserLoggedIn ? 'btn btn-primary' : 'btn btn-secondary'
+					href=plansURL
+				) #{translate("explore_all_plans")}

services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss

@@ -236,6 +236,28 @@
     --bs-card-spacer-x: var(--spacing-08);
   }
 
+  .cta-card {
+    .btn + .btn {
+      margin-left: var(--spacing-04);
+    }
+
+    p:has(.btn) {
+      margin-top: var(--spacing-09);
+
+      @include media-breakpoint-down(md) {
+        .btn {
+          width: 100%;
+          margin-left: 0;
+          margin-top: var(--spacing-05);
+        }
+
+        .btn:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+
   .badge-premium {
     --badge-font-weight: 600;
   }