"use client"; import Image from "next/image"; import Link from "next/link"; import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; interface ButtonItem { id: string; label: string; href?: string; variant?: | "default" | "secondary" | "outline" | "ghost" | "link" | "destructive"; } interface Health4Props { eyebrow?: string; heading?: string; description?: string; buttons?: ButtonItem[]; image?: { src: string; alt: string; }; imagePosition?: "left" | "right"; floatingCard?: { quote: string; author: string; }; className?: string; } export const health4Demo: Health4Props = { eyebrow: "Find your balance", heading: "Breathe. Move. Heal.", description: "A sanctuary for those seeking stillness in motion. We guide you through ancient practices adapted for modern life, helping you reconnect with your body and quiet your mind.", buttons: [ { id: "btn-1", label: "Begin your journey", href: "https://beste.co" }, { id: "btn-2", label: "Our approach", href: "https://beste.co", variant: "outline", }, ], image: { src: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=800&h=600&fit=crop", alt: "Person in peaceful yoga pose at sunrise", }, imagePosition: "right", floatingCard: { quote: '"This practice changed my life completely."', author: "— Sarah M.", }, }; export function Health4({ eyebrow, heading, description, buttons = [], image, imagePosition = "right", floatingCard, className, }: Health4Props) { const isImageRight = imagePosition === "right"; return (

{/* Content */}

{eyebrow && (

{eyebrow}

)} {heading && (

{heading}

)} {description && (

{description}

)} {buttons.length > 0 && (

{buttons.map((button) => ( ))}

)}

{/* Image */} {image && (

{/* Floating testimonial card */} {floatingCard && (

{floatingCard.quote}

{floatingCard.author}

)}

); }