Tann for Tann - Rolle: Du er en ekspert innen UI/UX-design og frontend-utvikling (React & Tailwind CSS). Du skal lage en moderne,...
Generated Prompt
```markdown ## APPLICATION OVERVIEW Create a modern, conversion-optimized web application for the dental clinic "Tann for Tann." The website aims to build trust and convert visitors into appointment bookings. It will be responsive, ensuring a seamless experience on both mobile and desktop devices. ## CORE FEATURES 1. **Header and Navigation**: A clean header with the clinic's logo on the left, a simple menu, and a prominent "Bestill time" (Book Appointment) button linking to the booking system. 2. **Hero Section**: A visually striking hero section featuring a high-quality image or modern illustration, a clear H1 headline, a value proposition subheading, and a large call-to-action button. 3. **Services Offered**: A grid layout showcasing dental services with icons or illustrations for each service to enhance visual appeal and clarity. 4. **About Us/Team Section**: A professional display of the clinic staff with images and concise text highlighting why patients should choose "Tann for Tann." 5. **Pricing Overview**: A clean, easily scannable table or list of prices, providing clear information without overwhelming text. 6. **Contact & Location**: An integrated Google Maps section, images of the clinic, and essential contact information (address, phone, email) for easy accessibility. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist, clean design emphasizing whitespace, with a professional yet warm aesthetic. - **Color Mode**: Light theme featuring soothing blue tones, white backgrounds, and a soft accent color for calls to action. - **Layout**: Single Page Application feel with a straightforward vertical arrangement, allowing users to scroll through sections seamlessly. - **Typography**: Use a legible sans-serif font for all text, ensuring professional readability. Maintain a clear hierarchy with larger headings and appropriately sized body text. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript for robust development. - **Styling**: Tailwind CSS for utility-first responsive design. - **UI Components**: Utilize shadcn/ui to create consistent, reusable components. - **State Management**: Consider using Context API or Redux if the application requires complex state management. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS. 2. **Create Component Structure**: Develop components for Header, Hero Section, Services, About Us, Pricing, and Contact. 3. **Design Layout**: Implement the layout using Tailwind CSS classes, ensuring responsiveness and adherence to the visual style. 4. **Integrate Booking Link**: Add the "Bestill time" button linking to the booking URL, ensuring it stands out. 5. **Add Content**: Populate the site with content from the existing website, ensuring to maintain a clean and scannable structure. 6. **Implement Animations**: Add subtle animations for hover effects on buttons and fade-in effects upon scrolling to enhance interactivity. 7. **Testing**: Ensure the website functions properly on various devices and browsers, focusing on the mobile-first approach. ## USER EXPERIENCE Users will encounter a welcoming homepage that clearly communicates the clinic's offerings. The navigation is intuitive, guiding users to the information they need. The prominent appointment booking button encourages quick action, while the visually appealing sections foster trust and engagement. The responsive design ensures that users on any device enjoy a smooth browsing experience, with easy access to essential information and a straightforward booking process. ```
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!
