CatherineLynwood/CatherineLynwood/Views/TheAlphaFlame/Characters.cshtml

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}

@{
    ViewData["Title"] = "Meet The Charaters";
}

<div class="row">
    <div class="col-12">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a asp-controller="Home" asp-action="Index">Home</a></li>
                <li class="breadcrumb-item"><a asp-controller="TheAlphaFlame" asp-action="Index">The Alpha Flame</a></li>
                <li class="breadcrumb-item active" aria-current="page">Meet The Characters</li>
            </ol>
        </nav>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <h1 class="text-center mb-4">Meet the Characters</h1>
        <p>
            When creating a character, I typically start with a visual prompt. I look for a photo of someone who resembles the character I envision, using it as inspiration to craft their description. If I can't find the right match, I turn to AI to generate an image. I refine the prompts and make adjustments until the result aligns with the person I see in my mind’s eye. This image then serves as a reference throughout the writing process. 
        </p>
        <p>
            I thought it would be fun to share these images with you and give you a little information about their character, but not too much as I don't want to give the plot away.
        </p>
        <p>
            The characters in <i>The Alpha Flame</i> are complex, multi-dimensional individuals with unique personalities, histories, and motivations. Each character has a distinct voice, a story to tell, and a role to play in the unfolding narrative. As the story progresses, these characters grow, change, and reveal new facets of themselves, adding depth and richness to the world of the novel.
        </p>
        <p>
            Explore the stories of the captivating characters in <i>The Alpha Flame</i>. Click on their thumbnails to learn more about each one.
        </p>
        <div class="row g-4">
            <!-- Maggie -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Maggie" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="maggie-grant.png" alt="Maggie Grant" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Maggie Grant</p>
                    </div>
                </a>
            </div>
            <!-- Beth -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Beth" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="beth-3.png" alt="Beth Fletcher" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Beth Fletcher</p>
                    </div>
                </a>
            </div>
            <!-- Rosie -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Rosie" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="rosie-macdonald-2.png" alt="Rosie MacDonald" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Rosie MacDonald</p>
                    </div>
                </a>
            </div>
            <!-- Rob -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Rob" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="rob-jackson-2.png" alt="Rob Jackson" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Rob Jackson</p>
                    </div>
                </a>
            </div>
            <!-- Zoe -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Zoe" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="zoe-davies.png" alt="Zoe Davies" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Zoe Davies</p>
                    </div>
                </a>
            </div>
            <!-- Rick -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Rick" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="rick.png" alt="Rick" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Rick</p>
                    </div>
                </a>
            </div>
            <!-- Rebecca -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Rebecca" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="rebecca-jones.png" alt="Rebecca Jones" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Rebecca Jones</p>
                    </div>
                </a>
            </div>
            <!-- Sophie -->
            <div class="col-6 col-md-4 col-lg-3">
                <a asp-action="Sophie" class="text-decoration-none">
                    <div class="character-card">
                        <responsive-image src="sophie-jones.png" alt="Sophie Jones" class="character-thumbnail" display-width-percentage="30"></responsive-image>
                        <p class="character-name">Sophie Jones</p>
                    </div>
                </a>
            </div>

        </div>
    </div>
</div>

@section Meta {
    <meta name="description" content="Meet the compelling characters of The Alpha Flame by Catherine Lynwood. Discover their stories, relationships, and the roles they play in this captivating novel.">

    <meta name="keywords" content="The Alpha Flame, Catherine Lynwood, book characters, character backstories, novel themes, strong female leads, gripping stories, Maggie Grant, Beth Fletcher, Rob Jackson, Zoe Davies, Rosie MacDonald, Rebecca Jones, Sophie Jones, Rick">

    <meta name="author" content="Catherine Lynwood">

    <script type="application/ld+json">
        {
          "@@context": "https://schema.org",
          "@@type": "WebPage",
          "name": "Meet the Characters - The Alpha Flame",
          "description": "Meet the compelling characters of The Alpha Flame by Catherine Lynwood. Discover their stories, relationships, and the roles they play in this captivating novel.",
          "url": "https://www.catherinelynwood.com/the-alpha-flame/characters",
          "author": {
            "@@type": "Person",
            "name": "Catherine Lynwood",
            "url": "https://www.catherinelynwood.com"
          },
          "about": {
            "@@type": "CreativeWork",
            "name": "The Alpha Flame",
            "author": "Catherine Lynwood"
          }
        }
    </script>
}