Construir um bio site com ia pra um estudio de arquitetura ficticio brasileiro de médio porte, crie nome, foto, uma imagem do profissional, nada...
Generated Prompt
## APPLICATION OVERVIEW This project is a landing page designed for a fictitious Brazilian architecture studio, serving as both a bio site and a mini portfolio. The site will showcase the studio's identity, professional image, and a selection of past projects, while also linking to social media and other relevant platforms. The design will emphasize advanced aesthetics, textures, and animations to create an engaging user experience that captivates potential clients. ## CORE FEATURES 1. **Hero Section**: A visually striking introduction featuring the studio's name, a captivating image of the architect, and a brief tagline that encapsulates the brand's essence. 2. **Bio & Links**: A dedicated section that presents the architect's biography and includes links to social media accounts, the main website, and other relevant online presences. 3. **Mini Portfolio**: A showcase area below the links, displaying thumbnails of completed projects (e.g., houses, barber shops, nail designs) with hover effects leading to detailed views or project descriptions. 4. **Animations & Textures**: Incorporate smooth animations and textured elements throughout the site to enhance visual appeal and provide a modern feel. 5. **Contact Section**: A straightforward contact form that allows potential clients to reach out directly for inquiries or quotes. 6. **Responsive Design**: Ensure the site is fully responsive, providing a seamless experience across devices, from desktops to mobile. ## 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 a vertical flow, starting from the hero section, followed by the bio & links, mini portfolio, and ending with the contact section. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Not specified, as this is a simple landing page without complex state requirements. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript. 2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project. 3. **Create Components**: Develop individual components for the hero section, bio & links, mini portfolio, and contact form. 4. **Implement Layout**: Structure the main layout using a single-page design, ensuring smooth scrolling between sections. 5. **Add Styling**: Apply Tailwind CSS classes to achieve the minimalist aesthetic outlined in the design specifications. 6. **Incorporate Animations**: Use CSS transitions and animations to create engaging effects on hover and scroll events. 7. **Test Responsiveness**: Ensure the site is fully responsive, adjusting styles and layouts for different screen sizes. 8. **Deploy**: Deploy the completed site to a hosting provider for public access. ## USER EXPERIENCE Users will first encounter an eye-catching hero section that introduces the architecture studio. As they scroll down, they will find the architect's biography and links to social media, followed by a visually appealing mini portfolio showcasing past projects. Each project will have interactive elements, encouraging users to engage with the content. The experience will be cohesive and fluid, with animations enhancing the overall aesthetic, making it easy for potential clients to navigate and connect with the studio.
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!
