web/apps/website/src/components/ServiceCard.astro at 9c3c89d3e84671b75b489eb3021c938e918d4ff9 · crocoder-dev/web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
import { Image } from "astro:assets";
import classnames from "classnames";
import BlogLink from "./BlogLink.astro";
import CTA from "./CTA.astro";
import IconSubtitle from "./IconSubtitle.astro";
import ArrowTopRight from "./icons/ArrowTopRight.astro";

interface Props {
  idx: number;
  title: string;
  subtitles: Array<{
    iconPath: string;
    text: string;
  }>;
  content: any;
  styles?: string;
  img: {
    path: string;
    alt?: string;
  };
  classNames?: string | string[];
  links: Array<{
    href: string;
    text: string;
    title?: string;
    image?: string;
  }>;
}

const { title, subtitles, content, styles, img, classNames, links } =
  Astro.props;

const images = import.meta.glob<{ default: ImageMetadata }>("../assets/*.*");
const src = images[`../assets${img.path}`];

const image = await src();
---

<div
  class={classnames(
    `
    stacked-card
    animation-card
    rounded-2xl
    max-lg:col-span-6
    md:gap-x-7
    w-full
    absolute
    h-[710px]
    overflow-hidden
    `,
    styles
  )}
>
  <section
    class={classnames(
      `text-white
      h-full
      p-5
      md:p-7
      lg:p-12
      grid
      grid-cols-6
      pb-0
      gap-x-3
      gap-y-7
      lg:gap-x-7
      lg:gap-y-12
      lg:grid-cols-2
      backdrop-blur-[15px]
      `,
      classNames
    )}
  >
    <div
      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-4 md:gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
    >
      <h2
        class="font-medium text-xl sm:text-[28px] md:text-5xl text-left leading-[110%] lg:col-start-1 lg:row-start-1"
      >
        {title}
      </h2>

      <div class="flex flex-col gap-4 md:gap-9 lg:row-span-2">
        <div class="grid md:grid-cols-2 gap-4">
          {
            subtitles.map(({ iconPath, text }) => (
              <IconSubtitle subtitle={text} iconPath={iconPath} />
            ))
          }
        </div>
        <div
          class="[&_p]:text-sm [&_p]:leading-[26px] sm:[&_p]:text-base md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
          set:html={content.html}
        />
        <div class="flex flex-col gap-4 lg:flex-col md:flex-row">
          {links.map(link => (
            link?.title && link.image ? (
              <BlogLink
                href={link.href}
                title={link.title}
                linkText={link.text}
                image={link.image}
              />
            ) : (
              <CTA id="contact-cta" href={link.href}>
                {link.text}
                <ArrowTopRight
                  classNames="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4"
                  stroke="#1E1A1A"
                />
              </CTA>
            )
          ))
          }
        </div>
      </div>

      <div
        class="flex flex-col justify-center items-center lg:justify-start lg:col-start-1 lg:row-start-2"
      >
        <Image
          class="object-cover w-full max-lg:max-w-[640px] xl:p-6"
          src={image.default}
          alt={img.alt || ""}
          widths={[320, 480, 578, 640]}
          sizes="(max-width: 1024px) calc(100vw - 56px), 640px"
          loading="lazy"
        />
      </div>
    </div>
  </section>
</div>