opal-design

byProject Manager Savorka Solar

Act as a senior UI/UX designer and frontend engineer with expertise in building high-conversion, modern, and scalable web applications. I want you to design and generate a fully responsive, premium-quality frontend for an Indian solar company named Savorka Solar, operating in the renewable energy sector. 🎯 DESIGN GOALS Highly interactive, modern, and visually appealing UI Clean, professional, and corporate look (similar to top renewable companies) Smooth animations and transitions Mobile-first and fully responsive design Focus on lead generation + quotation conversion Use eco-friendly color palette (greens, blues, whites, gradients) 🧱 WEBSITE STRUCTURE 🔹 1. HERO SECTION (Top Section) Display company logo (I will provide) Add a powerful, emotional tagline promoting renewable energy Example: "Powering a Greener Tomorrow with Smart Solar Solutions" Background: solar panels / sunlight / clean energy visuals CTA Button: 👉 “Get Your Solar Quote” 🔹 2. ABOUT US SECTION Short company introduction Highlight: Experience Quality installations Trust & reliability Add a “Download Catalogue” button (PDF download CTA) 🔹 3. SERVICES / QUOTATION SECTION (Core Feature) Create two visually separated cards or tabs: 🏠 A. Residential Solar Quotation Form Include a structured, clean form with validation: Fields: Client Name (text input) Client Contact Number (number input) Installation Location (text input / map optional) System Capacity (kW input) Panel Brand (dropdown – dynamic, I will provide list) Panel Wattage (number input) Inverter Brand (dropdown – dynamic, I will provide list) System Type (dropdown – e.g., On-grid / Off-grid / Hybrid) Structure Type (dropdown): Regular Heighted Super Heighted Buttons: ✅ “Generate Quotation” After generation: 📄 “Download PDF” 🏭 B. Commercial & Industrial Quotation Form Similar UI/UX as residential, but with modified fields: Fields: Client Name Client Contact Number Installation Location System Capacity Panel Brand (dropdown – dynamic) Panel Wattage Inverter Brand (dropdown – dynamic) Structure Type (dropdown): Shed Mounted RCC Mounted Buttons: ✅ Generate Quotation 📄 Download PDF 🎨 UI/UX REQUIREMENTS Use card-based layout Add micro-interactions (hover effects, button animations) Smooth scrolling between sections Use icons for better visual understanding Clean typography (modern sans-serif) Add loading animation for quotation generation Include success confirmation after form submission ⚙️ TECHNICAL EXPECTATIONS Generate code using: HTML5 + CSS3 + JavaScript OR modern framework (React preferred) Component-based architecture Reusable form components Proper state handling for form data Clean and readable code 💡 BONUS FEATURES (if supported) Add solar savings estimate preview Add animated counters (projects completed, capacity installed) Add testimonials section Add WhatsApp contact CTA button 📦 OUTPUT EXPECTED Fully functional frontend code Clean file structure Ready-to-integrate with backend (Google Apps Script / API) Professional-grade UI comparable to top solar companies