Merge remote-tracking branch 'origin/enhance/payment-page' into enhan…

…ce/payment-page

About us page (new design)

@@ -0,0 +1,252 @@
+<style>
+.about-section {
+  background-color: rgba(178, 97, 117, 1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content-wrapper {
+  background-color: rgba(178, 97, 117, 0.61);
+  width: 100%;
+  padding-right: 56px;
+  overflow: hidden;
+}
+
+.two-column-layout {
+  display: flex;
+  gap: 20px;
+}
+
+.left-column {
+  width: 33%;
+}
+
+.image-placeholder {
+  background-color: rgba(223, 184, 197, 0.5);
+  width: 798px;
+  max-width: 100%;
+  height: 1117px;
+  margin: 0 auto;
+}
+
+.right-column {
+  width: 67%;
+  margin-left: 20px;
+}
+
+.info-box {
+  background-color: #FFFEF5;
+  width: 100%;
+  margin: 76px auto 0;
+  padding: 49px 0 15px 46px;
+}
+
+.info-content {
+  margin-right: -41px;
+}
+
+.info-layout {
+  display: flex;
+  gap: 20px;
+}
+
+.text-column {
+  width: 41%;
+}
+
+.text-content {
+  background-color: rgba(247, 204, 214, 0.58);
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  width: 100%;
+  padding: 179px 0 179px 44px;
+  font: 600 32px Inter, sans-serif;
+}
+
+.main-title {
+  color: #7F3528;
+  margin-right: -245px;
+  font: 700 64px 'Lobster Two', sans-serif;
+}
+
+.description {
+  color: #B26175;
+  align-self: flex-end;
+  margin: 39px -80px 0 0;
+}
+
+.cta-button {
+  background-color: rgba(127, 53, 40, 0.87);
+  align-self: center;
+  margin-top: 47px;
+  width: 296px;
+  max-width: 100%;
+  color: #F5F5F5;
+  padding: 18px 70px;
+  border: none;
+  cursor: pointer;
+}
+
+.image-column {
+  width: 59%;
+  margin-left: 20px;
+}
+
+.image-content {
+  display: flex;
+  margin-top: 41px;
+  flex-direction: column;
+  color: #000;
+  font: 900 48px Inter, sans-serif;
+}
+
+.about-title {
+  align-self: flex-start;
+}
+
+.highlight {
+  color: #B26175;
+}
+
+.feature-image {
+  aspect-ratio: 1.91;
+  object-fit: contain;
+  object-position: center;
+  width: 843px;
+  align-self: flex-end;
+  margin-top: 154px;
+  max-width: 100%;
+}
+
+.features-list {
+  display: flex;
+  width: 1108px;
+  max-width: 100%;
+  gap: 40px 100px;
+  color: #000;
+  margin: 12px 0 0 49px;
+  font: 700 20px Inter, sans-serif;
+  list-style-type: none;
+  padding: 0;
+}
+
+.feature-item {
+  flex-grow: 1;
+}
+
+@media (max-width: 991px) {
+  .content-wrapper {
+    max-width: 100%;
+    padding-right: 20px;
+  }
+
+  .two-column-layout {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .left-column,
+  .right-column,
+  .text-column,
+  .image-column {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .info-box {
+    max-width: 100%;
+    margin-top: 40px;
+  }
+
+  .info-content {
+    max-width: 100%;
+  }
+
+  .info-layout {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+  }
+
+  .text-content {
+    max-width: 100%;
+    padding: 100px 0;
+  }
+
+  .main-title {
+    max-width: 100%;
+    font-size: 40px;
+  }
+
+  .description {
+    max-width: 100%;
+  }
+
+  .cta-button {
+    margin-top: 40px;
+    padding: 18px 20px;
+  }
+
+  .image-content {
+    max-width: 100%;
+    margin-top: 40px;
+    font-size: 40px;
+  }
+
+  .feature-image {
+    margin-top: 40px;
+  }
+}
+
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+</style>
+
+<section class="about-section">
+  <div class="content-wrapper">
+    <div class="two-column-layout">
+      <div class="left-column">
+        <div class="image-placeholder" role="img" aria-label="Decorative background"></div>
+      </div>
+      <div class="right-column">
+        <div class="info-box">
+          <div class="info-content">
+            <div class="info-layout">
+              <div class="text-column">
+                <div class="text-content">
+                  <h2 class="main-title">What makes our ice cream special?</h2>
+                  <p class="description">Arctic Delights handpicks ingredients of the highest quality to make ice creams that you'll love. We ensure that our ice creams can cool down your days and satisfy all your cravings.<br />Choose your pick from a variety of flavours, select custom toppings, and much more! All of this at Arctic Delights.</p>
+                  <button class="cta-button">TRY NOW</button>
+                </div>
+              </div>
+              <div class="image-column">
+                <div class="image-content">
+                  <h3 class="about-title">ABOUT <span class="highlight">US</span></h3>
+                  <img class="feature-image" src="https://cdn.builder.io/api/v1/image/assets/TEMP/374f714e221f04a9a9976dc35317d9e705623b622c5b06964827508ade381f48?placeholderIfAbsent=true&apiKey=fa22c26009ce45f18ff293ca0a4356fa" alt="About Arctic Delights" loading="lazy" />
+                </div>
+              </div>
+            </div>
+          </div>
+          <ul class="features-list">
+            <li class="feature-item">NO CHEMICALS</li>
+            <li class="feature-item">NO SACCHARINE</li>
+            <li class="feature-item">NATURAL FLAVOURS</li>
+            <li class="feature-item">100% HYGIENIC</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>