PageSourceSearch

https://fresh-campaign-spark.lovable.app/assets/EcsaEmailerDesignIndex-_hh-fHLG.js

js fresh-campaign-spark.lovable.app collected 2026-10-03 03:27:04 UTC 22,187 bytes, 287 lines download raw bytes

1import{r as y,j as i}from"./index-9ZedHETz.js";const k="https://ecsa-grandfathering.eccouncil.org/",f="https://fresh-campaign-spark.lovable.app/__l5e/assets-v1/f91ac92c-733f-43a9-9856-6dc919b9c02b/ecsa-emailer-hero.jpg",z="https://fresh-campaign-spark.lovable.app/__l5e/assets-v1/77df6a04-d433-4893-8f1d-aa2d9b33da91/ec-council-logo.png",n="#001a3d",p="#002753",r="#1a6fb5",h="#00c2ff",e="#9b1c31",t="#0b1220",o="#5b6679",u="#f4f7fc",a="#e4e9f2",b=(l,c=e)=>`
2  <a href="${k}" target="_blank" style="background:${c};color:#ffffff;text-decoration:none;display:inline-block;padding:14px 32px;font-size:15px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;border-radius:4px;font-family:Arial,Helvetica,sans-serif;">
3    ${l} &rsaquo;
4  </a>`,C=()=>`<!doctype html>
5<html>
6  <head>
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9    <title>E|CSA Grandfathering Program</title>
10  </head>
11  <body style="padding:0;margin:0;background:#dbe2ec;">
12    <table width="600" align="center" border="0" cellpadding="0" cellspacing="0" style="background:#ffffff;font-family:Arial,Helvetica,sans-serif;color:${t};">
13      <tbody>
14        <tr><td>
15
16          <!-- LOGO BAR -->
17          <table width="600" border="0" cellpadding="0" cellspacing="0" style="background:${n};">
18            <tr>
19              <td align="left" style="padding:16px 40px 14px 40px;border-bottom:1px solid rgba(255,255,255,0.08);">
20                <img src="${z}" alt="EC-Council" width="150" style="display:block;border:0;height:auto;">
21              </td>
22            </tr>
23          </table>
24
25
26
27          <!-- HERO: full-bleed image with blended navy->transparent->red gradient -->
28          <table width="600" border="0" cellpadding="0" cellspacing="0" style="background:${n};">
29            <tr>
30              <td valign="middle" background="${f}" bgcolor="${n}" style="background-image:url('${f}');background-size:auto 420px;background-position:right center;background-repeat:no-repeat;" height="420">
31                <!--[if gte mso 9]>
32                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:600px;height:420px;">
33                  <v:fill type="frame" src="${f}" color="${n}" />
34                  <v:textbox inset="0,0,0,0">
35                <![endif]-->
36                <table width="600" height="420" border="0" cellpadding="0" cellspacing="0" style="background-image:linear-gradient(90deg, ${n} 0%, ${n} 28%, rgba(0,26,61,0.85) 44%, rgba(0,26,61,0.35) 64%, rgba(0,26,61,0) 80%, rgba(155,28,49,0.45) 100%);">
37                  <tr>
38                    <td width="320" valign="middle" style="padding:40px 20px 40px 36px;">
39                      <div style="display:inline-block;background:rgba(0,194,255,0.15);color:${h};font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;padding:6px 12px;border-radius:3px;border:1px solid rgba(0,194,255,0.4);">
40                        Grandfathering Pathway
41                      </div>
42                      <h1 style="margin:14px 0 10px 0;font-size:24px;line-height:30px;color:#ffffff;font-weight:800;">
43                        Get Recognized as a Certified Cybersecurity Analyst
44                      </h1>
45                      <p style="margin:0 0 14px 0;font-size:13px;line-height:20px;color:#cbd5e1;">
46                        Apply through EC-Council&rsquo;s E|CSA Grandfathering Pathway.
47                      </p>
48                      <table border="0" cellpadding="0" cellspacing="0">
49                        <tr>
50                          <td style="background:rgba(255,255,255,0.08);border-left:3px solid ${e};padding:9px 12px;">
51                            <span style="color:#ffffff;font-size:13px;line-height:18px;">
52                              <strong style="color:${h};font-size:16px;">2,900+</strong> applied.<br>
53                              <span style="color:#cbd5e1;">Have you?</span>
54                            </span>
55                          </td>
56                        </tr>
57                      </table>
58                      <div style="margin-top:18px;">${b("Check Eligibility")}</div>
59                    </td>
60                    <td width="280">&nbsp;</td>
61                  </tr>
62                </table>
63                <!--[if gte mso 9]>
64                  </v:textbox>
65                </v:rect>
66                <![endif]-->
67              </td>
68            </tr>
69          </table>
70
71
72          <!-- INTRO -->
73          <table width="600" border="0" cellpadding="0" cellspacing="0">
74            <tr>
75              <td align="center" style="padding:36px 40px 28px 40px;">
76                <div style="width:40px;height:3px;background:${e};margin:0 auto 18px auto;"></div>
77                <h2 style="margin:0 0 12px 0;font-size:22px;line-height:30px;color:${p};font-weight:800;text-align:center;">
78                  Your Experience Deserves More Than Recognition.<br>It Deserves Influence.
79                </h2>
80                <p style="margin:0 auto;font-size:15px;line-height:23px;color:${o};text-align:center;max-width:480px;">
81                  EC-Council&rsquo;s <strong style="color:${t};">E|CSA Grandfathering Program</strong> validates real-world expertise and certifies you as a Cybersecurity Analyst.
82                </p>
83              </td>
84            </tr>
85          </table>
86
87          <!-- INFOGRAPHIC: TWO PATHS SIDE-BY-SIDE -->
88          <table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="${u}">
89            <tr>
90              <td align="center" style="padding:40px 30px 8px 30px;">
91                <p style="margin:0 0 6px 0;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:${e};">Choose Your Route</p>
92                <h2 style="margin:0;font-size:24px;line-height:30px;color:${p};font-weight:800;">
93                  Two Paths. <span style="color:${e};">
93One Credential.</span>
94                </h2>
95              </td>
96            </tr>
97
98            <tr>
99              <td align="center" style="padding:24px 24px 8px 24px;">
100                <table width="540" border="0" cellpadding="0" cellspacing="0">
101                  <tr valign="top">
102
103                    <!-- LEFT CARD: Path 01 -->
104                    <td width="255" valign="top" style="background:#ffffff;border:1px solid ${a};border-top:4px solid ${r};border-radius:8px;">
105                      <table width="100%" border="0" cellpadding="0" cellspacing="0">
106                        <tr><td style="padding:18px 18px 6px 18px;">
107                          <div style="display:inline-block;background:${r};color:#ffffff;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:3px;">Path 01</div>
108                          <h3 style="margin:10px 0 4px 0;font-size:17px;line-height:22px;color:${t};font-weight:800;">Competence-Verification</h3>
109                          <p style="margin:0;font-size:12px;line-height:17px;color:${o};">Exam waived &mdash; certified through verification.</p>
110                        </td></tr>
111                        <tr><td style="padding:14px 18px 6px 18px;">
112                          <table width="100%" border="0" cellpadding="0" cellspacing="0">
113                            <tr><td style="padding:8px 0;border-bottom:1px solid ${a};">
114                              <table border="0" cellpadding="0" cellspacing="0"><tr>
115                                <td width="30" valign="middle"><div style="width:22px;height:22px;border-radius:50%;background:${r};color:#fff;font-size:11px;font-weight:800;line-height:22px;text-align:center;font-family:Arial,sans-serif;">1</div></td>
116                                <td style="font-size:13px;line-height:18px;color:${t};font-weight:700;">Submit application</td>
117                              </tr></table>
118                            </td></tr>
119                            <tr><td style="padding:8px 0;border-bottom:1px solid ${a};">
120                              <table border="0" cellpadding="0" cellspacing="0"><tr>
121                                <td width="30" valign="middle"><div style="width:22px;height:22px;border-radius:50%;background:${r};color:#fff;font-size:11px;font-weight:800;line-height:22px;text-align:center;font-family:Arial,sans-serif;">2</div></td>
122                                <td style="font-size:13px;line-height:18px;color:${t};font-weight:700;">2 verifiers review</td>
123                              </tr></table>
124                            </td></tr>
125                            <tr><td style="padding:8px 0;">
126                              <table border="0" cellpadding="0" cellspacing="0"><tr>
127                                <td width="30" valign="middle"><div style="width:22px;height:22px;border-radius:50%;background:${r};color:#fff;font-size:12px;font-weight:800;line-height:22px;text-align:center;font-family:Arial,sans-serif;">&#10003;</div></td>
128                                <td style="font-size:13px;line-height:18px;color:${t};font-weight:700;">Get certified</td>
129                              </tr></table>
130                            </td></tr>
131                          </table>
132                        </td></tr>
133                        <tr><td style="padding:10px 18px 18px 18px;">
134                          <div style="background:${u};border-left:3px solid ${r};padding:10px 12px;font-size:12px;line-height:17px;color:${t};">
135                            <strong style="color:${r};">Best for:</strong> Seasoned analysts with a strong professional record.
136                          </div>
137                        </td></tr>
138                      </table>
139                    </td>
140
141                    <td width="30" align="center" valign="middle">
142                      <div style="background:${t};color:#ffffff;font-size:10px;font-weight:800;width:30px;height:30px;line-height:30px;border-radius:50%;text-align:center;font-family:Arial,sans-serif;">OR</div>
143                    </td>
144
145                    <!-- RIGHT CARD: Path 02 -->
146                    <td width="255" valign="top" style="background:#ffffff;border:1px solid ${a};border-top:4px solid ${e};border-radius:8px;">
147                      <table width="100%" border="0" cellpadding="0" cellspacing="0">
148                        <tr><td style="padding:18px 18px 6px 18px;">
149                          <div style="display:inline-block;background:${e};color:#ffffff;font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:4px 10px;border-radius:3px;">Path 02</div>
150                          <h3 style="margin:10px 0 4px 0;font-size:17px;line-height:22px;color:${t};font-weight:800;">Skills-Validation</h3>
151                          <p style="margin:0;font-size:12px;line-height:17px;color:${o};">
151Full kit + exam to prove your skills.</p>
152                        </td></tr>
153                        <tr><td style="padding:14px 18px 6px 18px;">
154                          <table width="100%" border="0" cellpadding="0" cellspacing="0">
155                            <tr><td style="padding:8px 0;border-bottom:1px solid ${a};">
156                              <table border="0" cellpadding="0" cellspacing="0"><tr>
157                                <td width="30" valign="middle"><div style="width:22px;height:22px;border-radius:50%;background:${e};color:#fff;font-size:11px;font-weight:800;line-height:22px;text-align:center;font-family:Arial,sans-serif;">1</div></td>
158                                <td style="font-size:13px;line-height:18px;color:${t};font-weight:700;">Submit application</td>
159                              </tr></table>
160                            </td></tr>
161                            <tr><td style="padding:8px 0;border-bottom:1px solid ${a};">
162                              <table border="0" cellpadding="0" cellspacing="0"><tr>
163                                <td width="30" valign="middle"><div style="width:22px;height:22px;border-radius:50%;background:${e};color:#fff;font-size:11px;font-weight:800;line-height:22px;text-align:center;font-family:Arial,sans-serif;">2</div></td>
164                                <td style="font-size:13px;line-height:18px;color:${t};font-weight:700;">Study with courseware</td>
165                              </tr></table>
166                            </td></tr>
167                            <tr><td style="padding:8px 0;">
168                              <table border="0" cellpadding="0" cellspacing="0"><tr>
169                                <td width="30" valign="middle"><div style="width:22px;height:22px;border-radius:50%;background:${e};color:#fff;font-size:12px;font-weight:800;line-height:22px;text-align:center;font-family:Arial,sans-serif;">&#10003;</div></td>
170                                <td style="font-size:13px;line-height:18px;color:${t};font-weight:700;">Pass exam &amp; certify</td>
171                              </tr></table>
172                            </td></tr>
173                          </table>
174                        </td></tr>
175                        <tr><td style="padding:10px 18px 18px 18px;">
176                          <div style="background:#fff1f3;border-left:3px solid ${e};padding:10px 12px;font-size:12px;line-height:17px;color:${t};">
177                            <strong style="color:${e};">Includes:</strong> Courseware, videos &amp; exam voucher.
178                          </div>
179                        </td></tr>
180                      </table>
181                    </td>
182
183                  </tr>
184                </table>
185              </td>
186            </tr>
187
188            <!-- AT-A-GLANCE STRIP -->
189            <tr>
190              <td align="center" style="padding:8px 24px 0 24px;">
191                <table width="540" border="0" cellpadding="0" cellspacing="0" style="background:#ffffff;border:1px solid ${a};border-radius:8px;">
192                  <tr>
193                    <td width="180" align="center" style="padding:14px 8px;border-right:1px solid ${a};">
194                      <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:${o};font-weight:800;">Verifiers</div>
195                      <div style="margin-top:6px;font-size:13px;color:${t};font-weight:700;"><span style="color:${r};">2 nominated</span> &nbsp;|&nbsp; <span style="color:${e};">1 reviewer</span></div>
196                    </td>
197                    <td width="180" align="center" style="padding:14px 8px;border-right:1px solid ${a};">
198                      <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:${o};font-weight:800;">Exam</div>
199                      <div style="margin-top:6px;font-size:13px;color:${t};font-weight:700;"><span style="color:${r};">Waived</span> &nbsp;|&nbsp; <span style="color:${e};">Required</span></div>
200                    </td>
201                    <td width="180" align="center" style="padding:14px 8px;">
202                      <div style="font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:${o};font-weight:800;">Outcome</div>
203                      <div style="margin-top:6px;font-size:13px;color:${p};font-weight:800;">E|CSA Certified</div>
204                    </td>
205                  </tr>
206                </table>
207              </td>
208            </tr>
209
210
211            <tr>
212              <td align="center" style="padding:24px 40px 40px 40px;">
213                ${b("View Eligibility Requirements")}
214              </td>
215            </tr>
216          </table>
217
218          <!-- WHY APPLYING -->
219          <table width="600" border="0" cellpadding="0" cellspacing="0">
220            <tr>
221              <td align="center" style="padding:40px 40px 8px 40px;">
222                <p style="margin:0 0 6px 0;font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:${e};">
223                  Why Experienced Professionals Are Applying
224                </p>
225                <h2 style="margin:6px 0 18px 0;font-size:22px;line-height:28px;color:${p};font-weight:800;">
226                  Trusted by Cybersecurity Professionals
227                </h2>
228              </td>
229            </tr>
230            <tr>
231              <td align="center" style="padding:0 40px 8px 40px;">
232                <table width="520" border="0" cellpadding="0" cellspacing="0">
233                  ${[["01","Validate Real-World Expertise","Across operations, governance, architecture, threat management, and response."],["02","Strengthen Credibility","With formal recognition from EC-Council."],["03","Join the Community","Of experienced cybersecurity practitioners shaping analyst excellence."],["04","Showcase Experience","To employers, clients, peers, and industry networks."],["05","Future-Proof Your Career","Adapt to AI, automation, and emerging threats."]].map(([l,c,x])=>`
234                    <tr valign="top">
235                      <td width="56" style="padding:10px 14px 10px 0;">
236                        <div style="width:42px;height:42px;background:${p};color:${h};font-size:14px;font-weight:800;text-align:center;line-height:42px;border-radius:6px;">${l}</div>
237                      </td>
238                      <td style="padding:10px 0;">
239                        <strong style="display:block;font-size:15px;line-height:20px;color:${t};margin-bottom:3px;">${c}</strong>
240                        <span style="font-size:14px;line-height:20px;color:${o};">${x}</span>
241                      </td>
242                    </tr>`).join("")}
243                </table>
244              </td>
245            </tr>
246          </table>
247
248          <!-- FINAL CTA -->
249          <table width="600" border="0" cellpadding="0" cellspacing="0" style="background:${n};background-image:linear-gradient(135deg,${n} 0%,${p} 100%);">
250            <tr>
251              <td align="center" style="padding:36px 40px;">
252                <h2 style="margin:0 0 10px 0;font-size:22px;line-height:28px;color:#ffffff;font-weight:800;">
253                  Have your experience recognized.
254                </h2>
255                <p style="margin:0 0 20px 0;font-size:14px;line-height:21px;color:#b8c5d6;max-width:420px;">
256                  Help shape the future of cybersecurity with EC-Council&rsquo;s E|CSA Grandfathering pathway.
257                </p>
258                ${b("Apply Now")}
259              </td>
260            </tr>
261          </table>
262
263          <!-- Footer -->
264          <table width="600" border="0" cellpadding="0" cellspacing="0">
265            <tr>
266              <td align="center" bgcolor="#010101" style="padding:20px 10px;font-family:Verdana,Arial,sans-serif;color:#f8f8f8;font-size:12px;line-height:20px;">
267                <table align="center" cellspacing="0" cellpadding="0">
268                  <tr>
269                    <td style="padding-right:10px;"><a href="https://www.facebook.com/ECCouncil/"><img src="https://edm-image.s3.us-west-2.amazonaws.com/2022/feb/facebook-icon.png" alt="facebook" style="border:0;"></a></td>
270                    <td style="padding-right:10px;"><a href="https://www.youtube.com/user/eccouncilusa"><img src="https://edm-image.s3.us-west-2.amazonaws.com/2022/feb/YouTube-icon.png" alt="youtube" style="border:0;"></a></td>
271                    <td style="padding-right:10px;"><a href="https://www.instagram.com/eccouncil/"><img src="https://edm-image.s3.us-west-2.amazonaws.com/2025/August/CEH-HOF-Partner-EDM/Instagram.png" alt="instagram" style="border:0;"></a></td>
272                    <td style="padding-right:10px;"><a href="https://twitter.com/ECCOUNCIL"><img src="https://edm-image.s3.us-west-2.amazonaws.com/2022/feb/twitter-icon.png" alt="twitter" style="border:0;"></a></td>
273                    <td><a href="https://www.linkedin.com/company/ec-council"><img src="https://edm-image.s3.us-west-2.amazonaws.com/2022/feb/linkedin-icon.png" alt="linkedin" style="border:0;"></a></td>
274                  </tr>
275                </table>
276                <div style="margin-top:12px;font-size:11px;">
277                  <strong>Copyright &copy; 2025 <a href="https://www.eccouncil.org/" target="_blank" style="text-decoration:none;color:#fefefe;">EC-Council</a> | <a href="https://www.eccouncil.org/privacy-statement/" target="_blank" style="text-decoration:none;color:#fefefe;">Privacy Statement</a></strong>
278                </div>
279              </td>
280            </tr>
281          </table>
282
283        </td></tr>
284      </tbody>
285    </table>
286  </body>
287</html>`,A=()=>{const l=y.useMemo(C,[]),[c,x]=y.useState(!1),w=async()=>{await navigator.clipboard.writeText(l),x(!0),setTimeout(()=>x(!1),1800)},v=()=>{const d=new Blob([l],{type:"text/html"}),g=URL.createObjectURL(d),s=document.createElement("a");s.href=g,s.download="ECSA_Grandfathering_Emailer.html",s.click(),URL.revokeObjectURL(g)};return i.jsxs("div",{className:"min-h-screen bg-slate-100",children:[i.jsx("div",{className:"sticky top-0 z-10 bg-white border-b border-slate-200",children:i.jsxs("div",{className:"max-w-5xl mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-3",children:[i.jsxs("div",{children:[i.jsx("h1",{className:"text-lg font-bold text-slate-900",children:"E|CSA Grandfathering Emailer"}),i.jsx("p",{className:"text-xs text-slate-500",children:"Infographic comparison · 600px email-safe HTML"})]}),i.jsxs("div",{className:"flex gap-2",children:[i.jsx("button",{onClick:w,className:"px-3 py-2 text-sm font-semibold rounded-md bg-slate-900 text-white hover:bg-slate-800 transition",children:c?"Copied!":"Copy HTML"}),i.jsx("button",{onClick:v,className:"px-3 py-2 text-sm font-semibold rounded-md bg-blue-700 text-white hover:bg-blue-800 transition",children:"Download .html"})]})]})}),i.jsx("div",{className:"py-8 px-4 flex justify-center overflow-hidden",children:i.jsx("div",{className:"origin-top mx-auto",style:{width:620,height:1900,transform:"scale(var(--email-scale, 1))",transformOrigin:"top center"},ref:d=>{if(!d)return;const g=()=>{const s=d.parentElement;if(!s)return;const $=s.clientWidth-8,m=Math.min(1,$/620);d.style.setProperty("--email-scale",String(m)),d.style.marginBottom=`${-1900*(1-m)}px`};g(),window.addEventListener("resize",g)},children:i.jsx("iframe",{title:"ECSA Emailer Preview",srcDoc:l,className:"w-[620px] h-[1900px] bg-white shadow-xl border border-slate-200 rounded"})})})]})};export{A as default};

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.