miralabs-website/src/components/WhyMira/WhyMira.svelte

<script>
  import { onMount } from "svelte";
  import { gsap } from "gsap/dist/gsap.js";
  import { ScrollTrigger } from "gsap/dist/ScrollTrigger.js";
  import { ICONS } from "$constants/imageUrls.js";
  import CardSlider from "../CardSliderv2/CardSlider.svelte";

  const cards = [
    {
      image: ICONS.CARD_IMAGE_1,
      title: "Streamlining Mortgage Processing",
      tag: "Ai-Assitant",
      text: "Automate and enhance your lending process with MIRA’s AI,integrating seamlessly for a faster, error-free mortgage journey.",
    },
    {
      image: ICONS.CARD_IMAGE_2,
      tag: "CRM Evolution",
      title: "AI-Powered Borrower Relations",
      text: "MIRA’s AI CRM solutions transform lender-borrower interactions, ensuring personalized, efficient communication and service.",
    },
    {
      image: ICONS.CARD_IMAGE_3,
      title: "Tailored Loan Experiences",
      tag: "Borrower-Centric AI",
      text: "MIRA uses AI to analyze borrower data, delivering customized loan options and a simplified application process.",
    },
    {
      image: ICONS.CARD_IMAGE_4,
      title: "Optimizing Loan Offers",
      tag: "Dynamic AI Pricing",
      text: "Leverage MIRA’s AI for real-time, competitive loan pricing, tailored to market data and borrower profiles.",
    },
    {
      image: ICONS.CARD_IMAGE_5,
      title: "Empowering Loan Officers",
      tag: "Insightful AI",
      text: "Equip loan officers with MIRA’s AI insights for smarter decisions and superior loan options that win borrower trust.",
    },
  ];

  let isSmallScreen = false; // Default assumption for SSR

  onMount(() => {
    // Ensure that GSAP and ScrollTrigger are loaded
    gsap.registerPlugin(ScrollTrigger);
    isSmallScreen = window.innerWidth <= 600;

    const container = document.querySelector(".container212");
    const sections = gsap.utils.toArray(".container212 section");
    const texts = gsap.utils.toArray(".anim212");
    const mask = document.querySelector(".mask212");

    let scrollTween = gsap.to(sections, {
      xPercent: -8.5 * (sections.length - 1),
      ease: "none",
      scrollTrigger: {
        trigger: ".container212",
        pin: true,
        scrub: 1,
        start: "top 50px", // Adjusted start position

        end: "+=2000",
        markers: false, // Set markers to100vw false to remove the markers
      },
    });

    // Progress bar animation
    gsap.to(mask, {
      width: "100%",
      scrollTrigger: {
        trigger: ".wrapper212",
        start: "top 100px",
        scrub: 1,
      },
    });

    // Whizz around the sections
    sections.forEach((section) => {
      // Grab the scoped text
      let text = section.querySelectorAll(".anim212");

      // Bump out if there's no items to animate
      if (text.length === 0) return;

      // Do a little stagger
      gsap.from(text, {
        y: -130,
        opacity: 0,
        duration: 2,
        ease: "elastic",
        stagger: 0.1,
        scrollTrigger: {
          trigger: section,
          containerAnimation: scrollTween,
          start: "left center",
          markers: false, // Set markers to false to remove the markers
        },
      });
    });
  });
</script>

{#if isSmallScreen}
  <CardSlider {cards} />
{:else}
  <div class="wrapper">
    <div class="container212 scrollx">
      <section
        style="padding: 50px 50px; height: 665px; display: flex; gap: 50px "
        class="sec1 pin"
      >
        <section
          style="padding: 50px 50px; height: 600px "
          class="containerugh"
        >
          <div
            style="
              position: absolute;
              border-radius: 999px;
              height: 579px;
              width: 539px;
              left: 0%;
              top: -10%;
              background-image: radial-gradient(
                circle at center,
                #e9ceff,
                #dbe8ee00 80%
              );
              opacity: 0.3;
              z-index: -100;
            "
          ></div>
          <div class="image-sectionugh">
            <img
              loading="lazy"
              src={ICONS.CARD_IMAGE_1}
              alt="Descriptive alt text here"
              class="main-imageugh"
            />
          </div>
          <div class="highlightugh">AI Precision</div>
          <h2 class="headlineugh">Streamlining Mortgage Processing</h2>
          <p class="descriptionugh" style="margin: 0">
            Automate and enhance your lending process with MIRA’s AI,
            integrating seamlessly for a faster, error-free mortgage journey.
          </p>
        </section>
        <section style="padding: 50px 50px; height: 600px" class="containerugh">
          <div
            style="
              position: absolute;
              border-radius: 999px;
              height: 579px;
              width: 539px;
              left: 0%;
              top: -10%;
              background-image: radial-gradient(
                circle at center,
                #5e7dff,
                #dbe8ee00 70%
              );
              opacity: 0.2;
              z-index: -100;
            "
          ></div>
          <div class="image-sectionugh">
            <img
              loading="lazy"
              src={ICONS.CARD_IMAGE_2}
              alt="Descriptive alt text here"
              class="main-imageugh2"
            />
          </div>
          <div class="highlightughb">CRM Evolution</div>
          <h2 class="headlineugh">AI-Powered Borrower Relations</h2>
          <p class="descriptionugh" style="margin: 0">
            MIRA’s AI CRM solutions transform lender-borrower interactions,
            ensuring personalized, efficient communication and service.
          </p>
        </section>
        <section style="padding: 50px 50px; height: 600px" class="containerugh">
          <div
            style="
              position: absolute;
              border-radius: 999px;
              height: 579px;
              width: 539px;
              left: 0%;
              top: -10%;
              background-image: radial-gradient(
                circle at center,
                #6E5AFF,
                #dbe8ee00 70%
              );
              opacity: 0.2;
              z-index: -100;
            "
          ></div>
          <div class="image-sectionugh">
            <img
              loading="lazy"
              src={ICONS.CARD_IMAGE_3}
              alt="Descriptive alt text here"
              class="main-imageugh2"
            />
          </div>
          <div class="highlightughbpzz">Borrower-Centric AI</div>
          <h2 class="headlineugh">Tailored Loan Experiences</h2>
          <p class="descriptionugh" style="margin: 0">
            MIRA uses AI to analyze borrower data, delivering customized loan
            options and a simplified application process.
          </p>
        </section>
        <section style="padding: 50px 50px; height: 600px" class="containerugh">
          <div
            style="
              position: absolute;
              border-radius: 999px;
              height: 579px;
              width: 539px;
              left: 0%;
              top: -10%;
              background-image: radial-gradient(
                circle at center,
                #5e7dff,
                #dbe8ee00 70%
              );
              opacity: 0.2;
              z-index: -100;
            "
          ></div>
          <div class="image-sectionugh">
            <img
              loading="lazy"
              src={ICONS.CARD_IMAGE_4}
              alt="Descriptive alt text here"
              class="main-imageugh2"
            />
          </div>
          <div class="highlightughbjj">Dynamic AI Pricing</div>
          <h2 class="headlineugh">Optimizing Loan Offers</h2>
          <p class="descriptionugh" style="margin: 0">
            Leverage MIRA’s AI for real-time, competitive loan pricing, tailored
            to market data and borrower profiles.
          </p>
        </section>
        <section style="padding: 50px 50px; height: 600px" class="containerugh">
          <div
            style="
              position: absolute;
              border-radius: 999px;
              height: 579px;
              width: 479px;
              left: 0%;
              top: -10%;
              background-image: radial-gradient(
                circle at center,
                #e9ceff,
                #dbe8ee00 70%
              );
              opacity: 0.5;
              z-index: -100;
            "
          ></div>
          <div class="image-sectionugh">
            <img
              loading="lazy"
              src={ICONS.CARD_IMAGE_5}
              alt="Descriptive alt text here"
              class="main-imageugh2"
            />
          </div>
          <div class="highlightugh">Insightful AI</div>
          <h2 class="headlineugh">Empowering Loan Officers</h2>
          <p class="descriptionugh" style="margin: 0">
            Equip loan officers with MIRA’s AI insights for smarter decisions
            and superior loan options that win borrower trust.
          </p>
        </section>
      </section>
    </div>
  </div>
{/if}

<style>
  @media (max-width: 600px) {
    .wrapper {
      display: none !important;
    }
  }
  :global(body) {
    overflow: -moz-scrollbars-horizontal;
    /* overflow-y: hidden; */
    overflow-x: hidden;
    width: 100vw;
  }

  :root::-webkit-scrollbar {
    display: none;
  }
  :root {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  html {
    width: 100vw;
  }

  .wrapper {
    position: relative;
  }

  * {
    box-sizing: border-box;
  }
  .container212 > span {
    overflow: hidden; /* Hide both scrollbars */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
  }

  .container212 > span::-webkit-scrollbar {
    display: none; /* Safari and Chrome */
  }
  svg {
    position: absolute;
    top: 12em;
    left: 10vw;
    width: 50vw;
  }

  svg .mask212 {
    width: 0;
  }

  .container212 {
    display: flex;
    width: 100vw;
    overflow-y: hidden;
    scrollbar-width: none !important;
    /* margin-top: 150px; */
  }

  .container212 .col {
    display: flex;
    gap: 3em;
  }

  .container212 .col p {
    font-size: 0.8rem;
  }

  .container212 section {
    width: fit-content;
    padding: 20vw 10vw;
  }

  .container212 section h1 {
    font-size: 3rem;
    margin: 0;
  }

  .container212 section p {
    font-size: 1.2rem;
  }

  .container212 section ul {
    list-style-type: none;
    display: flex;
    gap: 3em;
    width: 100%;
    height: 300px;
    padding: 0;
  }

  .container212 section ul li {
    background: white;
    border-radius: 0.3em;
    flex-grow: 1;
  }

  /*  */

  .containerugh {
    border-radius: 15px;
    box-shadow:
      30px 42px 14px 0px rgba(128, 128, 128, 0),
      19px 27px 13px 0px rgba(128, 128, 128, 0.01),
      11px 15px 11px 0px rgba(128, 128, 128, 0.05),
      5px 7px 8px 0px rgba(128, 128, 128, 0.09),
      1px 2px 5px 0px rgba(128, 128, 128, 0.1);
    border: 2px solid rgba(209, 220, 229, 0.83);
    background-color: #fff;
    display: flex;
    max-width: 580px;
    flex-direction: column;
    padding: 75px 62px;
  }

  @media (max-width: 991px) {
    .containerugh {
      padding: 0 20px;
    }

    .containerugh {
      max-width: 380px;
    }
    .headlineugh {
      font-size: 22px !important;
    }
    .descriptionugh {
      font-size: 18px !important;
    }
  }

  .image-sectionugh {
    align-self: center;
    display: flex;
    margin-top: 30px;
    width: 382px;
    max-width: 100%;
    align-items: center;
    justify-content: center;
  }

  .main-imageugh {
    object-fit: auto;
    object-position: center;
    width: 90%;
    box-shadow:
      0px 170px 48px 0px rgba(0, 0, 0, 0),
      0px 109px 43px 0px rgba(0, 0, 0, 0.01),
      0px 61px 37px 0px rgba(0, 0, 0, 0.05),
      0px 27px 27px 0px rgba(0, 0, 0, 0.09),
      0px 7px 15px 0px rgba(0, 0, 0, 0.1);
    align-self: start;
  }
  .main-imageugh2 {
    object-fit: auto;
    object-position: center;
    width: 90%;

    align-self: start;
  }

  .bar-chartugh {
    border-radius: 14px;
    background-color: #f8fafe;
    align-self: end;
    display: flex;
    margin-top: 60px;
    align-items: end;
    gap: 19px;
    width: 173px;
    height: 173px;
    padding: 29px 27px;
  }

  @media (max-width: 991px) {
    .bar-chartugh {
      margin-top: 40px;
      padding: 0 20px;
    }
  }

  .barugh {
    border-radius: 11px;
    background-color: #eeeff4;
  }

  .bar-1ugh {
    margin-top: 51px;
    width: 15px;
    height: 67px;
  }

  @media (max-width: 991px) {
    .bar-1ugh {
      margin-top: 40px;
    }
  }

  .bar-2ugh {
    margin-top: 75px;
    width: 15px;
    height: 43px;
  }

  @media (max-width: 991px) {
    .bar-2ugh {
      margin-top: 40px;
    }
  }

  .bar-3ugh {
    background-color: #7d9ce6;
    align-self: start;
    width: 15px;
    height: 118px;
  }

  .bar-4ugh {
    margin-top: 32px;
    width: 15px;
    height: 86px;
  }

  .highlightugh {
    border-radius: 13px;
    background-color: #f7effe;
    align-self: start;
    margin-top: 40px;
    justify-content: center;
    color: #ad50f6;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughb {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 40px;
    color: #365dff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughb {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 10px;
    color: #365dff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughbjj {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 50px;
    color: #365dff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughbp {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 40px;
    color: #6e5aff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughbpzz {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 55px;
    color: #6e5aff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughb2 {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 10px;
    color: #6e5aff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  .highlightughc {
    border-radius: 13px;
    background-color: #f1f3ff;
    align-self: start;
    margin-top: 87px;
    color: #365dff;
    justify-content: center;
    padding: 6px 19px;
    font:
      700 12px Satoshi,
      sans-serif;
  }

  @media (max-width: 991px) {
    .highlightugh {
      margin-top: 40px;
    }
  }

  .headlineugh {
    color: var(--Navbar-primary, #333);
    margin: 0;
    margin-top: 20px;
    font:
      700 23px Satoshi,
      sans-serif;
  }

  @media (max-width: 991px) {
    .headlineugh {
      max-width: 100%;
    }
  }

  .descriptionugh {
    color: var(--Navbar-primary, #333);
    margin-top: 22px;
    font:
      400 20px/35px Satoshi,
      sans-serif;
  }

  @media (max-width: 991px) {
    .descriptionugh {
      max-width: 100%;
    }
  }
</style>