PNG में export किया गया डेस्कटॉप डिज़ाइन फ़्रेम
क्या सही बना
- पूरा hero: pill लेबल, दो रंगों वाली हेडलाइन, पैराग्राफ़, और भरा हुआ व outline वाला बटन, डिज़ाइन के violet रंग में।
- dashboard कार्ड असली HTML के रूप में: active आइटम वाला sidebar मेन्यू, बकाया रकम, divs से बना bar chart, और हरे, नारंगी और लाल रंग के "Paid", "Due" और "Overdue" बैज वाली तीन इनवॉइस पंक्तियां।
- ग्राहकों के लोगो की पंक्ति, हर नाम टेक्स्ट के रूप में।
हाथ से क्या ठीक करना होगा
- लोगो सिर्फ़ जगह भरने के लिए हैं: Ledgerly का निशान एक आम stacked-layers SVG है, Globex और Northwind में Font Awesome आइकन हैं, और Stark Industries वाली टाइल में bg-dark क्लास है जो पेज में कहीं डिफ़ाइन नहीं है, इसलिए वह दिखती ही नहीं। इन्हें अपने SVG से बदलें।
- pill लेबल का sparkle आइकन fa-sparkles है, जो Font Awesome 5 के free सेट में नहीं है, इसलिए वहां कुछ भी रेंडर नहीं होता।
- 1280 पिक्सल पर इनवॉइस पंक्तियां तंग हैं और INV-0042 दो लाइनों में टूट जाता है। दाएं कॉलम को ज़्यादा जगह दें या तारीख वाला कॉलम छोटा करें।
ledgerly-frame.html (body की शुरुआती लाइनें)
<body class="min-h-screen">
<!-- Navigation -->
<nav class="max-w-7xl mx-auto px-6 py-6 flex items-center justify-between">
<div class="flex items-center space-x-12">
<div class="flex items-center space-x-2">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<svg class="w-5 h-5" fill="white" viewbox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5">
</path>
</svg>
</div>
<span class="text-xl font-bold text-dark">
Ledgerly
</span>
</div>
<div class="hidden md:flex space-x-8 text-muted font-medium">
<a class="hover:text-primary transition" href="#">
Features
</a>
<a class="hover:text-primary transition" href="#">
Pricing
</a>
<a class="hover:text-primary transition" href="#">
Customers
</a>
<a class="hover:text-primary transition" href="#">