45 lines
1.9 KiB
TypeScript
45 lines
1.9 KiB
TypeScript
import { Smartphone } from "lucide-react";
|
|
|
|
export default function MobileFlowsPortal() {
|
|
return (
|
|
<div className="my-15 text-slate-100 font-sans">
|
|
{/* --- HEADER SECTION --- */}
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6">
|
|
<div>
|
|
{/* Breadcrumb */}
|
|
<div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
|
<span>PLATFORM</span>
|
|
<span>•</span>
|
|
<span>MOBILE</span>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<h1 className="text-2xl font-bold text-white tracking-tight">
|
|
KAFM Field — mobile flows
|
|
</h1>
|
|
|
|
{/* Subtitle / Description */}
|
|
<p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
|
|
The technician mobile app, embedded live: two flow variations (1a Field Deck · dark, 1b Day Runner · light), 17 screens each — jobs, checklists, QR, inventory, chat, incidents, reports. Every phone is fully interactive.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<div className="self-start md:self-auto shrink-0">
|
|
<button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
|
|
<Smartphone className="w-4 h-4 text-slate-300" />
|
|
<span>Open full screen</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* --- EMBEDDED PHONE DISPLAY AREA --- */}
|
|
<div className="w-full bg-[#EAEFF4] rounded-2xl min-h-[500px] border border-slate-800 shadow-2xl p-6 flex items-center justify-center">
|
|
{/* Mobile preview frame container goes here */}
|
|
<p className="text-slate-500 font-mono text-xs">
|
|
[ Live Mobile App Frames ]
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |