| | | 1 | | @page "/" |
| | | 2 | | @layout PublicLayout |
| | | 3 | | @inject NavigationManager Navigation |
| | | 4 | | @inject AuthenticationStateProvider AuthStateProvider |
| | | 5 | | |
| | | 6 | | <PageTitle>Chronicis — Campaign Notes for Tabletop RPGs</PageTitle> |
| | | 7 | | |
| | | 8 | | <div class="landing"> |
| | | 9 | | <!-- Hero Section --> |
| | | 10 | | <section class="hero"> |
| | | 11 | | <div class=""> |
| | | 12 | | |
| | | 13 | | <h1 class="hero-title"> |
| | | 14 | | Never Lose Track of Your Campaign Again |
| | | 15 | | </h1> |
| | | 16 | | |
| | | 17 | | <p class="hero-subtitle"> |
| | | 18 | | Chronicis is the knowledge base built for tabletop RPGs. |
| | | 19 | | Organize your world, link your lore, and let AI help you |
| | | 20 | | remember what happened three sessions ago. |
| | | 21 | | </p> |
| | | 22 | | |
| | | 23 | | <div class="hero-badge"> |
| | | 24 | | <span class="badge-icon">✨</span> |
| | | 25 | | <span>Free during early access</span> |
| | | 26 | | </div> |
| | | 27 | | |
| | | 28 | | </div> |
| | | 29 | | |
| | | 30 | | <div class="hero-visual"> |
| | | 31 | | <div class="browser-frame"> |
| | | 32 | | <div class="browser-header"> |
| | | 33 | | <div class="browser-dots"> |
| | | 34 | | <span></span><span></span><span></span> |
| | | 35 | | </div> |
| | | 36 | | <div class="browser-url">chronicis.app/forgotten-realms/session-notes/session-1-the-tavern</div> |
| | | 37 | | </div> |
| | | 38 | | <div class="browser-content"> |
| | | 39 | | <img src="/images/ScreenshotDemo.png" |
| | | 40 | | alt="Chronicis interface showing campaign notes" |
| | | 41 | | onerror="this.parentElement.innerHTML='<div class=\'placeholder-screenshot\'><span>📚</span><p> |
| | | 42 | | </div> |
| | | 43 | | </div> |
| | | 44 | | </div> |
| | | 45 | | </section> |
| | | 46 | | |
| | | 47 | | <!-- Social Proof --> |
| | | 48 | | <section class="social-proof"> |
| | | 49 | | <p>Built for the games you love</p> |
| | | 50 | | <div class="game-icons"> |
| | | 51 | | <span title="Dungeons & Dragons">🐉</span> |
| | | 52 | | <span title="Pathfinder">⚔️</span> |
| | | 53 | | <span title="Call of Cthulhu">🐙</span> |
| | | 54 | | <span title="Vampire: The Masquerade">🦇</span> |
| | | 55 | | <span title="And many more...">✨</span> |
| | | 56 | | </div> |
| | | 57 | | </section> |
| | | 58 | | |
| | | 59 | | <!-- Problem Statement --> |
| | | 60 | | <section class="problem-section"> |
| | | 61 | | <div class="section-container"> |
| | | 62 | | <h2 class="section-eyebrow">The Problem</h2> |
| | | 63 | | <h3 class="section-title">Campaign Notes Are a Mess</h3> |
| | | 64 | | <p class="section-subtitle"> |
| | | 65 | | You've got session notes in Google Docs, NPC names in Discord, |
| | | 66 | | maps on your desktop, and that important plot detail... somewhere. |
| | | 67 | | When a player asks "Who was that merchant in Baldur's Gate?", |
| | | 68 | | you're digging through chaos. |
| | | 69 | | </p> |
| | | 70 | | </div> |
| | | 71 | | </section> |
| | | 72 | | |
| | | 73 | | <!-- Solution / Features --> |
| | | 74 | | <section class="features-section"> |
| | | 75 | | <div class="section-container"> |
| | | 76 | | <h2 class="section-eyebrow">The Solution</h2> |
| | | 77 | | <h3 class="section-title">One Place for Everything</h3> |
| | | 78 | | |
| | | 79 | | <div class="features-grid"> |
| | | 80 | | <div class="feature-card feature-highlight"> |
| | | 81 | | <div class="feature-icon">🌳</div> |
| | | 82 | | <h4>Hierarchical Organization</h4> |
| | | 83 | | <p> |
| | | 84 | | Build your world like a wiki. Nest locations inside regions, |
| | | 85 | | NPCs inside factions, spells inside schools. Drag and drop to reorganize anytime. |
| | | 86 | | </p> |
| | | 87 | | </div> |
| | | 88 | | |
| | | 89 | | <div class="feature-card"> |
| | | 90 | | <div class="feature-icon">#️⃣</div> |
| | | 91 | | <h4>Hashtag Linking</h4> |
| | | 92 | | <p> |
| | | 93 | | Type #Waterdeep and it becomes a link. Click to jump there. |
| | | 94 | | Hover for a preview. No manual linking required. |
| | | 95 | | </p> |
| | | 96 | | </div> |
| | | 97 | | |
| | | 98 | | <div class="feature-card"> |
| | | 99 | | <div class="feature-icon">🔗</div> |
| | | 100 | | <h4>Automatic Backlinks</h4> |
| | | 101 | | <p> |
| | | 102 | | See every place an NPC, location, or concept is mentioned. |
| | | 103 | | Discover connections across your campaign you didn't know existed. |
| | | 104 | | </p> |
| | | 105 | | </div> |
| | | 106 | | |
| | | 107 | | <div class="feature-card"> |
| | | 108 | | <div class="feature-icon">🤖</div> |
| | | 109 | | <h4>AI-Powered Summaries</h4> |
| | | 110 | | <p> |
| | | 111 | | Click a button and AI reads every mention of a character, |
| | | 112 | | then writes a comprehensive summary. Perfect for session prep. |
| | | 113 | | </p> |
| | | 114 | | </div> |
| | | 115 | | |
| | | 116 | | <div class="feature-card"> |
| | | 117 | | <div class="feature-icon">🔍</div> |
| | | 118 | | <h4>Instant Search</h4> |
| | | 119 | | <p> |
| | | 120 | | Find anything in seconds. Search titles, content, or hashtags. |
| | | 121 | | See exactly where your search term appears. |
| | | 122 | | </p> |
| | | 123 | | </div> |
| | | 124 | | |
| | | 125 | | <div class="feature-card"> |
| | | 126 | | <div class="feature-icon">💾</div> |
| | | 127 | | <h4>Auto-Save Everything</h4> |
| | | 128 | | <p> |
| | | 129 | | Just type. Your work saves automatically as you go. |
| | | 130 | | No save button, no lost work, no anxiety. |
| | | 131 | | </p> |
| | | 132 | | </div> |
| | | 133 | | |
| | | 134 | | <div class="feature-card"> |
| | | 135 | | <div class="feature-icon">📚</div> |
| | | 136 | | <h4>External Reference Library</h4> |
| | | 137 | | <p> |
| | | 138 | | Link official content directly into your notes. |
| | | 139 | | Search the SRD for spells, monsters, and rules. |
| | | 140 | | Import with automatic hashtags and relationships. |
| | | 141 | | </p> |
| | | 142 | | </div> |
| | | 143 | | |
| | | 144 | | <div class="feature-card"> |
| | | 145 | | <div class="feature-icon">📄</div> |
| | | 146 | | <h4>Document Library</h4> |
| | | 147 | | <p> |
| | | 148 | | Upload maps, handouts, character sheets, and homebrew content. |
| | | 149 | | PDFs and images attach directly to articles. Search document |
| | | 150 | | contents and link pages to your notes. |
| | | 151 | | </p> |
| | | 152 | | </div> |
| | | 153 | | </div> |
| | | 154 | | </div> |
| | | 155 | | </section> |
| | | 156 | | |
| | | 157 | | <!-- How It Works --> |
| | | 158 | | <section class="how-section"> |
| | | 159 | | <div class="section-container"> |
| | | 160 | | <h2 class="section-eyebrow">How It Works</h2> |
| | | 161 | | <h3 class="section-title">From Chaos to Chronicle in Minutes</h3> |
| | | 162 | | |
| | | 163 | | <div class="steps"> |
| | | 164 | | <div class="step"> |
| | | 165 | | <div class="step-number">1</div> |
| | | 166 | | <h4>Create Your First Article</h4> |
| | | 167 | | <p>Start with anything—a character, a location, or your next session's notes.</p> |
| | | 168 | | </div> |
| | | 169 | | <div class="step-connector"></div> |
| | | 170 | | <div class="step"> |
| | | 171 | | <div class="step-number">2</div> |
| | | 172 | | <h4>Link with Hashtags</h4> |
| | | 173 | | <p>Mention #NPCName or #LocationName and watch connections form automatically.</p> |
| | | 174 | | </div> |
| | | 175 | | <div class="step-connector"></div> |
| | | 176 | | <div class="step"> |
| | | 177 | | <div class="step-number">3</div> |
| | | 178 | | <h4>Build Your World</h4> |
| | | 179 | | <p>Add more articles, nest them into hierarchies, and watch your campaign come alive.</p> |
| | | 180 | | </div> |
| | | 181 | | </div> |
| | | 182 | | </div> |
| | | 183 | | </section> |
| | | 184 | | |
| | | 185 | | <!-- Testimonial / Quote --> |
| | | 186 | | <section class="quote-section"> |
| | | 187 | | <div class="section-container"> |
| | | 188 | | <blockquote> |
| | | 189 | | <p>"Finally, a tool that thinks like a DM."</p> |
| | | 190 | | <cite>— What we hope you'll say after trying Chronicis</cite> |
| | | 191 | | </blockquote> |
| | | 192 | | </div> |
| | | 193 | | </section> |
| | | 194 | | |
| | | 195 | | <!-- Final CTA --> |
| | | 196 | | <section class="final-cta"> |
| | | 197 | | <div class="section-container"> |
| | | 198 | | <h2>Ready to Organize Your Campaign?</h2> |
| | | 199 | | <p> |
| | | 200 | | Join the early access and help shape the future of campaign management. |
| | | 201 | | It's free, it's fast, and your notes will thank you. |
| | | 202 | | </p> |
| | | 203 | | |
| | | 204 | | <AuthorizeView> |
| | | 205 | | <Authorized> |
| | | 206 | | <MudButton Variant="Variant.Filled" |
| | | 207 | | Color="Color.Primary" |
| | | 208 | | Size="Size.Large" |
| | | 209 | | Href="/dashboard" |
| | | 210 | | Class="cta-primary cta-large"> |
| | | 211 | | Open Your Dashboard ➤ |
| | | 212 | | </MudButton> |
| | | 213 | | </Authorized> |
| | | 214 | | <NotAuthorized> |
| | | 215 | | <MudButton Variant="Variant.Filled" |
| | | 216 | | Color="Color.Primary" |
| | | 217 | | Size="Size.Large" |
| | | 218 | | Href="authentication/login" |
| | | 219 | | EndIcon="@Icons.Material.Filled.ArrowForward" |
| | | 220 | | Class="cta-primary cta-large"> |
| | | 221 | | Create Your Free Account |
| | | 222 | | </MudButton> |
| | | 223 | | <p class="cta-subtext">Sign in with Google or Discord</p> |
| | | 224 | | </NotAuthorized> |
| | | 225 | | </AuthorizeView> |
| | | 226 | | </div> |
| | | 227 | | </section> |
| | | 228 | | </div> |
| | | 229 | | |
| | | 230 | | @code { |
| | | 231 | | protected override async Task OnInitializedAsync() |
| | | 232 | | { |
| | | 233 | | // Check if user is authenticated - redirect to dashboard |
| | 0 | 234 | | var authState = await AuthStateProvider.GetAuthenticationStateAsync(); |
| | 0 | 235 | | if (authState.User.Identity?.IsAuthenticated == true) |
| | | 236 | | { |
| | 0 | 237 | | Navigation.NavigateTo("/dashboard"); |
| | | 238 | | } |
| | 0 | 239 | | } |
| | | 240 | | } |