@jxsuite/starters 3.3.2 → 3.5.0

package/sites/shop/components/shp-hero.jxn

@@ -0,0 +1,311 @@
+/- kdl-version 2
+
+shp-hero {
+    state {
+        eyebrow "Featured build"
+        heading ""
+        subheading ""
+        price ""
+        oldPrice ""
+        badge ""
+        rating "4.9"
+        cta "Add to cart"
+        ctaHref "/products/"
+        cta2 "Shop all bikes"
+        cta2Href "/products/"
+        imageAlt "Featured bike"
+        image type=string format=image default=""
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        borderBottom "1px solid var(--color-border)"
+        backgroundColor "var(--color-bg-cream)"
+        backgroundImage "radial-gradient(circle at 82% 12%, rgba(38,208,124,0.16), transparent 46%), radial-gradient(circle at 8% 90%, rgba(13,17,23,0.05), transparent 40%)"
+    }
+    div {
+        style {
+            position absolute
+            inset "0"
+            backgroundImage "radial-gradient(circle, rgba(13,17,23,0.05) 1px, transparent 1px)"
+            backgroundSize "26px 26px"
+            opacity "0.5"
+            pointerEvents none
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(2.75rem, 6vw, 5rem) 1.5rem clamp(3rem, 6vw, 5.5rem)"
+            display grid
+            gridTemplateColumns "1.02fr 0.98fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.5rem"
+        }
+        div {
+            p {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.38rem 0.85rem 0.38rem 0.7rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-ink)"
+                    color "var(--color-text-white)"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    margin "0 0 1.5rem"
+                }
+                span {
+                    style {
+                        width "0.45rem"
+                        height "0.45rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-brand-bright)"
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h1 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(2.7rem, 6vw, 4.6rem)"
+                    fontWeight "800"
+                    lineHeight "0.98"
+                    letterSpacing "-0.035em"
+                    margin "0 0 1.25rem"
+                    color "var(--color-text-primary)"
+                    maxWidth "13ch"
+                }
+            }
+            p "${state.subheading}" {
+                style {
+                    fontSize "clamp(1.05rem, 1.6vw, 1.22rem)"
+                    lineHeight "1.6"
+                    color "var(--color-text-secondary)"
+                    margin "0 0 1.85rem"
+                    maxWidth "44ch"
+                }
+            }
+            div {
+                style {
+                    display flex
+                    alignItems baseline
+                    gap "0.85rem"
+                    marginBottom "1.75rem"
+                    flexWrap wrap
+                }
+                span "${state.price}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "clamp(2rem, 3.5vw, 2.7rem)"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                        color "var(--color-text-primary)"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                span "${state.oldPrice}" {
+                    style {
+                        display "${state.oldPrice ? 'inline' : 'none'}"
+                        fontSize "1.25rem"
+                        fontWeight "600"
+                        color "var(--color-text-muted)"
+                        textDecoration line-through
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+                span {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.35rem"
+                        padding "0.3rem 0.7rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-gold-tint)"
+                        color "var(--color-gold)"
+                        fontSize "0.75rem"
+                        fontWeight "800"
+                        textTransform uppercase
+                        letterSpacing "0.05em"
+                    }
+                    span "★ "
+                    span "${state.rating} rider rating"
+                }
+            }
+            div {
+                style display=flex gap="0.75rem" flexWrap=wrap
+                a href="${state.ctaHref}" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.5rem"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        padding "0.95rem 2rem"
+                        borderRadius "999px"
+                        fontSize "1.02rem"
+                        fontWeight "700"
+                        textDecoration none
+                        boxShadow "0 14px 30px -12px rgba(10,157,84,0.75)"
+                        transition "transform 0.15s, background-color 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-primary-hover)"
+                            transform "translateY(-2px)"
+                        }
+                    }
+                    span "${state.cta}"
+                    span →
+                }
+                a href="${state.cta2Href}" "${state.cta2}" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        border "1px solid var(--color-line-strong)"
+                        backgroundColor "var(--color-bg-white)"
+                        color "var(--color-text-primary)"
+                        padding "0.95rem 1.75rem"
+                        borderRadius "999px"
+                        fontSize "1.02rem"
+                        fontWeight "700"
+                        textDecoration none
+                        transition "border-color 0.15s"
+                        :hover borderColor="var(--color-primary)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    alignItems center
+                    gap "1.25rem"
+                    marginTop "1.75rem"
+                    flexWrap wrap
+                    fontSize "0.86rem"
+                    fontWeight "600"
+                    color "var(--color-text-muted)"
+                }
+                span {
+                    style display=inline-flex alignItems=center gap="0.4rem"
+                    span ✓ {
+                        style color="var(--color-primary)"
+                    }
+                    span "Free shipping over $50"
+                }
+                span {
+                    style display=inline-flex alignItems=center gap="0.4rem"
+                    span ✓ {
+                        style color="var(--color-primary)"
+                    }
+                    span "Fitted in-store, ready to ride"
+                }
+            }
+        }
+        div {
+            style position=relative
+            div {
+                style {
+                    position absolute
+                    inset "8% -4% -6% 10%"
+                    borderRadius "var(--radius-lg)"
+                    background "linear-gradient(150deg, var(--color-brand-bright), var(--color-primary))"
+                    opacity "0.16"
+                    filter "blur(6px)"
+                }
+            }
+            div {
+                style {
+                    position relative
+                    borderRadius "var(--radius-lg)"
+                    overflow hidden
+                    backgroundColor "var(--color-bg-white)"
+                    border "1px solid var(--color-border)"
+                    boxShadow "var(--shadow-float)"
+                }
+                div {
+                    style position=relative aspectRatio="4 / 3" backgroundColor="var(--color-panel)"
+                    img src="${state.image}" alt="${state.imageAlt}" loading=eager {
+                        style {
+                            position absolute
+                            inset "0"
+                            width "100%"
+                            height "100%"
+                            objectFit cover
+                            display block
+                        }
+                    }
+                    span {
+                        style {
+                            display "${state.badge ? 'inline-flex' : 'none'}"
+                            position absolute
+                            top "1rem"
+                            left "1rem"
+                            alignItems center
+                            gap "0.35rem"
+                            padding "0.4rem 0.8rem"
+                            borderRadius "999px"
+                            backgroundColor "var(--color-gold)"
+                            color "var(--color-text-white)"
+                            fontSize "0.74rem"
+                            fontWeight "800"
+                            textTransform uppercase
+                            letterSpacing "0.06em"
+                            boxShadow "0 8px 20px -8px rgba(232,137,12,0.7)"
+                        }
+                        span "★ "
+                        span "${state.badge}"
+                    }
+                }
+                div {
+                    style {
+                        display flex
+                        alignItems center
+                        justifyContent space-between
+                        gap "1rem"
+                        padding "1.15rem 1.35rem"
+                    }
+                    div {
+                        div "In stock now" {
+                            style {
+                                fontSize "0.72rem"
+                                fontWeight "700"
+                                textTransform uppercase
+                                letterSpacing "0.1em"
+                                color "var(--color-primary)"
+                            }
+                        }
+                        div "Ships assembled" {
+                            style {
+                                fontFamily "var(--font-heading)"
+                                fontSize "1.15rem"
+                                fontWeight "700"
+                                color "var(--color-text-primary)"
+                                marginTop "0.15rem"
+                            }
+                        }
+                    }
+                    span 🚲 {
+                        style {
+                            display inline-flex
+                            alignItems center
+                            justifyContent center
+                            width "2.6rem"
+                            height "2.6rem"
+                            borderRadius "999px"
+                            backgroundColor "var(--color-brand-tint)"
+                            color "var(--color-primary)"
+                            fontSize "1.2rem"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/sites/shop/components/shp-intro.jxn

@@ -0,0 +1,42 @@
+/- kdl-version 2
+
+shp-intro {
+    state {
+        image type=string format=image default=""
+        imageAlt ""
+        reverse #false
+    }
+    style display=block padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1fr 1fr"
+            gap "clamp(2rem, 5vw, 4rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            style order="${state.reverse ? '2' : '1'}"
+            img src="${state.image}" alt="${state.imageAlt}" loading=lazy {
+                style {
+                    width "100%"
+                    height auto
+                    borderRadius "var(--radius)"
+                    display block
+                    boxShadow "0 12px 40px rgba(15,23,42,0.14)"
+                }
+            }
+        }
+        div {
+            style {
+                order "${state.reverse ? '1' : '2'}"
+                fontSize "1.08rem"
+                lineHeight "1.8"
+                color "var(--color-text-primary)"
+            }
+            slot
+        }
+    }
+}

package/sites/shop/components/shp-nav.jxn

@@ -0,0 +1,273 @@
+/- kdl-version 2
+
+shp-nav {
+    state brand=Cadence cartCount="2"
+    style display=block position=sticky top="0" zIndex="50"
+    div {
+        style backgroundColor="var(--color-bg-dark)" color="var(--color-text-white)"
+        div {
+            style {
+                maxWidth "var(--max-width)"
+                margin "0 auto"
+                padding "0.5rem 1.5rem"
+                display flex
+                alignItems center
+                justifyContent center
+                gap "1.4rem"
+                fontSize "0.72rem"
+                fontWeight "600"
+                textTransform uppercase
+                letterSpacing "0.14em"
+            }
+            span {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.5rem"
+                    color "var(--color-brand-bright)"
+                }
+                span {
+                    style {
+                        width "0.42rem"
+                        height "0.42rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-brand-bright)"
+                        boxShadow "0 0 0 3px rgba(38,208,124,0.22)"
+                    }
+                }
+                span "Free shipping over $50"
+            }
+            span • {
+                style opacity="0.32" {
+                    @--sm display=none
+                }
+            }
+            span "Free first tune-up on every new bike" {
+                style opacity="0.82" {
+                    @--sm display=none
+                }
+            }
+            span • {
+                style opacity="0.32" {
+                    @--md display=none
+                }
+            }
+            span "48-hour service turnaround" {
+                style opacity="0.82" {
+                    @--md display=none
+                }
+            }
+        }
+    }
+    div {
+        style {
+            backgroundColor "rgba(255,255,255,0.92)"
+            backdropFilter "blur(12px)"
+            borderBottom "1px solid var(--color-border)"
+        }
+        div {
+            style {
+                maxWidth "var(--max-width)"
+                margin "0 auto"
+                padding "0.85rem 1.5rem"
+                display flex
+                alignItems center
+                gap "1.5rem"
+            }
+            a href="/" aria-label="Cadence Cycles home" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.6rem"
+                    textDecoration none
+                    flexShrink "0"
+                }
+                span ◎ {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.15rem"
+                        height "2.15rem"
+                        borderRadius "0.6rem"
+                        background "linear-gradient(150deg, var(--color-brand-bright), var(--color-primary))"
+                        color "var(--color-text-white)"
+                        fontSize "1.2rem"
+                        fontWeight "800"
+                        boxShadow "0 8px 18px -8px rgba(10,157,84,0.7)"
+                    }
+                }
+                span {
+                    style display=flex flexDirection=column lineHeight="1"
+                    span "${state.brand}" {
+                        style {
+                            fontFamily "var(--font-heading)"
+                            fontSize "1.28rem"
+                            fontWeight "800"
+                            letterSpacing "-0.03em"
+                            color "var(--color-text-primary)"
+                        }
+                    }
+                    span "Cycles Co." {
+                        style {
+                            fontSize "0.58rem"
+                            fontWeight "700"
+                            letterSpacing "0.28em"
+                            textTransform uppercase
+                            color "var(--color-primary)"
+                            marginTop "0.24rem"
+                        }
+                    }
+                }
+            }
+            nav {
+                style display=flex alignItems=center gap="1.35rem" {
+                    @--lg display=none
+                }
+                a href="/products/" Road {
+                    style {
+                        color "var(--color-text-secondary)"
+                        textDecoration none
+                        fontWeight "600"
+                        fontSize "0.9rem"
+                        transition "color 0.15s"
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/products/" Mountain {
+                    style {
+                        color "var(--color-text-secondary)"
+                        textDecoration none
+                        fontWeight "600"
+                        fontSize "0.9rem"
+                        transition "color 0.15s"
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/products/" Gravel {
+                    style {
+                        color "var(--color-text-secondary)"
+                        textDecoration none
+                        fontWeight "600"
+                        fontSize "0.9rem"
+                        transition "color 0.15s"
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/products/" Kids {
+                    style {
+                        color "var(--color-text-secondary)"
+                        textDecoration none
+                        fontWeight "600"
+                        fontSize "0.9rem"
+                        transition "color 0.15s"
+                        :hover color="var(--color-primary)"
+                    }
+                }
+                a href="/products/" Sale {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.35rem"
+                        color "var(--color-sale)"
+                        textDecoration none
+                        fontWeight "700"
+                        fontSize "0.9rem"
+                        transition "opacity 0.15s"
+                        :hover opacity="0.75"
+                    }
+                }
+            }
+            label {
+                style {
+                    marginLeft auto
+                    display flex
+                    alignItems center
+                    gap "0.55rem"
+                    flex "0 1 320px"
+                    padding "0 0.9rem"
+                    height "2.5rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-bg-cream)"
+                    border "1px solid var(--color-border)"
+                    transition "border-color 0.15s"
+                    @--md display=none
+                    :focus-within borderColor="var(--color-primary)"
+                }
+                span ⌕ {
+                    style color="var(--color-text-muted)" fontSize="0.95rem"
+                }
+                input type=search name=q placeholder="Search bikes, gear…" aria-label="Search products" {
+                    style {
+                        flex "1"
+                        minWidth "0"
+                        border none
+                        outline none
+                        background transparent
+                        fontFamily inherit
+                        fontSize "0.9rem"
+                        color "var(--color-text-primary)"
+                    }
+                }
+            }
+            a href="/products/" aria-label="Search products" ⌕ {
+                style {
+                    display none
+                    marginLeft auto
+                    alignItems center
+                    justifyContent center
+                    width "2.5rem"
+                    height "2.5rem"
+                    borderRadius "999px"
+                    border "1px solid var(--color-border)"
+                    color "var(--color-text-primary)"
+                    textDecoration none
+                    fontSize "1.05rem"
+                    @--md display=inline-flex
+                }
+            }
+            a href="/contact/" aria-label="View cart" {
+                style {
+                    position relative
+                    display inline-flex
+                    alignItems center
+                    gap "0.55rem"
+                    flexShrink "0"
+                    padding "0.55rem 1.1rem 0.55rem 0.95rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-ink)"
+                    color "var(--color-text-white)"
+                    textDecoration none
+                    fontWeight "700"
+                    fontSize "0.9rem"
+                    transition "transform 0.15s, background-color 0.15s"
+                    :hover transform="translateY(-1px)" backgroundColor="#000000"
+                }
+                span 🛒 {
+                    style fontSize="1.1rem"
+                }
+                span Cart {
+                    style {
+                        @--sm display=none
+                    }
+                }
+                span "${state.cartCount}" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        minWidth "1.25rem"
+                        height "1.25rem"
+                        padding "0 0.35rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-brand-bright)"
+                        color "var(--color-ink)"
+                        fontSize "0.72rem"
+                        fontWeight "800"
+                        fontVariantNumeric tabular-nums
+                    }
+                }
+            }
+        }
+    }
+}