Bright Energy. Bright Future - I am building a website for a solar company. FRATER ENERGY AFRICA LIMITED.
Generated Prompt
## APPLICATION OVERVIEW Frater Energy Africa Limited’s website is a single-page application designed to showcase the company’s mission of providing sustainable solar energy solutions. The website will present key information including the company's vision, mission, core services, product portfolio, project roadmap, target market, technology partners, and licensing and certifications, while enabling users to schedule meetings through a floating Calendly button. ## CORE FEATURES 1. **About the Company**: A concise section that introduces Frater Energy Africa Limited, detailing its values and commitment to renewable energy. 2. **Vision & Mission**: Clearly stated vision and mission statements to communicate the company's goals and aspirations. 3. **Core Services**: A description of the main services offered by the company, highlighting the benefits of solar energy solutions. 4. **Product Portfolio**: A showcase of solar products available, including specifications and benefits, allowing users to explore offerings. 5. **Project Roadmap**: A visual timeline depicting the company's upcoming projects and milestones. 6. **Contact Us**: A dedicated section for users to get in touch, featuring a floating button for scheduling calls or Google Meet meetings via Calendly. ## DESIGN SPECIFICATIONS - **Visual Style**: Minimalist design emphasizing a clean and simple aesthetic with ample white space. - **Color Mode**: Light theme with dark text on light backgrounds, ensuring high readability and contrast. - **Layout**: A vertical scroll layout with distinct sections for each feature. Each section will have a full-width background to enhance visual separation and flow. - **Typography**: Utilize sans-serif fonts for a modern look. Headings should be bold and prominent, while body text should maintain a standard size for readability. Suggested font choices include: - Headings: Montserrat, bold - Body: Open Sans, regular ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS for utility-first styling to ensure a responsive and adaptive layout. - **UI Components**: Use shadcn/ui components to maintain consistency and enhance user experience. - **State Management**: Utilize React context for managing global states if necessary. ## IMPLEMENTATION STEPS 1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui. 2. **Create Layout Structure**: Develop a single-page layout using React components for each section (About, Vision, Mission, etc.). 3. **Implement Navigation**: Add smooth scrolling navigation links that jump to each section of the page. 4. **Design Sections**: Style each section using Tailwind CSS, ensuring uniformity and alignment with the minimalist aesthetic. 5. **Integrate Calendly**: Add a floating button for scheduling meetings that opens the Calendly interface when clicked. 6. **Optimize for Responsiveness**: Test the application on different devices and screen sizes to ensure a seamless user experience. 7. **Deploy**: Host the website on a reliable platform and ensure all links and functionalities are working correctly. ## USER EXPERIENCE Users will experience a streamlined journey through the website, beginning with a welcoming introduction to Frater Energy Africa Limited. The layout will facilitate easy navigation, allowing users to smoothly transition between sections. The floating Calendly button will provide a hassle-free way to schedule meetings, ensuring potential clients can easily connect with the company. The minimalist design will offer a distraction-free environment, focusing on content and user engagement.
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!
