feat(editor): Add lead enrichment suggestions to workflow list (#8042)

## Summary
We want to show lead enrichment template suggestions to cloud users that
agreed to this. This PR introduces the front-end part of this feature
- Handoff document
- Figma Hi-fi
- [How to
test](https://linear.app/n8n/issue/ADO-1549/[n8n-fe]-update-workflows-list-page-to-show-fake-door-templates#comment-b6644c99)

Tests are being worked on in a separate PR

## Related tickets and issues
Fixes ADO-1546
Fixes ADO-1549
Fixes ADO-1604

## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
   > A feature is not complete without tests.

---------

Co-authored-by: ricardo <ricardoespinoza105@gmail.com>

packages/editor-ui/src/components/TemplatesInfoCarousel.vue

@@ -11,15 +11,26 @@
 			<Card v-for="n in loading ? 4 : 0" :key="`loading-${n}`" :loading="loading" />
 			<TemplatesInfoCard
 				v-for="collection in loading ? [] : collections"
+				data-test-id="templates-info-card"
 				:key="collection.id"
 				:collection="collection"
+				:showItemCount="showItemCount"
+				:width="cardsWidth"
 				@click="(e) => onCardClick(e, collection.id)"
 			/>
 		</agile>
-		<button v-show="carouselScrollPosition > 0" :class="$style.leftButton" @click="scrollLeft">
+		<button
+			v-show="showNavigation && carouselScrollPosition > 0"
+			:class="{ [$style.leftButton]: true }"
+			@click="scrollLeft"
+		>
 			<font-awesome-icon icon="chevron-left" />
 		</button>
-		<button v-show="!scrollEnd" :class="$style.rightButton" @click="scrollRight">
+		<button
+			v-show="showNavigation && !scrollEnd"
+			:class="{ [$style.rightButton]: true }"
+			@click="scrollRight"
+		>
 			<font-awesome-icon icon="chevron-right" />
 		</button>
 	</div>
@@ -47,6 +58,18 @@ export default defineComponent({
 		loading: {
 			type: Boolean,
 		},
+		showItemCount: {
+			type: Boolean,
+			default: true,
+		},
+		showNavigation: {
+			type: Boolean,
+			default: true,
+		},
+		cardsWidth: {
+			type: String,
+			default: '240px',
+		},
 	},
 	watch: {
 		collections() {
@@ -68,7 +91,8 @@ export default defineComponent({
 	data() {
 		return {
 			carouselScrollPosition: 0,
-			cardWidth: 240,
+			cardWidth: parseInt(this.cardsWidth, 10),
+			sliderWidth: 0,
 			scrollEnd: false,
 			listElement: null as null | Element,
 		};
@@ -175,6 +199,7 @@ export default defineComponent({
 .rightButton {
 	composes: button;
 	right: -30px;
+
 	&:after {
 		right: 27px;
 		background: linear-gradient(
@@ -204,9 +229,5 @@ export default defineComponent({
 		overflow-x: auto;
 		transition: all 1s ease-in-out;
 	}
-
-	&__track {
-		width: 50px;
-	}
 }
 </style>