docs: new static homepage using vue template (#760)

Implements the new static homepage using a Vue template.

ToDo:
- [ ] Replace last .png files with .svgs **Edit**: blocked because of a figma issue.
- [ ] Animated assets (Lottie?) **Edit**: see above
- [x] Extra pages (roadmap, pricing, etc)?
- [x] homepage CSS doesn't load in early enough **Edit**: should be fixed by SSG

solara/server/templates/solara.html.j2

@@ -269,6 +269,12 @@
         solara.production = {{ production | tojson | safe }};
         const themeVariants = ['light', 'dark', 'auto']
         solara.preRendered = {{ pre_rendered_html | safe | length | tojson }} > 0
+        if(solara.preRendered) {
+            document.body.classList.add('solara-ssg', 'solara-pre-rendered');
+        } else {
+            document.body.classList.add('solara-no-ssg');
+        }
+
     </script>
 
     <script>
@@ -329,8 +335,25 @@
                     // if preRendered, the app is not mounted yet
                     // so we mount it when loading becomes false
                     if (solara.preRendered && !this.mounted) {
-                        this.isMounted = true;
-                        this.$mount("#app")
+                        function waitForAnimation(element) {
+                            return new Promise((resolve) => {
+                                element.addEventListener('animationend', resolve, { once: true });
+                            });
+                        }
+
+                        function waitForAllAnimations(elements) {
+                            const animationPromises = Array.from(elements).map(element => waitForAnimation(element));
+                            return Promise.all(animationPromises);
+                        }
+
+                        (async () => {
+                            await waitForAllAnimations(document.querySelectorAll('.solara-ssg-wait-for-animation'));
+                            console.log("animation finished");
+                            document.body.classList.remove('solara-pre-rendered');
+                            document.body.classList.add('solara-pre-rendered-finished');
+                            this.isMounted = true;
+                            this.$mount("#app")
+                        })();
                     } else {
                         this.isMounted = true;
                     }

solara/website/assets/custom.css

@@ -289,46 +289,6 @@ blockquote p:last-child {
     color: white !important;
 }
 
-/* hero */
-.hero {
-    background: var(--color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
-    background-size: cover;
-    min-height: 660px;
-    padding: 7rem 0;
-}
-
-.theme--dark .hero {
-    background: var(--dark-color-primary-lightest) url(https://dxhl76zpt6fap.cloudfront.net/public/hero.webp);
-    background-size: cover;
-}
-
-.hero h1 {
-    font-size: 4.5rem;
-}
-
-.hero h2 {
-    padding-left: 150px;
-    padding-right: 150px;
-}
-
-.hero b {
-    color: var(--color-primary);
-}
-
-.theme--dark .hero b {
-    color: var(--dark-color-primary);
-}
-
-@media screen and (max-width: 960px) {
-    .hero {
-        padding: 4rem 0;
-        min-height: auto;
-    }
-
-    .hero h1 {
-        font-size: 3rem;
-    }
-}
 
 /* fixes padding issue on drawer menu */
 .v-list-group__items {
@@ -457,13 +417,6 @@ blockquote p:last-child {
 /* MOBILE */
 
 @media screen and (aspect-ratio < 1) {
-    .hero{
-        background-position-x: 29%;
-    }
-        .hero h2{
-            padding-left: 0;
-            padding-right: 0;
-        }
     .container.fill-height > .ma-8.row{
         max-width: 80%;
     }

solara/website/components/__init__.py

@@ -1,5 +1,4 @@
 from .docs import CategoryLayout, Gallery, NoPage, SubCategoryLayout, WithCode  # noqa
 from .header import Header
-from .hero import Hero
 
-__all__ = ["Header", "Hero"]
+__all__ = ["Header"]

solara/website/components/contact.py

@@ -0,0 +1,107 @@
+import json
+import os
+import requests
+
+from typing import Any, Dict, Optional
+import solara
+
+
+postmark_api_key = None
+contact_email_address = None
+
+try:
+    postmark_api_key = os.environ["POSTMARK_API_KEY"]
+    contact_email_address = os.environ["SOLARA_CONTACT_EMAIL_ADDRESS"]
+except Exception:
+    pass
+
+
+@solara.component
+def Contact(
+    style: Dict[str, Any] = {},
+    title="Contact Us",
+    subtitle="We'd love to hear from you!",
+    submit_label="Submit",
+    email_subject="Contact Form Submission",
+):
+    first_name = solara.use_reactive("")
+    last_name = solara.use_reactive("")
+    email = solara.use_reactive("")
+    company = solara.use_reactive("")
+    message = solara.use_reactive("")
+    error: solara.Reactive[Optional[str]] = solara.use_reactive(None)
+
+    def send(*_ignore):
+        if postmark_api_key is None or contact_email_address is None:
+            error.set("Email service not properly configured. Please contact the site administrator at [email protected].")
+        else:
+            # Create the email content
+            msg = {}
+            msg["From"] = contact_email_address
+            msg["To"] = contact_email_address
+            msg["Subject"] = email_subject
+            msg["ReplyTo"] = email.value
+
+            # Email body
+            msg["HtmlBody"] = f"""
+            <b>First Name</b>: {first_name.value}<br />
+            <b>Last Name</b>: {last_name.value}<br />
+            <b>Email</b>: {email.value}<br />
+            <b>Company</b>: {company.value}<br />
+            <b>Message</b>: {message.value}<br />
+            """
+
+            # Send the email
+            try:
+                requests.post(
+                    "https://api.postmarkapp.com/email",
+                    headers={
+                        "Accept": "application/json",
+                        "Content-Type": "application/json",
+                        "X-Postmark-Server-Token": postmark_api_key,
+                    },
+                    data=json.dumps(msg),
+                )
+                print("Email sent successfully!")
+            except Exception as e:
+                error.set(f"Error sending email: {e}")
+
+    with solara.Card(title=title, style={"width": "100%", "max-width": "1024px", **style}):
+        solara.Markdown(subtitle)
+        solara.Text("* Required fields")
+        with solara.Row():
+            solara.InputText(label="First Name *", value=first_name)
+            solara.InputText(label="Last Name *", value=last_name)
+        with solara.Row():
+            solara.InputText(label="Email *", value=email)
+            solara.InputText(label="Company", value=company)
+        solara.v.Textarea(placeholder="Message *", v_model=message.value, on_v_model=message.set)
+        with solara.CardActions():
+            solara.Button(label=submit_label, color="primary", on_click=send)
+            solara.Button(
+                label="Clear",
+                color="secondary",
+                text=True,
+                on_click=lambda: [first_name.set(""), last_name.set(""), email.set(""), company.set(""), message.set("")],
+            )
+
+    def close_snackbar(*_ignore):
+        error.set(None)
+
+    solara.Style(
+        """
+        .v-snack__wrapper {
+            box-shadow: none;
+        }
+        """
+    )
+
+    with solara.v.Snackbar(
+        v_model=error.value is not None,
+        timeout=50000,
+        on_v_model=close_snackbar,
+        left=True,
+        color="transparent",
+    ):
+        with solara.Error(error.value):
+            solara.Button(icon=True, icon_name="mdi-close", color="white", on_click=close_snackbar)