How this page was made

KXBSparkHero.cshtml

    
@model Web.ViewModels.SparkViewModel
@using ContentModels = Umbraco.Web.PublishedContentModels;
@{
    Layout = "~/Views/Layouts/_Layout.cshtml";

    var colorGenerator = new KXB.Spark.DummyData.Generators.ColorGenerator();

    var small = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Small);
    small.Title = "Small hero";
    small.SubTitle = "With placeholder image";
    var medium = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Medium);
    medium.Title = "Medium hero";
    medium.SubTitle = "With placeholder image";
    var large = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Large);
    large.Title = "Large hero";
    large.SubTitle = "With placeholder image";
    var fullheight = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.FullHeight);
    fullheight.Title = "Full height hero";
    fullheight.SubTitle = "With placeholder image";
    var mediumWithoutImage = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Medium, hasBackgroundImage: false);
    mediumWithoutImage.Title = "Medium hero";
    mediumWithoutImage.SubTitle = "Without placeholder image";
    var mediumWithColor = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Medium, hasBackgroundImage: false);
    mediumWithColor.Title = "Medium hero";
    mediumWithColor.SubTitle = "With pink background color";
    mediumWithColor.BackgroundColor = "#F57E7E";
    var mediumWithBlueColorAndCenteredText = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Medium, hasBackgroundImage: false, hasCenteredText: true);
    mediumWithBlueColorAndCenteredText.Title = "Medium hero";
    mediumWithBlueColorAndCenteredText.SubTitle = "Medium with random background color and centered text";
    mediumWithBlueColorAndCenteredText.BackgroundColor = colorGenerator.GetRandomColor(KXB.Spark.DummyData.Generators.Types.ColorFormat.Hex);
    var mediumWithNavigationAsHeader = KXB.Spark.Hero.Hero.GenerateInstance(heroSize: KXB.Spark.Hero.HeroSize.Medium, hasBackgroundImage: false);
    mediumWithNavigationAsHeader.Title = "Medium hero";
    mediumWithNavigationAsHeader.SubTitle = "With navigation as header";
    mediumWithNavigationAsHeader.BackgroundColor = "#F57E7E";
    mediumWithNavigationAsHeader.HeroHeader =
        Html.Partial("~/Views/Partials/KXB.Spark/_HorizontalHeaderMenu.cshtml", KXB.Spark.HorizontalHeaderMenu.HorizontalHeaderMenu.GenerateInstance());
}

@Html.Partial("~/Views/Partials/_InstallationGuide.cshtml", Model.NugetModel)
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Small</h3>
    @Html.Partial(KXB.Spark.Hero.Hero.RazorViewPath, small)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", small)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Medium</h3>
    @Html.Partial(KXB.Spark.Hero.Hero.RazorViewPath, medium)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", medium)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Large</h3>
    @Html.Partial(KXB.Spark.Hero.Hero.RazorViewPath, large)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", large)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Fullheight</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_Hero.cshtml", fullheight)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", fullheight)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Medium without background image</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_Hero.cshtml", mediumWithoutImage)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", mediumWithoutImage)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Medium with pink background</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_Hero.cshtml", mediumWithColor)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", mediumWithColor)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Medium with random background color and centered text</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_Hero.cshtml", mediumWithBlueColorAndCenteredText)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", mediumWithBlueColorAndCenteredText)
</div>
<hr />
<div class="container">
    <h2 class="title">Preview</h2>
    <h3 class="subtitle">Medium navigation as header</h3>
    @Html.Partial("~/Views/Partials/KXB.Spark/_Hero.cshtml", mediumWithNavigationAsHeader)
    @Html.Partial("~/Views/Partials/_ModelPreview.cshtml", mediumWithNavigationAsHeader)
</div>