Skip to Content
0 Votes

Changes for page Home

Last modified by Alex Cotiugă on 2026/01/13 13:12
From version 7.122
edited by Alex Cotiugă
on 2025/11/14 09:10
Change comment: There is no comment for this version
To version 7.120
edited by Alex Cotiugă
on 2025/11/14 08:59
Change comment: There is no comment for this version

Summary

Details

Page properties
Content
... ... @@ -7,20 +7,22 @@
7 7   <section class="hero hero-centered" aria-labelledby="hero-title">
8 8   <div class="container">
9 9   <div class="row">
10 - <div class="col-sm-12 hero-inner">
11 - <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1>
12 - <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen.</p>
13 - <div class="hero-cta">
14 - <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease">
15 - Request a consultation
16 - </a>
10 + <div class="col-sm-12">
11 + <div class="hero-inner">
12 + <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1>
13 + <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen.</p>
14 + <div class="hero-cta">
15 + <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease">
16 + Request a consultation
17 + </a>
18 + </div>
19 + <ul class="benefits">
20 + <li>Smooth upgrades</li>
21 + <li>Reliable support plans</li>
22 + <li>Custom integrations</li>
23 + <li>Secure, optimized platforms</li>
24 + </ul>
17 17   </div>
18 - <ul class="benefits">
19 - <li>Smooth upgrades</li>
20 - <li>Reliable support plans</li>
21 - <li>Custom integrations</li>
22 - <li>Secure, optimized platforms</li>
23 - </ul>
24 24   </div>
25 25   </div>
26 26   </div>
... ... @@ -48,14 +48,16 @@
48 48   <div class="container">
49 49   <h2 id="why-title">Why choose Agnease</h2>
50 50   <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p>
51 - <div class="row widgets">
53 + <div class="row widgets" role="list">
52 52   #foreach ($entry in $whySectionData)
53 - <div class="col-xs-12 col-sm-6 col-md-3 widget">
54 - <div class="icon" aria-hidden="true">
55 - <i class="fa fa-$entry.icon"></i>
56 - <h4>$entry.title</h4>
55 + <div class="col-xs-12 col-sm-6 col-md-3">
56 + <div class="widget" role="listitem">
57 + <div class="icon" aria-hidden="true">
58 + <i class="fa fa-$entry.icon"></i>
59 + <h4>$entry.title</h4>
60 + </div>
61 + <p>$entry.content</p>
57 57   </div>
58 - <p>$entry.content</p>
59 59   </div>
60 60   #end
61 61   </div>
... ... @@ -116,7 +116,7 @@
116 116   </p>
117 117  
118 118   #set ($servicesSize = $servicesSectionData.size())
119 - <div class="row services-grid">
123 + <div class="row services-grid" role="list">
120 120   #foreach ($entry in $servicesSectionData)
121 121   #set ($classes = "service col-xs-12 col-sm-6")
122 122   ## If this is the last item and the number of services is odd,
... ... @@ -124,7 +124,7 @@
124 124   #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1)
125 125   #set ($classes = "$classes col-sm-offset-3")
126 126   #end
127 - <div class="$classes">
131 + <div class="$classes" role="listitem">
128 128   <div class="service-icon">
129 129   <i class="fa fa-$entry.icon" aria-hidden="true"></i>
130 130   </div>
XWiki.StyleSheetExtension[0]
Code
... ... @@ -162,9 +162,20 @@
162 162   /* === WHY CHOOSE (widgets using flex) === */
163 163   .widgets {
164 164   margin-top: 12px;
165 + display: grid;
166 + grid-template-columns: 1fr;
167 + grid-gap: 16px; // spacing between cards
165 165  
169 + @media (min-width: 768px) {
170 + grid-template-columns: repeat(2, 1fr);
171 + }
172 +
173 + @media (min-width: 992px) {
174 + grid-template-columns: repeat(4, 1fr);
175 + }
176 +
166 166   .widget {
167 - height: 100%;
178 + box-sizing: border-box;
168 168   padding: 18px;
169 169   background: #fff;
170 170   border: 1px solid @line;
... ... @@ -173,6 +173,7 @@
173 173   transition: transform .18s ease, box-shadow .18s ease;
174 174   display: flex;
175 175   flex-direction: column;
187 + height: 100%;
176 176  
177 177   &:hover {
178 178   transform: translateY(-2px);