---
import BaseLayout from "@/layouts/BaseLayout.astro";
import { getImage } from "astro:assets";
import Content2 from "@/components/widgets/Content2.astro";
import aboutImage from "@/assets/images/about-office.webp";

const metadata = {
  title: "About us",
  description:
    "Learn more about our vision, values, and the team behind Astro Starter Pro.",
};

const values = [
  {
    title: "Innovation",
    description:
      "Curabitur dignissim, felis non sollicitudin molestie, urna mauris pellentesque velit, ut eleifend.",
  },
  {
    title: "Commitment",
    description:
      "Aenean condimentum finibus mauris, a fermentum justo pan eget. Sed ultricies, neque quis.",
  },
  {
    title: "Quality",
    description:
      "Donec sed orci tincidunt, aliquam nisl a, condimentum nunc. Nulla varius ex nec ante feugiat.",
  },
  {
    title: "Transparency",
    description:
      "Phasellus tristique, elit dapibus cursus facilisis, lorem augue fringilla nunc, vitae fermentum.",
  },
  {
    title: "Teamwork",
    description:
      "In hac habitasse platea dictumst. Vivamus adipiscing fermentum quam volutpat aliquam. Integer et.",
  },
  {
    title: "Excellence",
    description:
      "Fusce at massa nec sapien auctor gravida in in tellus. Vivamus a tristique metus, et molestie.",
  },
];

const optimizedImage = await getImage({
  src: aboutImage,
  format: "webp",
});
---

<BaseLayout {metadata}>
  <link slot="head" rel="preload" href={optimizedImage.src} as="image" />
  <Content2
    title="Our Vision"
    description={[
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
    ]}
    tagline="About"
    image={aboutImage}
    imageAlt="Modern web development office"
    actions={[
      {
        text: "Contact Us",
        href: "/contact",
        variant: "primary",
        icon: "lucide:mail",
      },
      {
        text: "View Details",
        href: "#",
        variant: "secondary",
        icon: "lucide:arrow-right",
      },
    ]}
  />
</BaseLayout>