Une erreur s'est produite lors du traitement du modèle. 
Syntax error in template "18378663404775#20120#121715" in line 393, column 48:
Encountered "index", but was expecting one of these patterns:
    ","
    ">"
1<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap"> 
2<style>:root { 
3    --bg: #fff; 
4    --alt: #f3f6fc; 
5    --card: #fff; 
6    --ink: #0b1f3a; 
7    --mut: #56657d; 
8    --line: #dde4f0; 
9    --blue: #1f5fff; 
10    --gold: #b8893b; 
11    --hero: #0b1f3a 
12} 
13 
14* { 
15    box-sizing: border-box 
16} 
17 
18.cs { 
19    font-family: 'Manrope', system-ui, sans-serif; 
20    line-height: 1.6; 
21    color: var(--ink); 
22    background: var(--bg) 
23} 
24 
25.cs .w { 
26    max-width: 1120px; 
27    margin: 0 auto; 
28    padding: 0 20px 
29} 
30 
31.cs .hero { 
32    background: var(--hero); 
33    color: #fff; 
34    padding: 56px 0 
35} 
36 
37.cs .hero h1 { 
38    font-size: clamp(30px, 5vw, 50px); 
39    line-height: 1.15; 
40    margin: 14px 0; 
41    max-width: 800px 
42} 
43 
44.cs .hero h1 em { 
45    font-style: normal; 
46    color: #e0b76a 
47} 
48 
49.cs .hero p { 
50    max-width: 660px; 
51    opacity: .85; 
52    margin: 0 0 8px 
53} 
54 
55.cs .meta { 
56    display: grid; 
57    grid-template-columns: 1fr 1fr 2.4fr; 
58    gap: 1px; 
59    background: #ffffff26; 
60    border-radius: 12px; 
61    overflow: hidden; 
62    margin-top: 24px 
63} 
64 
65@media(max-width:700px) { 
66    .cs .meta { 
67        grid-template-columns: 1fr 
68    } 
69} 
70 
71.cs .meta div { 
72    background: #13294a; 
73    padding: 18px 20px 
74} 
75 
76.cs .meta small { 
77    display: block; 
78    font-size: 11px; 
79    letter-spacing: 1.5px; 
80    text-transform: uppercase; 
81    color: #e0b76a 
82} 
83 
84.cs .meta span { 
85    font-weight: 600; 
86    font-size: 14px 
87} 
88 
89.cs .chips { 
90    display: flex; 
91    flex-wrap: wrap; 
92    gap: 8px; 
93    margin-top: 6px 
94} 
95 
96.cs .chips span { 
97    background: #ffffff14; 
98    border: 1px solid #ffffff30; 
99    color: #fff; 
100    font-size: 12px; 
101    padding: 4px 11px; 
102    border-radius: 99px 
103} 
104 
105.cs section { 
106    padding: 56px 0 
107} 
108 
109.cs .alt { 
110    background: var(--alt) 
111} 
112 
113.cs .tag { 
114    font-size: 12px; 
115    font-weight: 800; 
116    letter-spacing: 2px; 
117    text-transform: uppercase; 
118    color: var(--blue) 
119} 
120 
121.cs h2 { 
122    font-size: clamp(24px, 3.5vw, 32px); 
123    margin: 8px 0 18px 
124} 
125 
126.cs .lead { 
127    max-width: 780px; 
128    color: var(--mut); 
129    font-size: 16px 
130} 
131 
132.cs .g2 { 
133    display: grid; 
134    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
135    gap: 24px; 
136    margin-top: 20px 
137} 
138 
139.cs .g3 { 
140    display: grid; 
141    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
142    gap: 20px; 
143    margin-top: 20px 
144} 
145 
146.cs .card { 
147    background: var(--card); 
148    border: 1px solid var(--line); 
149    border-radius: 14px; 
150    padding: 24px 
151} 
152 
153.cs .card h3 { 
154    margin: 0 0 10px; 
155    font-size: 18px 
156} 
157 
158.cs ul.x { 
159    list-style: none; 
160    padding: 0; 
161    margin: 0 
162} 
163 
164.cs ul.x li { 
165    padding: 8px 0 8px 24px; 
166    position: relative; 
167    font-size: 15px; 
168    border-bottom: 1px dashed var(--line) 
169} 
170 
171.cs ul.x li:last-child { 
172    border: 0 
173} 
174 
175.cs ul.x li:before { 
176    content: ""; 
177    position: absolute; 
178    left: 0; 
179    top: 14px; 
180    width: 8px; 
181    height: 8px; 
182    border-radius: 50%; 
183    background: var(--gold) 
184} 
185 
186.cs ul.x.ok li:before { 
187    background: var(--blue) 
188} 
189 
190.cs .tbl { 
191    width: 100%; 
192    border-collapse: collapse; 
193    background: var(--card); 
194    border: 1px solid var(--line); 
195    border-radius: 14px; 
196    overflow: hidden; 
197    font-size: 14px; 
198    margin-top: 16px 
199} 
200 
201.cs .tbl th { 
202    background: var(--hero); 
203    color: #fff; 
204    text-align: left; 
205    padding: 12px 16px 
206} 
207 
208.cs .tbl td { 
209    padding: 11px 16px; 
210    border-top: 1px solid var(--line) 
211} 
212 
213.cs .scroll { 
214    overflow-x: auto 
215} 
216 
217.cs .step { 
218    display: flex; 
219    gap: 14px 
220} 
221 
222.cs .num { 
223    width: 32px; 
224    height: 32px; 
225    border-radius: 50%; 
226    background: var(--blue); 
227    color: #fff; 
228    display: grid; 
229    place-items: center; 
230    font-weight: 800; 
231    flex: none; 
232    font-size: 14px 
233} 
234 
235.cs .out { 
236    background: var(--hero); 
237    color: #fff; 
238    text-align: center; 
239    border-radius: 16px; 
240    padding: 44px 24px 
241} 
242 
243.cs .out .path { 
244    display: flex; 
245    flex-wrap: wrap; 
246    justify-content: center; 
247    gap: 8px; 
248    margin: 20px 0 
249} 
250 
251.cs .out .path span { 
252    background: #ffffff18; 
253    padding: 8px 14px; 
254    border-radius: 99px; 
255    font-size: 13px; 
256    font-weight: 700 
257} 
258 
259.cs .out h3 { 
260    color: #e0b76a; 
261    font-size: 20px; 
262    margin: 16px 0 0 
263} 
264 
265</style> 
266 
267<div class="cs"> 
268 
269<#-- ===================== HERO ===================== --> 
270<header class="hero"><div class="w"> 
271 
272  <#-- Wrap the highlighted phrase (heroHighlight) inside the full title (heroTitle) 
273       in <em>, which the CSS above renders in gold instead of italic. --> 
274  <#assign fullTitle = heroTitle.getData()!""> 
275  <#assign highlight = heroHighlight.getData()!""> 
276  <#if highlight?has_content && fullTitle?contains(highlight)> 
277    <#assign titleHtml = fullTitle?replace(highlight, "<em>" + highlight + "</em>")> 
278  <#else> 
279    <#assign titleHtml = fullTitle> 
280  </#if> 
281 
282  <h1>${titleHtml}</h1> 
283  <p>${heroDescription.getData()!""}</p> 
284 
285  <div class="meta"> 
286    <div><small>Client</small><span>${client.getData()!""}</span></div> 
287    <div><small>Industry</small><span>${industry.getData()!""}</span></div> 
288    <div> 
289      <small>Services Provided by GIKS INDIA</small> 
290      <div class="chips"> 
291        <#list services.getSiblings() as service> 
292          <span>${service.getData()}</span> 
293        </#list> 
294      </div> 
295    </div> 
296  </div> 
297</div></header> 
298 
299<#-- ===================== PROJECT OVERVIEW (label hardcoded) ===================== --> 
300<section><div class="w"> 
301  <div class="tag">Project Overview</div> 
302  <p class="lead">${overviewText.getData()!""}</p> 
303</div></section> 
304 
305<#-- ===================== THE CHALLENGE (label hardcoded, heading dynamic) ===================== --> 
306<section class="alt"><div class="w"> 
307  <div class="tag">The Challenge</div> 
308  <h2>${challengeHeading.getData()!""}</h2> 
309  <p class="lead">${challengeDescription.getData()!""}</p> 
310  <div class="g2"> 
311    <#list challengeCards.getSiblings() as card> 
312      <div class="card"> 
313        <h3>${card.cardHeading.getData()}</h3> 
314        <ul class="x"> 
315          <#list card.cardPoints.getSiblings() as point> 
316            <li>${point.getData()}</li> 
317          </#list> 
318        </ul> 
319      </div> 
320    </#list> 
321  </div> 
322</div></section> 
323 
324<#-- ===================== GIKS INDIA'S SOLUTION (label hardcoded, heading dynamic) ===================== --> 
325<section><div class="w"> 
326  <div class="tag">GIKS INDIA's Solution</div> 
327  <h2>${solutionHeading.getData()!""}</h2> 
328  <p class="lead">${solutionDescription.getData()!""}</p> 
329  <div class="g2"> 
330    <#list solutionBlocks.getSiblings() as block> 
331      <div class="card"> 
332        <h3>${block.solutionTitle.getData()}</h3> 
333        <p class="lead" style="margin-bottom:12px">${block.solutionBlockDescription.getData()}</p> 
334        <ul class="x ok"> 
335          <#list block.solutionPoints.getSiblings() as point> 
336            <li>${point.getData()}</li> 
337          </#list> 
338        </ul> 
339      </div> 
340    </#list> 
341  </div> 
342</div></section> 
343 
344<#-- ===================== TECHNOLOGY STACK (label hardcoded) ===================== --> 
345<section class="alt"><div class="w"> 
346  <div class="tag">Technology Stack</div> 
347  <h2>Built with</h2> 
348  <div class="scroll"> 
349    <table class="tbl"> 
350      <tr><th>Category</th><th>Technologies</th></tr> 
351      <#list techRows.getSiblings() as row> 
352        <tr><td>${row.techCategory.getData()}</td><td>${row.techList.getData()}</td></tr> 
353      </#list> 
354    </table> 
355  </div> 
356</div></section> 
357 
358<#-- ===================== BEFORE & AFTER (label hardcoded, heading dynamic) ===================== --> 
359<section><div class="w"> 
360  <div class="tag">Before &amp; After</div> 
361  <h2>${comparisonHeading.getData()!""}</h2> 
362  <div class="scroll"> 
363    <table class="tbl"> 
364      <tr><th>Before</th><th>After GIKS INDIA</th></tr> 
365      <#list comparisonRows.getSiblings() as row> 
366        <tr><td>${row.beforeText.getData()}</td><td>${row.afterText.getData()}</td></tr> 
367      </#list> 
368    </table> 
369  </div> 
370</div></section> 
371 
372<#-- ===================== BUSINESS BENEFITS (label hardcoded, heading dynamic) ===================== --> 
373<section class="alt"><div class="w"> 
374  <div class="tag">Business Benefits</div> 
375  <h2>${benefitsHeading.getData()!""}</h2> 
376  <p class="lead">${benefitsDescription.getData()!""}</p> 
377  <div class="card" style="margin-top:20px"> 
378    <ul class="x ok"> 
379      <#list benefitPoints.getSiblings() as point> 
380        <li>${point.getData()}</li> 
381      </#list> 
382    </ul> 
383  </div> 
384</div></section> 
385 
386<#-- ===================== PROJECT DEVELOPMENT APPROACH (label hardcoded) ===================== --> 
387<section><div class="w"> 
388  <div class="tag">Project Development Approach</div> 
389  <h2>How we delivered</h2> 
390  <div class="g3"> 
391    <#list approachSteps.getSiblings() as step index=step_index> 
392      <div class="card step"> 
393        <div class="num">${step_index + 1}</div> 
394        <div> 
395          <b>${step.stepTitle.getData()}</b> 
396          <p class="lead" style="margin:4px 0 0">${step.stepDescription.getData()}</p> 
397        </div> 
398      </div> 
399    </#list> 
400  </div> 
401</div></section> 
402 
403<#-- ===================== OUTCOME (label hardcoded) ===================== --> 
404<section class="alt"><div class="w"> 
405  <div class="out"> 
406    <div class="tag" style="color:#e0b76a">Outcome</div> 
407    <div class="path"> 
408      <#list outcomePathSteps.getSiblings() as step> 
409        <span>${step.getData()}</span> 
410      </#list> 
411    </div> 
412    <p class="lead" style="margin:0 auto;color:#c5d2ea">${outcomeDescription.getData()!""}</p> 
413    <h3>${outcomeTagline.getData()!""}</h3> 
414  </div> 
415</div></section> 
416 
417</div>