@edgedev/create-edge-app 1.1.23 → 1.1.26

package/edge/components/cms/init_blocks/api_with_subarrays.html

@@ -0,0 +1,17 @@
+<div class="w-full bg-transparent">
+    <div class="p-8 max-w-screen-lg mx-auto">
+        <ul class="list-inside">
+        {{{#array {"field":"list", "api": "https://api.clearwaterproperties.com/api/front/offices", "apiField": "data", "apiQuery": "", "limit": 4, "value": [] }}}}
+        <li class="list-disc">
+            {{item.name}} - {{item.geo.lat}} : {{item.geo.lng}}
+
+            <ul class="ml-[50px] list-disc">
+            {{{#subarray:agent {"field":"item.agents", "limit": 0}}}}
+                <li>{{agent.name}} (email: {{agent.email}})</li>
+            {{{/subarray}}}
+            </ul>
+        </li>
+        {{{/array}}}
+        </ul>
+    </div>
+</div>

package/edge/components/cms/init_blocks/array_with_collection.html

@@ -0,0 +1,7 @@
+<div class="pa-8 bg-brand">
+{{{#array {"field":"list","schema":[{"field":"name","value":"text"}],"collection":{"path":"users","query":[{"field":"name","operator":">","value":""}],"order":[{"field":"name","direction":"asc"}]},"queryOptions":[{"field":"office_id","title":"Office","optionsKey":"label","optionsValue":"value","options":[{"label":"Office 1","value":"7"},{"label":"Office 2","value":"39"},{"label":"Office 3","value":"32"}]},{"field":"userId","title":"Agent","optionsKey":"name","optionsValue":"userId","options":"users"}],"limit":100,"value":[]}}}}
+    <h1 class="text-4xl">
+        {{item.name}}
+    </h1>
+{{{/array}}}
+</div>

package/edge/components/cms/init_blocks/array_with_objects.html

@@ -0,0 +1,7 @@
+<div class="p-1 w-full bg-red-200">
+    <ul class="list-inside">
+    {{{#array {"field":"listthing2", "schema": [{"field": "header", "type": "text"}], "value": [{"header": "testing"}]}}}}
+      <li class="list-disc">{{item.header}}</li>
+    {{{/array}}}
+    </ul>
+</div>

package/edge/components/cms/init_blocks/carousel.html

@@ -0,0 +1,103 @@
+<div
+  data-carousel
+  class="relative overflow-hidden"
+  data-carousel-autoplay
+  data-carousel-interval="4000"
+  data-carousel-loop
+  data-carousel-slides-to-scroll="1"
+  data-carousel-slides-to-scroll-lg="3"
+>
+  <div data-carousel-track class="flex">
+    {{{#array {"field":"List","schema":{"header":"text"},"value":[{"header":"One"},{"header":"Two"},{"header":"Three"},{"header":"Four"}]}}}}
+      <div class="shrink-0 min-w-0 flex-[0_0_100%] lg:flex-[0_0_33.333%] p-4">
+        <div class="bg-white shadow rounded p-6 h-40 flex items-center justify-center">
+          {{item.header}}
+        </div>
+      </div>
+    {{{/array}}}
+  </div>
+
+  <button type="button" data-carousel-prev
+    class="absolute left-2 top-1/2 -translate-y-1/2 p-2 bg-black/60 text-white rounded-full">‹</button>
+
+  <button type="button" data-carousel-next
+    class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-black/60 text-white rounded-full">›</button>
+
+  <div data-carousel-dots class="mt-3 flex justify-center gap-2"></div>
+</div>
+
+<!--
+SUPPORTED DATA ATTRIBUTES (on [data-carousel]):
+
+- data-carousel-autoplay
+  Enable autoplay (off by default).
+
+- data-carousel-interval="MS"
+  Milliseconds between slides for autoplay. Default: 5000.
+
+- data-carousel-loop
+  Enable looping. In our init we disable "containScroll" when loop is on, so it can wrap.
+
+- data-carousel-transition="fade"
+  Use Embla's fade plugin (best for single-slide view). Omit for multi-slide carousels.
+
+- data-carousel-fade-duration="MS"
+  Fade transition duration in ms when transition="fade". Default: 400.
+
+- data-carousel-no-pause
+  Prevent autoplay from pausing on hover/focus.
+
+- data-carousel-slides-to-scroll="N"
+  Base slidesToScroll (mobile). Default: 1.
+
+- data-carousel-slides-to-scroll-md="N"
+  slidesToScroll at ≥768px (Tailwind md breakpoint).
+
+- data-carousel-slides-to-scroll-lg="N"
+  slidesToScroll at ≥1024px (Tailwind lg breakpoint).
+
+- data-carousel-slides-to-scroll-xl="N"
+  slidesToScroll at ≥1280px (Tailwind xl breakpoint).
+
+CHILD SELECTORS:
+
+- [data-carousel-track]
+  The slide track container (display:flex). Keep overflow clipping on the ROOT, not here.
+
+- [data-carousel-prev] / [data-carousel-next]
+  Optional buttons. In loop mode we keep them enabled; we also manually wrap when hitting edges.
+
+- [data-carousel-dots]
+  Optional container; we build dots from Embla's "snap list" (respects slidesToScroll & breakpoints).
+
+LAYOUT NOTES:
+
+- For deterministic N-up widths, use flex-basis directly:
+    • 1-up mobile →   class="flex-[0_0_100%]"
+    • 3-up ≥lg   →   class="lg:flex-[0_0_33.333%]"
+  (You can also do basis-full/lg:basis-1/3 + shrink-0, but flex-[0_0_*] is the most reliable with carousels.)
+
+- Root/viewport should have overflow-hidden. Track should be flex without overflow-hidden.
+
+- Multi-up + loop behavior:
+    • Looping feels best when you have more slides than visible. With 3-up and only 4 slides it still works,
+      but snaps are limited (often just 0 and 1). We added a control "wrap" so Next at the end jumps back to 0
+      and Prev at the start jumps to the last snap.
+    • Dots represent snaps, not slides. With slidesToScroll=1 at 3-up, expect more frequent dots; with 3 they
+      represent pages.
+
+- If your layout adapts to container width (not viewport), use Tailwind container queries:
+    Wrap the carousel in a "@container" parent, and use classes like "@[1024px]:flex-[0_0_33.333%]".
+
+TYPICAL SETUPS:
+
+- Single-slide with fade:
+    data-carousel-transition="fade"
+    data-carousel-fade-duration="800"
+    slides use flex-[0_0_100%]
+
+- Multi-slide desktop paging by 3:
+    data-carousel-slides-to-scroll="1"
+    data-carousel-slides-to-scroll-lg="3"
+    slides use flex-[0_0_100%] lg:flex-[0_0_33.333%]
+-->

package/edge/components/cms/init_blocks/contact_us.html

@@ -0,0 +1,69 @@
+<section
+  class="relative cms-block cms-block-contact-form-placeholder rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 sm:px-6 sm:py-8"
+  data-block-type="contact-form-placeholder"
+>
+  <!-- OVERLAY BADGE -->
+  <div class="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-3">
+    <div
+      class="rounded-full border border-slate-300 bg-white/95 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-600 shadow-sm"
+    >
+      Contact Form Placeholder
+    </div>
+  </div>
+
+  <div class="mx-auto max-w-3xl pt-6">
+    <!-- Hidden config field: emailTo -->
+
+    <!-- Header -->
+    <div class="mb-6 space-y-2 text-center sm:text-left">
+      <h2 class="text-xl font-semibold text-slate-900">
+        {{{#text {"field":"formHeader","title":"Form Header","value":"Contact Us"}}}}
+      </h2>
+      <p class="text-sm text-slate-600">
+        {{{#text {"field":"formSubheader","title":"Form Subheader","value":"Subheader content"}}}}
+      </p>
+    </div>
+
+    <!-- Fields driven by CMS array (fieldName + fieldType as option) -->
+    <div class="space-y-4">
+      {{{#array {"field":"formFields","schema":[{"field":"fieldName","type":"text","title":"Field Label"},{"field":"fieldType","type":"option","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Text","value":"text"},{"title":"Email","value":"email"},{"title":"Phone","value":"tel"},{"title":"Textarea","value":"textarea"}]},"value":"text"}],"value":[{"fieldName":"Name","fieldType":"text"},{"fieldName":"Email","fieldType":"email"},{"fieldName":"Message","fieldType":"textarea"}]}}}}
+        <div class="space-y-1">
+          <!-- Label preview -->
+          <p class="text-xs font-medium uppercase tracking-wide text-slate-600">
+            {{item.fieldName}}
+            {{{#if {"cond":"item.fieldType == 'textarea'"}}}}
+              <span class="ml-1 text-[10px] h-[300px] font-normal text-slate-400">
+                ({{item.fieldType}})
+              </span>
+             <div class="w-full rounded-lg bg-slate-100 h-20"></div>
+            {{{#else}}}
+              <span class="ml-1 text-[10px] font-normal text-slate-400">
+                ({{item.fieldType}})
+              </span>
+               <div class="w-full rounded-lg bg-slate-100 h-10"></div>
+            {{{/if}}}
+          </p>
+
+          <!-- Input preview skeleton (visual only) -->
+         
+        </div>
+      {{{/array}}}
+    </div>
+
+    <!-- Submit button preview -->
+    <div class="mt-6">
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+        disabled
+      >
+        {{{#text {"field":"buttonText","title":"Button Text","value":"Send Message"}}}}
+      </button>
+    </div>
+
+    <!-- Tiny note -->
+    <p class="mt-3 text-xs text-slate-400">
+      The CMS uses <code>emailTo</code> <span class="font-bold underline">({{{#text {"field":"emailTo","title":"Email To","value":"test@testing.com"}}}})</span> and <code>formFields</code> (with fieldType options) to build the real form on the live site.
+    </p>
+  </div>
+</section>

package/edge/components/cms/init_blocks/content_with_left_image.html

@@ -0,0 +1,27 @@
+<section class="bg-gray-100 text-gray-900 py-16">
+  <div class="max-w-7xl mx-auto px-4">
+    <div class="flex flex-col md:flex-row items-center gap-12">
+      
+      <!-- Image -->
+      <div class="w-full md:w-1/2">
+        <img
+          src="{{{#image {"field": "backgroundImage", "value": "https://www.clearwaterproperties.com/image/static/hp-recreational.jpg" }}}}"
+          alt="David Hatef"
+          loading="lazy"
+          class="w-full h-auto rounded shadow-lg"
+        />
+      </div>
+
+      <!-- Text -->
+      <div class="w-full md:w-1/2 space-y-6">
+        <h2 class="text-3xl md:text-4xl font-bold">
+          {{{#text {"field": "header", "value": "" }}}}
+        </h2>
+        <div class="text-lg text-gray-700 leading-relaxed space-y-4">
+          {{{#richtext {"field": "content", "value": "" }}}}
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>

package/edge/components/cms/init_blocks/footer.html

@@ -0,0 +1,24 @@
+<footer id="global-footer" class="bg-neutral-900 text-white">
+  <div class="mx-auto max-w-7xl px-6 py-12"> <!-- Top: Brand / Map / Contact -->
+    <div class="grid gap-10 md:grid-cols-3"> <!-- Brand / Title -->
+      <div class="text-center md:text-left">
+        <h6 class="text-lg font-semibold tracking-wide">{{{#text {"field":"name","value":""}}}}</h6>
+        <p class="mt-2 whitespace-pre-line text-sm text-neutral-300"> {{{#text {"field":"title","value":""}}}} </p>
+      </div> <!-- Map -->
+      <div> </div> <!-- Contact -->
+      <div class="text-center md:text-left">
+        <h6 class="text-lg font-semibold tracking-wide">Contact Us</h6>
+        <div class="mt-2 space-y-2 text-sm">
+          <p> Phone: <a class="font-normal hover:opacity-90 underline underline-offset-4" href="tel:2025502730"
+              aria-label="Call (202) 550-2730"> {{{#text {"field":"phone","value":""}}}} </a> </p>
+          <p> Office: <a class="font-normal hover:opacity-90 underline underline-offset-4" href="tel:6154755616"
+              aria-label="Call (615) 475-5616"> {{{#text {"field":"officeNumber","value":""}}}} </a> </p>
+          <div>
+            <div class="text-neutral-300">{{{#text {"field":"streetAddress","value":""}}}}</div>
+            <div class="text-neutral-300">{{{#text {"field":"city","value":"","title":"City, State & Zip"}}}}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

package/edge/components/cms/init_blocks/header_divider.html

@@ -0,0 +1,7 @@
+<div class="p-1 w-full bg-brand text-center text-black">
+    <img class="mx-auto" src={{{#image {"field": "image", "title": "The Image", "value": "" }}}} />
+    <h1 class="text-xl font-brand">{{{#text {"field": "mainHeader", "value": "" }}}}</h1>
+    <h3 class="text-sm">{{{#text {"field": "subHeader", "value": "" }}}}</h3>
+    <h3 class="text-sm">{{{#text {"field":"lastHeader","option":{"optionsKey":"title","optionsValue":"value","options":[{"title":"Test","value":"test"},{"title":"Test 2","value":"test2"},{"title":"Test 3","value":"test3"}]},"value":"test"}}}}</h3>
+    <h3 class="text-8xl">{{{#text {"field":"lastHeader2","option":{"optionsKey":"name","optionsValue":"name","options":"users"},"value":"test"}}}}</h3>
+</div>

package/edge/components/cms/init_blocks/hero.html

@@ -0,0 +1,35 @@
+  <section
+    class="relative h-[50dvh] min-h-[260px] w-full bg-cover bg-center"
+    style="background-image: url('{{{#image {"field": "backgroundImage", "value": "https://www.clearwaterproperties.com/image/static/hp-recreational.jpg" }}}}')"
+  >
+    <!-- Dark overlay -->
+    <div class="absolute inset-0 bg-black/40"></div>
+
+    <!-- Centered content -->
+    <div class="relative z-10 flex h-full items-center justify-center">
+      <div class="px-6 text-center text-white">
+        <p class="text-[0.65rem] md:text-sm tracking-[0.25em] uppercase opacity-80">
+        {{{#text {"field": "topHeader", "value": "" }}}}
+        </p>
+
+        <h1 class="mt-4 text-4xl md:text-6xl font-semibold tracking-[0.35em]">
+          {{{#text {"field": "middleHeader", "value": "" }}}}
+        </h1>
+
+        <p class="mt-4 text-sm md:text-base italic opacity-90">
+        {{{#text {"field": "bottomHeader", "value": "" }}}}
+        </p>
+
+        <a
+          href="{{{#text {"field": "buttonURL", title: "Button URL", "value": "" }}}}"
+          class="mt-8 inline-block border border-white/80 px-6 py-3 text-[0.7rem] md:text-xs uppercase tracking-[0.2em]
+                 transition hover:bg-white hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-white/80"
+        >
+        {{{#text {"field": "buttonText", "value": "Search All Homes" }}}}
+        </a>
+      </div>
+    </div>
+
+    <!-- Optional vignette -->
+    <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/30"></div>
+  </section>

package/edge/components/cms/init_blocks/hero_carousel.html

@@ -0,0 +1,52 @@
+<section
+    class="relative h-[50dvh] min-h-[260px] w-full bg-cover bg-center"
+    style="background-image: url('{{{#image {"field":"backgroundImage","value":"https://www.clearwaterproperties.com/image/static/hp-recreational.jpg","tags":["Backgrounds"]}}}}')"
+  >
+    <!-- Dark overlay -->
+    <div class="absolute inset-0 bg-black/40"></div>
+
+    <!-- Centered content -->
+    <div class="relative z-10 flex h-full items-center justify-center">
+      <div class="px-6 text-center text-white">
+          <div
+            data-carousel
+            class="relative overflow-hidden"
+            data-carousel-autoplay
+            data-carousel-interval="6000"
+            data-carousel-loop
+            data-carousel-slides-to-scroll="1"
+            data-carousel-no-pause
+            data-carousel-transition="fade"
+          >
+            <div data-carousel-track class="flex">
+              {{{#array {"field":"Slides","schema":[{"field":"topHeader","value":"text"},{"field":"middleHeader","type":"text"}],"value":[{"topHeader":"Lorem ipsum dolor sit amet.","middleHeader":"Lorem ipsum dolor sit amet."},{"topHeader":"Sit amet lorem.","middleHeader":"Sit amet lorem."}]}}}}
+                <div class="shrink-0 min-w-0 flex-[0_0_100%]">
+                  <div class="text-center text-white">
+                      <p class="text-[0.65rem] md:text-sm tracking-[0.35em] uppercase opacity-80 -ml-3">
+                        {{item.topHeader}}
+                      </p>
+                      <h1 class="mt-4 text-2xl md:text-5xl font-semibold font-brand tracking-[0.35em]">
+                        {{item.middleHeader}}
+                      </h1>
+                    </div>
+                </div>
+              {{{/array}}}
+            </div>
+          </div>
+        <p class="mt-4 text-sm md:text-base italic opacity-90">
+        {{{#text {"field": "bottomHeader", "value": "" }}}}
+        </p>
+
+        <a
+          href="{{{#text {"field": "buttonURL", title: "Button URL", "value": "" }}}}"
+          class="mt-8 inline-block border border-white/80 px-6 py-3 text-[0.7rem] md:text-xs uppercase tracking-[0.2em]
+                 transition hover:bg-white hover:text-neutral-900 focus:outline-none focus:ring-2 focus:ring-white/80"
+        >
+        {{{#text {"field": "buttonText", "value": "Search All Homes" }}}}
+        </a>
+      </div>
+    </div>
+
+    <!-- Optional vignette -->
+    <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/30"></div>
+  </section>

package/edge/components/cms/init_blocks/newsletter.html

@@ -0,0 +1,117 @@
+<section
+  class="relative cms-block cms-block-newsletter-placeholder rounded-2xl border border-dashed border-slate-300 bg-slate-50/70 px-4 py-6 sm:px-6 sm:py-8"
+  data-block-type="newsletter-placeholder"
+>
+  <!-- OVERLAY BADGE -->
+  <div
+    class="pointer-events-none absolute inset-x-0 top-0 z-20 flex justify-center pt-3"
+  >
+    <div
+      class="rounded-full border border-slate-300 bg-white/95 px-4 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-600 shadow-sm"
+    >
+      Newsletter Placeholder
+    </div>
+  </div>
+
+  <div class="mx-auto max-w-2xl pt-6">
+    <!-- Hidden config field: emailTo -->
+
+    <!-- Header -->
+    <div class="mb-6 space-y-2 text-center sm:text-left">
+      <h2 class="text-xl font-semibold text-slate-900">
+        {{{#text {"field":"newsletterHeader","title":"Header","value":"Stay in the Loop"}}}}
+      </h2>
+      <p class="text-sm text-slate-600">
+        {{{#text {"field":"newsletterSubheader","title":"Subheader","value":"Get our latest news and updates"}}}}
+      </p>
+    </div>
+
+    <!-- Fields driven by CMS array (fieldName + fieldType as option) -->
+    <div class="space-y-4">
+      {{{#array {
+        "field":"newsletterFields",
+        "title":"Form Fields",
+        "schema":[
+          {
+            "field":"fieldName",
+            "type":"text",
+            "title":"Field Label"
+          },
+          {
+            "field":"fieldType",
+            "type":"option",
+            "title":"Field Type",
+            "option":{
+              "optionsKey":"title",
+              "optionsValue":"value",
+              "options":[
+                {
+                  "title":"Text",
+                  "value":"text"
+                },
+                {
+                  "title":"Email",
+                  "value":"email"
+                },
+                {
+                  "title":"Phone",
+                  "value":"tel"
+                },
+                {
+                  "title":"Textarea",
+                  "value":"textarea"
+                }
+              ]
+            },
+            "value":"text"
+          }
+        ],
+        "value":[
+          {
+            "fieldName":"Name",
+            "fieldType":"text"
+          },
+          {
+            "fieldName":"Email",
+            "fieldType":"email"
+          }
+        ]
+      }}}}
+        <div class="space-y-1">
+          <!-- Label preview -->
+          <p class="text-xs font-medium uppercase tracking-wide text-slate-600">
+            {{item.fieldName}}
+            {{{#if {"cond":"item.fieldType == 'textarea'"}}}}
+              <span class="ml-1 text-[10px] font-normal text-slate-400">
+                ({{item.fieldType}})
+              </span>
+              <div class="w-full rounded-lg bg-slate-100 h-20"></div>
+            {{{#else}}}
+              <span class="ml-1 text-[10px] font-normal text-slate-400">
+                ({{item.fieldType}})
+              </span>
+              <div class="w-full rounded-lg bg-slate-100 h-10"></div>
+            {{{/if}}}
+          </p>
+        </div>
+      {{{/array}}}
+    </div>
+
+    <!-- Submit button preview -->
+    <div class="mt-6">
+      <button
+        type="button"
+        class="inline-flex w-full items-center justify-center rounded-lg bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm disabled:cursor-not-allowed disabled:opacity-60 sm:w-auto"
+        disabled
+      >
+        {{{#text {"field":"buttonText","title":"Button Text","value":"Subscribe"}}}}
+      </button>
+    </div>
+
+    <!-- Tiny note -->
+    <p class="mt-3 text-xs text-slate-400">
+      The CMS uses <code>emailTo</code> and <code>newsletterFields</code> (array of fieldName + fieldType)
+      to build the real newsletter signup form on the live site.
+    </p>
+  </div>
+</section>

package/edge/components/cms/init_blocks/post_content.html

@@ -0,0 +1,7 @@
+<div class="pa-8 bg-white font-sans">
+{{{#array {"field":"list","schema":[{"field":"name","value":"text"},{"field":"content","value":"richtext"}],"collection":{"path":"post","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[],"limit":1,"value":[]}}}}
+    <h1 class="text-sm">
+        {{item.content}}
+    </h1>
+{{{/array}}}
+</div>

package/edge/components/cms/init_blocks/post_title_header.html

@@ -0,0 +1,21 @@
+{{{#array {"field":"list","schema":[{"field":"name","value":"text"}],"collection":{"path":"post","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[],"limit":1,"value":[]}}}}
+  <section
+    class="relative h-[50dvh] min-h-[260px] w-full bg-cover bg-center"
+    style="background-image: url('{{item.featuredImage}}')"
+  >
+    <!-- Dark overlay -->
+    <div class="absolute inset-0 bg-black/40"></div>
+
+    <!-- Centered content -->
+    <div class="relative z-10 flex h-full items-center justify-center">
+      <div class="px-6 text-center text-white">
+        <h1 class="mt-4 !text-3xl md:!text-4xl font-brand font-semibold tracking-[0.35em]">
+          {{item.title}}
+        </h1>
+      </div>
+    </div>
+
+    <!-- Optional vignette -->
+    <div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-black/20 via-transparent to-black/30"></div>
+  </section>
+  {{{/array}}}

package/edge/components/cms/init_blocks/posts_list.html

@@ -0,0 +1,20 @@
+<div class="p-8 bg-gray-50 font-sans">
+  <div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+    {{{#array {"field":"list","schema":[{"field":"name","value":"text"},{"field":"content","value":"richtext"}],"collection":{"path":"posts","query":[{"field":"doc_created_at","operator":">","value":0}],"order":[{"field":"doc_created_at","direction":"desc"}]},"queryOptions":[{"field":"tags","operator":"array-contains-any","options":[]}],"limit":10,"value":[]}}}}
+
+    <div class="bg-white rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-200 overflow-hidden flex flex-col">
+      <img src="{{item.featuredImage}}" alt="{{item.title}}" class="h-48 w-full object-cover" />
+      <div class="p-5 flex flex-col flex-1">
+        <h2 class="text-lg font-semibold text-gray-800 mb-2 line-clamp-2">{{ item.title }}</h2>
+        <div class="text-gray-600 text-sm flex-1 mb-4 line-clamp-3">
+          {{ item.blurb }}
+        </div>
+        <a href="/posts/{{item.name}}" class="inline-block mt-auto self-start text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors duration-150">
+          Read More →
+        </a>
+      </div>
+    </div>
+
+    {{{/array}}}
+  </div>
+</div>

package/edge/components/cms/init_blocks/properties_showcase.html

@@ -0,0 +1,100 @@
+<section class="bg-gray-100 text-gray-900 py-16">
+  <div class="max-w-7xl mx-auto px-4 py-4">
+    <div class="text-center space-y-2">
+      <h2 class="text-3xl md:text-5xl font-semibold tracking-wide">
+        {{{#text {"field": "mainHeader", "value": "" }}}}
+      </h2>
+      <p class="text-base text-gray-600">
+        {{{#text {"field": "subHeader", "value": "" }}}}
+      </p>
+      <p>
+        {{{#text {"field": "thirdHeader", "value": "Hello" }}}}
+      </p>
+    </div>
+  </div>
+
+  <div class="max-w-7xl mx-auto px-4 grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+    {{{#array {"field":"showcaseproperties","schema":{"listing_price":"money","square_feet":"number","acres":"number"},"api":"https://api.clearwaterproperties.com/api/front/properties","apiField":"data","apiQuery":"","queryOptions":[{"field":"sort","optionsKey":"label","optionsValue":"value","options":[{"label":"Highest Price","value":"listing_price"},{"label":"Lowest Price","value":"-listing_price"},{"label":"Newest","value":"-list_date"}]},{"field":"filter_scope[agent][]","title":"Agent","optionsKey":"name","optionsValue":"mls.primary","options":"users"}],"limit":6,"value":[]}}}}
+
+      <!-- Loading state -->
+      <div class="{{loading}} min-w-0">
+        <div class="block w-full bg-white shadow-md rounded-lg overflow-hidden animate-pulse">
+          <!-- Image skeleton -->
+          <div class="relative w-full h-64 bg-gray-200">
+            <!-- Top left badge -->
+            <div class="absolute top-2 left-2 w-16 h-5 bg-gray-300 rounded"></div>
+            <!-- Bottom right badge -->
+            <div class="absolute bottom-2 right-2 w-20 h-5 bg-gray-300 rounded"></div>
+          </div>
+
+          <!-- Content skeleton -->
+          <div class="p-4 space-y-3">
+            <!-- Price -->
+            <div class="w-32 h-6 bg-gray-300 rounded"></div>
+            <!-- Address -->
+            <div class="w-48 h-4 bg-gray-200 rounded"></div>
+            <!-- Stats -->
+            <div class="flex gap-4 mt-2">
+              <div class="w-12 h-4 bg-gray-200 rounded"></div>
+              <div class="w-12 h-4 bg-gray-200 rounded"></div>
+              <div class="w-16 h-4 bg-gray-200 rounded"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Loaded state -->
+      <div class="{{loaded}} min-w-0">
+        <a class="block w-full bg-white shadow-md rounded-lg overflow-hidden">
+          <div class="relative w-full h-64 bg-gray-200 bg-[url('/images/placeholder.jpg')] bg-cover bg-center">
+            <img
+              src="{{item.thumbnail_url}}"
+              alt="For Sale"
+              loading="lazy"
+              class="block w-full h-full object-cover"
+            />
+
+            <div class="absolute top-2 left-2 bg-black/70 text-white px-2 py-1 rounded text-xs">
+              {{item.listing_status}}
+            </div>
+            <div class="absolute bottom-2 right-2 bg-white/80 text-gray-800 px-2 py-1 rounded text-xs">
+              MLS® {{item.display_mlsnumber}}
+            </div>
+          </div>
+
+          <div class="p-4">
+            <h4 class="text-xl font-bold text-gray-800">{{item.listing_price}}</h4>
+            <div class="text-gray-600 mt-1 truncate">
+              {{item.display_address}}
+            </div>
+            <div class="flex gap-4 mt-2 text-sm text-gray-700">
+              {{{#if {"cond": "item.total_bedrooms > 0"}}}}
+                <span>{{item.total_bedrooms}} Beds</span>
+              {{{/if}}}
+              {{{#if {"cond": "item.total_bathrooms > 0"}}}}
+                <span>{{item.total_bathrooms}} Baths</span>
+              {{{/if}}}
+              {{{#if {"cond": "item.property_type == 'ranch'"}}}}
+                <span>{{item.acres}} Acres</span>
+              {{{#else}}}
+                {{{#if {"cond": "item.square_feet > 0"}}}}
+                  <span>{{item.square_feet}} Sq.Ft.</span>
+                {{{/if}}}
+              {{{/if}}}
+            </div>
+          </div>
+        </a>
+      </div>
+
+    {{{/array}}}
+  </div>
+
+  <div class="max-w-7xl mx-auto px-4 py-4 text-center">
+    <a
+      href="{{{#text {"field": "buttonURL", "value": "" }}}}"
+      class="inline-flex items-center justify-center rounded-lg px-5 py-3 text-sm font-semibold bg-white text-gray-900 ring-1 ring-gray-300 shadow hover:bg-gray-50 hover:shadow-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-gray-900 transition"
+    >
+      {{{#text {"field": "buttonText", "value": "View More" }}}}
+    </a>
+  </div>
+</section>