diff --git a/public/demo/libredb-studio-demo-mobile.html b/public/demo/libredb-studio-demo-mobile.html new file mode 100644 index 0000000..a941e47 --- /dev/null +++ b/public/demo/libredb-studio-demo-mobile.html @@ -0,0 +1,398 @@ + + + + + Bundled Page + + + + +
+ + + + + + + + + + + + +
+
Unpacking...
+ + + + + + + + + + + + \ No newline at end of file diff --git a/public/demo/libredb-studio-demo.html b/public/demo/libredb-studio-demo.html new file mode 100644 index 0000000..91fa002 --- /dev/null +++ b/public/demo/libredb-studio-demo.html @@ -0,0 +1,385 @@ + + + + + Bundled Page + + + + +
+
Unpacking...
+ + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/sections/HomeSection.astro b/src/components/sections/HomeSection.astro index 4f2c4f0..c95f7f7 100644 --- a/src/components/sections/HomeSection.astro +++ b/src/components/sections/HomeSection.astro @@ -1,5 +1,5 @@ --- -import PromoVideo from './PromoVideo.astro'; +import LibreDBDemo from './LibreDBDemo.astro'; import { ENGINES } from '../../data/engines'; import { sectionById } from '../../data/sections'; @@ -80,11 +80,14 @@ const flagship = [

- -
- + +
+

- -- 60s demo: the whole IDE, in motion. + -- the whole IDE, in motion.

diff --git a/src/components/sections/LibreDBDemo.astro b/src/components/sections/LibreDBDemo.astro new file mode 100644 index 0000000..ebfbbe8 --- /dev/null +++ b/src/components/sections/LibreDBDemo.astro @@ -0,0 +1,130 @@ +--- +// The interactive editor walkthrough, embedded in an iframe — a desktop clip +// and a portrait phone clip, picked by viewport. +// +// Each bundle in public/demo/ is one self-contained file: React, fonts and +// screenshots are all inlined, so there is no third-party request, no React in +// our bundle, and no CSS or font leaking in either direction. +// +// Both load with ?autoplay=0 and are told to play when they scroll into view, +// so a visitor never arrives after the walkthrough has already finished. Tab +// clicks and the Replay button work inside the frame. +// +// The markup carries the desktop clip so it still renders without JS; the +// script swaps in the phone clip below md. That runs at parse time, well before +// a lazy iframe this far down the page starts fetching, so a phone never pulls +// the desktop bundle. +interface Props { + class?: string; +} +const { class: className = '' } = Astro.props; +--- + +
+ +
+ +