Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/03 16:14
From version 28.18
edited by Agnease
on 2026/07/03 13:03
Change comment: There is no comment for this version
To version 26.1
edited by Agnease
on 2026/07/01 17:04
Change comment: Upload new image "agnease-xwiki-hero.png", version 1.1

Summary

Details

Page properties
Content
... ... @@ -2,44 +2,44 @@
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>
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 10  
11 - <p class="lead">
12 - Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
13 - </p>
11 + <p class="lead">
12 + Agnease helps organizations upgrade, maintain, secure and extend production XWiki platforms with practical engineering support, custom development, integrations and long-term care.
13 + </p>
14 14  
15 - <ul class="benefits">
16 - <li>XWiki LTS upgrades</li>
17 - <li>Maintenance and support</li>
18 - <li>Custom XWiki development</li>
19 - <li>Migrations and integrations</li>
20 - </ul>
15 + <ul class="benefits">
16 + <li>XWiki LTS upgrades</li>
17 + <li>Maintenance and support</li>
18 + <li>Custom XWiki development</li>
19 + <li>Migrations and integrations</li>
20 + </ul>
21 21  
22 - <div class="hero-actions" id="hero-cta">
23 - <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
24 - Book a free discussion
25 - </a>
26 - <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
27 - </div>
22 + <div class="hero-actions" id="hero-cta">
23 + <a class="btn btn-primary" href="https://calendly.com/alex-agnease/30min?back=1&month=2026-06">
24 + Book a free discussion
25 + </a>
26 + <a class="btn btn-secondary" href="$xwiki.getURL('services.WebHome')">View XWiki services</a>
28 28   </div>
28 + </div>
29 29  
30 - <div class="hero-image-wrapper">
31 - <img
32 - class="hero-image"
33 - src="$xwiki.getDocument('PublicWebSite.WebHome').getAttachmentURL('agnease-xwiki-hero.png')"
34 - alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements"
35 - width="1200"
36 - height="900"
37 - loading="eager"
38 - />
39 - </div>
30 + <div class="hero-image-wrapper">
31 + <img
32 + class="hero-image"
33 + src="$doc.getAttachmentURL('agnease-xwiki-hero.png')"
34 + alt="Illustration of a professional XWiki platform dashboard with upgrade, security and maintenance elements"
35 + width="1200"
36 + height="900"
37 + loading="eager"
38 + />
40 40   </div>
41 41   </div>
42 - </section>
41 + </div>
42 + </section>
43 43  #*
44 44   <section class="hero hero-centered" aria-labelledby="hero-title">
45 45   <div class="container hero-inner">
... ... @@ -149,9 +149,9 @@
149 149   </div>
150 150   </section>
151 151  
152 - <section class="contrast-band" aria-labelledby="industry-trust-title">
152 + <section class="industry-trust-section" aria-labelledby="industry-trust-title">
153 153   <div class="container">
154 - <div class="contrast-panel">
154 + <div class="industry-trust-panel">
155 155   <h2 id="industry-trust-title">Trusted XWiki expertise for business-critical platforms</h2>
156 156  
157 157   <p class="section-intro">
... ... @@ -159,7 +159,7 @@
159 159   government institutions, transportation, software development, compliance programs and regulated environments.
160 160   </p>
161 161  
162 - <div class="contrast-tags" aria-label="Industries and environments supported">
162 + <div class="industry-tags" aria-label="Industries and environments supported">
163 163   <span>Healthcare</span>
164 164   <span>Financial services</span>
165 165   <span>Scientific research</span>
... ... @@ -170,7 +170,7 @@
170 170   <span>Regulated environments</span>
171 171   </div>
172 172  
173 - <p class="contrast-support">
173 + <p class="industry-support">
174 174   Organizations rely on these platforms to manage documentation, workflows, compliance processes,
175 175   research knowledge and critical business information. From upgrades and authentication integrations
176 176   to workflow systems and long-term maintenance, Agnease helps keep XWiki secure, stable and ready for the future.
XWiki.StyleSheetExtension[0]
code
... ... @@ -737,8 +737,8 @@
737 737  
738 738  /* ========== CTA ========== */
739 739  
740 -#mainContentArea .cta-section {
741 - padding: 44px 0 56px;
740 +.cta-section {
741 + padding: @section-padding;
742 742  
743 743   .contact-inline {
744 744   margin: 0;
... ... @@ -750,70 +750,25 @@
750 750   }
751 751  }
752 752  
753 -#mainContentArea .cta-panel {
754 - position: relative;
755 - overflow: hidden;
756 - max-width: 1040px;
753 +.cta-panel {
754 + max-width: 860px;
757 757   margin: 0 auto;
758 - padding: 48px 40px;
759 - border: 0;
760 - border-radius: 26px;
761 - background:
762 - radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
763 - linear-gradient(135deg, @text 0%, @text-soft 100%);
764 - color: #fff;
765 - box-shadow: @shadow;
756 + padding: 32px;
757 + border-radius: @radius;
758 + border: 1px solid fade(@brand, 20%);
759 + box-shadow: @shadow-sm;
766 766   text-align: center;
767 -}
768 768  
769 -#mainContentArea .cta-panel::before {
770 - content: "";
771 - position: absolute;
772 - inset: 0;
773 - background:
774 - linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
775 - linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
776 - background-size: 48px 48px;
777 - opacity: .4;
778 - pointer-events: none;
779 -}
762 + h2 {
763 + margin-top: 0;
764 + }
780 780  
781 -#mainContentArea .cta-panel h2,
782 -#mainContentArea .cta-panel p,
783 -#mainContentArea .cta-panel .btn {
784 - position: relative;
785 - z-index: 1;
766 + p {
767 + color: @muted;
768 + line-height: 1.55;
769 + }
786 786  }
787 787  
788 -#mainContentArea .cta-panel h2 {
789 - max-width: 760px;
790 - margin: 0 auto 16px;
791 - color: #fff;
792 -}
793 -
794 -#mainContentArea .cta-panel p {
795 - max-width: 760px;
796 - margin: 0 auto 28px;
797 - color: #DBE4EF;
798 - font-size: 16px;
799 - line-height: 1.6;
800 -}
801 -
802 -#mainContentArea .cta-panel .btn-primary {
803 - border-color: #fff;
804 - background: #fff;
805 - color: @text;
806 - box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
807 -}
808 -
809 -#mainContentArea .cta-panel .btn-primary:hover,
810 -#mainContentArea .cta-panel .btn-primary:focus {
811 - border-color: #fff;
812 - background: #fff;
813 - color: @brand-strong;
814 - text-decoration: none;
815 -}
816 -
817 817  .resource-inline-cta {
818 818   display: flex;
819 819   align-items: center;
... ... @@ -945,14 +945,9 @@
945 945   gap: 14px;
946 946   }
947 947  
948 - #mainContentArea .cta-panel {
949 - padding: 30px 22px;
950 - border-radius: 20px;
903 + .cta-panel {
904 + padding: 24px 20px;
951 951   }
952 -
953 - #mainContentArea .cta-panel .btn-primary {
954 - width: 100%;
955 - }
956 956  }
957 957  
958 958  /* ========== Resource / Article Pages ========== */
... ... @@ -1685,8 +1685,8 @@
1685 1685   background-image: none !important;
1686 1686  } */
1687 1687  
1688 -/* ========== Main Page Hero / SaaS Layout ========== */
1689 1689  
1639 +/* ========== Hero ========== */
1690 1690  #mainContentArea .hero.hero-saas {
1691 1691   min-height: auto;
1692 1692   padding: 60px 0 34px;
... ... @@ -1695,21 +1695,18 @@
1695 1695   overflow: hidden;
1696 1696   background: transparent;
1697 1697  }
1698 -
1699 1699  #mainContentArea .hero-layout {
1700 1700   max-width: 1120px;
1701 1701   margin: 0 auto;
1702 1702   display: grid;
1703 - grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1652 + grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
1704 1704   gap: 56px;
1705 1705   align-items: center;
1706 1706  }
1707 -
1708 -#mainContentArea .hero-copy {
1709 - min-width: 0;
1656 +#mainContentArea .hero-copy,
1657 +#mainContentArea .hero.hero-saas .lead {
1710 1710   text-align: left;
1711 1711  }
1712 -
1713 1713  #mainContentArea .hero.hero-saas h1 {
1714 1714   max-width: 640px;
1715 1715   margin: 0 0 26px;
... ... @@ -1718,20 +1718,16 @@
1718 1718   line-height: 1;
1719 1719   letter-spacing: -3px;
1720 1720  }
1721 -
1722 1722  #mainContentArea .hero.hero-saas h1 span {
1723 1723   color: @brand;
1724 1724  }
1725 -
1726 1726  #mainContentArea .hero.hero-saas .lead {
1727 1727   max-width: 590px;
1728 1728   margin: 0 0 28px;
1729 1729   color: #334155;
1730 - text-align: left;
1731 1731   font-size: 18px;
1732 1732   line-height: 1.6;
1733 1733  }
1734 -
1735 1735  #mainContentArea .hero.hero-saas .benefits {
1736 1736   max-width: 620px;
1737 1737   margin: 0 0 30px;
... ... @@ -1744,7 +1744,6 @@
1744 1744   font-size: 15px;
1745 1745   text-align: left;
1746 1746  }
1747 -
1748 1748  #mainContentArea .hero.hero-saas .benefits li {
1749 1749   display: grid;
1750 1750   grid-template-columns: 18px minmax(0, 1fr);
... ... @@ -1753,7 +1753,6 @@
1753 1753   margin: 0;
1754 1754   line-height: 1.45;
1755 1755  }
1756 -
1757 1757  #mainContentArea .hero.hero-saas .benefits li::before {
1758 1758   content: "✓";
1759 1759   display: block;
... ... @@ -1764,192 +1764,212 @@
1764 1764   text-align: left;
1765 1765   margin: 0;
1766 1766  }
1767 -
1768 -#mainContentArea .hero.hero-saas .hero-actions,
1769 -#mainContentArea .hero.hero-saas #hero-cta {
1708 +#mainContentArea .hero-actions,
1709 +#mainContentArea #hero-cta {
1770 1770   display: flex;
1771 1771   flex-wrap: wrap;
1772 1772   justify-content: flex-start;
1773 1773   gap: 12px;
1774 - margin-top: 0;
1775 1775  }
1776 -
1777 -#mainContentArea .hero-image-wrapper {
1778 - min-width: 0;
1715 +#mainContentArea .hero-visual {
1716 + position: relative;
1717 + min-height: 540px;
1718 +}
1719 +#mainContentArea .hero-browser,
1720 +#mainContentArea .hero-floating {
1721 + border: 1px solid @line;
1722 + background: fade(#fff, 94%);
1723 + box-shadow: @shadow;
1724 + backdrop-filter: blur(14px);
1725 +}
1726 +#mainContentArea .hero-browser {
1727 + position: absolute;
1728 + top: 8px;
1729 + right: 0;
1730 + width: 100%;
1731 + max-width: 720px;
1732 + overflow: hidden;
1733 + border-radius: 18px;
1734 + background: fade(#fff, 88%);
1735 +}
1736 +#mainContentArea .hero-browser-top {
1737 + height: 58px;
1779 1779   display: flex;
1780 - justify-content: center;
1781 1781   align-items: center;
1740 + gap: 10px;
1741 + padding: 0 24px;
1742 + border-bottom: 1px solid @line;
1743 + background: fade(#fff, 74%);
1782 1782  }
1783 -
1784 -#mainContentArea .hero-image {
1785 - display: block;
1786 - width: 100%;
1787 - max-width: 620px;
1788 - height: auto;
1789 - border: 0;
1745 +#mainContentArea .hero-dot,
1746 +#mainContentArea .hero-status-dot {
1747 + border-radius: 50%;
1790 1790  }
1791 -
1792 -/* ========== Main Page Hero Responsive ========== */
1793 -
1794 -@media (max-width: 1100px) {
1795 - #mainContentArea .hero-layout {
1796 - max-width: 760px;
1797 - grid-template-columns: 1fr;
1798 - gap: 34px;
1799 - }
1800 -
1801 - #mainContentArea .hero-copy {
1802 - order: 1;
1803 - text-align: center;
1804 - }
1805 -
1806 - #mainContentArea .hero-image-wrapper {
1807 - order: 2;
1808 - }
1809 -
1810 - #mainContentArea .hero.hero-saas h1 {
1811 - margin-left: auto;
1812 - margin-right: auto;
1813 - text-align: center;
1814 - }
1815 -
1816 - #mainContentArea .hero.hero-saas .lead {
1817 - margin-left: auto;
1818 - margin-right: auto;
1819 - text-align: center;
1820 - }
1821 -
1822 - #mainContentArea .hero.hero-saas .benefits {
1823 - margin-left: auto;
1824 - margin-right: auto;
1825 - }
1826 -
1827 - #mainContentArea .hero.hero-saas .hero-actions,
1828 - #mainContentArea .hero.hero-saas #hero-cta {
1829 - justify-content: center;
1830 - }
1831 -
1832 - #mainContentArea .hero-image {
1833 - max-width: 620px;
1834 - }
1749 +#mainContentArea .hero-dot {
1750 + width: 10px;
1751 + height: 10px;
1752 + background: #CBD5E1;
1835 1835  }
1836 -
1837 -@media (max-width: 640px) {
1838 - #mainContentArea .hero.hero-saas {
1839 - padding: 42px 0 28px;
1840 - }
1841 -
1842 - #mainContentArea .hero-layout {
1843 - gap: 28px;
1844 - }
1845 -
1846 - #mainContentArea .hero.hero-saas h1 {
1847 - font-size: 42px;
1848 - letter-spacing: -1.5px;
1849 - }
1850 -
1851 - #mainContentArea .hero.hero-saas .lead {
1852 - font-size: 17px;
1853 - }
1854 -
1855 - #mainContentArea .hero.hero-saas .benefits {
1856 - grid-template-columns: 1fr;
1857 - }
1858 -
1859 - #mainContentArea .hero-image {
1860 - max-width: 100%;
1861 - }
1754 +#mainContentArea .hero-status-dot {
1755 + width: 8px;
1756 + height: 8px;
1757 + background: @brand;
1862 1862  }
1863 -
1864 -/* ========== Accessibility / Contrast Improvements ========== */
1865 -
1866 -/* Make the global background softer and less distracting. */
1867 -body {
1868 - background:
1869 - radial-gradient(circle at 12% 8%, rgba(0, 147, 125, 0.035) 0, transparent 26%),
1870 - radial-gradient(circle at 90% 28%, rgba(7, 24, 45, 0.025) 0, transparent 30%),
1871 - linear-gradient(180deg, #fff 0, @brand-bg 42%, #fff 100%) !important;
1872 - background-attachment: scroll;
1759 +#mainContentArea .hero-search {
1760 + margin-left: auto;
1761 + width: 170px;
1762 + height: 26px;
1763 + border: 1px solid #E2E8F0;
1764 + border-radius: 20px;
1765 + background: #F1F5F9;
1873 1873  }
1874 -
1875 -/* Keep the article area readable while preserving the page background around it. */
1876 -#mainContentArea .resource-layout {
1877 - padding: 28px;
1878 - border: 1px solid fade(@line, 85%);
1879 - border-radius: @radius;
1880 - background: rgba(255, 255, 255, .88);
1881 - box-shadow: @shadow-sm;
1767 +#mainContentArea .hero-browser-body {
1768 + display: grid;
1769 + grid-template-columns: 150px minmax(0, 1fr);
1882 1882  }
1883 -
1884 -/* Ensure all reusable cards have a real surface, not transparent over the gradient. */
1885 -#mainContentArea .widget,
1886 -#mainContentArea .pathway-card,
1887 -#mainContentArea .service-card,
1888 -#mainContentArea .resource-card,
1889 -#mainContentArea .services .service,
1890 -#mainContentArea .product-card,
1891 -#mainContentArea .product-feature,
1892 -#mainContentArea .product-summary-card,
1893 -#mainContentArea .product-info-card {
1894 - background: #fff;
1771 +#mainContentArea .hero-sidebar {
1772 + padding: 24px 18px;
1773 + border-right: 1px solid @line;
1774 + background: #F8FAFC;
1895 1895  }
1896 -
1897 -/* Make notes more readable and visually stronger. */
1898 -#mainContentArea .resource-note {
1899 - border: 1px solid fade(@brand, 18%);
1900 - border-left: 4px solid @brand;
1901 - background: #fff;
1902 - box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
1776 +#mainContentArea .hero-nav-item,
1777 +#mainContentArea .hero-status-row,
1778 +#mainContentArea .hero-version-flow,
1779 +#mainContentArea .hero-flow {
1780 + display: flex;
1781 + align-items: center;
1903 1903  }
1904 -
1905 -/* Keep the sidebar clearly separated from the background. */
1906 -#mainContentArea .resource-sidebar {
1907 - background: #fff;
1783 +#mainContentArea .hero-nav-item {
1784 + gap: 9px;
1785 + padding: 10px 8px;
1786 + color: #334155;
1787 + font-size: 13px;
1908 1908  }
1909 -
1910 -/* Make CTA panels stand out more clearly. */
1911 -#mainContentArea .resource-cta,
1912 -#mainContentArea .resource-inline-cta {
1913 - background: #fff;
1789 +#mainContentArea .hero-nav-icon {
1790 + width: 20px;
1791 + height: 20px;
1792 + border: 1px solid #CBD5E1;
1793 + border-radius: 5px;
1914 1914  }
1915 -
1916 -/* Improve table readability on long resource pages. */
1917 -#mainContentArea .resource-content table {
1918 - background: #fff;
1795 +#mainContentArea .hero-content-panel {
1796 + padding: 26px;
1919 1919  }
1920 -
1921 -#mainContentArea .resource-content table th {
1798 +#mainContentArea .hero-panel-title,
1799 +#mainContentArea .hero-card-title {
1922 1922   color: @text;
1923 - background: #F8FAFC;
1801 + font-weight: 800;
1924 1924  }
1925 -
1926 -#mainContentArea .resource-content table td {
1927 - color: @text-soft;
1803 +#mainContentArea .hero-panel-title {
1804 + margin-bottom: 18px;
1805 + font-size: 20px;
1928 1928  }
1929 -
1930 -/* Slightly improve paragraph/list contrast in long articles. */
1931 -#mainContentArea .resource-content p,
1932 -#mainContentArea .resource-content li {
1933 - color: @text-soft;
1807 +#mainContentArea .hero-skeleton {
1808 + height: 8px;
1809 + margin-bottom: 10px;
1810 + border-radius: 10px;
1811 + background: #E2E8F0;
1934 1934  }
1935 -
1936 -#mainContentArea .resource-content .resource-note p,
1937 -#mainContentArea .resource-content .resource-checklist li,
1938 -#mainContentArea .resource-content .process-list li {
1939 - color: @muted;
1813 +#mainContentArea .hero-skeleton.short {
1814 + width: 64%;
1940 1940  }
1941 -
1942 -@media (max-width: 900px) {
1943 - #mainContentArea .resource-layout {
1944 - padding: 22px;
1945 - }
1816 +#mainContentArea .hero-dashboard-grid {
1817 + margin-top: 28px;
1818 + display: grid;
1819 + grid-template-columns: repeat(2, minmax(0, 1fr));
1820 + gap: 18px;
1946 1946  }
1947 -
1948 -@media (max-width: 640px) {
1949 - #mainContentArea .resource-layout {
1950 - padding: 18px;
1951 - border-radius: 14px;
1952 - }
1822 +#mainContentArea .hero-mini-card {
1823 + padding: 18px;
1824 + border: 1px solid @line;
1825 + border-radius: 14px;
1826 + background: #fff;
1953 1953  }
1828 +#mainContentArea .hero-mini-card h4 {
1829 + margin: 0 0 14px;
1830 + font-size: 15px;
1831 +}
1832 +#mainContentArea .hero-status-row {
1833 + gap: 10px;
1834 + margin: 11px 0;
1835 + color: #475569;
1836 + font-size: 13px;
1837 +}
1838 +#mainContentArea .hero-floating {
1839 + position: absolute;
1840 + border-radius: 16px;
1841 +}
1842 +#mainContentArea .hero-upgrade-card {
1843 + left: 0;
1844 + bottom: 72px;
1845 + width: 320px;
1846 + padding: 20px;
1847 +}
1848 +#mainContentArea .hero-security-card {
1849 + right: 20px;
1850 + top: 260px;
1851 + width: 260px;
1852 + padding: 22px;
1853 +}
1854 +#mainContentArea .hero-security-card ul {
1855 + margin: 0;
1856 + padding: 0;
1857 + list-style: none;
1858 +}
1859 +#mainContentArea .hero-security-card li {
1860 + margin: 12px 0;
1861 + font-size: 14px;
1862 +}
1863 +#mainContentArea .hero-security-card li::before {
1864 + content: "✓";
1865 + margin-right: 8px;
1866 + color: @brand;
1867 + font-weight: 900;
1868 +}
1869 +#mainContentArea .hero-card-title {
1870 + margin-bottom: 16px;
1871 +}
1872 +#mainContentArea .hero-version-flow {
1873 + gap: 8px;
1874 +}
1875 +#mainContentArea .hero-version {
1876 + width: 62px;
1877 + height: 54px;
1878 + padding: 0 8px;
1879 + display: grid;
1880 + place-items: center;
1881 + box-sizing: border-box;
1882 + border-radius: 8px;
1883 + background: #F1F5F9;
1884 + color: #334155;
1885 + text-align: center;
1886 + font-size: 13px;
1887 + line-height: 1.25;
1888 +}
1889 +#mainContentArea .hero-version.active {
1890 + width: 84px;
1891 + background: @text;
1892 + color: #fff;
1893 +}
1894 +#mainContentArea .hero-arrow {
1895 + color: #64748B;
1896 +}
1897 +#mainContentArea .hero-flow {
1898 + position: absolute;
1899 + right: 48px;
1900 + bottom: 18px;
1901 + gap: 12px;
1902 +}
1903 +#mainContentArea .hero-env {
1904 + min-width: 130px;
1905 + padding: 16px 20px;
1906 + border: 1px solid @line;
1907 + border-radius: 12px;
1908 + background: #fff;
1909 + color: #475569;
1910 + text-align: center;
1911 + text-transform: uppercase;
1912 + font-size: 12px;
1913 + letter-spacing: 1.3px;
1914 + box-shadow: 0 16px 40px rgba(15, 23, 42, .08);
1915 +}
1954 1954  
1955 -