+
+
+ {t("wizard.findBusiness.title")}
+
+
+ {t("wizard.findBusiness.description")}
+
+
+
+
+
+
+
handleInputChange(e.target.value)}
+ placeholder={t("wizard.findBusiness.placeholder")}
+ className={cn(
+ "border-input bg-background text-foreground placeholder:text-muted-foreground w-full rounded-xl border py-3 pl-10 pr-4 text-sm shadow-sm outline-none transition-colors",
+ "focus:border-primary focus:ring-primary/20 focus:ring-2",
+ )}
+ autoFocus
+ />
+ {isUrl && (
+
+ {t("wizard.findBusiness.urlDetected")}
+
+ )}
+
+
+
+ {loading && (
+
+
+
+ {t("wizard.findBusiness.searching")}
+
+
+ )}
+
+ {error && (
+
{error}
+ )}
+
+ {!loading && searched && results.length === 0 && !error && (
+
+ {t("wizard.findBusiness.noResults")}
+
+ )}
+
+ {results.length > 0 && (
+
+ {results.map((business) => (
+ onSelect(business)}
+ />
+ ))}
+
+ )}
+
+ );
+};
diff --git a/apps/web/src/modules/marketing/get-started/step-indicator.tsx b/apps/web/src/modules/marketing/get-started/step-indicator.tsx
new file mode 100644
index 0000000..bc7c44b
--- /dev/null
+++ b/apps/web/src/modules/marketing/get-started/step-indicator.tsx
@@ -0,0 +1,35 @@
+"use client";
+
+import { useTranslation } from "@turbostarter/i18n";
+import { cn } from "@turbostarter/ui";
+
+interface StepIndicatorProps {
+ currentStep: number;
+ totalSteps: number;
+}
+
+export const StepIndicator = ({
+ currentStep,
+ totalSteps,
+}: StepIndicatorProps) => {
+ const { t } = useTranslation("marketing");
+
+ return (
+
+
+ {t("wizard.step", { current: currentStep, total: totalSteps })}
+
+
+ {Array.from({ length: totalSteps }, (_, i) => (
+
+ ))}
+
+
+ );
+};
diff --git a/apps/web/src/modules/marketing/get-started/step-payment.tsx b/apps/web/src/modules/marketing/get-started/step-payment.tsx
new file mode 100644
index 0000000..fb0bc3f
--- /dev/null
+++ b/apps/web/src/modules/marketing/get-started/step-payment.tsx
@@ -0,0 +1,163 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslation } from "@turbostarter/i18n";
+import { cn } from "@turbostarter/ui";
+import { buttonVariants } from "@turbostarter/ui-web/button";
+
+import type { BusinessData } from "./wizard";
+
+interface StepPaymentProps {
+ business: BusinessData;
+ email: string;
+ onBack: () => void;
+}
+
+export const StepPayment = ({ business, email, onBack }: StepPaymentProps) => {
+ const { t } = useTranslation("marketing");
+ const [loading, setLoading] = useState(false);
+ const [error, setError] = useState("");
+
+ const handlePay = async () => {
+ setLoading(true);
+ setError("");
+
+ try {
+ const locale = window.location.pathname.split("/")[1] || "en";
+
+ const res = await fetch("/api/blueprint/checkout", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({
+ email,
+ businessName: business.name,
+ placeId: business.place_id,
+ locale,
+ }),
+ });
+
+ if (!res.ok) {
+ const data = (await res.json().catch(() => ({}))) as Record