Travel Brochure
A beautiful travel card layout for real or fantasy destinations.
LAPUTA, CASTLE IN THE SKY
Where dreams touch the clouds
"A floating city... held together by ancient magic and pure hearts."
🛕 Ancient Architecture:
The entire city is a mechanical marvel powered by crystals.
🌿 Nature's Embrace:
Lush gardens, flocks of doves, and singing stones await every explorer.
🌀 Local Legends:
Legends speak of robots tending to the trees and protecting lost secrets.
Skypia Region
Ethereal / Windy
Crystal Coins
Installation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import Image from "next/image"
import { cn } from "@/lib/utils"
interface TravelBrochureProps {
destination: string
tagline?: string
imageUrl?: string
quote?: string
columns: string[]
footer?: {
country?: string
climate?: string
currency?: string
}
className?: string
}
export function TravelBrochure({
destination,
tagline = "Discover the Wonders",
imageUrl,
quote,
columns,
footer = {},
className,
}: TravelBrochureProps) {
return (
<div
className={cn(
"w-full max-w-4xl mx-auto border border-black bg-[#fefcf8]",
className
)}
>
<div className="border-b border-black text-center px-4 py-3 bg-[#faf5e4] font-serif">
<h1 className="text-3xl md:text-5xl font-extrabold tracking-tight uppercase">
{destination}
</h1>
<p className="text-md md:text-xl italic text-muted-foreground mt-1">
{tagline}
</p>
</div>
{imageUrl && (
<div className="border-b border-black">
<div className="relative w-full aspect-[3/2]">
<Image
src={imageUrl}
alt={`${destination} image`}
fill
className="object-cover grayscale"
/>
</div>
</div>
)}
{quote && (
<div className="border-b border-black p-6 text-center font-serif text-lg italic">
<p>"{quote}"</p>
</div>
)}
<div className={`grid grid-cols-1 sm:grid-cols-${Math.min(columns.length, 3)} border-b border-black`}>
{columns.map((col, index) => (
<div
key={index}
className={`p-6 font-serif leading-relaxed text-center text-base sm:text-lg ${index !== columns.length - 1 ? "sm:border-r border-black" : ""}`}
>
{col.split("\n").map((line, i) => (
<p key={i} className="mb-3">{line}</p>
))}
</div>
))}
</div>
{(footer.country || footer.climate || footer.currency) && (
<div className="flex justify-between text-xs font-serif uppercase tracking-wider p-4">
<div>{footer.country}</div>
<div>{footer.climate}</div>
<div>{footer.currency}</div>
</div>
)}
</div>
)
}Props
| Prop | Type | Description |
|---|---|---|
| destination | string | Main destination title (required) |
| tagline | string | Optional subtitle under destination |
| imageUrl | string | Optional hero image URL |
| quote | string | Optional center quote below image |
| columns | string[] | Array of column content (max 3 shown) |
| footer | object | Country, climate, and currency object |
| className | string | Tailwind utility classes |