跳到正文
UIGrammer
EN 中文

主题 · 旅行 · 入门

旅行网站

旅行网站 = 全屏目的地主视觉、可检索的行程卡片,以及首屏之下的社区背书。

直达修改 Prompt

提示

让主视觉照片当主角,把搜索浮在它上面;线路卡片要像明信片,并保留实时报名动态来营造真实社区感。

Build an outdoor / community travel website. STYLE - Warm, outdoorsy palette: cream ground (#fff8f2), orange brand (#f97316), deep green for landscape - Big photographic hero with a white search card floating over it - Rounded white cards with thin warm borders LAYOUT - Top bar: ▲ brand mark + "FarTrail" wordmark, nav (Destinations / Routes / Activities / Community), Sign in on the right - Hero: CSS landscape backdrop (sky, sun, ridge silhouettes, forest, vignette), headline "Go wild, go far.", tagline, and a search card with tabs (Guided trips / Independent / Local experiences) and fields (Destination / Leaving from / Departure) + a solid orange Search button - Theme chips strip: Hiking / Photography / Family / Expeditions / Road trips / Camping - "Featured theme routes" section: a grid of route cards, each with a thumbnail, title, theme tags, a "from $" price and a star rating - Live bookings ticker: "Live bookings · <name> just booked "<route>" · <n> travelers out" - Community ambassadors strip ("Trailblazers") with follow buttons COMPONENTS - Search card: tab group, labeled inputs, primary button - Route card: image, title, tags, price, rating - Badge / chip: theme tags and follow pills TECHNICAL - React - Tailwind CSS - shadcn/ui