// Shared components: iPhone screenshot frame, animated gradient bg, particles, section header
const APP_STORE_URL = "https://apps.apple.com/app/digme/id6759730270";
function DigmeMark({ size = 32 }) {
return (
);
}
function AppStoreBadge({ accent = '#FF6B1A', compact = false }) {
return (
App Storeで
ダウンロード
);
}
// iPhone screenshot frame — minimal, just a rounded device with a screen-fitted image
function PhoneFrame({ src, width = 280, tilt = 0, glow = null, style = {} }) {
const aspect = 19.5 / 9; // tall iPhone
const height = width * aspect;
return (
{/* dynamic island */}
);
}
// Animated gradient hero background — multiple soft blobs
function HeroBackdrop({ accent = '#FF6B1A', accent2 = '#E5223A' }) {
return (
);
}
// Section heading
function SectionHead({ kicker, title, sub, align = 'left' }) {
return (
{kicker}
{title}
{sub &&
{sub}
}
);
}
// Reveal-on-scroll wrapper using IntersectionObserver
function Reveal({ children, delay = 0, as: Tag = 'div', style = {}, className = '' }) {
const ref = React.useRef(null);
const [shown, setShown] = React.useState(false);
React.useEffect(() => {
if (!ref.current) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), delay);
obs.disconnect();
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -60px 0px' });
obs.observe(ref.current);
return () => obs.disconnect();
}, [delay]);
return {children};
}
Object.assign(window, {
APP_STORE_URL, DigmeMark, AppStoreBadge, PhoneFrame, HeroBackdrop, SectionHead, Reveal,
});