@jxsuite/starters 3.3.2 → 3.5.0

package/sites/shop/components/shp-category-tile.jxn

@@ -0,0 +1,79 @@
+/- kdl-version 2
+
+shp-category-tile {
+    state icon="" name="" count="" href="/products/"
+    style display=block minWidth="0"
+    a href="${state.href}" {
+        style {
+            position relative
+            display flex
+            flexDirection column
+            gap "0.75rem"
+            height "100%"
+            padding "1.35rem 1.25rem"
+            borderRadius "var(--radius)"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            textDecoration none
+            color "var(--color-text-primary)"
+            overflow hidden
+            transition "border-color 0.18s, transform 0.18s, box-shadow 0.18s"
+            :hover {
+                borderColor "var(--color-primary)"
+                transform "translateY(-4px)"
+                boxShadow "var(--shadow-card)"
+            }
+            ":hover .cat-go" backgroundColor="var(--color-primary)" color="var(--color-text-white)"
+        }
+        span "${state.icon}" {
+            style {
+                display inline-flex
+                alignItems center
+                justifyContent center
+                width "3rem"
+                height "3rem"
+                borderRadius "0.75rem"
+                backgroundColor "var(--color-brand-tint)"
+                fontSize "1.55rem"
+                lineHeight "1"
+            }
+        }
+        div {
+            style marginTop=auto
+            div "${state.name}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "1.15rem"
+                    fontWeight "800"
+                    letterSpacing "-0.01em"
+                }
+            }
+            div "${state.count}" {
+                style {
+                    marginTop "0.15rem"
+                    fontSize "0.85rem"
+                    fontWeight "600"
+                    color "var(--color-text-muted)"
+                }
+            }
+        }
+        span class=cat-go → {
+            style {
+                position absolute
+                top "1.35rem"
+                right "1.25rem"
+                display inline-flex
+                alignItems center
+                justifyContent center
+                width "1.9rem"
+                height "1.9rem"
+                borderRadius "999px"
+                backgroundColor "var(--color-bg-cream)"
+                color "var(--color-text-primary)"
+                fontSize "0.9rem"
+                fontWeight "800"
+                transition "background-color 0.18s, color 0.18s"
+            }
+        }
+    }
+}

package/sites/shop/components/shp-contact-form.jxn

@@ -0,0 +1,84 @@
+/- kdl-version 2
+
+shp-contact-form {
+    state heading="Send us a message"
+    style display=block
+    h3 "${state.heading}" {
+        style fontFamily="var(--font-heading)" fontSize="1.6rem" margin="0 0 1.25rem"
+    }
+    form action="#" method=post {
+        style display=grid gap="1rem" alignContent=start
+        input type=text name=name placeholder="Your name" required="true" aria-label="Your name" {
+            style {
+                width "100%"
+                padding "0.75rem 0.9rem"
+                border "1px solid var(--color-border)"
+                borderRadius "var(--radius)"
+                fontSize "1rem"
+            }
+        }
+        input type=email name=email placeholder="Email address" required="true" aria-label="Email address" {
+            style {
+                width "100%"
+                padding "0.75rem 0.9rem"
+                border "1px solid var(--color-border)"
+                borderRadius "var(--radius)"
+                fontSize "1rem"
+            }
+        }
+        div {
+            style display=grid gridTemplateColumns="1fr 1fr" gap="1rem"
+            select name=topic aria-label="What can we help with?" {
+                style {
+                    width "100%"
+                    padding "0.75rem 0.9rem"
+                    border "1px solid var(--color-border)"
+                    borderRadius "var(--radius)"
+                    fontSize "1rem"
+                    backgroundColor "var(--color-bg-white)"
+                }
+                option value=sales "Buying a bike"
+                option value=service "Book a service"
+                option value=fit "Bike fitting"
+                option value=other "Something else"
+            }
+            input type=date name=date aria-label="Preferred service date" {
+                style {
+                    width "100%"
+                    padding "0.75rem 0.9rem"
+                    border "1px solid var(--color-border)"
+                    borderRadius "var(--radius)"
+                    fontSize "1rem"
+                }
+            }
+        }
+        textarea name=notes rows="3" placeholder="Tell us about your bike or what you're after…" aria-label=Notes {
+            style {
+                width "100%"
+                padding "0.75rem 0.9rem"
+                border "1px solid var(--color-border)"
+                borderRadius "var(--radius)"
+                fontSize "1rem"
+                fontFamily inherit
+            }
+        }
+        button type=submit "Send Message" {
+            style {
+                backgroundColor "var(--color-primary)"
+                color "var(--color-text-white)"
+                padding "0.85rem 1.5rem"
+                border none
+                borderRadius "999px"
+                fontSize "1rem"
+                fontWeight "600"
+                cursor pointer
+                justifySelf start
+                transition "background-color 0.15s"
+                :hover backgroundColor="var(--color-primary-hover)"
+            }
+        }
+        p "This is a demo form. Wire it to your booking provider or email in pages/contact.md." {
+            style fontSize="0.85rem" color="var(--color-text-muted)" margin="0"
+        }
+    }
+}

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

@@ -0,0 +1,85 @@
+/- kdl-version 2
+
+shp-cta {
+    state heading="" text="" cta="Visit the Shop" ctaHref="/contact/" cta2="" cta2Href="/products/"
+    style display=block padding="clamp(2.5rem, 6vw, 4rem) 1.5rem"
+    div {
+        style {
+            position relative
+            overflow hidden
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            borderRadius "var(--radius-lg)"
+            backgroundColor "var(--color-bg-dark)"
+            backgroundImage "radial-gradient(circle at 85% 10%, rgba(38,208,124,0.28), transparent 45%), radial-gradient(circle at 10% 95%, rgba(38,208,124,0.12), transparent 40%)"
+            color "var(--color-text-white)"
+            padding "clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem)"
+            textAlign center
+        }
+        div {
+            style maxWidth="var(--max-width-narrow)" margin="0 auto"
+            h2 "${state.heading}" {
+                style {
+                    fontFamily "var(--font-heading)"
+                    fontSize "clamp(1.9rem, 4.5vw, 3rem)"
+                    fontWeight "800"
+                    lineHeight "1.04"
+                    letterSpacing "-0.03em"
+                    margin "0 0 1rem"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    fontSize "1.1rem"
+                    lineHeight "1.65"
+                    color "rgba(255,255,255,0.78)"
+                    margin "0 auto 2rem"
+                    maxWidth "48ch"
+                }
+            }
+            div {
+                style display=flex gap="0.75rem" justifyContent=center 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 2.1rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "700"
+                        textDecoration none
+                        boxShadow "0 14px 30px -12px rgba(10,157,84,0.8)"
+                        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 rgba(255,255,255,0.28)"
+                        color "var(--color-text-white)"
+                        padding "0.95rem 1.85rem"
+                        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.1)"
+                            borderColor "rgba(255,255,255,0.5)"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+/- kdl-version 2
+
+shp-feature {
+    state icon="" title="" text=""
+    style {
+        display block
+        padding "1.75rem"
+        backgroundColor "var(--color-bg-white)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+        transition "border-color 0.15s, transform 0.15s, box-shadow 0.15s"
+        :hover {
+            borderColor "var(--color-primary)"
+            transform "translateY(-4px)"
+            boxShadow "var(--shadow-card)"
+        }
+    }
+    div "${state.icon}" {
+        style {
+            width "3rem"
+            height "3rem"
+            display flex
+            alignItems center
+            justifyContent center
+            borderRadius "0.7rem"
+            backgroundColor "var(--color-brand-tint)"
+            fontSize "1.5rem"
+            marginBottom "1.1rem"
+            lineHeight "1"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-heading)"
+            fontSize "1.28rem"
+            fontWeight "800"
+            letterSpacing "-0.01em"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style margin="0" color="var(--color-text-muted)" fontSize="0.98rem" lineHeight="1.65"
+    }
+}

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

@@ -0,0 +1,311 @@
+/- kdl-version 2
+
+shp-footer {
+    state {
+        brand "Cadence Cycles"
+        tagline "Bikes, gear, and expert service for every rider on your street. On the corner of Spoke & 4th since 2009."
+        address "412 Spoke Avenue, Riverbend"
+        phone "(555) 042-7100"
+    }
+    style {
+        display block
+        backgroundColor "var(--color-bg-dark)"
+        color "var(--color-text-white)"
+        padding "clamp(3rem, 6vw, 4.5rem) 1.5rem 2rem"
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1.6fr 1fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr 1fr"
+            @--sm gridTemplateColumns="1fr"
+        }
+        div {
+            a href="/" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.6rem"
+                    textDecoration none
+                    marginBottom "1rem"
+                }
+                span ◎ {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2rem"
+                        height "2rem"
+                        borderRadius "0.55rem"
+                        background "linear-gradient(150deg, var(--color-brand-bright), var(--color-primary))"
+                        color "var(--color-text-white)"
+                        fontSize "1.1rem"
+                        fontWeight "800"
+                    }
+                }
+                span "${state.brand}" {
+                    style {
+                        fontFamily "var(--font-heading)"
+                        fontSize "1.3rem"
+                        fontWeight "800"
+                        letterSpacing "-0.02em"
+                        color "var(--color-text-white)"
+                    }
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0 0 1.25rem"
+                    color "rgba(255,255,255,0.62)"
+                    maxWidth "34ch"
+                    lineHeight "1.6"
+                }
+            }
+            div {
+                style display=flex gap="0.5rem"
+                span 📷 {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.1rem"
+                        height "2.1rem"
+                        borderRadius "999px"
+                        backgroundColor "rgba(255,255,255,0.08)"
+                        fontSize "0.95rem"
+                    }
+                }
+                span 🐦 {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.1rem"
+                        height "2.1rem"
+                        borderRadius "999px"
+                        backgroundColor "rgba(255,255,255,0.08)"
+                        fontSize "0.95rem"
+                    }
+                }
+                span ▶ {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.1rem"
+                        height "2.1rem"
+                        borderRadius "999px"
+                        backgroundColor "rgba(255,255,255,0.08)"
+                        fontSize "0.95rem"
+                    }
+                }
+            }
+        }
+        div {
+            div Shop {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "rgba(255,255,255,0.5)"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/products/" "Road bikes" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/products/" "Mountain bikes" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/products/" "Gravel & adventure" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/products/" "Kids' bikes" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/products/" "Gear & accessories" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+        }
+        div {
+            div Help {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "rgba(255,255,255,0.5)"
+                    marginBottom "0.9rem"
+                }
+            }
+            a href="/about/" "Our story" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/contact/" "Book a service" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/contact/" "Shipping & returns" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+            a href="/contact/" "Contact us" {
+                style {
+                    display block
+                    color "rgba(255,255,255,0.82)"
+                    textDecoration none
+                    transition "color 0.15s"
+                    :hover color="var(--color-brand-bright)"
+                }
+            }
+        }
+        div {
+            div Visit {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.1em"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    color "rgba(255,255,255,0.5)"
+                    marginBottom "0.9rem"
+                }
+            }
+            p "${state.address}" {
+                style margin="0 0 0.4rem" color="rgba(255,255,255,0.82)" lineHeight="1.5"
+            }
+            a href=tel:+15550427100 "${state.phone}" {
+                style {
+                    display block
+                    color "var(--color-brand-bright)"
+                    textDecoration none
+                    fontWeight "700"
+                    marginBottom "0.75rem"
+                    fontVariantNumeric tabular-nums
+                }
+            }
+            p "Mon–Fri 9–6:30 · Sat 9–5 · Sun 10–4" {
+                style margin="0" color="rgba(255,255,255,0.6)" fontSize="0.9rem" lineHeight="1.5"
+            }
+        }
+    }
+    div {
+        style {
+            maxWidth "var(--max-width)"
+            margin "2.5rem auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid rgba(255,255,255,0.12)"
+            display flex
+            alignItems center
+            justifyContent space-between
+            gap "1rem"
+            flexWrap wrap
+        }
+        p "© 2026 Cadence Cycles. Built with Jx." {
+            style margin="0" fontSize="0.85rem" color="rgba(255,255,255,0.5)"
+        }
+        div {
+            style display=flex gap="0.5rem" flexWrap=wrap
+            span VISA {
+                style {
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.4rem"
+                    backgroundColor "rgba(255,255,255,0.08)"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    letterSpacing "0.03em"
+                    color "rgba(255,255,255,0.7)"
+                }
+            }
+            span MASTERCARD {
+                style {
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.4rem"
+                    backgroundColor "rgba(255,255,255,0.08)"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    letterSpacing "0.03em"
+                    color "rgba(255,255,255,0.7)"
+                }
+            }
+            span AMEX {
+                style {
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.4rem"
+                    backgroundColor "rgba(255,255,255,0.08)"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    letterSpacing "0.03em"
+                    color "rgba(255,255,255,0.7)"
+                }
+            }
+            span "APPLE PAY" {
+                style {
+                    padding "0.3rem 0.7rem"
+                    borderRadius "0.4rem"
+                    backgroundColor "rgba(255,255,255,0.08)"
+                    fontSize "0.72rem"
+                    fontWeight "700"
+                    letterSpacing "0.03em"
+                    color "rgba(255,255,255,0.7)"
+                }
+            }
+        }
+    }
+}