Glacier - — Landing Page Hero Rebuild Prompt > One-shot prompt for an AI code generator (Claude Code, Cursor, v0, Bolt, etc.). Paste this entire...
Generated Prompt
```markdown ## APPLICATION OVERVIEW "Glacier" is a minimalist exhibition-style landing page designed to present an art exhibit with a cinematic feel. The page features a full-bleed hero section with a captivating background video and a clear call-to-action, encouraging users to enter the exhibit. The design emphasizes simplicity and typography, creating a visually striking experience that aligns with the theme of ice and time. ## CORE FEATURES 1. **Hero Section**: A full-screen video background with a prominent title and subtitle, inviting users to explore the exhibit. 2. **Brand Lockup**: Clear branding with a faceted ice-gem icon and the text "GLACIER PRESENTS," establishing the identity of the exhibit. 3. **Interactive Navigation**: A floating glass icon dock with icon-only buttons for easy navigation throughout the page. 4. **Call-to-Action Button**: An oval-shaped button labeled "ENTER EXHIBIT," encouraging user engagement. 5. **Footer Bar**: Contains social media links, privacy policy, and navigation instructions, ensuring a comprehensive user experience. 6. **Responsive Design**: Optimized layout for various screen sizes, maintaining visual impact and usability. ## DESIGN SPECIFICATIONS - **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography. - **Color Mode**: Light theme with dark text on light backgrounds. - **Primary Color**: #1978E5 (accent for buttons, links, highlights). - **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements. - **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs. - **Layout**: The main layout features a vertically and horizontally centered hero section with a brand lockup at the top, a large headline, a subtitle, and a call-to-action button. The footer bar is positioned at the bottom with social links and navigation instructions. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: React's useState for handling interactive elements ## IMPLEMENTATION STEPS 1. **Scaffold the Project**: Create a new Vite React-TS project named `glacier`, and install the required dependencies. 2. **Set Up Files**: Overwrite `index.html`, `src/index.css`, `src/App.tsx`, and `src/main.tsx` with the provided content. 3. **Create Components**: Implement `src/components/Navbar.tsx` for the floating navigation and `src/components/Hero.tsx` for the hero section. 4. **Fetch Assets**: Download the hero background video from the specified URL and save it as `public/hero.mp4`. Add a favicon at `public/favicon.svg`. 5. **Implement Tailwind CSS**: Ensure Tailwind CSS is configured properly and imported in `src/index.css`. 6. **Test Responsiveness**: Verify that the layout adjusts correctly on different screen sizes. ## USER EXPERIENCE Upon entering the page, users are greeted by a stunning video background that sets the tone for the exhibit. The brand lockup and headline capture attention immediately, while the call-to-action button invites interaction. The navigation dock provides a seamless way to explore the content, and the footer ensures users have quick access to important links and instructions. The overall experience is designed to be immersive and engaging, reflecting the theme of "Frozen In Time." ```
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
