पूर्ण-स्टैक ई-कॉमर्स वेबसाइट को शुरू से बनाएं

एक वरिष्ठ फुल-स्टैक वेब डेवलपर और UI/UX डिजाइनर के रूप में कार्य करें। मैं चाहता हूँ कि आप एक आधुनिक, पेशेवर, पूरी तरह से रिस्पॉन्सिव ई-कॉमर्स वेबसाइट शुरू से बनाएं। ### लक्ष्य एक स्वच्छ और आकर्षक ऑनलाइन शॉपिंग वेबसाइट बनाएं जो किसी वास्तविक व्यवसाय के लिए उपयुक्त हो। वेबसाइट मोबाइल, टैबलेट और डेस्कटॉप पर सुचारू रूप से काम करनी चाहिए। ### तकनीक उपयोग करें: * HTML5 * CSS3 * JavaScript * एक ही HTML फ़ाइल का उपयोग करें जिसमें CSS और JavaScript शामिल हों। * जब तक बिल्कुल आवश्यक न हो बैकएंड का उपयोग न करें। * स्वच्छ, सुव्यवस्थित, शुरुआती-अनुकूल कोड का उपयोग करें। ### वेबसाइट सुविधाएँ 1. **हेडर/नेवबार** * पेशेवर लोगो/स्टोर का नाम * होम * शॉप * कैटेगरी * अबाउट * कॉन्टैक्ट * सर्च आइकन/बार * शॉपिंग कार्ट आइकन जिसमें आइटम की संख्या हो * लॉगिन/रजिस्टर बटन 2. **हीरो सेक्शन** * बड़ा प्रमोशनल बैनर * आकर्षक हेडलाइन * संक्षिप्त विवरण * "शॉप नाउ" बटन * आधुनिक ई-कॉमर्स डिज़ाइन 3. **कैटेगरी** आकर्षक कैटेगरी कार्ड बनाएं जैसे: * इलेक्ट्रॉनिक्स * फैशन * जूते * एक्सेसरीज़ * ब्यूटी * होम और लिविंग 4. **प्रोडक्ट सेक्शन** कई प्रोडक्ट कार्ड प्रदर्शित करें जिनमें शामिल हों: * प्रोडक्ट इमेज * प्रोडक्ट का नाम * रेटिंग * मूल कीमत * छूट वाली कीमत * छूट प्रतिशत * "कार्ट में जोड़ें" बटन * "अभी खरीदें" बटन * विशलिस्ट/हार्ट बटन 5. **प्रोडक्ट सर्च और फ़िल्टर** कार्यशील JavaScript कार्यक्षमता जोड़ें: * प्रोडक्ट सर्च * कैटेगरी फ़िल्टरिंग * कीमत के अनुसार सॉर्टिंग * रेटिंग के अनुसार सॉर्टिंग 6. **शॉपिंग कार्ट** एक कार्यशील कार्ट बनाएं जहाँ उपयोगकर्ता: * प्रोडक्ट जोड़ सकें * प्रोडक्ट हटा सकें * मात्रा बढ़ा/घटा सकें * सबटोटल देख सकें * कुल कीमत देख सकें * कार्ट साफ़ कर सकें 7. **चेकआउट** एक पेशेवर चेकआउट पेज/सेक्शन बनाएं जिसमें: * ग्राहक का नाम * ईमेल * फोन * पता * शहर * राज्य * पिन कोड * भुगतान विधि * ऑर्डर सारांश * ऑर्डर प्लेस करें बटन 8. **विशेष सेक्शन** जोड़ें: * फ्लैश सेल * बेस्ट सेलर्स * नई आवक * ग्राहक समीक्षाएँ * न्यूज़लेटर सब्सक्रिप्शन 9. **फुटर** शामिल करें: * स्टोर के बारे में * त्वरित लिंक * ग्राहक सहायता * प्राइवेसी पॉलिसी * नियम और शर्तें * सोशल मीडिया आइकन * कॉपीराइट ### डिज़ाइन आवश्यकताएँ * प्रीमियम और आधुनिक UI * स्वच्छ टाइपोग्राफी * आकर्षक प्रोडक्ट कार्ड * स्मूद होवर एनिमेशन * रिस्पॉन्सिव लेआउट * मोबाइल-फ्रेंडली हैमबर्गर मेनू * अच्छी स्पेसिंग और अलाइनमेंट * पेशेवर रंग योजना * स्मूद स्क्रॉलिंग * सुलभ बटन और फॉर्म * वेबसाइट को धीमा किए बिना सूक्ष्म एनिमेशन जोड़ें ### JavaScript आवश्यकताएँ निम्नलिखित सुविधाओं को वास्तव में काम करने योग्य बनाएं: * सर्च * कैटेगरी फ़िल्टरिंग * सॉर्टिंग * कार्ट में जोड़ें * कार्ट से हटाएं * मात्रा नियंत्रण * कार्ट कुल गणना * विशलिस्ट बटन * मोबाइल नेविगेशन * चेकआउट फॉर्म सत्यापन * ऑर्डर पुष्टिकरण संदेश सार्वजनिक रूप से सुलभ इमेज URL से नमूना प्रोडक्ट और यथार्थवादी प्रोडक्ट इमेज का उपयोग करें। ### महत्वपूर्ण मुझे केवल स्पष्टीकरण न दें। **पूर्ण कार्यशील वेबसाइट कोड बनाएं।** पूरा कोड एक HTML फ़ाइल में लौटाएं जिसे मैं `index.html` के रूप में सहेज सकता हूँ और सीधे ब्राउज़र में खोल सकता हूँ। अंतिम परिणाम को बुनियादी डेमो के बजाय एक पेशेवर वास्तविक दुनिया की ई-कॉमर्स वेबसाइट जैसा बनाएं।