remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: add view transitions, smooth scroll, bundle analyzer, SSE radio stream, and AnimatePresence animations
Local Build and Deploy / deploy (push) Successful in 1m24s
Details

Browse Source
This commit is contained in:
openhands committed 2026-07-20 14:06:43 +02:00
1 parent 57c3fe601a
commit f53d25e0a5
11 files changed
+519 -229
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/cms-info-popup.tsx
+59 -46
View File
@@ -1,5 +1,6 @@
"use client";
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useState } from "react";
const cmsDetails = [
@@ -38,54 +39,66 @@ export function CmsInfoPopup() {
>
EpicNext Info
</button>
{open ? (
<div
className="cms-info-backdrop"
role="presentation"
onMouseDown={() => setOpen(false)}
>
<section
aria-labelledby="cms-info-title"
aria-modal="true"
className="cms-info-dialog"
role="dialog"
onMouseDown={(event) => event.stopPropagation()}
<AnimatePresence>
{open ? (
<motion.div
key="cms-info-backdrop"
className="cms-info-backdrop"
role="presentation"
onMouseDown={() => setOpen(false)}
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
>
<button
type="button"
aria-label="Close CMS info"
className="cms-info-close"
onClick={() => setOpen(false)}
<motion.section
key="cms-info-dialog"
aria-labelledby="cms-info-title"
aria-modal="true"
className="cms-info-dialog"
role="dialog"
onMouseDown={(event) => event.stopPropagation()}
initial={{ opacity: 0, scale: 0.95, y: 10 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 10 }}
transition={{ duration: 0.2 }}
>
x
</button>
<div className="cms-info-kicker">CMS information</div>
<h2 id="cms-info-title">EpicNext</h2>
<div className="cms-info-badge">Modern Next.js CMS</div>
<p className="cms-info-copy">
A modern web layer for the hotel community, focused on fast
navigation, clean administration, and a coherent EpicNext
experience.
</p>
<dl className="cms-info-grid">
{cmsDetails.map(([label, value]) => (
<div key={label}>
<dt>{label}</dt>
<dd>{value}</dd>
</div>
))}
</dl>
<div className="cms-info-credit-list" aria-label="Credits">
{credits.map(([name, role]) => (
<div className="cms-info-credit" key={name}>
<span>{name}</span>
<small>{role}</small>
</div>
))}
</div>
</section>
</div>
) : null}
<button
type="button"
aria-label="Close CMS info"
className="cms-info-close"
onClick={() => setOpen(false)}
>
x
</button>
<div className="cms-info-kicker">CMS information</div>
<h2 id="cms-info-title">EpicNext</h2>
<div className="cms-info-badge">Modern Next.js CMS</div>
<p className="cms-info-copy">
A modern web layer for the hotel community, focused on fast
navigation, clean administration, and a coherent EpicNext
experience.
</p>
<dl className="cms-info-grid">
{cmsDetails.map(([label, value]) => (
<div key={label}>
<dt>{label}</dt>
<dd>{value}</dd>
</div>
))}
</dl>
<div className="cms-info-credit-list" aria-label="Credits">
{credits.map(([name, role]) => (
<div className="cms-info-credit" key={name}>
<span>{name}</span>
<small>{role}</small>
</div>
))}
</div>
</motion.section>
</motion.div>
) : null}
</AnimatePresence>
</>
);
}