@jxsuite/starters 3.3.2 → 3.5.0

package/sites/event/components/ev-cta.jxn

@@ -0,0 +1,93 @@
+/- kdl-version 2
+
+ev-cta {
+    state eyebrow="" heading="" text="" cta="Get tickets" ctaHref="/tickets/" note=""
+    style {
+        display block
+        position relative
+        overflow hidden
+        color "var(--color-text-white)"
+        background "radial-gradient(ellipse 55% 90% at 12% 100%, rgba(34,224,255,0.28), transparent 60%), radial-gradient(ellipse 55% 90% at 88% 0%, rgba(255,61,154,0.32), transparent 60%), radial-gradient(ellipse 50% 60% at 50% 50%, rgba(168,85,247,0.2), transparent 65%), var(--color-bg)"
+        padding "clamp(3.5rem, 8vw, 5.5rem) 1.5rem"
+        textAlign center
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            backgroundImage "radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)"
+            backgroundSize "38px 38px"
+            opacity "0.5"
+            pointerEvents none
+        }
+    }
+    div {
+        style maxWidth="var(--max-width-narrow)" margin="0 auto" position=relative zIndex="1"
+        p {
+            style {
+                display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                alignItems center
+                gap "0.55rem"
+                textTransform uppercase
+                letterSpacing "0.16em"
+                fontSize "0.78rem"
+                fontWeight "700"
+                color "var(--color-accent)"
+                margin "0 0 1rem"
+            }
+            span {
+                style {
+                    width "0.5rem"
+                    height "0.5rem"
+                    borderRadius "999px"
+                    background "var(--color-lime)"
+                    boxShadow "0 0 10px var(--color-lime)"
+                }
+            }
+            span "${state.eyebrow}"
+        }
+        h2 "${state.heading}" {
+            style {
+                fontFamily "var(--font-heading)"
+                fontSize "clamp(2rem, 4.5vw, 3.1rem)"
+                fontWeight "800"
+                lineHeight "1.08"
+                letterSpacing "-0.035em"
+                margin "0 0 1.1rem"
+                color "var(--color-text-primary)"
+            }
+        }
+        p "${state.text}" {
+            style {
+                fontSize "1.12rem"
+                lineHeight "1.7"
+                color "var(--color-text-muted)"
+                margin "0 auto 2.1rem"
+                maxWidth "52ch"
+            }
+        }
+        a href="${state.ctaHref}" "${state.cta}" {
+            style {
+                display inline-block
+                background "var(--grad-btn)"
+                color "#ffffff"
+                padding "1rem 2.6rem"
+                borderRadius "999px"
+                fontSize "1.08rem"
+                fontWeight "700"
+                textDecoration none
+                boxShadow "0 14px 40px -10px var(--glow)"
+                transition "transform 0.15s, box-shadow 0.15s"
+                :hover transform="translateY(-2px)" boxShadow="0 20px 50px -10px var(--glow)"
+            }
+        }
+        p "${state.note}" {
+            style {
+                display "${state.note ? 'block' : 'none'}"
+                margin "1.2rem 0 0"
+                fontSize "0.9rem"
+                color "var(--color-text-muted)"
+            }
+        }
+    }
+}

package/sites/event/components/ev-feature.jxn

@@ -0,0 +1,46 @@
+/- kdl-version 2
+
+ev-feature {
+    state icon="" title="" text=""
+    style {
+        display block
+        padding "1.9rem"
+        backgroundColor "var(--color-bg-elev)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        transition "transform 0.18s, box-shadow 0.18s, border-color 0.18s"
+        :hover {
+            transform "translateY(-3px)"
+            borderColor "rgba(34,224,255,0.4)"
+            boxShadow "0 18px 44px -20px var(--glow-cyan)"
+        }
+    }
+    div "${state.icon}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3rem"
+            height "3rem"
+            borderRadius "0.8rem"
+            fontSize "1.5rem"
+            lineHeight "1"
+            marginBottom "1.1rem"
+            background "linear-gradient(150deg, rgba(34,224,255,0.24), rgba(255,61,154,0.2))"
+            border "1px solid var(--color-border)"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.22rem"
+            fontWeight "700"
+            letterSpacing "-0.01em"
+            margin "0 0 0.5rem"
+            color "var(--color-text-primary)"
+        }
+    }
+    p "${state.text}" {
+        style margin="0" color="var(--color-text-muted)" fontSize="0.98rem" lineHeight="1.65"
+    }
+}

package/sites/event/components/ev-footer.jxn

@@ -0,0 +1,135 @@
+/- kdl-version 2
+
+ev-footer {
+    state {
+        brand "Horizon Conf"
+        tagline "One day. Two stages. The people building what's next."
+        date "June 12, 2026"
+        venue "The Foundry, Portland OR"
+    }
+    style {
+        display block
+        position relative
+        backgroundColor "var(--color-bg-dark)"
+        color "var(--color-text-white)"
+        borderTop "1px solid var(--color-border)"
+        padding "clamp(3rem, 6vw, 4.5rem) 1.5rem 2.25rem"
+    }
+    div {
+        style position=absolute top="0" left="0" right="0" height="2px" background="var(--grad)"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "2fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            div {
+                style display=flex alignItems=center gap="0.6rem" marginBottom="0.9rem"
+                span H {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "1.7rem"
+                        height "1.7rem"
+                        borderRadius "0.55rem"
+                        background "var(--grad-btn)"
+                        boxShadow "0 0 18px var(--glow)"
+                        color "#ffffff"
+                        fontSize "0.9rem"
+                        fontWeight "800"
+                        fontFamily "var(--font-heading)"
+                    }
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.4rem"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style margin="0" color="var(--color-text-muted)" maxWidth="34ch" lineHeight="1.7"
+            }
+        }
+        div {
+            div "When & where" {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "var(--color-accent)"
+                    marginBottom "0.85rem"
+                }
+            }
+            p "${state.date}" {
+                style margin="0 0 0.35rem" color="var(--color-text-primary)"
+            }
+            p "${state.venue}" {
+                style margin="0" color="var(--color-text-muted)"
+            }
+        }
+        div {
+            div Explore {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "var(--color-accent)"
+                    marginBottom "0.85rem"
+                }
+            }
+            a href="/schedule/" Schedule {
+                style {
+                    display block
+                    color "var(--color-text-muted)"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-text-primary)"
+                }
+            }
+            a href="/speakers/" Speakers {
+                style {
+                    display block
+                    color "var(--color-text-muted)"
+                    textDecoration none
+                    marginBottom "0.4rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-text-primary)"
+                }
+            }
+            a href="/tickets/" Tickets {
+                style {
+                    display block
+                    color "var(--color-text-muted)"
+                    textDecoration none
+                    transition "color 0.15s"
+                    :hover color="var(--color-text-primary)"
+                }
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "2.75rem auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid var(--color-border)"
+            fontSize "0.85rem"
+            color "var(--color-text-muted)"
+        }
+        p "© Horizon Conf 2026. Built with Jx." {
+            style margin="0"
+        }
+    }
+}

package/sites/event/components/ev-hero.jxn

@@ -0,0 +1,323 @@
+/- kdl-version 2
+
+ev-hero {
+    state {
+        eyebrow ""
+        date ""
+        location ""
+        heading ""
+        subheading ""
+        cta "Get tickets"
+        ctaHref "/tickets/"
+        cta2 ""
+        cta2Href "/schedule/"
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        color "var(--color-text-white)"
+        background "radial-gradient(ellipse 50% 45% at 8% 0%, rgba(34,224,255,0.22), transparent 60%), radial-gradient(ellipse 55% 55% at 92% 12%, rgba(255,61,154,0.28), transparent 62%), radial-gradient(ellipse 60% 50% at 55% 115%, rgba(168,85,247,0.22), transparent 60%), var(--color-bg)"
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            backgroundImage "radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px)"
+            backgroundSize "38px 38px"
+            opacity "0.5"
+            pointerEvents none
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "5"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(3.5rem, 8vw, 6.5rem) 1.5rem clamp(2.5rem, 6vw, 4rem)"
+            display grid
+            gridTemplateColumns "1.05fr 0.95fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.5rem"
+        }
+        div {
+            div {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.55rem"
+                    padding "0.4rem 0.95rem"
+                    borderRadius "999px"
+                    border "1px solid var(--color-border)"
+                    background "rgba(255,255,255,0.04)"
+                    backdropFilter "blur(4px)"
+                    fontSize "0.82rem"
+                    fontWeight "600"
+                    letterSpacing "0.02em"
+                    marginBottom "1.5rem"
+                    color "var(--color-text-primary)"
+                }
+                span {
+                    style {
+                        width "0.5rem"
+                        height "0.5rem"
+                        borderRadius "999px"
+                        background "var(--color-lime)"
+                        boxShadow "0 0 10px var(--color-lime)"
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h1 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.9rem, 7.5vw, 5.6rem)"
+                    fontWeight "800"
+                    lineHeight "0.98"
+                    margin "0 0 1.3rem"
+                    letterSpacing "-0.04em"
+                    background "linear-gradient(102deg, #22e0ff 0%, #7c8bff 30%, #a855f7 56%, #ff3d9a 88%)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "#22e0ff"
+                }
+            }
+            p "${state.subheading}" {
+                style {
+                    fontSize "clamp(1.05rem, 1.8vw, 1.3rem)"
+                    lineHeight "1.6"
+                    margin "0 0 1.9rem"
+                    color "var(--color-text-muted)"
+                    maxWidth "48ch"
+                }
+            }
+            div {
+                style {
+                    display inline-flex
+                    alignItems stretch
+                    borderRadius "0.85rem"
+                    border "1px solid var(--color-border)"
+                    background "linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01))"
+                    overflow hidden
+                    marginBottom "2.1rem"
+                    @--sm display=flex width="100%"
+                }
+                div {
+                    style width="0.4rem" background="var(--grad)"
+                }
+                div {
+                    style padding="0.7rem 1.15rem" display=flex flexDirection=column gap="0.15rem"
+                    span Date {
+                        style {
+                            fontSize "0.68rem"
+                            textTransform uppercase
+                            letterSpacing "0.16em"
+                            color "var(--color-text-muted)"
+                        }
+                    }
+                    span "${state.date}" {
+                        style fontFamily="var(--font-heading)" fontWeight="700" fontSize="0.98rem"
+                    }
+                }
+                div {
+                    style {
+                        width "1px"
+                        background "repeating-linear-gradient(180deg, var(--color-border) 0 4px, transparent 4px 8px)"
+                    }
+                }
+                div {
+                    style padding="0.7rem 1.15rem" display=flex flexDirection=column gap="0.15rem"
+                    span Venue {
+                        style {
+                            fontSize "0.68rem"
+                            textTransform uppercase
+                            letterSpacing "0.16em"
+                            color "var(--color-text-muted)"
+                        }
+                    }
+                    span "${state.location}" {
+                        style fontFamily="var(--font-heading)" fontWeight="700" fontSize="0.98rem"
+                    }
+                }
+            }
+            div {
+                style display=flex gap="0.75rem" flexWrap=wrap
+                a href="${state.ctaHref}" "${state.cta}" {
+                    style {
+                        display inline-block
+                        background "var(--grad-btn)"
+                        color "#ffffff"
+                        padding "0.95rem 2.25rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "700"
+                        textDecoration none
+                        boxShadow "0 12px 34px -8px var(--glow)"
+                        transition "transform 0.15s, box-shadow 0.15s"
+                        :hover transform="translateY(-2px)" boxShadow="0 18px 44px -8px var(--glow)"
+                    }
+                }
+                a href="${state.cta2Href}" "${state.cta2}" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        gap "0.5rem"
+                        border "1px solid var(--color-border)"
+                        backgroundColor "rgba(255,255,255,0.03)"
+                        color "var(--color-text-primary)"
+                        padding "0.95rem 2rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "700"
+                        textDecoration none
+                        transition "background-color 0.15s, border-color 0.15s"
+                        :hover {
+                            backgroundColor "rgba(255,255,255,0.07)"
+                            borderColor "var(--color-text-muted)"
+                        }
+                    }
+                }
+            }
+        }
+        div {
+            style position=relative transform="rotate(2deg)" {
+                @--md transform=none maxWidth="460px" margin="0 auto" width="100%"
+            }
+            div {
+                style {
+                    position relative
+                    borderRadius "1.15rem"
+                    padding "0.5rem"
+                    background "linear-gradient(150deg, rgba(34,224,255,0.6), rgba(168,85,247,0.4) 45%, rgba(255,61,154,0.55))"
+                    boxShadow "0 40px 90px -30px rgba(0,0,0,0.85), 0 0 90px -30px var(--glow)"
+                }
+                div {
+                    style {
+                        position relative
+                        borderRadius "0.85rem"
+                        overflow hidden
+                        aspectRatio "4 / 5"
+                        backgroundColor "var(--color-bg-elev)"
+                    }
+                    img src="${state.bg}" alt="Horizon Conf main stage" width="1600" height="1067" loading=eager {
+                        style {
+                            position absolute
+                            inset "0"
+                            width "100%"
+                            height "100%"
+                            objectFit cover
+                            display block
+                        }
+                    }
+                    div {
+                        style {
+                            position absolute
+                            inset "0"
+                            background "linear-gradient(160deg, rgba(34,224,255,0.28) 0%, transparent 40%, rgba(10,7,17,0.35) 75%, rgba(255,61,154,0.35) 100%)"
+                            mixBlendMode screen
+                        }
+                    }
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    top "-1rem"
+                    left "-1rem"
+                    padding "0.55rem 1rem"
+                    borderRadius "0.7rem"
+                    background "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                    boxShadow "0 12px 30px -10px rgba(0,0,0,0.7)"
+                    fontFamily "var(--font-heading)"
+                    fontWeight "800"
+                    fontSize "0.85rem"
+                    letterSpacing "0.02em"
+                    transform "rotate(-4deg)"
+                }
+                span "2 stages · 24 speakers" {
+                    style {
+                        background "var(--grad)"
+                        backgroundClip text
+                        webkitBackgroundClip text
+                        webkitTextFillColor transparent
+                        color "var(--color-accent)"
+                    }
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    bottom "-1.1rem"
+                    right "-0.6rem"
+                    display flex
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.55rem 1rem"
+                    borderRadius "999px"
+                    background "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                    boxShadow "0 12px 30px -10px rgba(0,0,0,0.7)"
+                    fontWeight "700"
+                    fontSize "0.82rem"
+                    transform "rotate(3deg)"
+                }
+                span {
+                    style {
+                        width "0.5rem"
+                        height "0.5rem"
+                        borderRadius "999px"
+                        background "var(--color-lime)"
+                        boxShadow "0 0 10px var(--color-lime)"
+                    }
+                }
+                span "One day only"
+            }
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "5"
+            width "112%"
+            marginLeft "-6%"
+            transform "rotate(-2.5deg)"
+            background "var(--grad)"
+            padding "0.65rem 0"
+            overflow hidden
+            boxShadow "0 20px 50px -20px var(--glow)"
+        }
+        div {
+            style {
+                display flex
+                alignItems center
+                gap "1.5rem"
+                justifyContent center
+                whiteSpace nowrap
+                fontFamily "var(--font-heading)"
+                fontWeight "800"
+                fontSize "clamp(0.85rem, 1.6vw, 1.05rem)"
+                letterSpacing "0.12em"
+                textTransform uppercase
+                color "var(--color-ink)"
+            }
+            span Design
+            span ✦
+            span Engineering
+            span ✦
+            span Motion
+            span ✦
+            span AI
+            span ✦
+            span Systems
+            span ✦
+            span Workshops
+            span ✦
+            span "The hallway track"
+        }
+    }
+}