DesignLayer

Garden Prompt Hero

Back to components
Garden Prompt Hero React component

What is this?

A one-screen business AI hero over grassy hills and blue sky: brand and nav on top, headline and a prompt field in the center. Swap the copy and background photo, then drop it onto an enterprise AI landing page.

Read the guide

More components

Browse all →
Floating Poster Orbit
Floating Poster Orbit
Insight Fan Cards
Insight Fan Cards
Destination Coverflow Hero
Destination Coverflow Hero
Glass Orb Hero
Glass Orb Hero
Green Scroll Hero
Green Scroll Hero
Golden Oracle Hero
Golden Oracle Hero
Component

Garden Prompt Hero

A one-screen business AI hero over grassy hills and blue sky: brand and nav on top, headline and a prompt field in the center. Swap the copy and background photo, then drop it onto an enterprise AI landing page.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Standard motion
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Responsive on phone, tablet, and desktop
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0