@jxsuite/starters 3.3.2 → 3.5.0

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

@@ -0,0 +1,163 @@
+/- kdl-version 2
+
+np-cta {
+    state {
+        eyebrow ""
+        heading ""
+        headingAccent ""
+        text ""
+        cta "Donate Now"
+        ctaHref "/get-involved/"
+        cta2 ""
+        cta2Href "/get-involved/"
+        reassurance "Secure & tax-deductible · 94¢ of every dollar goes straight to programs"
+        bg type=string format=image default=""
+    }
+    style {
+        display block
+        padding "clamp(3rem, 7vw, 5rem) 1.5rem"
+        backgroundColor "var(--color-bg-cream)"
+    }
+    div {
+        style {
+            position relative
+            overflow hidden
+            maxWidth "var(--max-width-wide)"
+            margin "0 auto"
+            borderRadius "var(--radius-lg)"
+            background "linear-gradient(135deg, #21563c 0%, var(--color-primary-deep) 55%, #12301f 100%)"
+            color "var(--color-text-white)"
+        }
+        div {
+            style {
+                position absolute
+                top "-8rem"
+                right "-6rem"
+                width "26rem"
+                height "26rem"
+                borderRadius "50%"
+                background "radial-gradient(circle at center, rgba(233,166,61,0.35) 0%, rgba(233,166,61,0) 70%)"
+            }
+        }
+        div {
+            style {
+                position absolute
+                bottom "-10rem"
+                left "-7rem"
+                width "24rem"
+                height "24rem"
+                borderRadius "50%"
+                background "radial-gradient(circle at center, rgba(242,106,61,0.3) 0%, rgba(242,106,61,0) 70%)"
+            }
+        }
+        div {
+            style {
+                position relative
+                zIndex "2"
+                maxWidth "var(--max-width-narrow)"
+                margin "0 auto"
+                padding "clamp(3rem, 7vw, 4.75rem) 1.5rem"
+                textAlign center
+            }
+            p "${state.eyebrow}" {
+                style {
+                    display "${state.eyebrow ? 'inline-flex' : 'none'}"
+                    alignItems center
+                    gap "0.5rem"
+                    padding "0.35rem 0.95rem"
+                    borderRadius "999px"
+                    backgroundColor "rgba(255,255,255,0.12)"
+                    textTransform uppercase
+                    letterSpacing "0.14em"
+                    fontSize "0.75rem"
+                    fontWeight "800"
+                    color "var(--color-gold)"
+                    margin "0 0 1.25rem"
+                }
+            }
+            h2 {
+                style {
+                    fontFamily "var(--font-display)"
+                    fontSize "clamp(2.1rem, 4.6vw, 3.2rem)"
+                    fontWeight "600"
+                    lineHeight "1.08"
+                    letterSpacing "-0.015em"
+                    margin "0 0 1.15rem"
+                }
+                span "${state.heading} "
+                span "${state.headingAccent}" {
+                    style fontStyle=italic fontWeight="500" color="var(--color-gold)"
+                }
+            }
+            p "${state.text}" {
+                style {
+                    fontSize "1.14rem"
+                    fontWeight "600"
+                    lineHeight "1.65"
+                    color "rgba(255,255,255,0.85)"
+                    margin "0 auto 2rem"
+                    maxWidth "52ch"
+                }
+            }
+            div {
+                style display=flex gap="0.85rem" flexWrap=wrap justifyContent=center
+                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.5rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "800"
+                        textDecoration none
+                        boxShadow "0 18px 36px -14px rgba(242,106,61,0.85)"
+                        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"
+                        border "1px solid rgba(255,255,255,0.55)"
+                        color "var(--color-text-white)"
+                        padding "1rem 2rem"
+                        borderRadius "999px"
+                        fontSize "1.05rem"
+                        fontWeight "800"
+                        textDecoration none
+                        transition "background-color 0.15s"
+                        :hover backgroundColor="rgba(255,255,255,0.14)"
+                    }
+                }
+            }
+            p {
+                style {
+                    display "${state.reassurance ? 'flex' : 'none'}"
+                    alignItems center
+                    justifyContent center
+                    gap "0.5rem"
+                    margin "1.75rem 0 0"
+                    fontSize "0.88rem"
+                    fontWeight "700"
+                    color "rgba(255,255,255,0.72)"
+                }
+                span 🔒 {
+                    style color="var(--color-gold)"
+                }
+                span "${state.reassurance}"
+            }
+        }
+    }
+}

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"
+        }
+    }
+}