diff --git a/client/src/index.css b/client/src/index.css index 32759cd..2e2ec00 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,4 +1,4 @@ -@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap"); @tailwind base; @tailwind components; diff --git a/client/src/main.tsx b/client/src/main.tsx index b22a78a..bb8f67a 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -104,6 +104,12 @@ const ShipmentFormPage = React.lazy(() => const GanttPage = React.lazy(() => import("./modules/gantt/GanttPage").then((module) => ({ default: module.GanttPage })) ); +const LandingPage = React.lazy(() => + import("./modules/landing/LandingPage").then((module) => ({ default: module.LandingPage })) +); +const DarkLandingPage = React.lazy(() => + import("./modules/landing/LandingPage").then((module) => ({ default: module.DarkLandingPage })) +); function RouteFallback() { return ( @@ -119,6 +125,8 @@ function lazyElement(element: React.ReactNode) { const router = createBrowserRouter([ { path: "/login", element: }, + { path: "/landing", element: lazyElement() }, + { path: "/darklanding", element: lazyElement() }, { element: , children: [ diff --git a/client/src/modules/landing/LandingPage.tsx b/client/src/modules/landing/LandingPage.tsx new file mode 100644 index 0000000..d84640d --- /dev/null +++ b/client/src/modules/landing/LandingPage.tsx @@ -0,0 +1,331 @@ +import { Link } from "react-router-dom"; + +type LandingVariant = "light" | "dark"; + +const heroMetrics = [ + { label: "On-time release rate", value: "98.2%", detail: "across 146 active jobs this week" }, + { label: "Planner response time", value: "14 min", detail: "from demand signal to released draft supply" }, + { label: "Inventory exposure", value: "$1.4M", detail: "visible by warehouse, location, and reservation" }, +]; + +const moduleCards = [ + { + eyebrow: "Commercial Control", + title: "Quotes, orders, revisions, and approvals stay connected.", + copy: "Customer commitments flow directly into execution without spreadsheet handoffs or revision blind spots.", + bullets: ["Revision comparisons", "Approval checkpoints", "Project linkage"], + }, + { + eyebrow: "Production Visibility", + title: "Planning, projects, and work orders share the same reality.", + copy: "Material readiness, shortages, pegged supply, and station execution all stay visible from one operational surface.", + bullets: ["Live readiness rollups", "Reservation automation", "Capacity-ready planning"], + }, + { + eyebrow: "Inventory Discipline", + title: "SKU structure, stock control, and purchasing are built for actual manufacturing.", + copy: "Family-based SKU generation, BOM-aware demand, transfer visibility, and vendor-backed replenishment keep the floor aligned.", + bullets: ["Master SKU builder", "BOM explosion", "Preferred-vendor sourcing"], + }, +]; + +const timeline = [ + { time: "06:40", title: "Demand spike detected", detail: "Three approved sales orders added 28 assemblies to near-term demand." }, + { time: "07:05", title: "Planner drafts supply", detail: "System nets stock, open POs, and open work orders before recommending build and buy actions." }, + { time: "08:10", title: "Reservations applied", detail: "Available stock updates immediately across project, manufacturing, and purchasing views." }, + { time: "09:25", title: "Shipment package released", detail: "Packing slip PDF and label artifacts are ready from the same order thread." }, +]; + +const proofCards = [ + { label: "Modules live", value: "10", note: "CRM, inventory, sales, purchasing, shipping, projects, manufacturing, planning, admin, branding" }, + { label: "Data domains unified", value: "1", note: "Single operational model instead of disconnected tools" }, + { label: "Container footprint", value: "1", note: "Frontend, backend, SQLite, uploads, Puppeteer PDF pipeline" }, +]; + +const spotlightBoard = [ + { title: "Revenue committed", value: "$842K", change: "+18% vs last month", tone: "brand" }, + { title: "Shortage lines", value: "12", change: "-31% after planner actions", tone: "accent" }, + { title: "Work orders ready", value: "27", change: "6 waiting on materials", tone: "neutral" }, + { title: "Shipments due today", value: "9", change: "4 already packed", tone: "brand" }, +]; + +function LandingExperience({ variant }: { variant: LandingVariant }) { + const isDark = variant === "dark"; + const variantLabel = isDark ? "Dark landing" : "Landing"; + const altRoute = isDark ? "/landing" : "/darklanding"; + const altLabel = isDark ? "View light version" : "View dark version"; + + return ( +
+
+
+
+
+
+ +
+
+
+
+ CX +
+
+
CODEXIUM
+
Manufacturing resource planning without the ERP drag.
+
+
+
+ + {variantLabel} + + + {altLabel} + + + Open app + + + Book a walkthrough + +
+
+ +
+
+
+ Built for discrete manufacturing teams +
+

+ A sharper MRP for operators who need flow, not ERP theater. +

+

+ CODEXIUM connects commercial demand, inventory truth, project execution, purchasing, shipping, and manufacturing control in one system designed to move work across the floor. +

+ +
+ {heroMetrics.map((metric) => ( +
+
{metric.label}
+
{metric.value}
+
{metric.detail}
+
+ ))} +
+
+ +
+
+
+
+
+
+
Generated executive board
+
This week in operations
+
+
+ Live-ready demo data +
+
+ +
+ {spotlightBoard.map((card) => ( +
+
{card.title}
+
{card.value}
+
{card.change}
+
+ ))} +
+ +
+
+
+
Project and manufacturing pulse
+
Generated snapshot
+
+
+ {[ + { label: "Falcon enclosure program", progress: 86, status: "Ready for final assembly" }, + { label: "Orion service kit launch", progress: 61, status: "Waiting on one purchased line" }, + { label: "Atlas retrofit release", progress: 43, status: "Routing review in progress" }, + ].map((row) => ( +
+
+
{row.label}
+
{row.progress}%
+
+
+
+
+
{row.status}
+
+ ))} +
+
+ +
+
Supply signals
+
+ {[ + { sku: "AXL-4472", action: "Build", qty: "18 EA" }, + { sku: "KIT-2208", action: "Buy", qty: "240 EA" }, + { sku: "CAB-9031", action: "Transfer", qty: "64 EA" }, + ].map((signal) => ( +
+
+
+
{signal.sku}
+
{signal.action} recommendation
+
+
{signal.qty}
+
+
+ ))} +
+
+
+
+
+
+
+ +
+ {proofCards.map((card) => ( +
+
{card.label}
+
{card.value}
+
{card.note}
+
+ ))} +
+
+
+ +
+
+ {moduleCards.map((card) => ( +
+
{card.eyebrow}
+

{card.title}

+

{card.copy}

+
+ {card.bullets.map((bullet) => ( + + {bullet} + + ))} +
+
+ ))} +
+ +
+
+
How it moves
+

+ One demand signal. One operating picture. +

+

+ Most systems split quoting, planning, purchasing, inventory, shipping, and production into separate stories. CODEXIUM treats them as one chain, so each step inherits context instead of creating reconciliation work. +

+
+ +
+ {timeline.map((step) => ( +
+
+
Time
+
{step.time}
+
+
+
{step.title}
+
{step.detail}
+
+
+ ))} +
+
+ +
+
+
Who this is for
+

+ Teams graduating from spreadsheets, generic ERPs, or disconnected point tools. +

+
+ {[ + "Contract manufacturers that need real-time supply readiness before promising dates.", + "OEM operations teams that need projects, BOMs, purchasing, and work orders linked end to end.", + "Growing production shops that want branding, PDFs, approvals, and auditability without enterprise bloat.", + "Leaders who want a system operators will actually open all day, not just during month-end cleanup.", + ].map((statement) => ( +
+ {statement} +
+ ))} +
+
+ +
+
Next step
+

+ Pitch the platform with a page that already looks production-grade. +

+

+ Use this route as a commercial front door, demo backdrop, or customer-facing preview while the core app remains focused on execution. +

+
+
+ Public route + {isDark ? "/darklanding" : "/landing"} +
+
+ Core positioning + Modern manufacturing MRP +
+
+ Demo style + Generated commercial data +
+
+
+ + Enter the app + + + Back to top + +
+
+
+
+
+
+ ); +} + +export function LandingPage() { + return ; +} + +export function DarkLandingPage() { + return ; +}