= 640 ? { width: "460px", border: "6px solid var(--foreground)", borderTopLeftRadius: "0", borderTopRightRadius: "0" } : { border: "4px solid var(--foreground)" }), boxShadow: shadowClass === "shadow-sm" ? "12px 12px 0px var(--accent)" : shadowClass === "shadow-md" ? "16px 16px 0px var(--accent)" : shadowClass === "shadow-lg" ? "20px 20px 0px var(--accent)" : "12px 12px 0px var(--accent)" }}>

setShowKrofileOverlay(true)} />

setShowMobileShareQr(true)} />

{showLogo &&

{showPromotionalVideo &&

} {showPromotionalVideo &&

} {nameValue ? nameValue.charAt(0) : "B"}

}

{showName &&

{nameValue}

} {showBusinessType &&

{businessTypeValue}

} {(showCompanyLogo || showCompanyName) &&

{showCompanyLogo && Company Logo

} {showCompanyName && {companyNameValue} }

} {showSlogan &&

"{sloganValue}"

} {showDescription &&

{descriptionValue}

} {showAddress &&

{addressValue}

}

{(showPhone || showEmail || showWebsite || showBookingButton || showSaveToContacts || showGoogleMapLocation) &&

{showPhone && } {showEmail && } {showWebsite && } {showBookingButton && } {showSaveToContacts && } {showGoogleMapLocation && }

} {visibleSocialLinksWithValue.length > 0 &&

Let's Connect

{visibleSocialLinksWithValue.map((social, index) =>

)}

} {visibleCustomLinksWithValue.length > 0 &&

Featured

Quick Links

{visibleCustomLinksWithValue.map((link, index) =>

{link.name} {link.description && {link.description} }

)}

} {collectInfoBeforeAccess === false && visibleLeadFormFields.length > 0 && !showLeadForm && open !== true && } {collectInfoBeforeAccess === false && visibleLeadFormFields.length > 0 && showLeadForm && open !== true &&

Contact Form

{visibleLeadFormFields.map(field =>

{field.name} {field.required && * } {field?.options && field.options.filter(opt => opt).length > 0 ?

{field.options.filter(opt => opt).map((option, idx) => {option} )}

: field.type === "paragraph" ?

: <input type={field.type || "text"} name={field.id} required={field.required} style={{
            padding: "1rem",
            borderRadius: "15px",
            border: "3px solid var(--input)",
            backgroundColor: "var(--background)",
            color: "var(--foreground)",
            fontSize: "calc(14px * var(--font-scale))",
            fontFamily: "var(--font-sans)"
          }} />}
              </div>)}
            <div style={{
          display: "flex",
          gap: "1rem",
          marginTop: "1rem"
        }}>
              <button type="button" onClick={() => setShowLeadForm(false)} style={{
            flex: 1,
            padding: "1rem",
            backgroundColor: "var(--muted)",
            color: "var(--muted-foreground)",
            borderRadius: "20px",
            border: "3px solid var(--border)",
            cursor: "pointer",
            fontSize: "calc(14px * var(--font-scale))",
            fontFamily: "var(--font-sans)",
            fontWeight: 600,
            textTransform: "uppercase"
          }}>
                Cancel
              </button>
              <Button type="submit" style={{
            flex: 1,
            padding: "1rem",
            backgroundColor: "var(--primary)",
            color: "var(--primary-foreground)",
            borderRadius: "20px",
            border: "3px solid var(--foreground)",
            cursor: "pointer",
            fontSize: "calc(14px * var(--font-scale))",
            fontFamily: "var(--font-sans)",
            fontWeight: 700,
            textTransform: "uppercase",
            letterSpacing: "0.05em",
            boxShadow: "3px 3px 0px var(--accent)"
          }}>
                Submit
              </Button>
            </div>
          </form>}

{open === true && <div style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        gap: "1.25rem",
        padding: "2.5rem 2rem",
        backgroundColor: "var(--card)",
        borderRadius: "30px",
        border: "5px solid var(--foreground)",
        boxShadow: "8px 8px 0px var(--primary)",
        transform: "rotate(-0.5deg)",
        marginTop: "0.5rem",
        textAlign: "center"
      }}>
          <div style={{
          width: "72px",
          height: "72px",
          borderRadius: "50%",
          backgroundColor: "var(--primary)",
          border: "4px solid var(--foreground)",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          boxShadow: "4px 4px 0px var(--accent)"
        }}>
            <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="var(--primary-foreground)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
              <polyline points="20 6 9 17 4 12" />
            </svg>
          </div>
          <h3 style={{
          fontSize: "calc(24px * var(--font-scale))",
          fontWeight: 800,
          color: "var(--card-foreground)",
          fontFamily: "var(--font-heading)",
          margin: 0,
          letterSpacing: "-0.01em"
        }}>
            Message Received!
          </h3>
          <p style={{
          fontSize: "calc(16px * var(--font-scale))",
          color: "var(--card-foreground)",
          fontFamily: "var(--font-sans)",
          lineHeight: 1.7,
          margin: 0,
          fontWeight: 500
        }}>
            Thank you so much for reaching out — it truly means the world to me.
            I'll personally review your message and get back to you as soon as
            possible. Your time and trust are deeply appreciated.
          </p>
          <p style={{
          fontSize: "calc(15px * var(--font-scale))",
          color: "var(--muted-foreground)",
          fontFamily: "var(--font-sans)",
          lineHeight: 1.6,
          margin: 0,
          fontWeight: 500,
          fontStyle: "italic"
        }}>
            I genuinely look forward to connecting with you and seeing how we
            can collaborate or support each other. Talk soon!
          </p>
          <div style={{
          fontSize: "calc(13px * var(--font-scale))",
          color: "var(--muted-foreground)",
          fontFamily: "var(--font-sans)",
          fontWeight: 600,
          textTransform: "uppercase",
          letterSpacing: "0.08em",
          border: "2px solid var(--border)",
          borderRadius: "20px",
          padding: "0.5rem 1.25rem"
        }}>
            With gratitude — {nameValue || "The Team"}
          </div>
        </div>}

{showCompanyLogo && <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        marginTop: "2rem",
        padding: "1.5rem",
        backgroundColor: "var(--card)",
        border: "4px solid var(--foreground)",
        borderRadius: "25px",
        boxShadow: "6px 6px 0px var(--accent)",
        transform: "rotate(-0.8deg)"
      }}>
          <img src={companyLogoUrl} alt="Company Logo" style={{
          width: "100%",
          maxWidth: "180px",
          height: "auto",
          display: "block",
          border: "3px solid var(--foreground)",
          borderRadius: "15px"
        }} />
        </div>}
    </div>
  </div>
</div>;</article></body></html>

Scan the QR code to open this profile.

Scan the QR code to open this profile.