Skip to content

Commit 8b675b5

Browse files
CarboxyDevCarboxyDev
committed
Update landing page UI and add logo, better heading, tagline, more CTA buttons and add footer
1 parent 632a97f commit 8b675b5

File tree

9 files changed

+391
-213
lines changed

9 files changed

+391
-213
lines changed

‎apps/frontend/src/app/globals.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,9 @@
191191
* {
192192
@apply border-border outline-ring/50;
193193
}
194+
html {
195+
scroll-behavior: smooth;
196+
}
194197
body {
195198
@apply bg-background text-foreground;
196199
}

‎apps/frontend/src/app/layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import './globals.css';
22

33
import type { Metadata } from 'next';
44

5+
import { Footer } from '@/components/layout/footer';
56
import { Toaster } from '@/components/ui/sonner';
67
import { isDevelopment } from '@/lib/env';
78
import { Providers } from '@/providers';
@@ -18,9 +19,12 @@ export default function RootLayout({
1819
}>) {
1920
return (
2021
<html lang="en" suppressHydrationWarning>
21-
<body className={isDevelopment() ? 'debug-screens' : ''}>
22+
<body
23+
className={`flex min-h-screen flex-col ${isDevelopment() ? 'debug-screens' : ''}`}
24+
>
2225
<Providers>
2326
{children}
27+
<Footer />
2428
<Toaster />
2529
</Providers>
2630
</body>

‎apps/frontend/src/app/page.tsx‎

Lines changed: 62 additions & 211 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,14 @@
11
import { type HealthCheck } from '@repo/shared-types';
22
import { formatDateTime } from '@repo/shared-utils';
3-
import {
4-
Activity,
5-
ArrowRight,
6-
Bot,
7-
Boxes,
8-
Code2,
9-
GitBranch,
10-
Github,
11-
Info,
12-
PackageOpen,
13-
Rocket,
14-
Shield,
15-
Terminal,
16-
TestTube,
17-
Workflow,
18-
Zap,
19-
} from 'lucide-react';
3+
import { Activity, ArrowRight, Boxes, Github, Terminal } from 'lucide-react';
204
import Link from 'next/link';
215

6+
import { CommandBlock } from '@/components/landing/command-block';
7+
import { FeatureCard } from '@/components/landing/feature-card';
8+
import { Logo } from '@/components/landing/logo';
229
import { AnimatedThemeToggler } from '@/components/ui/animated-theme-toggler';
2310
import { Button } from '@/components/ui/button';
24-
import {
25-
Tooltip,
26-
TooltipContent,
27-
TooltipTrigger,
28-
} from '@/components/ui/tooltip';
11+
import { features, quickStartCommands, techStack } from '@/config/landing-data';
2912
import { siteConfig } from '@/config/site';
3013

3114
async function getHealth(): Promise<HealthCheck | null> {
@@ -51,7 +34,7 @@ export default async function Home() {
5134
const backendPort = new URL(apiUrl).port || '8080';
5235

5336
return (
54-
<main className="bg-background relative flex min-h-screen flex-col items-center justify-center p-8">
37+
<main className="bg-background relative flex flex-1 flex-col items-center justify-center p-8 pb-0">
5538
<div className="absolute right-8 top-8 flex items-center gap-2">
5639
<Button asChild variant="default">
5740
<a
@@ -68,21 +51,37 @@ export default async function Home() {
6851
</div>
6952
<div className="w-full max-w-5xl space-y-12">
7053
<div className="space-y-6 text-center">
71-
<h1 className="text-foreground text-6xl font-semibold tracking-tight">
72-
Arawn
73-
</h1>
74-
<p className="text-muted-foreground text-lg">
75-
Production-ready TypeScript monorepo template
76-
</p>
77-
<div className="flex justify-center pt-2">
54+
<div className="flex justify-center">
55+
<Logo className="h-20 w-auto" />
56+
</div>
57+
<div className="space-y-3">
58+
<h1 className="text-foreground text-5xl font-semibold tracking-tight">
59+
Ship production apps faster
60+
</h1>
61+
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">
62+
Production-ready full-stack TypeScript monorepo with Next.js,
63+
NestJS, Turborepo and other modern technologies.
64+
</p>
65+
</div>
66+
<div className="flex flex-wrap items-center justify-center gap-3 pt-2">
7867
<Button
7968
asChild
8069
size="lg"
8170
className="group shadow-lg transition-all hover:scale-105 hover:shadow-xl"
71+
>
72+
<Link href="#quick-start" className="flex items-center gap-2">
73+
Quick Start
74+
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
75+
</Link>
76+
</Button>
77+
<Button
78+
asChild
79+
size="lg"
80+
variant="outline"
81+
className="group transition-all hover:scale-105"
8282
>
8383
<Link href="/examples" className="flex items-center gap-2">
8484
View Live Examples
85-
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
8685
</Link>
8786
</Button>
8887
</div>
@@ -149,93 +148,14 @@ export default async function Home() {
149148
</div>
150149
)}
151150
<div className="grid gap-6 md:grid-cols-3">
152-
<div className="border-border bg-card rounded-lg border p-6">
153-
<Rocket className="text-foreground mb-3 h-5 w-5" />
154-
<h3 className="text-card-foreground mb-2 text-base font-medium">
155-
Production Ready
156-
</h3>
157-
<p className="text-muted-foreground text-sm leading-relaxed">
158-
Helmet security, rate limiting, CORS, and validated environment
159-
configs
160-
</p>
161-
</div>
162-
<div className="border-border bg-card rounded-lg border p-6">
163-
<Zap className="text-foreground mb-3 h-5 w-5" />
164-
<h3 className="text-card-foreground mb-2 text-base font-medium">
165-
Fast Development
166-
</h3>
167-
<p className="text-muted-foreground text-sm leading-relaxed">
168-
Turborepo for optimized builds and pnpm for efficient package
169-
management
170-
</p>
171-
</div>
172-
<div className="border-border bg-card rounded-lg border p-6">
173-
<Shield className="text-foreground mb-3 h-5 w-5" />
174-
<h3 className="text-card-foreground mb-2 text-base font-medium">
175-
Type Safe
176-
</h3>
177-
<p className="text-muted-foreground text-sm leading-relaxed">
178-
Zod schemas with TypeScript for runtime and compile-time safety
179-
</p>
180-
</div>
181-
<div className="border-border bg-card rounded-lg border p-6">
182-
<Workflow className="text-foreground mb-3 h-5 w-5" />
183-
<h3 className="text-card-foreground mb-2 text-base font-medium">
184-
Database Ready
185-
</h3>
186-
<p className="text-muted-foreground text-sm leading-relaxed">
187-
Prisma ORM with PostgreSQL, migrations, and Docker setup included
188-
</p>
189-
</div>
190-
<div className="border-border bg-card rounded-lg border p-6">
191-
<Code2 className="text-foreground mb-3 h-5 w-5" />
192-
<h3 className="text-card-foreground mb-2 text-base font-medium">
193-
Modern UI Components
194-
</h3>
195-
<p className="text-muted-foreground text-sm leading-relaxed">
196-
shadcn/ui with Radix primitives, Tailwind v4, dark mode, and
197-
Framer Motion
198-
</p>
199-
</div>
200-
<div className="border-border bg-card rounded-lg border p-6">
201-
<TestTube className="text-foreground mb-3 h-5 w-5" />
202-
<h3 className="text-card-foreground mb-2 text-base font-medium">
203-
Comprehensive Testing
204-
</h3>
205-
<p className="text-muted-foreground text-sm leading-relaxed">
206-
Vitest for unit and integration tests with coverage reports across
207-
all packages
208-
</p>
209-
</div>
210-
<div className="border-border bg-card rounded-lg border p-6">
211-
<PackageOpen className="text-foreground mb-3 h-5 w-5" />
212-
<h3 className="text-card-foreground mb-2 text-base font-medium">
213-
Shared Packages
214-
</h3>
215-
<p className="text-muted-foreground text-sm leading-relaxed">
216-
Types, utilities, and config shared across frontend and backend
217-
</p>
218-
</div>
219-
<div className="border-border bg-card rounded-lg border p-6">
220-
<GitBranch className="text-foreground mb-3 h-5 w-5" />
221-
<h3 className="text-card-foreground mb-2 text-base font-medium">
222-
CI/CD Ready
223-
</h3>
224-
<p className="text-muted-foreground text-sm leading-relaxed">
225-
GitHub Actions workflow with automated testing, type checking, and
226-
linting
227-
</p>
228-
</div>
229-
<div className="border-border bg-card rounded-lg border p-6">
230-
<Bot className="text-foreground mb-3 h-5 w-5" />
231-
<h3 className="text-card-foreground mb-2 text-base font-medium">
232-
AI-Assisted Development
233-
</h3>
234-
<p className="text-muted-foreground text-sm leading-relaxed">
235-
Comprehensive CLAUDE.md enables instant onboarding for AI coding
236-
assistants
237-
</p>
238-
</div>
151+
{features.map((feature) => (
152+
<FeatureCard
153+
key={feature.title}
154+
iconName={feature.iconName}
155+
title={feature.title}
156+
description={feature.description}
157+
/>
158+
))}
239159
</div>
240160

241161
<div className="border-border bg-card rounded-lg border p-8">
@@ -244,106 +164,37 @@ export default async function Home() {
244164
<span>Tech Stack</span>
245165
</h2>
246166
<div className="grid gap-x-12 gap-y-8 md:grid-cols-2">
247-
<div>
248-
<h3 className="text-card-foreground mb-4 text-sm font-medium">
249-
Frontend
250-
</h3>
251-
<ul className="text-muted-foreground space-y-2.5 text-sm">
252-
<li>Next.js 15 (App Router)</li>
253-
<li>React 19</li>
254-
<li>TypeScript 5</li>
255-
<li>Tailwind CSS v4</li>
256-
<li>shadcn/ui + Radix UI</li>
257-
<li>TanStack Query v5</li>
258-
<li>Jotai</li>
259-
<li>React Hook Form + Zod</li>
260-
<li>Framer Motion</li>
261-
<li>Sonner (Toasts)</li>
262-
<li>next-themes (Dark mode)</li>
263-
</ul>
264-
</div>
265-
<div>
266-
<h3 className="text-card-foreground mb-4 text-sm font-medium">
267-
Backend
268-
</h3>
269-
<ul className="text-muted-foreground space-y-2.5 text-sm">
270-
<li>NestJS 11</li>
271-
<li>TypeScript 5</li>
272-
<li>Prisma 6 (ORM)</li>
273-
<li>PostgreSQL 17</li>
274-
<li>Zod v4 (Validation)</li>
275-
<li>Swagger + Scalar (API Docs)</li>
276-
<li>Helmet (Security)</li>
277-
<li>Rate Limiting (@nestjs/throttler)</li>
278-
<li>CORS</li>
279-
</ul>
280-
</div>
281-
<div>
282-
<h3 className="text-card-foreground mb-4 text-sm font-medium">
283-
Shared Packages
284-
</h3>
285-
<ul className="text-muted-foreground space-y-2.5 text-sm">
286-
<li>Zod Schemas</li>
287-
<li>Utility Functions</li>
288-
<li>Environment Config (dotenv-flow)</li>
289-
<li>Type Definitions</li>
290-
</ul>
291-
</div>
292-
<div>
293-
<h3 className="text-card-foreground mb-4 text-sm font-medium">
294-
DevOps
295-
</h3>
296-
<ul className="text-muted-foreground space-y-2.5 text-sm">
297-
<li>Turborepo</li>
298-
<li>pnpm Workspaces</li>
299-
<li>Vitest (Testing)</li>
300-
<li>GitHub Actions CI</li>
301-
<li>ESLint 9 + Prettier</li>
302-
<li>Husky + lint-staged</li>
303-
<li>CLAUDE.md (AI Context)</li>
304-
</ul>
305-
</div>
167+
{Object.values(techStack).map((stack) => (
168+
<div key={stack.title}>
169+
<h3 className="text-card-foreground mb-4 text-sm font-medium">
170+
{stack.title}
171+
</h3>
172+
<ul className="text-muted-foreground space-y-2.5 text-sm">
173+
{stack.items.map((item) => (
174+
<li key={item}>{item}</li>
175+
))}
176+
</ul>
177+
</div>
178+
))}
306179
</div>
307180
</div>
308181

309-
<div className="border-border bg-muted rounded-lg border p-8">
182+
<div
183+
id="quick-start"
184+
className="border-border bg-muted rounded-lg border p-8"
185+
>
310186
<div className="mb-6 flex items-center gap-3">
311187
<Terminal className="text-foreground h-5 w-5" />
312188
<h2 className="text-foreground text-xl font-medium">Quick Start</h2>
313189
</div>
314-
<div className="space-y-3 font-mono text-sm">
315-
<div className="border-border bg-card text-card-foreground rounded-md border px-4 py-3">
316-
<span className="text-muted-foreground">$</span> pnpm install
317-
</div>
318-
<div className="border-border bg-card text-card-foreground flex items-center justify-between gap-3 rounded-md border px-4 py-3">
319-
<span>
320-
<span className="text-muted-foreground">$</span> pnpm
321-
init:project
322-
</span>
323-
<Tooltip>
324-
<TooltipTrigger asChild>
325-
<button
326-
type="button"
327-
className="text-muted-foreground hover:text-foreground transition-colors"
328-
aria-label="What does init:project do?"
329-
>
330-
<Info className="h-4 w-4" />
331-
</button>
332-
</TooltipTrigger>
333-
<TooltipContent
334-
side="right"
335-
className="max-w-xs"
336-
sideOffset={8}
337-
>
338-
Automated setup: checks prerequisites, creates environment
339-
files, starts Docker containers, runs database migrations, and
340-
optionally seeds data
341-
</TooltipContent>
342-
</Tooltip>
343-
</div>
344-
<div className="border-border bg-card text-card-foreground rounded-md border px-4 py-3">
345-
<span className="text-muted-foreground">$</span> pnpm dev
346-
</div>
190+
<div className="space-y-3">
191+
{quickStartCommands.map((cmd) => (
192+
<CommandBlock
193+
key={cmd.command}
194+
command={cmd.command}
195+
tooltipContent={cmd.tooltip}
196+
/>
197+
))}
347198
</div>
348199
{isLocalDev && (
349200
<div className="mt-6 flex flex-wrap items-center justify-center gap-2">

0 commit comments

Comments
 (0)