{"id":3111,"date":"2025-06-02T07:26:01","date_gmt":"2025-06-02T07:26:01","guid":{"rendered":"https:\/\/www.njfuture.org\/?page_id=3111"},"modified":"2025-12-16T15:36:45","modified_gmt":"2025-12-16T15:36:45","slug":"mission-vision-principles","status":"publish","type":"page","link":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/","title":{"rendered":"Mission, Vision &amp; Principles"},"content":{"rendered":"\n<div class=\"bg-brand-jersey-blue text-white relative mb-10 overflow-hidden\">\n  <div class=\"container py-10 md:py-36 relative\">\n        <div\n      class=\"uppercase w-full md:w-[42%] font-gotham\">\n              <h2 class=\"text-3xl text-brand-grey\">Mission, Vision, and Principles<\/h2>\n                    <h2 class=\"text-h2 md:text-h1 font-bold mt-6\">\n          For a Bright and Sustainable Future        <\/h2>\n          <\/div>\n  <\/div>\n\n      <div class=\"max-md:hidden absolute top-0 h-full w-[50%] right-0\"\n      style=\"background-image: url('https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/10\/Downtown-Bordentown.webp'); background-size: cover; background-position: top; background-repeat: no-repeat;\">\n      <!-- w-[26.875rem] -->\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Frame-1261152805.svg\" alt=\"hero-banner-vector\"\n        class=\"object-cover object-left absolute top-0 left-0 w-full h-full lg:h-full lg:w-auto   without-contrast-wave-image block\">\n\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Frame-1261152805-1.svg\" alt=\"hero-banner-vector\"\n        class=\"object-cover object-left absolute top-0 left-0 w-full h-full lg:h-full lg:w-auto contrast-wave-image hidden\">\n    <\/div>\n    <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/10\/Downtown-Bordentown.webp\" alt=\"hero-banner-image\"\n      class=\"md:hidden w-full object-contain object-center h-[22rem]\">\n      <\/div>\n\n\n<div class=\"parallax-section\"\n  style=\"background-image: url('https:\/\/www.njfuture.org\/wp-content\/themes\/new-jersey-production\/assets\/images\/mission-pattern.png'); background-position: 0% 10px; background-size: contain; background-repeat: no-repeat;\">\n  <div class=\"container min-h-[30rem]\">\n    <div class=\"flex max-md:flex-col justify-end relative w-full lg:w-[80%] mx-auto items-center gap-10\">\n      <div\n        class=\"md:w-1\/2 lg:w-full lg:h-[130%] w-full h-auto relative md:absolute lg:translate-x-[-20%] md:translate-y-[24%] left-0 -bottom-8 max-w-[37.3125rem]\">\n        <div class=\"!h-full aspect-square\" data-animate=\"mission-images\">\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/NJF-About-MissionVisionValues-Image01.svg\"\n              style=\"transform: translate(-100px, -50px) scale(1); opacity: 0;\"\n              class=\"!h-full w-full !max-w-none absolute inset-0 object-contain z-[1] \"\n               alt=\"\">\n                        <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/NJF-About-MissionVisionValues-Image01-2.svg\"\n              style=\"transform: translate(0px, -60px) scale(1.1); opacity: 0;\"\n              class=\"!h-full w-full !max-w-none absolute inset-0 object-contain z-[2] !left-32 NJF-gold-image\"\n               alt=\"\">\n                        <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/11\/NJF-About-MissionVisionValues-Flower.png\"\n              style=\"transform: translate(100px, 0px) scale(1); opacity: 0;\"\n              class=\"!h-full w-full !max-w-none absolute inset-0 object-contain z-[3] \"\n               alt=\"\">\n                        <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-About-MissionVisionValues-NJPhoto-3-1.png\"\n              style=\"transform: translate(80px, 100px) scale(1); opacity: 0;\"\n              class=\"!h-full w-full !max-w-none absolute inset-0 object-contain z-[4] pointer-events-none object-right -ml-10 md:-ml-12 xl:-ml-14\"\n              style=\"!h-[95%] !h-[95%]\" alt=\"\">\n                        <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/09\/Camden-Train_transparent-1.svg\"\n              style=\"transform: translate(0px, 130px) scale(1); opacity: 0;\"\n              class=\"!h-full w-full !max-w-none absolute inset-0 object-contain z-[5] pointer-events-none !top-20\"\n              style=\"!h-[136%] w-[82%] !h-[136%] w-[82%]\" alt=\"\">\n                    <\/div>\n      <\/div>\n\n      <div\n        class=\"text-container lg:max-w-[30rem] xl:max-w-[34.125rem] my-auto w-full md:w-[46%] lg:w-full pr-[0%] pb-10 md:py-20\">\n        <h2 class=\"text-[2.375rem] text-brand-jersey-blue font-gotham font-medium max-md:text-center\">\n          Mission        <\/h2>\n        <div class=\"h-px bg-brand-gold my-5\"><\/div>\n        <p class=\"text-2xl text-brand-black richText\">We promote sensible and equitable growth, redevelopment, and infrastructure investments through original research, innovative policy development, coalition-building, advocacy, and hands-on strategic assistance. <\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<div class=\"overflow-hidden parallax-section-2 bg-brand-med-grey py-10\"\n  style=\"background-image: url('https:\/\/www.njfuture.org\/wp-content\/themes\/new-jersey-production\/assets\/images\/vision-pattern.png'); background-position: 100% 10px; background-size: contain; background-repeat: no-repeat;\">\n  <div class=\"container md:min-h-[36.75rem]\">\n    <div class=\"flex max-md:flex-col-reverse items-center gap-20 md:gap-5 lg:gap-10 lg:w-[80%] mx-auto relative\">\n      <div class=\"md:w-[60%] lg:w-full lg:max-w-[28.125rem] my-auto md:pt-48 md:pb-16 text-container\">\n        <h2 class=\"text-[2.375rem] text-brand-jersey-blue font-gotham font-medium richText\">\n          Vision        <\/h2>\n        <div class=\"h-px bg-brand-gold my-5\"><\/div>\n        <p class=\"text-2xl text-brand-black relative z-10 richText\">A New Jersey with healthy, strong, resilient communities, protected natural lands and waterways, increased transportation choices beyond cars, a robust and fair economy, and access to safe, affordable, and aging-friendly neighborhoods for everyone.<\/p>\n      <\/div>\n\n      <div\n        class=\"w-full h-auto md:h-full relative lg:absolute lg:right-0 lg:top-0 lg:translate-x-[15%] scale-170 lg:max-w-[37.875rem] xl:max-w-[40.875rem]\">\n        <div class=\"!h-full aspect-square\" data-animate=\"about-vision-images\">\n\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/Vector.png\"\n              style=\"transform: translate(260px, 0px) scale(1); opacity: 0;\"\n              class=\"aspect-square w-full !h-full absolute inset-0 object-contain z-[1] NJF-cerulean-blue-Shape lg:ml-4 !max-w-none\"\n              alt=\"\">\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/Tree.png\"\n              style=\"transform: translate(-220px, 50px) scale(1); opacity: 0;\"\n              class=\"aspect-square w-full max-lg:w-[87%] max-lg:!h-[119%] -ml-[15rem] mt-16 absolute inset-0 object-contain z-[2]  !max-w-none\"\n              alt=\"\">\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/SavePark-1.png\"\n              style=\"transform: translate(0px, -140px) scale(1); opacity: 0;\"\n              class=\"aspect-square w-full !h-[67%] -mt-4 ml-28 md:ml-36 lg:ml-[14rem] absolute inset-0 object-contain z-[3]  !max-w-none\"\n              alt=\"\">\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/Vector-1.png\"\n              style=\"transform: translate(-100px, -130px) scale(1); opacity: 0;\"\n              class=\"aspect-square w-full !w-[15.88%] absolute inset-0 object-contain z-[10]  !max-w-none\"\n              alt=\"\">\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-About-MissionVisionValues-ShapePhoto-scaled.png\"\n              style=\"transform: translate(-160px, 50px) scale(1.5); opacity: 0;\"\n              class=\"aspect-square w-full max-lg:!h-[128%] scale-150 absolute inset-0 object-contain z-[5] pointer-events-none !max-w-none\"\n              alt=\"\">\n                      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-About-MissionVisionValues-People2-scaled.png\"\n              style=\"transform: translate(110px, 170px) scale(1.4); opacity: 0;\"\n              class=\"aspect-square w-full !h-[131%] mt-8 w-[40%] lg:w-full -top-[20%] -left-[5%] absolute inset-0 object-contain z-[5] pointer-events-none ml-8 !max-w-none\"\n              alt=\"\">\n          \n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n<!-- Values Section Container -->\n<div class=\"py-10 relative overflow-hidden values-section\">\n  <!-- Background Pattern Elements -->\n  <div class=\"absolute left-0 w-1\/3 top-[45%] 2xl:w-[38%] -translate-y-1\/2 aspect-square\">\n    <div class=\"pattern-elements\">\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/themes\/new-jersey-production\/assets\/images\/values-pattern.png\" alt=\"Decorative pattern\"\n        class=\"w-full h-full object-cover object-center\">\n    <\/div>\n  <\/div>\n\n  <div class=\"absolute right-0 w-1\/3 top-[55%] 2xl:w-[38%] 2xl -translate-y-1\/2 aspect-square\">\n    <div class=\"pattern-elements\">\n      <img decoding=\"async\" src=\"https:\/\/www.njfuture.org\/wp-content\/themes\/new-jersey-production\/assets\/images\/values-pattern.png\" alt=\"Decorative pattern\"\n        class=\"w-full h-full object-cover object-center\">\n    <\/div>\n  <\/div>\n\n  <!-- Main Content Container -->\n  <div class=\"container w-full sm:w-[80%] lg:w-full lg:max-w-[64rem] relative z-50 mx-auto\">\n    <!-- Interactive Circular Values Display -->\n    <div class=\"aspect-square relative rounded-full overflow-hidden\"\n      x-data='{\"activeValue\": 0, \"values\": [{&quot;title&quot;:&quot;Land Use&quot;,&quot;description&quot;:&quot;How we use our land affects our environment, economy, social equity, and every aspect of our quality of life.&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Jersey-City-tree-lined-city-street.jpg&quot;},{&quot;title&quot;:&quot;System Change&quot;,&quot;description&quot;:&quot;The institutions, policies, and systems that drive and support tangible change must evolve for greater and more lasting impact.&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Statehouse.jpg&quot;},{&quot;title&quot;:&quot;Holistic and Inclusive&quot;,&quot;description&quot;:&quot;Our land use decisions should be informed by facts and multiple perspectives, including those most impacted.&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/11\\\/145426.jpg&quot;},{&quot;title&quot;:&quot;Future Orientation&quot;,&quot;description&quot;:&quot;We need to make decisions today that set future generations up for success.&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/72187d7ecea10199efc3ea1a47aa6572ea920cf4-scaled.jpg&quot;},{&quot;title&quot;:&quot;Justice&quot;,&quot;description&quot;:&quot;Land use outcomes should be just, especially for those who have been discriminated against without merit&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Family-in-front-of-home-scaled.jpg&quot;},{&quot;title&quot;:&quot;Water&quot;,&quot;description&quot;:&quot;Water and water infrastructure are integral to every aspect of land use.&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Water-under-bridge.jpg&quot;},{&quot;title&quot;:&quot;Center-Based Redevelopment&quot;,&quot;description&quot;:&quot;Growth should be accommodated in centers where development and infrastructure already exist, and where compact, walkable, mixed-use patterns enable safer walking and biking and less dependence on cars.&quot;,&quot;image&quot;:&quot;https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Bikes.jpg&quot;}]}'\n      @value-rotate.window=\"activeValue = $event.detail.activeValue\">\n\n              <!-- White border backgrounds for 7+ values -->\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 149.99904807207% 49.563669071525%, 149.9996573056% 49.738200911258%, 149.99996192282% 49.912733548476%, 149.99996192282% 50.087266451524%, 149.9996573056% 50.261799088742%, 149.99904807207% 50.436330928475%);background-color:white;\"><\/div>\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 112.68952392518% 127.91035611544%, 112.55344928907% 128.01965125556%, 112.41718410431% 128.1287087343%, 112.28072878598% 128.23752821944%, 112.14408374975% 128.3461093795%, 112.00724941186% 128.45445188372%);background-color:white;\"><\/div>\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 28.173509629378% 147.58895592279%, 28.003218100045% 147.55071289358%, 27.832993576724% 147.51217270798%, 27.66283657795% 147.47333548339%, 27.492747622049% 147.43420133811%, 27.322727227142% 147.39477039136%);background-color:white;\"><\/div>\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, -39.906712238076% 93.781081468366%, -39.982987665734% 93.624098050829%, -40.058988989606% 93.466981746724%, -40.134715978179% 93.309733034654%, -40.210168400776% 93.152352393626%, -40.285346027555% 92.994840303049%);background-color:white;\"><\/div>\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, -40.285346027555% 7.005159696951%, -40.210168400776% 6.8476476063741%, -40.134715978179% 6.6902669653463%, -40.058988989606% 6.5330182532762%, -39.982987665734% 6.3759019491709%, -39.906712238076% 6.2189185316337%);background-color:white;\"><\/div>\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 27.322727227142% -47.394770391358%, 27.492747622049% -47.434201338109%, 27.66283657795% -47.473335483386%, 27.832993576725% -47.512172707978%, 28.003218100045% -47.550712893581%, 28.173509629378% -47.588955922795%);background-color:white;\"><\/div>\n                            <div class=\"absolute pointer-events-none z-30\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 112.00724941186% -28.454451883721%, 112.14408374975% -28.346109379497%, 112.28072878598% -28.237528219438%, 112.41718410431% -28.128708734299%, 112.55344928907% -28.019651255565%, 112.68952392517% -27.910356115441%);background-color:white;\"><\/div>\n              \n              <!-- Dynamic layout for 7+ values -->\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 149.99619230642% 50.872653549837%, 149.53242274559% 59.659028025317%, 148.29811836923% 68.370626692347%, 146.30283460127% 76.940008310308%, 143.56201802253% 85.300832618389%, 140.09688679024% 93.388373911756%, 135.93426637676% 101.14002211857%, 131.10638189893% 108.49576749872%, 125.65060864586% 115.398665212%, 119.6091827364% 121.79527615916%, 113.02887414631% 127.6360806832%);object-position:center;\"\n            @mouseenter=\"activeValue = 0\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[0].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 0 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"Land Use\">\n          <\/div>\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 111.66433810921% 128.72426186096%, 104.50571833593% 133.83988709847%, 96.925140044371% 138.30646200486%, 88.981288629034% 142.08940838566%, 80.735661779981% 145.15944038794%, 72.252093395631% 147.49279121818%, 63.596259409715% 149.0713971339%, 54.835169358014% 149.88303728501%, 46.036647620973% 149.92142832206%, 37.268808358145% 149.18627303906%, 28.599528199302% 147.68326267436%);object-position:center;\"\n            @mouseenter=\"activeValue = 1\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[1].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 1 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"System Change\">\n          <\/div>\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 26.8979795925% 147.2948953085%, 18.43509630529% 144.88760116445%, 10.21657416769% 141.74573030417%, 2.306037245754% 137.89360566501%, -5.235274676137% 133.36104864655%, -12.348980185873% 128.1831482468%, -18.980008205996% 122.3999894192%, -25.07702432897% 116.05634275304%, -30.592828224852% 109.20131787992%, -35.48471904481% 101.88798328929%, -39.714825991708% 94.172955496295%);object-position:center;\"\n            @mouseenter=\"activeValue = 2\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[2].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 2 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"Holistic and Inclusive\">\n          <\/div>\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, -40.472086362023% 92.600488134559%, -43.866509436542% 84.483016199277%, -46.534260623268% 76.098592412599%, -48.454687404039% 67.512125175801%, -49.612922706855% 58.790087018798%, -50% 50%, -49.612922706855% 41.209912981202%, -48.454687404039% 32.487874824199%, -46.534260623268% 23.901407587401%, -43.866509436542% 15.516983800723%, -40.472086362023% 7.3995118654414%);object-position:center;\"\n            @mouseenter=\"activeValue = 3\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[3].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 3 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"Future Orientation\">\n          <\/div>\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, -39.714825991708% 5.8270445037053%, -35.48471904481% -1.8879832892918%, -30.592828224852% -9.201317879922%, -25.07702432897% -16.056342753041%, -18.980008205996% -22.399989419203%, -12.348980185873% -28.183148246803%, -5.235274676137% -33.361048646545%, 2.306037245754% -37.893605665012%, 10.21657416769% -41.745730304168%, 18.43509630529% -44.88760116445%, 26.8979795925% -47.294895308497%);object-position:center;\"\n            @mouseenter=\"activeValue = 4\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[4].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 4 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"Justice\">\n          <\/div>\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 28.599528199302% -47.683262674357%, 37.268808358145% -49.186273039057%, 46.036647620973% -49.921428322055%, 54.835169358014% -49.883037285013%, 63.596259409715% -49.071397133904%, 72.252093395632% -47.492791218182%, 80.735661779981% -45.159440387944%, 88.981288629034% -42.089408385655%, 96.925140044371% -38.306462004862%, 104.50571833593% -33.839887098469%, 111.66433810921% -28.724261860964%);object-position:center;\"\n            @mouseenter=\"activeValue = 5\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[5].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 5 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"Water\">\n          <\/div>\n                            <div class=\"bg-gray-500 absolute overflow-hidden cursor-pointer z-20\" style=\"height:100%;width:100%;top:0;left:0;clip-path:polygon(50% 50%, 113.02887414631% -27.636080683205%, 119.6091827364% -21.795276159164%, 125.65060864586% -15.398665211998%, 131.10638189893% -8.4957674987216%, 135.93426637676% -1.1400221185688%, 140.09688679024% 6.6116260882442%, 143.56201802253% 14.699167381611%, 146.30283460127% 23.059991689692%, 148.29811836923% 31.629373307653%, 149.53242274559% 40.340971974683%, 149.99619230642% 49.127346450163%);object-position:center;\"\n            @mouseenter=\"activeValue = 6\" @mouseleave=\"$dispatch('value-interaction')\">\n            <img :src=\"values[6].image\"               class=\"h-full w-full object-cover transition-opacity duration-300 hover:opacity-100\"\n              style=\"object-position: center;\"\n              :class=\"activeValue === 6 ? 'opacity-100' : 'opacity-50'\"\n              alt=\"Water\">\n          <\/div>\n              \n      <!-- Center Content Circle -->\n      <div\n        class=\"h-[86%] sm:h-[70%] md:h-[65%] lg:h-[60%] aspect-square overflow-hidden bg-white top-1\/2 left-1\/2 -translate-x-1\/2 -translate-y-1\/2 z-50 rounded-full absolute\">\n        <div class=\"flex flex-col justify-center gap-2 relative h-full\">\n          <div class=\"p-5 sm:p-10 lg:p-20\">\n            <h3 class=\"text-xl sm:text-3xl text-center font-gotham font-bold text-brand-jersey-blue\">\n              PRINCIPLES            <\/h3>\n            <div class=\"h-[.0625rem] my-1 sm:my-2 lg:my-4 bg-brand-gold w-full\"><\/div>\n\n                          <template x-for=\"(value, index) in values\" :key=\"index\">\n                <div x-show=\"activeValue === index\" x-transition:enter=\"transition ease-out duration-700\"\n                  x-transition:enter-start=\"opacity-0\" x-transition:enter-end=\"opacity-100\">\n                  <h3 class=\"text-xl sm:text-2xl font-gotham text-center text-brand-slate-grey\" x-text=\"value.title\">\n                  <\/h3>\n                  <p class=\"text-xs xs:text-p3 md:text-p2 text-center mt-1 md:mt-3 text-brand-black richText\"\n                    x-text=\"value.description\">\n                  <\/p>\n                <\/div>\n              <\/template>\n                      <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<script>\n  document.addEventListener('DOMContentLoaded', function () {\n    const valuesSection = document.querySelector('.values-section');\n    if (!valuesSection || false) return;\n    let rotationInterval;\n    let isUserInteracting = false;\n    let interactionTimeout;\n    let currentActiveValue = 0;\n    const totalValues = 7;\n\n    function updateActiveValue(newValue) {\n      const alpineComponent = valuesSection.querySelector('[x-data]');\n      if (!alpineComponent) return;\n\n      try {\n        const alpineData = Alpine.$data(alpineComponent);\n        if (alpineData) {\n          alpineData.activeValue = newValue;\n          currentActiveValue = newValue;\n          return;\n        }\n      } catch (e) {\n        alpineComponent.dispatchEvent(new CustomEvent('value-rotate', {\n          detail: {\n            activeValue: newValue\n          }\n        }));\n        currentActiveValue = newValue;\n      }\n    }\n\n    function startAutoRotation() {\n      stopAutoRotation();\n      rotationInterval = setInterval(() => {\n        if (isUserInteracting) return;\n        const nextValue = (currentActiveValue + 1) % totalValues;\n        updateActiveValue(nextValue);\n      }, 2500);\n    }\n\n    function stopAutoRotation() {\n      if (rotationInterval) {\n        clearInterval(rotationInterval);\n        rotationInterval = null;\n      }\n    }\n\n    function handleUserInteraction(newValue = null) {\n      isUserInteracting = true;\n      stopAutoRotation();\n      if (newValue !== null) {\n        currentActiveValue = newValue;\n      }\n      if (interactionTimeout) {\n        clearTimeout(interactionTimeout);\n      }\n      interactionTimeout = setTimeout(() => {\n        isUserInteracting = false;\n        startAutoRotation();\n      });\n    }\n          valuesSection.addEventListener('value-interaction', () => {\n        handleUserInteraction();\n      });\n      const valueSections = valuesSection.querySelectorAll('[class*=\"bg-gray-500\"]');\n      valueSections.forEach((section, index) => {\n        section.addEventListener('mouseenter', () => {\n          handleUserInteraction(index);\n        });\n        section.addEventListener('touchstart', () => {\n          handleUserInteraction(index);\n        }, {\n          passive: true\n        });\n      });\n    \n    valuesSection.addEventListener('mousemove', () => {\n      handleUserInteraction();\n    });\n    valuesSection.addEventListener('mouseleave', () => {\n      if (interactionTimeout) {\n        clearTimeout(interactionTimeout);\n        interactionTimeout = null;\n      }\n      isUserInteracting = false;\n      startAutoRotation();\n    });\n\n    startAutoRotation();\n    window.addEventListener('beforeunload', stopAutoRotation);\n  });\n<\/script>\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":4284,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"class_list":["post-3111","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mission, Vision &amp; Principles - New Jersey Future<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mission, Vision &amp; Principles - New Jersey Future\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/\" \/>\n<meta property=\"og:site_name\" content=\"New Jersey Future\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/NewJerseyFuture\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-16T15:36:45+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@NewJerseyFuture\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/about\\\/mission-vision-principles\\\/\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/about\\\/mission-vision-principles\\\/\",\"name\":\"Mission, Vision &amp; Principles - New Jersey Future\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#website\"},\"datePublished\":\"2025-06-02T07:26:01+00:00\",\"dateModified\":\"2025-12-16T15:36:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/about\\\/mission-vision-principles\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.njfuture.org\\\/about\\\/mission-vision-principles\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/about\\\/mission-vision-principles\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.njfuture.org\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"About\",\"item\":\"https:\\\/\\\/www.njfuture.org\\\/about\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Mission, Vision &amp; Principles\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#website\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/\",\"name\":\"New Jersey Future\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.njfuture.org\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#organization\",\"name\":\"New Jersey Future\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/NJF-Footer-Logo.svg\",\"contentUrl\":\"https:\\\/\\\/www.njfuture.org\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/NJF-Footer-Logo.svg\",\"width\":354,\"height\":285,\"caption\":\"New Jersey Future\"},\"image\":{\"@id\":\"https:\\\/\\\/www.njfuture.org\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/NewJerseyFuture\\\/\",\"https:\\\/\\\/x.com\\\/NewJerseyFuture\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mission, Vision &amp; Principles - New Jersey Future","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/","og_locale":"en_US","og_type":"article","og_title":"Mission, Vision &amp; Principles - New Jersey Future","og_url":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/","og_site_name":"New Jersey Future","article_publisher":"https:\/\/www.facebook.com\/NewJerseyFuture\/","article_modified_time":"2025-12-16T15:36:45+00:00","twitter_card":"summary_large_image","twitter_site":"@NewJerseyFuture","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/","url":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/","name":"Mission, Vision &amp; Principles - New Jersey Future","isPartOf":{"@id":"https:\/\/www.njfuture.org\/#website"},"datePublished":"2025-06-02T07:26:01+00:00","dateModified":"2025-12-16T15:36:45+00:00","breadcrumb":{"@id":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.njfuture.org\/about\/mission-vision-principles\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.njfuture.org\/about\/mission-vision-principles\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.njfuture.org\/"},{"@type":"ListItem","position":2,"name":"About","item":"https:\/\/www.njfuture.org\/about\/"},{"@type":"ListItem","position":3,"name":"Mission, Vision &amp; Principles"}]},{"@type":"WebSite","@id":"https:\/\/www.njfuture.org\/#website","url":"https:\/\/www.njfuture.org\/","name":"New Jersey Future","description":"","publisher":{"@id":"https:\/\/www.njfuture.org\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.njfuture.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.njfuture.org\/#organization","name":"New Jersey Future","url":"https:\/\/www.njfuture.org\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.njfuture.org\/#\/schema\/logo\/image\/","url":"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-Footer-Logo.svg","contentUrl":"https:\/\/www.njfuture.org\/wp-content\/uploads\/2025\/12\/NJF-Footer-Logo.svg","width":354,"height":285,"caption":"New Jersey Future"},"image":{"@id":"https:\/\/www.njfuture.org\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/NewJerseyFuture\/","https:\/\/x.com\/NewJerseyFuture"]}]}},"_links":{"self":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/3111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/comments?post=3111"}],"version-history":[{"count":61,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/3111\/revisions"}],"predecessor-version":[{"id":15201,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/3111\/revisions\/15201"}],"up":[{"embeddable":true,"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/pages\/4284"}],"wp:attachment":[{"href":"https:\/\/www.njfuture.org\/wp-json\/wp\/v2\/media?parent=3111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}