4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T2fae,import { useRef, useState, type FormEvent } from 'react' import { Button } from '../Button' import { Empty } from '../feedback' import { Footer } from '../footer' import { Field, Input, Textarea } from '../Input' import { Grid, Row, Stack } from '../layout' import { Badge, Blob } from '../media' import { Navbar } from '../navbar' import { Progress } from '../progress' import { Card, RowCard } from '../surface' import { Eyebrow, Heading, Text } from '../text' interface Service { id: string name: string description: string duration: string price: number icon: 'sparkle' | 'smile' | 'wand' tone: 'purple' | 'pink' | 'mint' } const SERVICES: Service[] = [ { id: 'consult', name: 'First consultation', description: 'A calm 45-minute session to map goals and next steps.', duration: '45 min', price: 90, icon: 'sparkle', tone: 'purple' }, { id: 'followup', name: 'Follow-up session', description: 'Keep the momentum with a focused working session.', duration: '30 min', price: 65, icon: 'smile', tone: 'mint' }, { id: 'workshop', name: 'Team workshop', description: 'A hands-on session for up to 6 people.', duration: '90 min', price: 240, icon: 'wand', tone: 'pink' }, ] const DAYS = ['2026-08-03', '2026-08-04', '2026-08-05', '2026-08-06'] const TIMES = ['09:30', '11:00', '14:00', '16:30'] const dateFormatter = new Intl.DateTimeFormat('en-US', { weekday: 'short', month: 'short', day: 'numeric' }) const moneyFormatter = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }) const formatDay = (iso: string) => dateFormatter.format(new Date(`${iso}T12:00:00`)) /** A complete booking route: site chrome, service/date selection, contact * details, review, and a confirmation state. */ export function BookingBlock() { const [step, setStep] = useState(0) const [serviceId, setServiceId] = useState(SERVICES[0]!.id) const [day, setDay] = useState(DAYS[0]!) const [time, setTime] = useState(TIMES[0]!) const [name, setName] = useState('') const [email, setEmail] = useState('') const [notes, setNotes] = useState('') const [error, setError] = useState('') const [errorField, setErrorField] = useState<'name' | 'email' | null>(null) const [confirmed, setConfirmed] = useState(false) const nameRef = useRef(null) const emailRef = useRef(null) const service = SERVICES.find((item) => item.id === serviceId) ?? SERVICES[0]! const saveDetails = (event: FormEvent) => { event.preventDefault() if (!name.trim()) { setError('Add your name and a complete email before reviewing the booking.') setErrorField('name') nameRef.current?.focus() return } if (!email.includes('@')) { setError('Add your name and a complete email before reviewing the booking.') setErrorField('email') emailRef.current?.focus() return } setError('') setErrorField(null) setStep(3) } return (

Soft Hours} links={[ { label: 'Services', href: '#services', active: true }, { label: 'About', href: '#about' }, { label: 'FAQ', href: '#faq' }, ]} actions={Accepting bookings} /> Book a session Make time for the work that matters. Pick a service and a time. You’ll see every detail before anything is confirmed. Simple promise No payment today. Reschedule free up to 24 hours before your session. {confirmed ? ( {formatDay(day)} at {time}. A confirmation is on its way to {email}. {service.duration} {service.name} {moneyFormatter.format(service.price)} · {name} ) : ( Step {step + 1} of 4 {Math.round(((step + 1) / 4) * 100)}% {step === 0 ? ( Choose a service {SERVICES.map((item) => ( setServiceId(item.id)} > {item.name} {item.description} {moneyFormatter.format(item.price)} {item.duration} ))} ) : null} {step === 1 ? ( Choose a time {DAYS.map((item) => ( setDay(item)}> {formatDay(item)} ))} {TIMES.map((item) => ( setTime(item)}> {item} ))} ) : null} {step === 2 ? (

Your details {(id, describedBy) => ( { setName(value); setError(''); setErrorField(null) }} describedBy={describedBy} invalid={errorField === 'name'} autoComplete="name" placeholder="Ada Lovelace…" /> )} {(id, describedBy) => ( { setEmail(value); setError(''); setErrorField(null) }} describedBy={describedBy} invalid={errorField === 'email'} autoComplete="email" spellCheck={false} placeholder="ada@example.com…" /> )} {(id, describedBy) => (

)}
                      </Field>
                      <Row justify="between">
                        <Button variant="quiet" onClick={() => setStep(1)}>Back</Button>
                        <Button type="submit">Review booking</Button>
                      </Row>
                    </Stack>
                  </form>
                ) : null}

{step === 3 ? (
                  <Stack gap={4}>
                    <Heading level={2}>Review your booking</Heading>
                    <Card variant="tight">
                      <Stack gap={3}>
                        <Row justify="between"><Text muted>Service</Text><Text>{service.name}</Text></Row>
                        <Row justify="between"><Text muted>Date</Text><Text>{formatDay(day)}</Text></Row>
                        <Row justify="between"><Text muted>Time</Text><Text num>{time}</Text></Row>
                        <Row justify="between"><Text muted>Total</Text><Text num>{moneyFormatter.format(service.price)}</Text></Row>
                      </Stack>
                    </Card>
                    <Text size="sm" muted>Confirmation will be sent to {email}.</Text>
                    <Row justify="between">
                      <Button variant="quiet" onClick={() => setStep(2)}>Edit details</Button>
                      <Button tone="mint" onClick={() => setConfirmed(true)}>Confirm booking</Button>
                    </Row>
                  </Stack>
                ) : null}
              </Stack>
            )}
          </Card>
        </Grid>

<Footer
          brand="Soft Hours"
          tagline="Thoughtful sessions for teams and founders."
          columns={[
            { title: 'Explore', links: [{ label: 'Services', href: '#services' }, { label: 'About', href: '#about' }] },
            { title: 'Support', links: [{ label: 'FAQ', href: '#faq' }, { label: 'Contact', href: '#contact' }] },
          ]}
          note="© 2026 Soft Hours. Example booking template."
        />
      </Stack>
    </div>
  )
}
4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/feedback.json","https://1st-pouf.worksonmy.dev/r/footer.json","https://1st-pouf.worksonmy.dev/r/input.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/navbar.json","https://1st-pouf.worksonmy.dev/r/progress.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/booking.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/booking.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>