feat: landing & contact

src/components/landing/CtaSection.astro

@@ -0,0 +1,69 @@
+---
+import ActionLink from "@/components/landing/ActionLink.astro";
+import { LucideIcon } from "@/components/ui/lucide-icon";
+import ctaBg from "@/assets/cta-bg.jpg";
+---
+
+<section class="bg-background px-4 py-10 md:px-6 md:py-12 lg:px-8">
+  <div
+    class="relative mx-auto max-w-7xl overflow-hidden rounded-3xl border border-border"
+  >
+    <img
+      src={ctaBg.src}
+      alt=""
+      class="absolute inset-0 size-full object-cover"
+      aria-hidden="true"
+    />
+    <div
+      class="pointer-events-none absolute inset-0 bg-black/90"
+      aria-hidden="true"
+    >
+    </div>
+
+    <div
+      class="relative flex flex-col items-center gap-6 p-6 text-center md:flex-row md:items-center md:justify-between md:gap-8 md:p-10 md:text-start lg:p-12"
+    >
+      <div class="flex flex-col items-center gap-4 md:flex-row md:items-center">
+        <div
+          class="flex size-14 shrink-0 items-center justify-center rounded-xl bg-background md:size-16"
+        >
+          <img
+            src="/logo.svg"
+            alt=""
+            class="size-8 md:size-9"
+            width="36"
+            height="36"
+          />
+        </div>
+
+        <div>
+          <h2 class="text-lg font-semibold text-foreground md:text-xl">
+            از امروز باشگاه خود را حرفه‌ای‌تر مدیریت کنید
+          </h2>
+          <p class="mt-1 text-sm text-muted-foreground">
+            به ۵۴ باشگاه دیگر در نکستا ملحق شوید.
+          </p>
+        </div>
+      </div>
+
+      <div class="flex w-full flex-col gap-3 md:w-auto md:flex-row md:flex-wrap md:items-center">
+        <ActionLink
+          href="/plans"
+          size="lg"
+          class="w-full justify-center rounded-full px-6 md:w-auto [&_svg]:ms-1"
+        >
+          شروع کنید
+          <LucideIcon name="arrowLeft" className="size-4" />
+        </ActionLink>
+        <ActionLink
+          href="/contact"
+          variant="outline"
+          size="lg"
+          class="w-full justify-center rounded-full border-white/40 bg-transparent px-6 text-foreground hover:border-white/60 hover:bg-white/10 hover:text-foreground md:w-auto"
+        >
+          تماس با ما
+        </ActionLink>
+      </div>
+    </div>
+  </div>
+</section>