Changes for page Public Web Site

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

From version 16.2
edited by Agnease
on 2026/05/28 10:14
Change comment: There is no comment for this version
To version 25.28
edited by Agnease
on 2026/06/30 11:34
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('/path/to/agnease-hero-bg.png') 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;
... ... @@ -438,6 +438,80 @@
438 438   }
439 439  }
440 440  
443 +.industry-trust-section {
444 + background:
445 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 70%);
446 +
447 + .industry-trust-panel {
448 + max-width: 1040px;
449 + margin: 0 auto;
450 + padding: 30px 28px;
451 + border: 1px solid fade(@brand, 16%);
452 + border-radius: @radius;
453 + background:
454 + radial-gradient(34rem 12rem at 50% 0%, fade(@brand-soft, 75%) 0%, #fff 72%);
455 + box-shadow: @shadow-sm;
456 + text-align: center;
457 + }
458 +
459 + h2 {
460 + margin-bottom: 12px;
461 + }
462 +
463 + .section-intro {
464 + margin-bottom: 20px;
465 + max-width: 820px;
466 + }
467 +
468 + .industry-tags {
469 + max-width: 880px;
470 + margin: 0 auto;
471 + display: flex;
472 + flex-wrap: wrap;
473 + justify-content: center;
474 + gap: 10px;
475 + }
476 +
477 + .industry-tags span {
478 + display: inline-flex;
479 + align-items: center;
480 + padding: 7px 12px;
481 + border: 1px solid fade(@brand, 20%);
482 + border-radius: 999px;
483 + background: #fff;
484 + color: @text;
485 + font-size: 13px;
486 + font-weight: 600;
487 + line-height: 1.2;
488 + box-shadow: 0 3px 10px rgba(0, 0, 0, .04);
489 + }
490 +
491 + .industry-support {
492 + max-width: 820px;
493 + margin: 22px auto 0;
494 + color: @muted;
495 + font-size: 16px;
496 + line-height: 1.6;
497 + }
498 +}
499 +
500 +@media (max-width: 640px) {
501 + .industry-trust-section {
502 + .industry-trust-panel {
503 + padding: 24px 18px;
504 + }
505 +
506 + .industry-tags {
507 + gap: 8px;
508 + }
509 +
510 + .industry-tags span {
511 + font-size: 12px;
512 + padding: 6px 10px;
513 + }
514 + }
515 +}
516 +
441 441  /* ========== Services ========== */
442 442  
443 443  .services {
... ... @@ -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  
1006 +.resource-note.related-resources {
1007 + p {
1008 + margin-bottom: 10px;
1009 + }
1010 +
1011 + ul {
1012 + margin: 0;
1013 + padding-left: 20px;
1014 + }
1015 +
1016 + li {
1017 + margin: 6px 0;
1018 + color: @muted;
1019 + }
1020 +}
1021 +
1022 +.resource-faq-item {
1023 + display: flow-root;
1024 + border-bottom: 1px solid @line;
1025 + padding: 12px 0;
1026 +
1027 + summary {
1028 + cursor: pointer;
1029 + font-weight: 700;
1030 + color: @text;
1031 + line-height: 1.4;
1032 + }
1033 +
1034 + summary:hover,
1035 + summary:focus {
1036 + color: @brand-strong;
1037 + }
1038 +
1039 + p {
1040 + margin: 10px 0 4px;
1041 + color: @muted;
1042 + }
1043 +}
1044 +
941 941  .resource-checklist {
942 942   margin: 18px 0 24px;
943 943   padding: 0;
... ... @@ -1059,30 +1059,40 @@
1059 1059  }
1060 1060  
1061 1061  .product-card-grid {
1062 - max-width: 840px;
1063 - margin: 22px auto 0;
1166 + max-width: 980px;
1167 + margin: 26px auto 0;
1064 1064   display: grid;
1065 1065   grid-template-columns: 1fr;
1066 - grid-gap: 18px;
1170 + grid-gap: 22px;
1067 1067  }
1068 1068  
1069 1069  .product-card {
1174 + position: relative;
1070 1070   background: #fff;
1071 1071   border: 1px solid @line;
1072 1072   border-radius: @radius;
1073 1073   box-shadow: @shadow-sm;
1074 - padding: 28px;
1179 + padding: 32px;
1075 1075   display: grid;
1076 - grid-template-columns: 68px 1fr;
1077 - grid-gap: 22px;
1181 + grid-template-columns: 70px 1fr;
1182 + grid-gap: 24px;
1078 1078   align-items: start;
1184 + overflow: hidden;
1079 1079  
1186 + &:before {
1187 + content: "";
1188 + position: absolute;
1189 + inset: 0 auto 0 0;
1190 + width: 5px;
1191 + background: linear-gradient(180deg, @brand 0%, @brand-strong 100%);
1192 + }
1193 +
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%);
1199 + 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  
1208 + .product-card-body {
1209 + min-width: 0;
1210 + }
1211 +
1094 1094   h3 {
1095 1095   margin: 0 0 10px;
1096 1096   color: @text;
1097 - font-size: 23px;
1098 - line-height: 1.25;
1215 + font-size: 25px;
1216 + 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 - }
1225 + .product-card-description {
1226 + max-width: 760px;
1227 + margin: 0 0 14px;
1228 + font-size: 16px;
1113 1113   }
1114 1114  }
1115 1115  
1116 1116  .product-card-kicker {
1233 + display: inline-flex;
1234 + align-items: center;
1235 + gap: 7px;
1236 + width: fit-content;
1117 1117   margin-bottom: 10px;
1118 1118   padding: 5px 10px;
1239 + border: 1px solid fade(@brand, 24%);
1240 + border-radius: 999px;
1241 + background: fade(@brand, 8%);
1242 + color: @brand-strong;
1119 1119   font-size: 12px;
1244 + font-weight: 800;
1120 1120   text-transform: uppercase;
1121 1121   letter-spacing: .04em;
1247 +
1248 + i {
1249 + color: @brand;
1250 + }
1122 1122  }
1123 1123  
1124 1124  .product-highlights {
1125 - margin: 14px 0 20px;
1254 + 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  
1264 +.product-card-actions {
1265 + display: flex;
1266 + align-items: center;
1267 + gap: 16px;
1268 + flex-wrap: wrap;
1269 +
1270 + .btn {
1271 + font-weight: 700;
1272 + }
1273 +}
1274 +
1275 +.product-card-contact {
1276 + color: @brand;
1277 + font-weight: 700;
1278 + text-decoration: underline;
1279 +
1280 + &:hover,
1281 + &:focus {
1282 + color: @brand-strong;
1283 + }
1284 +}
1285 +
1286 +@media (max-width: 640px) {
1287 + .product-card {
1288 + grid-template-columns: 1fr;
1289 + padding: 26px 22px;
1290 + text-align: left;
1291 +
1292 + &:before {
1293 + width: 4px;
1294 + }
1295 +
1296 + .product-card-icon {
1297 + margin-bottom: 2px;
1298 + }
1299 +
1300 + h3 {
1301 + font-size: 22px;
1302 + }
1303 + }
1304 +
1305 + .product-card-actions {
1306 + gap: 12px;
1307 + }
1308 +}
1309 +
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;
1314 + grid-template-columns: minmax(0, 1.12fr) minmax(280px, .88fr);
1315 + grid-gap: 32px;
1141 1141   max-width: 1040px;
1142 1142   margin: 0 auto;
1143 1143   align-items: start;
... ... @@ -1145,6 +1145,7 @@
1145 1145  
1146 1146  .product-summary-card,
1147 1147  .product-info-card,
1323 +.product-feature,
1148 1148  .product-gallery-panel {
1149 1149   background: #fff;
1150 1150   border: 1px solid @line;
... ... @@ -1153,16 +1153,18 @@
1153 1153  }
1154 1154  
1155 1155  .product-summary-card {
1156 - padding: 26px;
1332 + padding: 28px;
1157 1157  
1158 1158   h2 {
1159 1159   text-align: left;
1160 1160   margin-top: 0;
1337 + margin-bottom: 14px;
1338 + line-height: 1.25;
1161 1161   }
1162 1162  
1163 1163   p {
1164 1164   color: @muted;
1165 - line-height: 1.6;
1343 + 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;
1352 + padding: 24px;
1175 1175  
1176 1176   h3 {
1177 1177   margin-top: 0;
1178 1178   margin-bottom: 12px;
1357 + line-height: 1.3;
1179 1179   }
1180 1180  
1360 + p {
1361 + color: @muted;
1362 + line-height: 1.55;
1363 + }
1364 +
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;
1373 + line-height: 1.3;
1190 1190   }
1191 1191  }
1192 1192  
1377 +.product-card-note {
1378 + margin: 0 0 14px;
1379 + color: @muted;
1380 + line-height: 1.55;
1381 +}
1382 +
1193 1193  .product-feature-grid {
1194 1194   display: grid;
1195 1195   grid-template-columns: repeat(3, minmax(0, 1fr));
1196 - grid-gap: 18px;
1386 + grid-gap: 20px;
1197 1197   max-width: 1040px;
1198 - margin: 22px auto 0;
1388 + 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;
1392 + padding: 24px;
1393 + min-width: 0;
1394 + min-height: 100%;
1207 1207  
1396 + .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;
1427 + line-height: 1.52;
1239 1239   }
1240 1240  }
1241 1241  
1431 +.product-gallery-caption {
1432 + max-width: 820px;
1433 + margin: 12px auto 0;
1434 + color: @muted;
1435 + font-size: 14px;
1436 + line-height: 1.5;
1437 + text-align: center;
1438 +}
1439 +
1440 +/* Keep the default XWiki gallery style.
1441 + Only add spacing before it and center it. */
1442 +.gallery.xGallery {
1443 + margin: 25px auto;
1444 + width: 920px;
1445 + height: 518px;
1446 +}
1447 +
1448 +.product-section-muted {
1449 + background:
1450 + radial-gradient(42rem 16rem at 50% 0%, @brand-bg 0%, transparent 65%);
1451 +}
1452 +
1453 +/* Compact process list when used inside a product card. */
1454 +.product-summary-card .process-list {
1455 + margin-top: 16px;
1456 +
1457 + li {
1458 + padding: 13px 14px 13px 50px;
1459 + margin-bottom: 10px;
1460 + box-shadow: none;
1461 + }
1462 +
1463 + li:before {
1464 + left: 14px;
1465 + top: 14px;
1466 + width: 24px;
1467 + height: 24px;
1468 + font-size: 12px;
1469 + }
1470 +
1471 + strong {
1472 + margin-bottom: 2px;
1473 + }
1474 +}
1475 +
1476 +/* 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   }
1537 +
1538 + .product-feature {
1539 + .card-heading,
1540 + .feature-heading {
1541 + gap: 12px;
1542 + }
1543 +
1544 + .feature-icon {
1545 + width: 42px;
1546 + height: 42px;
1547 + font-size: 16px;
1548 + }
1549 + }
1550 +
1551 + .gallery.xGallery {
1552 + margin-top: 22px !important;
1553 + }
1554 +
1555 + .product-gallery-caption {
1556 + margin-top: 10px;
1557 + padding: 0 14px;
1558 + }
1559 +
1560 + .product-summary-card .process-list li {
1561 + padding-left: 46px;
1562 + }
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  }
1603 +
1604 +/* ========== Global Theme Background ========== */
1605 +
1606 +html,
1607 +body {
1608 + min-height: 100%;
1609 +}
1610 +
1611 +body {
1612 + color: @text;
1613 + background:
1614 + radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1615 + radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1616 + linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1617 + background-attachment: fixed;
1618 +}
1619 +
1620 +/* Let the body background show through the XWiki wrappers.
1621 +#mainContentArea,
1622 +.resource-page,
1623 +.resources-index-page {
1624 + background: transparent !important;
1625 + background-image: none !important;
1626 +}
1627 +*/
1628 +/* Remove local decorative backgrounds that compete with the global gradient.
1629 +.hero,
1630 +.hero.hero-centered,
1631 +.trust-strip,
1632 +.industry-trust-section,
1633 +.split-section,
1634 +.resource-strip,
1635 +.homepage-resource-strip,
1636 +.resource-header,
1637 +.product-section-muted,
1638 +.resources-index-page {
1639 + background: transparent !important;
1640 + background-image: none !important;
1641 +}
1642 + */
1643 +/* Keep large panels readable, but remove their inner gradients.
1644 +.industry-trust-section .industry-trust-panel,
1645 +.cta-panel,
1646 +.resource-inline-cta,
1647 +.resource-note,
1648 +.resource-cta {
1649 + background: #fff !important;
1650 + background-image: none !important;
1651 +} */