EDU-122: Blueprints - Hero section - all frameworks (BuilderIO#4023)

## Description
 
This PR introduces code for blueprints in the hero section across all
frameworks.
 
 Parent Jira: https://builder-io.atlassian.net/browse/EDU-122
React ticket: https://builder-io.atlassian.net/browse/EDU-645
this PR ticket: https://builder-io.atlassian.net/browse/EDU-652

Author: uttej-vsk

packages/sdks-tests/src/snippet-tests/blueprints-hero.spec.ts

@@ -9,27 +9,21 @@ test.describe('Hero Section', () => {
         'react-native-76-fabric',
         'solid',
         'solid-start',
-        'qwik-city',
-        'react-sdk-next-pages',
         'remix',
-        'hydrogen',
-        'react-sdk-next-14-app',
         'react-sdk-next-15-app',
         'nextjs-sdk-next-app',
-        'vue',
-        'nuxt',
-        'svelte',
-        'sveltekit',
-        'angular-17',
-        'angular-17-ssr',
         'angular-19-ssr',
         'gen1-react',
         'gen1-remix',
         'gen1-next14-pages',
         'gen1-next15-app',
       ].includes(packageName)
     );
-    await page.goto('/marketing-event');
+
+    const testUrl =
+      packageName === 'react-sdk-next-14-app' ? '/blueprints/marketing-event' : '/marketing-event';
+
+    await page.goto(testUrl);
   });
 
   test('should display the hero section with title and call-to-action', async ({ page }) => {

packages/sdks/snippets/angular-16-ssr/src/app/app.module.ts

@@ -19,6 +19,8 @@ import { CustomChildComponent } from './custom-child/custom-child.component';
 import { customChildResolver } from './custom-child/custom-child.resolver';
 import { editableRegionsResolver } from './editable-regions/editable-regions-resolver';
 import { EditableRegionComponent } from './editable-regions/editable-regions.component';
+import { HeroComponent } from './hero/hero.component';
+import { heroResolver } from './hero/hero.resolver';
 import { HomepageComponent } from './home/homepage.component';
 import { homepageResolver } from './home/homepage.resolver';
 import { LivePreviewComponent } from './live-preview/live-preview.component';
@@ -81,6 +83,11 @@ import { productEditorialResolver } from './product-editorial/product-editorial.
         path: 'live-preview',
         component: LivePreviewComponent,
       },
+      {
+        path: 'marketing-event',
+        component: HeroComponent,
+        resolve: { content: heroResolver },
+      },
       {
         path: 'home',
         component: HomepageComponent,

packages/sdks/snippets/angular-16-ssr/src/app/hero/hero.component.ts

@@ -0,0 +1,43 @@
+import { CommonModule } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import {
+  Content,
+  isPreviewing,
+  type BuilderContent,
+} from '@builder.io/sdk-angular';
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [Content, CommonModule],
+  template: `
+    <!-- Your nav goes here -->
+    <!-- Hero Section -->
+    <div *ngIf="productHero || isPreviewing(); else notFound">
+      <builder-content
+        [model]="model"
+        [content]="productHero"
+        [apiKey]="apiKey"
+      ></builder-content>
+    </div>
+    <ng-template #notFound>
+      <div>404</div>
+    </ng-template>
+    <!-- The rest of your page goes here -->
+  `,
+})
+export class HeroComponent implements OnInit {
+  productHero: BuilderContent | null = null;
+  model = 'collection-hero';
+  apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+  isPreviewing = isPreviewing;
+
+  constructor(private route: ActivatedRoute) {}
+
+  async ngOnInit() {
+    this.route.data.subscribe((data: any) => {
+      this.productHero = data.content;
+    });
+  }
+}

packages/sdks/snippets/angular-16-ssr/src/app/hero/hero.resolver.ts

@@ -0,0 +1,19 @@
+import {
+  ActivatedRouteSnapshot,
+  ResolveFn,
+  RouterStateSnapshot,
+} from '@angular/router';
+import { BuilderContent, fetchOneEntry } from '@builder.io/sdk-angular';
+
+export const heroResolver: ResolveFn<BuilderContent | null> = async (
+  _route: ActivatedRouteSnapshot,
+  state: RouterStateSnapshot
+) => {
+  return await fetchOneEntry({
+    model: 'collection-hero',
+    apiKey: 'ee9f13b4981e489a9a1209887695ef2b',
+    userAttributes: {
+      urlPath: state.url,
+    },
+  });
+};

packages/sdks/snippets/angular-16/src/app/app.module.ts

@@ -16,11 +16,13 @@ import { CustomChildComponent } from './custom-child/custom-child.component';
 import { CustomHeroComponent } from './custom-child/custom-hero/custom-hero.component';
 import { CustomColumnsComponent } from './editable-regions/custom-columns/custom-columns.component';
 import { EditableRegionComponent } from './editable-regions/editable-regions.component';
+import { HeroComponent } from './hero/hero.component';
 import { HomepageComponent } from './home/homepage.component';
 import { LivePreviewComponent } from './live-preview/live-preview.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
 import { ProductDetailsComponent } from './product-details/product-details.component';
 import { ProductEditorialComponent } from './product-editorial/product-editorial.component';
+
 @NgModule({
   declarations: [AppComponent],
   imports: [
@@ -56,6 +58,7 @@ import { ProductEditorialComponent } from './product-editorial/product-editorial
       },
       { path: 'advanced-child', component: AdvancedChildComponent },
       { path: 'live-preview', component: LivePreviewComponent },
+      { path: 'marketing-event', component: HeroComponent },
       { path: 'home', component: HomepageComponent },
       { path: '**', component: CatchAllComponent },
     ]),

packages/sdks/snippets/angular-16/src/app/hero/hero.component.ts

@@ -0,0 +1,46 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import {
+  Content,
+  fetchOneEntry,
+  isPreviewing,
+  type BuilderContent,
+} from '@builder.io/sdk-angular';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [Content, CommonModule],
+  template: `
+    <!-- Your nav goes here -->
+    <!-- Hero Section -->
+    <div *ngIf="productHero || isPreviewing(); else notFound">
+      <builder-content
+        [model]="model"
+        [content]="productHero"
+        [apiKey]="apiKey"
+      ></builder-content>
+    </div>
+    <ng-template #notFound>
+      <div>404</div>
+    </ng-template>
+    <!-- The rest of your page goes here -->
+  `,
+})
+export class HeroComponent {
+  productHero: BuilderContent | null = null;
+
+  isPreviewing = isPreviewing;
+  model = 'collection-hero';
+  apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+  async ngOnInit() {
+    this.productHero = await fetchOneEntry({
+      model: this.model,
+      apiKey: this.apiKey,
+      userAttributes: {
+        urlPath: window.location.pathname,
+      },
+    });
+  }
+}

packages/sdks/snippets/angular-17-ssr/src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { BlogArticleComponent } from './blog-article/blog-article.component';
 import { CatchAllComponent } from './catch-all/catch-all.component';
 import { CustomChildComponent } from './custom-child/custom-child.component';
 import { EditableRegionComponent } from './editable-regions/editable-regions.component';
+import { HeroComponent } from './hero/hero.component';
 import { HomepageComponent } from './home/homepage.component';
 import { LivePreviewComponent } from './live-preview/live-preview.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
@@ -25,8 +26,10 @@ export const routes: Routes = [
     path: 'editable-region',
     component: EditableRegionComponent,
   },
+  { path: 'marketing-event', component: HeroComponent },
   { path: 'advanced-child', component: AdvancedChildComponent },
   { path: 'live-preview', component: LivePreviewComponent },
+  { path: 'marketing-event', component: HeroComponent },
   { path: 'home', component: HomepageComponent },
   { path: '**', component: CatchAllComponent },
 ];

packages/sdks/snippets/angular-17-ssr/src/app/hero/hero.component.ts

@@ -0,0 +1,47 @@
+import { Component, inject, type OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  Content,
+  fetchOneEntry,
+  isPreviewing,
+  type BuilderContent,
+} from '@builder.io/sdk-angular';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [Content],
+  template: `
+    <!-- Your nav goes here -->
+    <!-- Hero Section -->
+    @if (productHero || isPreviewing()) {
+      <builder-content
+        [model]="model"
+        [content]="productHero"
+        [apiKey]="apiKey"
+      ></builder-content>
+    } @else {
+      <div>404</div>
+    }
+    <!-- The rest of your page goes here -->
+  `,
+})
+export class HeroComponent implements OnInit {
+  productHero: BuilderContent | null = null;
+  model = 'collection-hero';
+  apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+  isPreviewing = isPreviewing;
+
+  private router = inject(Router);
+
+  async ngOnInit() {
+    this.productHero = await fetchOneEntry({
+      model: this.model,
+      apiKey: this.apiKey,
+      userAttributes: {
+        urlPath: this.router.url,
+      },
+    });
+  }
+}

packages/sdks/snippets/angular-17/src/app/app.routes.ts

@@ -5,6 +5,7 @@ import { BlogArticleComponent } from './blog-article/blog-article.component';
 import { CatchAllComponent } from './catch-all/catch-all.component';
 import { CustomChildComponent } from './custom-child/custom-child.component';
 import { EditableRegionComponent } from './editable-regions/editable-regions.component';
+import { HeroComponent } from './hero/hero.component';
 import { HomepageComponent } from './home/homepage.component';
 import { LivePreviewComponent } from './live-preview/live-preview.component';
 import { NavBarComponent } from './nav-bar/nav-bar.component';
@@ -27,6 +28,7 @@ export const routes: Routes = [
   },
   { path: 'advanced-child', component: AdvancedChildComponent },
   { path: 'live-preview', component: LivePreviewComponent },
+  { path: 'marketing-event', component: HeroComponent },
   { path: 'home', component: HomepageComponent },
   { path: '**', component: CatchAllComponent },
 ];

packages/sdks/snippets/angular-17/src/app/hero/hero.component.ts

@@ -0,0 +1,47 @@
+import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import {
+  Content,
+  fetchOneEntry,
+  isPreviewing,
+  type BuilderContent,
+} from '@builder.io/sdk-angular';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [Content],
+  template: `
+    <!-- Your nav goes here -->
+    <!-- Hero Section -->
+    @if (productHero || isPreviewing()) {
+      <builder-content
+        [model]="model"
+        [content]="productHero"
+        [apiKey]="apiKey"
+      ></builder-content>
+    } @else {
+      <div>404</div>
+    }
+    <!-- The rest of your page goes here -->
+  `,
+})
+export class HeroComponent {
+  productHero: BuilderContent | null = null;
+
+  isPreviewing = isPreviewing;
+  model = 'collection-hero';
+  apiKey = 'ee9f13b4981e489a9a1209887695ef2b';
+
+  private router = inject(Router);
+
+  async ngOnInit() {
+    this.productHero = await fetchOneEntry({
+      model: this.model,
+      apiKey: this.apiKey,
+      userAttributes: {
+        urlPath: this.router.url,
+      },
+    });
+  }
+}