[
  {
    "id": "t1-hero",
    "name": "Business Hero",
    "desc": "Full-width gradient hero with headline, tagline and dual CTA buttons.",
    "icon": "🏢",
    "category": "Hero",
    "html": "<section style=\"min-height:80vh;display:flex;align-items:center;background:linear-gradient(135deg,var(--c1,#4361ee) 0%,var(--c2,#10b981) 100%);color:#fff;\"><div class=\"container py-5\"><p style=\"font-size:.8rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;opacity:.75;margin-bottom:.5rem;\">Welcome to</p><h1 style=\"font-size:clamp(2rem,5vw,3.8rem);font-weight:800;line-height:1.15;margin-bottom:1rem;\">{{PORTAL_NAME}}</h1><p style=\"font-size:1.1rem;opacity:.85;max-width:580px;margin-bottom:2rem;\">{{PORTAL_TAGLINE}}</p><a href=\"#\" class=\"btn btn-light btn-lg px-4 me-3\" style=\"border-radius:50px;font-weight:700;color:var(--c1,#4361ee);\">Get Started</a><a href=\"#\" class=\"btn btn-outline-light btn-lg px-4\" style=\"border-radius:50px;font-weight:600;\">Learn More</a></div></section>"
  },
  {
    "id": "t1-about",
    "name": "About — Image + Text",
    "desc": "Two-column layout with a photo on the left and descriptive text on the right.",
    "icon": "ℹ️",
    "category": "About",
    "html": "<section style=\"padding:80px 0;background:#f9f9fb;\"><div class=\"container\"><div class=\"row g-5 align-items-center\"><div class=\"col-lg-5\"><img src=\"https://images.unsplash.com/photo-1497366412874-3415097a27e7?w=800&auto=format&fit=crop&q=80\" class=\"img-fluid\" style=\"border-radius:14px;width:100%;height:360px;object-fit:cover;\" alt=\"About\"></div><div class=\"col-lg-7\"><p style=\"font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c1,#4361ee);margin-bottom:.5rem;\">Our Story</p><h2 style=\"font-size:2rem;font-weight:800;margin-bottom:1rem;\">About Our Organisation</h2><p>We are a dedicated team committed to excellence. Our work spans many areas and we pride ourselves on quality, reliability and delivering real value.</p><p>Founded with a clear mission, we continue to grow and serve our community with professionalism and integrity.</p><a href=\"#\" style=\"display:inline-block;margin-top:1.2rem;padding:11px 28px;background:var(--c1,#4361ee);color:#fff;border-radius:50px;font-weight:700;text-decoration:none;\">Learn More</a></div></div></div></section>"
  },
  {
    "id": "t1-services",
    "name": "Services — 4 Cards",
    "desc": "Four service/feature cards in a responsive grid with icon, title and description.",
    "icon": "⚡",
    "category": "Services",
    "html": "<section style=\"padding:80px 0;\"><div class=\"container\"><p style=\"font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c1,#4361ee);text-align:center;margin-bottom:.4rem;\">What We Do</p><h2 style=\"font-size:2rem;font-weight:800;text-align:center;margin-bottom:2.5rem;\">Our Services</h2><div class=\"row g-4\"><div class=\"col-md-3 col-sm-6\"><div style=\"background:#fff;border:1.5px solid #eef0f6;border-radius:12px;padding:28px 20px;text-align:center;height:100%;transition:all .2s;\"><div style=\"font-size:2.2rem;margin-bottom:14px;\">🎯</div><h5 style=\"font-weight:700;margin-bottom:8px;\">Service One</h5><p style=\"font-size:.875rem;color:#6b7280;\">Brief description of this service and how it benefits your clients or community.</p></div></div><div class=\"col-md-3 col-sm-6\"><div style=\"background:#fff;border:1.5px solid #eef0f6;border-radius:12px;padding:28px 20px;text-align:center;height:100%;\"><div style=\"font-size:2.2rem;margin-bottom:14px;\">💡</div><h5 style=\"font-weight:700;margin-bottom:8px;\">Service Two</h5><p style=\"font-size:.875rem;color:#6b7280;\">Brief description of this service and how it benefits your clients or community.</p></div></div><div class=\"col-md-3 col-sm-6\"><div style=\"background:#fff;border:1.5px solid #eef0f6;border-radius:12px;padding:28px 20px;text-align:center;height:100%;\"><div style=\"font-size:2.2rem;margin-bottom:14px;\">🚀</div><h5 style=\"font-weight:700;margin-bottom:8px;\">Service Three</h5><p style=\"font-size:.875rem;color:#6b7280;\">Brief description of this service and how it benefits your clients or community.</p></div></div><div class=\"col-md-3 col-sm-6\"><div style=\"background:#fff;border:1.5px solid #eef0f6;border-radius:12px;padding:28px 20px;text-align:center;height:100%;\"><div style=\"font-size:2.2rem;margin-bottom:14px;\">🔒</div><h5 style=\"font-weight:700;margin-bottom:8px;\">Service Four</h5><p style=\"font-size:.875rem;color:#6b7280;\">Brief description of this service and how it benefits your clients or community.</p></div></div></div></div></section>"
  },
  {
    "id": "t1-stats",
    "name": "Stats Band",
    "desc": "Dark coloured stats strip with four key numbers.",
    "icon": "📊",
    "category": "Stats",
    "html": "<section style=\"background:var(--c1,#4361ee);color:#fff;padding:60px 0;\"><div class=\"container\"><div class=\"row g-4 text-center\"><div class=\"col-6 col-md-3\"><div style=\"font-size:2.8rem;font-weight:800;line-height:1;\">500+</div><div style=\"opacity:.8;margin-top:4px;font-size:.9rem;\">Projects Done</div></div><div class=\"col-6 col-md-3\"><div style=\"font-size:2.8rem;font-weight:800;line-height:1;\">12</div><div style=\"opacity:.8;margin-top:4px;font-size:.9rem;\">Years Experience</div></div><div class=\"col-6 col-md-3\"><div style=\"font-size:2.8rem;font-weight:800;line-height:1;\">98%</div><div style=\"opacity:.8;margin-top:4px;font-size:.9rem;\">Client Satisfaction</div></div><div class=\"col-6 col-md-3\"><div style=\"font-size:2.8rem;font-weight:800;line-height:1;\">24/7</div><div style=\"opacity:.8;margin-top:4px;font-size:.9rem;\">Support Available</div></div></div></div></section>"
  },
  {
    "id": "t1-team",
    "name": "Team Grid",
    "desc": "Three team member cards with avatar initial, name and role.",
    "icon": "👥",
    "category": "People",
    "html": "<section style=\"padding:80px 0;background:#f9f9fb;\"><div class=\"container\"><p style=\"font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c1,#4361ee);text-align:center;margin-bottom:.4rem;\">Our People</p><h2 style=\"font-size:2rem;font-weight:800;text-align:center;margin-bottom:2.5rem;\">Meet the Team</h2><div class=\"row g-4 justify-content-center\"><div class=\"col-md-4 col-sm-6\"><div style=\"background:#fff;border-radius:14px;padding:32px 20px;text-align:center;box-shadow:0 2px 16px rgba(0,0,0,.06);\"><div style=\"width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--c1,#4361ee),var(--c2,#10b981));margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;font-weight:800;\">A</div><h5 style=\"font-weight:700;margin-bottom:4px;\">Team Member</h5><p style=\"color:#6b7280;font-size:.85rem;margin:0;\">Designation</p></div></div><div class=\"col-md-4 col-sm-6\"><div style=\"background:#fff;border-radius:14px;padding:32px 20px;text-align:center;box-shadow:0 2px 16px rgba(0,0,0,.06);\"><div style=\"width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--c1,#4361ee),var(--c2,#10b981));margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;font-weight:800;\">B</div><h5 style=\"font-weight:700;margin-bottom:4px;\">Team Member</h5><p style=\"color:#6b7280;font-size:.85rem;margin:0;\">Designation</p></div></div><div class=\"col-md-4 col-sm-6\"><div style=\"background:#fff;border-radius:14px;padding:32px 20px;text-align:center;box-shadow:0 2px 16px rgba(0,0,0,.06);\"><div style=\"width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--c1,#4361ee),var(--c2,#10b981));margin:0 auto 16px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.8rem;font-weight:800;\">C</div><h5 style=\"font-weight:700;margin-bottom:4px;\">Team Member</h5><p style=\"color:#6b7280;font-size:.85rem;margin:0;\">Designation</p></div></div></div></div></section>"
  },
  {
    "id": "t1-contact",
    "name": "Contact Section",
    "desc": "Two-column contact: info on the left, enquiry form on the right.",
    "icon": "📞",
    "category": "Contact",
    "html": "<section style=\"padding:80px 0;\"><div class=\"container\"><div class=\"row g-5\"><div class=\"col-lg-5\"><p style=\"font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c1,#4361ee);margin-bottom:.4rem;\">Reach Out</p><h2 style=\"font-size:2rem;font-weight:800;margin-bottom:1rem;\">Contact Us</h2><p>We would love to hear from you. Reach out through any of the channels below.</p><p style=\"margin-top:1.2rem;\"><strong>📍</strong> {{CONTACT_ADDRESS}}</p><p><strong>📞</strong> {{CONTACT_PHONE}}</p><p><strong>✉️</strong> {{CONTACT_EMAIL}}</p></div><div class=\"col-lg-7\"><div style=\"background:#fff;border:1.5px solid #eef0f6;border-radius:14px;padding:32px;\"><input type=\"text\" class=\"form-control mb-3\" placeholder=\"Your Name\"><input type=\"email\" class=\"form-control mb-3\" placeholder=\"Email Address\"><input type=\"text\" class=\"form-control mb-3\" placeholder=\"Subject\"><textarea class=\"form-control mb-3\" rows=\"4\" placeholder=\"Your Message\"></textarea><button style=\"width:100%;padding:12px;background:var(--c1,#4361ee);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:.95rem;cursor:pointer;\">Send Message</button></div></div></div></div></section>"
  }
]