Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14

From version 16.4
edited by Agnease
on 2026/05/28 10:15
Change comment: There is no comment for this version
To version 25.35
edited by Agnease
on 2026/06/30 11:38
Change comment: There is no comment for this version

Summary

Details

Page properties
Default language
... ... @@ -1,1 +1,0 @@
1 -en
Hidden
... ... @@ -1,1 +1,1 @@
1 -false
1 +true
Content
... ... @@ -1,11 +3,9 @@
1 -{{include reference="PublicWebSite.MacrosAndVariables" /}}
2 -
3 3  {{velocity}}
4 4  #macro (displayPublicContent)
5 5   #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome'))
6 6   {{html clean="false"}}
7 7  
8 - <section class="hero hero-centered main-page-hero" aria-labelledby="hero-title">
6 + <section class="hero hero-centered" aria-labelledby="hero-title">
9 9   <div class="container hero-inner">
10 10   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
11 11  
... ... @@ -22,7 +22,7 @@
22 22   </ul>
23 23  
24 24   <div class="hero-actions">
25 - <a class="btn btn-primary" href="$freeXWikiReviewCallURL">$freeXWikiReviewCallLabel</a>
23 + <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">Book a free discussion</a>
26 26   ##<a class="btn btn-primary" href="$xwiki.getURL('contact.WebHome')">Request a consultation</a>
27 27   <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
28 28   </div>
... ... @@ -113,6 +113,36 @@
113 113   </div>
114 114   </section>
115 115  
114 + <section class="industry-trust-section" aria-labelledby="industry-trust-title">
115 + <div class="container">
116 + <div class="industry-trust-panel">
117 + <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
118 +
119 + <p class="section-intro">
120 + Experience supporting XWiki platforms used in healthcare, financial services, scientific research,
121 + government institutions, transportation, software development, compliance programs and regulated environments.
122 + </p>
123 +
124 + <div class="industry-tags" aria-label="Industries and environments supported">
125 + <span>Healthcare</span>
126 + <span>Financial services</span>
127 + <span>Scientific research</span>
128 + <span>Government institutions</span>
129 + <span>Transportation</span>
130 + <span>Software development</span>
131 + <span>Compliance programs</span>
132 + <span>Regulated environments</span>
133 + </div>
134 +
135 + <p class="industry-support">
136 + Organizations rely on these platforms to manage documentation, workflows, compliance processes,
137 + research knowledge and critical business information. From upgrades and authentication integrations
138 + to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
139 + </p>
140 + </div>
141 + </div>
142 + </section>
143 +
116 116   <section class="split-section" aria-labelledby="why-title">
117 117   <div class="container">
118 118   <div class="split-grid">
... ... @@ -120,10 +120,11 @@
120 120   <h2 id="why-title">Why work with an XWiki specialist</h2>
121 121   <p>
122 122   XWiki projects often involve more than pages. Production platforms may include custom code,
123 - extensions, authentication, permissions, workflows, integrations and business-critical content.
151 + extensions, authentication, permissions, workflows, integrations, compliance documentation
152 + and business-critical knowledge.
124 124   </p>
125 125   <p>
126 - Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, deliver practical improvements
155 + Agnease brings 11+ years of hands-on XWiki experience to help reduce risk, support long-term reliability
127 127   and leave the platform easier to maintain after the work is complete.
128 128   </p>
129 129   </div>
main-page-hero.png
Author
... ... @@ -1,1 +1,0 @@
1 -XWiki.Admin
Size
... ... @@ -1,1 +1,0 @@
1 -959.7 KB
Content
XWiki.StyleSheetExtension[0]
code
... ... @@ -1,5 +1,5 @@
1 1  /* ========== Agnease Public Website ========== */
2 -
2 +/*
3 3  @brand: #00937D;
4 4  @brand-strong: #007B6A;
5 5  @brand-soft: #E7FFF8;
... ... @@ -11,6 +11,19 @@
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 +*/
15 +@brand: #00937D;
16 +@brand-strong: #007B6A;
17 +@brand-soft: #E7FFF8;
18 +@brand-bg: #F7F9FC;
19 +@text: #07182D;
20 +@text-soft: #10243D;
21 +@muted: #64748B;
22 +@line: #E6EBF2;
23 +@radius: 18px;
24 +@shadow-sm: 0 18px 45px rgba(15, 23, 42, .06);
25 +@shadow: 0 30px 80px rgba(15, 23, 42, .12);
26 +@maxw: 1140px;
14 14  
15 15  @section-padding: 30px 0;
16 16  @section-padding-mobile: 28px 0;
... ... @@ -167,12 +167,11 @@
167 167  
168 168  .hero {
169 169   overflow: hidden;
183 + background-repeat: no-repeat;
184 + background-attachment: scroll;
170 170  
171 171   &.hero-centered {
172 172   text-align: center;
173 - background:
174 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
175 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
176 176   display: flex;
177 177   align-items: center;
178 178   justify-content: center;
... ... @@ -179,15 +179,6 @@
179 179   min-height: 330px;
180 180   }
181 181  
182 - &.main-page-hero {
183 - background:
184 - linear-gradient(
185 - rgba(244, 252, 250, 0.94),
186 - rgba(255, 255, 255, 0.97)
187 - ),
188 - url('https://agnease.com/bin/download/PublicWebSite/WebHome/main-page-hero.png?rev=1.1') center center / cover no-repeat;
189 - }
190 -
191 191   .hero-inner {
192 192   max-width: 860px;
193 193   margin: 0 auto;
... ... @@ -255,7 +255,6 @@
255 255  .trust-strip {
256 256   padding: 18px 0;
257 257   border-top: 1px solid @line;
258 - background: #fff;
259 259  
260 260   ul {
261 261   max-width: 960px;
... ... @@ -328,7 +328,6 @@
328 328  .pathway-card,
329 329  .service-card,
330 330  .resource-card {
331 - background: #fff;
332 332   border: 1px solid @line;
333 333   border-radius: @radius;
334 334   box-shadow: @shadow-sm;
... ... @@ -438,6 +438,80 @@
438 438   }
439 439  }
440 440  
442 +.industry-trust-section {
443 + background:
444 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
445 +
446 + .industry-trust-panel {
447 + max-width: 1040px;
448 + margin: 0 auto;
449 + padding: 30px 28px;
450 + border: 1px solid fade(@brand, 16%);
451 + border-radius: @radius;
452 + background:
453 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
454 + box-shadow: @shadow-sm;
455 + text-align: center;
456 + }
457 +
458 + h2 {
459 + margin-bottom: 12px;
460 + }
461 +
462 + .section-intro {
463 + margin-bottom: 20px;
464 + max-width: 820px;
465 + }
466 +
467 + .industry-tags {
468 + max-width: 880px;
469 + margin: 0 auto;
470 + display: flex;
471 + flex-wrap: wrap;
472 + justify-content: center;
473 + gap: 10px;
474 + }
475 +
476 + .industry-tags span {
477 + display: inline-flex;
478 + align-items: center;
479 + padding: 7px 12px;
480 + border: 1px solid fade(@brand, 20%);
481 + border-radius: 999px;
482 + background: #fff;
483 + color: @text;
484 + font-size: 13px;
485 + font-weight: 600;
486 + line-height: 1.2;
487 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
488 + }
489 +
490 + .industry-support {
491 + max-width: 820px;
492 + margin: 22px auto 0;
493 + color: @muted;
494 + font-size: 16px;
495 + line-height: 1.6;
496 + }
497 +}
498 +
499 +@media (max-width: 640px) {
500 + .industry-trust-section {
501 + .industry-trust-panel {
502 + padding: 24px 18px;
503 + }
504 +
505 + .industry-tags {
506 + gap: 8px;
507 + }
508 +
509 + .industry-tags span {
510 + font-size: 12px;
511 + padding: 6px 10px;
512 + }
513 + }
514 +}
515 +
441 441  /* ========== Services ========== */
442 442  
443 443  .services {
... ... @@ -450,7 +450,6 @@
450 450   align-items: flex-start;
451 451   gap: 16px;
452 452   padding: 22px;
453 - background: #fff;
454 454   border: 1px solid @line;
455 455   border-radius: @radius;
456 456   box-shadow: @shadow-sm;
... ... @@ -538,7 +538,6 @@
538 538   position: relative;
539 539   padding: 16px 16px 16px 58px;
540 540   margin-bottom: 12px;
541 - background: #fff;
542 542   border: 1px solid @line;
543 543   border-radius: @radius;
544 544   box-shadow: @shadow-sm;
... ... @@ -689,8 +689,6 @@
689 689   padding: 32px;
690 690   border-radius: @radius;
691 691   border: 1px solid fade(@brand, 20%);
692 - background:
693 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
694 694   box-shadow: @shadow-sm;
695 695   text-align: center;
696 696  
... ... @@ -797,15 +797,6 @@
797 797   min-height: 280px;
798 798   }
799 799  
800 - .hero.main-page-hero {
801 - background:
802 - linear-gradient(
803 - rgba(244, 252, 250, 0.98),
804 - rgba(255, 255, 255, 1)
805 - ),
806 - url('https://agnease.com/bin/download/PublicWebSite/WebHome/main-page-hero.png?rev=1.1') center center / cover no-repeat;
807 - }
808 -
809 809   .hero {
810 810   .lead {
811 811   font-size: 17px;
... ... @@ -938,6 +938,45 @@
938 938   }
939 939  }
940 940  
1003 +.resource-note.related-resources {
1004 + p {
1005 + margin-bottom: 10px;
1006 + }
1007 +
1008 + ul {
1009 + margin: 0;
1010 + padding-left: 20px;
1011 + }
1012 +
1013 + li {
1014 + margin: 6px 0;
1015 + color: @muted;
1016 + }
1017 +}
1018 +
1019 +.resource-faq-item {
1020 + display: flow-root;
1021 + border-bottom: 1px solid @line;
1022 + padding: 12px 0;
1023 +
1024 + summary {
1025 + cursor: pointer;
1026 + font-weight: 700;
1027 + color: @text;
1028 + line-height: 1.4;
1029 + }
1030 +
1031 + summary:hover,
1032 + summary:focus {
1033 + color: @brand-strong;
1034 + }
1035 +
1036 + p {
1037 + margin: 10px 0 4px;
1038 + color: @muted;
1039 + }
1040 +}
1041 +
941 941  .resource-checklist {
942 942   margin: 18px 0 24px;
943 943   padding: 0;
... ... @@ -1059,30 +1059,39 @@
1059 1059  }
1060 1060  
1061 1061  .product-card-grid {
1062 - max-width: 840px;
1063 - margin: 22px auto 0;
1163 + max-width: 980px;
1164 + margin: 26px auto 0;
1064 1064   display: grid;
1065 1065   grid-template-columns: 1fr;
1066 - grid-gap: 18px;
1167 + grid-gap: 22px;
1067 1067  }
1068 1068  
1069 1069  .product-card {
1070 - background: #fff;
1171 + position: relative;
1071 1071   border: 1px solid @line;
1072 1072   border-radius: @radius;
1073 1073   box-shadow: @shadow-sm;
1074 - padding: 28px;
1175 + padding: 32px;
1075 1075   display: grid;
1076 - grid-template-columns: 68px 1fr;
1077 - grid-gap: 22px;
1177 + grid-template-columns: 70px 1fr;
1178 + grid-gap: 24px;
1078 1078   align-items: start;
1180 + overflow: hidden;
1079 1079  
1182 + &:before {
1183 + content: "";
1184 + position: absolute;
1185 + inset: 0 auto 0 0;
1186 + width: 5px;
1187 + background: linear-gradient(180deg, @brand 0%, @brand-strong 100%);
1188 + }
1189 +
1080 1080   .product-card-icon {
1081 1081   width: 58px;
1082 1082   height: 58px;
1083 1083   border-radius: 50%;
1084 1084   background: fade(@brand, 10%);
1085 - border: 1px solid fade(@brand, 20%);
1195 + border: 1px solid fade(@brand, 22%);
1086 1086   color: @brand;
1087 1087   display: flex;
1088 1088   align-items: center;
... ... @@ -1091,11 +1091,15 @@
1091 1091   flex-shrink: 0;
1092 1092   }
1093 1093  
1204 + .product-card-body {
1205 + min-width: 0;
1206 + }
1207 +
1094 1094   h3 {
1095 1095   margin: 0 0 10px;
1096 1096   color: @text;
1097 - font-size: 23px;
1098 - line-height: 1.25;
1211 + font-size: 25px;
1212 + line-height: 1.22;
1099 1099   font-weight: 800;
1100 1100   }
1101 1101  
... ... @@ -1104,25 +1104,36 @@
1104 1104   line-height: 1.6;
1105 1105   }
1106 1106  
1107 - .card-link {
1108 - margin: 0;
1109 -
1110 - a {
1111 - font-weight: 700;
1112 - }
1221 + .product-card-description {
1222 + max-width: 760px;
1223 + margin: 0 0 14px;
1224 + font-size: 16px;
1113 1113   }
1114 1114  }
1115 1115  
1116 1116  .product-card-kicker {
1229 + display: inline-flex;
1230 + align-items: center;
1231 + gap: 7px;
1232 + width: fit-content;
1117 1117   margin-bottom: 10px;
1118 1118   padding: 5px 10px;
1235 + border: 1px solid fade(@brand, 24%);
1236 + border-radius: 999px;
1237 + background: fade(@brand, 8%);
1238 + color: @brand-strong;
1119 1119   font-size: 12px;
1240 + font-weight: 800;
1120 1120   text-transform: uppercase;
1121 1121   letter-spacing: .04em;
1243 +
1244 + i {
1245 + color: @brand;
1246 + }
1122 1122  }
1123 1123  
1124 1124  .product-highlights {
1125 - margin: 14px 0 20px;
1250 + margin: 14px 0 22px;
1126 1126   padding-left: 18px;
1127 1127   color: @muted;
1128 1128  
... ... @@ -1132,12 +1132,58 @@
1132 1132   }
1133 1133  }
1134 1134  
1260 +.product-card-actions {
1261 + display: flex;
1262 + align-items: center;
1263 + gap: 16px;
1264 + flex-wrap: wrap;
1265 +
1266 + .btn {
1267 + font-weight: 700;
1268 + }
1269 +}
1270 +
1271 +.product-card-contact {
1272 + color: @brand;
1273 + font-weight: 700;
1274 + text-decoration: underline;
1275 +
1276 + &:hover,
1277 + &:focus {
1278 + color: @brand-strong;
1279 + }
1280 +}
1281 +
1282 +@media (max-width: 640px) {
1283 + .product-card {
1284 + grid-template-columns: 1fr;
1285 + padding: 26px 22px;
1286 + text-align: left;
1287 +
1288 + &:before {
1289 + width: 4px;
1290 + }
1291 +
1292 + .product-card-icon {
1293 + margin-bottom: 2px;
1294 + }
1295 +
1296 + h3 {
1297 + font-size: 22px;
1298 + }
1299 + }
1300 +
1301 + .product-card-actions {
1302 + gap: 12px;
1303 + }
1304 +}
1305 +
1135 1135  /* ========== Individual Product Pages ========== */
1136 1136  
1137 1137  .product-layout {
1138 1138   display: grid;
1139 - grid-template-columns: 1.1fr .9fr;
1140 - grid-gap: 36px;
1310 + grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
1311 + grid-gap: 32px;
1141 1141   max-width: 1040px;
1142 1142   margin: 0 auto;
1143 1143   align-items: start;
... ... @@ -1145,8 +1145,8 @@
1145 1145  
1146 1146  .product-summary-card,
1147 1147  .product-info-card,
1319 +.product-feature,
1148 1148  .product-gallery-panel {
1149 - background: #fff;
1150 1150   border: 1px solid @line;
1151 1151   border-radius: @radius;
1152 1152   box-shadow: @shadow-sm;
... ... @@ -1153,16 +1153,18 @@
1153 1153  }
1154 1154  
1155 1155  .product-summary-card {
1156 - padding: 26px;
1327 + padding: 28px;
1157 1157  
1158 1158   h2 {
1159 1159   text-align: left;
1160 1160   margin-top: 0;
1332 + margin-bottom: 14px;
1333 + line-height: 1.25;
1161 1161   }
1162 1162  
1163 1163   p {
1164 1164   color: @muted;
1165 - line-height: 1.6;
1338 + line-height: 1.62;
1166 1166   }
1167 1167  
1168 1168   p:last-child {
... ... @@ -1171,13 +1171,19 @@
1171 1171  }
1172 1172  
1173 1173  .product-info-card {
1174 - padding: 22px;
1347 + padding: 24px;
1175 1175  
1176 1176   h3 {
1177 1177   margin-top: 0;
1178 1178   margin-bottom: 12px;
1352 + line-height: 1.3;
1179 1179   }
1180 1180  
1355 + p {
1356 + color: @muted;
1357 + line-height: 1.55;
1358 + }
1359 +
1181 1181   ul {
1182 1182   margin: 0;
1183 1183   padding-left: 20px;
... ... @@ -1186,25 +1186,30 @@
1186 1186  
1187 1187   li {
1188 1188   margin: 8px 0;
1189 - line-height: 1.45;
1368 + line-height: 1.3;
1190 1190   }
1191 1191  }
1192 1192  
1372 +.product-card-note {
1373 + margin: 0 0 14px;
1374 + color: @muted;
1375 + line-height: 1.55;
1376 +}
1377 +
1193 1193  .product-feature-grid {
1194 1194   display: grid;
1195 1195   grid-template-columns: repeat(3, minmax(0, 1fr));
1196 - grid-gap: 18px;
1381 + grid-gap: 20px;
1197 1197   max-width: 1040px;
1198 - margin: 22px auto 0;
1383 + margin: 24px auto 0;
1199 1199  }
1200 1200  
1201 1201  .product-feature {
1202 - background: #fff;
1203 - border: 1px solid @line;
1204 - border-radius: @radius;
1205 - box-shadow: @shadow-sm;
1206 - padding: 22px;
1387 + padding: 24px;
1388 + min-width: 0;
1389 + min-height: 100%;
1207 1207  
1391 + .card-heading,
1208 1208   .feature-heading {
1209 1209   display: flex;
1210 1210   align-items: center;
... ... @@ -1235,10 +1235,56 @@
1235 1235   p {
1236 1236   margin: 0;
1237 1237   color: @muted;
1238 - line-height: 1.5;
1422 + line-height: 1.52;
1239 1239   }
1240 1240  }
1241 1241  
1426 +.product-gallery-caption {
1427 + max-width: 820px;
1428 + margin: 12px auto 0;
1429 + color: @muted;
1430 + font-size: 14px;
1431 + line-height: 1.5;
1432 + text-align: center;
1433 +}
1434 +
1435 +/* Keep the default XWiki gallery style.
1436 + Only add spacing before it and center it. */
1437 +.gallery.xGallery {
1438 + margin: 25px auto;
1439 + width: 920px;
1440 + height: 518px;
1441 +}
1442 +
1443 +.product-section-muted {
1444 + background:
1445 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1446 +}
1447 +
1448 +/* Compact process list when used inside a product card. */
1449 +.product-summary-card .process-list {
1450 + margin-top: 16px;
1451 +
1452 + li {
1453 + padding: 13px 14px 13px 50px;
1454 + margin-bottom: 10px;
1455 + box-shadow: none;
1456 + }
1457 +
1458 + li:before {
1459 + left: 14px;
1460 + top: 14px;
1461 + width: 24px;
1462 + height: 24px;
1463 + font-size: 12px;
1464 + }
1465 +
1466 + strong {
1467 + margin-bottom: 2px;
1468 + }
1469 +}
1470 +
1471 +/* Kept for older product pages that still use a screenshot placeholder/panel. */
1242 1242  .product-gallery-panel {
1243 1243   max-width: 1040px;
1244 1244   margin: 20px auto 0;
... ... @@ -1271,11 +1271,6 @@
1271 1271   justify-content: center;
1272 1272  }
1273 1273  
1274 -.product-section-muted {
1275 - background:
1276 - radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1277 -}
1278 -
1279 1279  @media (max-width: 980px) {
1280 1280   .product-layout,
1281 1281   .product-feature-grid {
... ... @@ -1304,12 +1304,37 @@
1304 1304   .product-gallery-panel {
1305 1305   padding: 20px;
1306 1306   }
1532 +
1533 + .product-feature {
1534 + .card-heading,
1535 + .feature-heading {
1536 + gap: 12px;
1537 + }
1538 +
1539 + .feature-icon {
1540 + width: 42px;
1541 + height: 42px;
1542 + font-size: 16px;
1543 + }
1544 + }
1545 +
1546 + .gallery.xGallery {
1547 + margin-top: 22px !important;
1548 + }
1549 +
1550 + .product-gallery-caption {
1551 + margin-top: 10px;
1552 + padding: 0 14px;
1553 + }
1554 +
1555 + .product-summary-card .process-list li {
1556 + padding-left: 46px;
1557 + }
1307 1307  }
1308 1308  
1309 1309  /* ========== Resources Index ========== */
1310 1310  
1311 1311  .resources-index-page {
1312 - background: #fff;
1313 1313  
1314 1314   .services-grid {
1315 1315   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1345,3 +1345,52 @@
1345 1345   color: @muted;
1346 1346   }
1347 1347  }
1598 +
1599 +/* ========== Global Theme Background ========== */
1600 +
1601 +html,
1602 +body {
1603 + min-height: 100%;
1604 +}
1605 +
1606 +body {
1607 + color: @text;
1608 + background:
1609 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1610 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1611 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1612 + background-attachment: fixed;
1613 +}
1614 +
1615 +/* Let the body background show through the XWiki wrappers.
1616 +#mainContentArea,
1617 +.resource-page,
1618 +.resources-index-page {
1619 + background: transparent !important;
1620 + background-image: none !important;
1621 +}
1622 +*/
1623 +/* Remove local decorative backgrounds that compete with the global gradient.
1624 +.hero,
1625 +.hero.hero-centered,
1626 +.trust-strip,
1627 +.industry-trust-section,
1628 +.split-section,
1629 +.resource-strip,
1630 +.homepage-resource-strip,
1631 +.resource-header,
1632 +.product-section-muted,
1633 +.resources-index-page {
1634 + background: transparent !important;
1635 + background-image: none !important;
1636 +}
1637 + */
1638 +/* Keep large panels readable, but remove their inner gradients.
1639 +.industry-trust-section .industry-trust-panel,
1640 +.cta-panel,
1641 +.resource-inline-cta,
1642 +.resource-note,
1643 +.resource-cta {
1644 + background: #fff !important;
1645 + background-image: none !important;
1646 +} */