Skip to Content

Changes for page Public Web Site

Last modified by Agnease on 2026/07/07 14:40
From version 25.23
edited by Agnease
on 2026/06/30 11:31
Change comment: There is no comment for this version
To version 29.26
edited by Agnease
on 2026/07/03 16:13
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -2,7 +2,45 @@
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 5  
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 +
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 +
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>
28 + </div>
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>
40 + </div>
41 + </div>
42 + </section>
43 +#*
6 6   <section class="hero hero-centered" aria-labelledby="hero-title">
7 7   <div class="container hero-inner">
8 8   <h1 id="hero-title">Professional XWiki consulting and engineering</h1>
... ... @@ -26,7 +26,7 @@
26 26   </div>
27 27   </div>
28 28   </section>
29 -
67 +*#
30 30   <section class="trust-strip" aria-label="Agnease experience">
31 31   <div class="container">
32 32   <ul>
agnease-xwiki-hero.png
Author
... ... @@ -1,0 +1,1 @@
1 +XWiki.Admin
Size
... ... @@ -1,0 +1,1 @@
1 +981.8 KB
Content
XWiki.StyleSheetExtension[0]
code
... ... @@ -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,18 +162,12 @@
162 162   color: #fff;
163 163   }
164 164  }
165 -
165 +*/
166 166  .btn-secondary {
167 - color: @brand;
167 + color: @text;
168 168   background: #fff;
169 - border: 1px solid fade(@brand, 35%);
169 + border: 1px solid fade(@text, 35%);
170 170  
171 - &:hover,
172 - &:focus {
173 - color: @brand-strong;
174 - border-color: @brand;
175 - background: @brand-bg;
176 - }
177 177  }
178 178  
179 179  /* ========== Hero ========== */
... ... @@ -185,9 +185,6 @@
185 185  
186 186   &.hero-centered {
187 187   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%);
191 191   display: flex;
192 192   align-items: center;
193 193   justify-content: center;
... ... @@ -528,7 +528,6 @@
528 528   align-items: flex-start;
529 529   gap: 16px;
530 530   padding: 22px;
531 - background: #fff;
532 532   border: 1px solid @line;
533 533   border-radius: @radius;
534 534   box-shadow: @shadow-sm;
... ... @@ -586,23 +586,104 @@
586 586  
587 587  .split-grid {
588 588   display: grid;
589 - grid-template-columns: 1.1fr .9fr;
579 + grid-template-columns: .95fr 1.05fr;
590 590   grid-gap: 36px;
591 591   max-width: 1040px;
592 592   margin: 0 auto;
593 - align-items: center;
583 + align-items: stretch;
594 594  }
595 595  
596 596  .split-copy {
587 + position: relative;
588 + overflow: hidden;
589 + min-height: 100%;
590 + padding: 42px 38px;
591 + border-radius: 26px;
592 + background:
593 + radial-gradient(circle at 86% 12%, fade(@brand, 22%) 0%, transparent 32%),
594 + linear-gradient(135deg, @text 0%, @text-soft 100%);
595 + color: #fff;
596 + box-shadow: @shadow;
597 +
598 + &::before {
599 + content: "";
600 + position: absolute;
601 + inset: 0;
602 + background:
603 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
604 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
605 + background-size: 48px 48px;
606 + opacity: .36;
607 + pointer-events: none;
608 + }
609 +
610 + h2,
611 + p {
612 + position: relative;
613 + z-index: 1;
614 + }
615 +
597 597   h2 {
598 598   text-align: left;
599 - margin-top: 0;
618 + margin: 0 0 18px;
619 + color: #fff;
620 + font-size: 30px;
621 + line-height: 1.18;
622 + letter-spacing: -.02em;
600 600   }
601 601  
602 602   p {
603 - color: @muted;
604 - line-height: 1.6;
626 + margin: 0 0 18px;
627 + color: #DBE4EF;
628 + line-height: 1.65;
629 +
630 + &:last-child {
631 + margin-bottom: 0;
632 + }
605 605   }
634 +
635 + h3,
636 + h4 {
637 + position: relative;
638 + z-index: 1;
639 + margin: 0 0 16px;
640 + color: #fff;
641 + font-size: 24px;
642 + line-height: 1.2;
643 + font-weight: 800;
644 + }
645 +
646 + h2 i,
647 + h3 i,
648 + h4 i {
649 + margin-right: 8px;
650 + color: @brand;
651 + }
652 +
653 + ul {
654 + position: relative;
655 + z-index: 1;
656 + margin: 18px 0 0;
657 + padding: 0;
658 + list-style: none;
659 + }
660 +
661 + li {
662 + position: relative;
663 + margin: 10px 0;
664 + padding-left: 28px;
665 + color: #DBE4EF;
666 + line-height: 1.5;
667 +
668 + &::before {
669 + content: "\f00c";
670 + font-family: FontAwesome;
671 + position: absolute;
672 + left: 0;
673 + top: 1px;
674 + color: @brand;
675 + }
676 + }
606 606  }
607 607  
608 608  .process-list {
... ... @@ -614,39 +614,75 @@
614 614   li {
615 615   counter-increment: process;
616 616   position: relative;
617 - padding: 16px 16px 16px 58px;
618 - margin-bottom: 12px;
619 - background: #fff;
688 + min-height: 104px;
689 + padding: 24px 26px 24px 82px;
690 + margin-bottom: 18px;
620 620   border: 1px solid @line;
621 621   border-radius: @radius;
693 + background: #fff;
622 622   box-shadow: @shadow-sm;
623 623   color: @muted;
624 624   line-height: 1.5;
625 625  
698 + &:last-child {
699 + margin-bottom: 0;
700 + }
701 +
626 626   &:before {
627 627   content: counter(process);
628 628   position: absolute;
629 - left: 16px;
630 - top: 16px;
631 - width: 28px;
632 - height: 28px;
705 + left: 26px;
706 + top: 26px;
707 + width: 38px;
708 + height: 38px;
633 633   border-radius: 50%;
634 - background: fade(@brand, 10%);
635 - color: @brand;
710 + background: @brand;
711 + color: #fff;
636 636   display: flex;
637 637   align-items: center;
638 638   justify-content: center;
639 639   font-weight: 800;
716 + box-shadow: 0 0 0 8px fade(@brand, 10%);
640 640   }
641 641  
642 642   strong {
643 643   display: block;
644 644   color: @text;
645 - margin-bottom: 3px;
722 + margin-bottom: 5px;
723 + font-size: 16px;
724 + line-height: 1.3;
646 646   }
647 647   }
648 648  }
649 649  
729 +/* ===== Contact page side panel ===== */
730 +
731 +.contact-side-panel {
732 + padding-top: 10px;
733 +}
734 +
735 +.contact-help-panel {
736 + margin-bottom: 18px;
737 + padding: 30px 28px;
738 +}
739 +
740 +.contact-help-panel h2 {
741 + font-size: 24px;
742 +}
743 +
744 +.contact-process-list li {
745 + min-height: auto;
746 +}
747 +
748 +/* CSS for hidden field to identify requests filled by bots. */
749 +.contact-hp-wrapper {
750 + position: absolute;
751 + left: -9999px;
752 + width: 1px;
753 + height: 1px;
754 + overflow: hidden;
755 +}
756 +
650 650  /* ========== Resources ========== */
651 651  
652 652  .resource-strip {
... ... @@ -749,7 +749,7 @@
749 749  /* ========== CTA ========== */
750 750  
751 751  .cta-section {
752 - padding: @section-padding;
859 + border: none;
753 753  
754 754   .contact-inline {
755 755   margin: 0;
... ... @@ -759,69 +759,68 @@
759 759   color: @brand;
760 760   }
761 761   }
762 -}
763 763  
764 -.cta-panel {
765 - max-width: 860px;
766 - margin: 0 auto;
767 - padding: 32px;
768 - border-radius: @radius;
769 - border: 1px solid fade(@brand, 20%);
770 - background:
771 - radial-gradient(34rem 12rem at 50% 0%, @brand-soft 0%, #fff 70%);
772 - box-shadow: @shadow-sm;
773 - text-align: center;
870 + .cta-panel {
871 + position: relative;
872 + overflow: hidden;
873 + max-width: 1040px;
874 + margin: 0 auto;
875 + padding: 48px 40px;
876 + border: 0;
877 + border-radius: 26px;
878 + background:
879 + radial-gradient(circle at 88% 10%, fade(@brand, 24%) 0%, transparent 30%),
880 + linear-gradient(135deg, @text 0%, @text-soft 100%);
881 + color: #fff;
882 + box-shadow: @shadow;
883 + text-align: center;
774 774  
775 - h2 {
776 - margin-top: 0;
777 - }
885 + &::before {
886 + content: "";
887 + position: absolute;
888 + inset: 0;
889 + background:
890 + linear-gradient(90deg, fade(#fff, 4%) 1px, transparent 1px),
891 + linear-gradient(180deg, fade(#fff, 4%) 1px, transparent 1px);
892 + background-size: 48px 48px;
893 + opacity: .4;
894 + pointer-events: none;
895 + }
778 778  
779 - p {
780 - color: @muted;
781 - line-height: 1.55;
782 - }
783 -}
897 + h2,
898 + p,
899 + .btn {
900 + position: relative;
901 + z-index: 1;
902 + }
784 784  
785 -.resource-inline-cta {
786 - display: flex;
787 - align-items: center;
788 - justify-content: space-between;
789 - gap: 22px;
790 - margin: 30px 0;
791 - padding: 20px 22px;
792 - border: 1px solid fade(@brand, 22%);
793 - border-radius: @radius;
794 - background: @brand-bg;
795 - box-shadow: @shadow-sm;
904 + h2 {
905 + max-width: 760px;
906 + margin: 0 auto 16px;
907 + color: #fff;
908 + }
796 796  
797 - p {
798 - margin: 0;
799 - color: @muted;
800 - line-height: 1.55;
801 - }
802 -
803 - strong {
804 - color: @text;
805 - }
806 -
807 - .btn {
808 - flex-shrink: 0;
809 - }
810 -}
811 -
812 -@media (max-width: 767px) {
813 - .resource-inline-cta {
814 - display: block;
815 - text-align: center;
816 -
817 817   p {
818 - margin-bottom: 14px;
911 + max-width: 760px;
912 + margin: 0 auto 28px;
913 + color: #DBE4EF;
914 + font-size: 16px;
915 + line-height: 1.6;
819 819   }
820 820  
821 - .btn {
822 - display: inline-block;
823 - margin-left: auto;
824 - margin-right: auto;
918 + .btn-primary {
919 + border-color: #fff;
920 + background: #fff;
921 + color: @text;
922 + box-shadow: 0 18px 42px rgba(0, 0, 0, .18);
923 +
924 + &:hover,
925 + &:focus {
926 + border-color: #fff;
927 + background: #fff;
928 + color: @brand-strong;
929 + text-decoration: none;
930 + }
825 825   }
826 826   }
827 827  }
... ... @@ -840,8 +840,12 @@
840 840   grid-template-columns: 1fr;
841 841   }
842 842  
843 - .split-copy h2 {
844 - text-align: center;
949 + .split-copy {
950 + padding: 34px 28px;
951 +
952 + h2 {
953 + text-align: center;
954 + }
845 845   }
846 846  }
847 847  
... ... @@ -909,12 +909,35 @@
909 909   padding: 20px;
910 910   }
911 911  
1022 + .split-copy {
1023 + padding: 30px 22px;
1024 + border-radius: 20px;
1025 + }
1026 +
1027 + .process-list li {
1028 + padding: 22px 20px 22px 68px;
1029 +
1030 + &:before {
1031 + left: 20px;
1032 + top: 22px;
1033 + width: 32px;
1034 + height: 32px;
1035 + }
1036 + }
1037 +
912 912   .services .service {
913 913   gap: 14px;
914 914   }
915 915  
916 - .cta-panel {
917 - padding: 24px 20px;
1042 + .cta-section {
1043 + .cta-panel {
1044 + padding: 30px 22px;
1045 + border-radius: 20px;
1046 +
1047 + .btn-primary {
1048 + width: 100%;
1049 + }
1050 + }
918 918   }
919 919  }
920 920  
... ... @@ -927,9 +927,6 @@
927 927  .resource-header {
928 928   padding: @section-padding;
929 929   border-top: none;
930 - background:
931 - radial-gradient(50rem 18rem at 50% -10%, @brand-soft 0%, transparent 60%),
932 - radial-gradient(50rem 18rem at 50% 0%, #E8F6F3 0%, transparent 60%);
933 933  
934 934   h1 {
935 935   margin: 0 auto 14px;
... ... @@ -1077,7 +1077,6 @@
1077 1077   border: 1px solid @line;
1078 1078   border-radius: @radius;
1079 1079   padding: 18px;
1080 - background: #fff;
1081 1081   box-shadow: @shadow-sm;
1082 1082  
1083 1083   h4 {
... ... @@ -1100,45 +1100,24 @@
1100 1100   }
1101 1101  }
1102 1102  
1103 -.resource-cta {
1104 - display: flex;
1105 - flex-direction: column;
1106 - align-items: center;
1107 - text-align: center;
1108 1108  
1109 - max-width: 820px;
1110 - margin: 42px auto 0;
1111 - padding: 28px 30px;
1112 - border: 1px solid fade(@brand, 20%);
1113 - border-radius: @radius;
1114 - background: @brand-bg;
1115 1115  
1116 - h3 {
1117 - margin-top: 0;
1118 - margin-bottom: 10px;
1119 - }
1120 -
1121 - p {
1122 - max-width: 680px;
1123 - margin-left: auto;
1124 - margin-right: auto;
1125 - color: @muted;
1126 - }
1127 -
1128 - .btn {
1129 - margin-top: 8px;
1130 - }
1131 -}
1132 -
1133 1133  .resource-note,
1134 1134  .resource-checklist,
1135 -.resource-cta {
1136 1136   display: flow-root;
1137 1137  }
1138 1138  
1139 1139  @media (max-width: 767px) {
1140 - .resource-cta {
1141 - padding: 24px 20px;
1240 + .resource-inline-cta {
1241 + grid-template-columns: 1fr;
1242 + gap: 16px;
1243 + padding: 22px 20px 22px 24px;
1244 + text-align: left;
1245 +
1246 + .btn {
1247 + width: 100%;
1248 + justify-self: stretch;
1249 + }
1142 1142   }
1143 1143  }
1144 1144  
... ... @@ -1176,7 +1176,6 @@
1176 1176  
1177 1177  .product-card {
1178 1178   position: relative;
1179 - background: #fff;
1180 1180   border: 1px solid @line;
1181 1181   border-radius: @radius;
1182 1182   box-shadow: @shadow-sm;
... ... @@ -1326,7 +1326,6 @@
1326 1326  .product-info-card,
1327 1327  .product-feature,
1328 1328  .product-gallery-panel {
1329 - background: #fff;
1330 1330   border: 1px solid @line;
1331 1331   border-radius: @radius;
1332 1332   box-shadow: @shadow-sm;
... ... @@ -1569,7 +1569,6 @@
1569 1569  /* ========== Resources Index ========== */
1570 1570  
1571 1571  .resources-index-page {
1572 - background: #fff;
1573 1573  
1574 1574   .services-grid {
1575 1575   grid-template-columns: repeat(2, minmax(0, 1fr));
... ... @@ -1648,9 +1648,182 @@
1648 1648  /* Keep large panels readable, but remove their inner gradients.
1649 1649  .industry-trust-section .industry-trust-panel,
1650 1650  .cta-panel,
1651 -.resource-inline-cta,
1652 1652  .resource-note,
1653 -.resource-cta {
1654 - background: #fff !important;
1655 - background-image: none !important;
1656 -} */
1757 +*/
1758 +
1759 +/* ========== Main Page Hero / SaaS Layout ========== */
1760 +
1761 +#mainContentArea .hero.hero-saas {
1762 + min-height: auto;
1763 + padding: 60px 0 34px;
1764 + display: flex;
1765 + align-items: center;
1766 + overflow: hidden;
1767 + background: transparent;
1768 +}
1769 +
1770 +#mainContentArea .hero-layout {
1771 + max-width: 1120px;
1772 + margin: 0 auto;
1773 + display: grid;
1774 + grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
1775 + gap: 56px;
1776 + align-items: center;
1777 +}
1778 +
1779 +#mainContentArea .hero-copy {
1780 + min-width: 0;
1781 + text-align: left;
1782 +}
1783 +
1784 +#mainContentArea .hero.hero-saas h1 {
1785 + max-width: 640px;
1786 + margin: 0 0 26px;
1787 + font-size: 60px;
1788 + font-weight: 800;
1789 + line-height: 1;
1790 + letter-spacing: -3px;
1791 +}
1792 +
1793 +#mainContentArea .hero.hero-saas h1 span {
1794 + color: @brand;
1795 +}
1796 +
1797 +#mainContentArea .hero.hero-saas .lead {
1798 + max-width: 590px;
1799 + margin: 0 0 28px;
1800 + color: #334155;
1801 + text-align: left;
1802 + font-size: 18px;
1803 + line-height: 1.6;
1804 +}
1805 +
1806 +#mainContentArea .hero.hero-saas .benefits {
1807 + max-width: 620px;
1808 + margin: 0 0 30px;
1809 + padding: 0;
1810 + display: grid;
1811 + grid-template-columns: repeat(2, minmax(0, 1fr));
1812 + gap: 10px 24px;
1813 + list-style: none;
1814 + color: #475569;
1815 + font-size: 15px;
1816 + text-align: left;
1817 +}
1818 +
1819 +#mainContentArea .hero.hero-saas .benefits li {
1820 + display: grid;
1821 + grid-template-columns: 18px minmax(0, 1fr);
1822 + column-gap: 8px;
1823 + align-items: start;
1824 + margin: 0;
1825 + line-height: 1.45;
1826 +}
1827 +
1828 +#mainContentArea .hero.hero-saas .benefits li::before {
1829 + content: "✓";
1830 + display: block;
1831 + width: 18px;
1832 + color: @brand;
1833 + font-weight: 900;
1834 + line-height: 1.45;
1835 + text-align: left;
1836 + margin: 0;
1837 +}
1838 +
1839 +#mainContentArea .hero.hero-saas .hero-actions,
1840 +#mainContentArea .hero.hero-saas #hero-cta {
1841 + display: flex;
1842 + flex-wrap: wrap;
1843 + justify-content: flex-start;
1844 + gap: 12px;
1845 + margin-top: 0;
1846 +}
1847 +
1848 +#mainContentArea .hero-image-wrapper {
1849 + min-width: 0;
1850 + display: flex;
1851 + justify-content: center;
1852 + align-items: center;
1853 +}
1854 +
1855 +#mainContentArea .hero-image {
1856 + display: block;
1857 + width: 100%;
1858 + max-width: 620px;
1859 + height: auto;
1860 + border: 0;
1861 +}
1862 +
1863 +/* ========== Main Page Hero Responsive ========== */
1864 +
1865 +@media (max-width: 1100px) {
1866 + #mainContentArea .hero-layout {
1867 + max-width: 760px;
1868 + grid-template-columns: 1fr;
1869 + gap: 34px;
1870 + }
1871 +
1872 + #mainContentArea .hero-copy {
1873 + order: 1;
1874 + text-align: center;
1875 + }
1876 +
1877 + #mainContentArea .hero-image-wrapper {
1878 + order: 2;
1879 + }
1880 +
1881 + #mainContentArea .hero.hero-saas h1 {
1882 + margin-left: auto;
1883 + margin-right: auto;
1884 + text-align: center;
1885 + }
1886 +
1887 + #mainContentArea .hero.hero-saas .lead {
1888 + margin-left: auto;
1889 + margin-right: auto;
1890 + text-align: center;
1891 + }
1892 +
1893 + #mainContentArea .hero.hero-saas .benefits {
1894 + margin-left: auto;
1895 + margin-right: auto;
1896 + }
1897 +
1898 + #mainContentArea .hero.hero-saas .hero-actions,
1899 + #mainContentArea .hero.hero-saas #hero-cta {
1900 + justify-content: center;
1901 + }
1902 +
1903 + #mainContentArea .hero-image {
1904 + max-width: 620px;
1905 + }
1906 +}
1907 +
1908 +@media (max-width: 640px) {
1909 + #mainContentArea .hero.hero-saas {
1910 + padding: 42px 0 28px;
1911 + }
1912 +
1913 + #mainContentArea .hero-layout {
1914 + gap: 28px;
1915 + }
1916 +
1917 + #mainContentArea .hero.hero-saas h1 {
1918 + font-size: 42px;
1919 + letter-spacing: -1.5px;
1920 + }
1921 +
1922 + #mainContentArea .hero.hero-saas .lead {
1923 + font-size: 17px;
1924 + }
1925 +
1926 + #mainContentArea .hero.hero-saas .benefits {
1927 + grid-template-columns: 1fr;
1928 + }
1929 +
1930 + #mainContentArea .hero-image {
1931 + max-width: 100%;
1932 + }
1933 +}
1934 +