@jxsuite/starters 3.4.0 → 3.6.0

package/sites/event/components/ev-agenda-tabs.jxn

@@ -0,0 +1,663 @@
+/- kdl-version 2
+
+ev-agenda-tabs {
+    state track=all
+    style {
+        display block
+        maxWidth "var(--max-width-narrow)"
+        margin "0 auto"
+        backgroundColor "var(--color-bg-elev)"
+        border "1px solid var(--color-border)"
+        borderRadius "var(--radius)"
+        overflow hidden
+        boxShadow "0 30px 80px -40px rgba(0,0,0,0.9)"
+    }
+    div {
+        style {
+            display flex
+            flexWrap wrap
+            gap "0.55rem"
+            padding "1.1rem 1.4rem"
+            borderBottom "1px solid var(--color-border)"
+            backgroundColor "var(--color-bg-elev2)"
+        }
+        button "All tracks" {
+            (on)onclick {
+                $expression operator="=" target=(ref)"#/state/track" value=all
+            }
+            style {
+                padding "0.55rem 1.2rem"
+                borderRadius "999px"
+                cursor pointer
+                fontSize "0.88rem"
+                fontWeight "700"
+                fontFamily inherit
+                transition "all 0.15s"
+                border "1px solid ${state.track === 'all' ? 'transparent' : 'var(--color-border)'}"
+                color "${state.track === 'all' ? '#ffffff' : 'var(--color-text-muted)'}"
+                background "${state.track === 'all' ? 'var(--grad-btn)' : 'rgba(255,255,255,0.02)'}"
+                boxShadow "${state.track === 'all' ? '0 8px 22px -8px var(--glow)' : 'none'}"
+            }
+        }
+        button "Main Stage" {
+            (on)onclick {
+                $expression operator="=" target=(ref)"#/state/track" value=main
+            }
+            style {
+                padding "0.55rem 1.2rem"
+                borderRadius "999px"
+                cursor pointer
+                fontSize "0.88rem"
+                fontWeight "700"
+                fontFamily inherit
+                transition "all 0.15s"
+                border "1px solid ${state.track === 'main' ? 'transparent' : 'var(--color-border)'}"
+                color "${state.track === 'main' ? '#ffffff' : 'var(--color-text-muted)'}"
+                background "${state.track === 'main' ? 'var(--grad-btn)' : 'rgba(255,255,255,0.02)'}"
+                boxShadow "${state.track === 'main' ? '0 8px 22px -8px var(--glow)' : 'none'}"
+            }
+        }
+        button Workshops {
+            (on)onclick {
+                $expression operator="=" target=(ref)"#/state/track" value=workshops
+            }
+            style {
+                padding "0.55rem 1.2rem"
+                borderRadius "999px"
+                cursor pointer
+                fontSize "0.88rem"
+                fontWeight "700"
+                fontFamily inherit
+                transition "all 0.15s"
+                border "1px solid ${state.track === 'workshops' ? 'transparent' : 'var(--color-border)'}"
+                color "${state.track === 'workshops' ? '#ffffff' : 'var(--color-text-muted)'}"
+                background "${state.track === 'workshops' ? 'var(--grad-btn)' : 'rgba(255,255,255,0.02)'}"
+                boxShadow "${state.track === 'workshops' ? '0 8px 22px -8px var(--glow)' : 'none'}"
+            }
+        }
+        button Design {
+            (on)onclick {
+                $expression operator="=" target=(ref)"#/state/track" value=design
+            }
+            style {
+                padding "0.55rem 1.2rem"
+                borderRadius "999px"
+                cursor pointer
+                fontSize "0.88rem"
+                fontWeight "700"
+                fontFamily inherit
+                transition "all 0.15s"
+                border "1px solid ${state.track === 'design' ? 'transparent' : 'var(--color-border)'}"
+                color "${state.track === 'design' ? '#ffffff' : 'var(--color-text-muted)'}"
+                background "${state.track === 'design' ? 'var(--grad-btn)' : 'rgba(255,255,255,0.02)'}"
+                boxShadow "${state.track === 'design' ? '0 8px 22px -8px var(--glow)' : 'none'}"
+            }
+        }
+    }
+    div {
+        style padding="1.6rem 1.4rem 1.2rem"
+        div {
+            style {
+                display "${state.track === 'all' || state.track === 'main' ? 'grid' : 'none'}"
+                gridTemplateColumns "4.2rem 1.6rem 1fr"
+                marginBottom "0.9rem"
+                @--sm gridTemplateColumns="3.4rem 1.2rem 1fr"
+            }
+            div "09:00" {
+                style {
+                    paddingTop "1.1rem"
+                    textAlign right
+                    paddingRight "0.15rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.96rem"
+                    fontWeight "700"
+                    fontVariantNumeric tabular-nums
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "var(--color-accent)"
+                }
+            }
+            div {
+                style position=relative
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "0"
+                        bottom "-0.9rem"
+                        width "2px"
+                        transform "translateX(-50%)"
+                        background "var(--grad)"
+                        opacity "0.4"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "1.45rem"
+                        width "0.85rem"
+                        height "0.85rem"
+                        borderRadius "50%"
+                        transform "translate(-50%, -50%)"
+                        border "3px solid var(--color-bg-elev)"
+                        background "var(--color-accent)"
+                        boxShadow "0 0 12px rgba(34,224,255,0.7)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                    padding "0.9rem 1.15rem"
+                    borderRadius "0.8rem"
+                    backgroundColor "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                }
+                div {
+                    style flex="1" minWidth="13rem"
+                    div "Opening Keynote: The Next Decade of the Web" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.02rem"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    div "with Ada Okafor" {
+                        style fontSize="0.88rem" color="var(--color-text-muted)"
+                    }
+                }
+                span "Main Stage" {
+                    style {
+                        whiteSpace nowrap
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        padding "0.3rem 0.75rem"
+                        borderRadius "999px"
+                        color "var(--color-accent)"
+                        backgroundColor "rgba(34,224,255,0.14)"
+                        border "1px solid rgba(34,224,255,0.35)"
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display "${state.track === 'all' || state.track === 'design' ? 'grid' : 'none'}"
+                gridTemplateColumns "4.2rem 1.6rem 1fr"
+                marginBottom "0.9rem"
+                @--sm gridTemplateColumns="3.4rem 1.2rem 1fr"
+            }
+            div "10:30" {
+                style {
+                    paddingTop "1.1rem"
+                    textAlign right
+                    paddingRight "0.15rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.96rem"
+                    fontWeight "700"
+                    fontVariantNumeric tabular-nums
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "var(--color-accent)"
+                }
+            }
+            div {
+                style position=relative
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "0"
+                        bottom "-0.9rem"
+                        width "2px"
+                        transform "translateX(-50%)"
+                        background "var(--grad)"
+                        opacity "0.4"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "1.45rem"
+                        width "0.85rem"
+                        height "0.85rem"
+                        borderRadius "50%"
+                        transform "translate(-50%, -50%)"
+                        border "3px solid var(--color-bg-elev)"
+                        background "#ff6bb0"
+                        boxShadow "0 0 12px rgba(255,61,154,0.7)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                    padding "0.9rem 1.15rem"
+                    borderRadius "0.8rem"
+                    backgroundColor "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                }
+                div {
+                    style flex="1" minWidth="13rem"
+                    div "Designing for Trust at Scale" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.02rem"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    div "with Mateo Rivas" {
+                        style fontSize="0.88rem" color="var(--color-text-muted)"
+                    }
+                }
+                span Design {
+                    style {
+                        whiteSpace nowrap
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        padding "0.3rem 0.75rem"
+                        borderRadius "999px"
+                        color "#ff6bb0"
+                        backgroundColor "rgba(255,61,154,0.14)"
+                        border "1px solid rgba(255,61,154,0.35)"
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display "${state.track === 'all' || state.track === 'workshops' ? 'grid' : 'none'}"
+                gridTemplateColumns "4.2rem 1.6rem 1fr"
+                marginBottom "0.9rem"
+                @--sm gridTemplateColumns="3.4rem 1.2rem 1fr"
+            }
+            div "11:45" {
+                style {
+                    paddingTop "1.1rem"
+                    textAlign right
+                    paddingRight "0.15rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.96rem"
+                    fontWeight "700"
+                    fontVariantNumeric tabular-nums
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "var(--color-accent)"
+                }
+            }
+            div {
+                style position=relative
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "0"
+                        bottom "-0.9rem"
+                        width "2px"
+                        transform "translateX(-50%)"
+                        background "var(--grad)"
+                        opacity "0.4"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "1.45rem"
+                        width "0.85rem"
+                        height "0.85rem"
+                        borderRadius "50%"
+                        transform "translate(-50%, -50%)"
+                        border "3px solid var(--color-bg-elev)"
+                        background "var(--color-lime)"
+                        boxShadow "0 0 12px rgba(198,255,77,0.7)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                    padding "0.9rem 1.15rem"
+                    borderRadius "0.8rem"
+                    backgroundColor "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                }
+                div {
+                    style flex="1" minWidth="13rem"
+                    div "Hands-on: Building Reactive Islands" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.02rem"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    div "with Priya Nair" {
+                        style fontSize="0.88rem" color="var(--color-text-muted)"
+                    }
+                }
+                span Workshops {
+                    style {
+                        whiteSpace nowrap
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        padding "0.3rem 0.75rem"
+                        borderRadius "999px"
+                        color "var(--color-lime)"
+                        backgroundColor "rgba(198,255,77,0.14)"
+                        border "1px solid rgba(198,255,77,0.35)"
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display "${state.track === 'all' || state.track === 'main' ? 'grid' : 'none'}"
+                gridTemplateColumns "4.2rem 1.6rem 1fr"
+                marginBottom "0.9rem"
+                @--sm gridTemplateColumns="3.4rem 1.2rem 1fr"
+            }
+            div "13:30" {
+                style {
+                    paddingTop "1.1rem"
+                    textAlign right
+                    paddingRight "0.15rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.96rem"
+                    fontWeight "700"
+                    fontVariantNumeric tabular-nums
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "var(--color-accent)"
+                }
+            }
+            div {
+                style position=relative
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "0"
+                        bottom "-0.9rem"
+                        width "2px"
+                        transform "translateX(-50%)"
+                        background "var(--grad)"
+                        opacity "0.4"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "1.45rem"
+                        width "0.85rem"
+                        height "0.85rem"
+                        borderRadius "50%"
+                        transform "translate(-50%, -50%)"
+                        border "3px solid var(--color-bg-elev)"
+                        background "var(--color-accent)"
+                        boxShadow "0 0 12px rgba(34,224,255,0.7)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                    padding "0.9rem 1.15rem"
+                    borderRadius "0.8rem"
+                    backgroundColor "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                }
+                div {
+                    style flex="1" minWidth="13rem"
+                    div "Scaling Systems Without Scaling Teams" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.02rem"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    div "with Jonas Berg" {
+                        style fontSize="0.88rem" color="var(--color-text-muted)"
+                    }
+                }
+                span "Main Stage" {
+                    style {
+                        whiteSpace nowrap
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        padding "0.3rem 0.75rem"
+                        borderRadius "999px"
+                        color "var(--color-accent)"
+                        backgroundColor "rgba(34,224,255,0.14)"
+                        border "1px solid rgba(34,224,255,0.35)"
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display "${state.track === 'all' || state.track === 'design' ? 'grid' : 'none'}"
+                gridTemplateColumns "4.2rem 1.6rem 1fr"
+                marginBottom "0.9rem"
+                @--sm gridTemplateColumns="3.4rem 1.2rem 1fr"
+            }
+            div "15:00" {
+                style {
+                    paddingTop "1.1rem"
+                    textAlign right
+                    paddingRight "0.15rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.96rem"
+                    fontWeight "700"
+                    fontVariantNumeric tabular-nums
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "var(--color-accent)"
+                }
+            }
+            div {
+                style position=relative
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "0"
+                        bottom "-0.9rem"
+                        width "2px"
+                        transform "translateX(-50%)"
+                        background "var(--grad)"
+                        opacity "0.4"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "1.45rem"
+                        width "0.85rem"
+                        height "0.85rem"
+                        borderRadius "50%"
+                        transform "translate(-50%, -50%)"
+                        border "3px solid var(--color-bg-elev)"
+                        background "#ff6bb0"
+                        boxShadow "0 0 12px rgba(255,61,154,0.7)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                    padding "0.9rem 1.15rem"
+                    borderRadius "0.8rem"
+                    backgroundColor "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                }
+                div {
+                    style flex="1" minWidth="13rem"
+                    div "Motion, Meaning & Microinteractions" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.02rem"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    div "with Lena Cho" {
+                        style fontSize="0.88rem" color="var(--color-text-muted)"
+                    }
+                }
+                span Design {
+                    style {
+                        whiteSpace nowrap
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        padding "0.3rem 0.75rem"
+                        borderRadius "999px"
+                        color "#ff6bb0"
+                        backgroundColor "rgba(255,61,154,0.14)"
+                        border "1px solid rgba(255,61,154,0.35)"
+                    }
+                }
+            }
+        }
+        div {
+            style {
+                display "${state.track === 'all' || state.track === 'workshops' ? 'grid' : 'none'}"
+                gridTemplateColumns "4.2rem 1.6rem 1fr"
+                @--sm gridTemplateColumns="3.4rem 1.2rem 1fr"
+            }
+            div "16:15" {
+                style {
+                    paddingTop "1.1rem"
+                    textAlign right
+                    paddingRight "0.15rem"
+                    fontFamily "var(--font-heading)"
+                    fontSize "0.96rem"
+                    fontWeight "700"
+                    fontVariantNumeric tabular-nums
+                    background "var(--grad)"
+                    backgroundClip text
+                    webkitBackgroundClip text
+                    webkitTextFillColor transparent
+                    color "var(--color-accent)"
+                }
+            }
+            div {
+                style position=relative
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "0"
+                        bottom "0"
+                        width "2px"
+                        transform "translateX(-50%)"
+                        background "var(--grad)"
+                        opacity "0.4"
+                    }
+                }
+                div {
+                    style {
+                        position absolute
+                        left "50%"
+                        top "1.45rem"
+                        width "0.85rem"
+                        height "0.85rem"
+                        borderRadius "50%"
+                        transform "translate(-50%, -50%)"
+                        border "3px solid var(--color-bg-elev)"
+                        background "var(--color-lime)"
+                        boxShadow "0 0 12px rgba(198,255,77,0.7)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    flexWrap wrap
+                    alignItems center
+                    justifyContent space-between
+                    gap "0.75rem"
+                    padding "0.9rem 1.15rem"
+                    borderRadius "0.8rem"
+                    backgroundColor "var(--color-bg-elev2)"
+                    border "1px solid var(--color-border)"
+                }
+                div {
+                    style flex="1" minWidth="13rem"
+                    div "Ship It: From Prototype to Production" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontWeight "700"
+                            fontSize "1.02rem"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    div "with Sam Whitfield" {
+                        style fontSize="0.88rem" color="var(--color-text-muted)"
+                    }
+                }
+                span Workshops {
+                    style {
+                        whiteSpace nowrap
+                        fontSize "0.72rem"
+                        fontWeight "700"
+                        textTransform uppercase
+                        letterSpacing "0.03em"
+                        padding "0.3rem 0.75rem"
+                        borderRadius "999px"
+                        color "var(--color-lime)"
+                        backgroundColor "rgba(198,255,77,0.14)"
+                        border "1px solid rgba(198,255,77,0.35)"
+                    }
+                }
+            }
+        }
+    }
+}