Skip to content

Commit 6d54fe2

Browse files
AliiiBennmartyy-code
AliiiBenn
and
martyy-code
committed
feat: convert to marketing landing pages
- Layout with marketing header, nav, and footer - Home page with hero, value propositions, CTA - Projects page as ecosystem/catalog - Project details as module landing pages with terminal teaser Co-Authored-By: martyy-code <nesalia.inc@gmail.com>
1 parent 8f356a0 commit 6d54fe2

File tree

4 files changed

+224
-226
lines changed

4 files changed

+224
-226
lines changed

‎src/app/layout.tsx‎

Lines changed: 37 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,63 @@
1-
import type { Metadata } from 'next';
2-
import { Geist, Geist_Mono } from 'next/font/google';
3-
import { Package, User, Search } from 'lucide-react';
1+
import { Package, ArrowRight, Command } from 'lucide-react';
42
import Link from 'next/link';
53
import { Button } from '@/components/ui/button';
64
import { ThemeProvider } from '@/components/theme-provider';
75
import './globals.css';
86

9-
const geistSans = Geist({
10-
variable: '--font-geist-sans',
11-
subsets: ['latin'],
12-
});
13-
14-
const geistMono = Geist_Mono({
15-
variable: '--font-geist-mono',
16-
subsets: ['latin'],
17-
});
18-
19-
export const metadata: Metadata = {
20-
title: 'Wareflow',
21-
description: 'A centralized platform for logistics management',
22-
};
23-
24-
export default function RootLayout({
25-
children,
26-
}: {
27-
children: React.ReactNode;
28-
}) {
7+
export default function RootLayout({ children }: { children: React.ReactNode }) {
298
return (
30-
<html lang="en" suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} dark`} style={{ colorScheme: 'dark' }}>
9+
<html lang="en" className="dark" style={{ colorScheme: 'dark' }}>
3110
<body className="bg-background text-foreground font-sans antialiased min-h-screen">
3211
<ThemeProvider
3312
attribute="class"
3413
defaultTheme="dark"
3514
enableSystem={false}
3615
disableTransitionOnChange
3716
>
38-
{/* Vercel-like Container */}
17+
{/* Vercel-like Centered Container */}
3918
<div className="max-w-5xl mx-auto border-x border-border min-h-screen flex flex-col">
40-
{/* Global Header */}
41-
<header className="h-16 border-b border-border flex items-center justify-between px-6 sticky top-0 bg-background/95 backdrop-blur z-50">
42-
<div className="flex items-center space-x-6">
43-
<Link href="/" className="flex items-center space-x-2">
44-
<div className="w-6 h-6 bg-primary flex items-center justify-center">
45-
<Package className="w-4 h-4 text-primary-foreground" />
46-
</div>
47-
<span className="font-bold tracking-tight">WAREFLOW</span>
48-
</Link>
49-
<nav className="hidden md:flex items-center space-x-4 text-sm text-muted-foreground">
50-
<Link href="/projects" className="hover:text-foreground transition-colors">Projects</Link>
51-
</nav>
52-
</div>
19+
{/* Marketing Header */}
20+
<header className="h-16 flex items-center justify-between px-6 sticky top-0 bg-background/95 backdrop-blur z-50 border-b border-border">
21+
<Link href="/" className="flex items-center space-x-3 group">
22+
<div className="w-6 h-6 bg-primary flex items-center justify-center transition-transform group-hover:scale-105">
23+
<Package className="w-4 h-4 text-primary-foreground" />
24+
</div>
25+
<span className="font-bold tracking-widest text-sm uppercase">Wareflow</span>
26+
</Link>
5327

54-
<div className="flex items-center space-x-4">
55-
{/* Command Palette Trigger */}
56-
<button className="hidden md:flex items-center space-x-2 bg-secondary/50 hover:bg-secondary border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors focus:outline-none focus:ring-1 focus:ring-primary">
57-
<Search className="w-4 h-4" />
58-
<span>Search projects...</span>
59-
<kbd className="font-mono text-[10px] bg-background border border-border px-1.5 py-0.5 ml-4 text-foreground">
60-
⌘K
61-
</kbd>
62-
</button>
28+
<nav className="hidden md:flex items-center space-x-8 text-sm font-medium text-muted-foreground">
29+
<Link href="/projects" className="hover:text-foreground transition-colors">Ecosystem</Link>
30+
<Link href="#philosophy" className="hover:text-foreground transition-colors">Philosophy</Link>
31+
<Link href="#pricing" className="hover:text-foreground transition-colors">Pricing</Link>
32+
</nav>
6333

64-
{/* User Avatar/Menu */}
65-
<Button variant="outline" size="icon" className="w-8 h-8 rounded-none border-border">
66-
<User className="w-4 h-4" />
34+
<div className="flex items-center space-x-4">
35+
<Button variant="ghost" className="hidden md:flex rounded-none text-muted-foreground hover:text-foreground">
36+
Sign In
37+
</Button>
38+
<Button className="rounded-none group">
39+
Book a Demo <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />
6740
</Button>
6841
</div>
6942
</header>
7043

71-
{/* Main Content */}
44+
{/* Landing Page Content */}
7245
<main className="flex-1 flex flex-col">
7346
{children}
7447
</main>
48+
49+
{/* Minimalist Footer */}
50+
<footer className="border-t border-border p-8 md:p-12 bg-secondary/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
51+
<div className="flex items-center space-x-2 text-muted-foreground">
52+
<Command className="w-4 h-4" />
53+
<span className="text-sm font-mono">© {new Date().getFullYear()} Wareflow Organization.</span>
54+
</div>
55+
<div className="flex space-x-6 text-sm text-muted-foreground">
56+
<Link href="#" className="hover:text-foreground">Twitter</Link>
57+
<Link href="#" className="hover:text-foreground">GitHub</Link>
58+
<Link href="#" className="hover:text-foreground">Legal</Link>
59+
</div>
60+
</footer>
7561
</div>
7662
</ThemeProvider>
7763
</body>

‎src/app/page.tsx‎

Lines changed: 58 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,72 @@
1-
import { ArrowRight, Box, Truck, BarChart2 } from 'lucide-react';
1+
import { ArrowRight, Layers, Zap, Terminal, Box } from 'lucide-react';
22
import Link from 'next/link';
3-
import { Badge } from '@/components/ui/badge';
43
import { Button } from '@/components/ui/button';
54

6-
const MOCK_PROJECTS = [
7-
{ slug: 'inventory', name: 'Inventory Management', status: 'Operational', updated: '2m ago' },
8-
{ slug: 'fleet', name: 'Fleet Routing', status: 'Degraded', updated: '1h ago' },
9-
{ slug: 'analytics', name: 'Data Warehouse', status: 'Operational', updated: 'Just now' },
10-
{ slug: 'inbound', name: 'Inbound Receiving', status: 'Maintenance', updated: '1d ago' },
11-
];
12-
13-
export default function DashboardPage() {
5+
export default function HomeLandingPage() {
146
return (
157
<div className="flex flex-col w-full">
16-
{/* Header Section */}
17-
<div className="p-8 border-b border-border">
18-
<h1 className="text-3xl font-semibold tracking-tight mb-2">Overview</h1>
19-
<p className="text-muted-foreground">Manage your logistics applications from a single hub.</p>
20-
</div>
8+
{/* Hero Section */}
9+
<section className="px-6 py-24 md:py-32 border-b border-border bg-gradient-to-b from-secondary/20 to-transparent">
10+
<div className="max-w-3xl">
11+
<div className="inline-flex items-center border border-border bg-background px-3 py-1 mb-8">
12+
<span className="flex h-2 w-2 bg-primary mr-2"></span>
13+
<span className="text-xs font-mono uppercase tracking-wider text-muted-foreground">Wareflow OS v1.0</span>
14+
</div>
15+
<h1 className="text-5xl md:text-7xl font-bold tracking-tighter mb-6 leading-tight">
16+
The unified hub for modern logistics.
17+
</h1>
18+
<p className="text-lg md:text-xl text-muted-foreground mb-10 max-w-2xl leading-relaxed">
19+
A comprehensive, modular logistics management solution. We combine the power of a lightweight ERP with the developer-first aesthetic of modern deployment platforms.
20+
</p>
21+
<div className="flex flex-col sm:flex-row gap-4">
22+
<Button size="lg" className="rounded-none text-base px-8 h-14 group">
23+
Explore the Ecosystem <ArrowRight className="w-4 h-4 ml-2 group-hover:translate-x-1 transition-transform" />
24+
</Button>
25+
<Button size="lg" variant="outline" className="rounded-none text-base px-8 h-14 border-border">
26+
Read the Manifesto
27+
</Button>
28+
</div>
29+
</div>
30+
</section>
2131

22-
{/* Quick Stats (Glued together via divide-x) */}
23-
<div className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-border border-b border-border bg-secondary/20">
24-
<div className="p-6 flex flex-col">
25-
<span className="text-sm text-muted-foreground font-mono mb-1">Total Packages (24h)</span>
26-
<span className="text-3xl font-semibold">14,239</span>
32+
{/* Value Proposition (Glued Grid) */}
33+
<section className="grid grid-cols-1 md:grid-cols-3 divide-y md:divide-y-0 md:divide-x divide-border border-b border-border">
34+
<div className="p-10 hover:bg-secondary/10 transition-colors">
35+
<Layers className="w-8 h-8 mb-6 text-muted-foreground" />
36+
<h3 className="text-xl font-semibold mb-3">Modular by Design</h3>
37+
<p className="text-muted-foreground text-sm leading-relaxed">
38+
Inspired by Odoo. Only install the applications you need. Your warehouse operations, supply chain, and delivery workflows remain independent but perfectly integrated.
39+
</p>
2740
</div>
28-
<div className="p-6 flex flex-col">
29-
<span className="text-sm text-muted-foreground font-mono mb-1">Active Vehicles</span>
30-
<span className="text-3xl font-semibold">124 / 150</span>
41+
<div className="p-10 hover:bg-secondary/10 transition-colors">
42+
<Terminal className="w-8 h-8 mb-6 text-muted-foreground" />
43+
<h3 className="text-xl font-semibold mb-3">Single Entry Point</h3>
44+
<p className="text-muted-foreground text-sm leading-relaxed">
45+
One login for all your logistics apps. Command your entire operation from a centralized dashboard with a universal command palette.
46+
</p>
3147
</div>
32-
<div className="p-6 flex flex-col">
33-
<span className="text-sm text-muted-foreground font-mono mb-1">System Health</span>
34-
<span className="text-3xl font-semibold text-emerald-500">99.9%</span>
48+
<div className="p-10 hover:bg-secondary/10 transition-colors">
49+
<Zap className="w-8 h-8 mb-6 text-muted-foreground" />
50+
<h3 className="text-xl font-semibold mb-3">Professional Grade</h3>
51+
<p className="text-muted-foreground text-sm leading-relaxed">
52+
Dark-first, high contrast, zero distractions. Built for operators who need clear information hierarchy and blazing-fast interactions.
53+
</p>
3554
</div>
36-
</div>
55+
</section>
3756

38-
{/* Projects Grid Container */}
39-
<div className="p-8">
40-
<div className="flex items-center justify-between mb-6">
41-
<h2 className="text-xl font-medium">Recent Projects</h2>
42-
<Button variant="link" className="text-muted-foreground hover:text-foreground p-0 rounded-none h-auto">
43-
View all <ArrowRight className="w-4 h-4 ml-1" />
57+
{/* CTA Section */}
58+
<section className="p-12 md:p-24 flex flex-col items-center text-center bg-gradient-to-b from-secondary/10 to-transparent">
59+
<Box className="w-12 h-12 mb-6 text-primary" />
60+
<h2 className="text-3xl md:text-4xl font-bold tracking-tight mb-4">Ready to upgrade your infrastructure?</h2>
61+
<p className="text-muted-foreground max-w-xl mb-8">
62+
Join forward-thinking supply chain teams using Wareflow to consolidate their fragmented logistics stack.
63+
</p>
64+
<Link href="/projects">
65+
<Button variant="outline" size="lg" className="rounded-none border-border bg-background hover:bg-secondary transition-all">
66+
View available modules
4467
</Button>
45-
</div>
46-
47-
{/* Glued Grid: borders on elements to avoid gaps */}
48-
<div className="grid grid-cols-1 md:grid-cols-2 border-t border-l border-border">
49-
{MOCK_PROJECTS.map((project) => (
50-
<Link
51-
key={project.slug}
52-
href={`/projects/${project.slug}`}
53-
className="group block p-6 border-b border-r border-border hover:bg-secondary/30 transition-colors"
54-
>
55-
<div className="flex justify-between items-start mb-4">
56-
<div className="flex items-center space-x-3">
57-
<div className="w-8 h-8 bg-secondary border border-border flex items-center justify-center group-hover:bg-primary group-hover:text-primary-foreground transition-colors">
58-
<Box className="w-4 h-4" />
59-
</div>
60-
<h3 className="font-medium">{project.name}</h3>
61-
</div>
62-
<Badge variant={project.status === 'Operational' ? 'default' : 'secondary'} className="rounded-none font-mono text-xs">
63-
{project.status}
64-
</Badge>
65-
</div>
66-
<p className="text-sm text-muted-foreground font-mono mt-8">
67-
Updated {project.updated}
68-
</p>
69-
</Link>
70-
))}
71-
</div>
72-
</div>
68+
</Link>
69+
</section>
7370
</div>
7471
);
7572
}

0 commit comments

Comments
 (0)