{"id":21,"date":"2026-05-06T12:42:02","date_gmt":"2026-05-06T12:42:02","guid":{"rendered":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/?page_id=21"},"modified":"2026-05-06T12:42:34","modified_gmt":"2026-05-06T12:42:34","slug":"luister-live","status":"publish","type":"page","link":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/?page_id=21","title":{"rendered":"Luister Live"},"content":{"rendered":"\n

<\/p>\n\n\n\n

import { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ntype PageKey =\n  | \"home\"\n  | \"programmering\"\n  | \"programmas\"\n  | \"gedraaid\"\n  | \"luister-live\"\n  | \"over-ons\"\n  | \"contact\";\n\nconst navigation: Array<{ key: PageKey; label: string }> = [\n  { key: \"home\", label: \"Home\" },\n  { key: \"programmering\", label: \"Programmering\" },\n  { key: \"programmas\", label: \"Programma's\" },\n  { key: \"gedraaid\", label: \"Gedraaid\" },\n  { key: \"luister-live\", label: \"Luister Live\" },\n  { key: \"over-ons\", label: \"Over Ons\" },\n  { key: \"contact\", label: \"Contact\" },\n];\n\nconst programmeringWeek = [\n  { start: \"06:00\", eind: \"09:00\", titel: \"Goedemorgen Meeuwbeemd\" },\n  { start: \"09:00\", eind: \"12:00\", titel: \"Arbeidsvitaminen 79-89\" },\n  { start: \"12:00\", eind: \"14:00\", titel: \"Lunch op 3\" },\n  { start: \"14:00\", eind: \"16:00\", titel: \"Middagmix op 3\" },\n  { start: \"16:00\", eind: \"18:00\", titel: \"De Avondspits\" },\n  { start: \"18:00\", eind: \"20:00\", titel: \"Top 40 Terugblik\" },\n  { start: \"20:00\", eind: \"22:00\", titel: \"Vinylavond 80s\" },\n  { start: \"22:00\", eind: \"24:00\", titel: \"Nacht op 3\" },\n];\n\nconst programmeringWeekend = [\n  { start: \"06:00\", eind: \"09:00\", titel: \"Weekend Wekker\" },\n  { start: \"09:00\", eind: \"12:00\", titel: \"Koffie en Classics\" },\n  { start: \"12:00\", eind: \"14:00\", titel: \"Weekendmix\" },\n  { start: \"14:00\", eind: \"16:00\", titel: \"Verzoekplaten Parade\" },\n  { start: \"16:00\", eind: \"18:00\", titel: \"Nederpop Selectie\" },\n  { start: \"18:00\", eind: \"20:00\", titel: \"Gouwe Ouwe Top 80\" },\n  { start: \"20:00\", eind: \"22:00\", titel: \"Avondconcert\" },\n];\n\nconst programmas = [\n  {\n    naam: \"Goedemorgen Meeuwbeemd\",\n    tijd: \"Ma t\/m vr 06:00 - 09:00\",\n    beschrijving: \"Vroege ochtendstart met nieuws, serviceberichten en bekende pop uit 79-89.\",\n  },\n  {\n    naam: \"Arbeidsvitaminen 79-89\",\n    tijd: \"Maandag t\/m vrijdag 09:00 - 12:00\",\n    beschrijving: \"Non-stop pop en classics uit 1979 tot 1989, precies zoals vroeger op de werkvloer.\",\n  },\n  {\n    naam: \"Lunch op 3\",\n    tijd: \"Ma t\/m vr 12:00 - 14:00\",\n    beschrijving: \"Luchtige lunchradio met herkenbare jingles, korte items en tijdloze hits.\",\n  },\n  {\n    naam: \"Middagmix op 3\",\n    tijd: \"Dagelijks 14:00 - 16:00\",\n    beschrijving: \"De beste mix van Nederlandse en internationale radiohits uit de jaren 80.\",\n  },\n  {\n    naam: \"De Avondspits\",\n    tijd: \"Dagelijks 16:00 - 18:00\",\n    beschrijving: \"Tempo, verkeer en meezingers voor het einde van de middag.\",\n  },\n  {\n    naam: \"Top 40 Terugblik\",\n    tijd: \"Dagelijks 18:00 - 20:00\",\n    beschrijving: \"De grootste hits uit de Nederlandse Top 40 van de jaren 80, met radiofragmenten en intro's.\",\n  },\n  {\n    naam: \"Vinylavond 80s\",\n    tijd: \"Dagelijks 20:00 - 22:00\",\n    beschrijving: \"Een warme avondplaat met new wave, synthpop en soft rock van 1979 tot 1989.\",\n  },\n  {\n    naam: \"Nacht op 3\",\n    tijd: \"Ma t\/m vr 22:00 - 24:00\",\n    beschrijving: \"Rustige nachturen met late-night classics en vertrouwde stemvoering in retro radio-stijl.\",\n  },\n  {\n    naam: \"Weekend Wekker\",\n    tijd: \"Za en zo 06:00 - 09:00\",\n    beschrijving: \"Ontspannen weekendstart met warme oldies en vriendelijke presentatie.\",\n  },\n  {\n    naam: \"Koffie en Classics\",\n    tijd: \"Za en zo 09:00 - 12:00\",\n    beschrijving: \"Drie uur lang rustige classics, luisteraarsgroeten en vertrouwde sfeer.\",\n  },\n  {\n    naam: \"Verzoekplaten Parade\",\n    tijd: \"Za en zo 14:00 - 16:00\",\n    beschrijving: \"Populaire verzoekplaten van bewoners en familie, met korte introducties.\",\n  },\n];\n\nconst laatstGedraaid = [\n  {\n    tijd: \"14:52\",\n    titel: \"Ti Amo\",\n    artiest: \"Umberto Tozzi\",\n    album: \"Ti Amo\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/6\/6e\/Umberto_Tozzi_Ti_Amo.jpg\/320px-Umberto_Tozzi_Ti_Amo.jpg\",\n  },\n  {\n    tijd: \"14:48\",\n    titel: \"Volare (Nel Blu Dipinto Di Blu)\",\n    artiest: \"Domenico Modugno\",\n    album: \"Nel Blu Dipinto Di Blu\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/d\/d4\/Nel_Blu_Dipinto_Di_Blu_cover.jpg\/320px-Nel_Blu_Dipinto_Di_Blu_cover.jpg\",\n  },\n  {\n    tijd: \"14:44\",\n    titel: \"Gloria\",\n    artiest: \"Umberto Tozzi\",\n    album: \"Gloria\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/0\/0f\/Umberto_Tozzi_Gloria.jpg\/320px-Umberto_Tozzi_Gloria.jpg\",\n  },\n  {\n    tijd: \"14:39\",\n    titel: \"Sar\u00e0 perch\u00e9 ti amo\",\n    artiest: \"Ricchi e Poveri\",\n    album: \"E penso a te\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/e\/e6\/Sara_perche_ti_amo.jpg\/320px-Sara_perche_ti_amo.jpg\",\n  },\n  {\n    tijd: \"14:35\",\n    titel: \"Felicit\u00e0\",\n    artiest: \"Al Bano & Romina Power\",\n    album: \"Felicit\u00e0\",\n    cover: \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/1\/15\/Felicita_cover.jpg\/320px-Felicita_cover.jpg\",\n  },\n];\n\nconst fallbackCover =\n  \"https:\/\/images.unsplash.com\/photo-1511379938547-c1f69419868d?auto=format&fit=crop&w=300&q=80\";\n\nconst streamUrl = \"https:\/\/reteradioazzurra.radioca.st\/stream\";\nconst logoUrl = \"\/images\/meeuwbeemd-logo.png\";\n\nfunction getHashPage(): PageKey {\n  const hash = window.location.hash.replace(\"#\", \"\") as PageKey;\n  return navigation.some((item) => item.key === hash) ? hash : \"home\";\n}\n\nexport default function App() {\n  const [activePage, setActivePage] = useState<PageKey>(getHashPage());\n\n  useEffect(() => {\n    const onHashChange = () => setActivePage(getHashPage());\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, []);\n\n  return (\n    <div className=\"min-h-screen bg-[#f2ebd8] text-[#103a5b]\">\n      <header className=\"sticky top-0 z-20 border-b border-[#d1a24b]\/40 bg-[#103a5b]\/95 backdrop-blur\">\n        <div className=\"mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-3\">\n          <a href=\"#home\" className=\"flex items-center gap-3\">\n            <img src={logoUrl} alt=\"Meeuwbeemd Radio logo\" className=\"h-12 w-12 rounded-full border border-[#d1a24b]\/60\" \/>\n            <span className=\"text-lg font-extrabold tracking-wide text-[#f5ecd7] sm:text-2xl\">MEEUWBEEMD RADIO<\/span>\n          <\/a>\n          <nav className=\"flex flex-wrap gap-4 text-sm font-semibold text-[#f5ecd7]\">\n            {navigation.map((item) => (\n              <a\n                key={item.key}\n                href={`#${item.key}`}\n                className={`transition-colors hover:text-[#d7a84a] ${activePage === item.key ? \"text-[#d7a84a] underline underline-offset-4\" : \"\"}`}\n              >\n                {item.label}\n              <\/a>\n            ))}\n          <\/nav>\n        <\/div>\n      <\/header>\n\n      <main className=\"mx-auto max-w-6xl px-6 py-12\">\n        {activePage === \"home\" && <HomePage \/>}\n        {activePage === \"programmering\" && <ProgrammeringPage \/>}\n        {activePage === \"programmas\" && <ProgrammasPage \/>}\n        {activePage === \"gedraaid\" && <GedraaidPage \/>}\n        {activePage === \"luister-live\" && <LuisterLivePage \/>}\n        {activePage === \"over-ons\" && <OverOnsPage \/>}\n        {activePage === \"contact\" && <ContactPage \/>}\n      <\/main>\n\n      <footer className=\"bg-[#103a5b] px-6 py-10 text-center text-[#f5ecd7]\">\n        <img src={logoUrl} alt=\"Meeuwbeemd Radio logo\" className=\"mx-auto h-20 w-20 rounded-full border-2 border-[#d1a24b]\/80\" \/>\n        <p className=\"mt-4 text-xl font-semibold text-[#f5ecd7]\">Meeuwbeemd Radio - Muziek en informatie voor elke dag<\/p>\n        <p className=\"mt-2 text-base text-[#e7d8b7]\">Copyright Verzorgingshuis Meeuwbeemd<\/p>\n      <\/footer>\n    <\/div>\n  );\n}\n\nfunction HomePage() {\n  return (\n    <section className=\"relative overflow-hidden rounded-2xl border border-[#d1a24b]\/30 bg-gradient-to-b from-[#153f61] via-[#103a5b] to-[#0d314d]\">\n      <motion.div\n        className=\"absolute inset-0\"\n        animate={{ backgroundPositionX: [\"0%\", \"100%\", \"0%\"] }}\n        transition={{ duration: 26, repeat: Infinity, ease: \"easeInOut\" }}\n        style={{\n          backgroundImage:\n            \"radial-gradient(circle at 10% 20%, rgba(209,162,75,0.18) 0 8%, transparent 9%), radial-gradient(circle at 70% 25%, rgba(209,162,75,0.13) 0 11%, transparent 12%), radial-gradient(circle at 30% 80%, rgba(245,236,215,0.1) 0 9%, transparent 10%)\",\n          backgroundSize: \"760px 360px\",\n        }}\n      \/>\n\n      <div className=\"relative mx-auto flex min-h-[72vh] max-w-4xl flex-col items-center justify-center gap-8 px-6 py-14 text-center\">\n        <motion.img\n          src={logoUrl}\n          alt=\"Meeuwbeemd Radio\"\n          className=\"h-44 w-44 rounded-full border-4 border-[#d1a24b]\/70 shadow-[0_18px_40px_rgba(0,0,0,0.28)] md:h-56 md:w-56\"\n          initial={{ opacity: 0, scale: 0.85, y: 16 }}\n          animate={{ opacity: 1, scale: 1, y: [0, -5, 0] }}\n          transition={{ duration: 0.9, y: { duration: 4.5, repeat: Infinity, ease: \"easeInOut\" } }}\n        \/>\n        <motion.p\n          initial={{ opacity: 0, y: 18 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"text-base font-semibold tracking-[0.2em] text-[#d7a84a]\"\n        >\n          MEEUWBEEMD RADIO\n        <\/motion.p>\n\n        <motion.h1\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.75, delay: 0.1 }}\n          className=\"text-4xl leading-tight font-extrabold text-[#f5ecd7] md:text-6xl\"\n        >\n          Muziek en informatie voor elke dag\n        <\/motion.h1>\n\n        <motion.p\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.75, delay: 0.2 }}\n          className=\"max-w-2xl text-lg text-[#e9dbc0]\"\n        >\n          Het vertrouwde geluid voor bewoners en bezoekers. Rust, herkenning en gezelligheid in elk uur van de dag.\n        <\/motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.75, delay: 0.3 }}\n          className=\"flex flex-wrap items-center justify-center gap-4\"\n        >\n          <a\n            href=\"#luister-live\"\n            className=\"rounded-xl bg-[#d1a24b] px-10 py-4 text-xl font-bold text-[#103a5b] shadow-[0_8px_25px_rgba(0,0,0,0.28)] transition hover:scale-[1.03] hover:bg-[#e2b154]\"\n          >\n            Luister Live\n          <\/a>\n          <a\n            href=\"#programmering\"\n            className=\"rounded-xl border-2 border-[#d1a24b] bg-transparent px-8 py-4 text-xl font-bold text-[#f5ecd7] transition hover:bg-[#d1a24b]\/10\"\n          >\n            Bekijk Programmering\n          <\/a>\n        <\/motion.div>\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction ProgrammeringPage() {\n  return (\n    <section>\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Vandaag op de radio<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Programmering in Hilversum 3 stijl uit de jaren 1979 tot 1989.\n      <\/p>\n\n      <div className=\"mt-10 grid gap-8 lg:grid-cols-2\">\n        <div>\n          <h3 className=\"text-2xl font-bold text-[#103a5b]\">Doordeweeks (ma-vr) 06:00 - 24:00<\/h3>\n          <div className=\"mt-4 space-y-3\">\n            {programmeringWeek.map((item, index) => (\n              <motion.article\n                key={`week-${item.start}-${item.titel}`}\n                initial={{ opacity: 0, y: 18 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true, amount: 0.4 }}\n                transition={{ duration: 0.45, delay: index * 0.07 }}\n                className=\"rounded-xl border border-[#d1a24b]\/35 bg-[#f7f1e3] px-5 py-4\"\n              >\n                <p className=\"text-lg font-semibold text-[#a67a2f]\">\n                  {item.start} - {item.eind}\n                <\/p>\n                <p className=\"text-2xl font-semibold text-[#103a5b]\">{item.titel}<\/p>\n              <\/motion.article>\n            ))}\n          <\/div>\n        <\/div>\n\n        <div>\n          <h3 className=\"text-2xl font-bold text-[#103a5b]\">Weekend (za-zo) 06:00 - 22:00<\/h3>\n          <div className=\"mt-4 space-y-3\">\n            {programmeringWeekend.map((item, index) => (\n              <motion.article\n                key={`weekend-${item.start}-${item.titel}`}\n                initial={{ opacity: 0, y: 18 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true, amount: 0.4 }}\n                transition={{ duration: 0.45, delay: index * 0.07 }}\n                className=\"rounded-xl border border-[#d1a24b]\/35 bg-[#f7f1e3] px-5 py-4\"\n              >\n                <p className=\"text-lg font-semibold text-[#a67a2f]\">\n                  {item.start} - {item.eind}\n                <\/p>\n                <p className=\"text-2xl font-semibold text-[#103a5b]\">{item.titel}<\/p>\n              <\/motion.article>\n            ))}\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction ProgrammasPage() {\n  return (\n    <section>\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Programma's<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Klassieke radioformats met de sound, sfeer en opbouw van Hilversum 3 (79-89).\n      <\/p>\n      <div className=\"mt-10 space-y-5\">\n        {programmas.map((programma, index) => (\n          <motion.article\n            key={programma.naam}\n            initial={{ opacity: 0, x: -18 }}\n            whileInView={{ opacity: 1, x: 0 }}\n            viewport={{ once: true, amount: 0.5 }}\n            transition={{ duration: 0.4, delay: index * 0.08 }}\n            className=\"border-b border-[#d1a24b]\/35 pb-5\"\n          >\n            <h3 className=\"text-2xl font-bold text-[#103a5b]\">{programma.naam}<\/h3>\n            <p className=\"mt-1 text-[#a67a2f]\">{programma.tijd}<\/p>\n            <p className=\"mt-2 text-lg text-[#2b4f69]\">{programma.beschrijving}<\/p>\n          <\/motion.article>\n        ))}\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction LuisterLivePage() {\n  return (\n    <section className=\"rounded-2xl border border-[#d1a24b]\/40 bg-[#103a5b] px-6 py-14 text-center text-[#f5ecd7]\">\n      <h2 className=\"text-4xl font-bold\">Luister Live<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-lg text-[#e9dbc0]\">\n        De stream staat klaar met een stijl die past bij Meeuwbeemd Radio. Voorbeeldstream: Azzurro Radio.\n      <\/p>\n      <div className=\"mx-auto mt-10 max-w-2xl rounded-xl bg-[#0b2d45] p-5\">\n        <p className=\"mb-3 text-sm tracking-wide text-[#d7a84a]\">LIVE STREAM<\/p>\n        <audio controls className=\"w-full\" src={streamUrl}>\n          Je browser ondersteunt geen audio player.\n        <\/audio>\n      <\/div>\n      <motion.a\n        href={streamUrl}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"mt-8 inline-block rounded-xl bg-[#d1a24b] px-12 py-4 text-2xl font-bold text-[#103a5b]\"\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.98 }}\n      >\n        Open Stream Direct\n      <\/motion.a>\n    <\/section>\n  );\n}\n\nfunction GedraaidPage() {\n  return (\n    <section>\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Laatst gedraaide songs<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Dit zijn de nummers die net op Meeuwbeemd Radio zijn geweest, inclusief cover.\n      <\/p>\n\n      <div className=\"mt-10 space-y-3\">\n        {laatstGedraaid.map((song, index) => (\n          <motion.article\n            key={`${song.tijd}-${song.titel}`}\n            initial={{ opacity: 0, y: 12 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, amount: 0.4 }}\n            transition={{ duration: 0.35, delay: index * 0.06 }}\n            className=\"flex items-center gap-4 rounded-xl border border-[#d1a24b]\/35 bg-[#f8f2e4] p-3\"\n          >\n            <img\n              src={song.cover}\n              alt={`Cover van ${song.titel}`}\n              className=\"h-16 w-16 rounded-lg object-cover\"\n              onError={(event) => {\n                event.currentTarget.src = fallbackCover;\n              }}\n            \/>\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"truncate text-xl font-semibold text-[#103a5b]\">{song.titel}<\/p>\n              <p className=\"truncate text-[#a67a2f]\">{song.artiest}<\/p>\n              <p className=\"truncate text-sm text-[#2b4f69]\/85\">Album: {song.album}<\/p>\n            <\/div>\n            <p className=\"text-lg font-bold text-[#103a5b]\">{song.tijd}<\/p>\n          <\/motion.article>\n        ))}\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction OverOnsPage() {\n  return (\n    <section className=\"mx-auto max-w-4xl text-center\">\n      <h2 className=\"text-4xl font-bold text-[#103a5b]\">Over Meeuwbeemd Radio<\/h2>\n      <p className=\"mt-6 text-xl leading-relaxed text-[#2b4f69]\">\n        Meeuwbeemd Radio is het huisstation van ons verzorgingshuis. We maken radio met een herkenbare toon, warme\n        presentatie en muziek die herinneringen oproept.\n      <\/p>\n      <p className=\"mt-5 text-xl leading-relaxed text-[#2b4f69]\">\n        Onze uitzendingen zorgen voor verbinding tussen bewoners, familie, vrijwilligers en medewerkers. Elke dag\n        brengen we informatie, verzoeknummers en een vriendelijk geluid op de achtergrond.\n      <\/p>\n    <\/section>\n  );\n}\n\nfunction ContactPage() {\n  return (\n    <section className=\"mx-auto max-w-3xl\">\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Contact<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Heb je een verzoeknummer of wil je een bericht laten voorlezen? Neem contact met ons op.\n      <\/p>\n      <form className=\"mt-10 space-y-4 rounded-2xl border border-[#d1a24b]\/35 bg-[#f7f1e3] p-6\">\n        <label className=\"block text-left text-sm font-semibold text-[#103a5b]\">\n          Naam\n          <input\n            type=\"text\"\n            className=\"mt-1 w-full rounded-lg border border-[#d1a24b]\/40 bg-white px-4 py-3 text-[#103a5b] outline-none focus:border-[#a67a2f]\"\n            placeholder=\"Jouw naam\"\n          \/>\n        <\/label>\n        <label className=\"block text-left text-sm font-semibold text-[#103a5b]\">\n          E-mail\n          <input\n            type=\"email\"\n            className=\"mt-1 w-full rounded-lg border border-[#d1a24b]\/40 bg-white px-4 py-3 text-[#103a5b] outline-none focus:border-[#a67a2f]\"\n            placeholder=\"naam@email.nl\"\n          \/>\n        <\/label>\n        <label className=\"block text-left text-sm font-semibold text-[#103a5b]\">\n          Bericht\n          <textarea\n            rows={4}\n            className=\"mt-1 w-full rounded-lg border border-[#d1a24b]\/40 bg-white px-4 py-3 text-[#103a5b] outline-none focus:border-[#a67a2f]\"\n            placeholder=\"Typ hier je verzoek of bericht\"\n          \/>\n        <\/label>\n        <button\n          type=\"button\"\n          className=\"rounded-xl bg-[#d1a24b] px-8 py-3 text-lg font-bold text-[#103a5b] transition hover:bg-[#e2b154]\"\n        >\n          Verstuur\n        <\/button>\n      <\/form>\n    <\/section>\n  );\n}\n<\/code><\/pre>\n\n\n\n
import { motion } from \"framer-motion\";\nimport { useEffect, useState } from \"react\";\n\ntype PageKey =\n  | \"home\"\n  | \"programmering\"\n  | \"programmas\"\n  | \"gedraaid\"\n  | \"luister-live\"\n  | \"over-ons\"\n  | \"contact\";\n\nconst navigation: Array<{ key: PageKey; label: string }> = [\n  { key: \"home\", label: \"Home\" },\n  { key: \"programmering\", label: \"Programmering\" },\n  { key: \"programmas\", label: \"Programma's\" },\n  { key: \"gedraaid\", label: \"Gedraaid\" },\n  { key: \"luister-live\", label: \"Luister Live\" },\n  { key: \"over-ons\", label: \"Over Ons\" },\n  { key: \"contact\", label: \"Contact\" },\n];\n\nconst programmeringWeek = [\n  { start: \"06:00\", eind: \"09:00\", titel: \"Goedemorgen Meeuwbeemd\" },\n  { start: \"09:00\", eind: \"12:00\", titel: \"Arbeidsvitaminen 79-89\" },\n  { start: \"12:00\", eind: \"14:00\", titel: \"Lunch op 3\" },\n  { start: \"14:00\", eind: \"16:00\", titel: \"Middagmix op 3\" },\n  { start: \"16:00\", eind: \"18:00\", titel: \"De Avondspits\" },\n  { start: \"18:00\", eind: \"20:00\", titel: \"Top 40 Terugblik\" },\n  { start: \"20:00\", eind: \"22:00\", titel: \"Vinylavond 80s\" },\n  { start: \"22:00\", eind: \"24:00\", titel: \"Nacht op 3\" },\n];\n\nconst programmeringWeekend = [\n  { start: \"06:00\", eind: \"09:00\", titel: \"Weekend Wekker\" },\n  { start: \"09:00\", eind: \"12:00\", titel: \"Koffie en Classics\" },\n  { start: \"12:00\", eind: \"14:00\", titel: \"Weekendmix\" },\n  { start: \"14:00\", eind: \"16:00\", titel: \"Verzoekplaten Parade\" },\n  { start: \"16:00\", eind: \"18:00\", titel: \"Nederpop Selectie\" },\n  { start: \"18:00\", eind: \"20:00\", titel: \"Gouwe Ouwe Top 80\" },\n  { start: \"20:00\", eind: \"22:00\", titel: \"Avondconcert\" },\n];\n\nconst programmas = [\n  {\n    naam: \"Goedemorgen Meeuwbeemd\",\n    tijd: \"Ma t\/m vr 06:00 - 09:00\",\n    beschrijving: \"Vroege ochtendstart met nieuws, serviceberichten en bekende pop uit 79-89.\",\n  },\n  {\n    naam: \"Arbeidsvitaminen 79-89\",\n    tijd: \"Maandag t\/m vrijdag 09:00 - 12:00\",\n    beschrijving: \"Non-stop pop en classics uit 1979 tot 1989, precies zoals vroeger op de werkvloer.\",\n  },\n  {\n    naam: \"Lunch op 3\",\n    tijd: \"Ma t\/m vr 12:00 - 14:00\",\n    beschrijving: \"Luchtige lunchradio met herkenbare jingles, korte items en tijdloze hits.\",\n  },\n  {\n    naam: \"Middagmix op 3\",\n    tijd: \"Dagelijks 14:00 - 16:00\",\n    beschrijving: \"De beste mix van Nederlandse en internationale radiohits uit de jaren 80.\",\n  },\n  {\n    naam: \"De Avondspits\",\n    tijd: \"Dagelijks 16:00 - 18:00\",\n    beschrijving: \"Tempo, verkeer en meezingers voor het einde van de middag.\",\n  },\n  {\n    naam: \"Top 40 Terugblik\",\n    tijd: \"Dagelijks 18:00 - 20:00\",\n    beschrijving: \"De grootste hits uit de Nederlandse Top 40 van de jaren 80, met radiofragmenten en intro's.\",\n  },\n  {\n    naam: \"Vinylavond 80s\",\n    tijd: \"Dagelijks 20:00 - 22:00\",\n    beschrijving: \"Een warme avondplaat met new wave, synthpop en soft rock van 1979 tot 1989.\",\n  },\n  {\n    naam: \"Nacht op 3\",\n    tijd: \"Ma t\/m vr 22:00 - 24:00\",\n    beschrijving: \"Rustige nachturen met late-night classics en vertrouwde stemvoering in retro radio-stijl.\",\n  },\n  {\n    naam: \"Weekend Wekker\",\n    tijd: \"Za en zo 06:00 - 09:00\",\n    beschrijving: \"Ontspannen weekendstart met warme oldies en vriendelijke presentatie.\",\n  },\n  {\n    naam: \"Koffie en Classics\",\n    tijd: \"Za en zo 09:00 - 12:00\",\n    beschrijving: \"Drie uur lang rustige classics, luisteraarsgroeten en vertrouwde sfeer.\",\n  },\n  {\n    naam: \"Verzoekplaten Parade\",\n    tijd: \"Za en zo 14:00 - 16:00\",\n    beschrijving: \"Populaire verzoekplaten van bewoners en familie, met korte introducties.\",\n  },\n];\n\nconst laatstGedraaid = [\n  {\n    tijd: \"14:52\",\n    titel: \"Ti Amo\",\n    artiest: \"Umberto Tozzi\",\n    album: \"Ti Amo\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/6\/6e\/Umberto_Tozzi_Ti_Amo.jpg\/320px-Umberto_Tozzi_Ti_Amo.jpg\",\n  },\n  {\n    tijd: \"14:48\",\n    titel: \"Volare (Nel Blu Dipinto Di Blu)\",\n    artiest: \"Domenico Modugno\",\n    album: \"Nel Blu Dipinto Di Blu\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/d\/d4\/Nel_Blu_Dipinto_Di_Blu_cover.jpg\/320px-Nel_Blu_Dipinto_Di_Blu_cover.jpg\",\n  },\n  {\n    tijd: \"14:44\",\n    titel: \"Gloria\",\n    artiest: \"Umberto Tozzi\",\n    album: \"Gloria\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/0\/0f\/Umberto_Tozzi_Gloria.jpg\/320px-Umberto_Tozzi_Gloria.jpg\",\n  },\n  {\n    tijd: \"14:39\",\n    titel: \"Sar\u00e0 perch\u00e9 ti amo\",\n    artiest: \"Ricchi e Poveri\",\n    album: \"E penso a te\",\n    cover:\n      \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/e\/e6\/Sara_perche_ti_amo.jpg\/320px-Sara_perche_ti_amo.jpg\",\n  },\n  {\n    tijd: \"14:35\",\n    titel: \"Felicit\u00e0\",\n    artiest: \"Al Bano & Romina Power\",\n    album: \"Felicit\u00e0\",\n    cover: \"https:\/\/upload.wikimedia.org\/wikipedia\/en\/thumb\/1\/15\/Felicita_cover.jpg\/320px-Felicita_cover.jpg\",\n  },\n];\n\nconst fallbackCover =\n  \"https:\/\/images.unsplash.com\/photo-1511379938547-c1f69419868d?auto=format&fit=crop&w=300&q=80\";\n\nconst streamUrl = \"https:\/\/reteradioazzurra.radioca.st\/stream\";\nconst logoUrl = \"\/images\/meeuwbeemd-logo.png\";\n\nfunction getHashPage(): PageKey {\n  const hash = window.location.hash.replace(\"#\", \"\") as PageKey;\n  return navigation.some((item) => item.key === hash) ? hash : \"home\";\n}\n\nexport default function App() {\n  const [activePage, setActivePage] = useState<PageKey>(getHashPage());\n\n  useEffect(() => {\n    const onHashChange = () => setActivePage(getHashPage());\n    window.addEventListener(\"hashchange\", onHashChange);\n    return () => window.removeEventListener(\"hashchange\", onHashChange);\n  }, []);\n\n  return (\n    <div className=\"min-h-screen bg-[#f2ebd8] text-[#103a5b]\">\n      <header className=\"sticky top-0 z-20 border-b border-[#d1a24b]\/40 bg-[#103a5b]\/95 backdrop-blur\">\n        <div className=\"mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-6 py-3\">\n          <a href=\"#home\" className=\"flex items-center gap-3\">\n            <img src={logoUrl} alt=\"Meeuwbeemd Radio logo\" className=\"h-12 w-12 rounded-full border border-[#d1a24b]\/60\" \/>\n            <span className=\"text-lg font-extrabold tracking-wide text-[#f5ecd7] sm:text-2xl\">MEEUWBEEMD RADIO<\/span>\n          <\/a>\n          <nav className=\"flex flex-wrap gap-4 text-sm font-semibold text-[#f5ecd7]\">\n            {navigation.map((item) => (\n              <a\n                key={item.key}\n                href={`#${item.key}`}\n                className={`transition-colors hover:text-[#d7a84a] ${activePage === item.key ? \"text-[#d7a84a] underline underline-offset-4\" : \"\"}`}\n              >\n                {item.label}\n              <\/a>\n            ))}\n          <\/nav>\n        <\/div>\n      <\/header>\n\n      <main className=\"mx-auto max-w-6xl px-6 py-12\">\n        {activePage === \"home\" && <HomePage \/>}\n        {activePage === \"programmering\" && <ProgrammeringPage \/>}\n        {activePage === \"programmas\" && <ProgrammasPage \/>}\n        {activePage === \"gedraaid\" && <GedraaidPage \/>}\n        {activePage === \"luister-live\" && <LuisterLivePage \/>}\n        {activePage === \"over-ons\" && <OverOnsPage \/>}\n        {activePage === \"contact\" && <ContactPage \/>}\n      <\/main>\n\n      <footer className=\"bg-[#103a5b] px-6 py-10 text-center text-[#f5ecd7]\">\n        <img src={logoUrl} alt=\"Meeuwbeemd Radio logo\" className=\"mx-auto h-20 w-20 rounded-full border-2 border-[#d1a24b]\/80\" \/>\n        <p className=\"mt-4 text-xl font-semibold text-[#f5ecd7]\">Meeuwbeemd Radio - Muziek en informatie voor elke dag<\/p>\n        <p className=\"mt-2 text-base text-[#e7d8b7]\">Copyright Verzorgingshuis Meeuwbeemd<\/p>\n      <\/footer>\n    <\/div>\n  );\n}\n\nfunction HomePage() {\n  return (\n    <section className=\"relative overflow-hidden rounded-2xl border border-[#d1a24b]\/30 bg-gradient-to-b from-[#153f61] via-[#103a5b] to-[#0d314d]\">\n      <motion.div\n        className=\"absolute inset-0\"\n        animate={{ backgroundPositionX: [\"0%\", \"100%\", \"0%\"] }}\n        transition={{ duration: 26, repeat: Infinity, ease: \"easeInOut\" }}\n        style={{\n          backgroundImage:\n            \"radial-gradient(circle at 10% 20%, rgba(209,162,75,0.18) 0 8%, transparent 9%), radial-gradient(circle at 70% 25%, rgba(209,162,75,0.13) 0 11%, transparent 12%), radial-gradient(circle at 30% 80%, rgba(245,236,215,0.1) 0 9%, transparent 10%)\",\n          backgroundSize: \"760px 360px\",\n        }}\n      \/>\n\n      <div className=\"relative mx-auto flex min-h-[72vh] max-w-4xl flex-col items-center justify-center gap-8 px-6 py-14 text-center\">\n        <motion.img\n          src={logoUrl}\n          alt=\"Meeuwbeemd Radio\"\n          className=\"h-44 w-44 rounded-full border-4 border-[#d1a24b]\/70 shadow-[0_18px_40px_rgba(0,0,0,0.28)] md:h-56 md:w-56\"\n          initial={{ opacity: 0, scale: 0.85, y: 16 }}\n          animate={{ opacity: 1, scale: 1, y: [0, -5, 0] }}\n          transition={{ duration: 0.9, y: { duration: 4.5, repeat: Infinity, ease: \"easeInOut\" } }}\n        \/>\n        <motion.p\n          initial={{ opacity: 0, y: 18 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.6 }}\n          className=\"text-base font-semibold tracking-[0.2em] text-[#d7a84a]\"\n        >\n          MEEUWBEEMD RADIO\n        <\/motion.p>\n\n        <motion.h1\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.75, delay: 0.1 }}\n          className=\"text-4xl leading-tight font-extrabold text-[#f5ecd7] md:text-6xl\"\n        >\n          Muziek en informatie voor elke dag\n        <\/motion.h1>\n\n        <motion.p\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.75, delay: 0.2 }}\n          className=\"max-w-2xl text-lg text-[#e9dbc0]\"\n        >\n          Het vertrouwde geluid voor bewoners en bezoekers. Rust, herkenning en gezelligheid in elk uur van de dag.\n        <\/motion.p>\n\n        <motion.div\n          initial={{ opacity: 0, y: 24 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.75, delay: 0.3 }}\n          className=\"flex flex-wrap items-center justify-center gap-4\"\n        >\n          <a\n            href=\"#luister-live\"\n            className=\"rounded-xl bg-[#d1a24b] px-10 py-4 text-xl font-bold text-[#103a5b] shadow-[0_8px_25px_rgba(0,0,0,0.28)] transition hover:scale-[1.03] hover:bg-[#e2b154]\"\n          >\n            Luister Live\n          <\/a>\n          <a\n            href=\"#programmering\"\n            className=\"rounded-xl border-2 border-[#d1a24b] bg-transparent px-8 py-4 text-xl font-bold text-[#f5ecd7] transition hover:bg-[#d1a24b]\/10\"\n          >\n            Bekijk Programmering\n          <\/a>\n        <\/motion.div>\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction ProgrammeringPage() {\n  return (\n    <section>\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Vandaag op de radio<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Programmering in Hilversum 3 stijl uit de jaren 1979 tot 1989.\n      <\/p>\n\n      <div className=\"mt-10 grid gap-8 lg:grid-cols-2\">\n        <div>\n          <h3 className=\"text-2xl font-bold text-[#103a5b]\">Doordeweeks (ma-vr) 06:00 - 24:00<\/h3>\n          <div className=\"mt-4 space-y-3\">\n            {programmeringWeek.map((item, index) => (\n              <motion.article\n                key={`week-${item.start}-${item.titel}`}\n                initial={{ opacity: 0, y: 18 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true, amount: 0.4 }}\n                transition={{ duration: 0.45, delay: index * 0.07 }}\n                className=\"rounded-xl border border-[#d1a24b]\/35 bg-[#f7f1e3] px-5 py-4\"\n              >\n                <p className=\"text-lg font-semibold text-[#a67a2f]\">\n                  {item.start} - {item.eind}\n                <\/p>\n                <p className=\"text-2xl font-semibold text-[#103a5b]\">{item.titel}<\/p>\n              <\/motion.article>\n            ))}\n          <\/div>\n        <\/div>\n\n        <div>\n          <h3 className=\"text-2xl font-bold text-[#103a5b]\">Weekend (za-zo) 06:00 - 22:00<\/h3>\n          <div className=\"mt-4 space-y-3\">\n            {programmeringWeekend.map((item, index) => (\n              <motion.article\n                key={`weekend-${item.start}-${item.titel}`}\n                initial={{ opacity: 0, y: 18 }}\n                whileInView={{ opacity: 1, y: 0 }}\n                viewport={{ once: true, amount: 0.4 }}\n                transition={{ duration: 0.45, delay: index * 0.07 }}\n                className=\"rounded-xl border border-[#d1a24b]\/35 bg-[#f7f1e3] px-5 py-4\"\n              >\n                <p className=\"text-lg font-semibold text-[#a67a2f]\">\n                  {item.start} - {item.eind}\n                <\/p>\n                <p className=\"text-2xl font-semibold text-[#103a5b]\">{item.titel}<\/p>\n              <\/motion.article>\n            ))}\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction ProgrammasPage() {\n  return (\n    <section>\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Programma's<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Klassieke radioformats met de sound, sfeer en opbouw van Hilversum 3 (79-89).\n      <\/p>\n      <div className=\"mt-10 space-y-5\">\n        {programmas.map((programma, index) => (\n          <motion.article\n            key={programma.naam}\n            initial={{ opacity: 0, x: -18 }}\n            whileInView={{ opacity: 1, x: 0 }}\n            viewport={{ once: true, amount: 0.5 }}\n            transition={{ duration: 0.4, delay: index * 0.08 }}\n            className=\"border-b border-[#d1a24b]\/35 pb-5\"\n          >\n            <h3 className=\"text-2xl font-bold text-[#103a5b]\">{programma.naam}<\/h3>\n            <p className=\"mt-1 text-[#a67a2f]\">{programma.tijd}<\/p>\n            <p className=\"mt-2 text-lg text-[#2b4f69]\">{programma.beschrijving}<\/p>\n          <\/motion.article>\n        ))}\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction LuisterLivePage() {\n  return (\n    <section className=\"rounded-2xl border border-[#d1a24b]\/40 bg-[#103a5b] px-6 py-14 text-center text-[#f5ecd7]\">\n      <h2 className=\"text-4xl font-bold\">Luister Live<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-lg text-[#e9dbc0]\">\n        De stream staat klaar met een stijl die past bij Meeuwbeemd Radio. Voorbeeldstream: Azzurro Radio.\n      <\/p>\n      <div className=\"mx-auto mt-10 max-w-2xl rounded-xl bg-[#0b2d45] p-5\">\n        <p className=\"mb-3 text-sm tracking-wide text-[#d7a84a]\">LIVE STREAM<\/p>\n        <audio controls className=\"w-full\" src={streamUrl}>\n          Je browser ondersteunt geen audio player.\n        <\/audio>\n      <\/div>\n      <motion.a\n        href={streamUrl}\n        target=\"_blank\"\n        rel=\"noreferrer\"\n        className=\"mt-8 inline-block rounded-xl bg-[#d1a24b] px-12 py-4 text-2xl font-bold text-[#103a5b]\"\n        whileHover={{ scale: 1.05 }}\n        whileTap={{ scale: 0.98 }}\n      >\n        Open Stream Direct\n      <\/motion.a>\n    <\/section>\n  );\n}\n\nfunction GedraaidPage() {\n  return (\n    <section>\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Laatst gedraaide songs<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Dit zijn de nummers die net op Meeuwbeemd Radio zijn geweest, inclusief cover.\n      <\/p>\n\n      <div className=\"mt-10 space-y-3\">\n        {laatstGedraaid.map((song, index) => (\n          <motion.article\n            key={`${song.tijd}-${song.titel}`}\n            initial={{ opacity: 0, y: 12 }}\n            whileInView={{ opacity: 1, y: 0 }}\n            viewport={{ once: true, amount: 0.4 }}\n            transition={{ duration: 0.35, delay: index * 0.06 }}\n            className=\"flex items-center gap-4 rounded-xl border border-[#d1a24b]\/35 bg-[#f8f2e4] p-3\"\n          >\n            <img\n              src={song.cover}\n              alt={`Cover van ${song.titel}`}\n              className=\"h-16 w-16 rounded-lg object-cover\"\n              onError={(event) => {\n                event.currentTarget.src = fallbackCover;\n              }}\n            \/>\n            <div className=\"min-w-0 flex-1\">\n              <p className=\"truncate text-xl font-semibold text-[#103a5b]\">{song.titel}<\/p>\n              <p className=\"truncate text-[#a67a2f]\">{song.artiest}<\/p>\n              <p className=\"truncate text-sm text-[#2b4f69]\/85\">Album: {song.album}<\/p>\n            <\/div>\n            <p className=\"text-lg font-bold text-[#103a5b]\">{song.tijd}<\/p>\n          <\/motion.article>\n        ))}\n      <\/div>\n    <\/section>\n  );\n}\n\nfunction OverOnsPage() {\n  return (\n    <section className=\"mx-auto max-w-4xl text-center\">\n      <h2 className=\"text-4xl font-bold text-[#103a5b]\">Over Meeuwbeemd Radio<\/h2>\n      <p className=\"mt-6 text-xl leading-relaxed text-[#2b4f69]\">\n        Meeuwbeemd Radio is het huisstation van ons verzorgingshuis. We maken radio met een herkenbare toon, warme\n        presentatie en muziek die herinneringen oproept.\n      <\/p>\n      <p className=\"mt-5 text-xl leading-relaxed text-[#2b4f69]\">\n        Onze uitzendingen zorgen voor verbinding tussen bewoners, familie, vrijwilligers en medewerkers. Elke dag\n        brengen we informatie, verzoeknummers en een vriendelijk geluid op de achtergrond.\n      <\/p>\n    <\/section>\n  );\n}\n\nfunction ContactPage() {\n  return (\n    <section className=\"mx-auto max-w-3xl\">\n      <h2 className=\"text-center text-4xl font-bold text-[#103a5b]\">Contact<\/h2>\n      <p className=\"mx-auto mt-4 max-w-2xl text-center text-lg text-[#2b4f69]\">\n        Heb je een verzoeknummer of wil je een bericht laten voorlezen? Neem contact met ons op.\n      <\/p>\n      <form className=\"mt-10 space-y-4 rounded-2xl border border-[#d1a24b]\/35 bg-[#f7f1e3] p-6\">\n        <label className=\"block text-left text-sm font-semibold text-[#103a5b]\">\n          Naam\n          <input\n            type=\"text\"\n            className=\"mt-1 w-full rounded-lg border border-[#d1a24b]\/40 bg-white px-4 py-3 text-[#103a5b] outline-none focus:border-[#a67a2f]\"\n            placeholder=\"Jouw naam\"\n          \/>\n        <\/label>\n        <label className=\"block text-left text-sm font-semibold text-[#103a5b]\">\n          E-mail\n          <input\n            type=\"email\"\n            className=\"mt-1 w-full rounded-lg border border-[#d1a24b]\/40 bg-white px-4 py-3 text-[#103a5b] outline-none focus:border-[#a67a2f]\"\n            placeholder=\"naam@email.nl\"\n          \/>\n        <\/label>\n        <label className=\"block text-left text-sm font-semibold text-[#103a5b]\">\n          Bericht\n          <textarea\n            rows={4}\n            className=\"mt-1 w-full rounded-lg border border-[#d1a24b]\/40 bg-white px-4 py-3 text-[#103a5b] outline-none focus:border-[#a67a2f]\"\n            placeholder=\"Typ hier je verzoek of bericht\"\n          \/>\n        <\/label>\n        <button\n          type=\"button\"\n          className=\"rounded-xl bg-[#d1a24b] px-8 py-3 text-lg font-bold text-[#103a5b] transition hover:bg-[#e2b154]\"\n        >\n          Verstuur\n        <\/button>\n      <\/form>\n    <\/section>\n  );\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":3,"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":24,"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/24"}],"wp:attachment":[{"href":"https:\/\/meeuwbeemdradio.azzurroradio.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}