Choir Website Design & Development | Choir Web Design<\/title>\r\n <meta\r\n name=\"description\"\r\n content=\"Choir Web Design builds high-converting websites for choirs and vocal ensembles. Fill auditions, sell concert tickets, and attract sponsors with a choir-specific digital stage.\"\r\n \/>\r\n <link rel=\"canonical\" href=\"https:\/\/choirweb.design\/\" \/>\r\n\r\n \r\n <meta name=\"robots\" content=\"index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1\" \/>\r\n <meta name=\"googlebot\" content=\"index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1\" \/>\r\n\r\n \r\n <link rel=\"icon\" href=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\" \/>\r\n <meta name=\"theme-color\" content=\"#050816\" \/>\r\n <meta name=\"application-name\" content=\"Choir Web Design\" \/>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/cdn.tailwindcss.com\" crossorigin \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Shadow-scaled.jpg\" \/>\r\n\r\n \r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:site_name\" content=\"Choir Web Design\" \/>\r\n <meta property=\"og:url\" content=\"https:\/\/choirweb.design\/\" \/>\r\n <meta property=\"og:title\" content=\"Choir Website Design & Development | Choir Web Design\" \/>\r\n <meta\r\n property=\"og:description\"\r\n content=\"Websites built exclusively for choirs: fill auditions, sell tickets, and make sponsors feel proud to support you.\"\r\n \/>\r\n <meta property=\"og:image\" content=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg\" \/>\r\n <meta property=\"og:image:alt\" content=\"Choir Web Design \u2013 websites built exclusively for choirs\" \/>\r\n\r\n \r\n <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n <meta name=\"twitter:title\" content=\"Choir Website Design & Development | Choir Web Design\" \/>\r\n <meta\r\n name=\"twitter:description\"\r\n content=\"Choir websites that recruit singers, sell tickets, and attract sponsors\u2014without you becoming a full-time marketer.\"\r\n \/>\r\n <meta name=\"twitter:image\" content=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg\" \/>\r\n <meta name=\"twitter:image:alt\" content=\"Choir Web Design \u2013 websites built exclusively for choirs\" \/>\r\n \r\n \r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@graph\": [\r\n {\r\n \"@type\": \"Organization\",\r\n \"@id\": \"https:\/\/choirweb.design\/#org\",\r\n \"name\": \"Choir Web Design\",\r\n \"url\": \"https:\/\/choirweb.design\/\",\r\n \"logo\": \"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\",\r\n \"image\": \"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\",\r\n \"email\": \"wecraftyourplace@choirweb.design\",\r\n \"sameAs\": [\r\n \"https:\/\/www.linkedin.com\/company\/choirwebdesign\",\r\n \"https:\/\/www.choirplace.com\/profile\/ChoirWebDesign\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2649\/finally-a-web-studio-built-only\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2661\/why-your-choir-isn-t-getting-eno\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2667\/you-could-be-losing-up-to-40-of\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2666\/you-could-be-losing-sponsors-on\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2665\/why-you-re-not-selling-as-many-c\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2656\/the-hidden-cost-of-a-bad-choir-w\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/finally-a-web-studio-built-only-for-choirs-and-a-free-website-checklist-to-start\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/why-your-choir-isnt-getting-enough-donations-and-exactly-how-to-fix-it\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/you-could-be-losing-sponsors-on-linkedin-key-moves-to-attract-them-even-if-you-dont-know-the-platform\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/why-youre-not-selling-as-many-concert-tickets-as-you-should-and-the-christmas-trick-that-fixes-it\"\r\n ]\r\n },\r\n {\r\n \"@type\": \"WebSite\",\r\n \"@id\": \"https:\/\/choirweb.design\/#website\",\r\n \"url\": \"https:\/\/choirweb.design\/\",\r\n \"name\": \"Choir Web Design\",\r\n \"publisher\": { \"@id\": \"https:\/\/choirweb.design\/#org\" },\r\n \"inLanguage\": \"en\"\r\n },\r\n {\r\n \"@type\": \"WebPage\",\r\n \"@id\": \"https:\/\/choirweb.design\/#home\",\r\n \"url\": \"https:\/\/choirweb.design\/\",\r\n \"name\": \"Choir Website Design & Development | Choir Web Design\",\r\n \"isPartOf\": { \"@id\": \"https:\/\/choirweb.design\/#website\" },\r\n \"about\": { \"@id\": \"https:\/\/choirweb.design\/#org\" },\r\n \"inLanguage\": \"en\"\r\n },\r\n {\r\n \"@type\": \"Service\",\r\n \"@id\": \"https:\/\/choirweb.design\/#service\",\r\n \"name\": \"Choir Website Design & Development\",\r\n \"provider\": { \"@id\": \"https:\/\/choirweb.design\/#org\" },\r\n \"areaServed\": \"Worldwide\",\r\n \"serviceType\": [\r\n \"Choir website design\",\r\n \"WordPress development\",\r\n \"Conversion-focused copywriting\"\r\n ],\r\n \"hasOfferCatalog\": {\r\n \"@type\": \"OfferCatalog\",\r\n \"name\": \"Packages\",\r\n \"itemListElement\": [\r\n { \"@type\": \"Offer\", \"name\": \"Prelude\", \"url\": \"https:\/\/choirweb.design\/#pricing\" },\r\n { \"@type\": \"Offer\", \"name\": \"Symphony\", \"url\": \"https:\/\/choirweb.design\/#pricing\" },\r\n { \"@type\": \"Offer\", \"name\": \"Opera\", \"url\": \"https:\/\/choirweb.design\/#pricing\" }\r\n ]\r\n }\r\n }\r\n ]\r\n }\r\n <\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Belanosima:wght@400;600;700&family=Maven+Pro:wght@400;500;600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n dark: \"#050816\",\r\n darker: \"#02030a\",\r\n gold: \"#e4b23a\",\r\n goldSoft: \"#f0c966\"\r\n }\r\n },\r\n fontFamily: {\r\n display: [\"Belanosima\", \"system-ui\", \"sans-serif\"],\r\n body: [\"Maven Pro\", \"system-ui\", \"sans-serif\"]\r\n }\r\n }\r\n }\r\n };\r\n <\/script>\r\n\r\n \r\n <style>\r\n body {\r\n font-family: \"Maven Pro\", system-ui, sans-serif;\r\n background: radial-gradient(circle at top, #1b2640 0, #050816 40%, #02030a 100%);\r\n color: #f9fafb;\r\n }\r\n .glass {\r\n background: rgba(15, 23, 42, 0.85);\r\n border: 1px solid rgba(148, 163, 184, 0.35);\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n }\r\n .pill {\r\n border-radius: 999px;\r\n border: 1px solid rgba(148, 163, 184, 0.4);\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n .btn-primary {\r\n background-image: linear-gradient(135deg, #e4b23a, #f0c966);\r\n color: #020617;\r\n }\r\n .btn-primary:hover {\r\n filter: brightness(1.05);\r\n transform: translateY(-1px);\r\n }\r\n .btn-secondary {\r\n border: 1px solid rgba(148, 163, 184, 0.6);\r\n background: rgba(15, 23, 42, 0.7);\r\n color: #e5e7eb;\r\n }\r\n .btn-secondary:hover { background: rgba(15, 23, 42, 0.9); }\r\n .section { padding-top: 5rem; padding-bottom: 5rem; }\r\n .section-sm { padding-top: 3.5rem; padding-bottom: 3.5rem; }\r\n html { scroll-behavior: smooth; }\r\n <\/style>\r\n<\/head>\r\n\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Choir Web Design \u2013 We Craft Your Place<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Belanosima:wght@400;600;700&family=Maven+Pro:wght@400;500;600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n dark: \"#050816\",\r\n darker: \"#02030a\",\r\n gold: \"#e4b23a\",\r\n goldSoft: \"#f0c966\"\r\n }\r\n },\r\n fontFamily: {\r\n display: [\"Belanosima\", \"system-ui\", \"sans-serif\"],\r\n body: [\"Maven Pro\", \"system-ui\", \"sans-serif\"]\r\n }\r\n }\r\n }\r\n };\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n font-family: \"Maven Pro\", system-ui, sans-serif;\r\n background: radial-gradient(circle at top, #1b2640 0, #050816 40%, #02030a 100%);\r\n color: #f9fafb;\r\n }\r\n\r\n .glass {\r\n background: rgba(15, 23, 42, 0.85);\r\n border: 1px solid rgba(148, 163, 184, 0.35);\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n }\r\n\r\n .pill {\r\n border-radius: 999px;\r\n border: 1px solid rgba(148, 163, 184, 0.4);\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n\r\n .btn-primary {\r\n background-image: linear-gradient(135deg, #e4b23a, #f0c966);\r\n color: #020617;\r\n }\r\n\r\n .btn-primary:hover {\r\n filter: brightness(1.05);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .btn-secondary {\r\n border: 1px solid rgba(148, 163, 184, 0.6);\r\n background: rgba(15, 23, 42, 0.7);\r\n color: #e5e7eb;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n\r\n .section {\r\n padding-top: 5rem;\r\n padding-bottom: 5rem;\r\n }\r\n\r\n .section-sm {\r\n padding-top: 3.5rem;\r\n padding-bottom: 3.5rem;\r\n }\r\n\r\n @keyframes float-slow {\r\n 0% { transform: translateY(0); }\r\n 50% { transform: translateY(-8px); }\r\n 100% { transform: translateY(0); }\r\n }\r\n\r\n .float-slow {\r\n animation: float-slow 7s ease-in-out infinite;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-dark text-slate-50\">\r\n\r\n \r\n <nav class=\"fixed top-0 inset-x-0 z-40 bg-brand-dark\/80 backdrop-blur-xl border-b border-slate-800\/70\">\r\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-16\">\r\n <div class=\"flex items-center gap-3\">\r\n \r\n <div class=\"w-10 h-10 rounded-xl overflow-hidden flex items-center justify-center bg-transparent\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\"\r\n alt=\"Choir Web Design logo\"\r\n class=\"w-full h-full object-contain\"\r\n \/>\r\n<\/div>\r\n\r\n <div>\r\n <div class=\"font-display tracking-[0.24em] text-xs uppercase text-slate-300\">Choir Web Design<\/div>\r\n <div class=\"text-xs text-slate-500\">We craft your place<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden md:flex items-center gap-8 text-xs font-semibold tracking-[0.18em] uppercase\">\r\n <a href=\"#problem\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">The Struggle<\/a>\r\n <a href=\"#solution\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">The Solution<\/a>\r\n <a href=\"#plan\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">How It Works<\/a>\r\n <a href=\"#pricing\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">Packages<\/a>\r\n <a href=\"#cta-final\" class=\"btn-primary px-5 py-2 rounded-full text-[0.72rem] tracking-[0.2em] uppercase shadow-lg transition-all\">\r\n Get your digital stage\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <header id=\"top\" class=\"relative min-h-screen flex items-center justify-center overflow-hidden pt-20\">\r\n <div class=\"absolute inset-0 bg-[url('https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg')] bg-cover bg-center opacity-40\"><\/div>\r\n <div class=\"absolute inset-0 bg-[url('https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Shadow-scaled.jpg')] bg-cover bg-top mix-blend-multiply opacity-90\"><\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-black\/50 via-black\/40 to-black\/80\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-5xl mx-auto px-4 text-center space-y-8\">\r\n \r\n <div class=\"inline-flex items-center gap-3 pill px-4 py-2 text-[0.7rem] tracking-[0.25em] uppercase text-slate-300 mb-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-brand-gold animate-pulse\"><\/span>\r\n Websites that work as hard as your rehearsals\r\n <span class=\"w-2 h-2 rounded-full bg-brand-gold animate-pulse\"><\/span>\r\n <\/div>\r\n\r\n \r\n <h1 class=\"text-4xl sm:text-5xl md:text-6xl font-display leading-tight\">\r\n Most choirs sound extraordinary,\r\n <span class=\"block text-transparent bg-clip-text bg-gradient-to-r from-brand-gold to-amber-100\">\r\n but online they are almost invisible.\r\n <\/span>\r\n <\/h1>\r\n\r\n \r\n <p class=\"max-w-2xl mx-auto text-base sm:text-lg text-slate-200\">\r\n We design choir websites that fill auditions, sell tickets and convince sponsors\r\n <span class=\"font-semibold text-brand-gold\">without you becoming a full-time marketer.<\/span>\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mt-4\">\r\n <a\r\n href=\"#cta-final\"\r\n class=\"btn-primary inline-flex items-center justify-center px-8 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase shadow-lg transition-all\"\r\n >\r\n Book a free website review\r\n <\/a>\r\n <a\r\n href=\"#lead-magnet\"\r\n class=\"btn-secondary inline-flex items-center justify-center px-7 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase\"\r\n >\r\n Download the Choir Website Checklist\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <p class=\"max-w-xl mx-auto text-xs sm:text-sm text-slate-400 mt-4\">\r\n If your choir can\u2019t be found online, it\u2019s the same as rehearsing with the lights off.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <section id=\"problem\" class=\"section bg-brand-darker\/60\">\r\n <div class=\"max-w-5xl mx-auto px-4\">\r\n <div class=\"text-center mb-10\">\r\n <p class=\"text-xs tracking-[0.2em] uppercase text-brand-gold\">The Struggle<\/p>\r\n <h2 class=\"mt-3 text-3xl md:text-4xl font-display\">\r\n Without a strategic website, your choir quietly disappears.\r\n <\/h2>\r\n <p class=\"mt-4 text-sm md:text-base text-slate-300 max-w-2xl mx-auto\">\r\n Choirs are closing every year. Not because of bad music, but because nobody can find them, support them or join them in time.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid gap-6 md:grid-cols-3\">\r\n <div class=\"glass rounded-2xl p-6\">\r\n <h3 class=\"font-semibold mb-2 text-lg\">Empty auditions<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n Singers search on Google and social media, not on cork boards. If your website looks outdated or is hard to find, they join another ensemble.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-6\">\r\n <h3 class=\"font-semibold mb-2 text-lg\">Half-empty halls<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n After months of rehearsals, singing for 40 people in a 400-seat hall is heartbreaking. No online ticket path means your concerts stay a secret.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-6\">\r\n <h3 class=\"font-semibold mb-2 text-lg\">Sponsors say \u201cmaybe later\u201d<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n Funders invest in projects that look organized and serious. An amateur website silently tells them your choir is not ready for their budget.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"solution\" class=\"section bg-brand-dark\/40\">\r\n <div class=\"max-w-6xl mx-auto px-4 grid gap-10 lg:grid-cols-2 items-center\">\r\n <div>\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">The Solution<\/p>\r\n <h2 class=\"text-3xl md:text-4xl font-display mb-4\">\r\n A website that becomes your\r\n <span class=\"text-brand-gold\">digital stage and business manager.<\/span>\r\n <\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 mb-6\">\r\n We design choir-specific websites that don\u2019t just look beautiful. They are built to attract singers, sell tickets, and make sponsors feel proud to be on your homepage.\r\n <\/p>\r\n\r\n <ul class=\"space-y-4 text-sm text-slate-200\">\r\n <li class=\"flex gap-3\">\r\n <span class=\"mt-1 text-brand-gold\">\u25c6<\/span>\r\n <div>\r\n <strong class=\"block text-sm\">Singer-ready auditions.<\/strong>\r\n Clear calls, forms that actually work, automatic confirmation emails and a simple way to follow up.\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <span class=\"mt-1 text-brand-gold\">\u25c6<\/span>\r\n <div>\r\n <strong class=\"block text-sm\">Ticket sales you can track.<\/strong>\r\n Integrated ticket links, donation buttons and concert pages that move people from \u201cinterested\u201d to \u201cI\u2019ll be there\u201d.\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <span class=\"mt-1 text-brand-gold\">\u25c6<\/span>\r\n <div>\r\n <strong class=\"block text-sm\">Sponsor-friendly storytelling.<\/strong>\r\n We highlight your educational, artistic and community impact so that funders see your choir as a safe and meaningful investment.\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"float-slow\">\r\n <div class=\"glass rounded-3xl p-5 shadow-2xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/span>\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-amber-300\"><\/span>\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400\"><\/span>\r\n <\/div>\r\n <div class=\"text-[0.65rem] text-slate-400 tracking-[0.2em] uppercase\">\r\n Choir Website Mockup\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/80 rounded-2xl p-6 space-y-4\">\r\n <div class=\"h-8 w-2\/3 bg-gradient-to-r from-brand-gold\/80 to-amber-100\/80 rounded-full\"><\/div>\r\n <div class=\"h-3 w-3\/4 bg-slate-700\/80 rounded-full\"><\/div>\r\n <div class=\"h-3 w-2\/3 bg-slate-700\/60 rounded-full\"><\/div>\r\n <div class=\"grid grid-cols-3 gap-3 pt-4\">\r\n <div class=\"bg-slate-800\/70 rounded-2xl h-20\"><\/div>\r\n <div class=\"bg-slate-800\/70 rounded-2xl h-20\"><\/div>\r\n <div class=\"bg-slate-800\/70 rounded-2xl h-20\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-400 text-center\">\r\n Designed for choirs, not generic businesses.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"guide\" class=\"section bg-brand-darker\/70\">\r\n <div class=\"max-w-5xl mx-auto px-4 grid gap-8 md:grid-cols-[1.4fr,1fr] items-start\">\r\n <div>\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">Your Guide<\/p>\r\n <h2 class=\"text-3xl font-display mb-4\">We are choir people who speak design and rehearsal language.<\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 mb-4\">\r\n Most agencies don\u2019t understand what it means to build a choir season, prepare auditions, or write to school administrators and donors.\r\n We do. We work only with choirs, vocal ensembles and choral organizations.\r\n <\/p>\r\n <p class=\"text-sm md:text-base text-slate-200 mb-4\">\r\n Our team combines experience in choral composition, artistic direction and UX\/UI design. That means your website won\u2019t just \u201clook modern\u201d;\r\n it will be structured to answer the questions that singers, audiences and sponsors actually ask.\r\n <\/p>\r\n <p class=\"text-sm text-slate-400\">\r\n <span class=\"font-semibold text-slate-200\">We know how much work goes behind every concert.<\/span> \r\n <br \/>\r\n <span class=\"font-semibold text-slate-200\">We\u2019ve helped choirs on different continents turn their online presence into a real asset.<\/span>\r\n <\/p>\r\n <\/div>\r\n <div class=\"glass rounded-3xl p-6 text-sm text-slate-200 space-y-3\">\r\n <h3 class=\"font-semibold text-lg\">What directors tell us before working together<\/h3>\r\n <ul class=\"space-y-2 text-slate-300\">\r\n <li>\u201cOur site is embarrassing. I avoid sending it to conductors I admire.\u201d<\/li>\r\n <li>\u201cParents can\u2019t find clear information; I keep answering the same emails.\u201d<\/li>\r\n <li>\u201cWe know our choir is good\u2026 but online we look like a hobby group.\u201d<\/li>\r\n <\/ul>\r\n <p class=\"text-xs text-slate-400 pt-2\">\r\n Your website shouldn\u2019t betray the quality of your sound. It should introduce it.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"plan\" class=\"section bg-brand-dark\/40\">\r\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">The Plan<\/p>\r\n <h2 class=\"text-3xl font-display mb-4\">Working with us is simple.<\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-8\">\r\n You don\u2019t need to become a web developer. You just need a clear process and someone who understands choirs.\r\n <\/p>\r\n\r\n <div class=\"grid gap-6 md:grid-cols-3 text-left\">\r\n <div class=\"glass rounded-2xl p-5\">\r\n <div class=\"pill inline-flex items-center justify-center px-3 py-1 text-[0.7rem] text-slate-200 mb-3\">\r\n Step 1\r\n <\/div>\r\n <h3 class=\"font-semibold mb-2 text-lg\">Free website review<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n We look at your current online presence and identify what\u2019s stopping people from joining, buying or funding your choir.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-5\">\r\n <div class=\"pill inline-flex items-center justify-center px-3 py-1 text-[0.7rem] text-slate-200 mb-3\">\r\n Step 2\r\n <\/div>\r\n <h3 class=\"font-semibold mb-2 text-lg\">Design your digital stage<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n We create a choir-specific layout, write strategic copy and design each page around your goals for the next seasons.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-5\">\r\n <div class=\"pill inline-flex items-center justify-center px-3 py-1 text-[0.7rem] text-slate-200 mb-3\">\r\n Step 3\r\n <\/div>\r\n <h3 class=\"font-semibold mb-2 text-lg\">Launch & support<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n We launch the site, connect your tools (mailing lists, ticket links, donations) and stay available for adjustments.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-8\">\r\n <a\r\n href=\"#cta-final\"\r\n class=\"btn-primary inline-flex items-center justify-center px-8 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase shadow-lg transition-all\"\r\n >\r\n Start with a free review\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"explainer\" class=\"section-sm bg-brand-darker\/80\">\r\n <div class=\"max-w-4xl mx-auto px-4\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3 text-center\">What we actually build<\/p>\r\n <h2 class=\"text-2xl md:text-3xl font-display mb-4 text-center\">\r\n Your website becomes the place where your choir\u2019s story is always ready.\r\n <\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 leading-relaxed\">\r\n At Choir Web Design we build websites specifically for choirs and vocal ensembles. We start by listening to your goals:\r\n do you need more committed singers, more audience, stronger educational impact, or stable sponsorships?\r\n Then we design a clear structure where every page has a job: the homepage introduces who you are and why your choir matters;\r\n the \u201cJoin Us\u201d page answers all the questions that potential singers are afraid to ask; the \u201cConcerts\u201d page makes it easy\r\n to attend or support each performance; and the \u201cSupport Us\u201d page tells funders exactly how their help will create artistic\r\n and social impact. Instead of a collection of disconnected pages, you get a coherent digital stage that works 24\/7 so\r\n your rehearsals are never wasted on an invisible project.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"success\" class=\"section bg-brand-dark\/40\">\r\n <div class=\"max-w-5xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">The Result<\/p>\r\n <h2 class=\"text-3xl md:text-4xl font-display mb-4\">\r\n Imagine directing a choir that is fully visible, supported and growing.\r\n <\/h2>\r\n <div class=\"grid gap-6 md:grid-cols-3 text-left mt-6\">\r\n <div class=\"glass rounded-2xl p-5\">\r\n <h3 class=\"font-semibold mb-1 text-lg\">Confident invitations<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n You proudly send your website to guest conductors, festivals and institutions knowing it represents your real level.\r\n <\/p>\r\n <\/div>\r\n <div class=\"glass rounded-2xl p-5\">\r\n <h3 class=\"font-semibold mb-1 text-lg\">Stronger seasons<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n With clearer communication, auditions fill, audience grows and you can plan more ambitious repertoire and tours.\r\n <\/p>\r\n <\/div>\r\n <div class=\"glass rounded-2xl p-5\">\r\n <h3 class=\"font-semibold mb-1 text-lg\">Sustainable support<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n Donors and institutions see the impact of your work and feel safe committing to multi-year support.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"pricing\" class=\"section bg-brand-darker\">\r\n <div class=\"max-w-5xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">Packages<\/p>\r\n <h2 class=\"text-3xl font-display mb-2\">Choose the level that fits your choir.<\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-8\">\r\n Every project begins with a free website review. From there, we recommend the package that matches your goals and budget.\r\n <\/p>\r\n\r\n <div class=\"grid gap-6 md:grid-cols-3 text-left\">\r\n \r\n <div class=\"glass rounded-2xl p-5 flex flex-col\">\r\n <h3 class=\"font-semibold text-lg mb-1\">Prelude<\/h3>\r\n <p class=\"text-sm text-slate-300 mb-2\">For small choirs that need a clean, serious online home.<\/p>\r\n <p class=\"text-sm font-semibold text-brand-gold mb-3\">4 key pages \u00b7 Strategic copy \u00b7 Basic audition form<\/p>\r\n\r\n \r\n <div class=\"mb-3\">\r\n <p class=\"text-xs text-slate-400\">\r\n Standard: <span class=\"line-through\">$2,000<\/span>\r\n <\/p>\r\n <p class=\"text-xl font-semibold text-brand-gold\">From $1,100<\/p>\r\n <p class=\"text-[0.7rem] text-slate-400\">\r\n Discount available until May 2026.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"text-sm text-slate-300 space-y-1 mb-4\">\r\n <li>\u2713 Homepage & \u201cAbout the Choir\u201d<\/li>\r\n <li>\u2713 Join Us \/ Auditions page<\/li>\r\n <li>\u2713 Concerts \/ Events overview<\/li>\r\n <li>\u2713 Simple contact and donation links<\/li>\r\n <\/ul>\r\n <div class=\"mt-auto space-y-3\">\r\n <p class=\"text-[0.75rem] text-slate-500 mb-1\">\r\n Best for school, community and church choirs starting to take their online presence seriously.\r\n <\/p>\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=I%20want%20to%20ask%20about%20the%20Prelude%20package&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%27ve%20been%20exploring%20Choir%20Web%20Design%20and%20I%27m%20interested%20in%20the%20Prelude%20package%20for%20my%20choir%20at%20%5Byour%20URL%20here%3A%20_______%5D.%0A%0APlease%20feel%20free%20to%20contact%20me%20and%20tell%20me%20more%20about%20how%20we%20can%20move%20forward.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center w-full px-5 py-2.5 rounded-full text-[0.78rem] font-semibold tracking-[0.18em] uppercase shadow-lg\"\r\n >\r\n Ask about Prelude\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass rounded-2xl p-5 border-brand-gold\/60 border flex flex-col relative\">\r\n <div class=\"pill px-3 py-1 text-[0.7rem] text-brand-gold bg-brand-gold\/10 absolute -top-3 right-5\">\r\n Most Popular\r\n <\/div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Symphony<\/h3>\r\n <p class=\"text-sm text-slate-300 mb-2\">For choirs that want growth in auditions, audience and donations.<\/p>\r\n <p class=\"text-sm font-semibold text-brand-gold mb-3\">Full website \u00b7 Optimized flows \u00b7 Sponsor-ready storytelling<\/p>\r\n\r\n \r\n <div class=\"mb-3\">\r\n <p class=\"text-xs text-slate-400\">\r\n Standard: <span class=\"line-through\">$4,000<\/span>\r\n <\/p>\r\n <p class=\"text-xl font-semibold text-brand-gold\">From $3,000<\/p>\r\n <p class=\"text-[0.7rem] text-slate-400\">\r\n The next 47 choirs have access to this discount.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"text-sm text-slate-300 space-y-1 mb-4\">\r\n <li>\u2713 Everything in Prelude<\/li>\r\n <li>\u2713 Detailed \u201cSupport Us\u201d \/ Fundraising page<\/li>\r\n <li>\u2713 Separate page for educational work & tours<\/li>\r\n <li>\u2713 Email capture and newsletter integration<\/li>\r\n <\/ul>\r\n <div class=\"mt-auto space-y-3\">\r\n <p class=\"text-[0.75rem] text-slate-500\">\r\n Ideal for independent ensembles, university choirs and organizations preparing bigger seasons.\r\n <\/p>\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=I%20want%20to%20ask%20about%20the%20Symphony%20package&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%27ve%20been%20exploring%20Choir%20Web%20Design%20and%20I%27m%20interested%20in%20the%20Symphony%20package%20for%20my%20choir%20at%20%5Byour%20URL%20here%3A%20_______%5D.%0A%0APlease%20feel%20free%20to%20contact%20me%20and%20tell%20me%20more%20about%20how%20we%20can%20move%20forward.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center w-full px-5 py-2.5 rounded-full text-[0.78rem] font-semibold tracking-[0.18em] uppercase shadow-lg\"\r\n >\r\n Ask about Symphony\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass rounded-2xl p-5 flex flex-col\">\r\n <h3 class=\"font-semibold text-lg mb-1\">Opera<\/h3>\r\n <p class=\"text-sm text-slate-300 mb-2\">For institutions and festivals with complex needs.<\/p>\r\n <p class=\"text-sm font-semibold text-brand-gold mb-3\">Multi-choir sites \u00b7 Multiple languages \u00b7 Advanced integrations<\/p>\r\n\r\n \r\n <div class=\"mb-3\">\r\n <p class=\"text-xs text-slate-400\">\r\n Standard: <span class=\"line-through\">$8,000<\/span>\r\n <\/p>\r\n <p class=\"text-xl font-semibold text-brand-gold\">From $6,000<\/p>\r\n <p class=\"text-[0.7rem] text-slate-400\">\r\n Discount available until May 2026.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"text-sm text-slate-300 space-y-1 mb-4\">\r\n <li>\u2713 Custom architecture and content strategy<\/li>\r\n <li>\u2713 Multi-site or multi-ensemble structures<\/li>\r\n <li>\u2713 Advanced integrations (CRM, ticketing, LMS)<\/li>\r\n <li>\u2713 Long-term design & content support<\/li>\r\n <li>\u2713 Secure member portal (rehearsal calendar, internal materials for your singers)<\/li>\r\n <\/ul>\r\n <div class=\"mt-auto space-y-3\">\r\n <p class=\"text-[0.75rem] text-slate-500 mb-1\">\r\n Designed with boards, artistic leadership and administrative teams at the same table.\r\n <\/p>\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=I%20want%20to%20ask%20about%20the%20Opera%20package&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%27ve%20been%20exploring%20Choir%20Web%20Design%20and%20I%27m%20interested%20in%20the%20Opera%20package%20for%20my%20choir%20at%20%5Byour%20URL%20here%3A%20_______%5D.%0A%0APlease%20feel%20free%20to%20contact%20me%20and%20tell%20me%20more%20about%20how%20we%20can%20move%20forward.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center w-full px-5 py-2.5 rounded-full text-[0.78rem] font-semibold tracking-[0.18em] uppercase shadow-lg\"\r\n >\r\n Ask about Opera\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<section id=\"lead-magnet\" class=\"section bg-brand-dark\/70\">\r\n <div class=\"max-w-4xl mx-auto px-4 glass rounded-3xl p-6 md:p-8 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">\r\n Free Resource\r\n <\/p>\r\n\r\n <h2 class=\"text-2xl md:text-3xl font-display mb-3\">\r\n Download the \u201cChoir Website Checklist\u201d.\r\n <\/h2>\r\n\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-5\">\r\n A one-page checklist that shows you the 12 elements every choir website needs\r\n so directors, singers, audiences and sponsors always find what they are looking for.\r\n <\/p>\r\n\r\n \r\n <div class=\"max-w-xl mx-auto\">\r\n <style>\r\n \/* Reset b\u00e1sico dentro del embed para usar tu tipograf\u00eda\/est\u00e9tica *\/\r\n #mlb2-33937234 h4,\r\n #mlb2-33937234 p,\r\n #mlb2-33937234 span,\r\n #mlb2-33937234 button {\r\n font-family: inherit;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n }\r\n\r\n \/* CONTENEDOR GENERAL DEL FORM *\/\r\n #mlb2-33937234.ml-form-embedContainer {\r\n width: 100% !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedWrapper {\r\n background: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n\r\n \/* Quitamos padding interno, usamos el del \"glass\" tuyo *\/\r\n #mlb2-33937234 .ml-form-embedBody {\r\n padding: 0;\r\n }\r\n\r\n \/* Ocultamos el t\u00edtulo y texto internos de MailerLite (ya los ten\u00e9s arriba) *\/\r\n #mlb2-33937234 .ml-form-embedContent {\r\n display: none;\r\n }\r\n\r\n \/* ---------- LAYOUT: INPUT + BOT\u00d3N ---------- *\/\r\n \/* El flex tiene que ir en el FORM, no en el body *\/\r\n #mlb2-33937234 .ml-block-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n align-items: stretch;\r\n justify-content: center;\r\n margin: 0;\r\n width: 100%;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-formContent {\r\n margin: 0;\r\n width: 100%;\r\n flex: 1 1 auto;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit {\r\n margin: 0;\r\n width: 100%;\r\n flex: 0 0 auto;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n @media (min-width: 640px) {\r\n #mlb2-33937234 .ml-block-form {\r\n flex-direction: row; \/* input y bot\u00f3n al costado *\/\r\n align-items: center;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit {\r\n width: auto;\r\n justify-content: flex-start; \/* bot\u00f3n pegado al input *\/\r\n }\r\n }\r\n\r\n \/* ---------- INPUT ---------- *\/\r\n #mlb2-33937234 input[type=\"email\"] {\r\n background-color: rgba(15, 23, 42, 0.9); \/* fondo oscuro tipo glass *\/\r\n border-radius: 9999px;\r\n border: 1px solid rgba(148, 163, 184, 0.6);\r\n padding: 0.75rem 1.25rem;\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n color: #e5e7eb;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n #mlb2-33937234 input[type=\"email\"]::placeholder {\r\n color: #9ca3af;\r\n }\r\n\r\n #mlb2-33937234 input[type=\"email\"]:focus {\r\n outline: none;\r\n box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);\r\n border-color: rgba(250, 204, 21, 0.9);\r\n }\r\n\r\n \/* ---------- BOT\u00d3N (clon de tu btn-primary con degrad\u00e9) ---------- *\/\r\n #mlb2-33937234 .ml-form-embedSubmit button.primary {\r\n border-radius: 9999px !important;\r\n background-image: linear-gradient(135deg, #e4b23a, #f0c966) !important;\r\n color: #020617 !important;\r\n padding: 0.75rem 1.75rem !important;\r\n font-size: 0.75rem !important;\r\n font-weight: 600 !important;\r\n letter-spacing: 0.2em !important;\r\n text-transform: uppercase !important;\r\n border: none !important;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);\r\n white-space: nowrap;\r\n transition: all 0.15s ease-out;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit button.primary:hover {\r\n filter: brightness(1.05);\r\n transform: translateY(-1px);\r\n box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit button.primary:active {\r\n transform: translateY(0);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n \/* Loader del bot\u00f3n (dejamos el que viene por defecto) *\/\r\n .ml-form-embedSubmitLoad {\r\n display: inline-block;\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n }\r\n\r\n .ml-form-embedSubmitLoad:after {\r\n content: \" \";\r\n display: block;\r\n width: 11px;\r\n height: 11px;\r\n margin: 1px;\r\n border-radius: 50%;\r\n border: 4px solid #fff;\r\n border-color: #ffffff #ffffff #ffffff transparent;\r\n animation: ml-form-embedSubmitLoad 1.2s linear infinite;\r\n }\r\n\r\n @keyframes ml-form-embedSubmitLoad {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Mensaje de \u00e9xito *\/\r\n #mlb2-33937234 .ml-form-successBody {\r\n padding: 0;\r\n color: #e5e7eb;\r\n text-align: center;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-successBody h4 {\r\n font-family: inherit;\r\n font-size: 1.25rem;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-successBody p {\r\n font-family: inherit;\r\n font-size: 0.9rem;\r\n line-height: 1.5;\r\n }\r\n <\/style>\r\n\r\n <div id=\"mlb2-33937234\" class=\"ml-form-embedContainer ml-subscribe-form ml-subscribe-form-33937234\">\r\n <div class=\"ml-form-align-center\">\r\n <div class=\"ml-form-embedWrapper embedForm\">\r\n\r\n <div class=\"ml-form-embedBody ml-form-embedBodyDefault row-form\">\r\n \r\n <div class=\"ml-form-embedContent\">\r\n <h4>Download the \u201cChoir Website Checklist\u201d<\/h4>\r\n <p>A one-page checklist that shows you the 12 elements every choir website needs so directors,\r\n singers, audiences and sponsors always find what they are looking for.<\/p>\r\n <\/div>\r\n\r\n <form class=\"ml-block-form\"\r\n action=\"https:\/\/assets.mailerlite.com\/jsonp\/1949508\/forms\/172260818385110715\/subscribe\"\r\n data-code=\"\" method=\"post\" target=\"_blank\">\r\n <div class=\"ml-form-formContent\">\r\n <div class=\"ml-form-fieldRow ml-last-item\">\r\n <div class=\"ml-field-group ml-field-email ml-validate-email ml-validate-required\">\r\n <input aria-label=\"email\" aria-required=\"true\" type=\"email\" class=\"form-control\"\r\n name=\"fields[email]\" placeholder=\"Your best email\" autocomplete=\"email\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <input type=\"hidden\" name=\"ml-submit\" value=\"1\">\r\n\r\n <div class=\"ml-form-embedSubmit\">\r\n <button type=\"submit\" class=\"primary\">Send me the checklist<\/button>\r\n <button disabled=\"disabled\" style=\"display: none;\" type=\"button\" class=\"loading\">\r\n <div class=\"ml-form-embedSubmitLoad\"><\/div>\r\n <span class=\"sr-only\">Loading...<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <input type=\"hidden\" name=\"anticsrf\" value=\"true\">\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"ml-form-successBody row-success\" style=\"display: none\">\r\n <div class=\"ml-form-successContent\">\r\n <h4>Check your inbox<\/h4>\r\n <p>We\u2019ve sent the \u201cChoir Website Checklist\u201d to your email.<\/p>\r\n <p>If it\u2019s not there in a couple of minutes, check your spam or promotions folder.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function ml_webform_success_33937234() {\r\n var $ = ml_jQuery || jQuery;\r\n $('.ml-subscribe-form-33937234 .row-success').show();\r\n $('.ml-subscribe-form-33937234 .row-form').hide();\r\n }\r\n <\/script>\r\n <script src=\"https:\/\/groot.mailerlite.com\/js\/w\/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024\" type=\"text\/javascript\"><\/script>\r\n <script>\r\n fetch(\"https:\/\/assets.mailerlite.com\/jsonp\/1949508\/forms\/172260818385110715\/takel\")\r\n <\/script>\r\n <\/div>\r\n\r\n <p class=\"text-[0.7rem] text-slate-500 mt-3\">\r\n We send you the PDF and a short series of emails with examples and ideas you can apply even if we never work together.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n\r\n\r\n \r\n <section id=\"cta-final\" class=\"section bg-black\">\r\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">Take the next step<\/p>\r\n <h2 class=\"text-3xl md:text-4xl font-display mb-4\">\r\n Let\u2019s make sure your choir is never invisible again.\r\n <\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-6\">\r\n You\u2019ve invested years in your sound. Now it\u2019s time to build a digital stage that honours that work and opens new doors:\r\n better auditions, fuller halls and stronger partnerships.\r\n <\/p>\r\n\r\n <div class=\"flex flex-row flex-wrap items-center justify-center gap-4 mb-5\">\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=Free%20Website%20Review&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%20am%20really%20excited%20about%20Choir%20Web%20Design%20and%20I%20would%20love%20to%20explore%20what%20possibilities%20you%20see%20for%20my%20choir%2C%20%5Byour%20choir%20name%20here%5D.%0A%0AHere%20is%20our%20current%20website%3A%20%5Byour%20URL%20here%3A%20______%5D%0A%0ALooking%20forward%20to%20hearing%20from%20you%20and%20discovering%20how%20we%20can%20work%20together.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center px-8 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase shadow-lg\"\r\n >\r\n Request your free website review\r\n <\/a>\r\n <a\r\n href=\"#lead-magnet\"\r\n class=\"btn-secondary inline-flex items-center justify-center px-7 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase\"\r\n >\r\n Not ready yet? Get the checklist\r\n <\/a>\r\n <\/div>\r\n\r\n <p class=\"text-[0.75rem] text-slate-500\">\r\n You can keep \u201cmaking do\u201d with an invisible site, or you can give your choir the online presence it deserves.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n \r\n <footer class=\"section-sm bg-brand-darker\/90 border-t border-slate-800\/70\">\r\n <div class=\"max-w-5xl mx-auto px-4 text-sm text-slate-500 flex flex-col md:flex-row gap-6 md:items-center md:justify-between\">\r\n \r\n <div class=\"flex items-center md:items-start gap-3\">\r\n <div class=\"w-20 h-20 rounded-xl overflow-hidden flex items-center justify-center bg-transparent\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\"\r\n alt=\"Choir Web Design logo\"\r\n class=\"w-full h-full object-contain\"\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <p class=\"font-display tracking-[0.30em] uppercase text-[0.8rem] text-slate-300\">\r\n Choir Web Design\r\n <\/p>\r\n <p class=\"text-[0.7rem] leading-relaxed\">\r\n Helping choirs find their voice in the digital age.<br>\r\n We craft websites that recruit singers and sell tickets.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n \r\n <div class=\"text-[0.7rem] text-slate-500 space-y-1 md:text-right\">\r\n <p class=\"font-semibold text-slate-300\">Get Your Audit<\/p>\r\n <p>\r\n Ready to start? Send us an email to get your free website review.\r\n <\/p>\r\n <p>\r\n <a href=\"mailto:wecraftyourplace@choirweb.design\" class=\"hover:text-brand-gold\">\r\n wecraftyourplace@choirweb.design\r\n <\/a>\r\n <\/p>\r\n <p class=\"pt-1 text-slate-600\">\r\n \u00a9 2025 Choir Web Design. All rights reserved.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Most choirs sound extraordinary,<br \/>\nbut online they are almost invisible.<br \/>\nWe design choir websites that fill auditions, sell tickets and convince sponsors without you becoming a full-time marketer.<\/p>\n","protected":false},"author":1,"featured_media":168,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-115","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choirweb.design\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=115"}],"version-history":[{"count":5,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages\/115\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages\/115\/revisions\/251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/media\/168"}],"wp:attachment":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n\r\n \r\n Choir Website Design & Development | Choir Web Design<\/title>\r\n <meta\r\n name=\"description\"\r\n content=\"Choir Web Design builds high-converting websites for choirs and vocal ensembles. Fill auditions, sell concert tickets, and attract sponsors with a choir-specific digital stage.\"\r\n \/>\r\n <link rel=\"canonical\" href=\"https:\/\/choirweb.design\/\" \/>\r\n\r\n \r\n <meta name=\"robots\" content=\"index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1\" \/>\r\n <meta name=\"googlebot\" content=\"index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1\" \/>\r\n\r\n \r\n <link rel=\"icon\" href=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\" \/>\r\n <meta name=\"theme-color\" content=\"#050816\" \/>\r\n <meta name=\"application-name\" content=\"Choir Web Design\" \/>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/cdn.tailwindcss.com\" crossorigin \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg\" \/>\r\n <link rel=\"preload\" as=\"image\" href=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Shadow-scaled.jpg\" \/>\r\n\r\n \r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:site_name\" content=\"Choir Web Design\" \/>\r\n <meta property=\"og:url\" content=\"https:\/\/choirweb.design\/\" \/>\r\n <meta property=\"og:title\" content=\"Choir Website Design & Development | Choir Web Design\" \/>\r\n <meta\r\n property=\"og:description\"\r\n content=\"Websites built exclusively for choirs: fill auditions, sell tickets, and make sponsors feel proud to support you.\"\r\n \/>\r\n <meta property=\"og:image\" content=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg\" \/>\r\n <meta property=\"og:image:alt\" content=\"Choir Web Design \u2013 websites built exclusively for choirs\" \/>\r\n\r\n \r\n <meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n <meta name=\"twitter:title\" content=\"Choir Website Design & Development | Choir Web Design\" \/>\r\n <meta\r\n name=\"twitter:description\"\r\n content=\"Choir websites that recruit singers, sell tickets, and attract sponsors\u2014without you becoming a full-time marketer.\"\r\n \/>\r\n <meta name=\"twitter:image\" content=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg\" \/>\r\n <meta name=\"twitter:image:alt\" content=\"Choir Web Design \u2013 websites built exclusively for choirs\" \/>\r\n \r\n \r\n\r\n \r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@graph\": [\r\n {\r\n \"@type\": \"Organization\",\r\n \"@id\": \"https:\/\/choirweb.design\/#org\",\r\n \"name\": \"Choir Web Design\",\r\n \"url\": \"https:\/\/choirweb.design\/\",\r\n \"logo\": \"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\",\r\n \"image\": \"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\",\r\n \"email\": \"wecraftyourplace@choirweb.design\",\r\n \"sameAs\": [\r\n \"https:\/\/www.linkedin.com\/company\/choirwebdesign\",\r\n \"https:\/\/www.choirplace.com\/profile\/ChoirWebDesign\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2649\/finally-a-web-studio-built-only\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2661\/why-your-choir-isn-t-getting-eno\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2667\/you-could-be-losing-up-to-40-of\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2666\/you-could-be-losing-sponsors-on\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2665\/why-you-re-not-selling-as-many-c\",\r\n \"https:\/\/www.choirplace.com\/blogs\/8734\/2656\/the-hidden-cost-of-a-bad-choir-w\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/finally-a-web-studio-built-only-for-choirs-and-a-free-website-checklist-to-start\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/why-your-choir-isnt-getting-enough-donations-and-exactly-how-to-fix-it\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/you-could-be-losing-sponsors-on-linkedin-key-moves-to-attract-them-even-if-you-dont-know-the-platform\",\r\n \"https:\/\/choralnet.org\/archives\/announcements\/why-youre-not-selling-as-many-concert-tickets-as-you-should-and-the-christmas-trick-that-fixes-it\"\r\n ]\r\n },\r\n {\r\n \"@type\": \"WebSite\",\r\n \"@id\": \"https:\/\/choirweb.design\/#website\",\r\n \"url\": \"https:\/\/choirweb.design\/\",\r\n \"name\": \"Choir Web Design\",\r\n \"publisher\": { \"@id\": \"https:\/\/choirweb.design\/#org\" },\r\n \"inLanguage\": \"en\"\r\n },\r\n {\r\n \"@type\": \"WebPage\",\r\n \"@id\": \"https:\/\/choirweb.design\/#home\",\r\n \"url\": \"https:\/\/choirweb.design\/\",\r\n \"name\": \"Choir Website Design & Development | Choir Web Design\",\r\n \"isPartOf\": { \"@id\": \"https:\/\/choirweb.design\/#website\" },\r\n \"about\": { \"@id\": \"https:\/\/choirweb.design\/#org\" },\r\n \"inLanguage\": \"en\"\r\n },\r\n {\r\n \"@type\": \"Service\",\r\n \"@id\": \"https:\/\/choirweb.design\/#service\",\r\n \"name\": \"Choir Website Design & Development\",\r\n \"provider\": { \"@id\": \"https:\/\/choirweb.design\/#org\" },\r\n \"areaServed\": \"Worldwide\",\r\n \"serviceType\": [\r\n \"Choir website design\",\r\n \"WordPress development\",\r\n \"Conversion-focused copywriting\"\r\n ],\r\n \"hasOfferCatalog\": {\r\n \"@type\": \"OfferCatalog\",\r\n \"name\": \"Packages\",\r\n \"itemListElement\": [\r\n { \"@type\": \"Offer\", \"name\": \"Prelude\", \"url\": \"https:\/\/choirweb.design\/#pricing\" },\r\n { \"@type\": \"Offer\", \"name\": \"Symphony\", \"url\": \"https:\/\/choirweb.design\/#pricing\" },\r\n { \"@type\": \"Offer\", \"name\": \"Opera\", \"url\": \"https:\/\/choirweb.design\/#pricing\" }\r\n ]\r\n }\r\n }\r\n ]\r\n }\r\n <\/script>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Belanosima:wght@400;600;700&family=Maven+Pro:wght@400;500;600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n dark: \"#050816\",\r\n darker: \"#02030a\",\r\n gold: \"#e4b23a\",\r\n goldSoft: \"#f0c966\"\r\n }\r\n },\r\n fontFamily: {\r\n display: [\"Belanosima\", \"system-ui\", \"sans-serif\"],\r\n body: [\"Maven Pro\", \"system-ui\", \"sans-serif\"]\r\n }\r\n }\r\n }\r\n };\r\n <\/script>\r\n\r\n \r\n <style>\r\n body {\r\n font-family: \"Maven Pro\", system-ui, sans-serif;\r\n background: radial-gradient(circle at top, #1b2640 0, #050816 40%, #02030a 100%);\r\n color: #f9fafb;\r\n }\r\n .glass {\r\n background: rgba(15, 23, 42, 0.85);\r\n border: 1px solid rgba(148, 163, 184, 0.35);\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n }\r\n .pill {\r\n border-radius: 999px;\r\n border: 1px solid rgba(148, 163, 184, 0.4);\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n .btn-primary {\r\n background-image: linear-gradient(135deg, #e4b23a, #f0c966);\r\n color: #020617;\r\n }\r\n .btn-primary:hover {\r\n filter: brightness(1.05);\r\n transform: translateY(-1px);\r\n }\r\n .btn-secondary {\r\n border: 1px solid rgba(148, 163, 184, 0.6);\r\n background: rgba(15, 23, 42, 0.7);\r\n color: #e5e7eb;\r\n }\r\n .btn-secondary:hover { background: rgba(15, 23, 42, 0.9); }\r\n .section { padding-top: 5rem; padding-bottom: 5rem; }\r\n .section-sm { padding-top: 3.5rem; padding-bottom: 3.5rem; }\r\n html { scroll-behavior: smooth; }\r\n <\/style>\r\n<\/head>\r\n\r\n <meta charset=\"UTF-8\" \/>\r\n <title>Choir Web Design \u2013 We Craft Your Place<\/title>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" \/>\r\n\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n \r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Belanosima:wght@400;600;700&family=Maven+Pro:wght@400;500;600;700&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n dark: \"#050816\",\r\n darker: \"#02030a\",\r\n gold: \"#e4b23a\",\r\n goldSoft: \"#f0c966\"\r\n }\r\n },\r\n fontFamily: {\r\n display: [\"Belanosima\", \"system-ui\", \"sans-serif\"],\r\n body: [\"Maven Pro\", \"system-ui\", \"sans-serif\"]\r\n }\r\n }\r\n }\r\n };\r\n <\/script>\r\n\r\n <style>\r\n body {\r\n font-family: \"Maven Pro\", system-ui, sans-serif;\r\n background: radial-gradient(circle at top, #1b2640 0, #050816 40%, #02030a 100%);\r\n color: #f9fafb;\r\n }\r\n\r\n .glass {\r\n background: rgba(15, 23, 42, 0.85);\r\n border: 1px solid rgba(148, 163, 184, 0.35);\r\n backdrop-filter: blur(14px);\r\n -webkit-backdrop-filter: blur(14px);\r\n }\r\n\r\n .pill {\r\n border-radius: 999px;\r\n border: 1px solid rgba(148, 163, 184, 0.4);\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n\r\n .btn-primary {\r\n background-image: linear-gradient(135deg, #e4b23a, #f0c966);\r\n color: #020617;\r\n }\r\n\r\n .btn-primary:hover {\r\n filter: brightness(1.05);\r\n transform: translateY(-1px);\r\n }\r\n\r\n .btn-secondary {\r\n border: 1px solid rgba(148, 163, 184, 0.6);\r\n background: rgba(15, 23, 42, 0.7);\r\n color: #e5e7eb;\r\n }\r\n\r\n .btn-secondary:hover {\r\n background: rgba(15, 23, 42, 0.9);\r\n }\r\n\r\n .section {\r\n padding-top: 5rem;\r\n padding-bottom: 5rem;\r\n }\r\n\r\n .section-sm {\r\n padding-top: 3.5rem;\r\n padding-bottom: 3.5rem;\r\n }\r\n\r\n @keyframes float-slow {\r\n 0% { transform: translateY(0); }\r\n 50% { transform: translateY(-8px); }\r\n 100% { transform: translateY(0); }\r\n }\r\n\r\n .float-slow {\r\n animation: float-slow 7s ease-in-out infinite;\r\n }\r\n\r\n html {\r\n scroll-behavior: smooth;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"antialiased bg-brand-dark text-slate-50\">\r\n\r\n \r\n <nav class=\"fixed top-0 inset-x-0 z-40 bg-brand-dark\/80 backdrop-blur-xl border-b border-slate-800\/70\">\r\n <div class=\"max-w-6xl mx-auto px-4 sm:px-6 lg:px-8\">\r\n <div class=\"flex items-center justify-between h-16\">\r\n <div class=\"flex items-center gap-3\">\r\n \r\n <div class=\"w-10 h-10 rounded-xl overflow-hidden flex items-center justify-center bg-transparent\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\"\r\n alt=\"Choir Web Design logo\"\r\n class=\"w-full h-full object-contain\"\r\n \/>\r\n<\/div>\r\n\r\n <div>\r\n <div class=\"font-display tracking-[0.24em] text-xs uppercase text-slate-300\">Choir Web Design<\/div>\r\n <div class=\"text-xs text-slate-500\">We craft your place<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hidden md:flex items-center gap-8 text-xs font-semibold tracking-[0.18em] uppercase\">\r\n <a href=\"#problem\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">The Struggle<\/a>\r\n <a href=\"#solution\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">The Solution<\/a>\r\n <a href=\"#plan\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">How It Works<\/a>\r\n <a href=\"#pricing\" class=\"text-slate-300 hover:text-brand-gold transition-colors\">Packages<\/a>\r\n <a href=\"#cta-final\" class=\"btn-primary px-5 py-2 rounded-full text-[0.72rem] tracking-[0.2em] uppercase shadow-lg transition-all\">\r\n Get your digital stage\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <header id=\"top\" class=\"relative min-h-screen flex items-center justify-center overflow-hidden pt-20\">\r\n <div class=\"absolute inset-0 bg-[url('https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Background-scaled.jpg')] bg-cover bg-center opacity-40\"><\/div>\r\n <div class=\"absolute inset-0 bg-[url('https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Shadow-scaled.jpg')] bg-cover bg-top mix-blend-multiply opacity-90\"><\/div>\r\n <div class=\"absolute inset-0 bg-gradient-to-b from-black\/50 via-black\/40 to-black\/80\"><\/div>\r\n\r\n <div class=\"relative z-10 max-w-5xl mx-auto px-4 text-center space-y-8\">\r\n \r\n <div class=\"inline-flex items-center gap-3 pill px-4 py-2 text-[0.7rem] tracking-[0.25em] uppercase text-slate-300 mb-2\">\r\n <span class=\"w-2 h-2 rounded-full bg-brand-gold animate-pulse\"><\/span>\r\n Websites that work as hard as your rehearsals\r\n <span class=\"w-2 h-2 rounded-full bg-brand-gold animate-pulse\"><\/span>\r\n <\/div>\r\n\r\n \r\n <h1 class=\"text-4xl sm:text-5xl md:text-6xl font-display leading-tight\">\r\n Most choirs sound extraordinary,\r\n <span class=\"block text-transparent bg-clip-text bg-gradient-to-r from-brand-gold to-amber-100\">\r\n but online they are almost invisible.\r\n <\/span>\r\n <\/h1>\r\n\r\n \r\n <p class=\"max-w-2xl mx-auto text-base sm:text-lg text-slate-200\">\r\n We design choir websites that fill auditions, sell tickets and convince sponsors\r\n <span class=\"font-semibold text-brand-gold\">without you becoming a full-time marketer.<\/span>\r\n <\/p>\r\n\r\n \r\n <div class=\"flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4 mt-4\">\r\n <a\r\n href=\"#cta-final\"\r\n class=\"btn-primary inline-flex items-center justify-center px-8 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase shadow-lg transition-all\"\r\n >\r\n Book a free website review\r\n <\/a>\r\n <a\r\n href=\"#lead-magnet\"\r\n class=\"btn-secondary inline-flex items-center justify-center px-7 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase\"\r\n >\r\n Download the Choir Website Checklist\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n <p class=\"max-w-xl mx-auto text-xs sm:text-sm text-slate-400 mt-4\">\r\n If your choir can\u2019t be found online, it\u2019s the same as rehearsing with the lights off.\r\n <\/p>\r\n <\/div>\r\n <\/header>\r\n\r\n \r\n <section id=\"problem\" class=\"section bg-brand-darker\/60\">\r\n <div class=\"max-w-5xl mx-auto px-4\">\r\n <div class=\"text-center mb-10\">\r\n <p class=\"text-xs tracking-[0.2em] uppercase text-brand-gold\">The Struggle<\/p>\r\n <h2 class=\"mt-3 text-3xl md:text-4xl font-display\">\r\n Without a strategic website, your choir quietly disappears.\r\n <\/h2>\r\n <p class=\"mt-4 text-sm md:text-base text-slate-300 max-w-2xl mx-auto\">\r\n Choirs are closing every year. Not because of bad music, but because nobody can find them, support them or join them in time.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"grid gap-6 md:grid-cols-3\">\r\n <div class=\"glass rounded-2xl p-6\">\r\n <h3 class=\"font-semibold mb-2 text-lg\">Empty auditions<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n Singers search on Google and social media, not on cork boards. If your website looks outdated or is hard to find, they join another ensemble.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-6\">\r\n <h3 class=\"font-semibold mb-2 text-lg\">Half-empty halls<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n After months of rehearsals, singing for 40 people in a 400-seat hall is heartbreaking. No online ticket path means your concerts stay a secret.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-6\">\r\n <h3 class=\"font-semibold mb-2 text-lg\">Sponsors say \u201cmaybe later\u201d<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n Funders invest in projects that look organized and serious. An amateur website silently tells them your choir is not ready for their budget.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"solution\" class=\"section bg-brand-dark\/40\">\r\n <div class=\"max-w-6xl mx-auto px-4 grid gap-10 lg:grid-cols-2 items-center\">\r\n <div>\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">The Solution<\/p>\r\n <h2 class=\"text-3xl md:text-4xl font-display mb-4\">\r\n A website that becomes your\r\n <span class=\"text-brand-gold\">digital stage and business manager.<\/span>\r\n <\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 mb-6\">\r\n We design choir-specific websites that don\u2019t just look beautiful. They are built to attract singers, sell tickets, and make sponsors feel proud to be on your homepage.\r\n <\/p>\r\n\r\n <ul class=\"space-y-4 text-sm text-slate-200\">\r\n <li class=\"flex gap-3\">\r\n <span class=\"mt-1 text-brand-gold\">\u25c6<\/span>\r\n <div>\r\n <strong class=\"block text-sm\">Singer-ready auditions.<\/strong>\r\n Clear calls, forms that actually work, automatic confirmation emails and a simple way to follow up.\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <span class=\"mt-1 text-brand-gold\">\u25c6<\/span>\r\n <div>\r\n <strong class=\"block text-sm\">Ticket sales you can track.<\/strong>\r\n Integrated ticket links, donation buttons and concert pages that move people from \u201cinterested\u201d to \u201cI\u2019ll be there\u201d.\r\n <\/div>\r\n <\/li>\r\n <li class=\"flex gap-3\">\r\n <span class=\"mt-1 text-brand-gold\">\u25c6<\/span>\r\n <div>\r\n <strong class=\"block text-sm\">Sponsor-friendly storytelling.<\/strong>\r\n We highlight your educational, artistic and community impact so that funders see your choir as a safe and meaningful investment.\r\n <\/div>\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n\r\n \r\n <div class=\"float-slow\">\r\n <div class=\"glass rounded-3xl p-5 shadow-2xl\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <div class=\"flex items-center gap-2\">\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-red-400\"><\/span>\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-amber-300\"><\/span>\r\n <span class=\"w-2.5 h-2.5 rounded-full bg-emerald-400\"><\/span>\r\n <\/div>\r\n <div class=\"text-[0.65rem] text-slate-400 tracking-[0.2em] uppercase\">\r\n Choir Website Mockup\r\n <\/div>\r\n <\/div>\r\n <div class=\"bg-slate-900\/80 rounded-2xl p-6 space-y-4\">\r\n <div class=\"h-8 w-2\/3 bg-gradient-to-r from-brand-gold\/80 to-amber-100\/80 rounded-full\"><\/div>\r\n <div class=\"h-3 w-3\/4 bg-slate-700\/80 rounded-full\"><\/div>\r\n <div class=\"h-3 w-2\/3 bg-slate-700\/60 rounded-full\"><\/div>\r\n <div class=\"grid grid-cols-3 gap-3 pt-4\">\r\n <div class=\"bg-slate-800\/70 rounded-2xl h-20\"><\/div>\r\n <div class=\"bg-slate-800\/70 rounded-2xl h-20\"><\/div>\r\n <div class=\"bg-slate-800\/70 rounded-2xl h-20\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <p class=\"mt-4 text-xs text-slate-400 text-center\">\r\n Designed for choirs, not generic businesses.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"guide\" class=\"section bg-brand-darker\/70\">\r\n <div class=\"max-w-5xl mx-auto px-4 grid gap-8 md:grid-cols-[1.4fr,1fr] items-start\">\r\n <div>\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">Your Guide<\/p>\r\n <h2 class=\"text-3xl font-display mb-4\">We are choir people who speak design and rehearsal language.<\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 mb-4\">\r\n Most agencies don\u2019t understand what it means to build a choir season, prepare auditions, or write to school administrators and donors.\r\n We do. We work only with choirs, vocal ensembles and choral organizations.\r\n <\/p>\r\n <p class=\"text-sm md:text-base text-slate-200 mb-4\">\r\n Our team combines experience in choral composition, artistic direction and UX\/UI design. That means your website won\u2019t just \u201clook modern\u201d;\r\n it will be structured to answer the questions that singers, audiences and sponsors actually ask.\r\n <\/p>\r\n <p class=\"text-sm text-slate-400\">\r\n <span class=\"font-semibold text-slate-200\">We know how much work goes behind every concert.<\/span> \r\n <br \/>\r\n <span class=\"font-semibold text-slate-200\">We\u2019ve helped choirs on different continents turn their online presence into a real asset.<\/span>\r\n <\/p>\r\n <\/div>\r\n <div class=\"glass rounded-3xl p-6 text-sm text-slate-200 space-y-3\">\r\n <h3 class=\"font-semibold text-lg\">What directors tell us before working together<\/h3>\r\n <ul class=\"space-y-2 text-slate-300\">\r\n <li>\u201cOur site is embarrassing. I avoid sending it to conductors I admire.\u201d<\/li>\r\n <li>\u201cParents can\u2019t find clear information; I keep answering the same emails.\u201d<\/li>\r\n <li>\u201cWe know our choir is good\u2026 but online we look like a hobby group.\u201d<\/li>\r\n <\/ul>\r\n <p class=\"text-xs text-slate-400 pt-2\">\r\n Your website shouldn\u2019t betray the quality of your sound. It should introduce it.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"plan\" class=\"section bg-brand-dark\/40\">\r\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">The Plan<\/p>\r\n <h2 class=\"text-3xl font-display mb-4\">Working with us is simple.<\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-8\">\r\n You don\u2019t need to become a web developer. You just need a clear process and someone who understands choirs.\r\n <\/p>\r\n\r\n <div class=\"grid gap-6 md:grid-cols-3 text-left\">\r\n <div class=\"glass rounded-2xl p-5\">\r\n <div class=\"pill inline-flex items-center justify-center px-3 py-1 text-[0.7rem] text-slate-200 mb-3\">\r\n Step 1\r\n <\/div>\r\n <h3 class=\"font-semibold mb-2 text-lg\">Free website review<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n We look at your current online presence and identify what\u2019s stopping people from joining, buying or funding your choir.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-5\">\r\n <div class=\"pill inline-flex items-center justify-center px-3 py-1 text-[0.7rem] text-slate-200 mb-3\">\r\n Step 2\r\n <\/div>\r\n <h3 class=\"font-semibold mb-2 text-lg\">Design your digital stage<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n We create a choir-specific layout, write strategic copy and design each page around your goals for the next seasons.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"glass rounded-2xl p-5\">\r\n <div class=\"pill inline-flex items-center justify-center px-3 py-1 text-[0.7rem] text-slate-200 mb-3\">\r\n Step 3\r\n <\/div>\r\n <h3 class=\"font-semibold mb-2 text-lg\">Launch & support<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n We launch the site, connect your tools (mailing lists, ticket links, donations) and stay available for adjustments.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"mt-8\">\r\n <a\r\n href=\"#cta-final\"\r\n class=\"btn-primary inline-flex items-center justify-center px-8 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase shadow-lg transition-all\"\r\n >\r\n Start with a free review\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"explainer\" class=\"section-sm bg-brand-darker\/80\">\r\n <div class=\"max-w-4xl mx-auto px-4\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3 text-center\">What we actually build<\/p>\r\n <h2 class=\"text-2xl md:text-3xl font-display mb-4 text-center\">\r\n Your website becomes the place where your choir\u2019s story is always ready.\r\n <\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 leading-relaxed\">\r\n At Choir Web Design we build websites specifically for choirs and vocal ensembles. We start by listening to your goals:\r\n do you need more committed singers, more audience, stronger educational impact, or stable sponsorships?\r\n Then we design a clear structure where every page has a job: the homepage introduces who you are and why your choir matters;\r\n the \u201cJoin Us\u201d page answers all the questions that potential singers are afraid to ask; the \u201cConcerts\u201d page makes it easy\r\n to attend or support each performance; and the \u201cSupport Us\u201d page tells funders exactly how their help will create artistic\r\n and social impact. Instead of a collection of disconnected pages, you get a coherent digital stage that works 24\/7 so\r\n your rehearsals are never wasted on an invisible project.\r\n <\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"success\" class=\"section bg-brand-dark\/40\">\r\n <div class=\"max-w-5xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">The Result<\/p>\r\n <h2 class=\"text-3xl md:text-4xl font-display mb-4\">\r\n Imagine directing a choir that is fully visible, supported and growing.\r\n <\/h2>\r\n <div class=\"grid gap-6 md:grid-cols-3 text-left mt-6\">\r\n <div class=\"glass rounded-2xl p-5\">\r\n <h3 class=\"font-semibold mb-1 text-lg\">Confident invitations<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n You proudly send your website to guest conductors, festivals and institutions knowing it represents your real level.\r\n <\/p>\r\n <\/div>\r\n <div class=\"glass rounded-2xl p-5\">\r\n <h3 class=\"font-semibold mb-1 text-lg\">Stronger seasons<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n With clearer communication, auditions fill, audience grows and you can plan more ambitious repertoire and tours.\r\n <\/p>\r\n <\/div>\r\n <div class=\"glass rounded-2xl p-5\">\r\n <h3 class=\"font-semibold mb-1 text-lg\">Sustainable support<\/h3>\r\n <p class=\"text-sm text-slate-300\">\r\n Donors and institutions see the impact of your work and feel safe committing to multi-year support.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"pricing\" class=\"section bg-brand-darker\">\r\n <div class=\"max-w-5xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">Packages<\/p>\r\n <h2 class=\"text-3xl font-display mb-2\">Choose the level that fits your choir.<\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-8\">\r\n Every project begins with a free website review. From there, we recommend the package that matches your goals and budget.\r\n <\/p>\r\n\r\n <div class=\"grid gap-6 md:grid-cols-3 text-left\">\r\n \r\n <div class=\"glass rounded-2xl p-5 flex flex-col\">\r\n <h3 class=\"font-semibold text-lg mb-1\">Prelude<\/h3>\r\n <p class=\"text-sm text-slate-300 mb-2\">For small choirs that need a clean, serious online home.<\/p>\r\n <p class=\"text-sm font-semibold text-brand-gold mb-3\">4 key pages \u00b7 Strategic copy \u00b7 Basic audition form<\/p>\r\n\r\n \r\n <div class=\"mb-3\">\r\n <p class=\"text-xs text-slate-400\">\r\n Standard: <span class=\"line-through\">$2,000<\/span>\r\n <\/p>\r\n <p class=\"text-xl font-semibold text-brand-gold\">From $1,100<\/p>\r\n <p class=\"text-[0.7rem] text-slate-400\">\r\n Discount available until May 2026.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"text-sm text-slate-300 space-y-1 mb-4\">\r\n <li>\u2713 Homepage & \u201cAbout the Choir\u201d<\/li>\r\n <li>\u2713 Join Us \/ Auditions page<\/li>\r\n <li>\u2713 Concerts \/ Events overview<\/li>\r\n <li>\u2713 Simple contact and donation links<\/li>\r\n <\/ul>\r\n <div class=\"mt-auto space-y-3\">\r\n <p class=\"text-[0.75rem] text-slate-500 mb-1\">\r\n Best for school, community and church choirs starting to take their online presence seriously.\r\n <\/p>\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=I%20want%20to%20ask%20about%20the%20Prelude%20package&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%27ve%20been%20exploring%20Choir%20Web%20Design%20and%20I%27m%20interested%20in%20the%20Prelude%20package%20for%20my%20choir%20at%20%5Byour%20URL%20here%3A%20_______%5D.%0A%0APlease%20feel%20free%20to%20contact%20me%20and%20tell%20me%20more%20about%20how%20we%20can%20move%20forward.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center w-full px-5 py-2.5 rounded-full text-[0.78rem] font-semibold tracking-[0.18em] uppercase shadow-lg\"\r\n >\r\n Ask about Prelude\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass rounded-2xl p-5 border-brand-gold\/60 border flex flex-col relative\">\r\n <div class=\"pill px-3 py-1 text-[0.7rem] text-brand-gold bg-brand-gold\/10 absolute -top-3 right-5\">\r\n Most Popular\r\n <\/div>\r\n <h3 class=\"font-semibold text-lg mb-1\">Symphony<\/h3>\r\n <p class=\"text-sm text-slate-300 mb-2\">For choirs that want growth in auditions, audience and donations.<\/p>\r\n <p class=\"text-sm font-semibold text-brand-gold mb-3\">Full website \u00b7 Optimized flows \u00b7 Sponsor-ready storytelling<\/p>\r\n\r\n \r\n <div class=\"mb-3\">\r\n <p class=\"text-xs text-slate-400\">\r\n Standard: <span class=\"line-through\">$4,000<\/span>\r\n <\/p>\r\n <p class=\"text-xl font-semibold text-brand-gold\">From $3,000<\/p>\r\n <p class=\"text-[0.7rem] text-slate-400\">\r\n The next 47 choirs have access to this discount.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"text-sm text-slate-300 space-y-1 mb-4\">\r\n <li>\u2713 Everything in Prelude<\/li>\r\n <li>\u2713 Detailed \u201cSupport Us\u201d \/ Fundraising page<\/li>\r\n <li>\u2713 Separate page for educational work & tours<\/li>\r\n <li>\u2713 Email capture and newsletter integration<\/li>\r\n <\/ul>\r\n <div class=\"mt-auto space-y-3\">\r\n <p class=\"text-[0.75rem] text-slate-500\">\r\n Ideal for independent ensembles, university choirs and organizations preparing bigger seasons.\r\n <\/p>\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=I%20want%20to%20ask%20about%20the%20Symphony%20package&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%27ve%20been%20exploring%20Choir%20Web%20Design%20and%20I%27m%20interested%20in%20the%20Symphony%20package%20for%20my%20choir%20at%20%5Byour%20URL%20here%3A%20_______%5D.%0A%0APlease%20feel%20free%20to%20contact%20me%20and%20tell%20me%20more%20about%20how%20we%20can%20move%20forward.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center w-full px-5 py-2.5 rounded-full text-[0.78rem] font-semibold tracking-[0.18em] uppercase shadow-lg\"\r\n >\r\n Ask about Symphony\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"glass rounded-2xl p-5 flex flex-col\">\r\n <h3 class=\"font-semibold text-lg mb-1\">Opera<\/h3>\r\n <p class=\"text-sm text-slate-300 mb-2\">For institutions and festivals with complex needs.<\/p>\r\n <p class=\"text-sm font-semibold text-brand-gold mb-3\">Multi-choir sites \u00b7 Multiple languages \u00b7 Advanced integrations<\/p>\r\n\r\n \r\n <div class=\"mb-3\">\r\n <p class=\"text-xs text-slate-400\">\r\n Standard: <span class=\"line-through\">$8,000<\/span>\r\n <\/p>\r\n <p class=\"text-xl font-semibold text-brand-gold\">From $6,000<\/p>\r\n <p class=\"text-[0.7rem] text-slate-400\">\r\n Discount available until May 2026.\r\n <\/p>\r\n <\/div>\r\n\r\n <ul class=\"text-sm text-slate-300 space-y-1 mb-4\">\r\n <li>\u2713 Custom architecture and content strategy<\/li>\r\n <li>\u2713 Multi-site or multi-ensemble structures<\/li>\r\n <li>\u2713 Advanced integrations (CRM, ticketing, LMS)<\/li>\r\n <li>\u2713 Long-term design & content support<\/li>\r\n <li>\u2713 Secure member portal (rehearsal calendar, internal materials for your singers)<\/li>\r\n <\/ul>\r\n <div class=\"mt-auto space-y-3\">\r\n <p class=\"text-[0.75rem] text-slate-500 mb-1\">\r\n Designed with boards, artistic leadership and administrative teams at the same table.\r\n <\/p>\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=I%20want%20to%20ask%20about%20the%20Opera%20package&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%27ve%20been%20exploring%20Choir%20Web%20Design%20and%20I%27m%20interested%20in%20the%20Opera%20package%20for%20my%20choir%20at%20%5Byour%20URL%20here%3A%20_______%5D.%0A%0APlease%20feel%20free%20to%20contact%20me%20and%20tell%20me%20more%20about%20how%20we%20can%20move%20forward.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center w-full px-5 py-2.5 rounded-full text-[0.78rem] font-semibold tracking-[0.18em] uppercase shadow-lg\"\r\n >\r\n Ask about Opera\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n<section id=\"lead-magnet\" class=\"section bg-brand-dark\/70\">\r\n <div class=\"max-w-4xl mx-auto px-4 glass rounded-3xl p-6 md:p-8 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">\r\n Free Resource\r\n <\/p>\r\n\r\n <h2 class=\"text-2xl md:text-3xl font-display mb-3\">\r\n Download the \u201cChoir Website Checklist\u201d.\r\n <\/h2>\r\n\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-5\">\r\n A one-page checklist that shows you the 12 elements every choir website needs\r\n so directors, singers, audiences and sponsors always find what they are looking for.\r\n <\/p>\r\n\r\n \r\n <div class=\"max-w-xl mx-auto\">\r\n <style>\r\n \/* Reset b\u00e1sico dentro del embed para usar tu tipograf\u00eda\/est\u00e9tica *\/\r\n #mlb2-33937234 h4,\r\n #mlb2-33937234 p,\r\n #mlb2-33937234 span,\r\n #mlb2-33937234 button {\r\n font-family: inherit;\r\n text-transform: none;\r\n letter-spacing: normal;\r\n }\r\n\r\n \/* CONTENEDOR GENERAL DEL FORM *\/\r\n #mlb2-33937234.ml-form-embedContainer {\r\n width: 100% !important;\r\n margin: 0 !important;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedWrapper {\r\n background: transparent;\r\n border: 0;\r\n box-shadow: none;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n\r\n \/* Quitamos padding interno, usamos el del \"glass\" tuyo *\/\r\n #mlb2-33937234 .ml-form-embedBody {\r\n padding: 0;\r\n }\r\n\r\n \/* Ocultamos el t\u00edtulo y texto internos de MailerLite (ya los ten\u00e9s arriba) *\/\r\n #mlb2-33937234 .ml-form-embedContent {\r\n display: none;\r\n }\r\n\r\n \/* ---------- LAYOUT: INPUT + BOT\u00d3N ---------- *\/\r\n \/* El flex tiene que ir en el FORM, no en el body *\/\r\n #mlb2-33937234 .ml-block-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n align-items: stretch;\r\n justify-content: center;\r\n margin: 0;\r\n width: 100%;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-formContent {\r\n margin: 0;\r\n width: 100%;\r\n flex: 1 1 auto;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit {\r\n margin: 0;\r\n width: 100%;\r\n flex: 0 0 auto;\r\n display: flex;\r\n justify-content: center;\r\n }\r\n\r\n @media (min-width: 640px) {\r\n #mlb2-33937234 .ml-block-form {\r\n flex-direction: row; \/* input y bot\u00f3n al costado *\/\r\n align-items: center;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit {\r\n width: auto;\r\n justify-content: flex-start; \/* bot\u00f3n pegado al input *\/\r\n }\r\n }\r\n\r\n \/* ---------- INPUT ---------- *\/\r\n #mlb2-33937234 input[type=\"email\"] {\r\n background-color: rgba(15, 23, 42, 0.9); \/* fondo oscuro tipo glass *\/\r\n border-radius: 9999px;\r\n border: 1px solid rgba(148, 163, 184, 0.6);\r\n padding: 0.75rem 1.25rem;\r\n font-size: 0.875rem;\r\n line-height: 1.25rem;\r\n color: #e5e7eb;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n #mlb2-33937234 input[type=\"email\"]::placeholder {\r\n color: #9ca3af;\r\n }\r\n\r\n #mlb2-33937234 input[type=\"email\"]:focus {\r\n outline: none;\r\n box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.5);\r\n border-color: rgba(250, 204, 21, 0.9);\r\n }\r\n\r\n \/* ---------- BOT\u00d3N (clon de tu btn-primary con degrad\u00e9) ---------- *\/\r\n #mlb2-33937234 .ml-form-embedSubmit button.primary {\r\n border-radius: 9999px !important;\r\n background-image: linear-gradient(135deg, #e4b23a, #f0c966) !important;\r\n color: #020617 !important;\r\n padding: 0.75rem 1.75rem !important;\r\n font-size: 0.75rem !important;\r\n font-weight: 600 !important;\r\n letter-spacing: 0.2em !important;\r\n text-transform: uppercase !important;\r\n border: none !important;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);\r\n white-space: nowrap;\r\n transition: all 0.15s ease-out;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit button.primary:hover {\r\n filter: brightness(1.05);\r\n transform: translateY(-1px);\r\n box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);\r\n }\r\n\r\n #mlb2-33937234 .ml-form-embedSubmit button.primary:active {\r\n transform: translateY(0);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);\r\n }\r\n\r\n \/* Loader del bot\u00f3n (dejamos el que viene por defecto) *\/\r\n .ml-form-embedSubmitLoad {\r\n display: inline-block;\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n }\r\n\r\n .ml-form-embedSubmitLoad:after {\r\n content: \" \";\r\n display: block;\r\n width: 11px;\r\n height: 11px;\r\n margin: 1px;\r\n border-radius: 50%;\r\n border: 4px solid #fff;\r\n border-color: #ffffff #ffffff #ffffff transparent;\r\n animation: ml-form-embedSubmitLoad 1.2s linear infinite;\r\n }\r\n\r\n @keyframes ml-form-embedSubmitLoad {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n\r\n \/* Mensaje de \u00e9xito *\/\r\n #mlb2-33937234 .ml-form-successBody {\r\n padding: 0;\r\n color: #e5e7eb;\r\n text-align: center;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-successBody h4 {\r\n font-family: inherit;\r\n font-size: 1.25rem;\r\n margin-bottom: 0.5rem;\r\n }\r\n\r\n #mlb2-33937234 .ml-form-successBody p {\r\n font-family: inherit;\r\n font-size: 0.9rem;\r\n line-height: 1.5;\r\n }\r\n <\/style>\r\n\r\n <div id=\"mlb2-33937234\" class=\"ml-form-embedContainer ml-subscribe-form ml-subscribe-form-33937234\">\r\n <div class=\"ml-form-align-center\">\r\n <div class=\"ml-form-embedWrapper embedForm\">\r\n\r\n <div class=\"ml-form-embedBody ml-form-embedBodyDefault row-form\">\r\n \r\n <div class=\"ml-form-embedContent\">\r\n <h4>Download the \u201cChoir Website Checklist\u201d<\/h4>\r\n <p>A one-page checklist that shows you the 12 elements every choir website needs so directors,\r\n singers, audiences and sponsors always find what they are looking for.<\/p>\r\n <\/div>\r\n\r\n <form class=\"ml-block-form\"\r\n action=\"https:\/\/assets.mailerlite.com\/jsonp\/1949508\/forms\/172260818385110715\/subscribe\"\r\n data-code=\"\" method=\"post\" target=\"_blank\">\r\n <div class=\"ml-form-formContent\">\r\n <div class=\"ml-form-fieldRow ml-last-item\">\r\n <div class=\"ml-field-group ml-field-email ml-validate-email ml-validate-required\">\r\n <input aria-label=\"email\" aria-required=\"true\" type=\"email\" class=\"form-control\"\r\n name=\"fields[email]\" placeholder=\"Your best email\" autocomplete=\"email\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <input type=\"hidden\" name=\"ml-submit\" value=\"1\">\r\n\r\n <div class=\"ml-form-embedSubmit\">\r\n <button type=\"submit\" class=\"primary\">Send me the checklist<\/button>\r\n <button disabled=\"disabled\" style=\"display: none;\" type=\"button\" class=\"loading\">\r\n <div class=\"ml-form-embedSubmitLoad\"><\/div>\r\n <span class=\"sr-only\">Loading...<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <input type=\"hidden\" name=\"anticsrf\" value=\"true\">\r\n <\/form>\r\n <\/div>\r\n\r\n <div class=\"ml-form-successBody row-success\" style=\"display: none\">\r\n <div class=\"ml-form-successContent\">\r\n <h4>Check your inbox<\/h4>\r\n <p>We\u2019ve sent the \u201cChoir Website Checklist\u201d to your email.<\/p>\r\n <p>If it\u2019s not there in a couple of minutes, check your spam or promotions folder.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n function ml_webform_success_33937234() {\r\n var $ = ml_jQuery || jQuery;\r\n $('.ml-subscribe-form-33937234 .row-success').show();\r\n $('.ml-subscribe-form-33937234 .row-form').hide();\r\n }\r\n <\/script>\r\n <script src=\"https:\/\/groot.mailerlite.com\/js\/w\/webforms.min.js?v176e10baa5e7ed80d35ae235be3d5024\" type=\"text\/javascript\"><\/script>\r\n <script>\r\n fetch(\"https:\/\/assets.mailerlite.com\/jsonp\/1949508\/forms\/172260818385110715\/takel\")\r\n <\/script>\r\n <\/div>\r\n\r\n <p class=\"text-[0.7rem] text-slate-500 mt-3\">\r\n We send you the PDF and a short series of emails with examples and ideas you can apply even if we never work together.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n\r\n\r\n \r\n <section id=\"cta-final\" class=\"section bg-black\">\r\n <div class=\"max-w-4xl mx-auto px-4 text-center\">\r\n <p class=\"text-xs tracking-[0.25em] uppercase text-brand-gold mb-3\">Take the next step<\/p>\r\n <h2 class=\"text-3xl md:text-4xl font-display mb-4\">\r\n Let\u2019s make sure your choir is never invisible again.\r\n <\/h2>\r\n <p class=\"text-sm md:text-base text-slate-200 max-w-2xl mx-auto mb-6\">\r\n You\u2019ve invested years in your sound. Now it\u2019s time to build a digital stage that honours that work and opens new doors:\r\n better auditions, fuller halls and stronger partnerships.\r\n <\/p>\r\n\r\n <div class=\"flex flex-row flex-wrap items-center justify-center gap-4 mb-5\">\r\n <a\r\n href=\"mailto:wecraftyourplace@choirweb.design?cc=contact@santiagoveros.site,flor_ballinas@hotmail.com&subject=Free%20Website%20Review&body=Hi%2C%0A%0AIt%27s%20a%20pleasure%20to%20connect%20with%20you.%20I%20am%20really%20excited%20about%20Choir%20Web%20Design%20and%20I%20would%20love%20to%20explore%20what%20possibilities%20you%20see%20for%20my%20choir%2C%20%5Byour%20choir%20name%20here%5D.%0A%0AHere%20is%20our%20current%20website%3A%20%5Byour%20URL%20here%3A%20______%5D%0A%0ALooking%20forward%20to%20hearing%20from%20you%20and%20discovering%20how%20we%20can%20work%20together.%0A%0ABest%2C%0A%5BYour%20name%20here%5D\"\r\n class=\"btn-primary inline-flex items-center justify-center px-8 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase shadow-lg\"\r\n >\r\n Request your free website review\r\n <\/a>\r\n <a\r\n href=\"#lead-magnet\"\r\n class=\"btn-secondary inline-flex items-center justify-center px-7 py-3 rounded-full text-[0.8rem] sm:text-xs font-semibold tracking-[0.2em] uppercase\"\r\n >\r\n Not ready yet? Get the checklist\r\n <\/a>\r\n <\/div>\r\n\r\n <p class=\"text-[0.75rem] text-slate-500\">\r\n You can keep \u201cmaking do\u201d with an invisible site, or you can give your choir the online presence it deserves.\r\n <\/p>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n \r\n <footer class=\"section-sm bg-brand-darker\/90 border-t border-slate-800\/70\">\r\n <div class=\"max-w-5xl mx-auto px-4 text-sm text-slate-500 flex flex-col md:flex-row gap-6 md:items-center md:justify-between\">\r\n \r\n <div class=\"flex items-center md:items-start gap-3\">\r\n <div class=\"w-20 h-20 rounded-xl overflow-hidden flex items-center justify-center bg-transparent\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/choirweb.design\/wp-content\/uploads\/2025\/11\/Logo-Plateado.png\"\r\n alt=\"Choir Web Design logo\"\r\n class=\"w-full h-full object-contain\"\r\n \/>\r\n <\/div>\r\n\r\n <div>\r\n <p class=\"font-display tracking-[0.30em] uppercase text-[0.8rem] text-slate-300\">\r\n Choir Web Design\r\n <\/p>\r\n <p class=\"text-[0.7rem] leading-relaxed\">\r\n Helping choirs find their voice in the digital age.<br>\r\n We craft websites that recruit singers and sell tickets.\r\n <\/p>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n \r\n <div class=\"text-[0.7rem] text-slate-500 space-y-1 md:text-right\">\r\n <p class=\"font-semibold text-slate-300\">Get Your Audit<\/p>\r\n <p>\r\n Ready to start? Send us an email to get your free website review.\r\n <\/p>\r\n <p>\r\n <a href=\"mailto:wecraftyourplace@choirweb.design\" class=\"hover:text-brand-gold\">\r\n wecraftyourplace@choirweb.design\r\n <\/a>\r\n <\/p>\r\n <p class=\"pt-1 text-slate-600\">\r\n \u00a9 2025 Choir Web Design. All rights reserved.\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Most choirs sound extraordinary,<br \/>\nbut online they are almost invisible.<br \/>\nWe design choir websites that fill auditions, sell tickets and convince sponsors without you becoming a full-time marketer.<\/p>\n","protected":false},"author":1,"featured_media":168,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-115","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages\/115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/choirweb.design\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=115"}],"version-history":[{"count":5,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages\/115\/revisions"}],"predecessor-version":[{"id":251,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/pages\/115\/revisions\/251"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/choirweb.design\/index.php?rest_route=\/wp\/v2\/media\/168"}],"wp:attachment":[{"href":"https:\/\/choirweb.design\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}