import {
mdiArrowTopRight,
mdiCalendarCheck,
mdiCheckDecagram,
mdiFileDocument,
mdiHomeCity,
mdiRoomService,
} from '@mdi/js';
import Head from 'next/head';
import React, { ReactElement } from 'react';
import BaseButton from '../components/BaseButton';
import BaseIcon from '../components/BaseIcon';
import CardBox from '../components/CardBox';
import PublicSiteFooter from '../components/PublicSiteFooter';
import PublicSiteHeader from '../components/PublicSiteHeader';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';
const productAreas = [
{
title: 'Booking intake',
description: 'Receive requests with the right tenant, dates, approvals, and context before service delivery begins.',
icon: mdiCalendarCheck,
},
{
title: 'Stay operations',
description: 'Coordinate readiness, guest service, and internal updates from one controlled operating view.',
icon: mdiRoomService,
},
{
title: 'Billing follow-through',
description: 'Keep invoicing and account visibility tied to the same reservation record from start to finish.',
icon: mdiFileDocument,
},
];
const servicePillars = [
'Tenant-aware workspace context for multi-organization teams',
'Reserved, premium visual tone without turning the page into a template',
'A direct path from public website to the real operating workspace',
];
const workflowMoments = [
{
step: '01',
title: 'Receive the brief',
description: 'Capture the request with account context, approvals, dates, and service notes intact.',
},
{
step: '02',
title: 'Deliver the stay',
description: 'Move into reservations, readiness, support, and day-to-day guest coordination with clarity.',
},
{
step: '03',
title: 'Close with confidence',
description: 'Finish with billing and account follow-through attached to the same operational source of truth.',
},
];
const highlights = [
{ label: 'Private operator view', value: 'Multi-tenant workspace' },
{ label: 'Service posture', value: 'Calm, controlled, premium' },
{ label: 'Execution model', value: 'Request to reservation to billing' },
];
export default function HomePage() {
return (
<>
{getPageTitle('Gracey Corporate Stay Portal')}
Gracey private operations suite
A more elegant operating layer for premium corporate stays.
Gracey gives booking, service, and billing teams one composed system for high-touch stays—quiet in tone,
precise in execution, and built for the work behind the guest experience.
{highlights.map((item) => (
{item.label}
{item.value}
))}
Operator brief
What the platform quietly keeps under control
Refined workflow
{workflowMoments.map((item) => (
{item.step}
{item.title}
{item.description}
))}
The public experience stays polished and restrained. The real depth appears only where it belongs:
inside the authenticated workspace.
Signature coverage
Designed for teams that want operational polish, not marketing noise.
Every section is meant to feel intentional: fewer blocks, better restraint, and a stronger sense that the
product supports a premium service model behind the scenes.
{productAreas.map((item) => (
{item.title}
{item.description}
))}
Service standard
Luxury online should feel composed, selective, and credible.
So the page leads with restraint: rich tone, quiet confidence, and a product story grounded in actual
operations rather than inflated feature theater.
{servicePillars.map((item) => (
))}
Private access
Enter the workspace when the conversation turns into execution.
Review booking flow activity, open the operating workspace, and continue from live data instead of a
brochure-style homepage.
For internal teams
Reservations, service operations, and billing remain connected—without losing the elevated feel the
brand should project externally.
>
);
}
HomePage.getLayout = function getLayout(page: ReactElement) {
return {page};
};