Landing page moderna, responsiva e institucional para o deputado estadual Dr.
Generated Prompt
## APPLICATION OVERVIEW
This project is a modern, responsive landing page for State Deputy Dr. Bruno Resende. The landing page aims to establish credibility and foster a connection with the population, all while facilitating lead capture through essential contact forms and social media integration.
## CORE FEATURES
1. **Hero Section**
- A visually engaging slider featuring impactful images and a strong institutional phrase, complemented by a prominent WhatsApp contact button.
2. **About Section**
- A brief introduction to Deputy Dr. Bruno Resende with a "Learn More" button linking to more detailed information.
3. **Highlighted Propositions**
- A text-based overview of key legislative projects, recommendations, and laws, each accompanied by links for further details.
4. **Instagram Integration**
- Automatic display of recent Instagram posts to keep the content dynamic and engaging.
5. **Lead Capture Section**
- A dedicated area for users to subscribe to updates, collecting names, emails, and locations for future communications.
6. **Contact and Suggestion Features**
- Prominent buttons for users to suggest propositions and easily contact the deputy through WhatsApp.
## 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**:
- A single-page layout with sections for Hero, About, Propositions, Instagram Feed, Lead Capture, and Contact.
- Elegant organization with ample spacing to enhance readability and user experience.
## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but can be handled with React's built-in state or context API as needed.
## IMPLEMENTATION STEPS
1. **Set Up Project**
- Initialize a new React project with TypeScript and Tailwind CSS.
- Install necessary dependencies including shadcn/ui for UI components.
2. **Create Layout Structure**
- Develop the main components for each section: Hero, About, Propositions, Instagram Feed, Lead Capture, and Contact.
3. **Implement Hero Section**
- Integrate the image slider with a strong phrase and WhatsApp button using responsive design principles.
4. **Build About Section**
- Create a concise introduction with a "Learn More" button, linking to additional information about the deputy.
5. **Highlight Propositions**
- Structure text-based content for projects, recommendations, and laws, ensuring clear links for further exploration.
6. **Integrate Instagram Feed**
- Use an API call to fetch and display the latest posts from the specified Instagram account.
7. **Develop Lead Capture Form**
- Create a form with fields for name, email, city, and state, along with an "Subscribe" button that integrates with a database or email marketing tool.
8. **Configure Contact Features**
- Implement WhatsApp and suggestion buttons, ensuring they are easily accessible throughout the site.
9. **Test Responsiveness**
- Ensure all sections are responsive and function well on various devices and screen sizes.
10. **Deploy the Landing Page**
- Host the landing page on a suitable platform and perform final testing for performance and user experience.
## USER EXPERIENCE
Users will engage with the landing page through a straightforward navigation experience. The Hero section captures attention immediately, with easy access to contact features. Information is presented clearly, allowing users to understand the deputy's initiatives and connect with him effortlessly. The lead capture form encourages subscription and engagement, fostering a sense of community involvement. The design emphasizes simplicity and clarity, ensuring that users can find the information they need without unnecessary distractions.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!
