maverick-wave 4.20.0 → 4.22.0

package/src/assets/images/gallery-snow.svg

@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" width="800" height="450" role="img" aria-label="Snowy hills with pine trees">
+  <defs>
+    <linearGradient id="sno-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#48628a"/>
+      <stop offset="0.65" stop-color="#9db6cf"/>
+      <stop offset="1" stop-color="#e2edf4"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="450" fill="url(#sno-sky)"/>
+  <g fill="#ffffff" opacity="0.75">
+    <circle cx="92" cy="66" r="3"/><circle cx="214" cy="112" r="2.5"/><circle cx="336" cy="54" r="3"/>
+    <circle cx="452" cy="128" r="2.5"/><circle cx="548" cy="72" r="3"/><circle cx="664" cy="140" r="2.5"/>
+    <circle cx="742" cy="62" r="3"/><circle cx="160" cy="172" r="2.5"/><circle cx="392" cy="190" r="2.5"/>
+    <circle cx="612" cy="204" r="2.5"/>
+  </g>
+  <polygon points="0,272 148,178 288,266 428,166 566,262 706,182 800,252 800,450 0,450" fill="#c3d6e6"/>
+  <path d="M0,318 C150,282 268,344 420,320 C560,298 672,286 800,326 L800,450 L0,450 Z" fill="#e8f2f8"/>
+  <g fill="#2c4a41">
+    <polygon points="96,388 128,296 160,388"/>
+    <polygon points="104,356 128,296 152,356"/>
+    <rect x="122" y="386" width="12" height="22"/>
+    <polygon points="228,404 268,290 308,404"/>
+    <polygon points="238,364 268,290 298,364"/>
+    <rect x="260" y="402" width="14" height="26"/>
+    <polygon points="504,398 540,296 576,398"/>
+    <polygon points="513,362 540,296 567,362"/>
+    <rect x="533" y="396" width="13" height="24"/>
+    <polygon points="600,382 632,300 664,382"/>
+    <polygon points="608,352 632,300 656,352"/>
+    <rect x="626" y="380" width="12" height="20"/>
+  </g>
+  <g fill="#f3f9fc">
+    <polygon points="128,296 141,326 115,326"/>
+    <polygon points="268,290 283,324 253,324"/>
+    <polygon points="540,296 553,328 527,328"/>
+    <polygon points="632,300 644,328 620,328"/>
+  </g>
+  <path d="M0,406 C170,388 300,428 460,410 C608,393 700,398 800,412 L800,450 L0,450 Z" fill="#ffffff"/>
+</svg>

package/src/assets/images/slider-field.svg

@@ -0,0 +1,124 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Golden field under a wide sky">
+  <defs>
+    <linearGradient id="sd-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#5ea3d8"/>
+      <stop offset="1" stop-color="#f1e2b6"/>
+    </linearGradient>
+    <linearGradient id="sd-field" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#dfba5c"/>
+      <stop offset="1" stop-color="#9c6d1e"/>
+    </linearGradient>
+    <g id="ear">
+      <path d="M0,0 v-24" stroke="#8a6018" stroke-width="2.4" stroke-linecap="round" fill="none"/>
+      <ellipse cx="0" cy="-31" rx="4.4" ry="9" fill="#e0b241"/>
+      <ellipse cx="0" cy="-31" rx="1.6" ry="9" fill="#a97c1e" opacity="0.5"/>
+    </g>
+  </defs>
+  <rect width="800" height="500" fill="url(#sd-sky)"/>
+  <circle cx="606" cy="104" r="46" fill="#fff5d0"/>
+  <circle cx="606" cy="104" r="78" fill="#fff5d0" opacity="0.25"/>
+  <g fill="#ffffff" opacity="0.8">
+    <ellipse cx="168" cy="98" rx="66" ry="20"/>
+    <ellipse cx="216" cy="86" rx="44" ry="16"/>
+    <ellipse cx="430" cy="62" rx="52" ry="16"/>
+    <ellipse cx="470" cy="54" rx="34" ry="12"/>
+  </g>
+  <g fill="#6d8a4e">
+    <ellipse cx="86" cy="272" rx="30" ry="20"/>
+    <ellipse cx="122" cy="276" rx="22" ry="15"/>
+    <ellipse cx="248" cy="274" rx="26" ry="17"/>
+    <ellipse cx="470" cy="272" rx="34" ry="21"/>
+    <ellipse cx="508" cy="277" rx="24" ry="15"/>
+    <ellipse cx="686" cy="274" rx="28" ry="18"/>
+    <ellipse cx="722" cy="278" rx="20" ry="13"/>
+  </g>
+  <path d="M0,278 C120,270 220,284 340,276 C460,268 580,282 800,272 L800,306 L0,306 Z" fill="#7fa15a"/>
+  <path d="M0,300 C160,292 300,312 460,300 C600,290 700,300 800,296 L800,500 L0,500 Z" fill="url(#sd-field)"/>
+  <g opacity="0.55">
+    <use href="#ear" transform="translate(8,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(29,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(50,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(71,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(92,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(113,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(134,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(155,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(176,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(197,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(218,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(239,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(260,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(281,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(302,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(323,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(344,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(365,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(386,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(407,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(428,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(449,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(470,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(491,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(512,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(533,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(554,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(575,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(596,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(617,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(638,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(659,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(680,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(701,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(722,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(743,335) scale(0.5)"/>
+    <use href="#ear" transform="translate(764,332) scale(0.5)"/>
+    <use href="#ear" transform="translate(785,335) scale(0.5)"/>
+  </g>
+  <g opacity="0.8">
+    <use href="#ear" transform="translate(4,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(37,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(70,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(103,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(136,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(169,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(202,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(235,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(268,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(301,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(334,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(367,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(400,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(433,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(466,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(499,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(532,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(565,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(598,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(631,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(664,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(697,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(730,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(763,402) scale(0.78)"/>
+    <use href="#ear" transform="translate(796,402) scale(0.78)"/>
+  </g>
+  <g>
+    <use href="#ear" transform="translate(-6,482) scale(1.15)"/>
+    <use href="#ear" transform="translate(41,501) scale(1.15)"/>
+    <use href="#ear" transform="translate(88,492) scale(1.15)"/>
+    <use href="#ear" transform="translate(135,497) scale(1.15)"/>
+    <use href="#ear" transform="translate(182,488) scale(1.15)"/>
+    <use href="#ear" transform="translate(229,493) scale(1.15)"/>
+    <use href="#ear" transform="translate(276,498) scale(1.15)"/>
+    <use href="#ear" transform="translate(323,489) scale(1.15)"/>
+    <use href="#ear" transform="translate(370,494) scale(1.15)"/>
+    <use href="#ear" transform="translate(417,499) scale(1.15)"/>
+    <use href="#ear" transform="translate(464,490) scale(1.15)"/>
+    <use href="#ear" transform="translate(511,495) scale(1.15)"/>
+    <use href="#ear" transform="translate(558,500) scale(1.15)"/>
+    <use href="#ear" transform="translate(605,491) scale(1.15)"/>
+    <use href="#ear" transform="translate(652,496) scale(1.15)"/>
+    <use href="#ear" transform="translate(699,501) scale(1.15)"/>
+    <use href="#ear" transform="translate(746,492) scale(1.15)"/>
+    <use href="#ear" transform="translate(793,497) scale(1.15)"/>
+  </g>
+</svg>

package/src/assets/images/slider-forest.svg

@@ -0,0 +1,33 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Misty pine forest">
+  <defs>
+    <linearGradient id="sf-bg" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#b9cfc4"/>
+      <stop offset="0.5" stop-color="#6f9481"/>
+      <stop offset="1" stop-color="#294438"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#sf-bg)"/>
+  <g fill="#8fae9d" opacity="0.55">
+    <polygon points="60,400 108,190 156,400"/>
+    <polygon points="210,410 252,206 294,410"/>
+    <polygon points="380,396 424,180 468,396"/>
+    <polygon points="546,410 590,200 634,410"/>
+    <polygon points="700,398 744,186 788,398"/>
+  </g>
+  <rect y="240" width="800" height="90" fill="#c3d6cc" opacity="0.45"/>
+  <g fill="#3f6653">
+    <polygon points="0,440 52,214 104,440"/>
+    <polygon points="146,450 196,196 246,450"/>
+    <polygon points="316,436 370,180 424,436"/>
+    <polygon points="490,452 542,192 594,452"/>
+    <polygon points="644,438 700,178 756,438"/>
+  </g>
+  <rect y="366" width="800" height="70" fill="#cfe0d7" opacity="0.4"/>
+  <g fill="#1e3a2d">
+    <polygon points="-20,500 40,270 100,500"/>
+    <polygon points="228,500 292,250 356,500"/>
+    <polygon points="452,500 512,262 572,500"/>
+    <polygon points="686,500 752,244 818,500"/>
+  </g>
+  <rect y="470" width="800" height="30" fill="#16291f"/>
+</svg>

package/src/assets/images/slider-lake.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Turquoise mountain lake">
+  <defs>
+    <linearGradient id="sl-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#3f8fb8"/>
+      <stop offset="1" stop-color="#bfe4e8"/>
+    </linearGradient>
+    <linearGradient id="sl-water" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#2aa39b"/>
+      <stop offset="1" stop-color="#0d5c66"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#sl-sky)"/>
+  <g fill="#ffffff" opacity="0.7">
+    <ellipse cx="580" cy="72" rx="58" ry="18"/>
+    <ellipse cx="624" cy="64" rx="38" ry="14"/>
+  </g>
+  <polygon points="0,272 140,158 292,268 430,142 568,272 706,178 800,266 800,300 0,300" fill="#6e9fb8"/>
+  <polygon points="430,142 470,182 456,177 442,190 426,178 402,185" fill="#ffffff"/>
+  <polygon points="0,300 800,300 800,500 0,500" fill="url(#sl-water)"/>
+  <polygon points="0,300 140,362 292,304 430,376 568,302 706,352 800,306 800,300" fill="#3fb3a8" opacity="0.55"/>
+  <g fill="#e8fbfa" opacity="0.5">
+    <rect x="90" y="348" width="180" height="6" rx="3"/>
+    <rect x="410" y="392" width="240" height="6" rx="3"/>
+    <rect x="180" y="428" width="300" height="7" rx="3.5"/>
+    <rect x="520" y="452" width="200" height="6" rx="3"/>
+  </g>
+  <g fill="#1c5c4a">
+    <polygon points="88,304 116,214 144,304"/>
+    <polygon points="140,304 164,232 188,304"/>
+    <polygon points="624,304 652,222 680,304"/>
+    <polygon points="676,304 700,240 724,304"/>
+  </g>
+  <path d="M0,296 C60,290 120,300 190,296 L190,312 L0,312 Z" fill="#2f6f52"/>
+  <path d="M610,296 C680,288 740,300 800,294 L800,312 L610,312 Z" fill="#2f6f52"/>
+</svg>

package/src/assets/images/slider-mountains.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Mountain landscape in daylight">
+  <defs>
+    <linearGradient id="sm-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#4c8fd0"/>
+      <stop offset="1" stop-color="#cfe6f5"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#sm-sky)"/>
+  <g fill="#ffffff" opacity="0.85">
+    <ellipse cx="182" cy="96" rx="62" ry="22"/>
+    <ellipse cx="228" cy="84" rx="42" ry="18"/>
+    <ellipse cx="140" cy="104" rx="40" ry="16"/>
+    <ellipse cx="612" cy="140" rx="70" ry="20"/>
+    <ellipse cx="660" cy="130" rx="44" ry="16"/>
+  </g>
+  <polygon points="0,330 124,214 248,318 372,196 500,326 628,222 752,332 800,300 800,500 0,500" fill="#8fb0cc"/>
+  <polygon points="372,196 414,236 400,231 386,243 370,232 344,239" fill="#ffffff"/>
+  <polygon points="628,222 664,258 651,253 639,264 626,254 604,260" fill="#ffffff"/>
+  <polygon points="0,378 138,272 268,372 400,258 536,382 664,286 800,388 800,500 0,500" fill="#5c86ab"/>
+  <polygon points="400,258 438,296 425,291 412,302 397,292 374,298" fill="#f2f8fc"/>
+  <polygon points="0,430 150,344 296,428 438,340 578,432 706,362 800,428 800,500 0,500" fill="#3b5f83"/>
+  <path d="M0,462 C160,444 300,478 460,458 C606,440 700,448 800,462 L800,500 L0,500 Z" fill="#2a4762"/>
+  <g fill="#24405a">
+    <polygon points="86,462 106,410 126,462"/>
+    <polygon points="128,466 152,404 176,466"/>
+    <polygon points="640,464 664,406 688,464"/>
+    <polygon points="684,468 704,418 724,468"/>
+  </g>
+</svg>

package/src/assets/images/slider-trees.svg

@@ -0,0 +1,41 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500" role="img" aria-label="Row of trees against a sunset">
+  <defs>
+    <linearGradient id="st-sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0" stop-color="#6a3a72"/>
+      <stop offset="0.45" stop-color="#d4674f"/>
+      <stop offset="1" stop-color="#f7c56b"/>
+    </linearGradient>
+  </defs>
+  <rect width="800" height="500" fill="url(#st-sky)"/>
+  <circle cx="400" cy="330" r="72" fill="#ffe9a8"/>
+  <circle cx="400" cy="330" r="120" fill="#ffe9a8" opacity="0.22"/>
+  <path d="M0,352 C140,336 260,362 400,348 C540,334 660,356 800,344 L800,500 L0,500 Z" fill="#7a3f37"/>
+  <g fill="#2a1622">
+    <path d="M104,362 l-9,-142 c0,-6 22,-6 22,0 l-9,142 Z"/>
+    <ellipse cx="106" cy="214" rx="46" ry="34"/><ellipse cx="76" cy="234" rx="34" ry="26"/>
+    <ellipse cx="138" cy="232" rx="32" ry="24"/><ellipse cx="112" cy="188" rx="30" ry="24"/>
+    <path d="M246,360 l-7,-176 c0,-5 18,-5 18,0 l-7,176 Z"/>
+    <ellipse cx="246" cy="178" rx="40" ry="30"/><ellipse cx="218" cy="196" rx="30" ry="23"/>
+    <ellipse cx="274" cy="194" rx="28" ry="22"/><ellipse cx="252" cy="156" rx="26" ry="21"/>
+    <path d="M560,358 l-9,-166 c0,-6 22,-6 22,0 l-9,166 Z"/>
+    <ellipse cx="560" cy="188" rx="44" ry="33"/><ellipse cx="528" cy="208" rx="32" ry="25"/>
+    <ellipse cx="592" cy="206" rx="30" ry="23"/><ellipse cx="566" cy="162" rx="28" ry="23"/>
+    <path d="M690,358 l-7,-128 c0,-5 18,-5 18,0 l-7,128 Z"/>
+    <ellipse cx="690" cy="226" rx="36" ry="27"/><ellipse cx="666" cy="242" rx="27" ry="21"/>
+    <ellipse cx="714" cy="240" rx="25" ry="20"/><ellipse cx="696" cy="204" rx="24" ry="19"/>
+  </g>
+  <g fill="#1a0f18">
+    <path d="M42,382 l-11,-130 c0,-7 26,-7 26,0 l-11,130 Z"/>
+    <ellipse cx="42" cy="248" rx="42" ry="32"/><ellipse cx="12" cy="268" rx="32" ry="25"/>
+    <ellipse cx="72" cy="266" rx="28" ry="22"/><ellipse cx="50" cy="218" rx="26" ry="22"/>
+    <path d="M768,384 l-10,-124 c0,-7 24,-7 24,0 l-10,124 Z"/>
+    <ellipse cx="768" cy="258" rx="40" ry="30"/><ellipse cx="740" cy="276" rx="30" ry="24"/>
+    <ellipse cx="796" cy="274" rx="26" ry="21"/><ellipse cx="774" cy="230" rx="25" ry="20"/>
+  </g>
+  <path d="M0,428 C170,414 320,442 480,424 C620,408 700,418 800,426 L800,500 L0,500 Z" fill="#3d1f22"/>
+  <g fill="#8f4c3c" opacity="0.55">
+    <ellipse cx="180" cy="404" rx="34" ry="7"/>
+    <ellipse cx="470" cy="392" rx="42" ry="8"/>
+    <ellipse cx="662" cy="410" rx="30" ry="7"/>
+  </g>
+</svg>

package/src/assets/images/tile-analytics.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Business intelligence suite">
+  <defs>
+    <linearGradient id="an-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#7a5cf0"/>
+      <stop offset="1" stop-color="#3d2a9c"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#an-bg)"/>
+  <circle cx="40" cy="36" r="52" fill="#ffffff" opacity="0.09"/>
+  <g fill="#ffffff" opacity="0.9">
+    <rect x="62" y="114" width="20" height="34" rx="4"/>
+    <rect x="90" y="96" width="20" height="52" rx="4"/>
+    <rect x="118" y="78" width="20" height="70" rx="4"/>
+  </g>
+  <path d="M72 104 l28 -18 l28 -20" fill="none" stroke="#ffd166" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+  <g fill="#ffd166">
+    <circle cx="72" cy="104" r="6"/>
+    <circle cx="100" cy="86" r="6"/>
+    <circle cx="128" cy="66" r="6"/>
+  </g>
+  <rect x="58" y="154" width="84" height="6" rx="3" fill="#ffffff" opacity="0.55"/>
+</svg>

package/src/assets/images/tile-cloud.svg

@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Cloud infrastructure">
+  <defs>
+    <linearGradient id="cl-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2eb6c9"/>
+      <stop offset="1" stop-color="#1d6d95"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#cl-bg)"/>
+  <circle cx="172" cy="176" r="52" fill="#ffffff" opacity="0.09"/>
+  <path d="M70 100 a24 24 0 0 1 46 -11 a18 18 0 0 1 14 30 h-52 a22 22 0 0 1 -8 -19 Z" fill="#ffffff" opacity="0.94"/>
+  <g fill="#ffffff" opacity="0.75">
+    <rect x="68" y="132" width="64" height="14" rx="4"/>
+    <rect x="68" y="152" width="64" height="14" rx="4"/>
+  </g>
+  <g fill="#1d6d95">
+    <circle cx="78" cy="139" r="3.5"/>
+    <circle cx="78" cy="159" r="3.5"/>
+  </g>
+</svg>

package/src/assets/images/tile-ecommerce.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="E-commerce platform">
+  <defs>
+    <linearGradient id="ec-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#2f6fed"/>
+      <stop offset="1" stop-color="#1b3f9c"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#ec-bg)"/>
+  <circle cx="160" cy="40" r="52" fill="#ffffff" opacity="0.09"/>
+  <path d="M64 88 h72 l-7 56 a9 9 0 0 1 -9 8 h-40 a9 9 0 0 1 -9 -8 Z" fill="#ffffff" opacity="0.94"/>
+  <path d="M84 90 v-10 a16 16 0 0 1 32 0 v10" fill="none" stroke="#ffffff" stroke-width="8" stroke-linecap="round"/>
+  <circle cx="88" cy="110" r="6" fill="#2f6fed"/>
+  <circle cx="112" cy="110" r="6" fill="#2f6fed"/>
+</svg>

package/src/assets/images/tile-enterprise.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Enterprise solutions">
+  <defs>
+    <linearGradient id="en-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#3fa66f"/>
+      <stop offset="1" stop-color="#1c5c46"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#en-bg)"/>
+  <circle cx="166" cy="46" r="50" fill="#ffffff" opacity="0.09"/>
+  <g fill="#ffffff" opacity="0.92">
+    <rect x="58" y="96" width="42" height="52" rx="5"/>
+    <rect x="106" y="70" width="42" height="78" rx="5"/>
+  </g>
+  <g fill="#1c5c46">
+    <rect x="67" y="106" width="10" height="10" rx="2.5"/><rect x="82" y="106" width="10" height="10" rx="2.5"/>
+    <rect x="67" y="124" width="10" height="10" rx="2.5"/><rect x="82" y="124" width="10" height="10" rx="2.5"/>
+    <rect x="115" y="80" width="10" height="10" rx="2.5"/><rect x="130" y="80" width="10" height="10" rx="2.5"/>
+    <rect x="115" y="98" width="10" height="10" rx="2.5"/><rect x="130" y="98" width="10" height="10" rx="2.5"/>
+    <rect x="115" y="116" width="10" height="10" rx="2.5"/><rect x="130" y="116" width="10" height="10" rx="2.5"/>
+  </g>
+  <rect x="52" y="152" width="102" height="7" rx="3.5" fill="#ffffff" opacity="0.6"/>
+</svg>

package/src/assets/images/tile-marketing.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200" role="img" aria-label="Marketing automation">
+  <defs>
+    <linearGradient id="mk-bg" x1="0" y1="0" x2="1" y2="1">
+      <stop offset="0" stop-color="#e8646a"/>
+      <stop offset="1" stop-color="#a32f6e"/>
+    </linearGradient>
+  </defs>
+  <rect width="200" height="200" fill="url(#mk-bg)"/>
+  <circle cx="36" cy="168" r="56" fill="#ffffff" opacity="0.09"/>
+  <path d="M66 92 h16 l38 -26 v70 l-38 -26 h-16 a9 9 0 0 1 -9 -9 Z" fill="#ffffff" opacity="0.94"/>
+  <path d="M82 110 l5 28 h16 l-5 -28 Z" fill="#ffffff" opacity="0.94"/>
+  <g fill="none" stroke="#ffffff" stroke-width="6" stroke-linecap="round" opacity="0.7">
+    <path d="M132 90 a20 20 0 0 1 0 24"/>
+    <path d="M144 78 a38 38 0 0 1 0 48"/>
+  </g>
+</svg>

package/src/partials/announcement-container.html

@@ -0,0 +1,67 @@
+<h3 class="mw-section-subtitle">Announcement</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The ribbon glued under the fixed header - a discount, a launch note, a
+  maintenance window. Shown here with <code>mw-announcement-static</code>, so
+  the demos sit in the flow instead of over this page. Without it the ribbon
+  fixes itself below the header, stays put while the page scrolls beneath it,
+  and reserves the anchor scroll offset via
+  <code>--mw-announcement-height</code>. The surface is 75% opaque with a
+  backdrop blur - visible wherever content sits behind it, like the first demo
+  below.
+</p>
+
+<div class="mw-grid-1 mw-gap-6">
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">
+      Default (primary) with highlight pill - over content, showing the 75%
+      surface and the blur
+    </h5>
+    <div
+      style="
+        background: url('images/slider-mountains.svg') center / cover;
+        padding: 1.75rem 1rem;
+      "
+    >
+      <aside class="mw-announcement mw-announcement-static">
+        <a class="mw-announcement-content" href="#announcement">
+          <span class="mw-announcement-highlight">-20 %</span>
+          <span>Summer discount on every plan until 30.09.</span>
+        </a>
+      </aside>
+    </div>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Secondary</h5>
+    <aside
+      class="mw-announcement mw-announcement-secondary mw-announcement-static"
+    >
+      <a class="mw-announcement-content" href="#announcement">
+        <span class="mw-announcement-highlight">NEW</span>
+        <span>Version 5 is out - see what changed.</span>
+      </a>
+    </aside>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Warning, without a link</h5>
+    <aside
+      class="mw-announcement mw-announcement-warning mw-announcement-static"
+    >
+      <div class="mw-announcement-content">
+        <span>Maintenance window on Saturday, 02:00 - 04:00 UTC.</span>
+      </div>
+    </aside>
+  </div>
+
+  <div>
+    <h5 class="mw-text-medium mw-mb-2">Danger</h5>
+    <aside
+      class="mw-announcement mw-announcement-danger mw-announcement-static"
+    >
+      <div class="mw-announcement-content">
+        <span>The legacy API shuts down on 01.12. - migrate now.</span>
+      </div>
+    </aside>
+  </div>
+</div>

package/src/partials/content-slider-container.html

@@ -4,7 +4,7 @@
 <div class="mw-image-slider">
   <div class="mw-image-slider-base" data-index="0">
     <img
-      src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&h=500&fit=crop"
+      src="images/slider-mountains.svg"
       class="mw-image-slider-base-image"
       alt="Mountain Landscape"
     />
@@ -12,28 +12,16 @@
 
   <div class="mw-image-slider-overlay">
     <div class="mw-image-slider-overlay-image" data-index="1">
-      <img
-        src="https://images.unsplash.com/photo-1439066615861-d1af74d74000?w=800&h=500&fit=crop"
-        alt="Lake"
-      />
+      <img src="images/slider-lake.svg" alt="Lake" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="2">
-      <img
-        src="https://images.unsplash.com/photo-1426604966848-d7adac402bff?w=800&h=500&fit=crop"
-        alt="Forest"
-      />
+      <img src="images/slider-forest.svg" alt="Forest" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="3">
-      <img
-        src="https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&h=500&fit=crop"
-        alt="Field"
-      />
+      <img src="images/slider-field.svg" alt="Field" />
     </div>
     <div class="mw-image-slider-overlay-image" data-index="4">
-      <img
-        src="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&h=500&fit=crop"
-        alt="Trees"
-      />
+      <img src="images/slider-trees.svg" alt="Trees" />
     </div>
   </div>
 

package/src/partials/gallery-container.html

@@ -15,28 +15,28 @@
     <!-- Track -->
     <div class="mw-gallery-track">
       <div class="mw-gallery-slide" data-desc="Beautiful Mountain">
-        <img src="https://picsum.photos/id/1011/800/400" alt="1" />
+        <img src="images/gallery-mountain.svg" alt="Beautiful Mountain" />
       </div>
       <div class="mw-gallery-slide" data-desc="Peaceful Lake">
-        <img src="https://picsum.photos/id/1012/800/400" alt="2" />
+        <img src="images/gallery-lake.svg" alt="Peaceful Lake" />
       </div>
       <div class="mw-gallery-slide" data-desc="City Vibes">
-        <img src="https://picsum.photos/id/1015/800/400" alt="3" />
+        <img src="images/gallery-city.svg" alt="City Vibes" />
       </div>
       <div class="mw-gallery-slide" data-desc="Golden Forest">
-        <img src="https://picsum.photos/id/1016/800/400" alt="4" />
+        <img src="images/gallery-forest.svg" alt="Golden Forest" />
       </div>
       <div class="mw-gallery-slide" data-desc="Desert View">
-        <img src="https://picsum.photos/id/1018/800/400" alt="5" />
+        <img src="images/gallery-desert.svg" alt="Desert View" />
       </div>
       <div class="mw-gallery-slide" data-desc="Ocean Breeze">
-        <img src="https://picsum.photos/id/1020/800/400" alt="6" />
+        <img src="images/gallery-ocean.svg" alt="Ocean Breeze" />
       </div>
       <div class="mw-gallery-slide" data-desc="Old Town">
-        <img src="https://picsum.photos/id/1021/800/400" alt="7" />
+        <img src="images/gallery-oldtown.svg" alt="Old Town" />
       </div>
       <div class="mw-gallery-slide" data-desc="Snowy Hills">
-        <img src="https://picsum.photos/id/1025/800/400" alt="8" />
+        <img src="images/gallery-snow.svg" alt="Snowy Hills" />
       </div>
     </div>
 

package/src/partials/home-container.html

@@ -7,9 +7,14 @@
         Build stunning, responsive websites effortlessly with a modern,
         lightweight CSS framework crafted for speed, style, and flexibility.
       </p>
+      <p>
+        Effortless dark mode, mobile-first layouts and accessibility at its
+        core. The same foundation carries a portfolio, a corporate site and a
+        full e-commerce platform.
+      </p>
     </div>
 
-    <div class="mw-d-flex mw-gap-8 mw-justify-center mw-mb-7">
+    <div class="mw-d-flex mw-gap-8 mw-justify-center">
       <button
         type="button"
         onclick="location.href = '#get-started'"
@@ -25,24 +30,10 @@
         Documentation
       </button>
     </div>
-
-    <div class="mw-card mw-card-simple mw-text-center">
-      <h3 class="mw-text-2xl mw-mb-4">Simple. Adaptive. Unstoppable.</h3>
-      <p class="mw-mb-4">
-        MaverickWave is a sleek foundation for creators who value elegance
-        without compromise. Its fluid design philosophy bends and flexes like
-        the tide - shaping itself perfectly to your vision.
-      </p>
-      <p class="mw-mb-4">
-        Launch stunning portfolios, vibrant corporate sites, and powerful
-        e-commerce platforms faster than ever. MaverickWave gives you the
-        ultimate creative freedom without sacrificing performance.
-      </p>
-      <p>
-        Experience the future of styling with effortless dark mode, mobile-first
-        responsive layouts, and accessibility at its core - because great design
-        is for everyone.
-      </p>
-    </div>
   </div>
 </div>
+
+<a class="mw-scroll-hint" href="#get-started">
+  More
+  <i class="fas fa-chevron-down"></i>
+</a>