Live Previews

Widget & Component Demo

Explore all the interactive widgets available for your website. Each section below shows a working example.

Carousel / Slider

Image Carousel

Image galleries, testimonial sliders, event highlights with auto-populated navigation dots.

Slide One

Beautiful park views in Seven Trees

Slide Two

Community events and gatherings

Slide Three

Neighborhood improvement projects

/
⚙️ How it works: Uses data-landingsite-carousel, data-landingsite-carousel-item, data-landingsite-carousel-controls-left/right, data-landingsite-carousel-current-index, data-landingsite-carousel-length, and data-landingsite-carousel-controls-index attributes. Navigation dots auto-populate.
FAQ Accordion

Frequently Asked Questions

What is the Seven Trees Neighborhood Association?

When are the community meetings?

Who can attend events?

⚙️ How it works: Uses data-landingsite-faq, data-landingsite-faq-item, data-landingsite-faq-question, and data-landingsite-faq-answer attributes. Chevron icon auto-rotates when open.
Contact Form

Contact Form

Submissions are automatically sent to your account email. Fully functional without any backend setup.

⚙️ How it works: Uses data-landingsite-contact-form on the form, name attributes on all inputs, and a button type="submit". Submissions go to your account email automatically.
Embedded Map / Iframe

Embedded Content

Google Maps, YouTube videos, Calendly, Google Forms, and other third-party embeds.

⚙️ How it works: Simply use a standard <iframe> tag. Works with any embeddable content — maps, videos, forms, scheduling tools, and more.
Scroll Animations

Scroll-Triggered Animations

Elements fade in, slide up, or zoom in as the user scrolls down the page.

Fade Up

This card slides up and fades in as you scroll to it.

Staggered Entry

Cards animate with staggered delays for a cascading effect.

Smooth & Natural

Uses Intersection Observer for smooth, performant animations.

⚙️ How it works: Requires JavaScript with Intersection Observer API. Elements start with opacity-0 translate-y-8 classes and a scroll-reveal marker class. JS removes hidden classes when elements scroll into view.

Want any of these on your site?

Just tell me which widget you'd like and where to put it — I'll add it to your live pages in seconds!

Back to Homepage