import { Head, Link, usePage } from '@inertiajs/react'; import { ArrowLeft, CalendarClock, ClipboardList, Eye, FileText, Mail, Phone, Sparkles, Sun, } from 'lucide-react'; import AppLogoIcon from '@/components/app-logo-icon'; import type { Branding, ComingSoonPageProps } from '@/types'; /** * The page a site wears before it is public. * * One quiet screen: the company's name and mark, one sentence about what is * coming, and how to reach the office in the meantime. No countdown timer, no * email capture, no carousel — a holding page has one job, and anything else on * it makes the site look busier than it is. * * The date, when one has been set, is printed as a month rather than a day: a * business that says "March" and opens on the 18th has kept its word, and one * that says "the 18th" and opens on the 19th has not. */ export default function ComingSoon({ preview = false, ...page }: ComingSoonPageProps) { const { branding } = usePage<{ branding: Branding }>().props; const year = new Date().getFullYear(); const countdown = countdownLabel(page.days_away); return ( <> {/* A page that is not public yet has nothing to offer a search engine but a wrong first impression. */} {preview ? (
Preview — this is the page visitors see while Coming soon is on. Back to settings
) : null}
{branding.logo_url ? ( // The uploaded logo is the wordmark: repeating the // company name beside it would say it twice. It sits on // a faint plate so a dark logo is not lost here. {branding.name} ) : ( <> {branding.name} )}
Team sign in

{page.eyebrow}

{page.headline}

{page.message}

{page.expected_label ? ( Launching {page.expected_label} {countdown ? ( · {countdown} ) : null} ) : null} {phoneNumber(page.contact_phone) ? ( {page.contact_phone} ) : null} {page.contact_email ? ( {page.contact_email} ) : null}
{!preview && (page.contact_email || phoneNumber(page.contact_phone)) ? (

Existing customers can still reach the office above. Everything else opens on launch day.

) : null}
{/* What the portal will be for. Kept to three lines and hidden on a phone, where the message is already the whole page. */}
); } /** * The three things the portal will be for, in the words a customer uses rather * than the words the CRM uses. */ const launchItems = [ { title: 'Your system', icon: Sun, body: 'Every panel, inverter and certificate for your install, in one place.', }, { title: 'Your requests', icon: ClipboardList, body: 'Follow an open fault without ringing the office to ask where it is up to.', }, { title: 'Your documents', icon: FileText, body: 'Invoices, warranties and compliance paperwork you can find years later.', }, ]; /** * A phone number, or nothing. * * The number comes from the company profile, where a field can end up holding * something that is not a number at all. A line that reads "Dingley Village" * under a telephone icon is worse than no line, so anything without digits is * left off the page. */ function phoneNumber(value: string | null): string | null { return value && /\d{6,}/.test(value.replace(/\s+/g, '')) ? value : null; } /** * "in 34 days", "tomorrow", "today" — or nothing at all once the date has * passed, because a countdown that has run out is worse than no countdown. */ function countdownLabel(days: number | null): string | null { if (days === null || days < 0) { return null; } if (days === 0) { return 'today'; } if (days === 1) { return 'tomorrow'; } return `in ${days} days`; }