New dark, interactive landing page with animated architecture stack

[Copilot]

Replaces the minimal logo + paragraph landing page with a fully dark-themed, interactive page that leads with getting started and showcases the Cratis stack visually with dramatic animations.

Changes

• Dark theme by default — main.js now sets data-bs-theme=dark as the site default (respects saved user preferences), making the entire docfx site dark
• Hero — deep midnight starfield (CSS-only radial-gradient dots that gently float), floating logo with pulsing indigo glow, bold tagline, and CTA buttons (Get Started / GitHub)
• Getting Started — two-step guide (dotnet new install Cratis.Templates → dotnet new cratis -n MyApp) with dark glass cards, indigo accent borders, and copy-to-clipboard (Clipboard API + execCommand fallback)
• Architecture stack — vertical slice design — five colour-coded, clickable layer boxes (Studio → Chronicle → Components → Arc → Fundamentals) with:
  • Thick coloured left-border accent per layer (the "slice" edge) and an offset 3D depth shadow that shifts on hover
  • Diagonal stripe texture overlay on box headers
  • Hover: box floats up-left with a coloured bloom glow, a shimmer light beam sweeps across the header, and the emoji icon spins and scales
  • Click → crack open: box fires a shake/crack animation (300 ms jolt with rotation + scale) before opening
  • Feature cards drop in: each of the 8 feature traits is a dark glass card that physically falls from ~110 px above with per-card rotation angles (–16° to +15°), staggered timing (20–370 ms), and a bouncy cubic-bezier landing with blur fade-in
  • Individual feature card hover pops up with the parent box's coloured glow
  • Studio carries a pulsing "coming soon" pill
• Connector arrows — glowing pulsing ring + animated flowing line + glowing bouncing arrowhead between every layer
• Plain HTML file — landing page lives in index.html (with a DocFX YAML front-matter block) instead of index.md; docfx.json updated to include it as a content file. No markdown-parser workarounds needed and the file is straightforward to edit with any HTML tooling.
• All styles and interactivity are self-contained in the HTML file — no external dependencies

Screenshots

Hero — dark starfield:

Getting Started & dark stack:

Original prompt

---

This section details on the original issue you should resolve

<issue_title>New landing page</issue_title>
<issue_description>We want our landing page to be much more appealing and fun.

Getting started with Cratis is basically 2 things:

• Install the DotNET templates
• create an app using the template

That should be the first focus. But then I’d like a fun architectural diagram that you scroll down to. Should probably be some arrows pointing down for more information.

The diagram should have a stack of:

• Studio (coming soon)
• Chronicle
• Components
• Arc
• Fundamentals

It should look like boxes with arrows pointing down from one box to the other.
Hovering the box you should get the idea that it would be fun to click it.

When clicking it we should some how open the box and stuff either falls out or pops out with 5-10 things that describes the project.

Be creative and have fun.

It should be a HTML with whatever you need to accomplish this.

If you think it would be a good idea to get the colors improved for the entire site, be my guest.

Cratis Studio lives here https://cratis.studio if you need some inspiration for colors or style.

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes New landing page #3

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.

[einari]

@copilot nice. We do favor a dark theme for entire site.

as for the fun part of showing the architecture revealing traits. It would be awesome if it would be a little bit more crazy. Animations are expected. Both while opening, hovering and the traits. The traits could be boxes themselves, spread out like cards - they cold drop out as an animation. You could take some inspiration from the vertical slices for the architecture boxes.

go to town

[Copilot]

@copilot nice. We do favor a dark theme for entire site.

as for the fun part of showing the architecture revealing traits. It would be awesome if it would be a little bit more cra...

Done in commit b347f5c. Here's what changed:

Dark theme everywhere:

• main.js now sets data-bs-theme=dark as the site default (respects any saved user preference)
• Landing page uses a deep #090b16 canvas with dark cards throughout

Architecture boxes — vertical slice feel:

• Each box has a thick coloured left-border accent (the "slice" edge) + an offset 3D depth shadow layer that shifts on hover
• Diagonal stripe texture on the header
• On hover: box floats up-left with a coloured bloom glow, header shimmers (light beam sweeps across), and the emoji icon spins+scales

"Crazy" open animation:

• Click → box shakes/cracks (300 ms jolt with rotate + scale) before opening
• Then the 8 feature cards fall from ~110 px above with per-card rotation angles (–16° to +15°) and staggered timing — each one drops, bounces, and lands using a bouncy cubic-bezier(0.34,1.56,0.64,1)

Feature cards:

• Each is a dark glass card with a coloured top border and an emoji icon
• Individual hover: pops up, scales, and glows with the parent box's colour

Connector arrows:

• Pulsing glow ring + animated flowing line + glowing bouncing arrowhead between every box

Hero:

• CSS-only starfield (radial-gradient dots) that gently floats, ambient colour blobs, floating logo with an indigo drop-shadow pulse

[einari]

@copilot looks good.
I think it’s possible to have it as a plain HTML file and not a markdown. Check this:
https://stackoverflow.com/questions/46185985/how-to-link-a-html-document-with-docfx

And double check the DocFX documentation .

it would be much easier to work with.

[Copilot]

@copilot looks good.
I think it’s possible to have it as a plain HTML file and not a markdown. Check this:
https://stackoverflow.com/questions/46185985/how-to-link-a-html-docume...

Done in 68217cd. The landing page is now Source/index.html — a proper HTML file with a small DocFX YAML front-matter block at the top (title: Home) so DocFX wraps it in the site template as before. docfx.json has a new explicit content entry for index.html. The old index.md is deleted.

The file is now straightforward to edit as clean HTML with no markdown-parser caveats.