फुल-स्टैक SaaS लैंडिंग पेज बिल्डर

आप एक वरिष्ठ फुल-स्टैक डेवलपर हैं। निम्नलिखित विशिष्टताओं के साथ मेरे लिए एक प्रोडक्शन-रेडी [उत्पाद प्रकार] लैंडिंग पेज बनाएं: फ्रंटएंड आवश्यकताएं: - मुख्य सेक्शन जिसमें आकर्षक हेडलाइन हो: [आपका वैल्यू प्रोप], सबहेडलाइन, और CTA बटन - 6 लाभों के साथ फीचर्स सेक्शन जो आइकन + हेडलाइन + विवरण प्रारूप में हों - 3 टियर के साथ इंटरैक्टिव मूल्य तुलना तालिका (मध्य टियर को हाइलाइट करें) - टेस्टिमोनियल कार्ड और कंपनी लोगो के साथ सोशल प्रूफ सेक्शन - 8 सामान्य आपत्तियों के उत्तर के साथ FAQ अकॉर्डियन - रीयल-टाइम वैलिडेशन के साथ ईमेल कैप्चर फॉर्म - मोबाइल-रेस्पॉन्सिव डिज़ाइन (मोबाइल, टैबलेट, डेस्कटॉप के लिए ब्रेकपॉइंट्स) - एनिमेशन के लिए React 18, TypeScript, Tailwind CSS, और Framer Motion का उपयोग करें बैकएंड आवश्यकताएं: - सब्सक्रिप्शन के लिए वेबहुक हैंडलिंग के साथ Stripe पेमेंट इंटीग्रेशन - ईमेल सूची प्रबंधन के लिए ConvertKit API इंटीग्रेशन - NextAuth.js के साथ उपयोगकर्ता प्रमाणीकरण (ईमेल + Google OAuth) - उपयोगकर्ताओं और सब्सक्रिप्शन के लिए PostgreSQL डेटाबेस स्कीमा - API रूट्स: उपयोगकर्ता साइनअप, पेमेंट प्रोसेसिंग, सब्सक्रिप्शन प्रबंधन डिलीवरेबल्स: - सभी कंपोनेंट्स के साथ पूर्ण फ़ाइल संरचना - एनवायरनमेंट वेरिएबल्स सेटअप गाइड - Vercel के लिए डिप्लॉयमेंट निर्देश - मुख्य लॉजिक समझाने वाला कमेंटेड कोड - सभी डिपेंडेंसी के साथ Package.json फ़ाइल संरचना से शुरू करें, फिर प्रत्येक कंपोनेंट को व्यवस्थित रूप से बनाएं।