// Brevemente — coming soon / teaser page for Minilands launch.
// Fullscreen layout: sky background, countdown to launch, key art, pre-register CTA.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"launchDateISO": "2026-08-15T18:00:00Z",
"showFloatingBlocks": true,
"phase": "Beta Fechado · Verão 2026",
"youtubeId": "GrAPLnNLtjU",
"showBossBackground": true,
"bossOpacity": 0.55
}/*EDITMODE-END*/;
// ---------- Countdown ----------
const useCountdown = (targetISO) => {
const [now, setNow] = React.useState(() => Date.now());
React.useEffect(() => {
const id = setInterval(() => setNow(Date.now()), 1000);
return () => clearInterval(id);
}, []);
const target = new Date(targetISO).getTime();
const diff = Math.max(0, target - now);
const days = Math.floor(diff / 86_400_000);
const hours = Math.floor((diff % 86_400_000) / 3_600_000);
const minutes = Math.floor((diff % 3_600_000) / 60_000);
const seconds = Math.floor((diff % 60_000) / 1000);
return { days, hours, minutes, seconds, done: diff === 0 };
};
const FlipCard = ({ value, label }) => (
{/* horizontal split line through middle (flip-clock seam) */}
{String(value).padStart(2, '0')}
{label}
);
const CountdownColon = () => (
);
// ---------- Floating decorative blocks ----------
const FloatingBlocks = () => {
// Each block is a small isometric voxel cube floating + gently drifting.
const blocks = [
{ x: '6%', y: '14%', size: 56, delay: 0, type: 'grass' },
{ x: '12%', y: '68%', size: 42, delay: 1.2, type: 'gold' },
{ x: '88%', y: '22%', size: 48, delay: 0.6, type: 'gold' },
{ x: '92%', y: '74%', size: 60, delay: 2.0, type: 'grass' },
{ x: '78%', y: '8%', size: 32, delay: 3.0, type: 'magic' },
{ x: '4%', y: '46%', size: 36, delay: 1.8, type: 'magic' },
];
const top = (t) => t === 'grass' ? '#7cd23e' : t === 'gold' ? '#fde583' : '#d57bff';
const topD = (t) => t === 'grass' ? '#3e8917' : t === 'gold' ? '#c8941b' : '#7c2dd6';
const left = (t) => t === 'grass' ? '#6abe30' : t === 'gold' ? '#f7c93b' : '#b14cff';
const right = (t) => t === 'grass' ? '#3e8917' : t === 'gold' ? '#c8941b' : '#7c2dd6';
return (
{blocks.map((b, i) => {
const s = b.size;
return (
);
})}
);
};
// ---------- Cloud row (parallax-ish, pure CSS) ----------
const Clouds = () => (
{[
{ x: '-10%', y: '12%', s: 1.0, dur: 80, op: 0.85 },
{ x: '40%', y: '6%', s: 0.7, dur: 110, op: 0.7 },
{ x: '70%', y: '22%', s: 1.2, dur: 95, op: 0.65 },
{ x: '20%', y: '34%', s: 0.8, dur: 130, op: 0.55 },
].map((c, i) => (
))}
);
// ---------- Main page ----------
const BrevementePage = () => {
const t = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
const [tw, setTw] = t;
const { days, hours, minutes, seconds, done } = useCountdown(tw.launchDateISO);
return (
{/* Sky: clouds */}
{/* Floating decoration */}
{tw.showFloatingBlocks &&
}
{/* Vignette ground (silhouetted hills bottom) */}
{/* Pixel ground silhouette */}
{/* Top bar: just the brand mark, links back to index */}
{/* Content */}
{/* Hero: circular logo with glow */}
{/* Title */}
BREVEMENTE
{/* Tagline */}
Um mundo voxel infinito está a ser construído, bloco a bloco.
Junta-te a milhares de aventureiros e sê dos primeiros a explorar Miniland.
{/* Countdown removed — social links only */}
{/* YouTube teaser */}
{done && (
JÁ DISPONÍVEL!
)}
{/* Social links — Discord, Instagram, Reddit */}
{[
{
href: 'https://discord.gg/s9kBPrfay',
label: 'Discord',
color: '#5865f2',
colorDeep: '#3a44ad',
icon: (
),
},
{
href: 'https://instagram.com/minilandsgame',
label: 'Instagram',
color: '#e1306c',
colorDeep: '#8a1d44',
icon: (
),
},
{
href: 'https://www.reddit.com/r/MiniLandsGame/',
label: 'Reddit',
color: '#ff4500',
colorDeep: '#a82d00',
icon: (
),
},
].map(s => (
{
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = `inset 0 2px 0 rgba(255,255,255,0.3), inset 0 -3px 0 rgba(0,0,0,0.3), 0 8px 0 #1a0e04, 0 16px 26px rgba(0,0,0,0.6), 0 0 30px ${s.color}66`;
}}
onMouseLeave={e => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = `inset 0 2px 0 rgba(255,255,255,0.25), inset 0 -3px 0 rgba(0,0,0,0.3), 0 6px 0 #1a0e04, 0 12px 20px rgba(0,0,0,0.5)`;
}}
>
{s.icon}
{s.label}
))}
{/* Tiny social/footer line */}
{/* Tweaks */}
{window.TweaksPanel && (
setTw('launchDateISO', v)}
/>
setTw('showFloatingBlocks', v)}
/>
setTw('youtubeId', v)}
/>
)}
);
};
ReactDOM.createRoot(document.getElementById('root')).render();