Edit Section

About Sections

Reusable content block. Editing content affects every page using it.

Placement (slot/order) is handled per page in the Page Builder.

Use the preview on the right for instant feedback.

Section Fields

Type Key (optional) Template override (optional)

This is stored on the section. Preview selection is separate.

Content (HTML)

<section class="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
                    <div class="absolute inset-0 bg-gradient-to-b from-[#11999e]/5 to-white -z-10"></div>
                    <div class="absolute top-20 right-0 w-[500px] h-[500px] bg-[#11999e]/10 rounded-full blur-3xl -z-10"></div>
                    <div class="absolute bottom-0 left-0 w-[400px] h-[400px] bg-[#e6e6e6]/50 rounded-full blur-3xl -z-10"></div>
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                        <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
                            <div class="text-left">
                                <div class="inline-flex items-center gap-2 px-4 py-2 bg-[#11999e]/15 rounded-full text-[#0c6c70] text-sm font-medium mb-6 animate-in fade-in slide-in-from-bottom-4 duration-500">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-4 h-4" aria-hidden="true">
                                        <circle cx="12" cy="12" r="10"></circle>
                                        <path d="m9 12 2 2 4-4"></path>
                                    </svg>Trusted by 50,000+ families
                                </div>
                                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight mb-6 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-100">Co-Parenting Made <span class="text-[#11999e] block mt-2">Simple &amp; Secure</span>
                                </h1>
                                <p class="text-lg md:text-xl text-gray-600 mb-8 leading-relaxed max-w-xl animate-in fade-in slide-in-from-bottom-4 duration-500 delay-200">The free platform that helps separated parents communicate effectively, share schedules, and keep everything documented for peace of mind.</p>
                                <div class="flex flex-col sm:flex-row gap-4 mb-10 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-300">
                                    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 h-10 rounded-md bg-[#11999e] hover:bg-[#0c6c70] text-white shadow-xl shadow-[#11999e]/20 hover:shadow-[#11999e]/40 transition-all duration-300 group text-base px-8">Start Free Today <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" aria-hidden="true">
                                        <path d="M5 12h14"></path>
                                        <path d="m12 5 7 7-7 7"></path>
                                    </svg>
                                    </button>
                                    <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 border shadow-sm hover:text-accent-foreground h-10 rounded-md border-gray-300 text-gray-700 hover:bg-gray-50 group text-base px-8">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play w-5 h-5 mr-2 text-[#11999e]" aria-hidden="true">
                                            <polygon points="6 3 20 12 6 21 6 3"></polygon>
                                        </svg>Watch Demo </button>
                                </div>
                                <div class="flex items-center gap-6 text-sm text-gray-500 animate-in fade-in slide-in-from-bottom-4 duration-500 delay-400">
                                    <div class="flex items-center gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-4 h-4 text-[#11999e]" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                        <span>No credit card required</span>
                                    </div>
                                    <div class="flex items-center gap-2">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-4 h-4 text-[#11999e]" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                        <span>Court-approved</span>
                                    </div>
                                </div>
                            </div>
                            <div class="relative animate-in fade-in slide-in-from-right-8 duration-700 delay-200">
                                <div class="relative bg-white rounded-2xl shadow-2xl shadow-gray-200/50 border border-gray-100 p-6 lg:p-8">
                                    <div class="flex items-center justify-between mb-6">
                                        <div>
                                            <h3 class="font-semibold text-gray-800">Shared Calendar</h3>
                                            <p class="text-sm text-gray-500">August 2025</p>
                                        </div>
                                        <div class="flex gap-2">
                                            <div class="w-8 h-8 rounded-full bg-[#11999e]/20 flex items-center justify-center text-xs font-semibold text-[#0c6c70]">SM</div>
                                            <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center text-xs font-semibold text-white">MT</div>
                                        </div>
                                    </div>
                                    <div class="grid grid-cols-7 gap-1 mb-4">
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">S</div>
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">M</div>
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">T</div>
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">W</div>
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">T</div>
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">F</div>
                                        <div class="text-center text-xs font-medium text-gray-400 py-2">S</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">1</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">2</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">3</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">4</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">5</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">6</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">7</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">8</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">9</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">10</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">11</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">12</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">13</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">14</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">15</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">16</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">17</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">18</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">19</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">20</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">21</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">22</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">23</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">24</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">25</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">26</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">27</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#11999e]/20 text-[#0c6c70] font-medium">28</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">29</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors bg-[#e6e6e6] text-gray-700">30</div>
                                        <div class="text-center py-2 text-sm rounded-lg transition-colors text-gray-600 hover:bg-gray-50">31</div>
                                    </div>
                                    <div class="space-y-2">
                                        <div class="flex items-center gap-3 p-3 bg-[#11999e]/10 rounded-lg border border-[#11999e]/20">
                                            <div class="w-2 h-2 rounded-full bg-[#11999e]"></div>
                                            <span class="text-sm text-gray-700">Soccer Practice - 4:00 PM</span>
                                        </div>
                                        <div class="flex items-center gap-3 p-3 bg-[#e6e6e6] rounded-lg border border-gray-200">
                                            <div class="w-2 h-2 rounded-full bg-gray-500"></div>
                                            <span class="text-sm text-gray-700">Dentist Appointment - 10:00 AM</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="absolute -top-4 -left-4 bg-white rounded-xl shadow-lg p-3 border border-gray-100 animate-bounce-slow">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-check w-4 h-4 text-green-600" aria-hidden="true">
                                                <circle cx="12" cy="12" r="10"></circle>
                                                <path d="m9 12 2 2 4-4"></path>
                                            </svg>
                                        </div>
                                        <span class="text-sm font-medium text-gray-700">Schedule synced</span>
                                    </div>
                                </div>
                                <div class="absolute -bottom-4 -right-4 bg-white rounded-xl shadow-lg p-3 border border-gray-100">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 rounded-full bg-[#11999e]/20 flex items-center justify-center">
                                            <span class="text-xs font-bold text-[#0c6c70]">3</span>
                                        </div>
                                        <span class="text-sm font-medium text-gray-700">New messages</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="mt-20 pt-12 border-t border-gray-100">
                            <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                                <div class="text-center animate-in fade-in slide-in-from-bottom-4 duration-500" style="animation-delay: 0ms;">
                                    <div class="text-3xl md:text-4xl font-bold text-gray-900 mb-1">50,000+</div>
                                    <div class="text-gray-500 text-sm">Families Helped</div>
                                </div>
                                <div class="text-center animate-in fade-in slide-in-from-bottom-4 duration-500" style="animation-delay: 100ms;">
                                    <div class="text-3xl md:text-4xl font-bold text-gray-900 mb-1">2M+</div>
                                    <div class="text-gray-500 text-sm">Messages Sent</div>
                                </div>
                                <div class="text-center animate-in fade-in slide-in-from-bottom-4 duration-500" style="animation-delay: 200ms;">
                                    <div class="text-3xl md:text-4xl font-bold text-gray-900 mb-1">99.9%</div>
                                    <div class="text-gray-500 text-sm">Uptime</div>
                                </div>
                                <div class="text-center animate-in fade-in slide-in-from-bottom-4 duration-500" style="animation-delay: 300ms;">
                                    <div class="text-3xl md:text-4xl font-bold text-gray-900 mb-1">4.9/5</div>
                                    <div class="text-gray-500 text-sm">User Rating</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

HTML is rendered as-is. Preview updates live as you type.

Content (JSON) — optional

Structured data for advanced rendering. Avoid placement info here.

/sectionsCancel /sections/1/deleteDelete

HTML Preview template context + slot

Preview Template Preview Slot