solara-ui 1.45.0__py3-none-any.whl

solara/website/pages/home.vue

@@ -0,0 +1,1199 @@
+<template>
+    <main>
+        <section id="hero">
+            <nav class="hero-nav"
+                style="position: absolute; top: 0; width: 100%; height: 3.5rem; font-size: 1.25rem; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; padding: 0 30px; gap: 30px; box-sizing: border-box;">
+                <a href="/documentation">
+                    Documentation
+                </a>
+                <a href="/showcase">
+                    Showcase
+                </a>
+            </nav>
+            <div class="hero-stars"></div>
+            <div class="hero-planet-element solara-ssg-wait-for-animation"></div>
+            <div class="in-hero-banner">
+                <a href="/scale_ipywidgets">Scale your ipywidgets prototype into a high-quality web app with our expert help. Contact us now.</a>
+            </div>
+            <h1>Build high-quality web applications in pure Python</h1>
+            <h2>
+                From dashboards to large applications: Solara delivers solid, maintainable code trusted by
+                startups & large enterprises.
+            </h2>
+        </section>
+        <section id="brand-trust">
+            <h3>
+                For performance, efficiency and developer experience.
+            </h3>
+            <h4>
+                Solara is trusted by the most innovative teams.
+            </h4>
+            <div class="logo-grid">
+                <a href="https://www.dominodatalab.com/" target="_blank">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/domino.png" alt="Domino Data Lab"
+                        width="80%" />
+                </a>
+                <a href="https://www.stsci.edu/home" target="_blank">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/stsci.png"
+                        alt="Space Telescope Science Institute" width="50%" />
+                </a>
+                <a href="https://www.gluesolutions.io/home" target="_blank">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/glue-solutions-white.png"
+                        alt="Glue Solutions, Inc." width="50%" />
+                </a>
+                <a href="https://planeto-energy.ch/" target="_blank">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/planeto.png" alt="Planeto Energy"
+                        width="80%" />
+                </a>
+            </div>
+        </section>
+        <section id="modern">
+            <h1>Made for modern applications</h1>
+            <h4>
+                A powerful framework for building high-performance web applications without front-end fuss.
+            </h4>
+            <div class="modern-element-container card" style="flex-direction: column;">
+                <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/lazy-deco-stroke.svg" class="lazy-stroke"
+                    width="80%" />
+                <h3>
+                    Build high-quality web applications without front-end experience.
+                </h3>
+            </div>
+            <div class="double-tile-container homepage-row">
+                <div class="modern-tile card">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/solara-card-stack.png" alt="Solara stack"
+                        width="100%" />
+                    <div class="stack-text-container">
+                        <h2>Brings your application to production</h2>
+                        <p>
+                            Built on a foundation of fast, production-grade tooling. Whether you develop in a Jupyter
+                            Notebook
+                            or an editor like VScode, Solara brings your application to production.
+                        </p>
+                    </div>
+                </div>
+                <div class="modern-tile card">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/solara-flow-stack.png" alt="Solara stack"
+                        width="80%" />
+                    <div class="stack-text-container">
+                        <h2>Modern API stack supported</h2>
+                        <p>
+                            Call libraries directly from Python without having to create REST endpoints.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="features">
+            <h1>Every feature you need to build great applications on the web.</h1>
+            <h4>Build large applications without exponential complexity.</h4>
+            <div class="triple-tile-container homepage-row">
+                <div class="feature card">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/auto-updates.svg" alt="Automatic updates"
+                        width="100%" />
+                    <div class="stack-text-container">
+                        <h2>Fully Automatic Updates</h2>
+                        <p>
+                            Write your reactive components declaratively and never worry about updating UI, Solara does this
+                            automatically, just like a spreadsheet.
+                        </p>
+                    </div>
+                </div>
+                <div class="feature card">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/many-components.svg" alt="Component library"
+                        width="100%" />
+                    <div class="stack-text-container">
+                        <h2>Comprehensive Component Library</h2>
+                        <p>
+                            Building diverse applications with built-in components; or tailored them to your organization,
+                            all within Python.
+                        </p>
+                    </div>
+                </div>
+                <div class="feature card double-height">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/type-safety.svg" alt="Real-time"
+                        width="80%" />
+                    <div class="stack-text-container">
+                        <h2>Type Safety</h2>
+                        <p>
+                            With Python’s optional typing, type fast and error-free. Spot and fix typing errors directly
+                            throughout Solara, from state management to UI components.
+                        </p>
+                    </div>
+                </div>
+                <div class="feature card">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/auto-testing.svg" alt="Automated testing"
+                        width="100%" />
+                    <div class="stack-text-container">
+                        <h2>Fully Testable</h2>
+                        <p>
+                            Test your applications with and without a browser, from unit tests to end-to-end tests,
+                            preferably automated in a CI/CD pipeline. Spot bugs before they hit the user and release with
+                            confidence.
+                        </p>
+                    </div>
+                </div>
+                <div class="feature card">
+                    <div class="stack-text-container">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/many-frameworks.svg"
+                            alt="Framework support" width="100%" />
+                        <h2>Compatible with any framework</h2>
+                        <p>
+                            Ipywidgets, React, Vue, and more - it runs on Solara. Outside Solara’s built-in components
+                            within Python, create new frontend components with any framework.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="choice">
+            <h1>The Framework of Choice when it Matters</h1>
+            <h4>
+                Your team’s toolkit to stop configuring and start innovating. Securely build, deploy, and scale the best web
+                experiences with Solara.
+            </h4>
+            <div class="full-width-slideshow-container">
+                <div class="slideshow-column">
+                    <div class="piece" style="flex-grow: 1;">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/public/showcase/wanderlust/thumbnail.png"
+                            alt="Wanderlust app" />
+                    </div>
+                    <div class="piece" style="flex-grow: 1;">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/instagibbs.png"
+                            alt="Instagibbs" />
+                    </div>
+                </div>
+                <div class="slideshow-column">
+                    <div class="piece" style="flex-grow: 1;">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/video-analysis.png"
+                            alt="Video analysis" />
+                    </div>
+                </div>
+                <div class="slideshow-column">
+                    <div class="piece" style="flex-grow: 3;">
+                        <img src="https://user-images.githubusercontent.com/1765949/237517090-8f7242b1-3189-4c5b-abd3-0f0986292ade.png"
+                            alt="Bulk Labeling" />
+                    </div>
+                    <div class="slideshow-row" style="flex-grow: 2; height: 0;">
+                        <div class="piece" style="flex-grow: 1; height: 100%;">
+                            <img src="https://dxhl76zpt6fap.cloudfront.net/public/showcase/solarathon_2023_team_4/thumbnail.png"
+                                alt="Live Cryptocurrency Dashboard" />
+                        </div>
+                        <div class="piece" style="flex-grow: 1; height: 100%;">
+                            <img src="https://dxhl76zpt6fap.cloudfront.net/public/showcase/solarathon_2023_team_2/thumbnail.png"
+                                alt="Travel Assistant" />
+                        </div>
+                    </div>
+                </div>
+                <div class="slideshow-column">
+                    <div class="piece" style="flex-grow: 1;">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/tessa-analysis1.png"
+                            alt="District Heating Calculation" />
+                    </div>
+                    <div class="piece" style="flex-grow: 1;">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/tessa-analysis2.png"
+                            alt="District Heating Calculation" />
+                    </div>
+                </div>
+                <div class="bottom-fade"></div>
+            </div>
+        </section>
+        <section id="cutting-edge">
+            <h1>The Home of Cutting-Edge Apps</h1>
+            <h4>
+                Solara powers you with the full strength of both the Python and Javascript ecosystems.
+            </h4>
+            <a href="/showcase">
+                <button class="cta">See the showcase</button>
+            </a>
+            <div class="testimonials">
+                <div class="testimonial card-flat">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/flojoy.svg" alt="Flojoy"
+                        style="filter: grayscale(1) contrast(0.4)" height="60px" />
+                    <p>
+                        Solara is like streamlit, but for Jupyter. I am really excited to see where this goes!
+                    </p>
+                    <div class="testimonial-attribution">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/public/avatar/jack-parmer.jpg" alt="Jack Parmer" />
+                        <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
+                            <h4>Jack Parmer</h4>
+                            <p>Former CEO of Plotly, CEO of Flojoy</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial card-flat">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/planeto.png" alt="Planeto"
+                        height="60px" />
+                    <p>
+                        We evolved our prototype using Solara and are running it in production without needing an expensive
+                        rewrite with separate frontend and backend developers.
+                    </p>
+                    <div class="testimonial-attribution">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/public/avatar/jonathan-chambers.jpg"
+                            alt="Jonathan Chambers" />
+                        <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
+                            <h4>Jonathan Chambers</h4>
+                            <p>Co-Founder, Planeto Energy</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="testimonial card-flat">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/domino.png" alt="Domino Data Lab"
+                        height="60px" />
+                    <p>
+                        Solara has been transformative, allowing us to rapidly create a Jupyter app and iterate with
+                        impressive speed.
+                    </p>
+                    <div class="testimonial-attribution">
+                        <img src="https://dxhl76zpt6fap.cloudfront.net/public/avatar/nick-elprin.jpg" alt="Nick Elprin" />
+                        <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center;">
+                            <h4>Nick Elprin</h4>
+                            <p>Co-Founder and CEO, Domino Data Lab</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="learning"
+            style="background: radial-gradient(61.25% 47.84% at 50% 0%, rgba(255, 164, 61, 0.06) 0%, rgba(255, 164, 61, 0.00) 100%), radial-gradient(15.33% 28.37% at 50% 42.67%, rgba(255, 164, 61, 0.20) 0%, rgba(255, 164, 61, 0.00) 100%);">
+            <div class="top-part">
+                <h1>Continue Your Learning Journey</h1>
+                <h4>Check out Solara Documentation or subscribe to our newsletter</h4>
+                <div id="mc_embed_shell">
+                    <div id="mc_embed_signup">
+                        <form
+                            action="https://gmail.us13.list-manage.com/subscribe/post?u=1dcdd74de47214edace5b6f49&amp;id=c60b5def86&amp;f_id=00f4c1e2f0"
+                            method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
+                            target="_blank"
+                            style="padding: 12px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(2px);">
+                            <div id="mc_embed_signup_scroll" style="flex-grow: 1;">
+                                <div class="mc-field-group">
+                                    <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required=""
+                                        value="" placeholder="Enter Your Email">
+                                </div>
+                                <div class="mc-field-group" style="visibility: hidden; display: none;">
+                                    <label for="mce-LOCATION">signup location </label>
+                                    <input type="text" name="LOCATION" class=" text" id="mce-LOCATION" value="/">
+                                </div>
+                                <div id="mce-responses" class="clear foot">
+                                    <div class="response" id="mce-error-response" style="display: none;"></div>
+                                    <div class="response" id="mce-success-response" style="display: none;"></div>
+                                </div>
+                                <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                                    /* real people should not fill this in and expect good things - do not remove this
+                                    or
+                                    risk
+                                    form bot
+                                    signups */
+                                    <input type="text" name="b_1dcdd74de47214edace5b6f49_c60b5def86" tabindex="-1" value="">
+                                </div>
+                            </div>
+                            <button type="submit" name="subscribe" id="mc-embedded-subscribe"
+                                value="Subscribe">Subscribe</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="bottom-part">
+                <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/mobile-desktop-docs-preview.png"
+                    alt="A preview of Solara on Different Devices" width="70%" />
+                <div class="bottom-fade"></div>
+            </div>
+        </section>
+        <section id="deploy">
+            <div class="card deploy-card">
+                <div class="deploy-card-top-text">
+                    <h2>Get Started in Seconds</h2>
+                    <p>
+                        To deploy a new Project, install Solara as a normal Python package or get started with the server
+                        from
+                        the command line.
+                    </p>
+                    <a href="/documentation/getting_started">
+                        Install Now &gt;
+                    </a>
+                </div>
+                <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/what-ship.svg"
+                    alt="What Will You Ship" width="100%" />
+            </div>
+            <div class="card deploy-card" style="position: relative; overflow: hidden;">
+                <div class="deploy-card-top-text">
+                    <h2>Get Support Wherever You Are</h2>
+                    <p>
+                        We serve developers all across the globe. If you need professional support or consulting, contact us
+                        through Widgetti, our parent company.
+                    </p>
+                    <a href="/contact">
+                        Contact Us &gt;
+                    </a>
+                </div>
+                <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/globe.svg"
+                    alt="Support Wherever You Are" width="100%" style="position: absolute; bottom: 0; right: 0;" />
+            </div>
+        </section>
+        <section id="ready">
+            <h1>Ready to Deploy?</h1>
+            <h4>Celebrate the joy of accomplishment with a tool designed to build your app and scale your business.</h4>
+            <a href="documentation/getting_started">
+                Get Started
+            </a>
+            <div class="bottom-planet-container">
+                <div class="left-fade"></div>
+                <div class="right-fade"></div>
+                <div class="bottom-fade"></div>
+                <div class="bottom-planet-element"></div>
+            </div>
+        </section>
+        <footer>
+            <div class="footer-flex homepage-row">
+                <div class="footer-flex homepage-column">
+                    <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/solara.svg" alt="Solara" width="100px"
+                        class="logo" />
+                    <div class="footer-flex homepage-column">
+                        <a href="https://discord.solara.dev" class="ext-link">
+                            <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/discord.svg" alt="Discord"
+                                width="20px" style="margin-right: 0.75rem;" />
+                            Discord
+                        </a>
+                        <a href="https://github.com/widgetti/solara" class="ext-link">
+                            <img src="https://dxhl76zpt6fap.cloudfront.net/new-homepage/logos/github.svg" alt="GitHub"
+                                width="20px" style="margin-right: 0.75rem;" />
+                            GitHub
+                        </a>
+                    </div>
+                </div>
+                <div class="footer-flex homepage-row" style="width: 40%; padding-right: 60px;">
+                    <div class="footer-flex homepage-column">
+                        <b>Resources</b>
+                        <a href="/pricing">
+                            Pricing
+                        </a>
+                        <a href="/changelog">
+                            Changelog
+                        </a>
+                        <a href="/roadmap">
+                            Roadmap
+                        </a>
+                    </div>
+                    <div class="footer-flex homepage-column">
+                        <b>Company</b>
+                        <a href="/about">
+                            About
+                        </a>
+                        <a href="/our_team">
+                            Our Team
+                        </a>
+                        <a href="/careers">
+                            Careers
+                        </a>
+                    </div>
+                    <div class="footer-flex homepage-column">
+                        <b>Resources</b>
+                        <a href="/documentation">
+                            Documentation
+                        </a>
+                        <a href="/showcase">
+                            Showcase
+                        </a>
+                        <a href="/contact">
+                            Contact
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-flex homepage-row" style="align-items: center;">
+                <div>
+                    <h2 style="max-width: unset;">Join our Developer Newsletter</h2>
+                    <h4 style="max-width: unset;">Keep up to date with everything Solara, no BS.</h4>
+                </div>
+                <div id="mc_embed_shell">
+                    <div id="mc_embed_signup">
+                        <form
+                            action="https://gmail.us13.list-manage.com/subscribe/post?u=1dcdd74de47214edace5b6f49&amp;id=c60b5def86&amp;f_id=00f4c1e2f0"
+                            method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate"
+                            target="_blank">
+                            <div id="mc_embed_signup_scroll" style="flex-grow: 1;">
+                                <div class="mc-field-group">
+                                    <input type="email" name="EMAIL" class="required email" id="mce-EMAIL" required=""
+                                        value="" placeholder="Enter Your Email">
+                                </div>
+                                <div class="mc-field-group" style="visibility: hidden; display: none;">
+                                    <label for="mce-LOCATION">signup location </label>
+                                    <input type="text" name="LOCATION" class=" text" id="mce-LOCATION" value="/">
+                                </div>
+                                <div id="mce-responses" class="clear foot">
+                                    <div class="response" id="mce-error-response" style="display: none;"></div>
+                                    <div class="response" id="mce-success-response" style="display: none;"></div>
+                                </div>
+                                <div aria-hidden="true" style="position: absolute; left: -5000px;">
+                                    /* real people should not fill this in and expect good things - do not remove this
+                                    or
+                                    risk
+                                    form bot
+                                    signups */
+                                    <input type="text" name="b_1dcdd74de47214edace5b6f49_c60b5def86" tabindex="-1" value="">
+                                </div>
+                            </div>
+                            <button type="submit" name="subscribe" id="mc-embedded-subscribe"
+                                value="Subscribe">Subscribe</button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-flex homepage-row">
+                <div></div>
+                <small>
+                    © 2024 Widgetti BV. All rights reserved.
+                </small>
+            </div>
+        </footer>
+    </main>
+</template>
+
+<style id="solara-website-homepage">
+/* VARIABLES */
+
+:root {
+    --color-background: #14100C;
+    --color-background-top: #21180D;
+    --marketing-primary-text-title: #F3F0EC;
+
+    --color-text: rgba(255, 255, 255, 0.95) !important;
+    --color-text-secondary: #B2B0AD;
+
+    --dark-color-primary: var(--color-text) !important;
+}
+
+html, body {
+    overflow-x: hidden;
+}
+
+body {
+    margin: 0;
+    background-color: var(--color-background);
+    box-sizing: border-box;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+
+    color: var(--color-text);
+    font-family: "Roboto, sans-serif";
+    font-style: normal;
+    font-weight: 500;
+}
+
+h1 {
+    color: var(--marketing-primary-text-title, #F3F0EC);
+    text-align: center;
+    font-size: 62px;
+    line-height: 66px;
+    font-style: normal;
+    font-weight: 600;
+    margin: 0;
+    max-width: 80%;
+}
+
+h2 {
+    color: var(--marketing-primary-text-title, #F3F0EC);
+    text-align: center;
+    font-size: 26px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 36px;
+    margin: 0;
+    max-width: 80%;
+}
+
+h3 {
+    color: var(--marketing-primary-text-title, #F3F0EC);
+    text-align: center;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 28px;
+    margin: 0;
+    max-width: 90%;
+}
+
+h4 {
+    color: var(--color-text-secondary, #F3F0EC);
+    text-align: center;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+    margin: 0;
+    max-width: 90%;
+}
+
+p {
+    color: var(--color-text-secondary, #F3F0EC);
+}
+
+.footer-flex.homepage-row b {
+    color: var(--marketing-primary-text-title, #F3F0EC);
+}
+
+main > section {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 15px;
+    padding: 60px 0;
+}
+
+.v-application main > section a, .v-application main > footer a {
+    text-decoration: none;
+    color: var(--color-text);
+}
+
+/* BASE CLASSES */
+
+/* borders & shadow */
+.card {
+    border-radius: 20px;
+    border: 1px solid rgba(194, 180, 163, 0.28);
+    background: linear-gradient(180deg, rgba(255, 190, 115, 0.01) 0%, rgba(255, 190, 115, 0.00) 100%);
+    box-shadow: 0px -2px 20px 0px rgba(255, 240, 223, 0.10);
+}
+
+.card-flat {
+    border-radius: 20px;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.00) 100%), rgba(255, 255, 255, 0.04);
+}
+
+.homepage-row {
+    flex-direction: row;
+}
+
+.homepage-column {
+    flex-direction: column;
+}
+
+/* HERO */
+
+section#hero {
+    position: relative;
+    overflow: hidden;
+    min-height: 100vh;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+
+    background-color: var(--color-background);
+    background: linear-gradient(#1F160C 0%, #42290D 25%, #A16521 50%, #DBB66E 100%);
+}
+section#hero > *{
+    z-index: 2;
+}
+
+#hero .in-hero-banner {
+    display: flex;
+    padding: 4px 12px;
+    align-items: center;
+    gap: 6px;
+    border-radius: 32px;
+    font-size: 0.9rem;
+    border: var(--radius-none, 1px) solid var(--marketing-stroke-card-287, rgba(194, 180, 163, 0.28));
+    background: radial-gradient(176.49% 77.4% at 46.47% 0%, rgba(255, 192, 120, 0.06) 0%, rgba(255, 192, 120, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.00) 100%);
+}
+
+#hero .hero-planet-element {
+    width: 150vw;
+    aspect-ratio: 3/1;
+
+    position: absolute;
+    bottom: -35vw;
+    z-index: 1;
+
+    border-radius: 100%;
+
+    /* border: var(--radius-none, 1px) solid rgba(255, 255, 255, 0.05); */
+    background: radial-gradient(51.38% 51.38% at 50% 50%, #14100C 67.59%, #141210 85.76%, #EBAC60 100%);
+    box-shadow: 0px 1px 0px 0px #D9B589 inset, 0px -2px 10px 0px rgba(255, 240, 223, 0.50), 0px -2px 40px 0px rgba(217, 179, 137, 0.35), 0px -20px 40px 0px rgba(255, 240, 223, 0.20), 0px -10px 250px 5px #DCB46E;
+}
+
+.solara-pre-rendered #hero .hero-planet-element,
+.solara-no-ssg #hero .hero-planet-element {
+    animation: 1.5s ease-in 0s 1 sunRise;
+}
+
+#hero .hero-stars {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 30vh;
+    z-index: 0;
+    background: url("https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/subscribe-stars.svg") repeat;
+}
+
+#hero h1 {
+    max-width: 60%;
+    font-size: 80px;
+    line-height: 84px;
+}
+
+#hero h2 {
+    max-width: 40%;
+}
+
+.solara-pre-rendered #hero h1,
+.solara-pre-rendered #hero h2,
+.solara-no-ssg #hero h1,
+.solara-no-ssg #hero h2 {
+    animation: 1.5s ease-in 0s 1 fadeTitles;
+}
+
+@keyframes sunRise {
+    0% {
+      transform: translateY(10vh);
+      border: var(--radius-none, 1px) solid rgba(255, 255, 255, 0.05);
+      background: radial-gradient(51.38% 51.38% at 50% 50%, #14100C 67.59%, #141210 85.76%, #EBAC60 100%);
+      box-shadow: 0px 1px 0px 0px #BF8D50 inset;
+    }
+    100% {
+      transform: translateY(0);
+      border: var(--radius-none, 1px) solid rgba(255, 255, 255, 0.05);
+      background: radial-gradient(51.38% 51.38% at 50% 50%, #14100C 67.59%, #141210 85.76%, #EBAC60 100%);
+      box-shadow: 0px 1px 0px 0px #D9B589 inset, 0px -2px 10px 0px rgba(255, 240, 223, 0.50), 0px -2px 40px 0px rgba(217, 179, 137, 0.35), 0px -20px 40px 0px rgba(255, 240, 223, 0.20), 0px -10px 250px 5px #DCB46E;
+    }
+}
+
+@keyframes fadeTitles {
+    0% {
+        opacity: 0;
+        transform: translateY(40px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* BRAND TRUST */
+
+#brand-trust .logo-grid {
+    padding: 20px 0;
+    width: 40%;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(100px, 1fr));
+
+    gap: 32px;
+    justify-content: center;
+    align-items: center;
+}
+
+#brand-trust .logo-grid a {
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+}
+
+#brand-trust .logo-grid img {
+    filter: grayscale(1) contrast(0.2) brightness(1.5);
+    transition: 0.3s ease all;
+}
+
+#brand-trust .logo-grid img:hover {
+    filter: grayscale(0) contrast(1) brightness(1);
+    transition: 0.3s ease all;
+}
+
+/* MODERN */
+
+.modern-element-container {
+    width: 80%;
+    padding: 30px 1px;
+    margin-top: 40px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+}
+.double-tile-container {
+    width: 80%;
+    margin-top: 40px;
+
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    gap: 40px;
+}
+    .modern-tile {
+        width: 100%;
+        max-width: 600px;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+    }
+.stack-text-container {
+    width: 100%;
+    padding: 0 24px 24px 24px;
+    box-sizing: border-box;
+}
+    .stack-text-container h2 {
+        text-align: left;
+    }
+
+/* FEATURES */
+
+#features .triple-tile-container {
+    width: 80%;
+    padding: 30px 1px;
+    margin-top: 40px;
+    max-width: 1300px;
+
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    grid-template-rows: repeat(auto-fill, minmax(300px, 1fr));
+    justify-content: stretch;
+    align-items: stretch;
+    gap: 40px;
+}
+.feature {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+}
+.feature.double-height {
+    grid-row: span 2;
+}
+
+/* CHOICE */
+
+.full-width-slideshow-container {
+    position: relative;
+    width: 120%;
+    height: 400px;
+    max-height: 40vh;
+
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 40px;
+}
+.slideshow-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: stretch;
+    gap: 40px;
+    width: 25%;
+}
+.slideshow-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    gap: 40px;
+}
+    .full-width-slideshow-container .piece {
+        border-radius: 10px;
+        overflow: hidden;
+
+        height: 0;
+        min-height: 0;
+    }
+    .full-width-slideshow-container .piece img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+.bottom-fade {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    background: linear-gradient(0deg, #14100C 0%, rgba(20, 16, 12, 0.98) 4.68%, rgba(20, 16, 12, 0.96) 8.87%, rgba(20, 16, 12, 0.93) 12.76%, rgba(20, 16, 12, 0.90) 16.51%, rgba(20, 16, 12, 0.86) 20.3%, rgba(20, 16, 12, 0.82) 24.32%, rgba(20, 16, 12, 0.77) 28.74%, rgba(20, 16, 12, 0.71) 33.73%, rgba(20, 16, 12, 0.65) 39.47%, rgba(20, 16, 12, 0.57) 46.14%, rgba(20, 16, 12, 0.48) 53.93%, rgba(20, 16, 12, 0.38) 62.99%, rgba(20, 16, 12, 0.27) 73.52%, rgba(20, 16, 12, 0.14) 85.69%, rgba(20, 16, 12, 0.00) 99.67%);
+    width: 100%;
+    height: 25%;
+}
+
+/* CUTTING-EDGE */
+
+#cutting-edge button.cta {
+    color: var(--color-text);
+    display: flex;
+    padding: 6px 16px;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 32px;
+    border: var(--radius-none, 1px) solid rgba(112, 104, 94, 0.80);
+    background: radial-gradient(176.49% 77.4% at 46.47% 0%, rgba(255, 192, 120, 0.06) 0%, rgba(255, 192, 120, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.00) 100%);
+    box-shadow: 0px 0.5px 0px 0px rgba(217, 181, 137, 0.50) inset;
+    cursor: pointer;
+}
+
+.testimonials {
+    max-width: 80%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: stretch;
+    flex-wrap: wrap;
+    gap: 40px;
+}
+
+.testimonial {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 10px;
+
+    padding: 40px;
+    width: 350px;
+}
+
+    .testimonial > img {
+        filter: grayscale(1) contrast(0) brightness(1.5);
+    }
+
+.testimonial-attribution {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+}
+
+    .testimonial-attribution h4 {
+        text-align: start;
+        font-size: 1.25rem;
+        color: var(--color-text);
+    }
+
+    .testimonial-attribution p {
+        margin: 0;
+    }
+
+    .testimonial-attribution img {
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+    }
+
+/* LEARNING */
+
+#learning .top-part {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+    min-height: 400px;
+    background: url("https://dxhl76zpt6fap.cloudfront.net/new-homepage/backgrounds/subscribe-stars.svg") no-repeat;
+}
+
+#learning .bottom-part {
+    position: relative;
+    width: 100%;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+}
+
+/* DEPLOY */
+
+#deploy {
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: stretch;
+    gap: 40px;
+    max-width: 80%;
+    margin: 0 auto;
+}
+
+.deploy-card {
+    width: 400px;
+    min-height: 450px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 40px;
+    padding: 60px;
+}
+
+.deploy-card-top-text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
+    .deploy-card-top-text a {
+        font-size: 1.15rem;
+        font-weight: 600;
+        color: var(--color-text);
+    }
+
+/* READY */
+
+#ready {
+    gap: 40px;
+}
+
+#ready a {
+    display: flex;
+    padding: 8px 32px;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 32px;
+    border: var(--radius-none, 1px) solid rgba(112, 104, 94, 0.80);
+    background: radial-gradient(176.49% 77.4% at 46.47% 0%, rgba(255, 192, 120, 0.06) 0%, rgba(255, 192, 120, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.00) 100%);
+    box-shadow: 0px 0.5px 0px 0px rgba(217, 181, 137, 0.50) inset;
+}
+
+#ready .bottom-planet-container {
+    position: relative;
+    width: 80%;
+    height: 200px;
+    overflow: hidden;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: radial-gradient(rgba(217, 181, 137, 0.25) 0%, rgba(255,255,255,0) 35%);
+    background-position: center center;
+}
+
+#ready .bottom-planet-container .left-fade {
+    position: absolute;
+    left: 0;
+    height: 100%;
+    width: 150px;
+    z-index: 2;
+    background: linear-gradient(270deg, rgba(20, 16, 12, 0.00) 0%, rgba(20, 16, 12, 0.01) 2.53%, rgba(20, 16, 12, 0.02) 5.16%, rgba(20, 16, 12, 0.05) 7.83%, rgba(20, 16, 12, 0.08) 10.5%, rgba(20, 16, 12, 0.13) 13.15%, rgba(20, 16, 12, 0.18) 15.74%, rgba(20, 16, 12, 0.25) 18.21%, rgba(20, 16, 12, 0.32) 20.54%, rgba(20, 16, 12, 0.40) 22.68%, rgba(20, 16, 12, 0.48) 24.6%, rgba(20, 16, 12, 0.58) 26.26%, rgba(20, 16, 12, 0.67) 27.62%, rgba(20, 16, 12, 0.78) 28.64%, rgba(20, 16, 12, 0.89) 29.28%, #14100C 29.5%);
+}
+
+#ready .bottom-planet-container .right-fade {
+    position: absolute;
+    right: 0;
+    height: 100%;
+    width: 150px;
+    z-index: 2;
+    background: linear-gradient(270deg, #14100C 70.5%, rgba(20, 16, 12, 0.99) 73.04%, rgba(20, 16, 12, 0.98) 75.66%, rgba(20, 16, 12, 0.95) 78.33%, rgba(20, 16, 12, 0.92) 81.01%, rgba(20, 16, 12, 0.87) 83.66%, rgba(20, 16, 12, 0.82) 86.24%, rgba(20, 16, 12, 0.75) 88.71%, rgba(20, 16, 12, 0.68) 91.04%, rgba(20, 16, 12, 0.60) 93.18%, rgba(20, 16, 12, 0.52) 95.11%, rgba(20, 16, 12, 0.42) 96.76%, rgba(20, 16, 12, 0.33) 98.12%, rgba(20, 16, 12, 0.22) 99.14%, rgba(20, 16, 12, 0.11) 99.78%, rgba(20, 16, 12, 0.00) 100%);
+}
+
+#ready .bottom-planet-container .bottom-fade {
+    z-index: 2;
+}
+
+#ready .bottom-planet-element {
+    width: 100vw;
+    aspect-ratio: 2/1;
+
+    position: absolute;
+    top: 75px;
+
+    border-radius: 100%;
+    background-color: #181818;
+    border: 1px solid rgba(255, 255, 255, 0.45);
+}
+
+/* FOOTER */
+
+footer {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: 100px;
+    padding: 100px 60px;
+
+    border-top-width: 1px;
+    border-top-style: solid;
+    border-image: linear-gradient(to right, rgba(255,255,255,0) 25%, rgba(217, 181, 137, 0.25) 50%, rgba(255,255,255,0) 75%) 1;
+    background: var(--marketing-bg-bg-radial-r-1, radial-gradient(53.93% 32.81% at 50% 0%, rgba(255, 184, 102, 0.02) 0%, rgba(255, 184, 102, 0.00) 100%));
+}
+
+footer img.logo {
+    filter: grayscale(1) contrast(0) brightness(1.5);
+}
+footer img.logo:hover {
+    filter: grayscale(0) contrast(1) brightness(1);
+}
+
+.footer-flex {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    flex-wrap: wrap;
+    gap: 40px;
+    padding: 20px 0;
+}
+
+.ext-link {
+    display: flex;
+    padding: 8px 12px;
+    align-items: center;
+    gap: 6px;
+    border-radius: 8px;
+    background: radial-gradient(167.96% 73.66% at 50% 0%, rgba(255, 192, 120, 0.06) 0%, rgba(255, 192, 120, 0.00) 100%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.00) 100%);
+}
+
+/* MAILCHIMP */
+
+#mc_embed_signup {
+    background: transparent;
+    clear: left;
+    min-width: 250px;
+}
+#mc_embed_signup form {
+    display: flex;
+    flex-direction: row;
+    justify-content: stretch;
+    align-items: center;
+    gap: 20px;
+    margin: 0 !important;
+
+    box-sizing: border-box;
+    min-width: 250px;
+    padding: 8px 12px;
+    border-radius: var(--Border-Radius-radius-sm, 8px);
+    border: 1px solid var(--marketing-stroke-card-10, rgba(194, 180, 163, 0.10));
+    background: var(--opacity-02, rgba(255, 255, 255, 0.00));
+}
+#mc-embedded-subscribe {
+    background-color: transparent;
+    color: var(--color-text);
+    font-size: 1rem;
+    border: none;
+    cursor: pointer;
+}
+#mce-EMAIL {
+    background-color: transparent;
+    color: var(--color-text);
+    border: none;
+    flex-grow: 1;
+    height: 100%;
+}
+#mce-EMAIL:focus {
+    outline: none;
+}
+#mc-embedded-subscribe-form {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+}
+#mc_embed_signup .indicates-required{
+    margin-right: 0;
+}
+#mc_embed_signup .mc-field-group{
+    width: 100%;
+}
+
+@media screen and (max-width: 1000px) {
+    h1 {
+        font-size: 2rem;
+        line-height: 2.1rem;
+    }
+    #hero h1 {
+        max-width: 80%;
+        font-size: 2.5rem;
+        line-height: 2.5rem;
+    }
+    #hero h2 {
+        max-width: 65%;
+        font-size: 1.25rem;
+        line-height: 1.25rem;
+    }
+    .double-tile-container {
+        flex-direction: column;
+    }
+    .modern-tile {
+        max-width: 100%;
+    }
+    #brand-trust .logo-grid {
+        width: 60%;
+        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
+    }
+}
+
+/* VUETIFY CSS OVERRIDES */
+
+#mc_embed_signup .mc-field-group input {
+    padding: 0 !important;
+}
+#mc_embed_signup input {
+    border: none !important;
+}
+#mc-embedded-subscribe {
+    margin: 0 !important;
+}
+#mc_embed_signup form {
+    display: flex !important;
+}
+#mc_embed_signup .mc-field-group {
+    min-height: unset !important;
+    padding-bottom: 0 !important;
+}
+.v-sheet {
+    background-color: transparent !important;
+}
+.v-application {
+    background-color: transparent !important;
+}
+.theme--light.v-sheet, .theme--dark.v-sheet {
+    color: var(--color-text) !important;
+}
+</style>
+
+<script>
+
+module.exports = {
+    mounted() {
+        document.querySelectorAll('a').forEach(this.setupRouter);
+    },
+    destroyed() {
+        // when ssg is on, this css is not getting removed
+        if(document.getElementById('ipyvue-solara-website-homepage')) {
+            document.getElementById('ipyvue-solara-website-homepage').remove();
+        }
+    },
+    methods: {
+        setupRouter(a) {
+            let href = a.attributes['href'].value;
+            if(href.startsWith("./")) {
+                // TODO: should we really do this?
+                href = location.pathname + href.substr(1);
+                a.attributes['href'].href = href;
+            }
+            let authLink = href.startsWith("/_solara/auth/");
+            if( (href.startsWith("./") || href.startsWith("/")) && !authLink) {
+                a.onclick = e => {
+                    if(href.startsWith("./")) {
+                        solara.router.push(href);
+                    } else {
+                        solara.router.push(href);
+                    }
+                    e.preventDefault()
+                }
+            } else if(href.startsWith("#")) {
+                href = location.pathname + href;
+                a.attributes['href'].value = href;
+            }
+        },
+    },
+}
+</script>