Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Frater Energy Africa Limited is a one-page web application designed to present the company’s mission and vision while showcasing its core services and product offerings. The site will serve as a digital brochure, providing essential information about the company and facilitating user engagement through integrated meeting scheduling.

## CORE FEATURES
1. **Company Overview**: A dedicated section detailing the company’s background, vision, and mission to inform visitors about Frater Energy’s purpose and commitment to solar energy.
2. **Core Services**: An outline of the primary services offered, highlighting the expertise and solutions provided by the company.
3. **Product Portfolio**: A showcase of solar products available, including specifications and benefits, allowing users to understand the offerings at a glance.
4. **Project Roadmap**: A visual representation of current and upcoming projects, demonstrating the company's growth and future plans in the solar energy sector.
5. **Contact & Scheduling**: A contact form alongside a floating button for scheduling meetings via Calendly, including options for Google Meet or phone calls.
6. **Technology Partners and Certifications**: A section that lists partners and relevant certifications to establish credibility and trust.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean layout, ample white space, and a focus on typography to enhance readability and user engagement.
- **Color Mode**: Light theme with dark text on light backgrounds, utilizing a calming shade of blue as the primary accent color.
- **Layout**: The one-page layout will feature smooth scrolling between sections with parallax effects for depth. Each section will be clearly delineated, ensuring a seamless flow of information.
- **Typography**: Use a modern sans-serif font for headings (e.g., Montserrat) and a legible serif font for body text (e.g., Lora). Emphasize headings with larger font sizes and appropriate line spacing for clarity.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for robust application structure and type safety.
- **Styling**: Tailwind CSS for utility-first styling, ensuring responsive design and maintainability.
- **UI Components**: Utilize shadcn/ui for consistent and accessible components.
- **State Management**: Use React Context for managing global state if necessary.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React application with TypeScript using Create React App.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Layout**: Structure the one-page layout with sections for each core feature, ensuring smooth scrolling functionality.
4. **Design Navigation**: Implement a responsive navigation bar that transforms into a mobile sheet with a blue background and large text, sliding in from the side.
5. **Add Content**: Populate each section with relevant information about the company, services, products, and project roadmap.
6. **Integrate Calendly**: Implement the floating button for meeting scheduling that opens the Calendly interface, ensuring it is accessible and user-friendly.
7. **Test Responsiveness**: Ensure that the layout adapts seamlessly across devices, paying attention to mobile navigation and scrolling behavior.

## USER EXPERIENCE
The user experience will focus on clarity and ease of navigation. Users will smoothly scroll through sections, with animations kept subtle to avoid distraction. The navigation bar will allow quick access to different sections, and the integrated meeting scheduling will facilitate direct communication, enhancing engagement and conversion potential. Each interaction will be intuitive, with a clean layout guiding users to discover information effortlessly.