@jxsuite/starters 0.34.0 → 0.35.1

package/sites/nonprofit/components/np-testimonial.json

@@ -3,50 +3,165 @@
   "state": {
     "quote": "",
     "author": "",
-    "role": ""
+    "role": "",
+    "image": { "type": "string", "format": "image", "default": "" },
+    "imageAlt": "",
+    "stat": "",
+    "statLabel": ""
   },
   "style": {
     "display": "block",
-    "padding": "2rem",
-    "backgroundColor": "var(--color-bg-cream)",
-    "border": "1px solid var(--color-border)",
-    "borderRadius": "var(--radius)"
+    "position": "relative",
+    "overflow": "hidden",
+    "backgroundColor": "var(--color-bg-mint)",
+    "borderRadius": "var(--radius-lg)",
+    "border": "1px solid var(--color-border)"
   },
   "children": [
     {
       "tagName": "div",
       "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "2.5rem",
-        "lineHeight": "1",
-        "color": "var(--color-primary)",
-        "marginBottom": "0.5rem"
+        "display": "grid",
+        "gridTemplateColumns": "0.82fr 1.18fr",
+        "gap": "clamp(1.75rem, 4vw, 3.5rem)",
+        "alignItems": "center",
+        "@--md": { "gridTemplateColumns": "1fr" }
       },
-      "textContent": "“"
-    },
-    {
-      "tagName": "p",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "1.2rem",
-        "lineHeight": "1.6",
-        "fontWeight": "500",
-        "margin": "0 0 1.25rem"
-      },
-      "textContent": "${state.quote}"
-    },
-    {
-      "tagName": "div",
       "children": [
         {
           "tagName": "div",
-          "style": { "fontWeight": "600" },
-          "textContent": "${state.author}"
+          "style": {
+            "position": "relative",
+            "alignSelf": "stretch",
+            "minHeight": "clamp(320px, 42vw, 460px)",
+            "@--md": { "minHeight": "300px" }
+          },
+          "children": [
+            {
+              "tagName": "img",
+              "attributes": {
+                "src": "${state.image}",
+                "alt": "${state.imageAlt}",
+                "loading": "lazy"
+              },
+              "style": {
+                "position": "absolute",
+                "inset": "0",
+                "width": "100%",
+                "height": "100%",
+                "objectFit": "cover",
+                "display": "block"
+              }
+            },
+            {
+              "tagName": "div",
+              "style": {
+                "position": "absolute",
+                "display": "${state.stat ? 'flex' : 'none'}",
+                "flexDirection": "column",
+                "right": "1.1rem",
+                "bottom": "1.1rem",
+                "padding": "0.85rem 1.15rem",
+                "backgroundColor": "var(--color-bg-white)",
+                "borderRadius": "1rem",
+                "boxShadow": "var(--shadow-card)",
+                "lineHeight": "1.1"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-display)",
+                    "fontSize": "1.65rem",
+                    "fontWeight": "700",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "${state.stat}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontSize": "0.76rem",
+                    "fontWeight": "700",
+                    "color": "var(--color-text-muted)",
+                    "maxWidth": "14ch"
+                  },
+                  "textContent": "${state.statLabel}"
+                }
+              ]
+            }
+          ]
         },
         {
           "tagName": "div",
-          "style": { "fontSize": "0.9rem", "color": "var(--color-text-muted)" },
-          "textContent": "${state.role}"
+          "style": {
+            "padding": "clamp(2rem, 4vw, 3.25rem) clamp(1.75rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3.25rem) 0",
+            "@--md": { "padding": "0 clamp(1.5rem, 5vw, 2.5rem) clamp(2rem, 6vw, 2.75rem)" }
+          },
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "3.5rem",
+                "lineHeight": "0.6",
+                "color": "var(--color-accent)",
+                "margin": "0 0 1rem"
+              },
+              "textContent": "“"
+            },
+            {
+              "tagName": "p",
+              "style": {
+                "fontFamily": "var(--font-display)",
+                "fontSize": "clamp(1.4rem, 2.6vw, 1.95rem)",
+                "lineHeight": "1.4",
+                "fontWeight": "500",
+                "letterSpacing": "-0.01em",
+                "color": "var(--color-primary-deep)",
+                "margin": "0 0 1.75rem"
+              },
+              "textContent": "${state.quote}"
+            },
+            {
+              "tagName": "div",
+              "style": { "display": "flex", "alignItems": "center", "gap": "0.9rem" },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "2.6rem",
+                    "height": "0.28rem",
+                    "borderRadius": "999px",
+                    "backgroundColor": "var(--color-accent)"
+                  }
+                },
+                {
+                  "tagName": "div",
+                  "children": [
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontWeight": "800",
+                        "fontSize": "1.05rem",
+                        "color": "var(--color-text-primary)"
+                      },
+                      "textContent": "${state.author}"
+                    },
+                    {
+                      "tagName": "div",
+                      "style": {
+                        "fontSize": "0.92rem",
+                        "fontWeight": "700",
+                        "color": "var(--color-primary)"
+                      },
+                      "textContent": "${state.role}"
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
         }
       ]
     }

package/sites/nonprofit/pages/about.md

@@ -2,23 +2,24 @@
 title: "About — Rivertown Foundation"
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="Our story" props.heading="Rooted in Rivertown since 2007" props.subheading="Started by a handful of neighbors with a food drive and a folding table — now a year-round lifeline for thousands."}
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem clamp(2rem, 4vw, 3rem)" style.backgroundColor="var(--color-bg-cream)"}
+::np-section-header{props.eyebrow="Our story" props.heading="Rooted in Rivertown" props.headingAccent="since 2007" props.subheading="Started by a handful of neighbors with a food drive and a folding table — now a year-round lifeline for thousands."}
 :::::
 
-:::np-intro{props.image="/images/about.jpg" props.imageAlt="Rivertown Foundation volunteers and staff together" props.reverse="true"}
+:::np-intro{props.eyebrow="How we began" props.image="/images/about.jpg" props.imageAlt="Rivertown Foundation volunteers and staff together" props.reverse="true" props.signNumber="2007" props.signLabel="the year it all started"}
 
 ### From a folding table to a movement
 
 In the winter of 2007, a few Rivertown families noticed neighbors going without and decided to do something about it. What began as a single food drive in a church basement has grown into five programs serving thousands of people every year.
 
-We're still powered by the same belief: that a community takes care of its own. Every program we run is shaped by the neighbors who use it and delivered by the volunteers who love this town.
+We're still powered by the same belief: that **a community takes care of its own.** Every program we run is shaped by the neighbors who use it and delivered by the volunteers who love this town.
+
 :::
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 5rem) 1.5rem"}
-::np-section-header{props.eyebrow="What guides us" props.heading="The values behind every decision"}
+:::::section{style.padding="clamp(3.5rem, 8vw, 5.5rem) 1.5rem"}
+::np-section-header{props.eyebrow="What guides us" props.heading="The values behind" props.headingAccent="every decision"}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
 ::np-feature{props.icon="🤝" props.title="Dignity first" props.text="Everyone is welcomed with respect and choice — never judgment. Help should never cost your pride."}
 
 ::np-feature{props.icon="🌱" props.title="Local & lasting" props.text="Every dollar stays in Rivertown, invested in solutions that outlast the moment of need."}
@@ -27,20 +28,20 @@ We're still powered by the same belief: that a community takes care of its own.
 ::::
 :::::
 
-:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 5rem)" style.backgroundColor="var(--color-primary)" style.color="var(--color-text-white)"}
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="2rem" style.--md.gridTemplateColumns="repeat(2, 1fr)" style.paddingTop="clamp(2.5rem, 6vw, 3.5rem)"}
-::np-stat{props.number="94¢" props.label="Of every dollar to programs"}
+:::::np-impact-band{props.eyebrow="By the numbers" props.heading="Built to be" props.headingAccent="trusted"}
+::::div{style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::np-stat{props.icon="💚" props.number="94¢" props.label="Of every dollar to programs"}
 
-::np-stat{props.number="640" props.label="Active volunteers"}
+::np-stat{props.icon="🙌" props.number="640" props.label="Active volunteers"}
 
-::np-stat{props.number="5" props.label="Community programs"}
+::np-stat{props.icon="🌿" props.number="5" props.label="Community programs"}
 
-::np-stat{props.number="1" props.label="Town we call home"}
+::np-stat{props.icon="📍" props.number="1" props.label="Town we call home"}
 ::::
 :::::
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::np-section-header{props.eyebrow="Our team" props.heading="The people behind the mission"}
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::np-section-header{props.eyebrow="Our team" props.heading="The people behind" props.headingAccent="the mission"}
 
 ::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
 ::np-team-member{props.initials="AT" props.name="Aisha Thompson" props.role="Executive Director" props.bio="A lifelong Rivertown resident who has led the Foundation for a decade, Aisha keeps neighbors at the center of every decision."}
@@ -51,4 +52,4 @@ We're still powered by the same belief: that a community takes care of its own.
 ::::
 :::::
 
-::np-cta{props.eyebrow="Join the story" props.heading="Be part of what happens next" props.text="Whether you give, volunteer, or partner with us, you become part of a community that refuses to leave anyone behind." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Get Involved" props.cta2Href="/get-involved/" props.bg="/images/cta-bg.jpg"}
+::np-cta{props.eyebrow="Join the story" props.heading="Be part of what" props.headingAccent="happens next" props.text="Whether you give, volunteer, or partner with us, you become part of a community that refuses to leave anyone behind." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Get involved" props.cta2Href="/get-involved/"}

package/sites/nonprofit/pages/contact.md

@@ -3,15 +3,15 @@ title: "Contact — Rivertown Foundation"
 ---
 
 :::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="Say hello" props.heading="Get in touch" props.subheading="Questions about a program, a donation, or volunteering? We'd love to hear from you."}
+::np-section-header{props.eyebrow="Say hello" props.heading="Get in" props.headingAccent="touch" props.subheading="Questions about a program, a donation, or volunteering? We'd love to hear from you."}
 :::::
 
-:::::section{style.maxWidth="var(--max-width)" style.margin="0 auto" style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
-::::div{style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="1.2fr 1fr" style.gap="clamp(2rem, 5vw, 3.5rem)" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
 ::np-contact-form{props.heading="Send us a message"}
 
 ::np-contact-info{}
 ::::
 :::::
 
-::np-cta{props.eyebrow="Can't wait to start?" props.heading="You don't need an appointment to help" props.text="Make a gift online today, or drop by during office hours — we'll put your generosity to work right away." props.cta="Donate Now" props.ctaHref="/get-involved/"}
+::np-cta{props.eyebrow="Can't wait to start?" props.heading="You don't need an appointment" props.headingAccent="to help" props.text="Make a gift online today, or drop by during office hours — we'll put your generosity to work right away." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="See the programs" props.cta2Href="/programs/"}

package/sites/nonprofit/pages/get-involved.md

@@ -3,27 +3,27 @@ title: "Get Involved — Rivertown Foundation"
 ---
 
 :::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="Get involved" props.heading="There's a place for you here" props.subheading="Give, volunteer, fundraise, or partner — however you show up, you're helping a neighbor down the street."}
+::np-section-header{props.eyebrow="Get involved" props.heading="There's a place for" props.headingAccent="you here" props.subheading="Give, volunteer, fundraise, or partner — however you show up, you're helping a neighbor down the street."}
 :::::
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 5rem) 1.5rem"}
-::np-section-header{props.eyebrow="Ways to help" props.heading="Four ways to make an impact"}
+:::::section{style.padding="clamp(3rem, 7vw, 5rem) 1.5rem"}
+::np-section-header{props.eyebrow="Ways to help" props.heading="Four ways to" props.headingAccent="make an impact"}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
-::np-step{props.num="1" props.title="Give" props.text="One-time or monthly, your gift funds every program. A donor is matching all gifts this month."}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.5rem" style.--lg.gridTemplateColumns="repeat(2, 1fr)" style.--md.gridTemplateColumns="1fr"}
+::np-step{props.num="❤" props.title="Give" props.text="One-time or monthly, your gift funds every program. A donor is matching all gifts this month." props.badgeBg="var(--color-accent-soft)" props.badgeColor="var(--color-accent)"}
 
-::np-step{props.num="2" props.title="Volunteer" props.text="Pack pantry boxes, mentor a student, tend the garden, or coach job seekers. Shifts fit any schedule."}
+::np-step{props.num="🙌" props.title="Volunteer" props.text="Pack pantry boxes, mentor a student, tend the garden, or coach job seekers. Shifts fit any schedule." props.badgeBg="var(--color-primary-soft)" props.badgeColor="var(--color-primary)"}
 
-::np-step{props.num="3" props.title="Fundraise" props.text="Host a food drive, run a birthday fundraiser, or rally your workplace for a day of giving."}
+::np-step{props.num="🎉" props.title="Fundraise" props.text="Host a food drive, run a birthday fundraiser, or rally your workplace for a day of giving." props.badgeBg="var(--color-gold-soft)" props.badgeColor="#b07d1e"}
 
-::np-step{props.num="4" props.title="Partner" props.text="Businesses and faith groups: sponsor a program, hire a graduate, or open a hiring pipeline."}
+::np-step{props.num="🤝" props.title="Partner" props.text="Businesses and faith groups: sponsor a program, hire a graduate, or open a hiring pipeline." props.badgeBg="var(--color-accent-soft)" props.badgeColor="var(--color-accent)"}
 ::::
 :::::
 
-:::::section{style.padding="clamp(3rem, 8vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="Volunteer" props.heading="Give your time, change a life" props.subheading="No experience needed — just a few hours and a willingness to help. Here's where hands are needed most."}
+:::::section{style.padding="clamp(3rem, 8vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-mint)"}
+::np-section-header{props.eyebrow="Volunteer" props.heading="Give your time," props.headingAccent="change a life" props.subheading="No experience needed — just a few hours and a willingness to help. Here's where hands are needed most."}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="1fr"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
 ::np-feature{props.icon="📦" props.title="Pantry crew" props.text="Sort donations, stock the choice market, and welcome families. Weekday mornings and Saturdays."}
 
 ::np-feature{props.icon="📚" props.title="Youth mentor" props.text="Meet weekly with a student for homework help and encouragement. Training and background check provided."}
@@ -31,33 +31,33 @@ title: "Get Involved — Rivertown Foundation"
 ::np-feature{props.icon="🌷" props.title="Garden volunteer" props.text="Plant, weed, and harvest alongside neighbors. Great for families, groups, and first-timers."}
 ::::
 
-::::div{style.textAlign="center" style.marginTop="2.5rem"}
-:::a{href="/contact/" style.display="inline-block" style.backgroundColor="var(--color-primary)" style.color="var(--color-text-white)" style.padding="0.85rem 2rem" style.borderRadius="999px" style.fontWeight="600" style.textDecoration="none" style.fontSize="1.05rem"}
+::::div{style.textAlign="center" style.marginTop="2.75rem"}
+:::a{href="/contact/" style.display="inline-flex" style.alignItems="center" style.gap="0.5rem" style.backgroundColor="var(--color-primary)" style.color="var(--color-text-white)" style.padding="0.95rem 2.1rem" style.borderRadius="999px" style.fontWeight="800" style.textDecoration="none" style.fontSize="1.05rem" style.boxShadow="0 14px 30px -12px rgba(47,125,85,0.75)"}
 Sign up to volunteer →
 :::
 ::::
 :::::
 
 :::::section{id="donate" style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::np-section-header{props.eyebrow="Donate" props.heading="Choose your impact" props.subheading="Every gift stays in Rivertown and is matched dollar-for-dollar this month. Here's what your generosity makes possible."}
+::np-section-header{props.eyebrow="Donate" props.heading="Choose your" props.headingAccent="impact" props.subheading="Every gift stays in Rivertown and is matched dollar-for-dollar this month. Here's what your generosity makes possible."}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
-::np-donate-tier{props.amount="$25" props.title="Fill a pantry box" props.text="Provides a week of fresh groceries for a family of four at the Riverside Food Pantry." props.cta="Give $25" props.ctaHref="/get-involved/"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.75rem" style.alignItems="start" style.--md.gridTemplateColumns="1fr"}
+::np-donate-tier{props.icon="🥫" props.amount="$25" props.title="Fill a pantry box" props.text="Provides a week of fresh groceries for a family of four at the Riverside Food Pantry." props.cta="Give $25" props.ctaHref="/get-involved/"}
 
-::np-donate-tier{props.amount="$60" props.title="Mentor a student" props.text="Covers a month of one-to-one mentoring, supplies, and after-school snacks for one young person." props.featured="true" props.cta="Give $60" props.ctaHref="/get-involved/"}
+::np-donate-tier{props.icon="📚" props.amount="$60" props.title="Mentor a student" props.text="Covers a month of one-to-one mentoring, supplies, and after-school snacks for one young person." props.featured="true" props.cta="Give $60" props.ctaHref="/get-involved/"}
 
-::np-donate-tier{props.amount="$120" props.title="Keep a family housed" props.text="Helps cover emergency rental assistance that keeps a household in their home during a crisis." props.cta="Give $120" props.ctaHref="/get-involved/"}
+::np-donate-tier{props.icon="🏠" props.amount="$120" props.title="Keep a family housed" props.text="Helps cover emergency rental assistance that keeps a household in their home during a crisis." props.cta="Give $120" props.ctaHref="/get-involved/"}
 ::::
 
-:::div{style.maxWidth="var(--max-width-narrow)" style.margin="2.5rem auto 0" style.textAlign="center" style.color="var(--color-text-muted)" style.fontSize="0.95rem"}
+:::div{style.maxWidth="var(--max-width-narrow)" style.margin="2.75rem auto 0" style.textAlign="center" style.color="var(--color-text-muted)" style.fontWeight="600" style.fontSize="0.95rem"}
 Prefer to give monthly? Recurring gifts give us the steady footing to plan ahead. This is a demo — connect your donation platform in `pages/get-involved.md`.
 :::
 :::::
 
-:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 5rem)" style.backgroundColor="var(--color-bg-cream)"}
-::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
-::np-testimonial{props.quote="I started volunteering on Saturdays to fill some empty time. Two years later it's the best part of my week — and I've watched kids I mentored head off to college." props.author="Ray D." props.role="Youth mentor since 2022"}
+:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 6rem)" style.backgroundColor="var(--color-bg-cream)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto"}
+::np-testimonial{props.quote="I started volunteering on Saturdays to fill some empty time. Two years later it's the best part of my week — and I've watched kids I mentored head off to college." props.author="Ray D." props.role="Youth mentor since 2022" props.image="/images/program-2.jpg" props.imageAlt="A Rivertown volunteer mentoring a young student" props.stat="2 yrs" props.statLabel="of Saturdays that changed everything"}
 ::::
 :::::
 
-::np-cta{props.eyebrow="Ready when you are" props.heading="Turn your generosity into groceries, mentors, and homes" props.text="Give today and a matching donor doubles your gift — every dollar working twice as hard for Rivertown." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Ask a Question" props.cta2Href="/contact/" props.bg="/images/cta-bg.jpg"}
+::np-cta{props.eyebrow="Ready when you are" props.heading="Turn generosity into groceries," props.headingAccent="mentors, and homes" props.text="Give today and a matching donor doubles your gift — every dollar working twice as hard for Rivertown." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Ask a question" props.cta2Href="/contact/"}

package/sites/nonprofit/pages/index.md

@@ -11,77 +11,62 @@ state:
     limit: 3
 ---
 
-::np-hero{props.eyebrow="Rivertown · Est. 2007" props.heading="Together, we build a stronger Rivertown." props.subheading="We're a community nonprofit turning everyday generosity into food, mentorship, housing, and jobs for our neighbors — right here at home." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="See Our Programs" props.cta2Href="/programs/" props.bg="/images/hero.jpg"}
+::np-hero{props.eyebrow="Rivertown · Since 2007" props.heading="Together, we build a" props.headingAccent="warmer" props.headingTail=" Rivertown." props.subheading="We're a community foundation turning everyday generosity into food, mentorship, housing, and jobs for our neighbors — right here at home." props.cta="Donate" props.ctaHref="/get-involved/" props.cta2="See our programs" props.cta2Href="/programs/" props.badgeNumber="640" props.badgeLabel="neighbors volunteering this month" props.bg="/images/hero.jpg"}
 
-:::np-intro{props.image="/images/about.jpg" props.imageAlt="Rivertown Foundation volunteers gathered together"}
+:::::np-impact-band{props.eyebrow="Our impact in 2024" props.heading="What we did" props.headingAccent="together"}
+::::div{style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::np-stat{props.icon="🍎" props.number="128k" props.label="Meals provided" props.note="Fresh groceries and hot meals for local families."}
 
-### Our mission
+::np-stat{props.icon="🙌" props.number="640" props.label="Active volunteers" props.note="Neighbors giving their time every month."}
 
-Rivertown Foundation exists to make sure no neighbor faces hard times alone. We connect local generosity to the people and programs that need it most — meeting immediate needs today while opening doors to a more stable tomorrow.
+::np-stat{props.icon="🏠" props.number="180" props.label="Households housed" props.note="Families kept in stable, safe homes."}
 
-Every dollar, every hour, and every box of groceries stays right here in our community.
-:::
-
-:::::section{style.padding="clamp(3.5rem, 8vw, 5rem) 1.5rem" style.backgroundColor="var(--color-primary)" style.color="var(--color-text-white)"}
-::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto 2.5rem" style.textAlign="center"}
-:::p{style.textTransform="uppercase" style.letterSpacing="0.16em" style.fontSize="0.8rem" style.fontWeight="600" style.color="#bbf7d0" style.margin="0 0 0.75rem"}
-Our impact in 2024
-:::
-
-:::h2{style.fontFamily="var(--font-heading)" style.fontSize="clamp(1.9rem, 4vw, 2.6rem)" style.fontWeight="700" style.lineHeight="1.15" style.margin="0"}
-What we did together last year
-:::
+::np-stat{props.icon="🌳" props.number="17" props.label="Years serving Rivertown" props.note="Rooted right here since 2007."}
 ::::
+:::::
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="2rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
-::np-stat{props.number="128k" props.label="Meals provided" props.note="Fresh groceries and hot meals for local families."}
+:::np-intro{props.eyebrow="Our mission" props.image="/images/about.jpg" props.imageAlt="Rivertown Foundation volunteers gathered together" props.signNumber="17" props.signLabel="years rooted in Rivertown"}
 
-::np-stat{props.number="640" props.label="Active volunteers" props.note="Neighbors giving their time every month."}
+### No neighbor should face hard times alone.
 
-::np-stat{props.number="180" props.label="Households housed" props.note="Families kept in stable, safe homes."}
+Rivertown Foundation connects local generosity to the people and programs that need it most — meeting immediate needs today while opening doors to a more stable tomorrow.
 
-::np-stat{props.number="17" props.label="Years serving Rivertown" props.note="Rooted here since 2007."}
-::::
-:::::
+Every dollar, every hour, and every box of groceries stays **right here in our community.**
+
+:::
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="What we do" props.heading="Programs that meet real needs" props.subheading="Five community programs, one goal: helping every neighbor thrive."}
+:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem" style.backgroundColor="var(--color-bg-mint)"}
+::np-section-header{props.eyebrow="What we do" props.heading="Programs that meet" props.headingAccent="real needs" props.subheading="Five neighbor-powered programs, one goal: helping every family in Rivertown thrive."}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.75rem" style.--md.gridTemplateColumns="1fr"}
 :::Array{items.ref="#/state/programs"}
-::np-program-card{props.title="${item.data.title}" props.summary="${item.data.summary}" props.image="${item.data.image}"}
+::np-program-card{props.title="${item.data.title}" props.summary="${item.data.summary}" props.image="${item.data.image}" props.tag="Program" props.href="/programs/"}
 :::
 ::::
 
-::::div{style.textAlign="center" style.marginTop="2.5rem"}
-:::a{href="/programs/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
+::::div{style.textAlign="center" style.marginTop="2.75rem"}
+:::a{href="/programs/" style.display="inline-flex" style.alignItems="center" style.gap="0.5rem" style.backgroundColor="var(--color-bg-white)" style.border="1px solid var(--color-border-strong)" style.color="var(--color-primary-deep)" style.padding="0.9rem 1.9rem" style.borderRadius="999px" style.fontWeight="800" style.textDecoration="none" style.fontSize="1.02rem"}
 Explore all five programs →
 :::
 ::::
 :::::
 
 :::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::np-section-header{props.eyebrow="Get involved" props.heading="Three ways to make a difference"}
+::np-section-header{props.eyebrow="Get involved" props.heading="Three ways to" props.headingAccent="make a difference"}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--md.gridTemplateColumns="1fr"}
-::np-step{props.num="♥" props.title="Give" props.text="A one-time or monthly gift puts groceries on tables and mentors in classrooms — 100% locally."}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.75rem" style.--md.gridTemplateColumns="1fr"}
+::np-step{props.num="❤" props.title="Give" props.text="A one-time or monthly gift puts groceries on tables and mentors in classrooms — 100% locally." props.badgeBg="var(--color-accent-soft)" props.badgeColor="var(--color-accent)" props.href="/get-involved/" props.linkText="Donate now"}
 
-::np-step{props.num="✋" props.title="Volunteer" props.text="Pack boxes, tutor a student, or tend the garden. Every skill and every hour helps."}
+::np-step{props.num="🙌" props.title="Volunteer" props.text="Pack boxes, tutor a student, or tend the garden. Every skill and every hour finds a home here." props.badgeBg="var(--color-primary-soft)" props.badgeColor="var(--color-primary)" props.href="/get-involved/" props.linkText="Find a role"}
 
-::np-step{props.num="📣" props.title="Spread the word" props.text="Share our work, host a drive, or bring your team for a day of service."}
-::::
-
-::::div{style.textAlign="center" style.marginTop="2.5rem"}
-:::a{href="/get-involved/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="700" style.textDecoration="none" style.fontSize="1.05rem"}
-See all the ways to help →
-:::
+::np-step{props.num="🤝" props.title="Partner" props.text="Businesses and faith groups: sponsor a program, host a drive, or open a hiring pipeline." props.badgeBg="var(--color-gold-soft)" props.badgeColor="#b07d1e" props.href="/get-involved/" props.linkText="Partner with us"}
 ::::
 :::::
 
-:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 6rem)"}
-::::div{style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
-::np-testimonial{props.quote="When we lost my husband's job, the Food Pantry and Housing team caught us before we fell. A year later I'm the one volunteering. This is what community looks like." props.author="Marisol T." props.role="Neighbor & volunteer"}
+:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 6rem)" style.backgroundColor="var(--color-bg-cream)"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto"}
+::np-testimonial{props.quote="When we lost my husband's job, the Food Pantry and Housing team caught us before we fell. A year later, I'm the one volunteering. This is what community looks like." props.author="Marisol T." props.role="Neighbor & volunteer" props.image="/images/cta-bg.jpg" props.imageAlt="Rivertown neighbors sharing a meal together" props.stat="400+" props.statLabel="families served every single week"}
 ::::
 :::::
 
-::np-cta{props.eyebrow="Your gift, doubled" props.heading="Every gift stays in Rivertown" props.text="A generous donor is matching all gifts this month, dollar for dollar. Give today and your impact goes twice as far." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="More Ways to Help" props.cta2Href="/get-involved/" props.bg="/images/cta-bg.jpg"}
+::np-cta{props.eyebrow="Your gift, doubled" props.heading="Every gift stays in" props.headingAccent="Rivertown" props.text="A generous donor is matching all gifts this month, dollar for dollar. Give today and your impact goes twice as far." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="More ways to help" props.cta2Href="/get-involved/"}

package/sites/nonprofit/pages/programs.md

@@ -10,30 +10,28 @@ state:
       order: asc
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="Our programs" props.heading="How we show up for Rivertown" props.subheading="Five neighbor-powered programs that meet urgent needs today and build a stronger community for tomorrow."}
+:::::section{style.padding="clamp(3rem, 6vw, 4.5rem) 1.5rem clamp(2.5rem, 5vw, 3.5rem)" style.backgroundColor="var(--color-bg-cream)"}
+::np-section-header{props.eyebrow="Our programs" props.heading="How we show up for" props.headingAccent="Rivertown" props.subheading="Five neighbor-powered programs that meet urgent needs today and build a stronger community for tomorrow."}
 :::::
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.5rem" style.--lg.gridTemplateColumns="repeat(2, 1fr)" style.--md.gridTemplateColumns="1fr"}
+:::::section{style.padding="clamp(3rem, 7vw, 5rem) 1.5rem"}
+::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(3, 1fr)" style.gap="1.75rem" style.--lg.gridTemplateColumns="repeat(2, 1fr)" style.--md.gridTemplateColumns="1fr"}
 :::Array{items.ref="#/state/programs"}
-::np-program-card{props.title="${item.data.title}" props.summary="${item.data.summary}" props.image="${item.data.image}"}
+::np-program-card{props.title="${item.data.title}" props.summary="${item.data.summary}" props.image="${item.data.image}" props.tag="Program" props.href="/get-involved/"}
 :::
 ::::
 :::::
 
-:::::section{style.padding="clamp(1rem, 4vw, 2rem) 1.5rem clamp(3.5rem, 8vw, 5rem)" style.backgroundColor="var(--color-bg-cream)"}
-::np-section-header{props.eyebrow="The difference you make" props.heading="Small gifts, big outcomes"}
+:::::np-impact-band{props.eyebrow="The difference you make" props.heading="Small gifts," props.headingAccent="big outcomes"}
+::::div{style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="1.25rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
+::np-stat{props.icon="🍎" props.number="128k" props.label="Meals provided" props.note="Fresh, dignified groceries through the Riverside Food Pantry."}
 
-::::div{style.maxWidth="var(--max-width)" style.margin="0 auto" style.display="grid" style.gridTemplateColumns="repeat(4, 1fr)" style.gap="2rem" style.--md.gridTemplateColumns="repeat(2, 1fr)"}
-::np-stat{props.number="128k" props.label="Meals provided"}
+::np-stat{props.icon="📚" props.number="1,200" props.label="Youth mentored" props.note="Weekly one-to-one time with a caring adult."}
 
-::np-stat{props.number="1,200" props.label="Youth mentored"}
+::np-stat{props.icon="🏠" props.number="180" props.label="Households housed" props.note="Emergency help that keeps families in their homes."}
 
-::np-stat{props.number="180" props.label="Households housed"}
-
-::np-stat{props.number="310" props.label="Jobs secured"}
+::np-stat{props.icon="💼" props.number="310" props.label="Jobs secured" props.note="Living-wage careers through training and coaching."}
 ::::
 :::::
 
-::np-cta{props.eyebrow="Fuel the work" props.heading="Help us grow every program" props.text="Your gift helps us keep the pantry stocked, the mentors trained, and the doors open for every neighbor who needs us." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Volunteer With Us" props.cta2Href="/get-involved/" props.bg="/images/cta-bg.jpg"}
+::np-cta{props.eyebrow="Fuel the work" props.heading="Help us grow" props.headingAccent="every program" props.text="Your gift keeps the pantry stocked, the mentors trained, and the doors open for every neighbor who needs us." props.cta="Donate Now" props.ctaHref="/get-involved/" props.cta2="Volunteer with us" props.cta2Href="/get-involved/"}