<script setup lang="ts">
const colorMode = useColorMode();
</script>
<template>
  <section class="bg-gradient-even py-section">
    <div
      class="about-us container mx-auto flex flex-col items-center justify-between gap-y-10 px-4 lg:flex-row"
    >
      <div class="about-us-contnet w-full lg:w-1/2">
        <h2 class="dark-text-gradient mb-4 text-[40px] font-bold">
          {{ $t(`whoWeAre.title`) }}
        </h2>
        <div class="text-primary flex flex-col gap-4 text-[18px]">
          <p>
            {{ $t("whoWeAre.description1") }}
          </p>
          <p>
            {{ $t("whoWeAre.description2") }}
          </p>
        </div>
      </div>
      <div
        class="about-image -order-1 w-[340px] rounded-[16px] sm:w-[400px] lg:order-1"
      >
      <ClientOnly>
        <NuxtImg
          :src="
            colorMode.value === 'light'
              ? '/images/about-logo-light.png'
              : '/images/about-logo.png'
          "
          :width="282"
          :height="195"
          class="block w-full"
          alt="webStdy-logo"
        />
      </ClientOnly>
      </div>
    </div>
  </section>
</template>
<style scoped></style>
