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.118
edited by Alex Cotiugă
on 2025/11/14 08:30
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,9 +48,9 @@
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">
55 + <div class="widget col-sm-6 col-md-3" role="listitem">
54 54   <div class="icon" aria-hidden="true">
55 55   <i class="fa fa-$entry.icon"></i>
56 56   <h4>$entry.title</h4>
... ... @@ -116,7 +116,7 @@
116 116   </p>
117 117  
118 118   #set ($servicesSize = $servicesSectionData.size())
119 - <div class="row services-grid">
121 + <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">
129 + <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,8 +162,20 @@
162 162   /* === WHY CHOOSE (widgets using flex) === */
163 163   .widgets {
164 164   margin-top: 12px;
165 + display: flex;
166 + flex-wrap: wrap;
167 + justify-content: space-between;
165 165  
166 166   .widget {
170 + box-sizing: border-box;
171 +
172 + /* Desktop (md+) – 4 per row */
173 + flex: 0 0 24%;
174 + max-width: 24%;
175 + margin-bottom: 16px;
176 +
177 + display: flex;
178 + flex-direction: column;
167 167   height: 100%;
168 168   padding: 18px;
169 169   background: #fff;
... ... @@ -171,8 +171,6 @@
171 171   border-radius: @radius;
172 172   box-shadow: @shadow-sm;
173 173   transition: transform .18s ease, box-shadow .18s ease;
174 - display: flex;
175 - flex-direction: column;
176 176  
177 177   &:hover {
178 178   transform: translateY(-2px);
... ... @@ -196,6 +196,20 @@
196 196   line-height: 1.45;
197 197   }
198 198   }
209 +
210 + @media (max-width: 991px) {
211 + .widget {
212 + flex: 0 0 48%;
213 + max-width: 48%;
214 + }
215 + }
216 +
217 + @media (max-width: 767px) {
218 + .widget {
219 + flex: 0 0 100%;
220 + max-width: 100%;
221 + }
222 + }
199 199   }
200 200  
201 201   /* SERVICES */