init

src/components/ServiceCard.astro

@@ -0,0 +1,39 @@
+---
+import type { servicesSchema } from '@/content.config'
+import type { z } from 'astro:content'
+
+type Props = z.infer<typeof servicesSchema> & { highlighted?: boolean }
+
+const { title, charachteristics, highlighted = false, link } = Astro.props
+---
+
+<div
+  class:list={[
+    'flex h-full w-full flex-col border-2 px-7 py-8 md:max-w-[400px] md:min-h-[550px]',
+    'border border-transparent bg-card',
+    { 'border-brand': highlighted },
+  ]}
+>
+  <div class="mb-8">
+    <h3 class="mb-4 text-2xl font-bold">{title}</h3>
+  </div>
+
+  <ul class="mb-16 flex-grow space-y-4">
+    {
+      charachteristics?.map((charachteristic) => (
+        <li class="flex items-start space-x-2 justify-between">
+          <span class="text-text-light">{charachteristic.text}</span>
+          {charachteristic.price && <span class="ml-2 text-brand text-nowrap">{charachteristic.price}</span>}
+        </li>
+      ))
+    }
+  </ul>
+
+  {
+    link && (
+      <a href={link.href} target={link.target} class="brand-btn-outline">
+        {link.title}
+      </a>
+    )
+  }
+</div>