Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 25.60
edited by Agnease
on 2026/06/30 12:29
Change comment: There is no comment for this version
To version 25.18
edited by Agnease
on 2026/06/30 11:13
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -2,95 +2,7 @@
2 2  #macro (displayPublicContent)
3 3   #set ($discard = $xwiki.ssx.use('PublicWebSite.WebHome'))
4 4   {{html clean="false"}}
5 - <section class="hero hero-saas" id="top">
6 - <div class="container">
7 - <div class="hero-layout">
8 - <div class="hero-copy">
9 - <h1>Professional XWiki consulting <span>and engineering</span></h1>
10 - <p class="lead">
11 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
12 - </p>
13 - <ul class="benefits">
14 - <li>XWiki LTS upgrades</li>
15 - <li>Maintenance and support</li>
16 - <li>Custom XWiki development</li>
17 - <li>Migrations and integrations</li>
18 - </ul>
19 - <div class="hero-actions" id="hero-cta">
20 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
21 - Book a free discussion
22 - </a>
23 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
24 - </div>
25 - </div>
26 - <div class="hero-visual" aria-hidden="true">
27 - <div class="hero-browser">
28 - <div class="hero-browser-top">
29 - <div class="hero-dot"></div>
30 - <div class="hero-dot"></div>
31 - <div class="hero-dot"></div>
32 - <div class="hero-search"></div>
33 - </div>
34 - <div class="hero-browser-body">
35 - <div class="hero-sidebar">
36 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Home</div>
37 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Documentation</div>
38 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Processes</div>
39 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Policies</div>
40 - <div class="hero-nav-item"><span class="hero-nav-icon"></span>Teams</div>
41 - </div>
42 - <div class="hero-content-panel">
43 - <div class="hero-panel-title">Production XWiki Platform</div>
44 - <div class="hero-skeleton"></div>
45 - <div class="hero-skeleton"></div>
46 - <div class="hero-skeleton short"></div>
47 - <div class="hero-dashboard-grid">
48 - <div class="hero-mini-card">
49 - <h4>Recent work</h4>
50 - <div class="hero-status-row"><span class="hero-status-dot"></span>LTS upgrade plan</div>
51 - <div class="hero-status-row"><span class="hero-status-dot"></span>Extension review</div>
52 - <div class="hero-status-row"><span class="hero-status-dot"></span>Production validation</div>
53 - </div>
54 - <div class="hero-mini-card">
55 - <h4>Platform care</h4>
56 - <div class="hero-status-row"><span class="hero-status-dot"></span>Permissions</div>
57 - <div class="hero-status-row"><span class="hero-status-dot"></span>Authentication</div>
58 - <div class="hero-status-row"><span class="hero-status-dot"></span>Maintainability</div>
59 - </div>
60 - </div>
61 - </div>
62 - </div>
63 - </div>
64 - <div class="hero-floating hero-upgrade-card">
65 - <div class="hero-card-title">Upgrade with confidence</div>
66 - <div class="hero-version-flow">
67 - <div class="hero-version">XWiki<br/>LTS</div>
68 - <div class="hero-arrow">→</div>
69 - <div class="hero-version">Staging</div>
70 - <div class="hero-arrow">→</div>
71 - <div class="hero-version active">Production</div>
72 - </div>
73 - </div>
74 - <div class="hero-floating hero-security-card">
75 - <div class="hero-card-title">Security-aware maintenance</div>
76 - <ul>
77 - <li>Permissions review</li>
78 - <li>Authentication support</li>
79 - <li>Audit and traceability</li>
80 - </ul>
81 - </div>
82 - <div class="hero-flow">
83 - <div class="hero-env">Review</div>
84 - <div class="hero-arrow">→</div>
85 - <div class="hero-env">Plan</div>
86 - <div class="hero-arrow">→</div>
87 - <div class="hero-env">Validate</div>
88 - </div>
89 - </div>
90 - </div>
91 - </div>
92 - </section>
93 -#*
5 +
94 94   <section class="hero hero-centered" aria-labelledby="hero-title">
95 95   <div class="container hero-inner">
96 96   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
... ... @@ -114,7 +114,7 @@
114 114   </div>
115 115   </div>
116 116   </section>
117 -*#
29 +
118 118   <section class="trust-strip" aria-label="Agnease experience">
119 119   <div class="container">
120 120   <ul>
XWiki.StyleSheetExtension[0]
code
... ... @@ -23,7 +23,7 @@
23 23  @radius: 18px;
24 24  @shadow-sm: 0 18px 45px rgba(15, 23, 42, .06);
25 25  @shadow: 0 30px 80px rgba(15, 23, 42, .12);
26 -@maxw: 1140px;
26 +@maxw: 1240px;
27 27  
28 28  @section-padding: 30px 0;
29 29  @section-padding-mobile: 28px 0;
... ... @@ -150,7 +150,7 @@
150 150  
151 151  /* ========== Buttons ========== */
152 152  
153 -/*.btn-primary {
153 +.btn-primary {
154 154   background: @brand;
155 155   border-color: @brand;
156 156   color: #fff;
... ... @@ -162,11 +162,18 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -*/
165 +
166 166  .btn-secondary {
167 - color: @text;
168 - border: 1px solid fade(@text, 35%);
167 + color: @brand;
168 + background: #fff;
169 + border: 1px solid fade(@brand, 35%);
169 169  
171 + &:hover,
172 + &:focus {
173 + color: @brand-strong;
174 + border-color: @brand;
175 + background: @brand-bg;
176 + }
170 170  }
171 171  
172 172  /* ========== Hero ========== */
... ... @@ -178,6 +178,9 @@
178 178  
179 179   &.hero-centered {
180 180   text-align: center;
188 + background:
189 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
190 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
181 181   display: flex;
182 182   align-items: center;
183 183   justify-content: center;
... ... @@ -251,6 +251,7 @@
251 251  .trust-strip {
252 252   padding: 18px 0;
253 253   border-top: 1px solid @line;
264 + background: #fff;
254 254  
255 255   ul {
256 256   max-width: 960px;
... ... @@ -323,6 +323,7 @@
323 323  .pathway-card,
324 324  .service-card,
325 325  .resource-card {
337 + background: #fff;
326 326   border: 1px solid @line;
327 327   border-radius: @radius;
328 328   box-shadow: @shadow-sm;
... ... @@ -518,6 +518,7 @@
518 518   align-items: flex-start;
519 519   gap: 16px;
520 520   padding: 22px;
533 + background: #fff;
521 521   border: 1px solid @line;
522 522   border-radius: @radius;
523 523   box-shadow: @shadow-sm;
... ... @@ -605,6 +605,7 @@
605 605   position: relative;
606 606   padding: 16px 16px 16px 58px;
607 607   margin-bottom: 12px;
621 + background: #fff;
608 608   border: 1px solid @line;
609 609   border-radius: @radius;
610 610   box-shadow: @shadow-sm;
... ... @@ -755,6 +755,8 @@
755 755   padding: 32px;
756 756   border-radius: @radius;
757 757   border: 1px solid fade(@brand, 20%);
772 + background:
773 + radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
758 758   box-shadow: @shadow-sm;
759 759   text-align: center;
760 760  
... ... @@ -913,6 +913,9 @@
913 913  .resource-header {
914 914   padding: @section-padding;
915 915   border-top: none;
932 + background:
933 + radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
934 + radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
916 916  
917 917   h1 {
918 918   margin: 0 auto 14px;
... ... @@ -1060,6 +1060,7 @@
1060 1060   border: 1px solid @line;
1061 1061   border-radius: @radius;
1062 1062   padding: 18px;
1082 + background: #fff;
1063 1063   box-shadow: @shadow-sm;
1064 1064  
1065 1065   h4 {
... ... @@ -1158,6 +1158,7 @@
1158 1158  
1159 1159  .product-card {
1160 1160   position: relative;
1181 + background: #fff;
1161 1161   border: 1px solid @line;
1162 1162   border-radius: @radius;
1163 1163   box-shadow: @shadow-sm;
... ... @@ -1307,6 +1307,7 @@
1307 1307  .product-info-card,
1308 1308  .product-feature,
1309 1309  .product-gallery-panel {
1331 + background: #fff;
1310 1310   border: 1px solid @line;
1311 1311   border-radius: @radius;
1312 1312   box-shadow: @shadow-sm;
... ... @@ -1549,6 +1549,7 @@
1549 1549  /* ========== Resources Index ========== */
1550 1550  
1551 1551  .resources-index-page {
1574 + background: #fff;
1552 1552  
1553 1553   .services-grid {
1554 1554   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1584,332 +1584,3 @@
1584 1584   color: @muted;
1585 1585   }
1586 1586  }
1587 -
1588 -/* ========== Global Theme Background ========== */
1589 -
1590 -html,
1591 -body {
1592 - min-height: 100%;
1593 -}
1594 -
1595 -body {
1596 - color: @text;
1597 - background:
1598 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.08) 0, transparent 26%),
1599 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.05) 0, transparent 30%),
1600 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1601 - background-attachment: fixed;
1602 -}
1603 -
1604 -/* Let the body background show through the XWiki wrappers.
1605 -#mainContentArea,
1606 -.resource-page,
1607 -.resources-index-page {
1608 - background: transparent !important;
1609 - background-image: none !important;
1610 -}
1611 -*/
1612 -/* Remove local decorative backgrounds that compete with the global gradient.
1613 -.hero,
1614 -.hero.hero-centered,
1615 -.trust-strip,
1616 -.industry-trust-section,
1617 -.split-section,
1618 -.resource-strip,
1619 -.homepage-resource-strip,
1620 -.resource-header,
1621 -.product-section-muted,
1622 -.resources-index-page {
1623 - background: transparent !important;
1624 - background-image: none !important;
1625 -}
1626 - */
1627 -/* Keep large panels readable, but remove their inner gradients.
1628 -.industry-trust-section .industry-trust-panel,
1629 -.cta-panel,
1630 -.resource-inline-cta,
1631 -.resource-note,
1632 -.resource-cta {
1633 - background: #fff !important;
1634 - background-image: none !important;
1635 -} */
1636 -
1637 -
1638 -/* ========== Hero ========== */
1639 -#mainContentArea .hero.hero-saas {
1640 - min-height: auto;
1641 - padding: 60px 0 34px;
1642 - display: flex;
1643 - align-items: center;
1644 - overflow: hidden;
1645 - background: transparent;
1646 -}
1647 -#mainContentArea .hero-layout {
1648 - max-width: 1120px;
1649 - margin: 0 auto;
1650 - display: grid;
1651 - grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1652 - gap: 56px;
1653 - align-items: center;
1654 -}
1655 -#mainContentArea .hero-copy,
1656 -#mainContentArea .hero.hero-saas .lead {
1657 - text-align: left;
1658 -}
1659 -#mainContentArea .hero.hero-saas h1 {
1660 - max-width: 640px;
1661 - margin: 0 0 26px;
1662 - font-size: 60px;
1663 - font-weight: 800;
1664 - line-height: 1;
1665 - letter-spacing: -3px;
1666 -}
1667 -#mainContentArea .hero.hero-saas h1 span {
1668 - color: @brand;
1669 -}
1670 -#mainContentArea .hero.hero-saas .lead {
1671 - max-width: 590px;
1672 - margin: 0 0 28px;
1673 - color: #334155;
1674 - font-size: 18px;
1675 - line-height: 1.6;
1676 -}
1677 -#mainContentArea .hero.hero-saas .benefits {
1678 - max-width: 620px;
1679 - margin: 0 0 30px;
1680 - padding: 0;
1681 - display: grid;
1682 - grid-template-columns: repeat(2, minmax(0, 1fr));
1683 - gap: 10px 24px;
1684 - list-style: none;
1685 - color: #475569;
1686 - font-size: 15px;
1687 - text-align: left;
1688 -}
1689 -#mainContentArea .hero.hero-saas .benefits li {
1690 - display: grid;
1691 - grid-template-columns: 18px minmax(0, 1fr);
1692 - column-gap: 8px;
1693 - align-items: start;
1694 - margin: 0;
1695 - line-height: 1.45;
1696 -}
1697 -#mainContentArea .hero.hero-saas .benefits li::before {
1698 - content: "✓";
1699 - display: block;
1700 - width: 18px;
1701 - color: @brand;
1702 - font-weight: 900;
1703 - line-height: 1.45;
1704 - text-align: left;
1705 - margin: 0;
1706 -}
1707 -#mainContentArea .hero-actions,
1708 -#mainContentArea #hero-cta {
1709 - display: flex;
1710 - flex-wrap: wrap;
1711 - justify-content: flex-start;
1712 - gap: 12px;
1713 -}
1714 -#mainContentArea .hero-visual {
1715 - position: relative;
1716 - min-height: 540px;
1717 -}
1718 -#mainContentArea .hero-browser,
1719 -#mainContentArea .hero-floating {
1720 - border: 1px solid @line;
1721 - background: fade(#fff, 94%);
1722 - box-shadow: @shadow;
1723 - backdrop-filter: blur(14px);
1724 -}
1725 -#mainContentArea .hero-browser {
1726 - position: absolute;
1727 - top: 8px;
1728 - right: 0;
1729 - width: 100%;
1730 - max-width: 720px;
1731 - overflow: hidden;
1732 - border-radius: 18px;
1733 - background: fade(#fff, 88%);
1734 -}
1735 -#mainContentArea .hero-browser-top {
1736 - height: 58px;
1737 - display: flex;
1738 - align-items: center;
1739 - gap: 10px;
1740 - padding: 0 24px;
1741 - border-bottom: 1px solid @line;
1742 - background: fade(#fff, 74%);
1743 -}
1744 -#mainContentArea .hero-dot,
1745 -#mainContentArea .hero-status-dot {
1746 - border-radius: 50%;
1747 -}
1748 -#mainContentArea .hero-dot {
1749 - width: 10px;
1750 - height: 10px;
1751 - background: #CBD5E1;
1752 -}
1753 -#mainContentArea .hero-status-dot {
1754 - width: 8px;
1755 - height: 8px;
1756 - background: @brand;
1757 -}
1758 -#mainContentArea .hero-search {
1759 - margin-left: auto;
1760 - width: 170px;
1761 - height: 26px;
1762 - border: 1px solid #E2E8F0;
1763 - border-radius: 20px;
1764 - background: #F1F5F9;
1765 -}
1766 -#mainContentArea .hero-browser-body {
1767 - display: grid;
1768 - grid-template-columns: 150px minmax(0, 1fr);
1769 -}
1770 -#mainContentArea .hero-sidebar {
1771 - padding: 24px 18px;
1772 - border-right: 1px solid @line;
1773 - background: #F8FAFC;
1774 -}
1775 -#mainContentArea .hero-nav-item,
1776 -#mainContentArea .hero-status-row,
1777 -#mainContentArea .hero-version-flow,
1778 -#mainContentArea .hero-flow {
1779 - display: flex;
1780 - align-items: center;
1781 -}
1782 -#mainContentArea .hero-nav-item {
1783 - gap: 9px;
1784 - padding: 10px 8px;
1785 - color: #334155;
1786 - font-size: 13px;
1787 -}
1788 -#mainContentArea .hero-nav-icon {
1789 - width: 20px;
1790 - height: 20px;
1791 - border: 1px solid #CBD5E1;
1792 - border-radius: 5px;
1793 -}
1794 -#mainContentArea .hero-content-panel {
1795 - padding: 26px;
1796 -}
1797 -#mainContentArea .hero-panel-title,
1798 -#mainContentArea .hero-card-title {
1799 - color: @text;
1800 - font-weight: 800;
1801 -}
1802 -#mainContentArea .hero-panel-title {
1803 - margin-bottom: 18px;
1804 - font-size: 20px;
1805 -}
1806 -#mainContentArea .hero-skeleton {
1807 - height: 8px;
1808 - margin-bottom: 10px;
1809 - border-radius: 10px;
1810 - background: #E2E8F0;
1811 -}
1812 -#mainContentArea .hero-skeleton.short {
1813 - width: 64%;
1814 -}
1815 -#mainContentArea .hero-dashboard-grid {
1816 - margin-top: 28px;
1817 - display: grid;
1818 - grid-template-columns: repeat(2, minmax(0, 1fr));
1819 - gap: 18px;
1820 -}
1821 -#mainContentArea .hero-mini-card {
1822 - padding: 18px;
1823 - border: 1px solid @line;
1824 - border-radius: 14px;
1825 - background: #fff;
1826 -}
1827 -#mainContentArea .hero-mini-card h4 {
1828 - margin: 0 0 14px;
1829 - font-size: 15px;
1830 -}
1831 -#mainContentArea .hero-status-row {
1832 - gap: 10px;
1833 - margin: 11px 0;
1834 - color: #475569;
1835 - font-size: 13px;
1836 -}
1837 -#mainContentArea .hero-floating {
1838 - position: absolute;
1839 - border-radius: 16px;
1840 -}
1841 -#mainContentArea .hero-upgrade-card {
1842 - left: 0;
1843 - bottom: 72px;
1844 - width: 320px;
1845 - padding: 20px;
1846 -}
1847 -#mainContentArea .hero-security-card {
1848 - right: 20px;
1849 - top: 260px;
1850 - width: 260px;
1851 - padding: 22px;
1852 -}
1853 -#mainContentArea .hero-security-card ul {
1854 - margin: 0;
1855 - padding: 0;
1856 - list-style: none;
1857 -}
1858 -#mainContentArea .hero-security-card li {
1859 - margin: 12px 0;
1860 - font-size: 14px;
1861 -}
1862 -#mainContentArea .hero-security-card li::before {
1863 - content: "✓";
1864 - margin-right: 8px;
1865 - color: @brand;
1866 - font-weight: 900;
1867 -}
1868 -#mainContentArea .hero-card-title {
1869 - margin-bottom: 16px;
1870 -}
1871 -#mainContentArea .hero-version-flow {
1872 - gap: 8px;
1873 -}
1874 -#mainContentArea .hero-version {
1875 - width: 62px;
1876 - height: 54px;
1877 - padding: 0 8px;
1878 - display: grid;
1879 - place-items: center;
1880 - box-sizing: border-box;
1881 - border-radius: 8px;
1882 - background: #F1F5F9;
1883 - color: #334155;
1884 - text-align: center;
1885 - font-size: 13px;
1886 - line-height: 1.25;
1887 -}
1888 -#mainContentArea .hero-version.active {
1889 - width: 84px;
1890 - background: @text;
1891 - color: #fff;
1892 -}
1893 -#mainContentArea .hero-arrow {
1894 - color: #64748B;
1895 -}
1896 -#mainContentArea .hero-flow {
1897 - position: absolute;
1898 - right: 48px;
1899 - bottom: 18px;
1900 - gap: 12px;
1901 -}
1902 -#mainContentArea .hero-env {
1903 - min-width: 130px;
1904 - padding: 16px 20px;
1905 - border: 1px solid @line;
1906 - border-radius: 12px;
1907 - background: #fff;
1908 - color: #475569;
1909 - text-align: center;
1910 - text-transform: uppercase;
1911 - font-size: 12px;
1912 - letter-spacing: 1.3px;
1913 - box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
1914 -}
1915 -