Changes for page Home
Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 7.69
edited by Alex Cotiugă
on 2025/11/13 13:26
on 2025/11/13 13:26
Change comment:
There is no comment for this version
To version 7.123
edited by Alex Cotiugă
on 2025/11/14 09:10
on 2025/11/14 09:10
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -6,21 +6,26 @@ 6 6 <!-- ================= HERO ================= --> 7 7 <section class="hero hero-centered" aria-labelledby="hero-title"> 8 8 <div class="container"> 9 - <div class="hero-inner"> 10 - <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1> 11 - <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen</p> 12 - <div class="hero-cta"> 13 - <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease">Request a consultation</a> 9 + <div class="row"> 10 + <div class="col-sm-12 hero-inner"> 11 + <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1> 12 + <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen.</p> 13 + <div class="hero-cta"> 14 + <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease"> 15 + Request a consultation 16 + </a> 17 + </div> 18 + <ul class="benefits"> 19 + <li>Smooth upgrades</li> 20 + <li>Reliable support plans</li> 21 + <li>Custom integrations</li> 22 + <li>Secure, optimized platforms</li> 23 + </ul> 14 14 </div> 15 - <ul class="benefits"> 16 - <li>Smooth upgrades</li> 17 - <li>Reliable support plans</li> 18 - <li>Custom integrations</li> 19 - <li>Secure, optimized platforms</li> 20 - </ul> 21 21 </div> 22 22 </div> 23 23 </section> 28 + 24 24 <!-- ========= WHY CHOOSE AGNEASE (widgets) ========= --> 25 25 #set ($whySectionData = [{ 26 26 'title': 'Stability & security', ... ... @@ -43,16 +43,16 @@ 43 43 <div class="container"> 44 44 <h2 id="why-title">Why choose Agnease</h2> 45 45 <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p> 46 - <div class="widgets" role="list">51 + <div class="row widgets"> 47 47 #foreach ($entry in $whySectionData) 48 - < articleclass="widget"role="listitem">53 + <div class="col-xs-12 col-sm-6 col-md-3 widget"> 49 49 <div class="icon" aria-hidden="true"> 50 50 <i class="fa fa-$entry.icon"></i> 51 51 <h4>$entry.title</h4> 52 52 </div> 53 53 <p>$entry.content</p> 54 - </ article>55 - #end 59 + </div> 60 + #end 56 56 </div> 57 57 </div> 58 58 </section> ... ... @@ -60,7 +60,7 @@ 60 60 #set ($servicesSectionData = [{ 61 61 'title': 'Upgrades', 62 62 'icon': 'refresh', 63 - 'content': 'Stay current with the latest XWiki LTS and keep your instance securend stable.',68 + 'content': 'Stay current with the latest XWiki LTS and keep your instance reliable.', 64 64 'items': [ 65 65 'Audit setup, extensions, and configurations', 66 66 'Test upgrades with backups and validation', ... ... @@ -106,12 +106,24 @@ 106 106 <section class="services" aria-labelledby="services-title"> 107 107 <div class="container"> 108 108 <h2 id="services-title">Services</h2> 109 - <p class="services-sub">All the XWiki services you need, delivered with precision and care</p> 110 - <div class="services-grid"> 114 + <p class="lead"> 115 + All the XWiki services you need, delivered with precision and care 116 + </p> 117 + 118 + #set ($servicesSize = $servicesSectionData.size()) 119 + <div class="row services-grid"> 111 111 #foreach ($entry in $servicesSectionData) 112 - <article class="service"> 113 - <i class="fa fa-$entry.icon" aria-hidden="true"></i> 114 - <div class="body"> 121 + #set ($classes = "service col-xs-12 col-sm-6") 122 + ## If this is the last item and the number of services is odd, 123 + ## center it on its own row on small+ screens 124 + #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1) 125 + #set ($classes = "$classes col-sm-offset-3") 126 + #end 127 + <div class="$classes"> 128 + <div class="service-icon"> 129 + <i class="fa fa-$entry.icon" aria-hidden="true"></i> 130 + </div> 131 + <div class="service-body"> 115 115 <h4>$entry.title</h4> 116 116 <p>$entry.content</p> 117 117 <ul> ... ... @@ -120,12 +120,19 @@ 120 120 #end 121 121 </ul> 122 122 </div> 123 - </ article>140 + </div> 124 124 #end 125 125 </div> 126 126 </div> 127 127 </section> 128 - 145 + <section id="contact" class="cta-section"> 146 + <div class="container"> 147 + <p class="text-center contact-inline"> 148 + Need help with your XWiki? <a href="mailto:alex@agnease.com">Contact Agnease</a>. 149 + </p> 150 + </div> 151 + </section> 152 +#* 129 129 <!-- ================= METRICS ================= --> 130 130 <section aria-labelledby="metrics-title"> 131 131 <div class="container"> ... ... @@ -192,19 +192,24 @@ 192 192 </details> 193 193 </div> 194 194 </section> 195 - 196 - <!-- ================= CTA ================= --> 197 - <section id="contact" aria-labelledby="contact-title"> 219 +*# 220 +#* <!-- ================= CTA ================= --> 221 + <section id="contact" aria-labelledby="contact-title" class="cta-section"> 198 198 <div class="container"> 199 - <div class="cta-band"> 200 - <div> 201 - <h3 id="contact-title">Need a reliable plan for your XWiki?</h3> 202 - <p class="lead" style="margin:0">Upgrades, support, and integrations handled with low risk and clear communication.</p> 223 + <div class="row"> 224 + <div class="col-sm-12 text-center"> 225 + <h4 id="contact-title">Need a reliable plan for your XWiki?</h4> 226 + <p class="lead"> 227 + Keep your XWiki running smoothly and safely. Get in touch if you need assistance. 228 + </p> 229 + <a class="btn btn-primary" href="mailto:alex@agnease.com"> 230 + Contact Agnease 231 + </a> 203 203 </div> 204 - <a class="btn btn-primary" href="mailto:hello@agnease.com">Contact Agnease</a> 205 205 </div> 206 206 </div> 207 207 </section> 236 + *# 208 208 </main> 209 209 {{/html}} 210 210 #*
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,53 +1,88 @@ 1 -/* ========== Agnease Landing ( LESS,scoped to .agnease-landing) ========== */1 +/* ========== Agnease Landing (scoped to .agnease-landing) ========== */ 2 2 @brand: #00937D; 3 3 @brand-strong: #007B6A; 4 4 @text: #2D3A34; 5 5 @muted: #5B6B64; 6 -@bg: #FFFFFF; 7 -@panel: #F7F9F8; 8 8 @line: #E4ECE9; 9 9 @radius: 16px; 10 -@radius-sm: 12px; 11 11 @shadow-sm: 0 6px 20px rgba(0,0,0,.06); 12 12 @shadow: 0 12px 36px rgba(0,0,0,.08); 13 13 @maxw: 1140px; 14 14 15 15 .agnease-landing { 16 - /* Base */ 13 + /* Base typography */ 17 17 color: @text; 18 18 font: 16px/1.6 Inter, Segoe UI, Roboto, system-ui, -apple-system, Arial, sans-serif; 19 - a { color: @brand; text-decoration: none; &:hover { color: @brand-strong; text-decoration: underline; } } 20 - img { max-width: 100%; display: block; } 21 - /*h1 { font-size: clamp(1.8rem, 2.5vw + .8rem, 3rem); line-height: 1.15; margin: .2rem 0 .6rem; } 22 - h2 { font-size: clamp(1.4rem, 1.4vw + .8rem, 2rem); line-height: 1.2; margin: .2rem 0 .4rem; } 23 - h3 { font-size: 1.12rem; margin: .2rem 0 .25rem; }*/ 24 - .lead { color: @muted; max-width: 72ch; } 25 - .container { max-width: @maxw; margin-top: 5px; padding: 0; overflow-x: clip;} 26 26 17 + a { 18 + color: @brand; 19 + text-decoration: none; 20 + &:hover { 21 + color: @brand-strong; 22 + text-decoration: underline; 23 + } 24 + } 25 + 26 + img { 27 + max-width: 100%; 28 + height: auto; 29 + display: block; 30 + } 31 + 32 + .lead { 33 + color: @muted; 34 + max-width: 72ch; 35 + } 36 + 37 + /* Keep Bootstrap container behavior, just cap width */ 38 + .container { 39 + max-width: @maxw; 40 + } 41 + 27 27 /* Global sections */ 28 - section { padding: 32px 0; border-top: 1px solid @line; } 29 - section:first-of-type { border-top: none; } 43 + section { 44 + padding: 32px 0; 45 + border-top: 1px solid @line; 46 + } 47 + section:first-of-type { 48 + border-top: none; 49 + } 30 30 31 31 /* Buttons */ 32 32 .btn { 33 - display: inline-flex; align-items: center; gap: .55rem; 34 - padding: .85rem 1.1rem; border-radius: 12px; border: 2px solid transparent; 35 - font-weight: 650; letter-spacing: .2px; cursor: pointer; box-shadow: @shadow-sm; 53 + display: inline-flex; 54 + align-items: center; 55 + justify-content: center; 56 + padding: .85rem 1.1rem; 57 + border-radius: 12px; 58 + border: 2px solid transparent; 59 + font-weight: 650; 60 + letter-spacing: .2px; 61 + cursor: pointer; 62 + box-shadow: @shadow-sm; 36 36 37 - &:focus-visible { outline: 3px solid @brand; outline-offset: 2px; } 64 + &:focus-visible { 65 + outline: 3px solid @brand; 66 + outline-offset: 2px; 67 + } 38 38 39 39 &-primary { 40 - background: @brand; color: #fff; 41 - &:hover, &:focus { background: @brand-strong; color: #fff; } 70 + background: @brand; 71 + color: #fff; 72 + &:hover, 73 + &:focus { 74 + background: @brand-strong; 75 + color: #fff; 76 + } 42 42 } 43 - &-ghost { 44 - background: #fff; color: @brand; border-color: @brand; 45 - &:hover { color: @brand-strong; border-color: @brand-strong; } 46 - } 47 47 } 48 48 49 - /* HERO (centered)*/80 + /* ========== HERO ========== */ 50 50 .hero { 82 + overflow: hidden; /* contain gradients, prevent overflow */ 83 + background-repeat: no-repeat; 84 + background-attachment: scroll; 85 + 51 51 &.hero-centered { 52 52 text-align: center; 53 53 background: ... ... @@ -56,93 +56,71 @@ 56 56 display: flex; 57 57 align-items: center; 58 58 justify-content: center; 59 - min-height: 350px; /* reduced height */60 - /*padding: 48px 0; /* controlled vertical spacing */94 + min-height: 350px; 95 + } 61 61 62 - .hero-inner { 63 - /*max-width: 760px;*/ 64 - margin: auto; 65 - display: flex; 66 - flex-direction: column; 67 - align-items: center; 68 - gap: 1rem; 69 - } 97 + .hero-inner { 98 + margin: auto; 99 + display: flex; 100 + flex-direction: column; 101 + align-items: center; 102 + gap: 1rem; 103 + } 70 70 71 - /*h1 { 72 - font-size: clamp(1.9rem, 2.3vw + 1rem, 2.7rem); 73 - line-height: 1.15; 74 - margin: 0.4rem 0 0.5rem; 75 - }*/ 105 + .hero-cta { 106 + display: flex; 107 + gap: 0.8rem; 108 + flex-wrap: wrap; 109 + justify-content: center; 110 + margin-top: 0.3rem; 111 + } 76 76 77 - .lead { 78 - color: @muted; 79 - /*max-width: 68ch;*/ 80 - margin: 0 auto 0.9rem; 81 - } 113 + .benefits { 114 + display: flex; 115 + flex-wrap: wrap; 116 + justify-content: center; 117 + list-style: none; 118 + padding: 0; 119 + margin: 0.8rem 0 0; 120 + color: @muted; 121 + font-size: 14px; 82 82 83 - .hero-cta { 84 - display: flex; 85 - gap: 0.8rem; 86 - flex-wrap: wrap; 87 - justify-content: center; 88 - margin-top: 0.3rem; 123 + li + li::before { 124 + content: "•"; 125 + margin: 0 5px 0 0; 89 89 } 90 90 91 - .benefits { 92 - display: flex; 93 - flex-wrap: wrap; 94 - justify-content: center; 95 - list-style: none; 96 - padding: 0; 97 - margin: 0.8rem 0 0; 98 - color: @muted; 99 - font-size: 14px; 100 - gap: 5px; 101 - li { 102 - /*margin-left: 5px;*/ 103 - } 128 + /* Mobile: only bullets between items 1–2 and 3–4 */ 129 + @media (max-width: 640px) { 104 104 li + li::before { 131 + content: none; 132 + } 133 + li:nth-child(1)::after, 134 + li:nth-child(3)::after { 105 105 content: "•"; 106 - margin- right: 5px;136 + margin-left: 5px; 107 107 } 108 - /* Mobile: show bullets only between 1–2 and 3–4 */ 109 - @media (max-width: 640px) { 110 - /* override the exact selector used above */ 111 - li + li::before { content: none; } 112 - /* Add bullet only after item 1 and item 3 */ 113 - li:nth-child(1)::after, 114 - li:nth-child(3)::after { 115 - content: "•"; 116 - margin-left: 5px; 117 - } 118 - } 119 119 } 120 120 } 121 121 } 122 122 123 - /* === WHY CHOOSE (widgets with inline icon + title) === */142 + /* ========== WHY CHOOSE (widgets) ========== */ 124 124 .widgets { 125 - display: grid; 126 - gap: 16px; 127 - grid-template-columns: 1fr; 128 - 129 - @media (min-width: 860px) { 130 - grid-template-columns: repeat(4, 1fr); 131 - } 144 + margin-top: 12px; 132 132 } 133 133 134 134 .widget { 148 + /* This div is also a Bootstrap col-*, so we don't touch width */ 149 + margin-bottom: 16px; 150 + padding: 18px; 135 135 background: #fff; 136 136 border: 1px solid @line; 137 137 border-radius: @radius; 138 - padding: 18px; 139 139 box-shadow: @shadow-sm; 155 + transition: transform .18s ease, box-shadow .18s ease; 140 140 display: flex; 141 141 flex-direction: column; 142 - justify-content: flex-start; 143 - gap: 8px; 144 - text-align: left; 145 - transition: transform 0.18s ease, box-shadow 0.18s ease; 158 + height: 100%; 146 146 147 147 &:hover { 148 148 transform: translateY(-2px); ... ... @@ -149,71 +149,37 @@ 149 149 box-shadow: @shadow; 150 150 } 151 151 152 - /* The icon + title row */ 153 153 .icon { 154 154 display: flex; 155 155 align-items: center; 156 156 gap: 10px; 157 - padding: 6px 0; 169 + padding-bottom: 6px; 170 + margin-bottom: 8px; 158 158 border-bottom: 1px solid fade(@line, 60%); 159 - margin-bottom: 6px; 160 - 161 - i { 162 - color: @brand; 163 - } 164 - 165 - h4 { 166 - /*font-weight: 700; */ 167 - margin: 0; 168 - color: @text; 169 - line-height: 1.2; 170 - } 172 + i { color: @brand; } 173 + h4 { margin: 0; line-height: 1.2; color: @text; } 171 171 } 172 172 173 - /* Body paragraph */ 174 174 p { 175 - color: @muted; 176 176 margin: 0; 178 + color: @muted; 177 177 line-height: 1.45; 178 178 } 179 179 } 180 180 181 - /* SERVICES */ 182 - /* SERVICES */ 183 + /* ========== SERVICES ========== */ 183 183 .services { 184 - h2 { 185 - margin: 0 0 .3rem; 186 - } 187 - 188 - .services-sub { 189 - margin: 0 0 1.75rem; 190 - color: @muted; 191 - } 192 - 193 - /* Flex layout: 2 per row on desktop */ 194 194 .services-grid { 195 - display: flex; 196 - flex-wrap: wrap; 197 - gap: 32px 36px; // row gap, column gap 186 + margin-top: 12px; 198 198 } 199 199 200 200 .service { 201 - display: grid; 202 - grid-template-columns: 48px 1fr; 190 + margin-bottom: 24px; 191 + display: flex; /* horizontal: icon + body */ 192 + align-items: flex-start; 203 203 gap: 16px; 204 - padding: 18px 0; 205 - border-top: 1px solid @line; 206 206 207 - /* two per row */ 208 - flex: 1 1 calc(50% - 18px); 209 - max-width: calc(50% - 18px); 210 - 211 - /* first row: no top border */ 212 - &:nth-of-type(-n + 2) { 213 - border-top: none; 214 - } 215 - 216 - > i { 195 + .service-icon { 217 217 width: 42px; 218 218 height: 42px; 219 219 border-radius: 50%; ... ... @@ -224,9 +224,10 @@ 224 224 color: @brand; 225 225 background: fade(@brand, 10%); 226 226 margin-top: 3px; 206 + flex-shrink: 0; 227 227 } 228 228 229 - .body { 209 + .service-body { 230 230 h4 { 231 231 margin: 0 0 4px; 232 232 font-size: 1.125rem; ... ... @@ -243,7 +243,7 @@ 243 243 margin: .45rem 0 0; 244 244 padding-left: 1.1rem; 245 245 color: @muted; 246 - font-size: .95rem;226 + font-size: 13px; 247 247 } 248 248 249 249 li { ... ... @@ -253,102 +253,28 @@ 253 253 } 254 254 } 255 255 256 - /* If there is an odd number of services, center the last one */ 257 - .services-grid > .service:last-child:nth-child(odd) { 258 - flex-basis: 100%; 259 - max-width: 680px; 260 - margin-left: auto; 261 - margin-right: auto; 262 - } 263 - 264 - /* Mobile: single column, full-width */ 265 - @media (max-width: 760px) { 266 - .services-grid { 267 - gap: 20px; 268 - } 269 - 236 + @media (max-width: 767px) { 270 270 .service { 271 - grid-template-columns: 40px 1fr; 272 - flex: 1 1 100%; 273 - max-width: 100%; 274 - 275 - /* reset border for all, then remove only on first */ 276 - border-top: 1px solid @line; 277 - 278 - &:nth-of-type(1) { 279 - border-top: none; 280 - } 281 - 282 - > i { 283 - width: 36px; 284 - height: 36px; 285 - font-size: 16px; 286 - } 238 + margin-bottom: 20px; 287 287 } 288 288 289 - /* On mobile, last item behaves like all others */ 290 - .services-grid > .service:last-child:nth-child(odd) { 291 - flex-basis: 100%; 292 - max-width: 100%; 293 - margin-left: 0; 294 - margin-right: 0; 241 + .service-icon { 242 + width: 36px; 243 + height: 36px; 244 + font-size: 16px; 295 295 } 296 296 } 297 297 } 298 - /* METRICS */ 299 - .metrics { 300 - display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); 301 - @media (min-width: 720px) { grid-template-columns: repeat(4, 1fr); } 302 - .metric { 303 - background: #fff; border: 1px solid @line; border-radius: 14px; padding: 16px; text-align: center; box-shadow: @shadow-sm; 304 - .num { font-size: 1.6rem; font-weight: 800; color: @brand; } 305 - .label { color: @muted; font-size: .92rem; } 306 - } 307 - } 308 308 309 - /* PROCESS */ 310 - .steps { 311 - display: grid; gap: 16px; grid-template-columns: 1fr; 312 - @media (min-width: 860px) { grid-template-columns: repeat(3, 1fr); } 313 - .step { 314 - background: #fff; border: 1px solid @line; border-radius: @radius; padding: 18px; box-shadow: @shadow-sm; 315 - } 316 - } 249 + /* ========== CTA inline ========== */ 250 + .cta-section { 251 + padding: 24px 0 16px; 317 317 318 - /* FAQ */ 319 - .faq { 320 - details { 321 - border: 1px solid @line; border-radius: @radius-sm; padding: .75rem .9rem; background: #fff; margin: .6rem 0; 322 - summary { cursor: pointer; font-weight: 650; } 323 - &[open] { box-shadow: @shadow-sm; } 253 + .contact-inline { 254 + margin: 0; 255 + color: @muted; 256 + a { color: @brand; } 324 324 } 325 325 } 326 - 327 - /* CTA BAND */ 328 - #contact { 329 - .cta-band { 330 - background: #fff; border: 1px solid @line; border-radius: @radius; 331 - padding: 20px; box-shadow: @shadow; 332 - display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; 333 - } 334 - } 335 - 336 - /* ===== Prevent horizontal overflow ===== */ 337 - html, body { 338 - overflow-x: hidden; 339 - } 340 - 341 - /* Ensure hero gradients don't bleed */ 342 - .hero { 343 - overflow: hidden; /* contain background overflow */ 344 - background-repeat: no-repeat; 345 - background-attachment: scroll; 346 - } 347 - 348 - /* Safety for large paddings/margins that might extend */ 349 - section, .widgets, .services, .metrics, .steps { 350 - margin-left: auto; 351 - margin-right: auto; 352 - } 353 353 } 354 354