heres my about page, it is a bit ugly and the needs a whole redesign but maintaining the colors, please help:
<html lang="en"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Us - Loveessentials</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link rel="apple-touch-icon" sizes="76x76" href="/static/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicon/favicon-16x16.png">
<link rel="manifest" href="/static/favicon/site.webmanifest">
<link rel="mask-icon" href="/static/favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
  <link rel="stylesheet" href="static/css/styles.css">
  <style>
    :root {
      --beige: #F5E6D3;
      --cream: #FFF5E6;
      --red: #D32F2F;
      --dark-text: #333333;
      --light-text: #666666;
      --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    body {
      font-family: 'Roboto', sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--cream);
      color: var(--dark-text);
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    header.scrolled {
      padding: 10px 0;
      background-color: rgba(245, 230, 211, 0.95);
    } 

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }

    h1, h2 {
      color: var(--red);
      margin-bottom: 20px;
    }

    .about-section, .faq-section, .location-section {
      margin-top: 40px;
    }

    .card {
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      padding: 30px;
      margin-bottom: 30px;
      transition: all 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .faq-item {
      margin-bottom: 20px;
    }

    .faq-question {
      font-weight: 500;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px;
      background-color: var(--beige);
      border-radius: 8px;
      transition: all 0.3s ease;
    }

    .faq-question:hover {
      background-color: #f0d8b8;
    }

    .faq-question::after {
      content: '\f067';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      transition: transform 0.3s ease;
    }

    .faq-question.active::after {
      content: '\f068';
      transform: rotate(180deg);
    }

    .faq-answer {
      display: none;
      padding: 20px;
      background-color: white;
      border-radius: 0 0 8px 8px;
      margin-top: 2px;
    }

    .faq-answer.show {
      display: block;
    }

    .mpesa-steps {
      list-style-type: none;
      padding-left: 0;
    }

    .mpesa-steps li {
      margin-bottom: 15px;
      padding-left: 30px;
      position: relative;
    }

    .mpesa-steps li::before {
      content: '\f30b';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      left: 0;
      color: var(--red);
    }

    nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 24px;
      font-weight: bold;
      color: var(--red);
      text-decoration: none;
      transition: color 0.3s ease;
      display: flex;
      align-items: center;
    }

    .logo:hover {
      color: #b71c1c;
    }

    .logo svg {
      margin-right: 10px;
    }

    .nav-links {
      list-style: none;
      display: flex;
      margin: 0;
      padding: 0;
    }

    .nav-links li {
      margin-left: 30px;
    }

    .nav-links a {
      text-decoration: none;
      color: var(--dark-text);
      font-weight: 500;
      transition: color 0.3s ease;
      position: relative;
    }

    .nav-links a::after {
      content: '';
      position: absolute;
      width: 0;
      height: 2px;
      bottom: -5px;
      left: 0;
      background-color: var(--red);
      transition: width 0.3s ease;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    main {
      margin-top: 100px;
      flex: 1;
    }

    footer {
      background-color: var(--beige);
      color: var(--dark-text);
      padding: 40px 0;
      margin-top: 60px;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .footer-section {
      flex: 1;
      margin-right: 30px;
      margin-bottom: 20px;
    }

    .footer-section h3 {
      color: var(--red);
      margin-bottom: 15px;
    }

    .footer-links {
      list-style: none;
      padding: 0;
    }

    .footer-links li {
      margin-bottom: 10px;
    }

    .footer-links a {
      color: var(--dark-text);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .footer-links a:hover {
      color: var(--red);
    }

    .social-icons {
      display: flex;
      gap: 15px;
      margin-top: 15px;
    }

    .social-icons a {
      color: var(--dark-text);
      font-size: 20px;
      transition: color 0.3s ease;
    }

    .social-icons a:hover {
      color: var(--red);
    }

    .footer-bottom {
      text-align: center;
      margin-top: 30px;
      padding-top: 20px;
      border-top: 1px solid #e0d0b8;
    }

    @media (max-width: 768px) {
      .nav-links {
        display: none;
      }

      .footer-section {
        flex: 100%;
        margin-right: 0;
      }
    }

    .location-section {
      margin-top: 40px;
    }

    .location-info {
      margin-bottom: 20px;
    }

    .location-info ul {
      list-style-type: none;
      padding-left: 0;
    }

    .location-info li {
      margin-bottom: 10px;
      padding-left: 25px;
      position: relative;
    }

    .location-info li::before {
      content: '\f3c5';
      font-family: 'Font Awesome 5 Free';
      font-weight: 900;
      position: absolute;
      left: 0;
      color: var(--red);
    }

    .map-container {
      position: relative;
      padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
    }

    .map-container iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <header>
    <nav class="container">
      <a href="/" class="logo">Loveessentials</a>
      <div class="nav-links">
        <a href="/">Home</a>
        <a href="/about.html">About Us</a>
        <a href="/cart" id="cartIcon" class="cart-icon">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="9" cy="21" r="1"></circle>
            <circle cx="20" cy="21" r="1"></circle>
            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
          </svg>
          <span class="cart-count">0</span>
        </a>
      </div>
      <div class="search-bar">
        <input type="text" placeholder="Search...">
        <button>Search</button>
      </div>
    </nav>
  </header>

  <main class="container">
    <section class="about-section">
      <div class="card">
        <h1>About Loveessentials</h1>
        <p>Loveessentials was born out of a passion for enhancing intimate experiences and promoting healthy relationships. We believe that everyone deserves to explore and enjoy their sexuality in a safe, comfortable, and empowering way.</p>
        <p>Founded in 2020, our mission is to provide high-quality, body-safe products that cater to a diverse range of preferences and needs. We are committed to fostering an inclusive and judgment-free environment where our customers can discover and embrace their desires.</p>
      </div>
    </section>

    <section class="faq-section">
      <h2>Frequently Asked Questions</h2>
      <div class="card">
        <div class="faq-item">
          <div class="faq-question">
            <i class="fas fa-box"></i> How are orders handled?
          </div>
          <div class="faq-answer">
            <p>At Loveessentials, we take great care in handling your orders to ensure privacy, discretion, and efficiency. Here's how we process your order:</p>
            <ol>
              <li>Order Placement: Once you complete your purchase, you'll receive an order confirmation email.</li>
              <li>Processing: We typically process orders within 1-2 business days.</li>
              <li>Packaging: All items are packaged in plain, unmarked boxes or padded envelopes to ensure discretion.</li>
              <li>Shipping: We use reliable courier services for fast and secure delivery.</li>
              <li>Tracking: You'll receive a tracking number once your order ships.</li>
            </ol>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="faq-item">
          <div class="faq-question">
            <i class="fas fa-mobile-alt"></i> How do I pay using Lipa na M-PESA?
          </div>
          <div class="faq-answer">
            <p>Paying with M-PESA is quick and easy. Follow these steps to complete your payment:</p>
            <ol class="mpesa-steps">
              <li>Go to the M-PESA menu on your phone</li>
              <li>Select "Lipa na M-PESA"</li>
              <li>Choose "Pay Bill"</li>
              <li>Enter our Business Number: 123456</li>
              <li>For the Account Number, enter your Order ID</li>
              <li>Enter the total amount as shown on your order</li>
              <li>Enter your M-PESA PIN and confirm the transaction</li>
              <li>You'll receive an SMS confirmation from M-PESA</li>
              <li>We'll process your order once we receive the payment confirmation</li>
            </ol>
            <p>If you have any issues with the payment, please contact our customer support team.</p>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="faq-item">
          <div class="faq-question">
            <i class="fas fa-user-secret"></i> What about privacy and discretion?
          </div>
          <div class="faq-answer">
            <p>We understand the importance of privacy in our line of business. That's why we ensure:</p>
            <ul>
              <li>Discreet Packaging: No branding or indication of contents on the outside of the package.</li>
              <li>Billing: Your bank statement will show a generic company name, not "Loveessentials".</li>
              <li>Data Protection: We never share your personal information with third parties.</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="card">
        <div class="faq-item">
          <div class="faq-question">
            <i class="fas fa-undo"></i> What is your return policy?
          </div>
          <div class="faq-answer">
            <p>For hygiene reasons, we cannot accept returns on used products. However, if you receive a defective item or if there's an issue with your order, please contact our customer service within 14 days of receipt. We'll be happy to assist you with exchanges or refunds on a case-by-case basis.</p>
          </div>
        </div>
      </div>
    </section>

    <section class="location-section">
      <h2>Our Shop Location</h2>
      <div class="card">
        <div class="location-info">
          <h3>Visit Us</h3>
          <p>Our physical store is located in the heart of Nairobi, making it easy for you to find and visit us. Here's what you can expect:</p>
          <ul>
            <li>A modern, three-story building with a sleek glass facade</li>
            <li>Ample parking space available for our customers</li>
            <li>Situated next to the Central Park, providing a serene shopping environment</li>
            <li>Easily accessible by public transportation</li>
          </ul>
          <p>Address: 123 Love Lane, Central Business District, Nairobi, Kenya</p>
        </div>
        <div class="map-container">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.818917996051!2d36.81636811475453!3d-1.2833325990629!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d22f728e9f%3A0x44d8eef7b5c3540!2sNairobi%20Central%20Business%20District!5e0!3m2!1sen!2sus!4v1653615981984!5m2!1sen!2sus" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>
    </section>
  </main>

  <footer>
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <h3>Quick Links</h3>
          <ul class="footer-links">
            <li><a href="/products">Our Products</a></li>
            <li><a href="/about">About Us</a></li>
            <li><a href="/faq">FAQ</a></li>
            <li><a href="/contact">Contact Us</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>Customer Service</h3>
          <ul class="footer-links">
            <li><a href="/shipping">Shipping Information</a></li>
            <li><a href="/returns">Returns & Exchanges</a></li>
            <li><a href="/privacy">Privacy Policy</a></li>
            <li><a href="/terms">Terms & Conditions</a></li>
          </ul>
        </div>
        <div class="footer-section">
          <h3>Connect With Us</h3>
          <p>Stay updated on our latest products and offers!</p>
          <div class="social-icons">
            <a href="https://facebook.com/loveessentials" target="_blank"><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com/loveessentials" target="_blank"><i class="fab fa-instagram"></i></a>
            <a href="https://twitter.com/loveessentials" target="_blank"><i class="fab fa-twitter"></i></a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2023 Loveessentials. All rights reserved.</p>
      </div>
    </div>
  </footer>

  <script>
    document.querySelectorAll('.faq-question').forEach(question => {
      question.addEventListener('click', () => {
        question.classList.toggle('active');
        const answer = question.nextElementSibling;
        answer.classList.toggle('show');
      });
    });

    window.addEventListener('scroll', () => {
      const header = document.querySelector('header');
      if (window.scrollY > 50) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
    });
  </script>
</body>
</html>