web/apps/website/src/components/ServiceCard.astro at 707f3d191ba494c302a02e8fbff29ecbf6c01dc7 · 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
---
import classnames from "classnames";
import { Image } from "astro:assets";

interface Props {
  idx: number;
  title: string;
  subtitle: string;
  content: any;
  styles?: string;
  imgPath: string;
  imgAlt: string;
  iconPath: string;
  classNames?: string | string[];
}

const {
  title,
  subtitle,
  content,
  styles,
  imgPath,
  imgAlt,
  iconPath,
  classNames,
} = Astro.props;

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

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
      lg:h-[620px]
      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
      lg:grid-rows-[min-content_auto]
      backdrop-blur-[15px]
      `,
      classNames,
    )}
  >
    <div
      class="col-span-6 grid max-lg:grid-rows-[min-content_min-content_auto] gap-7 lg:grid-cols-2 lg:col-span-2 lg:items-start justify-between"
    >
      <span class="grid md:flex gap-7">
        <img src={iconPath} alt="" role="presentation" class="lg:mt-[2px] h-8 w-8 md:h-12 md:w-12" />
        <div class="gap-y-2 flex flex-col">
          <h4
            class="font-medium text-xl leading-[22px] md:text-[28px] md:leading-[30px] text-left"
          >
            {title}
          </h4>
          <p class="text-lg">{subtitle}</p>
        </div>
      </span>
      <div
        class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
      >
        <Image
          class="object-cover xl:p-6"
          src={image.default}
          alt={imgAlt}
          widths={[320, 480, 578, 640]}
          sizes="(max-width: 1024px) calc(100vw - 56px), calc(50vw - 28px)"
          loading="lazy"
        />
      </div>
      <div
        class="flex flex-col lg:flex-col row-start-2 lg:col-span-1 lg:col-start-2 lg:row-span-2 [&_p]:text-base [&_p]:leading-[26px] md:[&_p]:text-[20px] md:[&_p]:font-normal md:[&_p]:leading-8 text-left"
        set:html={content.html}
      />
    </div>
  </section>
</div>