<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>
