Edit Template

Template Metadata

Key Name

Header HTML

<header class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16 md:h-20">
                <a href="/" class="flex items-center group">
                    <img alt="CoParent Pilot" class="h-12 md:h-14 w-auto object-contain" src="/assets/images/logo-black.png">
                </a>
                <nav class="hidden md:flex items-center gap-8">
                    <a href="#features" class="text-gray-600 hover:text-[#11999e] font-medium transition-colors duration-200 relative after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-[#11999e] hover:after:w-full after:transition-all after:duration-300">Features</a>
                    <a href="#how-it-works" class="text-gray-600 hover:text-[#11999e] font-medium transition-colors duration-200 relative after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-[#11999e] hover:after:w-full after:transition-all after:duration-300">How It Works</a>
                    <a href="#pricing" class="text-gray-600 hover:text-[#11999e] font-medium transition-colors duration-200 relative after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-[#11999e] hover:after:w-full after:transition-all after:duration-300">Pricing</a>
                    <a href="#faq" class="text-gray-600 hover:text-[#11999e] font-medium transition-colors duration-200 relative after:absolute after:bottom-0 after:left-0 after:w-0 after:h-0.5 after:bg-[#11999e] hover:after:w-full after:transition-all after:duration-300">FAQ</a>
                </nav>
                <div class="hidden md:flex items-center gap-3">
                    <a id="hero-login-button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm 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-9 px-4 py-2 text-gray-600 hover:text-[#11999e] hover:bg-[#11999e]/10" href="/login">Sign In</a>
                    <a class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm 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-9 px-4 py-2 bg-[#11999e] hover:bg-[#0c6c70] text-white shadow-lg shadow-[#11999e]/20 hover:shadow-[#11999e]/40 transition-all duration-300" href="/register/step1">
                        Get Started Free</a>
                </div>
                <button class="md:hidden p-2 text-gray-600 hover:text-[#11999e] transition-colors">
                    <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-menu w-6 h-6" aria-hidden="true">
                        <path d="M4 12h16"></path>
                        <path d="M4 18h16"></path>
                        <path d="M4 6h16"></path>
                    </svg>
                </button>
            </div>
        </div>
    </header>

Raw HTML. Used for meta tags, stylesheets, scripts, etc.

Body Grid

Container classes Columns Gap classes

Grid Areas

Areas define named slots (e.g. main, sidebar) used by the page builder.

Advanced: Raw Body Grid JSON

Footer HTML

<footer class="bg-gray-900 text-gray-300">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="py-12 md:py-16 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 lg:gap-12">
                <div class="col-span-2 md:col-span-3 lg:col-span-2">
                    <a href="/" class="flex items-center mb-6">
                        <img alt="CoParent Pilot" class="h-14 w-auto object-contain" src="https://customer-assets.emergentagent.com/job_coparent-connect-3/artifacts/pe8jnvhd_coparent%20pilot%20white%20on%20tealFINAL.png">
                    </a>
                    <p class="text-gray-400 mb-6 max-w-sm leading-relaxed">The trusted platform for co-parents to communicate, coordinate, and collaborate in raising their children together.</p>
                    <div class="space-y-3">
                        <a href="mailto:support@coparentpilot.com" class="flex items-center gap-3 text-gray-400 hover:text-[#11999e] transition-colors">
                            <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-mail w-4 h-4" aria-hidden="true">
                                <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
                                <rect x="2" y="4" width="20" height="16" rx="2"></rect>
                            </svg>
                            <span class="text-sm">support@coparentpilot.com</span>
                        </a>
                        <a href="tel:+18001234567" class="flex items-center gap-3 text-gray-400 hover:text-[#11999e] transition-colors">
                            <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-phone w-4 h-4" aria-hidden="true">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                            </svg>
                            <span class="text-sm">1-800-123-4567</span>
                        </a>
                        <div class="flex items-center gap-3 text-gray-400">
                            <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-map-pin w-4 h-4" aria-hidden="true">
                                <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"></path>
                                <circle cx="12" cy="10" r="3"></circle>
                            </svg>
                            <span class="text-sm">San Francisco, CA</span>
                        </div>
                    </div>
                </div>
                <div>
                    <h4 class="font-semibold text-white mb-4">Product</h4>
                    <ul class="space-y-3">
                        <li>
                            <a href="#features" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Features</a>
                        </li>
                        <li>
                            <a href="#pricing" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Pricing</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Security</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Integrations</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-white mb-4">Company</h4>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">About Us</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Careers</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Blog</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Press</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-white mb-4">Resources</h4>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Documentation</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Help Center</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Community</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Webinars</a>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-white mb-4">Legal</h4>
                    <ul class="space-y-3">
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Privacy Policy</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Terms of Service</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">Cookie Policy</a>
                        </li>
                        <li>
                            <a href="#" class="text-gray-400 hover:text-[#11999e] transition-colors text-sm">GDPR</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="py-6 border-t border-gray-800 flex flex-col md:flex-row items-center justify-between gap-4">
                <p class="text-gray-500 text-sm">© 2025 CoParent Pilot. All rights reserved.</p>
                <div class="flex items-center gap-4">
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-[#11999e] rounded-lg flex items-center justify-center transition-colors duration-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-facebook w-4 h-4" aria-hidden="true">
                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
                        </svg>
                    </a>
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-[#11999e] rounded-lg flex items-center justify-center transition-colors duration-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-twitter w-4 h-4" aria-hidden="true">
                            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
                        </svg>
                    </a>
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-[#11999e] rounded-lg flex items-center justify-center transition-colors duration-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-linkedin w-4 h-4" aria-hidden="true">
                            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
                            <rect width="4" height="12" x="2" y="9"></rect>
                            <circle cx="4" cy="4" r="2"></circle>
                        </svg>
                    </a>
                    <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-[#11999e] rounded-lg flex items-center justify-center transition-colors duration-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-instagram w-4 h-4" aria-hidden="true">
                            <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
                            <line x1="17.5" x2="17.51" y1="6.5" y2="6.5"></line>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </footer>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>

Cancel