यह ट्यूटोरियल React 19 और Next.js 15 का उपयोग करके स्वचालित रूप से वेब पेज उत्पन्न करने के लिए एक संपूर्ण सिस्टम बनाने के लिए एक व्यापक गाइड का पहला भाग है। खुले स्रोत: (https://github.com/aifa-agi/aifa) यहाँ रास्ता है: हिस्सा 1 (आप यहाँ हैं): कोर आर्किटेक्चर गहरे डूव - सभी मार्गों को पकड़ें, PageHtmlTransformer घटक, और मजबूत रूप से टाइप किए गए पृष्ठ कॉन्फ़िगर। भाग 2: उन्नत पृष्ठ प्रकार — स्वचालित दस्तावेज़ पृष्ठों और इंटरैक्टिव ट्यूटोरियल। भाग 3: एआई इंजन एकीकरण - बाहरी मॉडल (ChatGPT, Claude) और हमारे आंतरिक एजेंट को लगातार, स्वायत्त सामग्री उत्पन्न करने के लिए जोड़ना। बोनस: मामले का अध्ययन - उपयोगकर्ता पंजीकरण और स्ट्राइप भुगतान के साथ उत्पादन स्तर के एआई SaaS को डिप्लोमा, मुनाफा और स्केलिंग। यह कदम-दर-चरण ब्लूप्रिंट आपको अपने स्वयं के उद्यम-क्लोन v0 के निर्माण के माध्यम से जाता है, जो प्रमाणन और भुगतान प्रवाहों के साथ पूरा होता है. अवधारणा से लॉन्च तक एक वास्तविक एआई उत्पाद - पूर्ण स्रोत कोड पर उपलब्ध है. पूरी श्रृंखला का पालन करने के लिए साइन अप करें - यह केवल शुरुआत है! के Technology Stack: React 19 · Next.js 15 · Vercel · Prisma · Stripe · AI SDK · ChatGPT हमारी प्लेटफॉर्म उद्यम स्तर की स्थिरता को खून बहने वाली नवाचार के साथ जोड़ती है: App Router के साथ React 19 और Next.js 15 sub-100ms रेंज और सच्चे समानांतर मार्ग प्रदान करते हैं। वर्सेल शून्य अपटाइम डिप्लोमेंट और वैश्विक एज स्केलिंग को सक्षम करता है। Prisma & Neon टाइप-सुरक्षित, चमकदार डेटा पहुंच सुनिश्चित करता है। Stripe त्वरित, PCI अनुपालन वाले भुगतान को बॉक्स से बाहर संभालता है। एआई एसडीके + चैटजीपीटी जनरेटिव बुद्धि में परत, इसलिए एआईएफए डेव स्टार्टर मिनटों में पूर्ण यूआई, सामग्री मॉड्यूल, और प्रोटोटाइप को स्पिन कर सकता है - अंतर्निहित प्रमाणन और बहुभाषी एआई चैट के साथ पूरा। कैसे काम करता है Prompt: ChatGPT को एकल प्राकृतिक भाषा अनुरोध भेजें। Generate: एक JSON आधारित PageConfig प्राप्त करें जो आपकी पृष्ठ के अनुभागों, मेटाडेटा और लेआउट को परिभाषित करता है। Build: config फ़ाइल को अपने Next.js ऐप में ड्रॉप करें और npm run build चलाएं. तुरंत आपके पास एक पूरी तरह से स्टाइलिश, एसईओ तैयार पृष्ठ है, auth और AI-powered चैट के साथ पूरा है। उन्नत स्वचालन, भूमिका आधारित पहुंच और स्केलेबल माइक्रोसेवेज आर्किटेक्चर के लिए [अगले aifa.dev(https://aifa.dev)] में हमारे "v0 कॉर्पोरेट मोड" पर स्विच करें। Home » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business » Business ( उन्नत स्वचालन, भूमिका-आधारित पहुंच और स्केलेबल माइक्रोसेस आर्किटेक्चर के लिए। https://aifa.dev कौन एक एआई-आधारित साइट जनरेटर के साथ जीतता है? स्टूडियो, उद्यम, स्टार्टअप, और फ्रीलांसर Next-Generation डिजाइन एजेंसी: मॉकअप से मिनटों में बड़े पैमाने पर उत्पादन तक एक एजेंसी की कल्पना करें जो स्केलबल टेक्नोलॉजी पारिस्थितिकी तंत्रों को आर्किटेक्ट करती है, न कि केवल स्थैतिक मॉकअप। यह वैज्ञानिक कथा नहीं है. यह एक नया ऑपरेटिंग पैराडाइम है जहां रचनात्मक पूंजी स्वचालित निष्पादन से मिलती है. और स्ट्रिप एकीकरण के अंतर्गत, आप पहले दिन से इस नए गति को कमा सकते हैं. हम बाद में एक पोस्ट में इस पर आगे की जांच करेंगे. एंटरप्राइज़ डिप्लोमाइंट्स: ब्रांड स्थिरता और जटिल स्केलेबलता एक क्लासिक उद्यम उपयोग के मामले: एक राष्ट्रीय रेस्तरां फ्रेंचाइज़ के लिए एक बंद कुंजी QR मेनू समाधान. आप केवल एक बार उत्पाद कार्ड या मेनू जैसे कोर उपयोगकर्ता अनुभव के लिए एक मास्टर डिजाइन प्रणाली बनाते हैं. यह एक सफेद लेबल समाधान बन जाता है जिसे आप सैकड़ों फ्रेंचाइज़रों या स्थानों पर तैनात कर सकते हैं. प्रत्येक स्थान अपने ब्रांडिंग और सामग्री को एक सरल इंटरफ़ेस के माध्यम से अनुकूलित करता है, जबकि कोर यूएक्स, प्रदर्शन और डिजाइन अखंडता बंद और स्थिर रहती है। , और . radical scalability bulletproof brand consistency unmatched speed-to-market कोर इंजन: हमारी JSON-to-React ट्रांसफार्मर आर्किटेक्चर इस पूरे सिस्टम को दो महत्वपूर्ण घटकों द्वारा संचालित किया जाता है: Intelligent Prompt Engineering We use highly-tuned instructions that command the AI to pull battle-tested section templates from a vector database and tailor them to your specific request. The Component Transformer Architecture Our React components are engineered to interpret these JSON configs, instantly transforming them into fully-rendered, interactive pages. जबकि ChatGPT और Claude जैसी बाहरी मॉडल सामग्री उत्पादन को संभालते हैं, हमारे प्राइवेट ट्रांसफार्मर घटक सिस्टम का कोर इंजन हैं - जो हिस्सा हम प्रदर्शन और डिजाइन वफादारी की गारंटी देने के लिए बनाए गए हैं। एआई-नाइट दस्तावेज: इस ट्यूटोरियल का उपयोग एक लाइव ज्ञान आधार के रूप में करें रोकें दस्तावेज शुरू करें यह पढ़ने कमांड इस गाइड की वास्तविक शक्ति इसे कवर-टू-कवर पढ़ने में नहीं है. यह आपके प्रोजेक्ट के निजी, विशेषज्ञ ज्ञान आधार के रूप में डिज़ाइन किया गया है। यह कैसे काम करता है: इस पूरे दस्तावेज़ को ChatGPT में फ़ीड करें। विशिष्ट, संदर्भ प्रश्न पूछें: "मैं एक कस्टम अनुभाग कैसे लागू करता हूं?", "FullScreenWrapper का उद्देश्य क्या है?", "मुझे DoublePresentation घटक के लिए कोड दिखाएं। पूर्ण कोड स्नैप्स के साथ सटीक, उत्पादन के लिए तैयार जवाब प्राप्त करें। यह सिर्फ दस्तावेज नहीं है; यह एक कार्यशील प्लेबुक है. इस दृष्टिकोण का प्रयास करें, और आप समझेंगे कि 2025 में सभी तकनीकी दस्तावेजों को एआई मूल क्यों होना चाहिए। 1. परिचय: हमारी दर्शन – निष्पक्षता ट्रंप रॉव स्पीड यह गाइड सबसे तेजी से संभव एआई पृष्ठ जनरेटर बनाने के बारे में नहीं है. जबकि v0 जैसे एआई उपकरण कच्चे उत्पादन की गति को प्राथमिकता देते हैं, हमारी पद्धति अधिक महत्वपूर्ण व्यापार माप पर केंद्रित है: हमारा प्राथमिक लक्ष्य आपकी पूरी डिजिटल पैरवी पर गोलीबारी प्रतिरोधी डिजाइन स्थिरता और वास्तुकला सामंजस्य प्रदान करना है। Total Cost of Ownership (TCO) जबकि एकल पृष्ठ के प्रारंभिक उत्पादन में थोड़ा अधिक समय लग सकता है, विकास, रखरखाव और ब्रांड प्रबंधन में निचले स्तर की बचत एक्सपोजेनिकल है। Bulletproof ब्रांड स्थिरता: प्रत्येक एआई-जनित पृष्ठ स्वचालित रूप से आपके स्थापित डिजाइन सिस्टम के अनुरूप है। सुचारू उपयोगकर्ता अनुभव: आर्किटेक्चर उपयोगकर्ता के लिए एक सामंजस्यपूर्ण और संलग्न यात्रा सुनिश्चित करता है, तेजी से उत्पन्न साइटों में आम अविश्वसनीयताओं को खत्म करता है। नाटकीय रूप से कम पुनरावृत्ति: निर्माण के बिंदु पर मानकों को लागू करके, हम महंगी और समय लेने वाली मैन्युअल समायोजन को कम करते हैं जो आमतौर पर पोस्ट-जन्म की आवश्यकता होती है। वास्तविक आर्किटेक्चरल स्केलेबल: हमारा दृष्टिकोण अधिक कुशल हो जाता है क्योंकि आप स्केलेशन करते हैं. जितनी अधिक पृष्ठ आप उत्पन्न करते हैं, उतनी ही तेजी और स्थिरता में अधिक रिटर्न। The result isn't just a collection of pages; it's a cohesive, professional-grade digital asset that scales gracefully with minimal maintenance overhead. बुनियादी से परे: वास्तविक दुनिया की जटिलता का संचालन यह प्रारंभिक ट्यूटोरियल हमारे कोर के साथ मानक पृष्ठों का निर्माण करने पर केंद्रित है , और हालांकि, ओपन-सॉर्ड कोडबेस अधिक जटिल आवश्यकताओं के लिए उन्नत, बक्से से बाहर समाधान प्रदान करता है: Header Body Footer दस्तावेज पृष्ठों उन्नत, निहित नेविगेशन के साथ। स्टेटिव, कदम-दर-चरण तत्वों के साथ इंटरैक्टिव ट्यूटोरियल पेज। हमारे आर्किटेक्चर को विस्तार के लिए डिज़ाइन किया गया है. अद्वितीय, अत्यधिक इंटरैक्टिव सुविधाओं के लिए – जैसे कि एनिमेटेड प्रस्तुतियां, वास्तविक समय डेटा डैशबोर्ड, या जटिल राज्य प्रबंधन वाले घटकों – आप इंजेक्शन कर सकते हैं यह आपको अनुकूलित कार्यक्षमता को लागू करने की लचीलापन देता है, जो कभी भी सिस्टम की कोर अखंडता को खतरे में नहीं डालता है। Custom Components Your Next Step: Hands-On with Custom Components इस प्रणाली को वास्तव में मास्टर करने के लिए, आपका व्यावहारिक कार्य एक नया कस्टम घटक बनाने और एकीकृत करने की प्रक्रिया का पता लगाना है. यह वास्तुकला की शक्ति और लचीलापन की आपकी समझ को मजबूत करेगा. 1.1. अवधारणा: एआई आपके ब्रांड स्टोवर्ड के रूप में, न केवल एक सामग्री इंजन आधुनिक डिजिटल ऑपरेशन गति, ब्रांड अखंडता, और बाजार गतिशीलता की मांग करते हैं। हमारी वास्तुकला आपके डिजाइन सिस्टम को एक संरचित, बुद्धिमान ज्ञान आधार के रूप में व्यवहार करके यह हासिल करती है। अपने सटीक यूआई / UX मानकों को एआई को खिलाने से, यह एक सामग्री जनरेटर से अधिक बन जाता है - यह आपकी ब्रांड पहचान का अंतिम प्रबंधक बन जाता है, पेज बनाने के जीवन चक्र के हर चरण में स्थिरता को लागू करता है। 5. 5 चरण कार्य प्रवाह: डिजाइन सिस्टम से एसईओ अनुकूलित निर्माण तक अपने डिजाइन सिस्टम का उपयोग करें: हम अपने घटक टेम्पलेट्स और दृश्य और संरचनात्मक रूप से उन्हें कैसे लागू करने के बारे में स्पष्ट निर्देशों के साथ एआई के ज्ञान आधार को लोड करते हैं, 100% ब्रांड समायोजन सुनिश्चित करते हैं। एक प्रिंट के साथ लक्ष्य को परिभाषित करें: एक उपयोगकर्ता, परियोजना प्रबंधक, या डेवलपर एक सरल पाठ प्रिंट भेजता है जो वांछित पृष्ठ या इसके तत्वों का वर्णन करता है। एआई व्याख्या और संरचना: एजेंट एआई अनुरोध का विश्लेषण करता है, सेमेंटिक सामग्री उत्पन्न करता है, और बुद्धिमान रूप से इसे ज्ञान आधार से उपयुक्त, पूर्व-अनुमोदित टेम्पलेटों पर मानचित्र करता है। एक Declarative PageConfig उत्पन्न करें: चयनित टेम्पलेटों के आधार पर, सिस्टम एक मजबूत टाइप PageConfig - अंतिम पृष्ठ के एक deklarative JSON विवरण का आउटपुट करता है। स्वचालित निर्माण और तैनाती: निर्माण प्रक्रिया के दौरान हमारे rendering घटकों द्वारा कॉन्फ़िगर किया जाता है. आउटपुट एक उत्पादन के लिए तैयार, एसईओ अनुकूलित पृष्ठ है जो दृश्य और तकनीकी रूप से आपके कॉर्पोरेट मानकों के अनुरूप है। 1.3. बिजनेस प्रभाव: ड्राइव रूपांतरण और स्लैश टीसीओ त्वरित बाजार के लिए जाओ: एक ही परामर्श के साथ नए लैंडिंग और उत्पाद पृष्ठों को लॉन्च करें, अविश्वसनीय गति के लिए पूर्व अनुमोदित टेम्पलेट का लाभ उठाएं। Ironclad ब्रांड अखंडता: ब्रांड अनुपालन और गुणवत्ता नियंत्रण स्वचालित हैं, यह सुनिश्चित करने के लिए कि हर नया पृष्ठ पूरी तरह से आपके डिजाइन प्रणाली को दर्शाता है। कम मैन्युअल ओवरहेड और स्केलेबल ए / बी परीक्षण: मार्केटिंग टीमों को लेआउट प्रक्रिया में डेवलपर्स को शामिल किए बिना पृष्ठ परिवर्तनों और ए / बी परीक्षण सामग्री को स्केलेशन करने में सक्षम बनाएं। वैश्विक पैमाने के लिए बनाया गया: सभी पाठ और यूआई तत्व केंद्रित हैं, जिससे स्थानीयकरण और बाजार अनुकूलन आसानी से हो जाता है। आर्किटेक्चरल लचीलापन: आधुनिक सीआई / सीडी पाइपलाइनों, होस्टिंग प्लेटफॉर्म और अन्य एआई-आधारित कार्य प्रवाहों में सही ढंग से एकीकृत करने के लिए डिज़ाइन किया गया है। 1.4. इस श्रृंखला के माध्यम से आपका मार्गदर्शिका इस व्यापक ट्यूटोरियल में, हम आपको मार्गदर्शन करेंगे: कोर आर्किटेक्चर को deconstructing: PageHtmlTransformer, Wrapper / FullScreenWrapper प्रणाली, और कैसे अनुभाग घटक बातचीत में एक गहरा डुबकी। रेंडिंग पाइपलाइन को मास्टर करना: अनुभाग रेंडिंग, कॉन्फ़िगरेशन टाइपिंग, और कॉन्फ़िग फ़ाइलों और प्रतिक्रिया घटकों के बीच संबंध के पीछे की तार्किक को समझें, ताकि आप सिस्टम को खुद बढ़ा सकें। एआई को निर्देशित करना सीखें: मेटाडेटा, शीर्षक और पैरों के लिए संरचित निर्देश कैसे बनाएं, और JSX टुकड़े के रूप में बॉडी सामग्री उत्पन्न करने के लिए विनिर्देशों को परिभाषित करें। अनुरोध पर पृष्ठ उत्पन्न करना: अपने ज्ञान को लागू करें ताकि कॉन्फ़िग फ़ाइल बनाएं जो एआई आपके आर्किटेक्चर और डिजाइन मानकों के पूर्ण अनुरूप पृष्ठों को उत्पन्न करने के लिए उपयोग करता है। 2. हमारे एआई-आधारित वास्तुकला की एनाटॉमी हमारे प्रोजेक्ट को अधिकतम स्केलेबलता, रखरखाव और विकास गति के लिए व्यवस्थित किया गया है. हम Next.js 15 ऐप रूटर परंपराओं का उपयोग करते हैं, जिसमें समानांतर मार्ग शामिल हैं ( ) और निजी फ़ोल्डर ( ), to create a clean and powerful structure. @right _folder Project Directory पेड़ app/@right/ ├── public/ │ ├── (_routing)/ │ │ └── [[...slug]]/ │ │ └── page.tsx # 1. Dynamic Catch-All Route Handler │ └── (_service)/ │ ├── (_config)/ │ │ └── public-pages-config.ts # 6. AI-Generated Page Configurations │ └── (_libs)/ │ └── utils.ts # 7. Configuration Utilities └── (_service)/ ├── (_types) │ └── page-wrapper-types.ts # 5. The TypeScript Data Contract (AI <-> UI) └── (_components)/ └── page-transformer-components/ ├── page-html-transformer.tsx # 2. The Core Page Transformer Engine ├── custom-sections/ # Directory for complex, interactive components ├── wrappers/ │ ├── full-screen-wrapper.tsx # 3. Immersive Full-Screen Wrapper │ └── wrapper.tsx # 4. Standard Content Section Wrapper ├── header-sections-components/ │ ├── header-section.tsx # 8. Standardized Header Component │ ├── page-header-elements.tsx # 9. Atomic Header Elements (H1/H2) │ └── announcement.tsx # 10. Announcement Banner Component ├── body-sections-components/ │ └── body-section.tsx # 12. Flexible Body Content Container └── footer-sections-components/ └── footer-section.tsx # 11. Standardized Footer Component पूर्ण स्क्रीन मोड से बाहर निकलें मुख्य पार्टियों का रास्ता 1. @/app/@right/public/(_routing)/[[...slug]]/page.tsx 2. @/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer.tsx 3. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx 4. @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx 5. @/app/@right/(_service)/(_types)/page-wrapper-types.ts 6. @/app/@right/public/(_service)/(_config)/public-pages-config.ts 7. @/app/@right/public/(_service)/(_libs)/utils.ts 8. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx 9. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx 10. @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx 11. @/app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx 12. @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx पूर्ण स्क्रीन मोड से बाहर निकलें 2.1. कोर घटक टूलकिट: बॉक्स से बाहर उत्पादन-जैसे पृष्ठ उद्देश्य Our standard component library provides the engineered foundation for creating strongly-typed, brand-aligned pages at scale. This collection comprises the architectural pillars of our system: dynamic routing, a central transformer engine, versatile content wrappers, unified header and footer sections, and the configuration files and data contracts that drive them. मुख्य आर्किटेक्चर सिद्धांत: Bulletproof UI Consistency: प्रत्येक घटक एक एकीकृत डिजाइन प्रणाली और व्यवहार पैटर्न का पालन करता है, जो एक सुचारू और भविष्यवाणी योग्य उपयोगकर्ता अनुभव सुनिश्चित करता है। आर्किटेक्चर को स्वचालित उत्पादन के लिए अनुकूलित किया गया है, जो एआई को मैन्युअल हस्तक्षेप के बिना जटिल पृष्ठों का निर्माण करने की अनुमति देता है। सीईओ-आउंड अप से अनुकूलित: खोज इंजन अनुकूलन और सीमेंटिक HTML के लिए सर्वोत्तम प्रथाओं को पकाया जाता है, नहीं पकाया जाता है। टाइप-सुरक्षित और पूर्वानुमान: हम आईआई और यूआई के बीच एक विश्वसनीय डेटा अनुबंध को लागू करने के लिए टाइपस्क्रिप्ट की सख्त टाइपिंग का लाभ उठाते हैं, जिससे सिस्टम की स्थिरता सुनिश्चित होती है। मॉड्यूलर & Composable: प्रत्येक घटक एक स्वतंत्र इकाई है जो एक विशिष्ट समस्या को हल करती है, जो अधिकतम पुनः उपयोग और विस्तार के लिए डिज़ाइन की गई है। एक साथ, ये घटक सिस्टम का आधार बनाते हैं, जिससे यह सुनिश्चित होता है कि प्रत्येक एआई द्वारा उत्पन्न पृष्ठ न केवल दृश्य रूप से संलग्न है, बल्कि तकनीकी रूप से मजबूत और उद्यम तैयार है। 2.1.1 के बारे में घटक: गतिशील URLs के लिए सार्वभौमिक कैच-सभी मार्ग [[...slug]]/page.tsx 2.1.1.1. सभी मार्गों को पकड़ने की रणनीतिक मूल्य: गतिशीलता और तैनाती की गति एक catch-all मार्ग Next.js में एक गतिशील राउटिंग पैटर्न है जो एकल पृष्ठ घटक को URL सेगमेंट की अनंत संख्या को संभालने की अनुमति देता है। सम्मेलन, The पैरामीटर एक पैरामीटर बन जाता है जिसमें URL पथ का हर हिस्सा होता है, चाहे वह कितनी गहरी हो। [[...slug]] slug एक व्यापार परिप्रेक्ष्य से, यह वास्तुकला विकल्प एक विशाल प्रतिस्पर्धी लाभ है. यहाँ क्यों है: अंतहीन Nesting और सामग्री गहराई: आप परियोजना के फ़ाइल संरचना द्वारा अब प्रतिबंधित नहीं हैं. /public/category/nike/sneakers/black/12345 जैसे URL को /public/test के समान समान घटक द्वारा संसाधित किया जाता है. यह कोडबेस में कोई भी परिवर्तन की आवश्यकता के बिना गहराई से रीरेखित उत्पाद कैटलॉग, दस्तावेज साइटों, या सामग्री पुस्तकालयों का निर्माण करने की क्षमता को खोलता है. त्वरित पृष्ठ लॉन्च: एक नई पृष्ठ को डिप्लो करना एक केंद्रीय फ़ाइल में इसकी कॉन्फ़िगरेशन जोड़ने के समान सरल है. पृष्ठ नए घटक बनाने या जटिल फ़ाइल सिस्टम पर नेविगेट करने के बिना तुरंत लाइव हो जाता है. यह इंजीनियरिंग चक्रों से सामग्री रणनीति को अलग करता है, मार्केटिंग और उत्पाद टीमों को तेजी से आगे बढ़ने के लिए सक्षम बनाता है. अंतर्निहित ऑटोमेशन: यह आर्किटेक्चर पूरी तरह से स्वचालित सामग्री पारिस्थितिकी तंत्र के लिए आधार है. एक स्वचालित रूप से उत्पन्न साइड बार या मेनू को पृष्ठ कॉन्फ़िगरेशन को पढ़ने और गतिशील रूप से नेविगेशन का निर्माण करने के लिए प्रोग्राम किया जा सकता है. जब आप एक नया पृष्ठ कॉन्फ़िगर जोड़ते हैं, तो नेविगेशन स्वचालित रूप से अपडेट होता है, जिससे मैन्युअल प्रयास के शून्य के साथ एक निरंतर उपयोगकर्ता अनुभव सुनिश्चित होता है. 2.1.1.2. एआई सहायकों के लिए गतिशील URLs का मूल्य: अंतहीन सामग्री स्केलेबलता आज की प्रतिस्पर्धी परिदृश्य में, आधुनिक SaaS और एआई प्लेटफार्मों को नई पृष्ठों का निर्माण करने के लिए गतिशीलता की आवश्यकता होती है. चाहे एक उपयोगकर्ता, एक व्यवस्थापक, या एक स्वायत्त एआई एजेंट द्वारा प्रारंभ किया गया हो, सामग्री को तुरंत निर्माण और तैनाती के लिए आर्किटेक्चर किया जाना चाहिए। Strategic Business Advantages: आर्किटेक्चरल प्रतिबंधों को खत्म करता है: यह सामग्री संरचना और गहराई पर सभी प्रतिबंधों को खत्म करता है, जिससे आपके डिजिटल उपस्थिति को कोड में परिवर्तन की आवश्यकता के बिना अंतहीन रूप से बढ़ने की अनुमति मिलती है। Unlocks Unmatched Agility: किसी भी उपयोग के मामले के लिए जटिल सामग्री द्विआधारी विकल्पों का निर्माण करें. नेविगेशन पूरी तरह से आपके व्यवसाय तर्क द्वारा चलाया जाता है, एक कठोर फ़ाइल सिस्टम द्वारा प्रतिबंधित नहीं किया जाता है. यह इंजीनियरिंग चक्रों से आपकी सामग्री रणनीति को अलग करता है, उत्पाद और विपणन टीमों को तेजी से निष्पादित करने में सक्षम बनाता है. AI-Powered Automation को सक्षम बनाता है: यह आर्किटेक्चर एक एआई-प्रथम दुनिया के लिए डिज़ाइन किया गया है. यह एआई एजेंटों के लिए स्वतंत्र रूप से उत्पन्न करने, कॉन्फ़िगर करने और आपकी साइट के पूरे अनुभागों को वितरित करने के लिए एक स्थिर नींव प्रदान करता है, उत्पाद कैटलॉग से ज्ञान बेस तक। 1.1.1.3 वास्तविक दुनिया में उपयोग के मामले यह आर्किटेक्चर सैद्धांतिक नहीं है; यह उच्च मूल्य, गहराई से निहित सामग्री संरचनाओं को लागू करने के लिए एक लड़ाई परीक्षण मॉडल है जो व्यवसाय के विकास को बढ़ावा देता है: Turnkey QR मेनू सिस्टम: एक राष्ट्रीय रेस्तरां फ्रेंचाइज़ के लिए एक सफेद लेबल समाधान लागू करें. प्रत्येक स्थान में एक अद्वितीय, गहराई से वर्गीकृत मेनू (जैसे, /public/menu/dallas-tx/dinner/mains/pasta-dishes) हो सकता है, सब कुछ सही ब्रांड अनुरूपता और UX अखंडता बनाए रखते हुए। ई-कॉमर्स उत्पाद कैटलॉग: अंतहीन बदलावों के साथ व्यापक उत्पाद लाइनों को तुरंत लॉन्च करें. /public/shop/apparel/mens/jackets/leather/fall-2025/black/sku-12345 जैसी यूआरएल बनाने और प्रबंधित करने के लिए मामूली हो जाती है, जो तेजी से बाजार का विस्तार और granular उत्पाद संगठन की अनुमति देता है। कॉर्पोरेट और शैक्षिक पोर्टल: विशाल ज्ञान आधारों या ट्यूटोरियल प्लेटफॉर्म का निर्माण करें जहां सामग्री को तार्किक रूप से व्यवस्थित किया जा सकता है, चाहे कितनी गहराई से द्रव्यमान जाना चाहिए (उदाहरण के लिए, /public/tutorials/enterprise-ai/onboarding/module-3/advanced-prompting)। अपने कोर में, प्रक्रिया अद्भुत रूप से सरल लेकिन शक्तिशाली है: यह गतिशील रूप से किसी भी URL पथ को एक अनुकूल पृष्ठ कॉन्फ़िगरेशन में अनुवाद करता है, जिसे फिर फ्लाई पर रेंज किया जाता है. यह तकनीकी नींव है जो पहले वर्णित व्यावसायिक गतिशीलता को खोलती है. The component's primary tasks are: It captures the incoming URL path as an array of segments (e.g., ). Receive the URL: ["category", "nike", "sneakers"] The function proactively reads your file. It informs Next.js of all valid page routes defined in your configuration. For the business, this translates to comprehensive Static Site Generation (SSG), ensuring every page is pre-built for lightning-fast load times and optimal SEO. Generate Static Paths: generateStaticParams public-pages-config.ts export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug ? page.metadata.slug.slice(1) : [], })); } When a user requests a URL, the component receives the array. It then uses the utility to perform a high-speed lookup against the configuration array (prepending for an accurate match). If a match is found, the configuration is passed to our universal component for rendering. Fetch and Render: slug getPageBySlug "public" PageHtmlTransformer export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) { return Page not found; } return ; } क्योंकि यह कोई भी लंबाई हो सकती है और खोज एक सीधे मैच है, यह प्रणाली रास्ता टकराव के शून्य जोखिम के साथ अंतहीन निवास गहराई प्रदान करती है। slugArr 2.1.5. प्रमुख कार्य और उनके व्यापार प्रभाव : Drives by telling Next.js which generateStaticParams Performance & SEO 2.1.1.7. The Component: The Execution Engine यह घटक वह इंजन है जो हमारे एआई-आधारित आर्किटेक्चर को जीवन में लाता है. यह एक एकल, शक्तिशाली Next.js सर्वर घटक है जो प्रत्येक गतिशील रूप से उत्पन्न सार्वजनिक पृष्ठ के लिए एक सार्वभौमिक प्रबंधक के रूप में कार्य करता है. यह URL के आधार पर सही पृष्ठ कॉन्फ़िगरेशन प्राप्त करने और अंतिम रेंंडर को ऑर्केस्ट्रेट करने के लिए जिम्मेदार है, जो दोनों अधिकतम प्रदर्शन और बॉक्स-ऑफ-ऑफ एसईओ अनुपालन सुनिश्चित करता है। // @/app/@right/public/(_routing)/[[...slug]]/page.tsx import { PageHtmlTransformer } from "@/app/@right/(_service)/(_components)/page-transformer-components/page-html-transformer"; import { getPageBySlug } from "@/app/@right/(_service)/(_config)/pages-config"; import { constructMetadata } from "@/lib/construct-metadata"; import type { PageConfig } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { getAllPublicPages } from "../../(_servise)/(_libs)/get-all-public-pages"; interface Props { params: Promise<{ slug?: string[] }>; } export async function generateStaticParams() { const pages: PageConfig[] = getAllPublicPages(); return pages.map((page: PageConfig) => ({ slug: page.metadata.slug || [], })); } export async function generateMetadata({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const pageConfig = getPageBySlug(["public", ...slugArr]); if (!pageConfig) return {}; return constructMetadata(pageConfig.metadata); } export default async function PublicDynamicSlugPage({ params }: Props) { const resolvedParams = await params; const slugArr = resolvedParams.slug ?? []; const publicPageConfig = getPageBySlug(["public", ...slugArr]); if (!publicPageConfig) { return <div>Page not found</div>; } return <PageHtmlTransformer data={publicPageConfig} />; } Enter fullscreen mode Exit fullscreen mode 2.1.1.7. नीचे पंक्ति: अपने एआई सामग्री इंजन के रूप में सभी मार्गों को पकड़ें Combining catch-all routes with a centralized page configuration creates an architecture that is maximally flexible, extensible, and purpose-built for AI-driven content orchestration. This approach is friendly to both developers and AI agents, creating a seamless workflow from concept to deployment. The core principle is simple but transformative: No new code files, no complex folder structures. The navigation and rendering systems adapt automatically, making this the cornerstone of a truly agile and scalable AI-powered platform. A new page is just a new entry in a configuration file. 2.1.3. FullScreenWrapper vs. Wrapper: पूर्ण स्क्रीन अनुभवों का निर्माण 1.3.1 मुख्य उद्देश्य के यह विशेष रूप से उन अनुभागों के लिए डिज़ाइन किया गया है जिनके लिए पृष्ठभूमि वीडियो या छवि समर्थन के साथ एक अंतर्निहित, पूर्ण स्क्रीन प्रस्तुति की आवश्यकता होती है. यह "हेरो" अनुभागों के लिए बुनियादी कंटेनर के रूप में कार्य करता है, जहां सामग्री अमीर मीडिया तत्वों के शीर्ष पर सुंदर रूप से कवर की जाती है. FullScreenWrapper 2.3.2 आर्किटेक्चर के बारे में The component uses a sophisticated layered structure to ensure content remains legible and visually distinct from the background. Technical Highlights: : Guarantees the section fills the entire viewport height, creating a captivating, full-bleed effect. min-h-screen Positioning: Enables precise control for stacking elements. relative z-index / ): Positioned with and to sit behind all other content. Background Elements ( video img absolute z-0 : Uses positioning with to ensure it always appears above the background. Content Container relative z-10 <section className="relative flex min-h-screen flex-col py-10 lg:py-14 bg-background"> {backgroundElement} // z-0 <div className="relative z-10 flex flex-col flex-1"> {children} // Header → Body → Footer </div> </section> Enter fullscreen mode Exit fullscreen mode 2.1.3.3. Customization and Extensibility The is designed for easy customization. You can add complex visual effects directly via the प्रो। FullScreenWrapper className <FullScreenWrapper className="bg-gradient-to-br from-blue-900 to-purple-900"> पूर्ण स्क्रीन मोड से बाहर निकलें : Background videos automatically receive an class to improve text readability, but this can be easily overridden. Opacity Control opacity-40 चिकनी संक्रमण: पृष्ठभूमि गुणों में चिकनी परिवर्तन सुनिश्चित करने के लिए एक संक्रमण-सभी अवधि-500 वर्ग में एकीकृत है। 2.1.3.4 उन्नत स्टाइलिंग और पुनः उपयोग योग्य टेम्पलेट When you need section dividers, borders, glow effects, or background blurs, the provides the ideal foundation for implementing these styles. This makes it perfect for creating highly stylized, reusable templates. FullScreenWrapper typescript <FullScreenWrapper className="border-t-4 border-gradient bg-blur-effect"> Enter fullscreen mode Exit fullscreen mode 5.1.3 उपकरणों का उपयोग // @/app/@right/(_service)/(_components)/page-transformer-components/wrappers/full-screen-wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface FullScreenWrapperProps extends HTMLAttributes<HTMLDivElement> { videoUrl?: string; imageUrl?: string; className?: string; children: React.ReactNode; } export function FullScreenWrapper({ videoUrl, imageUrl, className, children, ...props }: FullScreenWrapperProps) { let backgroundElement: React.ReactNode = null; if (videoUrl) { backgroundElement = ( <video className="absolute inset-0 size-full object-cover z-0 opacity-40 transition-all duration-500" autoPlay loop muted playsInline src={videoUrl} /> ); } else if (imageUrl) { backgroundElement = ( <img className="absolute inset-0 size-full object-cover z-0" src={imageUrl || "/placeholder.svg"} alt="Background" /> ); } return ( <section className={cn( "relative flex min-h-screen flex-col py-10 lg:py-14 bg-background", className )} {...props} > {backgroundElement} <div className="relative z-10 flex flex-col flex-1">{children}</div> </section> ); } Enter fullscreen mode Exit fullscreen mode 4.1.2 स्टैंडर्ड कंटेनर 2.1.4.1. Primary Use Case The यह अधिकांश सामग्री अनुभागों के लिए डिफ़ॉल्ट, go-to कंटेनर है. यह मानक पैडिंग, सामग्री केंद्रित करने और सूचना ब्लॉकों के लिए एक स्थिर, पूर्वानुमानित लेआउट प्रदान करने के लिए डिज़ाइन किया गया है. Wrapper 2.4.2 संरचना और स्टाइल typescript <section className="py-10 lg:py-14 bg-background"> <div className="container mx-auto px-4"> {children} // Header → Body → Footer </div> </section> पूर्ण स्क्रीन मोड से बाहर निकलें घटकों की संरचना सरल है और प्रदर्शन के लिए अनुकूलित है, कुछ प्रमुख Tailwind CSS वर्गों पर भरोसा करता है: : Applies responsive vertical padding for consistent spacing across devices. py-10 lg:py-14 : Creates a centered, max-width container with horizontal padding, ensuring content is well-aligned and readable. container mx-auto px-4 : Utilizes the current theme's CSS variable for the background color, ensuring seamless integration with light/dark modes. bg-background 2.1.4.3. Customization Points While minimalist by design, the कस्टम स्टाइलिंग के लिए एक लचीला आधार है यह जोड़ने के लिए सही आधार है: Wrapper className Custom background colors or gradient effects. सीमाओं या खंडों के बीच विभाजन। Subtle visual enhancements like blur or glow effects. 2.1.4.4. Building Reusable Templates typescript // Пример для pricing-секций <Wrapper className="bg-gradient-to-br from-green-50 to-green-100 border-2 border-green-200"> <HeaderSection /> <PricingTable /> <FooterSection /> </Wrapper> पूर्ण स्क्रीन मोड से बाहर निकलें When your design calls for a template with unique styling but a standard, centered content structure, is the ideal choice. It provides the structural backbone, allowing you to focus on the specific styles of the template. Wrapper 2.1.4.5. The Component // app/@right/(_service)/(_components)/page-transformer-components/wrappers/wrapper.tsx import React, { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; interface WrapperProps extends HTMLAttributes<HTMLDivElement> { className?: string; children: React.ReactNode; } export function Wrapper({ className, children, ...props }: WrapperProps) { return ( <section className={cn("py-10 lg:py-14 bg-background", className)} {...props} > <div className="container mx-auto px-4">{children}</div> </section> ); } पूर्ण स्क्रीन मोड से बाहर निकलें 2.1.5. page-wrapper-types.ts: AI-to-UI TypeScript अनुबंध 2.1.5.1. The Core Contract: Bridging AI Generation and UI Rendering The file establishes a formal, strictly-typed contract between our AI content generator and the UI rendering system. This contract is fundamental to our architecture, defining the structure of all possible page components and the rules governing their interactions to ensure seamless integration and predictability. page-wrapper-types.ts 2.1.5.2. SectionType Categories and AI-Driven Generation The AI's operational model is centered around the enum. First, the AI analyzes the available section types defined within this enum. Then, based on the user's request, it strategically selects which sections to assemble for a given page. To facilitate fully autonomous and high-quality content generation, the AI's knowledge base must be populated with comprehensive instructions and diverse examples for each of the 25+ section types. SectionType typescript export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" पूर्ण स्क्रीन मोड से बाहर निकलें 2.1.5.3. SEO Optimization and Metadata The interface ensures the standards-compliant generation of meta tags, which is critical for search engine optimization (SEO). Meta tags are generated automatically via the function. This function retrieves data from the page configuration and passes it to the उपयोगिता, जो बदले में अच्छी तरह से आकार वाले HTML हेडबैग का निर्माण करती है। PageMetadata generateMetadata() constructMetadata() typescript export interface PageMetadata { id: string; // Уникальный идентификатор title: string; // <title> тег для SEO description: string; // <meta description> для сниппетов image?: string; // Open Graph изображение slug?: string[]; // URL-структура страницы type: SectionType; // Тип основной секции } Enter fullscreen mode Exit fullscreen mode 2.1.5.4. HeaderContentConfig: Managing SEO Hierarchy शीर्षक द्रव्यमान का प्रबंधन on-page SEO के लिए महत्वपूर्ण है। The यह एक जानबूझकर डिजाइन विकल्प है क्योंकि कुछ जानबूझकर डिजाइन प्रकार / तुरंत उनके अंदर हालांकि यह लचीलापन प्रदान करता है, यह यूआई स्थिरता के लिए एक संभावित जोखिम पेश करता है, जो इस आर्किटेक्चर का एक प्राथमिक लक्ष्य है। A note of caution: Header H1 H2 bodyContent typescript interface HeaderContentConfig { heading: string; headingLevel?: 1 | 2; // H1/H2 для поисковой иерархии description?: string; showBorder?: boolean; } Enter fullscreen mode Exit fullscreen mode 2.1.5.5. BodySection: Enabling Maximum Design Freedom typescript bodyContent?: React.ReactNode; पूर्ण स्क्रीन मोड से बाहर निकलें By design, the body of a section is granted complete freedom to implement any layout or design. This architectural choice allows for maximum creative flexibility, enabling the AI to generate rich and varied content. This approach deliberately contrasts with the and , which are standardized to maintain a consistent look and feel across the entire application. Header Footer typescript interface FooterContentConfig { actions?: { label: string; href: string; variant?: "default" | "secondary" | "outline" | "ghost" | "link"; }[]; } Enter fullscreen mode Exit fullscreen mode 2.1.5.6. FooterContentConfig: A Minimalist Approach The current implementation of the footer is intentionally minimalist. It supports only optional call-to-action buttons. No additional elements are included, a decision made to prioritize simplicity, speed, and uniformity across all generated pages. 2.1.5.7 प्रकार परिभाषाओं का विस्तार करने के लिए सिद्धांत एक नया लाने के लिए , निम्नलिखित कदम उठाए जाने चाहिए: SectionType एआई ज्ञान को अपडेट करें: एआई के ज्ञान आधार को नए अनुभाग प्रकार के लिए व्यापक निर्देशों और उदाहरणों के साथ अपडेट किया जाना चाहिए। Extend Enum: नए प्रकार को SectionType enum में जोड़ा जाना चाहिए। If the new section requires unique configuration parameters, the corresponding configuration interface must be extended. Expand Interfaces: इस प्रक्रिया में एक महत्वपूर्ण वास्तुकला संतुलन होता है: और सख्त रूप से एसईओ सर्वोत्तम प्रथाओं और यूआई स्थिरता को लागू करने के लिए टाइप किया जाता है, जबकि offers maximum flexibility for innovative, AI-driven design solutions. Header Footer Body 2.1.5.8. Component // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export interface PageMetadata { id: string; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; Enter fullscreen mode Exit fullscreen mode 2.1.5.9. customComponentsAnyTypeData: स्वैच्छिक कस्टम घटक का समर्थन करना के field within serves as a powerful "escape hatch." It is designed for passing unstructured data to sections that leverage complex or unique custom components that do not conform to our standard interfaces. customComponentsAnyTypeData?: any; SectionConfig आर्किटेक्चरल अखंडता को बनाए रखने के लिए, इन डेटा के प्रकार और संरचना को सख्त रूप से परिभाषित और दस्तावेज किया जाना चाहिए। यह डिजाइन विकल्प अत्यधिक इंटरैक्टिव, गतिशील और उन्नत उपयोगकर्ता-आधारित अनुभागों को एकीकृत करने के लिए आवश्यक लचीलापन प्रदान करता है, मुख्य पृष्ठ वास्तुकला के कोर टाइपिंग अनुबंध को प्रभावित किए बिना। within the custom component itself 2.1.6. public-pages-config.ts: The Public Page and Slug Route Registry 2.1.6.1. Role in System Architecture The file is an AI-generated registry of all public-facing pages within the application. This configuration is automatically generated by our AI based on system instructions and user prompts. Its structure is directly influenced by the available components in our knowledge base examples and the enumerations within the definitions. public-pages-config.ts SectionType The resulting configuration acts as a bridge, translating the AI's analysis of user requirements into a structure that our page rendering system can interpret and display. 2.1.6.2. When to Use This File-Based Configuration This approach is ideal for: Projects with a limited number of pages (typically 10-15). Websites with static content that requires infrequent updates. त्वरित प्रोटोटाइपिंग और न्यूनतम संभव उत्पाद (एमवीपी), डेटाबेस सेटअप के बिना एक त्वरित प्रारंभ की अनुमति देता है। Landing pages with a fixed, predefined structure. When to Transition to a Database: For large-scale production applications, a file-based approach is only practical for a small set of pages. Most scenarios will benefit from storing this information in a database to enable dynamic content management and scalability. 2.1.6.3. Configuration Structure typescript export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { /* SEO-заголовки */ }, bodyContent: {}, footerContent: { /* Кнопки действий */ }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; Enter fullscreen mode Exit fullscreen mode 2.1.6.4. Configuration Categorization Principle कॉन्फ़िगरेशन फ़ाइल को स्थापित करें निर्देशिका सार्वजनिक उद्देश्य पृष्ठों के प्रबंधन में इसकी भूमिका का अर्थ है। Key Architectural Decision: public/(_service)/(_config)/ Scaling by Category: Our architecture supports scaling by categorizing configurations, ensuring a clean and organized structure: — for public pages (e.g., landing, about, contact). public-pages-config.ts docs-pages-config.ts - उन्नत नेविगेशन के साथ दस्तावेज़ साइटों के लिए। — for administrative dashboards. admin-pages-config.ts — for blog posts and articles. blog-pages-config.ts Each category is designed to have its own: समर्पित संस्करण फ़ाइल। विशेष वर्गों के प्रकार। Unique rendering logic. 2.1.6.5. Interaction with the AI Generation System For our AI system, this configuration file serves as: Defining how objects should be formed. A structural template: PageConfig Providing reference values for the generation process. A data example: Enforced by TypeScript for strict type safety. A type validation schema: The workflow is as follows: The AI analyzes the existing configuration file. यह उपयोगकर्ता के परामर्श के आधार पर एक नया PageConfig वस्तु उत्पन्न करता है। A developer then adds the new configuration to the array. pages The system automatically recognizes and registers the new routes. 2.6.6 लाभ और सीमाएं Advantages of the File-Based Approach: Easily managed and versioned via Git. Version Control: टाइप सुरक्षा: टाइपस्क्रिप्ट के साथ कॉपी-टाइप टाइप सुरक्षा से लाभ। No database queries result in faster page loads. Zero Latency: Works seamlessly with static site generation (SSG). Simplified Deployment: Limitations: Lacks dynamic content management capabilities. No Dynamic Updates: Any change necessitates a new build and deployment. Requires Redeployment: Unsuitable for user-generated content. Not for UGC: Becomes difficult to manage beyond 20-30 pages. Scalability Concerns: 2.1.6.7. Component // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, ] as PageConfig[], }; पूर्ण स्क्रीन मोड से बाहर निकलें 2.6.8 संदर्भ यह छोटे से मध्यम आकार के परियोजनाओं के लिए एक व्यावहारिक समाधान है, जो प्रबंधन की सुविधा और कार्यक्षमता के बीच संतुलन प्रदान करता है. बड़े पैमाने पर अनुप्रयोगों के लिए, यह अधिक मजबूत, डेटाबेस-आधारित आर्किटेक्चर के लिए संक्रमण करने से पहले एक उत्कृष्ट प्रारंभिक बिंदु के रूप में कार्य करता है। public-pages-config.ts 2.1.7. utils.ts: कॉन्फ़िगरेशन उपयोगिता कार्यों यह मॉड्यूल पृष्ठ कॉन्फ़िगरेशन को प्रबंधित करने के लिए उपयोगिता कार्य प्रदान करता है. इसमें दो प्राथमिक कार्य शामिल हैं: , which filters all pages with the "public" prefix for static generation, and , which locates a specific page by an exact, case-sensitive match of its slug array. getAllPublicPages() getPageBySlug() // @app/@right/public/(_servise)/(_libs)/utils.ts import { PageConfig, SlugType, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; import { PublicPagesConfig } from "../(_config)/public-pages-config"; export function getAllPublicPages(): PageConfig[] { return PublicPagesConfig.pages.filter( (page: PageConfig) => page.metadata.slug?.[0] === "public" ); } export function getPageBySlug(slug: SlugType): PageConfig | undefined { return PublicPagesConfig.pages.find( (page: PageConfig) => JSON.stringify( page.metadata.slug?.map((s: string) => s.toLowerCase()) ) === JSON.stringify(slug.map((s: string) => s.toLowerCase())) ); } पूर्ण स्क्रीन मोड से बाहर निकलें 1.1.8. header-section.tsx: एकीकृत अनुभाग हेडर यह मानकीकृत घटक सभी अनुभाग प्रकारों के लिए एक सार्वभौमिक हेडर के रूप में कार्य करता है, जो अनुप्रयोग के माध्यम से स्थिरता सुनिश्चित करता है. यह एक घोषणा, एक H1/H2 शीर्षक, और एक विवरण जैसे वैकल्पिक तत्व प्रदान करता है. यह घटक एसईओ अनुकूलन और एआई उत्पन्न पृष्ठों के लिए दृश्य स्थिरता बनाए रखने में एक महत्वपूर्ण भूमिका निभाता है. // @/app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/header-section.tsx import React from "react"; import { cn } from "@/lib/utils"; import { PageHeaderDescription, PageHeaderHeading, } from "./page-header-elements"; import { Announcement } from "./announcement"; import { HeaderContentConfig } from "../../../(_types)/page-wrapper-types"; export type HeaderSectionProps = { headerContent: HeaderContentConfig; } & React.HTMLAttributes<HTMLDivElement>; export function HeaderSection({ headerContent, className, ...props }: HeaderSectionProps) { if (!headerContent) return null; const { announcement, heading, headingLevel = 1, description, showBorder = false, } = headerContent; return ( <section className={cn( showBorder && "border-t-4 border-b-4 border-primary", className )} {...props} > <div className="container mx-auto px-4"> <div className="flex flex-col items-center gap-1 py-8 md:py-10 lg:py-12"> {announcement && ( <Announcement badgeText={announcement.badgeText} descriptionText={announcement.descriptionText} href={announcement.href} /> )} <PageHeaderHeading level={headingLevel}>{heading}</PageHeaderHeading> {description && ( <PageHeaderDescription>{description}</PageHeaderDescription> )} </div> </div> </section> ); } Enter fullscreen mode Exit fullscreen mode 2.1.9. header-section.tsx: Unified Section Header (Atomic Components) इस अनुभाग में परमाणु घटकों का विस्तार किया गया है जिन्हें हेडर्स का निर्माण करने के लिए उपयोग किया जाता है: (H1 / H2 का समर्थन करता है) उपकरणों के लिए, और for placing buttons. These components leverage गतिशील HTML टैग उत्पन्न करने के लिए, सही एसईओ सूचकांक सुनिश्चित करना। PageHeaderHeading PageHeaderDescription PageActions createElement // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/page-header-elements.tsx import { HTMLAttributes, createElement } from "react"; import { cn } from "@/lib/utils"; type HeadingTag = "h1" | "h2"; interface PageHeaderHeadingProps extends HTMLAttributes<HTMLHeadingElement> { level?: 1 | 2; } function PageHeaderHeading({ className, level = 1, ...props }: PageHeaderHeadingProps) { const Heading: HeadingTag = level === 1 ? "h1" : "h2"; const h1Classes = "text-2xl sm:text-3xl md:text-6xl lg:text-7xl"; const h2Classes = "text-lg sm:text-xl md:text-3xl lg:text-4xl"; return createElement(Heading, { className: cn( "text-center font-bold leading-tight tracking-tighter font-serif", level === 1 ? h1Classes : h2Classes, className ), ...props, }); } function PageHeaderDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) { return ( <p className={cn( "max-w-2xl text-balance text-center text-base font-light text-muted-foreground sm:text-lg", className )} {...props} /> ); } function PageActions({ className, ...props }: HTMLAttributes<HTMLDivElement>) { return ( <div className={cn( "flex w-full items-center justify-center gap-2 pt-2", className )} {...props} /> ); } export { PageActions, PageHeaderDescription, PageHeaderHeading }; पूर्ण स्क्रीन मोड से बाहर निकलें 2.1.10. announcement.tsx: घोषणा घटक यह इंटरैक्टिव बैज घटक घोषणाओं और सूचनाओं के लिए डिज़ाइन किया गया है. यह नेविगेशन, कीबोर्ड नियंत्रण, और शर्तित रेंज का समर्थन करता है, स्वचालित रूप से छिपाता है जब कोई सामग्री मौजूद नहीं है. यह महत्वपूर्ण अद्यतनों या लिंक पर ध्यान आकर्षित करने के लिए उपयोग किया जाता है. // @app/@right/(_service)/(_components)/page-transformer-components/header-sections-components/announcement.tsx "use client"; import { useRouter } from "next/navigation"; import { Badge } from "@/components/ui/badge"; import { ArrowRight } from "lucide-react"; import { cn } from "@/lib/utils"; interface AnnouncementProps { badgeText?: string; descriptionText?: string; href?: string; className?: string; } export function Announcement({ badgeText, descriptionText, href, className, }: AnnouncementProps) { const router = useRouter(); const handleOnClick = () => { if (href) { router.push(href); } }; // Если нет текста для бейджа, описания или ссылки, возвращаем null if (!badgeText && !descriptionText && !href) { return null; } return ( <div className={cn( "flex cursor-pointer items-center gap-2 rounded-full border border-primary bg-muted px-3 py-1 text-sm transition-colors hover:bg-muted/80", className )} onClick={handleOnClick} role="link" tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { handleOnClick(); } }} > {badgeText && ( <Badge variant="secondary" className="text-xs"> {badgeText} </Badge> )} {descriptionText && ( <span className="text-muted-foreground">{descriptionText}</span> )} {href && <ArrowRight className=" h-3 w-3 text-muted-foreground" />} </div> ); } Enter fullscreen mode Exit fullscreen mode 2.1.11. footer-section.tsx: एकीकृत अनुभाग कार्य This standardized footer component includes action buttons. It supports multiple buttons with various styling options, ensuring uniformity of Call-to-Action (CTA) elements across all sections. It automatically hides when no actions are defined. // @app/@right/(_service)/(_components)/page-transformer-components/footer-sections-components/footer-section.tsx "use client"; import { useRouter } from "next/navigation"; import type { HTMLAttributes } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { PageActions } from "../header-sections-components/page-header-elements"; interface FooterAction { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; } interface FooterSectionProps extends HTMLAttributes<HTMLDivElement> { actions?: FooterAction[]; } export function FooterSection({ actions, className, ...props }: FooterSectionProps) { const router = useRouter(); if (!actions || actions.length === 0) { return null; } return ( <section className={cn("py-4 md:py-6 lg:py-8", className)} {...props}> <div className="container mx-auto px-4"> <PageActions> {actions.map((action) => ( <Button key={action.href} // href должен быть уникальным! size="sm" variant={action.variant || "default"} onClick={() => router.push(action.href)} > {action.label} </Button> ))} </PageActions> </div> </section> ); } पूर्ण स्क्रीन मोड से बाहर निकलें 2.1.12. body-section.tsx: वैध सामग्री कंटेनर 2.1.12.1 उद्देश्य और दर्शन serves as a highly flexible container for the main content within sections. Unlike the strictly standardized Header and Footer components, किसी भी React सामग्री को पोस्ट करने के लिए पूर्ण स्वतंत्रता प्रदान करता है। BodySection BodySection 2.1.12.2 सामग्री निर्माण के सिद्धांत के लिए संतुष्ट must be generated as plain TSX without using तत्व, जहां सभी तत्व एक विस्तारित प्रारूप में प्रस्तुत किए जाते हैं। Crucially: bodyContent .map() typescript // ✅ bodyContent: ( <> <div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="feature-card"> <h3>Feature 1</h3> <p>Description 1</p> </div> <div className="feature-card"> <h3>Feature 2</h3> <p>Description 2</p> </div> <div className="feature-card"> <h3>Feature 3</h3> <p>Description 3</p> </div> </div> </> ) पूर्ण स्क्रीन मोड से बाहर निकलें // ❌ bodyContent: ( <div className="grid"> {features.map(feature => <FeatureCard key={feature.id} {...feature} />)} </div> ) पूर्ण स्क्रीन मोड से बाहर निकलें 2.1.12.3 कस्टम घटकों का उपयोग कब करें If a section requires complex logic (state, effects, interactivity), create an independent component and add it to एक अलग संस्था के रूप में। PageHtmlTransformer typescript // @/app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx export function BodySection({ children, className, ...props }: BodySectionProps) { const hasChildren = children !== null && children !== undefined && !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren) return null; return ( <div className={cn(className)} {...props}> {children} </div> ); } Enter fullscreen mode Exit fullscreen mode 2.1.12.4 उपकरणों के लिए // @app/@right/(_service)/(_components)/page-transformer-components/body-sections-components/body-section.tsx import type { HTMLAttributes, ReactNode } from "react"; import { cn } from "@/lib/utils"; import { SectionType } from "../../../(_types)/page-wrapper-types"; interface BodySectionProps extends HTMLAttributes<HTMLDivElement> { children?: ReactNode | null; type: SectionType; } export function BodySection({ children, className, ...props }: BodySectionProps) { const defaultHeightRem = 0; const hasChildren = children !== null && children !== undefined && // Covers case when children = [] or "" !(Array.isArray(children) && children.length === 0) && !(typeof children === "string" && children === ""); if (!hasChildren && defaultHeightRem) { return ( <div className={cn(className)} style={{ height: `${defaultHeightRem}rem` }} {...props} > {/* Empty section with default height */} </div> ); } if (!hasChildren) { return null; } return ( <div className={cn(className)} {...props}> {children} </div> ); } Enter fullscreen mode Exit fullscreen mode 5.2.2 निष्कर्ष सिस्टम की मानकीकृत वास्तुकला और एआई उत्पत्ति की रचनात्मक स्वतंत्रता के बीच एक पुल के रूप में कार्य करता है, नियंत्रण और लचीलापन के बीच संतुलन को प्राप्त करता है। BodySection 2. उन्नत कस्टम घटक Advanced Custom Components are engineered to deliver complex, interactive functionality that extends beyond the capabilities of our standard architectural patterns. These components are reserved for scenarios requiring state management, sophisticated animations, real-time data handling, or unique business logic. Custom Components का उपयोग करने के लिए: इंटरैक्टिव तत्व: सत्यापन के साथ फॉर्म, कैलकुलेटर, उत्पाद कॉन्फ़िगरर। एनिमेटेड प्रस्तुतियां: जटिल संक्रमण, पैरालाक्स प्रभाव, स्वचालित स्लाइडर। वास्तविक समय कार्यक्षमता: चैट, सूचनाएं, लाइव डेटा फ़ीड। : Components with fundamentally different behavior on desktop vs. mobile. Adaptive Logic अद्वितीय यूआई पैटर्न: परियोजना के लिए विशिष्ट गैर मानक इंटरफ़ेस तत्व। आर्किटेक्चरल एकीकरण: कस्टम घटकों को एकीकृत किया जाता है अलग से A के भीतर घोषणाएं ब्लॉक. यह दृष्टिकोण उन्हें विषय और डिवाइस जानकारी जैसे पूरे सिस्टम संदर्भ तक पहुंचने की अनुमति देता है, जबकि साझा सीएसएस कक्षाओं और डिजाइन टोकन के माध्यम से एक निरंतर रूप और महसूस बनाए रखता है. हालांकि वे सिस्टम की दृश्य भाषा का पालन करते हैं, वे अपनी आंतरिक तर्क और कार्यान्वयन में पूर्ण स्वतंत्रता बनाए रखते हैं. यह रणनीति अधिकांश सामग्री को मानकीकृत करने और जटिल इंटरैक्टिव तत्वों को लागू करने में रचनात्मक स्वतंत्रता की अनुमति देने के बीच संतुलन प्रदान करती है. PageHtmlTransformer case switch 2.2.1 कस्टम घटकों के कार्यान्वयन के लिए दिशानिर्देश 2.2.1.1. Wrapper Policy : अनुकूलित घटकों को सीधे वापस नहीं किया जाना चाहिए or वे अपनी प्रस्तुति पर पूर्ण नियंत्रण सुनिश्चित करने के लिए अपने स्वयं के लेआउट, पैडिंग और परतिंग का प्रबंधन करने के लिए जिम्मेदार हैं। No External Wrappers Wrapper FullScreenWrapper 2.2.1.2 उपकरणों के संदर्भ : अनुकूलित घटक के लिए prop इंटरफ़ेस को घटक फ़ाइल के शीर्ष पर घोषित किया जाना चाहिए। Config अनुभाग में। Local Prop Interfaces customComponentsAnyTypeData 2.2.1.3 विस्तार SectionType सेक्शन : प्रत्येक कस्टम घटक को एक अद्वितीय प्रकार की आवश्यकता होती है जो में शामिल यह सही प्रकार की जांच सुनिश्चित करता है और अनुमति देता है ट्रांसफार्मर में निष्कर्ष सही ढंग से पहचानने और घटकों को रीडर करने के लिए। Add a New Section Type SectionType page-wrapper-types.ts switch typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts // ... export type SectionType ="hero-section" | “new-custom-section”; पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.1.4. ageHtmlTransformer में अद्यतन मामले अनुकूलित मामले प्रसंस्करणPageHtmlTransformer के लिए एक नया मामले जोड़ा जाता है एक सीधे के साथ एक अनुकूलित अनुभाग प्रकार को संभालने के लिए // В PageHtmlTransformer: case "new-custom-section": return ( <NewCustomSection key={config.id} customData={section.customComponentsAnyTypeData.customData} /> ); पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.1.5 कस्टम कॉन्फ़िगरेशन संरचना : निम्नलिखित पृष्ठ कॉन्फ़िगरेशन का एक उदाहरण है जिसमें एक कस्टम अनुभाग शामिल है। वस्तु, जिसका किसी भी संरचना को घटक द्वारा आवश्यक किया जा सकता है। Configuration Structure customComponentsAnyTypeData export const PublicPagesConfig = { pages: [ { metadata: { id: "CIUD", title: "1", description: "2", slug: ["public", "name"], type: "new-custom-section", }, sections: [ { id: "new-custom-section", type: "new-custom-section", customComponentsAnyTypeData: { metaData: { metaTitle: "1", metaDescription: "2", }, customData: { mediaUrl: "/_static/illustrations/3.png", title: "4", description: "5", }, }, } as SectionConfig, ], }, ] as PageConfig[], पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.2 अनुकूलित घटक उदाहरण 2.2.2.1. DoublePresentation दोगुनी प्रस्तुति के 2.2.2.1.1 अद्यतन कोर प्रकार पहले, नए अनुभाग प्रकार को जोड़ें एकमात्र SectionType typescript // @/app/@right/(_service)/(_types)/page-wrapper-types.ts export type SectionType = | "hero-section" | "cta-section" | "double-presentation-section" पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.2.1.2 नए मामले को जोड़ें पहेली ट्रांसफर पहेली ट्रांसफर Next, add the corresponding के लिए घटकों को बनाने के लिए। case PageHtmlTransformer case "double-presentation-section": return ( <DoublePresentation key={section.id} metaData={section.customComponentsAnyTypeData.metaData} leftItem={section.customComponentsAnyTypeData.leftItem} rightItem={section.customComponentsAnyTypeData.rightItem} /> ); पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.2.1.4 कॉन्फ़िगर उदाहरण यहाँ एक उदाहरण है कि कैसे कॉन्फ़िगर करें घटकों में . DoublePresentation public-pages-config.ts // app/@right/(_service)/(_types)/page-wrapper-types.ts export interface MetadataConfig { title?: string; description?: string; } export type CuidString = string; export interface PageMetadata { id: CuidString; title: string; description: string; image?: string; slug?: string[]; type: SectionType; } export type SectionType = | "hero-section" | "cta-section" | "faq-section" | "features-section" | "testimonials-section" | "pricing-section" | "contact-section" | "blog-posts-section" | "product-grid-section" | "image-gallery-section" | "text-block-section" | "video-section" | "team-section" | "about-us-section" | "newsletter-section" | "social-proof-section" | "comparison-table-section" | "map-section" | "custom-html-section" | "changelog-section" | "comparison-two-column-section" | "comparison-three-column-section" | "feature-showcase-section" | "double-presentation-section"; export interface BaseSection { id: string; type: SectionType; className?: string; } export interface HeaderContentConfig { announcement?: { badgeText?: string; descriptionText?: string; href?: string; }; heading: string; headingLevel?: 1 | 2; description?: string; showBorder?: boolean; } export interface FooterContentConfig { actions?: { label: string; href: string; variant?: | "default" | "secondary" | "destructive" | "outline" | "ghost" | "link"; }[]; } export interface SectionConfig extends BaseSection { type: SectionType; headerContent: HeaderContentConfig; bodyContent?: React.ReactNode; footerContent?: FooterContentConfig; videoUrl?: string; imageUrl?: string; sectionClassName?: string; contentWrapperClassName?: string; customComponentsAnyTypeData?: any; } export type Section = SectionConfig; export interface PageConfig { metadata: PageMetadata; sections: Section[]; } export type SlugType = string[]; पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.2.1.5 उपकरणों के लिए के लिए पूर्ण कोड घटक है। DoublePresentation // @/app/@right/public/(_servise)/(_config)/public-pages-config.ts import { PageConfig, SectionConfig, } from "@/app/@right/(_service)/(_types)/page-wrapper-types"; export const PublicPagesConfig = { pages: [ { metadata: { id: "public", title: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit...", slug: ["public", "test"], type: "hero-section", }, sections: [ { id: "test-block", type: "hero-section", headerContent: { announcement: { badgeText: "Thanks", descriptionText: "AI-SDK V5 & Vercel AI", href: "https://github.com/aifa-agi/aifa", }, heading: "Enterprise-Grade AI Next.js starter", description: "Free Open-Source starter kit to build, deploy, and scale intelligent AI applications. Artifacts Feature, features secure multi-provider auth, Stripe payments, vector knowledge bases, deep-research agents, and a unique fractal architecture designed for the future of AI.", showBorder: false, headingLevel: 1, }, bodyContent: {}, footerContent: { actions: [ { label: "Get Started", href: "/https://github.com/aifa-agi/aifa", variant: "default", }, { label: "Browse Docs", href: "/docs", variant: "ghost" }, ], }, videoUrl: "/_static/video/ai-loop.mp4", contentWrapperClassName: "text-white", } as SectionConfig, ], }, { metadata: { id: "interactive-ai", title: "Interactive AI Demo", description: "Demo: DoublePresentation custom case", slug: ["public", "example"], type: "double-presentation-section", }, sections: [ { id: "double-presentation-demo", type: "double-presentation-section", customComponentsAnyTypeData: { metaData: { metaTitle: "Interactive AI: Where Conversation Builds the UI", metaDescription: "Discover what makes AIFA revolutionary...", }, leftItem: { mediaUrl: "/_static/illustrations/ai-chat.png", title: "Ai Artifacts Chatbot", description: "As the AI chatbot speaks, it highlights elements...", }, rightItem: { mediaUrl: "/_static/illustrations/ai-web.png", title: "Related Pages", description: "Click any UI element, and the AI provides instant context...", }, }, } as SectionConfig, ], }, ] as PageConfig[], }; पूर्ण स्क्रीन मोड से बाहर निकलें 2.2.1.3 के बारे में page-wrapper-types.ts पृष्ठ-प्रेम-प्रेम। यहां पूर्ण नए प्रकार के साथ फ़ाइल शामिल है। page-wrapper-types.ts // @/app/@right/(_service)/(_components)/page-transformer-components/custom-sections/custom-double-prsentation.tsx "use client"; import React, { useState, useEffect } from "react"; import { motion } from "framer-motion"; import Image from "next/image"; import { cn } from "@/lib/utils"; import { useMediaQuery } from "@/hooks/use-media-query"; interface PresentationMeta { metaTitle: string; metaDescription: string; } interface PresentationItem { mediaUrl: string; title: string; description: string; } interface DoublePresentationProps { metaData: PresentationMeta; leftItem: PresentationItem; rightItem: PresentationItem; } export default function DoublePresentation({ metaData, leftItem, rightItem, }: DoublePresentationProps) { const { isMobile } = useMediaQuery(); // Desktop animation state const [activeContainer, setActiveContainer] = useState<"left" | "right">( "left" ); const [sliderKey, setSliderKey] = useState(0); // Desktop auto-switching effect useEffect(() => { // Only run animation cycle on desktop if (isMobile) return; let sliderTimer: NodeJS.Timeout; let transitionTimer: NodeJS.Timeout; const startAnimationCycle = () => { setSliderKey((prev) => prev + 1); sliderTimer = setTimeout(() => { setActiveContainer((prev) => (prev === "left" ? "right" : "left")); transitionTimer = setTimeout(() => { startAnimationCycle(); }, 500); }, 9000); }; startAnimationCycle(); return () => { clearTimeout(sliderTimer); clearTimeout(transitionTimer); }; }, [isMobile]); // Return null while determining screen size if (isMobile === null) { return null; } // Common CSS classes const metaBlockClass = "text-center max-w-3xl flex flex-col items-center"; const descriptionClass = "mb-12 max-w-xl text-base text-muted-foreground text-center"; const desktopTitleClass = "mb-6 max-w-3xl font-serif font-bold leading-tight md:text-2xl lg:text-4xl"; const desktopDescriptionClass = "mb-12 max-w-xl text-lg text-muted-foreground md:text-xl text-center"; // Mobile card renderer const renderMobileCard = (item: PresentationItem) => ( <div className="relative flex flex-col rounded-xl bg-gray-900 text-white shadow-lg mb-6 overflow-hidden"> <div className="w-full relative" style={{ paddingTop: "56.25%" }}> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover rounded-t-xl" sizes="100vw" priority /> </div> <div className="flex flex-col p-4"> <h2 className="text-xl font-bold mb-2">{item.title}</h2> <p className="text-gray-300 mb-2 text-base min-h-16"> {item.description} </p> </div> </div> ); // Desktop card renderer const renderDesktopCard = (item: PresentationItem, isActive: boolean) => ( <motion.div layout animate={{ flex: isActive ? "7 1 0%" : "3 1 0%" }} transition={{ duration: 0.5 }} className="relative flex flex-col rounded-lg overflow-hidden bg-transparent text-white p-0 shadow-lg h-[30rem] flex-shrink-0" > <div className="relative w-full h-60 mb-4 rounded-xl overflow-hidden border-4 border-gray-700"> <Image src={item.mediaUrl} alt={item.title} fill className="object-cover" priority sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> </div> <div className="flex flex-col pt-6"> <h2 className="text-2xl font-bold mb-2 whitespace-nowrap overflow-hidden text-ellipsis"> {item.title} </h2> <div className="relative w-full h-px bg-gray-700 mb-4"> <motion.div key={`slider-${item.title}-${sliderKey}`} className={cn( "absolute top-0 left-0 h-full", isActive ? "bg-primary" : "bg-gray-700" )} initial={{ width: 0 }} animate={{ width: isActive ? "100%" : "0%" }} transition={ isActive ? { duration: 9, ease: "linear" } : { duration: 0 } } /> </div> <p className="text-gray-300 mb-4 text-sm line-clamp-4 min-h-[4rem]"> {item.description} </p> </div> </motion.div> ); // Mobile layout if (isMobile) { return ( <section className="w-full pt-20"> <div className="container mx-auto px-4 flex flex-col items-center"> <div className={metaBlockClass}> <h2 className="text-xl font-bold mb-4">{metaData.metaTitle}</h2> <p className={descriptionClass}>{metaData.metaDescription}</p> </div> <div className="w-full flex flex-col"> {renderMobileCard(leftItem)} {renderMobileCard(rightItem)} </div> </div> </section> ); } // Desktop layout return ( <section className="w-full pt-28"> <div className="container mx-auto px-4 flex flex-col items-center gap-12"> <div className={metaBlockClass}> <h2 className={desktopTitleClass}>{metaData.metaTitle}</h2> <p className={desktopDescriptionClass}>{metaData.metaDescription}</p> </div> <div className="flex gap-6 w-full max-w-6xl"> {renderDesktopCard(leftItem, activeContainer === "left")} {renderDesktopCard(rightItem, activeContainer === "right")} </div> </div> </section> ); } पूर्ण स्क्रीन मोड से बाहर निकलें निष्कर्ष: इस दस्तावेज़ से अधिकतम कैसे प्राप्त करें हम समझते हैं कि यहां प्रस्तुत निर्देश और घटकों को एक ही पोस्ट के लिए व्यापक लग सकता है. आप महसूस कर सकते हैं कि यह सबसे रोमांचक पढ़ने वाला नहीं है, और आप सही होंगे. यह मनोरंजन नहीं है; यह एक विस्तृत तकनीकी गाइड है जो आपको एक शक्तिशाली प्रणाली पर पूर्ण नियंत्रण देने के लिए डिज़ाइन किया गया है. इस जटिल प्रणाली के अध्ययन को एक इंटरैक्टिव और उत्पादक प्रक्रिया में बदलने के लिए, हम निम्नलिखित दृष्टिकोण की सिफारिश करते हैं। Use AI for Accelerated Learning निष्क्रिय रूप से पढ़ने के बजाय, इस दस्तावेज़ को अपने एआई सहायक के लिए "मस्तिष्क" के रूप में उपयोग करें। Your Action Plan: इस लेख की पूरी सामग्री को कॉपी करें, परिचय से इस अनुभाग तक। इसे ChatGPT के लिए एक सिस्टम परामर्श के रूप में उपयोग करें. इससे हम चर्चा कर रहे हैं कि वास्तुकला के पूर्ण संदर्भ के साथ एआई प्रदान करेगा। You can now have a dialogue with an AI that "understands" our rules and conventions. For example: Ask questions about the source code. "Based on the provided documentation, explain how to create a new custom component to display customer testimonials." and ." "Show me a configuration example for a page that uses both DoublePresentation HeroSection यह विधि आपको आवेदन के सिद्धांतों को बहुत तेजी से समझने में मदद करेगी. आप इस परियोजना के लिए पूर्ण स्रोत कोड हमारे . GitHub रिकॉर्ड अगला क्या है? इस लेख में, हमने हमारी साइट जनरेटिंग प्रणाली के दो महत्वपूर्ण टुकड़ों में से एक का निर्माण किया है: file into ready-to-use React components. This paves the way for automated page creation, where an AI can generate the configuration, and our यह एक सुंदर इंटरफ़ेस में बदल जाता है। a tool that transforms a Config Transformer हमारे प्रोजेक्ट को कार्रवाई में देखने के लिए, Live Demo पर जाएं . एफआईआर.डीवी एफआईआर.डीवी A Glimpse into Future Posts: The next article will focus on the second key technology: generating pages (documentation, tutorials, product pages) from Markdown files. Part 2: The Magic of Markdown. भाग 3: Config से UI. हम इस लेख के विषय को फिर से देखेंगे और गहराई से जानेंगे कि ChatGPT द्वारा उत्पन्न कॉन्फ़िगरेशन को React घटकों में कैसे परिवर्तित किया जाता है और इस प्रक्रिया को कैसे विस्तारित किया जा सकता है। अगले ट्यूटोरियल में, हम एक महत्वपूर्ण सवाल का जवाब देकर शुरू करेंगे: टूटे रहें ! Why was Markdown chosen for content management?
