@jxsuite/starters 3.4.0 → 3.6.0

package/sites/nonprofit/components/np-donate-tier.jxn

@@ -0,0 +1,103 @@
+/- kdl-version 2
+
+np-donate-tier {
+    state {
+        amount ""
+        title ""
+        text ""
+        icon ""
+        featured #false
+        cta "Give this amount"
+        ctaHref "/get-involved/"
+    }
+    style {
+        display flex
+        flexDirection column
+        position relative
+        padding "2rem 1.9rem 2.1rem"
+        backgroundColor "${state.featured ? 'var(--color-primary-deep)' : 'var(--color-bg-white)'}"
+        color "${state.featured ? 'var(--color-text-white)' : 'var(--color-text-primary)'}"
+        borderRadius "var(--radius-lg)"
+        border "${state.featured ? '2px solid var(--color-gold)' : '1px solid var(--color-border)'}"
+        boxShadow "${state.featured ? 'var(--shadow-float)' : 'var(--shadow-card)'}"
+        transform "${state.featured ? 'translateY(-0.5rem)' : 'none'}"
+    }
+    div "★ Most loved" {
+        style {
+            display "${state.featured ? 'inline-flex' : 'none'}"
+            alignItems center
+            gap "0.35rem"
+            alignSelf flex-start
+            backgroundColor "var(--color-gold)"
+            color "var(--color-primary-deep)"
+            fontSize "0.72rem"
+            fontWeight "800"
+            textTransform uppercase
+            letterSpacing "0.08em"
+            padding "0.3rem 0.8rem"
+            borderRadius "999px"
+            marginBottom "1rem"
+        }
+    }
+    div "${state.icon}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3rem"
+            height "3rem"
+            borderRadius "999px"
+            backgroundColor "${state.featured ? 'rgba(255,255,255,0.12)' : 'var(--color-primary-soft)'}"
+            fontSize "1.5rem"
+            marginBottom "1.1rem"
+        }
+    }
+    div "${state.amount}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "2.6rem"
+            fontWeight "700"
+            lineHeight "1"
+            color "${state.featured ? 'var(--color-gold)' : 'var(--color-primary)'}"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.3rem"
+            fontWeight "600"
+            margin "0.85rem 0 0.4rem"
+        }
+    }
+    p "${state.text}" {
+        style {
+            margin "0 0 1.6rem"
+            fontSize "0.98rem"
+            fontWeight "600"
+            lineHeight "1.6"
+            flex "1"
+            color "${state.featured ? 'rgba(255,255,255,0.82)' : 'var(--color-text-muted)'}"
+        }
+    }
+    a href="${state.ctaHref}" {
+        style {
+            display flex
+            alignItems center
+            justifyContent center
+            gap "0.4rem"
+            backgroundColor "${state.featured ? 'var(--color-gold)' : 'var(--color-accent)'}"
+            color "${state.featured ? 'var(--color-primary-deep)' : 'var(--color-text-white)'}"
+            padding "0.85rem 1.25rem"
+            borderRadius "999px"
+            textDecoration none
+            fontWeight "800"
+            fontSize "1rem"
+            transition "transform 0.15s, opacity 0.15s"
+            :hover transform="translateY(-1px)" opacity="0.94"
+        }
+        span ❤ {
+            style fontSize="0.9rem"
+        }
+        span "${state.cta}"
+    }
+}

package/sites/nonprofit/components/np-feature.jxn

@@ -0,0 +1,46 @@
+/- kdl-version 2
+
+np-feature {
+    state icon="" title="" text=""
+    style {
+        display flex
+        flexDirection column
+        padding "1.9rem 1.75rem 2rem"
+        backgroundColor "var(--color-bg-cream)"
+        borderRadius "var(--radius)"
+        border "1px solid var(--color-border)"
+    }
+    div "${state.icon}" {
+        style {
+            display inline-flex
+            alignItems center
+            justifyContent center
+            width "3.1rem"
+            height "3.1rem"
+            borderRadius "999px"
+            backgroundColor "var(--color-bg-white)"
+            border "1px solid var(--color-border)"
+            fontSize "1.5rem"
+            lineHeight "1"
+            marginBottom "1.1rem"
+        }
+    }
+    h3 "${state.title}" {
+        style {
+            fontFamily "var(--font-display)"
+            fontSize "1.35rem"
+            fontWeight "600"
+            color "var(--color-primary-deep)"
+            margin "0 0 0.5rem"
+        }
+    }
+    p "${state.text}" {
+        style {
+            margin "0"
+            color "var(--color-text-muted)"
+            fontSize "1rem"
+            fontWeight "600"
+            lineHeight "1.65"
+        }
+    }
+}

package/sites/nonprofit/components/np-footer.jxn

@@ -0,0 +1,194 @@
+/- kdl-version 2
+
+np-footer {
+    state {
+        brand "Rivertown Foundation"
+        tagline "Turning everyday generosity into food, mentorship, housing, and jobs for our neighbors — right here at home."
+        address "240 Riverside Avenue, Rivertown"
+        phone "(555) 204-7788"
+        email hello@rivertownfoundation.org
+    }
+    style {
+        display block
+        position relative
+        overflow hidden
+        backgroundColor "var(--color-primary-deep)"
+        color "var(--color-text-white)"
+        padding "clamp(3.5rem, 7vw, 5rem) 1.5rem 2.25rem"
+    }
+    div {
+        style {
+            position absolute
+            top "-10rem"
+            right "-8rem"
+            width "28rem"
+            height "28rem"
+            borderRadius "50%"
+            background "radial-gradient(circle at center, rgba(47,125,85,0.5) 0%, rgba(47,125,85,0) 70%)"
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            display grid
+            gridTemplateColumns "1.6fr 1fr 1fr"
+            gap "2.5rem"
+            @--md gridTemplateColumns="1fr"
+        }
+        div {
+            div {
+                style display=flex alignItems=center gap="0.7rem" marginBottom="1rem"
+                span ❤ {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.4rem"
+                        height "2.4rem"
+                        borderRadius "999px 999px 999px 4px"
+                        backgroundColor "var(--color-primary)"
+                        color "var(--color-text-white)"
+                        fontSize "1.15rem"
+                    }
+                }
+                div "${state.brand}" {
+                    style fontFamily="var(--font-display)" fontSize="1.4rem" fontWeight="600"
+                }
+            }
+            p "${state.tagline}" {
+                style {
+                    margin "0 0 1.5rem"
+                    opacity "0.78"
+                    fontWeight "500"
+                    lineHeight "1.65"
+                    maxWidth "40ch"
+                }
+            }
+            a href="/get-involved/" {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.45rem"
+                    backgroundColor "var(--color-accent)"
+                    color "var(--color-text-white)"
+                    padding "0.7rem 1.75rem"
+                    borderRadius "999px"
+                    textDecoration none
+                    fontWeight "800"
+                    fontSize "0.98rem"
+                    boxShadow "0 12px 26px -12px rgba(242,106,61,0.8)"
+                }
+                span ❤ {
+                    style fontSize="0.9rem"
+                }
+                span "Donate today"
+            }
+        }
+        div {
+            div Explore {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    fontSize "0.74rem"
+                    fontWeight "800"
+                    color "var(--color-gold)"
+                    marginBottom "1rem"
+                }
+            }
+            a href="/programs/" Programs {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    fontWeight "600"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            a href="/about/" About {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    fontWeight "600"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            a href="/get-involved/" "Get Involved" {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    fontWeight "600"
+                    textDecoration none
+                    marginBottom "0.55rem"
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+            a href="/contact/" Contact {
+                style {
+                    display block
+                    color "var(--color-text-white)"
+                    opacity "0.82"
+                    fontWeight "600"
+                    textDecoration none
+                    transition "opacity 0.15s"
+                    :hover opacity="1"
+                }
+            }
+        }
+        div {
+            div Visit {
+                style {
+                    textTransform uppercase
+                    letterSpacing "0.12em"
+                    fontSize "0.74rem"
+                    fontWeight "800"
+                    color "var(--color-gold)"
+                    marginBottom "1rem"
+                }
+            }
+            p "${state.address}" {
+                style margin="0 0 0.45rem" opacity="0.82" fontWeight="600"
+            }
+            p "${state.phone}" {
+                style margin="0 0 0.45rem" opacity="0.82" fontWeight="600"
+            }
+            p "${state.email}" {
+                style margin="0" opacity="0.82" fontWeight="600"
+            }
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "2.75rem auto 0"
+            paddingTop "1.5rem"
+            borderTop "1px solid rgba(255, 255, 255, 0.15)"
+            fontSize "0.85rem"
+            fontWeight "600"
+            opacity "0.62"
+            display flex
+            justifyContent space-between
+            flexWrap wrap
+            gap "0.5rem"
+        }
+        p "© Rivertown Foundation. A registered 501(c)(3) nonprofit." {
+            style margin="0"
+        }
+        p "Built with Jx." {
+            style margin="0"
+        }
+    }
+}

package/sites/nonprofit/components/np-hero.jxn

@@ -0,0 +1,275 @@
+/- kdl-version 2
+
+np-hero {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        headingTail ""
+        subheading ""
+        cta "Donate Now"
+        ctaHref "/get-involved/"
+        cta2 ""
+        cta2Href "/programs/"
+        badgeNumber "640"
+        badgeLabel "neighbors volunteering this month"
+        bg type=string format=image default=""
+    }
+    style display=block position=relative overflow=hidden backgroundColor="var(--color-bg-cream)"
+    div {
+        style {
+            position absolute
+            top "-14rem"
+            right "-10rem"
+            width "34rem"
+            height "34rem"
+            borderRadius "48% 52% 58% 42% / 52% 44% 56% 48%"
+            backgroundColor "var(--color-primary-soft)"
+            opacity "0.7"
+        }
+    }
+    div {
+        style {
+            position absolute
+            bottom "-12rem"
+            left "-9rem"
+            width "26rem"
+            height "26rem"
+            borderRadius "42% 58% 46% 54% / 55% 48% 52% 45%"
+            backgroundColor "var(--color-gold-soft)"
+            opacity "0.55"
+        }
+    }
+    div {
+        style {
+            position relative
+            zIndex "2"
+            maxWidth "var(--max-width)"
+            margin "0 auto"
+            padding "clamp(2.75rem, 6vw, 5rem) 1.5rem clamp(3rem, 7vw, 5.5rem)"
+            display grid
+            gridTemplateColumns "1.05fr 0.95fr"
+            gap "clamp(2rem, 5vw, 4.5rem)"
+            alignItems center
+            @--md gridTemplateColumns="1fr" gap="2.75rem"
+        }
+        div {
+            p {
+                style {
+                    display inline-flex
+                    alignItems center
+                    gap "0.55rem"
+                    padding "0.42rem 1rem 0.42rem 0.6rem"
+                    borderRadius "999px"
+                    backgroundColor "var(--color-bg-white)"
+                    border "1px solid var(--color-border)"
+                    boxShadow "0 6px 16px -12px rgba(23,58,43,0.5)"
+                    fontFamily "var(--font-body)"
+                    fontSize "0.82rem"
+                    fontWeight "700"
+                    color "var(--color-text-secondary)"
+                    margin "0 0 1.6rem"
+                }
+                span 🌱 {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "1.4rem"
+                        height "1.4rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-primary-soft)"
+                        color "var(--color-primary)"
+                        fontSize "0.8rem"
+                    }
+                }
+                span "${state.eyebrow}"
+            }
+            h1 {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2.6rem, 6vw, 4.6rem)"
+                    fontWeight "600"
+                    lineHeight "1.02"
+                    letterSpacing "-0.02em"
+                    margin "0 0 1.4rem"
+                    color "var(--color-primary-deep)"
+                }
+                span "${state.heading} "
+                span "${state.headingAccent}" {
+                    style fontStyle=italic fontWeight="500" color="var(--color-accent)"
+                }
+                span "${state.headingTail}"
+            }
+            p "${state.subheading}" {
+                style {
+                    fontSize "clamp(1.08rem, 1.6vw, 1.28rem)"
+                    lineHeight "1.65"
+                    color "var(--color-text-secondary)"
+                    margin "0 0 2rem"
+                    maxWidth "46ch"
+                }
+            }
+            div {
+                style display=flex alignItems=center gap="0.9rem" flexWrap=wrap
+                a href="${state.ctaHref}" {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        gap "0.5rem"
+                        backgroundColor "var(--color-accent)"
+                        color "var(--color-text-white)"
+                        padding "1rem 2.25rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "800"
+                        textDecoration none
+                        boxShadow "0 16px 34px -14px rgba(242,106,61,0.8)"
+                        transition "background-color 0.15s, transform 0.15s"
+                        :hover {
+                            backgroundColor "var(--color-accent-hover)"
+                            transform "translateY(-2px)"
+                        }
+                    }
+                    span ❤ {
+                        style fontSize="0.95rem"
+                    }
+                    span "${state.cta}"
+                }
+                a href="${state.cta2Href}" "${state.cta2} →" {
+                    style {
+                        display "${state.cta2 ? 'inline-flex' : 'none'}"
+                        alignItems center
+                        gap "0.5rem"
+                        backgroundColor "var(--color-bg-white)"
+                        border "1px solid var(--color-border-strong)"
+                        color "var(--color-primary-deep)"
+                        padding "1rem 1.75rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "800"
+                        textDecoration none
+                        transition "border-color 0.15s, transform 0.15s"
+                        :hover borderColor="var(--color-primary)" transform="translateY(-2px)"
+                    }
+                }
+            }
+            div {
+                style {
+                    display flex
+                    alignItems center
+                    gap "1.25rem"
+                    flexWrap wrap
+                    marginTop "2rem"
+                    fontFamily "var(--font-body)"
+                    fontSize "0.9rem"
+                    fontWeight "700"
+                    color "var(--color-text-secondary)"
+                }
+                span {
+                    style display=inline-flex alignItems=center gap="0.45rem"
+                    span ✔ {
+                        style color="var(--color-primary)" fontSize="1rem"
+                    }
+                    span "94¢ of every $1 to programs"
+                }
+                span {
+                    style {
+                        width "0.35rem"
+                        height "0.35rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-border-strong)"
+                        @--sm display=none
+                    }
+                }
+                span {
+                    style display=inline-flex alignItems=center gap="0.45rem"
+                    span ✔ {
+                        style color="var(--color-primary)" fontSize="1rem"
+                    }
+                    span "501(c)(3) since 2007"
+                }
+            }
+        }
+        div {
+            style position=relative {
+                @--md maxWidth="460px" margin="0 auto" width="100%"
+            }
+            div {
+                style {
+                    position absolute
+                    inset "1.25rem -1rem -1.25rem 1.25rem"
+                    borderRadius "58% 42% 46% 54% / 55% 52% 48% 45%"
+                    backgroundColor "var(--color-primary)"
+                    opacity "0.14"
+                }
+            }
+            div {
+                style {
+                    position relative
+                    aspectRatio "1 / 1"
+                    borderRadius "56% 44% 47% 53% / 55% 50% 50% 45%"
+                    overflow hidden
+                    boxShadow "var(--shadow-float)"
+                    border "6px solid var(--color-bg-white)"
+                }
+                img src="${state.bg}" alt="Rivertown Foundation volunteers helping neighbors" {
+                    style {
+                        position absolute
+                        inset "0"
+                        width "100%"
+                        height "100%"
+                        objectFit cover
+                        display block
+                    }
+                }
+            }
+            div {
+                style {
+                    position absolute
+                    left "-0.5rem"
+                    bottom "1.5rem"
+                    display flex
+                    alignItems center
+                    gap "0.85rem"
+                    padding "0.85rem 1.25rem 0.85rem 0.9rem"
+                    backgroundColor "var(--color-bg-white)"
+                    borderRadius "1.25rem"
+                    boxShadow "var(--shadow-card)"
+                    @--sm left="0.5rem" bottom="0.75rem"
+                }
+                span 🤝 {
+                    style {
+                        display inline-flex
+                        alignItems center
+                        justifyContent center
+                        width "2.9rem"
+                        height "2.9rem"
+                        borderRadius "999px"
+                        backgroundColor "var(--color-gold-soft)"
+                        fontSize "1.35rem"
+                    }
+                }
+                span {
+                    style display=flex flexDirection=column lineHeight="1.1"
+                    span "${state.badgeNumber}" {
+                        style {
+                            fontFamily "var(--font-display)"
+                            fontSize "1.5rem"
+                            fontWeight "700"
+                            color "var(--color-primary-deep)"
+                        }
+                    }
+                    span "${state.badgeLabel}" {
+                        style {
+                            fontSize "0.78rem"
+                            fontWeight "700"
+                            color "var(--color-text-muted)"
+                            maxWidth "12ch"
+                        }
+                    }
+                }
+            }
+        }
+    }
+}