0 Votes

Changes for page Home

Last modified by Alex Cotiugă on 2026/01/13 13:12

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Children
- Content
- Comments
- Attachments
- History
- Information
- Likes

From 7.121 to 7.120 From 7.125 to 7.124

From version 7.124

edited by Alex Cotiugă
on 2025/11/17 08:36

Change comment: There is no comment for this version

To version 7.121

edited by Alex Cotiugă
on 2025/11/14 08:59

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)
Objects (1 modified, 0 added, 0 removed)
- XWiki.StyleSheetExtension[0]

Details

Page properties

Content

@@ -3,25 +3,32 @@
  Agnease helps organizations maintain, upgrade, and extend their XWiki environments with clarity and precision. Focusing on stability, performance, and long-term support we ensure your business knowledge and collaboration tools remain dependable, secure, and adaptable to growth.*#
  {{html clean="false"}}
  <main class="agnease-landing">
--  ## HERO
++  <!-- ================= HERO ================= -->
    <section class="hero hero-centered" aria-labelledby="hero-title">
--    <div class="container hero-inner">
--      <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1>
--      <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen.</p>
--      <div class="hero-cta">
--        <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease">
--          Request a consultation
--        </a>
++    <div class="container">
++      <div class="row">
++        <div class="col-sm-12">
++          <div class="hero-inner">
++            <h1 id="hero-title">Professional XWiki solutions, from setup to long-term stability</h1>
++            <p class="lead">Need your XWiki upgraded, secured, or improved? Let’s make it happen.</p>
++            <div class="hero-cta">
++              <a class="btn btn-primary" href="#contact" aria-label="Schedule a call with Agnease">
++                Request a consultation
++              </a>
++            </div>
++            <ul class="benefits">
++              <li>Smooth upgrades</li>
++              <li>Reliable support plans</li>
++              <li>Custom integrations</li>
++              <li>Secure, optimized platforms</li>
++            </ul>
++          </div>
++        </div>
        </div>
--      <ul class="benefits">
--        <li>Smooth upgrades</li>
--        <li>Reliable support plans</li>
--        <li>Custom integrations</li>
--        <li>Secure, optimized platforms</li>
--      </ul>
      </div>
    </section>
--  ## WHY CHOOSE
++
++  <!-- ========= WHY CHOOSE AGNEASE (widgets) ========= -->
    #set ($whySectionData = [{
      'title': 'Stability & security',
      'icon': 'shield',
@@ -43,20 +43,22 @@
      <div class="container">
        <h2 id="why-title">Why choose Agnease</h2>
        <p class="lead">10+ years of XWiki expertise with structured delivery and lasting collaboration</p>
--      <div class="widgets">
++      <div class="row widgets" role="list">
          #foreach ($entry in $whySectionData)
--          <article class="widget">
--            <div class="icon" aria-hidden="true">
--              <i class="fa fa-$entry.icon"></i>
--              <h4>$entry.title</h4>
++          <div class="col-xs-12 col-sm-6 col-md-3">
++            <div class="widget" role="listitem">
++              <div class="icon" aria-hidden="true">
++                <i class="fa fa-$entry.icon"></i>
++                <h4>$entry.title</h4>
++              </div>
++              <p>$entry.content</p>
              </div>
--            <p>$entry.content</p>
--          </article>
++          </div>
          #end
        </div>
      </div>
    </section>
--  ## SERVICES
++  <!-- ================= SERVICES ================= -->
    #set ($servicesSectionData = [{
      'title': 'Upgrades',
      'icon': 'refresh',
@@ -109,9 +109,17 @@
        <p class="lead">
          All the XWiki services you need, delivered with precision and care
        </p>
--      <div class="services-grid">
++
++      #set ($servicesSize = $servicesSectionData.size())
++      <div class="row services-grid" role="list">
          #foreach ($entry in $servicesSectionData)
--          <article class="service">
++          #set ($classes = "service col-xs-12 col-sm-6")
++          ## If this is the last item and the number of services is odd,
++          ## center it on its own row on small+ screens
++          #if ($foreach.count == $servicesSize && ($servicesSize % 2) == 1)
++            #set ($classes = "$classes col-sm-offset-3")
++          #end
++          <div class="$classes" role="listitem">
              <div class="service-icon">
                <i class="fa fa-$entry.icon" aria-hidden="true"></i>
              </div>
@@ -124,12 +124,11 @@
                  #end
                </ul>
              </div>
--          </article>
++          </div>
          #end
        </div>
      </div>
    </section>
--  ## CTA INLINE
    <section id="contact" class="cta-section">
      <div class="container">
        <p class="text-center contact-inline">

XWiki.StyleSheetExtension[0]

Code

@@ -1,16 +1,19 @@
--/* ========== Agnease Landing (scoped to .agnease-landing) ========== */
++/* ========== Agnease Landing (LESS, scoped to .agnease-landing) ========== */
  @brand:        #00937D;
  @brand-strong: #007B6A;
  @text:         #2D3A34;
  @muted:        #5B6B64;
++@bg:           #FFFFFF;
++@panel:        #F7F9F8;
  @line:         #E4ECE9;
  @radius:       16px;
++@radius-sm:    12px;
  @shadow-sm:    0 6px 20px rgba(0,0,0,.06);
  @shadow:       0 12px 36px rgba(0,0,0,.08);
  @maxw:         1140px;
  .agnease-landing {
--  /* Base typography */
++  /* Base */
    color: @text;
    font: 16px/1.6 Inter, Segoe UI, Roboto, system-ui, -apple-system, Arial, sans-serif;
@@ -25,7 +25,6 @@
    img {
      max-width: 100%;
--    height: auto;
      display: block;
    }
@@ -34,9 +34,11 @@
      max-width: 72ch;
    }
--  /* Keep Bootstrap container behavior, just cap width */
++  /* Use Bootstrap’s container padding to avoid overflow */
    .container {
      max-width: @maxw;
++    margin: 5px auto 0;
++    padding: 0 15px;
    }
    /* Global sections */
@@ -52,7 +52,7 @@
    .btn {
      display: inline-flex;
      align-items: center;
--    justify-content: center;
++    gap: .55rem;
      padding: .85rem 1.1rem;
      border-radius: 12px;
      border: 2px solid transparent;
@@ -75,11 +75,21 @@
          color: #fff;
        }
      }
++
++    &-ghost {
++      background: #fff;
++      color: @brand;
++      border-color: @brand;
++      &:hover {
++        color: @brand-strong;
++        border-color: @brand-strong;
++      }
++    }
    }
--  /* ========== HERO ========== */
++  /* HERO (centered) */
    .hero {
--    overflow: hidden;             /* contain gradients, prevent overflow */
++    overflow: hidden;              /* contain gradients */
      background-repeat: no-repeat;
      background-attachment: scroll;
@@ -92,161 +92,167 @@
        align-items: center;
        justify-content: center;
        min-height: 350px;
--    }
--    .hero-inner {
--      margin: auto;
--      display: flex;
--      flex-direction: column;
--      align-items: center;
--      gap: 1rem;
--    }
++      .hero-inner {
++        margin: auto;
++        display: flex;
++        flex-direction: column;
++        align-items: center;
++        gap: 1rem;
++      }
--    .hero-cta {
--      display: flex;
--      gap: 0.8rem;
--      flex-wrap: wrap;
--      justify-content: center;
--      margin-top: 0.3rem;
--    }
++      .lead {
++        color: @muted;
++        margin: 0 auto 0.9rem;
++      }
--    .benefits {
--      display: flex;
--      flex-wrap: wrap;
--      justify-content: center;
--      list-style: none;
--      padding: 0;
--      margin: 0.8rem 0 0;
--      color: @muted;
--      font-size: 14px;
--
--      li + li::before {
--        content: "•";
--        margin: 0 5px 0 0;
++      .hero-cta {
++        display: flex;
++        gap: 0.8rem;
++        flex-wrap: wrap;
++        justify-content: center;
++        margin-top: 0.3rem;
        }
--      /* Mobile: only bullets between items 1–2 and 3–4 */
--      @media (max-width: 640px) {
++      .benefits {
++        display: flex;
++        flex-wrap: wrap;
++        justify-content: center;
++        list-style: none;
++        padding: 0;
++        margin: 0.8rem 0 0;
++        color: @muted;
++        font-size: 14px;
++        gap: 5px;
++
          li + li::before {
--          content: none;
--        }
--        li:nth-child(1)::after,
--        li:nth-child(3)::after {
            content: "•";
--          margin-left: 5px;
++          margin-right: 5px;
          }
++
++        /* Mobile: show bullets only between 1–2 and 3–4 */
++        @media (max-width: 640px) {
++          li + li::before {
++            content: none;
++          }
++          li:nth-child(1)::after,
++          li:nth-child(3)::after {
++            content: "•";
++            margin-left: 5px;
++          }
++        }
        }
      }
    }
--  /* ========== WHY CHOOSE (widgets) ========== */
++  /* === WHY CHOOSE (widgets using flex) === */
    .widgets {
      margin-top: 12px;
--  }
--  .widget {
--    /* This div is also a Bootstrap col-*, so we don't touch width */
--    margin-bottom: 16px;
--    padding: 18px;
--    background: #fff;
--    border: 1px solid @line;
--    border-radius: @radius;
--    box-shadow: @shadow-sm;
--    transition: transform .18s ease, box-shadow .18s ease;
--    display: flex;
--    flex-direction: column;
--    height: 100%;
++    .widget {
++      height: 100%;
++      padding: 18px;
++      background: #fff;
++      border: 1px solid @line;
++      border-radius: @radius;
++      box-shadow: @shadow-sm;
++      transition: transform .18s ease, box-shadow .18s ease;
++      display: flex;
++      flex-direction: column;
--    &:hover {
--      transform: translateY(-2px);
--      box-shadow: @shadow;
--    }
++      &:hover {
++        transform: translateY(-2px);
++        box-shadow: @shadow;
++      }
--    .icon {
--      display: flex;
--      align-items: center;
--      gap: 10px;
--      padding-bottom: 6px;
--      margin-bottom: 8px;
--      border-bottom: 1px solid fade(@line, 60%);
--      i  { color: @brand; }
--      h4 { margin: 0; line-height: 1.2; color: @text; }
--    }
++      .icon {
++        display: flex;
++        align-items: center;
++        gap: 10px;
++        padding-bottom: 6px;
++        margin-bottom: 8px;
++        border-bottom: 1px solid fade(@line, 60%);
++        i  { color: @brand; }
++        h4 { margin: 0; line-height: 1.2; color: @text; }
++      }
--    p {
--      margin: 0;
--      color: @muted;
--      line-height: 1.45;
++      p {
++        margin: 0;
++        color: @muted;
++        line-height: 1.45;
++      }
      }
    }
--  /* ========== SERVICES ========== */
++  /* SERVICES */
    .services {
      .services-grid {
        margin-top: 12px;
--    }
--    .service {
--      margin-bottom: 24px;
--      display: flex;              /* horizontal: icon + body */
--      align-items: flex-start;
--      gap: 16px;
--
--      .service-icon {
--        width: 42px;
--        height: 42px;
--        border-radius: 50%;
++      .service {
++        margin-bottom: 24px;
          display: flex;
--        align-items: center;
--        justify-content: center;
--        font-size: 18px;
--        color: @brand;
--        background: fade(@brand, 10%);
--        margin-top: 3px;
--        flex-shrink: 0;
--      }
++        align-items: flex-start;
++        gap: 16px;
--      .service-body {
--        h4 {
--          margin: 0 0 4px;
--          font-size: 1.125rem;
--          font-weight: 800;
++        .service-icon {
++          width: 42px;
++          height: 42px;
++          border-radius: 50%;
++          display: flex;
++          align-items: center;
++          justify-content: center;
++          font-size: 18px;
++          color: @brand;
++          background: fade(@brand, 10%);
++          margin-top: 3px;
++          flex-shrink: 0;
          }
--        p {
--          margin: 0 0 6px;
--          color: @text;
--          line-height: 1.5;
--        }
++        .service-body {
++          h4 {
++            margin: 0 0 4px;
++            font-size: 1.125rem;
++            font-weight: 800;
++          }
--        ul {
--          margin: .45rem 0 0;
--          padding-left: 1.1rem;
--          color: @muted;
--          font-size: 13px;
--        }
++          p {
++            margin: 0 0 6px;
++            color: @text;
++            line-height: 1.5;
++          }
--        li {
--          margin: .25rem 0;
--          line-height: 1.45;
++          ul {
++            margin: .45rem 0 0;
++            padding-left: 1.1rem;
++            color: @muted;
++            font-size: 13px;
++          }
++
++          li {
++            margin: .25rem 0;
++            line-height: 1.45;
++          }
          }
        }
      }
      @media (max-width: 767px) {
--      .service {
--        margin-bottom: 20px;
--      }
++      .services-grid {
++        .service {
++          margin-bottom: 20px;
++        }
--      .service-icon {
--        width: 36px;
--        height: 36px;
--        font-size: 16px;
++        .service-icon {
++          width: 36px;
++          height: 36px;
++          font-size: 16px;
++        }
        }
      }
    }
--  /* ========== CTA inline ========== */
++  /* CTA inline section at the end */
    .cta-section {
      padding: 24px 0 16px;