Next.js SaaS डैशबोर्ड ऑनबोर्डिंग फ्लो के साथ

इन निर्देशों का बारीकी से पालन करें: 1. next.js और shadcn सेट अप करें 2. साइनअप और लॉगिन पेज के साथ एक सरल supabase प्रमाणीकरण जोड़ें 3. निम्नलिखित प्रॉम्प्ट के अनुसार फ्रंटएंड सेट अप करें: <frontend prompt> <summary_title> इन आवश्यकताओं के साथ विस्तृत घटक बनाएं: 1. क्लाइंट-साइड घटकों के लिए 'use client' निर्देश का उपयोग करें 2. रिस्पॉन्सिव डिज़ाइन के लिए Tailwind CSS उपयोगिता क्लासेस के साथ स्टाइल करें 3. आइकन के लिए Lucide React का उपयोग करें (lucide-react पैकेज से)। जब तक अनुरोध न किया जाए, अन्य UI लाइब्रेरी का उपयोग न करें 4. जहां उपयुक्त हो, https://t.co/kmBMYKBzp0 से स्टॉक फोटो का उपयोग करें, केवल वैध URL जिनके बारे में आप जानते हैं कि वे मौजूद हैं 5. https://t.co/kmBMYKBzp0 से स्टॉक फोटो सक्षम करने के लिए next.config.js image remotePatterns कॉन्फ़िगर करें 6. रूट layout.tsx पेज बनाएं जो सभी पेजों के लिए आवश्यक नेविगेशन आइटम लपेटता है 7. नेविगेशन तत्वों को उनके सही स्थान पर लागू करना अनिवार्य है जैसे कि बायां साइडबार, शीर्ष हेडर 8. आवश्यक ग्रिड लेआउट को सटीक रूप से लागू करें 9. सही इम्पोर्ट प्रथाओं का पालन करें: - @/ पाथ एलियास का उपयोग करें - कंपोनेंट इम्पोर्ट को व्यवस्थित रखें - नए व्यापक कोड के साथ वर्तमान src/app/page.tsx अपडेट करें - रूट रूट (page.tsx) हैंडलिंग न भूलें - रुकने से पहले आपको पूरा प्रॉम्प्ट पूरा करना होगा ऑनबोर्डिंग फ्लो के साथ आधुनिक SaaS डैशबोर्ड </summary_title> <image_analysis> 1. नेविगेशन तत्व: - बायां साइडबार: Dashboard, Content, Community, Marketing, Analytics, Sales, Storefront - नीचे द्वितीयक नेविगेशन: Settings, Help - साइडबार के शीर्ष पर उपयोगकर्ता प्रोफ़ाइल अनुभाग 2. लेआउट घटक: - साइडबार की चौड़ाई: 240px - मुख्य सामग्री क्षेत्र: लचीली चौड़ाई - कार्ड कंटेनर: ~500px चौड़ाई - पैडिंग: 24px (पूरे समय सुसंगत) - 32px मार्जिन के साथ रिस्पॉन्सिव कंटेनर 3. सामग्री अनुभाग: - उपयोगकर्ता अभिवादन के साथ स्वागत हेडर - आरंभ करने की चेकलिस्ट (4 चरण) - वीडियो कॉल बुकिंग कार्ड - पेज बिल्डर पूर्वावलोकन कार्ड - पूर्ण किए गए कार्यों के लिए प्रगति संकेतक 4. इंटरैक्टिव नियंत्रण: - पूर्णता स्थितियों के साथ चेकलिस्ट आइटम - "Schedule time" और "Try it out" प्राथमिक बटन - "Learn more" टेक्स्ट लिंक - होवर स्टेट्स के साथ नेविगेशन मेनू आइटम - पेज बिल्डर में रिच टेक्स्ट एडिटर नियंत्रण 5. रंग: - प्राथमिक नीला: #0066FF (बटन) - पृष्ठभूमि ग्रे: #F5F5F7 - टेक्स्ट गहरा: #1A1A1A - सफलता हरा: #34C759 - अवतारों के लिए एक्सेंट रंग 6. ग्रिड/लेआउट संरचना: - मुख्य सामग्री के लिए सिंगल कॉलम लेआउट - कार्ड के बीच 24px का गैप - लचीली चौड़ाई वाले कंटेनर - गोल कोनों वाली कार्ड ग्रिड प्रणाली (12px) </image_analysis> <development_planning> 1. प्रोजेक्ट संरचना: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. मुख्य विशेषताएं: - ऑनबोर्डिंग चेकलिस्ट प्रणाली - वीडियो कॉल शेड्यूलिंग - पेज बिल्डर इंटरफ़ेस - प्रगति ट्रैकिंग - उपयोगकर्ता डैशबोर्ड 3. स्टेट प्रबंधन: ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. रूट्स: ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. घटक वास्तुकला: - DashboardLayout (पैरेंट) - OnboardingCard (फीचर) - VideoCallCard (फीचर) - PageBuilderPreview (फीचर) - NavigationMenu (शेयर्ड) - ActionButton (शेयर्ड) 6. रिस्पॉन्सिव ब्रेकपॉइंट्स: ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. निम्नलिखित प्रॉम्प्ट के अनुसार पेज संरचना सेट अप करें <page structure prompt> नेविगेशन मेनू आइटम (मुख्य रूट को छोड़कर) के आधार पर Next.js रूट संरचना। सुनिश्चित करें कि सभी रूट्स को कंपोनेंट के साथ लपेटा गया है: रूट्स: - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help पेज कार्यान्वयन: /dashboard: मुख्य उद्देश्य: मुख्य मेट्रिक्स का अवलोकन और मुख्य कार्यों तक त्वरित पहुंच प्रदान करना मुख्य घटक - स्टैट्स कार्ड ग्रिड - हाल की गतिविधि फ़ीड - त्वरित क्रिया बटन - प्रदर्शन ग्राफ़ - कार्य सूचनाएं लेआउट संरचना - 12-कॉलम प्रणाली के साथ ग्रिड-आधारित लेआउट - मोबाइल पर स्टैक होने वाले रिस्पॉन्सिव कार्ड - मुख्य मेट्रिक्स के साथ स्टिकी हेडर /content: मुख्य उद्देश्य: सभी सामग्री संपत्तियों को प्रबंधित और व्यवस्थित करना मुख्य घटक - सामग्री सूची /ग्रिड व्यू टॉगल - खोज और फ़िल्टर प्रणाली - सामग्री संपादक - मीडिया लाइब्रेरी - संस्करण इतिहास लेआउट संरचना: - साइडबार नेविगेशन के साथ स्प्लिट व्यू - अनंत स्क्रॉल के साथ मुख्य सामग्री क्षेत्र - संपादन के लिए मोडल ओवरले /community: मुख्य उद्देश्य: उपयोगकर्ता इंटरैक्शन और सामुदायिक सुविधाओं का प्रबंधन मुख्य घटक - सदस्य निर्देशिका - चर्चा बोर्ड - मॉडरेशन उपकरण - उपयोगकर्ता रिपोर्ट - गतिविधि लॉग लेआउट संरचना - तीन-कॉलम लेआउट - संक्षेपणीय साइडबार - स्क्रॉल करने योग्य मुख्य सामग्री क्षेत्र /marketing: मुख्य उद्देश्य: अभियान प्रबंधन और मार्केटिंग उपकरण मुख्य घटक - अभियान निर्माता - ईमेल टेम्पलेट बिल्डर - एनालिटिक्स डैशबोर्ड - दर्शक खंड - A/B परीक्षण उपकरण लेआउट संरचना - टैब्ड इंटरफ़ेस - संपादन के लिए स्प्लिट व्यू - पूर्वावलोकन फलक /analytics: मुख्य उद्देश्य: डेटा विज़ुअलाइज़ेशन और रिपोर्टिंग मुख्य घटक - इंटरैक्टिव चार्ट - कस्टम रिपोर्ट बिल्डर - डेटा निर्यात उपकरण - मेट्रिक तुलना - दिनांक सीमा चयनकर्ता लेआउट संरचना - पूर्ण-चौड़ाई वाले ग्राफ़ - स्टिकी फ़िल्टर हेडर - रिस्पॉन्सिव डेटा टेबल /sales: मुख्य उद्देश्य: बिक्री पाइपलाइन और ऑर्डर प्रबंधन मुख्य घटक - ऑर्डर डैशबोर्ड - ग्राहक प्रोफ़ाइल - इनवॉइस जनरेटर - भुगतान प्रोसेसिंग - बिक्री रिपोर्ट लेआउट संरचना - कानबन बोर्ड व्यू - सूची व्यू विकल्प - विवरण पैनल /storefront: मुख्य उद्देश्य: ई-कॉमर्स स्टोर प्रबंधन मुख्य घटक - उत्पाद प्रबंधक - इन्वेंट्री नियंत्रण - स्टोर कस्टमाइज़र - ऑर्डर पूर्ति - शिपिंग सेटअप लेआउट संरचना - ग्रिड-आधारित उत्पाद लेआउट - त्वरित संपादन साइडबार - पूर्वावलोकन मोड /settings: मुख्य उद्देश्य: सिस्टम कॉन्फ़िगरेशन और उपयोगकर्ता प्राथमिकताएं मुख्य घटक - खाता सेटिंग्स - सिस्टम प्राथमिकताएं - एकीकरण सेटअप - उपयोगकर्ता प्रबंधन - सुरक्षा सेटिंग्स लेआउट संरचना - वर्गीकृत सेटिंग्स पैनल - फ़ॉर्म-आधारित लेआउट - पुष्टिकरण मोडल /help: मुख्य उद्देश्य: समर्थन दस्तावेज़ीकरण और सहायता मुख्य घटक - दस्तावेज़ीकरण खोजें - FAQ अनुभाग - समर्थन से संपर्क करें - ट्यूटोरियल वीडियो - नॉलेज बेस लेआउट संरचना - खोज योग्य साइडबार - लेख दृश्य - त्वरित लिंक पैनल लेआउट: AdminLayout: - लागू रूट्स: /help को छोड़कर सभी - मुख्य घटक - शीर्ष नेविगेशन बार - साइडबार नेविगेशन - उपयोगकर्ता प्रोफ़ाइल मेनू - सूचनाएं - ब्रेडक्रंब - रिस्पॉन्सिव व्यवहार - मोबाइल पर संक्षेपणीय साइडबार - छोटी स्क्रीन पर नेविगेशन के लिए ड्रॉपडाउन मेनू - समायोज्य सामग्री चौड़ाई HelpLayout - लागू रूट्स: /help - मुख्य घटक - दस्तावेज़ीकरण साइडबार - खोज बार - समर्थन चैट विजेट - एडमिन पर वापस जाने का बटन - रिस्पॉन्सिव व्यवहार - मोबाइल पर पूर्ण-चौड़ाई - समर्थन के लिए फ्लोटिंग एक्शन बटन - संक्षेपणीय अनुभाग </page structure prompt>