Prompt Details
Model
Chat - (gpt-5.4)
Token size
741
Example input
[OUTPUT_TYPE]: landing page
[PRODUCT_BRIEF]: Northstar is a workforce planning SaaS platform for operations leaders at mid-size retail brands. The goal is to book demos. The product predicts staffing gaps, labor costs, and store-level scheduling risks before they affect store performance. It helps teams replace manual spreadsheet-based planning with faster operational decisions.
[TECH_AND_FORMAT]: React + Tailwind single-file page. Production-ready implementation. Clean responsive structure. Easy to refine further.
[STYLE_DIRECTION]: Premium editorial dark UI with one restrained amber accent. High contrast, cinematic but clean, strong hierarchy, deliberate whitespace, no visual clutter.
[REQUIREMENTS]: Must include: hero, product proof section, workflow section, pricing preview, FAQ, final CTA. Avoid: logo cloud, floating badges, generic gradients, unnecessary cards, fake stats. Preserve: none.
Example output
import React, { useState } from "react";
const faqItems = [
{
question: "Does Northstar replace our scheduling software?",
answer:
"No. Northstar sits upstream of scheduling. It helps operations leaders spot labor gaps, overtime pressure, and store-level risk before schedules lock in.",
},
{
question: "Who is this built for?",
answer:
"Northstar is designed for multi-location retail teams that still rely heavily on spreadsheets, manual rollups, and reactive staffing decisions.",
},
{
question: "How long does implementation take?",
answer:
"Most teams start with a scoped rollout focused on planning inputs, labor assumptions, and exception review. The goal is fast operational clarity, not a long transformation project.",
},
{
question: "Can regional and store teams both use it?",
answer:
"Yes. Regional leaders can review risk across locations while store and field teams use the same operating context to respond faster.",
},
{
question: "Do we need perfect historical data first?",
answer:
"No. Northstar is most useful when it helps teams move beyond fragmented planning. A clean pilot scope is more important than waiting for ideal data.",
},
];
const pricingTiers = [
{
name: "Pilot",
description: "For a focused rollout in one region or operating group.",
details: [
"Guided onboarding",
"Core forecasting setup",
"Leadership review workflow",
"Custom annual pricing",
],
},
{
name: "Growth",
description: "For retail teams managing multiple banners or regions.",
details: [
"Cross-location planning",
"Role-based views",
"Scenario review",
"Custom annual pricing",
],
featured: true,
},
{
name: "Enterprise",
description: "For complex retail operations with wider governance needs.",
details: [
"Advanced rollout support",
"Operational governance",
"Executive planning layer",
"Custom annual pricing",
],
},
];
function SectionEyebrow({ children }) {
return (
<div className="mb-4 text-[11px] font-medium uppercase tracking-[0.22em] text-amber-300/80">
{children}
</div>
);
}
function Container({ children, className = "" }) {
return (
<div className={`mx-auto w-full max-w-7xl px-6 sm:px-8 lg:px-12 ${className}`}>
{children}
</div>
);
}
function NorthstarHeroVisual() {
return (
<div className="relative mx-auto w-full max-w-3xl">
<div className="absolute inset-0 rounded-[2rem] bg-amber-400/8 blur-3xl" />
<div className="relative overflow-hidden rounded-[2rem] border border-white/10 bg-[#111214] shadow-[0_30px_100px_rgba(0,0,0,0.45)]">
<div className="border-b border-white/10 px-5 py-4 sm:px-6">
<div className="flex items-center justify-between gap-4">
<div>
<div className="text-[11px] uppercase tracking-[0.22em] text-zinc-500">
Northstar planning view
</div>
<div className="mt-1 text-sm font-medium text-zinc-100">
Week 32 路 Northeast region
</div>
</div>
<div className="rounded-full border border-amber-300/25 bg-amber-300/10 px-3 py-1 text-[11px] font-medium text-amber-200">
Staffing risk detected
</div>
</div>
</div>
<div className="grid gap-0 lg:grid-cols-[1.3fr_0.9fr]">
<div className="border-b border-white/10 p-5 sm:p-6 lg:border-b-0 lg:border-r">
<div className="mb-5 flex items-center justify-between">
<div>
<div className="text-[11px] uppercase tracking-[0.18em] text-zinc-500">
Store coverage outlook
</div>
<div className="mt-1 text-sm text-zinc-300">
Gaps, transfers, and overtime pressure by daypart
</div>
</div>
</div>
<div className="space-y-3">
{[
{
store: "Store 214 路 Midtown",
note: "Friday close coverage below target",
level: "Understaffed",
accent: "bg-amber-300/90",
},
{
store: "Store 118 路 Rivergate",
note: "Saturday labor cost trending high",
level: "Overtime risk",
accent: "bg-zinc-200/90",
},
{
store: "Store 342 路 Oak Plaza",
note: "Transfer available from nearby location",
level: "Recoverable",
accent: "bg-emerald-300/90",
},
].map((row) => (
<div
key={row.store}
className="group rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-4 transition duration-200 hover:border-white/15 hover:bg-white/[0.05]"
>
<div className="flex items-start justify-between gap-4">
<div>
<div className="text-sm font-medium text-zinc-100">{row.store}</div>
<div className="mt-1 text-sm text-zinc-400">{row.note}</div>
</div>
<div className="flex items-center gap-2 whitespace-nowrap rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[11px] text-zinc-300">
<span className={`h-2 w-2 rounded-full ${row.accent}`} />
{row.level}
</div>
</div>
<div className="mt-4 grid grid-cols-7 gap-2">
{[48, 62, 58, 70, 39, 44, 60].map((v, i) => (
<div key={i} className="flex flex-col items-center gap-2">
<div className="flex h-20 w-full items-end rounded-xl bg-white/[0.03] px-1.5 pb-1.5">
<div
className={`w-full rounded-md ${
v < 45 ? "bg-amber-300/85" : "bg-white/70"
}`}
style={{ height: `${v}%` }}
/>
</div>
<div className="text-[10px] uppercase tracking-wide text-zinc-500">
{["M", "T", "W", "T", "F", "S", "S"][i]}
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
<div className="p-5 sm:p-6">
<div className="text-[11px] uppercase tracking-[0.18em] text-zinc-500">
Recommended actions
</div>
<div className="mt-4 space-y-3">
{[
{
title: "Rebalance Friday close",
body: "Move one trained associate from Rivergate to Midtown to restore evening floor coverage.",
},
{
title: "Flag labor cost drift",
body: "Saturday staffing at Rivergate is tracking above target hours without matching sales assumptions.",
},
{
title: "Review manager override",
body: "Oak Plaza can absorb a midday shift change with no service-level impact.",
},
].map((item) => (
<div
key={item.title}
className="rounded-2xl border border-white/8 bg-white/[0.03] p-4"
>
<div className="text-sm font-medium text-zinc-100">{item.title}</div>
<div className="mt-2 text-sm leading-6 text-zinc-400">{item.body}</div>
</div>
))}
</div>
<div className="mt-5 rounded-2xl border border-amber-300/15 bg-amber-300/[0.06] p-4">
<div className="text-[11px] uppercase tracking-[0.18em] text-amber-200/85">
Planning note
</div>
<div className="mt-2 text-sm leading-6 text-zinc-300">
Northstar helps teams act before gaps become missed service, excess labor, or rushed rescheduling.
</div>
</div>
</div>
</div>
</div>
</div>
);
}
function FAQItem({ item, index, openIndex, setOpenIndex }) {
const isOpen = openIndex === index;
return (
<div className="border-b border-white/10">
<button
type="button"
onClick={() => setOpenIndex(isOpen ? -1 : index)}
className="flex w-full items-center justify-between gap-4 py-5 text-left"
>
<span className="text-base font-medium text-zinc-100">{item.question}</span>
<span
className={`text-xl leading-none text-zinc-400 transition-transform duration-200 ${
isOpen ? "rotate-45" : ""
}`}
>
+
</span>
</button>
<div
className={`grid transition-all duration-300 ease-out ${
isOpen ? "grid-rows-[1fr] pb-5" : "grid-rows-[0fr]"
}`}
>
<div className="overflow-hidden">
<p className="max-w-3xl text-sm leading-7 text-zinc-400">{item.answer}</p>
</div>
</div>
</div>
);
}
export default function NorthstarLandingPage() {
const [openIndex, setOpenIndex] = useState(0);
return (
<div className="min-h-screen bg-[#0a0a0b] text-zinc-100 antialiased">
<div className="absolute inset-x-0 top-0 h-[42rem] bg-[radial-gradient(circle_at_top,rgba(255,191,102,0.08),transparent_38%)] pointer-events-none" />
<header className="relative z-10">
<Container className="pt-6 sm:pt-8">
<div className="flex items-center justify-between border-b border-white/10 pb-5">
<a href="#" className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-full border border-white/10 bg-white/[0.04] text-sm font-semibold text-amber-200">
N
</div>
<div>
<div className="text-sm font-semibold tracking-[0.08em] text-white">
NORTHSTAR
</div>
<div className="text-[11px] uppercase tracking-[0.16em] text-zinc-500">
Workforce planning
</div>
</div>
</a>
<nav className="hidden items-center gap-8 text-sm text-zinc-400 md:flex">
<a href="#proof" className="transition hover:text-zinc-100">
Product
</a>
<a href="#workflow" className="transition hover:text-zinc-100">
Workflow
</a>
<a href="#pricing" className="transition hover:text-zinc-100">
Pricing
</a>
<a href="#faq" className="transition hover:text-zinc-100">
FAQ
</a>
</nav>
<a
href="#demo"
className="inline-flex items-center justify-center rounded-full border border-amber-300/30 bg-amber-300/10 px-4 py-2 text-sm font-medium text-amber-100 transition hover:bg-amber-300/16"
>
Book demo
</a>
</div>
</Container>
</header>
<main className="relative z-10">
<section className="overflow-hidden">
<Container className="py-16 sm:py-20 lg:py-28">
<div className="grid items-center gap-14 lg:grid-cols-[0.9fr_1.1fr] lg:gap-16">
<div className="max-w-2xl">
<div className="mb-6 inline-flex items-center rounded-full border border-white/10 bg-white/[0.03] px-3 py-1 text-[11px] uppercase tracking-[0.18em] text-zinc-400">
Retail operations planning
</div>
<h1 className="max-w-xl text-5xl font-semibold leading-[0.95] tracking-[-0.04em] text-white sm:text-6xl lg:text-7xl">
See staffing risk before it reaches the store floor.
</h1>
<p className="mt-6 max-w-xl text-base leading-7 text-zinc-400 sm:text-lg">
Northstar helps retail operators predict labor gaps, cost pressure, and scheduling risk early enough to act鈥攚ithout relying on another week of spreadsheet rollups.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<a
href="#demo"
className="inline-flex items-center justify-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-black transition hover:bg-amber-200"
>
Book a demo
</a>
<a
href="#workflow"
className="inline-flex items-center justify-center rounded-full border border-white/12 bg-white/[0.03] px-5 py-3 text-sm font-medium text-zinc-200 transition hover:bg-white/[0.06]"
>
See how it works
</a>
</div>
<div className="mt-10 max-w-lg border-l border-white/10 pl-5">
<p className="text-sm leading-7 text-zinc-500">
Built for operations leaders who need faster staffing decisions across regions, banners, and store networks.
</p>
</div>
</div>
<NorthstarHeroVisual />
</div>
</Container>
</section>
<section id="proof" className="border-t border-white/10">
<Container className="py-20 sm:py-24">
<div className="grid gap-12 lg:grid-cols-[0.8fr_1.2fr]">
<div>
<SectionEyebrow>Product proof</SectionEyebrow>
<h2 className="max-w-md text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">
Planning clarity that feels operational, not theoretical.
</h2>
</div>
<div className="grid gap-0 border border-white/10 bg-white/[0.02]">
{[
{
title: "Find staffing gaps before schedules harden",
body: "Spot weak coverage, cost drift, and location-level risk while there is still time to rebalance labor.",
},
{
title: "Replace fragmented spreadsheet rollups",
body: "Give regional and central teams one planning surface instead of disconnected files and manual updates.",
},
{
title: "Make store-level tradeoffs easier to review",
body: "Bring labor assumptions, emerging exceptions, and recommended next actions into one shared decision flow.",
},
].map((item, index) => (
<div
key={item.title}
className={`grid gap-4 p-6 sm:grid-cols-[2rem_1fr] sm:p-8 ${
index < 2 ? "border-b border-white/10" : ""
}`}
>
<div className="text-sm font-medium text-amber-200">
0{index + 1}
</div>
<div>
<h3 className="text-xl font-medium text-zinc-100">{item.title}</h3>
<p className="mt-3 max-w-2xl text-sm leading-7 text-zinc-400">
{item.body}
</p>
</div>
</div>
))}
</div>
</div>
</Container>
</section>
<section id="workflow" className="border-t border-white/10">
<Container className="py-20 sm:py-24">
<SectionEyebrow>Workflow</SectionEyebrow>
<div className="grid gap-12 lg:grid-cols-[0.9fr_1.1fr]">
<div>
<h2 className="max-w-lg text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">
From planning inputs to store-ready decisions.
</h2>
<p className="mt-5 max-w-lg text-sm leading-7 text-zinc-400 sm:text-base">
Northstar is built for the real sequence operations teams follow: assess demand pressure, review labor implications, then intervene where risk is rising.
</p>
</div>
<div className="space-y-4">
{[
{
step: "01",
title: "Forecast likely pressure points",
body: "Surface upcoming staffing gaps, cost pressure, and service risk before they turn into last-minute schedule problems.",
},
{
step: "02",
title: "Review location-level exceptions",
body: "See which stores need attention, which risks are recoverable, and where simple transfers or schedule changes can help.",
},
{
step: "03",
title: "Align teams around next actions",
body: "Turn planning insight into a clean review flow for regional leaders, field managers, and store operators.",
},
].map((item) => (
<div
key={item.step}
className="group rounded-[1.75rem] border border-white/10 bg-white/[0.02] p-6 transition duration-200 hover:border-white/20 hover:bg-white/[0.035] sm:p-7"
>
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div>
<div className="text-[11px] uppercase tracking-[0.2em] text-zinc-500">
Step {item.step}
</div>
<h3 className="mt-2 text-xl font-medium text-zinc-100">
{item.title}
</h3>
<p className="mt-3 max-w-2xl text-sm leading-7 text-zinc-400">
{item.body}
</p>
</div>
<div className="h-10 w-10 shrink-0 rounded-full border border-amber-300/20 bg-amber-300/10" />
</div>
</div>
))}
</div>
</div>
</Container>
</section>
<section id="pricing" className="border-t border-white/10">
<Container className="py-20 sm:py-24">
<div className="max-w-2xl">
<SectionEyebrow>Pricing preview</SectionEyebrow>
<h2 className="text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">
Structured for retail teams, not self-serve experiments.
</h2>
<p className="mt-5 text-sm leading-7 text-zinc-400 sm:text-base">
Northstar is typically rolled out with a defined operational scope and tailored onboarding. Teams buy for planning quality, adoption, and faster decisions鈥攏ot for feature sprawl.
</p>
</div>
<div className="mt-12 grid gap-5 lg:grid-cols-3">
{pricingTiers.map((tier) => (
<div
key={tier.name}
className={`rounded-[1.75rem] border p-6 sm:p-7 ${
tier.featured
? "border-amber-300/30 bg-amber-300/[0.06]"
: "border-white/10 bg-white/[0.02]"
}`}
>
<div className="text-[11px] uppercase tracking-[0.2em] text-zinc-500">
{tier.name}
</div>
<p className="mt-4 text-lg font-medium text-zinc-100">{tier.description}</p>
<ul className="mt-6 space-y-3">
{tier.details.map((detail) => (
<li key={detail} className="flex items-start gap-3 text-sm text-zinc-400">
<span className="mt-1 h-1.5 w-1.5 rounded-full bg-amber-300/80" />
<span>{detail}</span>
</li>
))}
</ul>
<a
href="#demo"
className={`mt-8 inline-flex rounded-full px-4 py-2.5 text-sm font-medium transition ${
tier.featured
? "bg-amber-300 text-black hover:bg-amber-200"
: "border border-white/12 bg-white/[0.03] text-zinc-100 hover:bg-white/[0.06]"
}`}
>
Talk to sales
</a>
</div>
))}
</div>
</Container>
</section>
<section id="faq" className="border-t border-white/10">
<Container className="py-20 sm:py-24">
<div className="grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
<div>
<SectionEyebrow>FAQ</SectionEyebrow>
<h2 className="max-w-sm text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">
The questions that usually come up early.
</h2>
</div>
<div>
{faqItems.map((item, index) => (
<FAQItem
key={item.question}
item={item}
index={index}
openIndex={openIndex}
setOpenIndex={setOpenIndex}
/>
))}
</div>
</div>
</Container>
</section>
<section id="demo" className="border-t border-white/10">
<Container className="py-20 sm:py-24">
<div className="overflow-hidden rounded-[2rem] border border-white/10 bg-white/[0.03]">
<div className="grid gap-8 px-6 py-10 sm:px-8 sm:py-12 lg:grid-cols-[1fr_auto] lg:items-end lg:px-12">
<div className="max-w-2xl">
<SectionEyebrow>Book a demo</SectionEyebrow>
<h2 className="text-3xl font-semibold tracking-[-0.03em] text-white sm:text-4xl">
Review your planning workflow before the next staffing issue does it for you.
</h2>
<p className="mt-5 text-sm leading-7 text-zinc-400 sm:text-base">
See how Northstar can fit your current operating model, planning cadence, and store network without adding more spreadsheet overhead.
</p>
</div>
<div className="flex flex-col gap-3 sm:flex-row lg:flex-col">
<a
href="mailto:sales@northstar.com"
className="inline-flex items-center justify-center rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-black transition hover:bg-amber-200"
>
Request demo
</a>
<a
href="#"
className="inline-flex items-center justify-center rounded-full border border-white/12 bg-white/[0.03] px-5 py-3 text-sm font-medium text-zinc-200 transition hover:bg-white/[0.06]"
>
See product overview
</a>
</div>
</div>
</div>
</Container>
</section>
</main>
</div>
);
}
Instant access
Commercial use
Money鈥慴ackBy purchasing this prompt, you agree to our terms of service
GPT-5.4
Generate production-ready landing pages, dashboards, and admin interfaces with strong art direction and clean frontend execution. This prompt makes ChatGPT think like an art director first, then a UI engineer: visual thesis, content plan, interaction ideas, implementation, and self-review. Ideal for React/Next.js, HTML/CSS, or redesigning existing products without generic SaaS layouts.
...more
Updated 3 days ago
