Prompt Drop this into v0
Generated Prompt
## APPLICATION OVERVIEW Build a single-page marketing website for **ATTUNED**, a premium subscription-based visual studio specializing in architectural-grade editorial imagery for sculptural objects. The website will showcase the studio's offerings, communicate its unique approach, and drive conversions through a streamlined user experience focused on elegance and simplicity. ## CORE FEATURES 1. **Hero Section**: A full viewport display featuring the brand name "ATTUNED" prominently, accompanied by a subtle tagline and a clear call-to-action button labeled "Access". 2. **Image Grid**: An asymmetric 3-column layout showcasing the studio’s work, featuring placeholders for different types of imagery without captions or overlays. 3. **What This Is**: Informative section detailing the studio's services, emphasizing the unique aspects of the production process and the absence of revisions or custom briefs. 4. **How It Works**: A clear, concise breakdown of the subscription process in three simple steps, guiding users through subscribing, submitting objects, and receiving images. 5. **Scope**: A section clarifying the range of objects the studio works with, establishing boundaries for potential clients. 6. **FAQ**: Accordion-style or flat list of common questions addressing service specifics, helping users understand the offering without confusion. 7. **Footer**: Minimalist footer displaying the brand name and tagline, with no additional navigation or social links to maintain focus. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist - Clean and simple design with generous white space, focusing on typography and visual hierarchy. - **Color Mode**: Light theme with dark text on light backgrounds, using warm off-white and deep charcoal for contrast. - **Layout**: Asymmetric grid structure with full-bleed image sections alternating with typographic content, ensuring each section breathes and maintains clarity. - **Typography**: - Display: High-contrast serif fonts such as Cormorant Garamond or Freight Display for hero sections. - Body: A restrained grotesque like Suisse Int’l or GT America for body text, ensuring readability and elegance. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for utility-first styling - **UI Components**: shadcn/ui for accessible and customizable components - **State Management**: Not required for a single-page static layout ## IMPLEMENTATION STEPS 1. **Set Up Project**: - Initialize a new React project with TypeScript. - Install Tailwind CSS and configure it for the project. - Set up shadcn/ui for UI components. 2. **Create Hero Section**: - Implement a full viewport height section with centered text using the specified typography. - Add the CTA button linking to the Stripe checkout URL. 3. **Develop Image Grid**: - Structure a 3-column grid layout with image placeholders for “STUDIO PORTRAIT,” “MATERIAL STUDY,” and “ARCHITECTURAL CONTEXT”. 4. **Build Content Sections**: - Create sections for “What This Is,” “How It Works,” “Scope,” and “FAQ,” ensuring content is aligned to the left and adheres to the specified typography and layout guidelines. 5. **Design Footer**: - Implement a minimal footer with the brand name and tagline, ensuring no additional links or distractions. 6. **Add Subtle Motion Effects**: - Implement fade-in effects for text sections on scroll, ensuring smooth transitions without overwhelming the user experience. 7. **Test Responsiveness**: - Ensure the layout stacks appropriately on mobile devices while maintaining the visual hierarchy and typography scale. ## USER EXPERIENCE Users will land on a visually striking hero section that immediately communicates the brand's identity and offering. The clear CTA encourages immediate action. As users scroll, they encounter a thoughtfully designed image grid, followed by concise informational sections that guide them through understanding the service. The FAQ section addresses common inquiries, enhancing confidence in the offering. The overall experience is seamless, elegant, and devoid of unnecessary distractions, aligning perfectly with the silent luxury tone of ATTUNED.
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!
