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="py-20 md:py-28 bg-gray-900 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-96 h-96 bg-[#11999e]/10 rounded-full blur-3xl"></div>
                    <div class="absolute bottom-0 left-0 w-80 h-80 bg-[#0c6c70]/10 rounded-full blur-3xl"></div>
                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                        <div class="text-center max-w-4xl mx-auto mb-16">
                            <div class="inline-flex items-center gap-2 px-4 py-2 bg-red-500/20 rounded-full text-red-400 text-sm font-medium mb-6">
                                <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-shield-check w-4 h-4" aria-hidden="true">
                                    <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                                    <path d="m9 12 2 2 4-4"></path>
                                </svg>Your Privacy Matters
                            </div>
                            <h2 class="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6 leading-tight">Other Apps <span class="text-red-400">Sell Your Data</span> or Charge <span class="text-[#11999e]"> Outrageous Prices</span>
                            </h2>
                            <p class="text-xl text-gray-300 leading-relaxed">Most co-parenting apps profit from selling your sensitive family information to advertisers, or lock essential features behind expensive paywalls. <span class="text-white font-semibold">CoParent Pilot is different.</span>
                            </p>
                        </div>
                        <div class="grid md:grid-cols-2 gap-8 mb-16">
                            <div class="bg-gray-800/50 backdrop-blur-sm rounded-2xl p-8 border border-gray-700/50">
                                <div class="flex items-center gap-3 mb-6">
                                    <div class="w-12 h-12 bg-red-500/20 rounded-xl 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-x w-6 h-6 text-red-400" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m15 9-6 6"></path>
                                            <path d="m9 9 6 6"></path>
                                        </svg>
                                    </div>
                                    <h3 class="text-xl font-semibold text-gray-300">Other Co-Parenting Apps</h3>
                                </div>
                                <ul class="space-y-4">
                                    <li class="flex items-start gap-3">
                                        <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-x w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m15 9-6 6"></path>
                                            <path d="m9 9 6 6"></path>
                                        </svg>
                                        <span class="text-gray-400">Sell your personal data to third parties</span>
                                    </li>
                                    <li class="flex items-start gap-3">
                                        <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-x w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m15 9-6 6"></path>
                                            <path d="m9 9 6 6"></path>
                                        </svg>
                                        <span class="text-gray-400">Charge $15-30/month for basic features</span>
                                    </li>
                                    <li class="flex items-start gap-3">
                                        <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-x w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m15 9-6 6"></path>
                                            <path d="m9 9 6 6"></path>
                                        </svg>
                                        <span class="text-gray-400">Bloated software with confusing interfaces</span>
                                    </li>
                                    <li class="flex items-start gap-3">
                                        <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-x w-5 h-5 text-red-400 mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m15 9-6 6"></path>
                                            <path d="m9 9 6 6"></path>
                                        </svg>
                                        <span class="text-gray-400">Hidden fees and upsells</span>
                                    </li>
                                </ul>
                            </div>
                            <div class="bg-gradient-to-br from-[#11999e]/20 to-[#0c6c70]/20 backdrop-blur-sm rounded-2xl p-8 border border-[#11999e]/30">
                                <div class="flex items-center gap-3 mb-6">
                                    <div class="w-12 h-12 bg-[#11999e]/30 rounded-xl 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-6 h-6 text-[#11999e]" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                    </div>
                                    <h3 class="text-xl font-semibold text-white">CoParent Pilot</h3>
                                </div>
                                <ul class="space-y-4">
                                    <li class="flex items-start gap-3">
                                        <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-5 h-5 text-[#11999e] mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                        <span class="text-gray-200">Truly free core features - no hidden costs</span>
                                    </li>
                                    <li class="flex items-start gap-3">
                                        <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-5 h-5 text-[#11999e] mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                        <span class="text-gray-200">Your data is never sold. Period.</span>
                                    </li>
                                    <li class="flex items-start gap-3">
                                        <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-5 h-5 text-[#11999e] mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                        <span class="text-gray-200">Simple, focused tools for co-parenting</span>
                                    </li>
                                    <li class="flex items-start gap-3">
                                        <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-5 h-5 text-[#11999e] mt-0.5 flex-shrink-0" aria-hidden="true">
                                            <circle cx="12" cy="12" r="10"></circle>
                                            <path d="m9 12 2 2 4-4"></path>
                                        </svg>
                                        <span class="text-gray-200">Bank-level encryption on all communications</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="bg-gray-800/30 backdrop-blur-sm rounded-2xl p-8 md:p-12 border border-gray-700/50 mb-12">
                            <div class="grid md:grid-cols-2 gap-8 items-center">
                                <div>
                                    <div class="inline-flex items-center gap-2 px-3 py-1.5 bg-[#11999e]/20 rounded-full text-[#11999e] text-sm font-medium mb-4">
                                        <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-scale w-4 h-4" aria-hidden="true">
                                            <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path>
                                            <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path>
                                            <path d="M7 21h10"></path>
                                            <path d="M12 3v18"></path>
                                            <path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path>
                                        </svg>Litigation Ready
                                    </div>
                                    <h3 class="text-2xl md:text-3xl font-bold text-white mb-4">When Co-Parenting Becomes Litigation</h3>
                                    <p class="text-gray-300 leading-relaxed mb-6">If you find yourself in a legal situation, CoParent Pilot ensures you and your counsel stay connected. Securely share documents, export court-ready reports, and keep all communication documented and timestamped.</p>
                                    <div class="flex flex-wrap gap-4">
                                        <div class="flex items-center gap-2 text-gray-300">
                                            <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-lock w-5 h-5 text-[#11999e]" aria-hidden="true">
                                                <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
                                                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                            </svg>
                                            <span>Secure attorney portal</span>
                                        </div>
                                        <div class="flex items-center gap-2 text-gray-300">
                                            <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-shield-check w-5 h-5 text-[#11999e]" aria-hidden="true">
                                                <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                                                <path d="m9 12 2 2 4-4"></path>
                                            </svg>
                                            <span>Court-admissible records</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="flex justify-center">
                                    <div class="relative">
                                        <div class="w-48 h-48 md:w-56 md:h-56 bg-gradient-to-br from-[#11999e] to-[#0c6c70] rounded-full 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-scale w-20 h-20 md:w-24 md:h-24 text-white" aria-hidden="true">
                                                <path d="m16 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path>
                                                <path d="m2 16 3-8 3 8c-.87.65-1.92 1-3 1s-2.13-.35-3-1Z"></path>
                                                <path d="M7 21h10"></path>
                                                <path d="M12 3v18"></path>
                                                <path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2"></path>
                                            </svg>
                                        </div>
                                        <div class="absolute -top-2 -right-2 w-16 h-16 bg-white rounded-xl shadow-lg 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-lock w-8 h-8 text-[#0c6c70]" aria-hidden="true">
                                                <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
                                                <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                                            </svg>
                                        </div>
                                        <div class="absolute -bottom-2 -left-2 w-16 h-16 bg-white rounded-xl shadow-lg 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-shield-check w-8 h-8 text-[#0c6c70]" aria-hidden="true">
                                                <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"></path>
                                                <path d="m9 12 2 2 4-4"></path>
                                            </svg>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-center">
                            <div class="inline-block bg-gradient-to-r from-[#11999e]/20 via-[#11999e]/10 to-[#11999e]/20 rounded-2xl p-8 md:p-10 border border-[#11999e]/20">
                                <div class="flex items-center justify-center gap-2 mb-4">
                                    <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-dollar-sign w-6 h-6 text-[#11999e]" aria-hidden="true">
                                        <line x1="12" x2="12" y1="2" y2="22"></line>
                                        <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
                                    </svg>
                                    <span class="text-[#11999e] font-semibold">100% Free to Start</span>
                                </div>
                                <h3 class="text-2xl md:text-3xl font-bold text-white mb-4">Don't Let Your Data Get Sold</h3>
                                <p class="text-gray-300 mb-6 max-w-xl mx-auto">Use our secure and free communication platform. Your family's privacy is not for sale.</p>
                                <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 h-10 rounded-md bg-[#11999e] hover:bg-[#0c6c70] text-white shadow-xl shadow-[#11999e]/20 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>
                            </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/2/deleteDelete

HTML Preview template context + slot

Preview Template Preview Slot