{"id":31116,"date":"2026-10-19T22:30:49","date_gmt":"2026-10-19T22:30:49","guid":{"rendered":"https:\/\/umang.pk\/2026\/10\/19\/%d8%a7%db%92-%d8%a2%d8%a6%db%8c-%d9%be%d8%b1%d8%a7%d9%85%d9%be%d9%b9%d8%b3-%da%a9%db%92-%d8%b3%d8%a7%d8%aa%da%be-%d9%88%db%8c%d8%a8-%d8%b3%d8%a7%d8%a6%d9%b9-%db%8c%d9%88%d8%b2%d8%b1-%d8%a7%d9%86%d9%b9\/"},"modified":"2026-10-19T22:30:49","modified_gmt":"2026-10-19T22:30:49","slug":"%d8%a7%db%92-%d8%a2%d8%a6%db%8c-%d9%be%d8%b1%d8%a7%d9%85%d9%be%d9%b9%d8%b3-%da%a9%db%92-%d8%b3%d8%a7%d8%aa%da%be-%d9%88%db%8c%d8%a8-%d8%b3%d8%a7%d8%a6%d9%b9-%db%8c%d9%88%d8%b2%d8%b1-%d8%a7%d9%86%d9%b9","status":"publish","type":"post","link":"https:\/\/umang.pk\/en_us\/2026\/10\/19\/%d8%a7%db%92-%d8%a2%d8%a6%db%8c-%d9%be%d8%b1%d8%a7%d9%85%d9%be%d9%b9%d8%b3-%da%a9%db%92-%d8%b3%d8%a7%d8%aa%da%be-%d9%88%db%8c%d8%a8-%d8%b3%d8%a7%d8%a6%d9%b9-%db%8c%d9%88%d8%b2%d8%b1-%d8%a7%d9%86%d9%b9\/","title":{"rendered":"\u0627\u06d2 \u0622\u0626\u06cc \u067e\u0631\u0627\u0645\u067e\u0679\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u06cc\u0648\u0632\u0631 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u0648 \u062a\u06cc\u0632\u06cc \u0633\u06d2 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4"},"content":{"rendered":"\n<div id=\"\">\n<p>\u0627\u06cc\u06a9 \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u06cc\u0648\u0632\u0631 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 (UI) \u062c\u0648 HTML\u060c CSS\u060c \u0627\u0648\u0631 \u062c\u0632\u0648 \u06a9\u0648\u0688 \u062e\u0648\u062f \u0644\u06a9\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u06af\u06be\u0646\u0679\u06d2 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0628 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0633\u0627\u062f\u06c1 \u0627\u0644\u0641\u0627\u0638 \u0645\u06cc\u06ba \u0628\u06cc\u0627\u0646 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 AI \u06a9\u0648\u0688\u0646\u06af \u0679\u0648\u0644 \u06a9\u0648 \u067e\u06c1\u0644\u0627 \u0648\u0631\u0698\u0646 \u0644\u06a9\u06be\u0646\u06d2 \u062f\u06cc\u06ba\u06d4<\/p>\n<p>\u062a\u0627\u06c1\u0645\u060c \u0646\u062a\u0627\u0626\u062c \u0622\u067e \u06a9\u06d2 \u0627\u0634\u0627\u0631\u06d2 \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 \u0645\u062e\u062a\u0635\u0631\u060c \u0645\u0628\u06c1\u0645 \u0627\u0634\u0627\u0631\u06d2 \u0622\u067e \u06a9\u0648 \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0631\u0646\u06af\u0648\u06ba \u0627\u0648\u0631 \u0628\u0627\u0631 \u0628\u0627\u0631 \u06a9\u0648\u0688 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0635\u0641\u062d\u06c1 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0688\u06be\u06cc\u0631\u0648\u06ba\u060c \u0641\u0627\u0626\u0644\u0648\u06ba \u0627\u0648\u0631 \u0642\u0648\u0627\u0639\u062f \u06a9\u06d2 \u0644\u06cc\u06d2 \u0648\u0627\u0636\u062d \u0627\u0634\u0627\u0631\u06d2 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0648\u0688 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0622\u067e \u0633\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2 \u06a9\u06c1 \u0627\u0633 \u0642\u0633\u0645 \u06a9\u0627 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u06cc\u0633\u06d2 \u0644\u06a9\u06be\u0646\u0627 \u06c1\u06d2\u06d4 Next.js\u060c Tailwind CSS \u0627\u0648\u0631 shadcn\/ui \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u0641\u06a9\u0633\u0688 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0679\u0688 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u0644 \u0633\u06a9\u0631\u06cc\u0646 \u06c1\u06cc\u0631\u0648 \u0633\u06cc\u06a9\u0634\u0646 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u062e\u0631 \u0645\u06cc\u06ba\u060c \u0622\u067e \u06a9\u0648 \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 \u06a9\u06cc\u0633\u06d2:<\/p>\n<ol>\n<li>\n<p>UI \u067e\u0631\u0627\u0645\u067e\u0679\u0633 \u0644\u06a9\u06be\u06cc\u06ba \u062c\u0648 \u0644\u06d2 \u0622\u0624\u0679\u060c \u0627\u062c\u0632\u0627\u0621\u060c \u0631\u0646\u06af\u060c \u0648\u0642\u0641\u06c1 \u06a9\u0627\u0631\u06cc\u060c \u0627\u0648\u0631 \u062c\u0648\u0627\u0628\u06cc \u0631\u0648\u06cc\u06d2 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u067e\u0631\u0627\u0645\u067e\u0679 \u067e\u0631 UI \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0679\u0648\u0644 \u06a9\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688 \u06a9\u0627 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062f\u06c1\u0631\u0627\u0626\u06d2 \u062c\u0627\u0646\u06d2 \u0648\u0627\u0644\u06d2 AI \u062a\u062d\u0631\u06cc\u0631\u06cc \u06a9\u0648\u0688 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 shadcn\/ui \u0627\u062c\u0632\u0627\u0621 \u0627\u0648\u0631 \u0622\u0641 \u062f\u06cc \u0634\u06cc\u0644\u0641 \u0628\u0644\u0627\u06a9\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0686\u06be\u0648\u0679\u06d2 \u0641\u0627\u0644\u0648 \u0627\u067e \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u067e\u0646\u06d2 \u0646\u062a\u0627\u0626\u062c \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0622\u062e\u0631\u06cc \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba\u060c \u062c\u0627\u0646\u0686\u06cc\u06ba \u0627\u0648\u0631 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ol>\n<h2 id=\"heading-table-of-contents\">\u0627\u0646\u0688\u06cc\u06a9\u0633<\/h2>\n<h2 id=\"heading-prerequisites\">\u0634\u0631\u0637\u06cc\u06ba<\/h2>\n<p>\u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p>\u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 Node.js \u06a9\u0627 \u0645\u0648\u062c\u0648\u062f\u06c1 LTS \u0648\u0631\u0698\u0646 \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06a9\u0648\u0688 \u0627\u06cc\u0688\u06cc\u0679\u0631<\/p>\n<\/li>\n<li>\n<p>AI \u06a9\u0648\u0688\u0646\u06af \u0679\u0648\u0644\u0632 \u0648\u0627\u0644\u06d2 \u0627\u06a9\u0627\u0624\u0646\u0679\u0633 \u062c\u06cc\u0633\u06d2 \u06a9\u0631\u0633\u0631\u060c \u06a9\u0644\u0627\u0688\u060c v0\u060c \u0648\u063a\u06cc\u0631\u06c1\u06d4<\/p>\n<\/li>\n<li>\n<p>React \u0627\u0648\u0631 TypeScript \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0644\u0645<\/p>\n<\/li>\n<li>\n<p>Tailwind CSS \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0627 \u0628\u0646\u06cc\u0627\u062f\u06cc \u0639\u0644\u0645<\/p>\n<\/li>\n<\/ul>\n<p>\u0622\u067e \u06a9\u0648 \u0645\u0648\u0634\u0646 \u06a9\u0648 \u062c\u0627\u0646\u0646\u06d2 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u060c \u062c\u0648 \u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06c1\u0648\u0646\u06d2 \u0648\u0627\u0644\u06cc \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u06c1\u06d2\u06d4 \u062c\u0628 \u0622\u067e \u062c\u0627\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0622\u067e \u06a9\u0648 \u067e\u062a\u06c1 \u0686\u0644 \u062c\u0627\u0626\u06d2 \u06af\u0627 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-why-shadcnui\">shadcn\/ui \u06a9\u06cc\u0648\u06ba\u061f<\/h2>\n<p><strong>Shadcon UI<\/strong> Tailwind \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc React \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0645\u062c\u0645\u0648\u0639\u06c1 \u06c1\u06d2 \u062c\u0633\u06d2 CSS \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0627\u06cc\u06a9 \u0628\u0627\u0642\u0627\u0639\u062f\u06c1 \u062c\u0632\u0648 \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0633\u06d2 \u0645\u062e\u062a\u0644\u0641 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u067e\u06cc\u06a9\u06cc\u062c \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u0627\u0646\u0633\u0679\u0627\u0644 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0645\u0627\u062e\u0630 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 CLI \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>AI \u0679\u0648\u0644\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u06cc\u06c1 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 \u06a9\u0648\u0688 \u0622\u067e \u06a9\u0627 \u0627\u067e\u0646\u0627 \u06c1\u06d2\u06d4 <code>components\/ui<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0641\u0648\u0644\u0688\u0631 \u0645\u06cc\u06ba \u0645\u062d\u0641\u0648\u0638 \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0679\u0648\u0644 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u067e\u0691\u06be\u0627 \u062c\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0635\u0627\u0631\u0641 \u0628\u06be\u06cc \u067e\u0691\u06be \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u062c\u0628 \u0622\u067e \u06a9\u0648\u0626\u06cc \u0679\u0648\u0644 \u0645\u0627\u0646\u06af\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u06cc\u06c1 \u06a9\u06c1\u062a\u0627 \u06c1\u06d2 &quot;\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0645\u06cc\u0646\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4&#8221; \u0627\u06cc\u06a9 \u0646\u06cc\u0627 \u062c\u0632\u0648 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0639\u06cc\u0646 \u0645\u0637\u0627\u0628\u0642 \u062c\u0632 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06a9\u0686\u06be \u0627\u06c1\u0645 \u0641\u0648\u0627\u0626\u062f:<\/p>\n<ul>\n<li>\n<p><strong>\u0688\u06cc\u0641\u0627\u0644\u0679 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc<\/strong>\u0645\u06cc\u0646\u0648 \u0627\u0648\u0631 \u0628\u0679\u0646 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u06a9\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u0627\u0648\u0631 \u0641\u0648\u06a9\u0633 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>Tailwind CSS \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0628\u0646\u0627\u06cc\u0627 \u06af\u06cc\u0627\u06d4<\/strong>\u0644\u06c1\u0630\u0627 \u06a9\u0648\u0626\u06cc \u0627\u0636\u0627\u0641\u06cc \u0627\u0633\u0679\u0627\u0626\u0644 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0646\u06c1\u06cc\u06ba \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u0634\u062a\u0631\u06a9\u06c1 \u062a\u06be\u06cc\u0645 \u0645\u062a\u063a\u06cc\u0631\u0627\u062a<\/strong>\u0631\u0646\u06af \u062a\u0645\u0627\u0645 \u0627\u062c\u0632\u0627\u0621 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0631\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0648\u0626\u06cc \u062a\u0627\u0644\u0627 \u0646\u06c1\u06cc\u06ba<\/strong>\u06a9\u06cc\u0648\u0646\u06a9\u06c1 \u06a9\u0648\u0688 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u06c1\u06d2 \u0627\u0648\u0631 \u0627\u0633 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u06cc \u062c\u0627\u0633\u06a9\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<h2 id=\"heading-what-is-shadcnspace\">ShadcnSpace \u06a9\u06cc\u0627 \u06c1\u06d2\u061f<\/h2>\n<p>ShadcnSpace 1000+ \u062e\u0648\u0628\u0635\u0648\u0631\u062a\u06cc \u0633\u06d2 \u0688\u06cc\u0632\u0627\u0626\u0646 \u06a9\u0631\u062f\u06c1\u060c \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc\u060c \u0642\u0627\u0628\u0644 \u062a\u0631\u062a\u06cc\u0628 \u0641\u0631\u06cc \u0627\u0648\u0631 \u067e\u0631\u0648 \u06a9\u0627 \u0645\u062c\u0645\u0648\u0639\u06c1 \u06c1\u06d2\u06d4 <strong>Shadcn UI \u0628\u0644\u0627\u06a9<\/strong>\u0627\u062c\u0632\u0627\u0621 \u0627\u0648\u0631 React\/Next.js \u0627\u06cc\u067e\u0633 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679\u0633\u06d4 \u06cc\u06c1 Tailwind CSS \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0645\u0642\u0627\u0645\u06cc UI \u0627\u0648\u0631 Radix UI \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e Shadcn CLI \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u06a9\u0627\u067e\u06cc \u0627\u0648\u0631 \u067e\u06cc\u0633\u0679 \u06cc\u0627 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u06cc\u06a9 \u0628\u0644\u0627\u06a9 UI \u06a9\u0627 \u0627\u06cc\u06a9 \u0628\u0691\u0627 \u062d\u0635\u06c1 \u06c1\u06d2\u060c \u062c\u06cc\u0633\u06d2 \u06c1\u06cc\u0631\u0648 \u0633\u06cc\u06a9\u0634\u0646\u060c \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631\u060c \u06cc\u0627 \u0645\u062c\u0645\u0648\u0639\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0635\u0641\u062d\u06c1 \u0644\u06d2 \u0622\u0624\u0679\u06d4 <strong>shadcn\/ui \u062c\u0632\u0648<\/strong>.<\/p>\n<p>\u06c1\u0631 \u0628\u0644\u0627\u06a9 \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u0645\u0641\u062a \u06cc\u0627 \u067e\u0631\u0648 \u0628\u0644\u0627\u06a9\u0633 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0634\u0627\u0631\u06d2 \u06a9\u0627\u067e\u06cc \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0633 \u06a9\u06d2 \u0628\u0639\u062f \u0622\u067e \u0627\u0633 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0648 \u0627\u067e\u0646\u06d2 AI \u0679\u0648\u0644 \u0645\u06cc\u06ba \u067e\u06cc\u0633\u0679 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 \u0679\u0648\u0644 \u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0641\u0627\u0626\u0644 \u0628\u0646\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p>\u06cc\u06c1 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06c1\u06cc\u0631\u0648 \u0628\u0644\u0627\u06a9\u0633 \u06a9\u0648 \u0628\u0637\u0648\u0631 \u0645\u062b\u0627\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0622\u067e \u0628\u0627\u0644\u06a9\u0644 \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u0645\u06a9\u0645\u0644 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u06cc\u06c1 \u06a9\u06cc\u0648\u06ba \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-what-youll-build\">\u06a9\u06cc\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u0646\u0627 \u06c1\u06d2<\/h2>\n<p>\u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u062d\u0635\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0627\u067e\u0646\u0627 \u06c1\u06cc\u0631\u0648 \u0635\u0641\u062d\u06c1 \u0628\u0646\u0627\u0626\u06cc\u06ba:<\/p>\n<p><strong>\u06c1\u06cc\u0631\u0648 \u0633\u06cc\u06a9\u0634\u0646<\/strong><\/p>\n<ul>\n<li>\n<p>\u0644\u0648\u067e\u0646\u06af \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u0644 \u0633\u06a9\u0631\u06cc\u0646 \u0633\u06cc\u06a9\u0634\u0646<\/p>\n<\/li>\n<li>\n<p>\u0645\u062a\u0646 \u06a9\u0648 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06af\u06c1\u0631\u0627 \u0627\u0648\u0648\u0631\u0644\u06d2<\/p>\n<\/li>\n<li>\n<p>\u0645\u062a\u0646 \u06a9\u06cc \u0627\u06cc\u06a9 \u0645\u062e\u062a\u0635\u0631 \u0644\u0627\u0626\u0646 \u06a9\u06d2 \u0622\u06af\u06d2 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u0648 \u06af\u06be\u0645\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0628\u0691\u06cc \u0633\u0631\u062e\u06cc \u062c\u0648 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0645\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc \u0645\u062f\u06be\u0645 \u06c1\u0648\u062c\u0627\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0646\u0648\u0628\u0627\u0631<\/strong><\/p>\n<ul>\n<li>\n<p>\u0628\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u0644\u0648\u06af\u0648 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u06a9\u0633\u0688 \u06c1\u06cc\u0688\u0631 \u0627\u0648\u0631 \u062f\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u06af\u0648\u0644 \u0645\u06cc\u0646\u0648 \u0628\u0679\u0646<\/p>\n<\/li>\n<li>\n<p>\u067e\u0633 \u0645\u0646\u0638\u0631 \u062c\u0648 80px \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0628\u06be\u0631 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0645\u06cc\u0646\u0648 \u062c\u0633 \u0645\u06cc\u06ba \u067e\u0627\u0646\u0686 \u0644\u0646\u06a9\u0633\u060c \u06af\u06c1\u0631\u06d2 \u0627\u0648\u0631 \u062f\u06be\u0646\u062f\u0644\u06d2 \u0627\u0648\u0648\u0631\u0644\u06d2 \u0627\u0648\u0631 \u0631\u0627\u0628\u0637\u06d2 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06c1\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<\/ul>\n<p><strong>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0644\u0646\u06a9\u0633<\/strong><\/p>\n<p>\u0622\u067e \u06a9\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u062f\u0631\u062c \u0630\u06cc\u0644 \u0627\u0633\u0679\u06cc\u06a9 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2:<\/p>\n<p>\u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0627\u0628\u06be\u06cc \u062a\u06a9 \u06a9\u0648\u0626\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2 \u062a\u0648 \u0627\u06cc\u06a9 \u0628\u0646\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 shadcn\/ui \u0633\u06cc\u0679 \u0627\u067e \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npx create-next-app@latest hero-demo --typescript --tailwind --eslint --app\ncd hero-demo\nnpx shadcn@latest init\n<\/code><\/pre>\n<p>\u0645\u0648\u062c\u0648\u062f\u06c1 \u0648\u0631\u0698\u0646 <code>create-next-app<\/code> React 19 \u0627\u0648\u0631 Tailwind CSS 4 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-1-how-to-write-an-effective-ui-prompt\">\u0645\u0631\u062d\u0644\u06c1 1: \u0645\u0624\u062b\u0631 UI \u067e\u0631\u0627\u0645\u067e\u0679\u0633 \u06a9\u06cc\u0633\u06d2 \u0644\u06a9\u06be\u06cc\u06ba\u06d4<\/h2>\n<p>\u0627\u06cc\u06a9 \u0627\u0686\u06be\u0627 \u067e\u0631\u0627\u0645\u067e\u0679 \u0645\u062e\u062a\u0635\u0631 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u06cc \u0637\u0631\u062d \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0679\u0648\u0644 \u06a9\u0648 \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u06cc\u0627 \u0628\u0646\u0627\u0646\u0627 \u06c1\u06d2\u060c \u06a9\u0646 \u067e\u0631\u0632\u0648\u06ba \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06a9\u0646 \u0627\u0635\u0648\u0644\u0648\u06ba \u067e\u0631 \u0639\u0645\u0644 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u06c1\u0645 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u067e\u0627\u0646\u0686 \u0646\u06a9\u0627\u062a \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u06cc\u06ba \u06af\u06d2:<\/p>\n<ol>\n<li>\n<p><strong>\u06cc\u06c1\u0627\u06ba \u0627\u06cc\u06a9 \u0645\u062d\u0646\u062a\u06cc \u0641\u06c1\u0631\u0633\u062a \u06c1\u06d2:<\/strong> \u0628\u062a\u0627\u0624 \u06a9\u06c1\u0627\u06ba \u062c\u0627 \u0631\u06c1\u06d2 \u06c1\u0648\u061f \u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c &quot;\u0633\u0628 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u0627\u06cc\u06a9 \u0686\u0633\u067e\u0627\u06ba \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0627\u0648\u0631 \u0646\u06cc\u0686\u06d2 \u0628\u0627\u0626\u06cc\u06ba \u0637\u0631\u0641 \u0627\u06cc\u06a9 \u0633\u0631\u062e\u06cc \u06c1\u06d2\u06d4&#8221;<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u062c\u0632\u0627\u0621:<\/strong> \u0627\u067e\u0646\u06d2 \u0645\u0637\u0644\u0648\u0628\u06c1 \u062d\u0635\u06d2 \u06a9\u0627 \u0646\u0627\u0645 \u062f\u06cc\u06ba\u060c \u062c\u06cc\u0633\u06d2 \u06a9\u06c1 \u0645\u0648\u0628\u0627\u0626\u0644 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0645\u06cc\u0646\u0648\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0631\u0646\u06af:<\/strong> \u0645\u0631\u06a9\u0632\u06cc \u0631\u0646\u06af \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u06c1 \u06a9\u06c1\u0627\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0633 \u0637\u0631\u062d \u062a\u06be\u06cc\u0645 \u0679\u0648\u06a9\u0646 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u0631\u06cc\u06ba: <code>text-foreground<\/code> \u062c\u06c1\u0627\u06ba \u0622\u067e \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba.<\/p>\n<\/li>\n<li>\n<p><strong>\u0648\u0642\u0641\u06c1:<\/strong> \u062f\u0631\u062c \u0630\u06cc\u0644 \u0627\u0635\u0648\u0644\u0648\u06ba \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0622\u0626\u06cc\u06ba: &quot;\u0645\u0648\u0627\u062f \u06a9\u0648 \u0632\u06cc\u0627\u062f\u06c1 \u0633\u06d2 \u0632\u06cc\u0627\u062f\u06c1 7xl \u06a9\u06cc \u0686\u0648\u0691\u0627\u0626\u06cc \u0645\u06cc\u06ba \u0631\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0641\u0642\u06cc \u067e\u06cc\u0688\u0646\u06af \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4&#8221;<\/p>\n<\/li>\n<li>\n<p><strong>\u062c\u0648\u0627\u0628\u06cc \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc:<\/strong> \u0645\u062c\u06be\u06d2 \u0628\u062a\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u06d2 \u0641\u0648\u0646 \u0645\u06cc\u06ba \u06a9\u06cc\u0627 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0622\u0626\u06cc \u06c1\u06d2\u061f<\/p>\n<\/li>\n<\/ol>\n<p>\u0622\u067e \u06a9\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0628\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u067e\u06cc\u063a\u0627\u0645\u0627\u062a \u0648\u0635\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u062f\u0648 \u0637\u0631\u06cc\u0642\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<h3 id=\"heading-option-1-generate-a-prompt-with-an-ai-tool\">\u0622\u067e\u0634\u0646 1: AI \u0679\u0648\u0644 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0627\u06cc\u06a9 \u067e\u0631\u0627\u0645\u067e\u0679 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0627\u0644\u0641\u0627\u0638 \u0645\u06cc\u06ba \u0628\u06cc\u0627\u0646 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0648\u067e\u0631 \u062f\u06cc\u06d2 \u06af\u0626\u06d2 \u067e\u0627\u0646\u0686 \u0646\u06a9\u0627\u062a \u067e\u0631 \u0639\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u0645\u062b\u0627\u0644\u0648\u06ba \u0645\u06cc\u06ba \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-text\">Create a full-screen hero section for a Next.js project with\nTypeScript and Tailwind CSS.\n\nLayout:\n- A sticky navbar with a logo on the left and a round menu button on the right.\n- The menu button opens a dropdown with five links.\n- A looping background video with a dark overlay so the text stays readable.\n- A large headline and a short line of text at the bottom left.\n\nRules:\n- Use the shadcn\/ui DropdownMenu for the menu.\n- Use Motion for a fade-in on the headline and the navbar.\n- Keep content inside max-w-7xl with horizontal padding.\n- On small screens, reduce the headline size and stack the content in one column.\n\nSplit the code into small files: page, navbar, nav link, hero, and index.\n<\/code><\/pre>\n<p>\u0646\u0648\u0679 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0627\u0633 \u067e\u0631\u0627\u0645\u067e\u0679 \u0633\u06d2 \u06a9\u06cc\u0627 \u062e\u0627\u0631\u062c \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0646\u06c1\u06cc\u06ba \u06a9\u06c1\u062a\u0627 \u06a9\u06c1 &quot;\u0627\u0633\u06d2 \u062c\u062f\u06cc\u062f \u0628\u0646\u0627\u0626\u06cc\u06ba&#8221; \u06cc\u0627 &quot;\u0627\u0633\u06d2 \u062e\u0648\u0628\u0635\u0648\u0631\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4&#8221; \u06cc\u06c1 \u0627\u0644\u0641\u0627\u0638 \u0679\u0648\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u06a9\u0686\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u0631\u062a\u06d2\u06d4<\/p>\n<h3 id=\"heading-option-2-copy-a-prompt-from-a-block-page\">\u0622\u067e\u0634\u0646 2: \u0628\u0644\u0627\u06a9 \u067e\u06cc\u062c \u0633\u06d2 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u062f\u0648\u0633\u0631\u0627 \u0637\u0631\u06cc\u0642\u06c1 \u062a\u06cc\u0632 \u062a\u0631 \u06c1\u06d2 \u0627\u06af\u0631 \u0628\u0644\u0627\u06a9\u0633 \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u0622\u067e \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06a9\u06d2 \u0642\u0631\u06cc\u0628 \u06c1\u0648\u06ba\u06d4 ShadcnSpace \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u06a9\u06be\u0648\u0644\u06cc\u06ba \u0627\u0648\u0631 \u0645\u0641\u062a \u06cc\u0627 \u067e\u0631\u0648 \u0628\u0644\u0627\u06a9\u0633 \u06a9\u0648 \u0645\u0646\u062a\u062e\u0628 \u06a9\u0631\u06cc\u06ba\u06d4 <strong>\u0634\u0627\u062f\u0633\u0646<\/strong> \u0644\u0627\u0626\u0628\u0631\u06cc\u0631\u06cc \u0628\u0644\u0627\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 \u0628\u0644\u0627\u06a9 \u0633\u06d2 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u0627\u067e\u0646\u06d2 AI \u0679\u0648\u0644 \u0645\u06cc\u06ba \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633 \u067e\u0631\u0627\u0645\u067e\u0679 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u06c1\u06cc \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06cc \u0636\u0631\u0648\u0631\u06cc\u0627\u062a\u060c \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u062a\u0645\u0627\u0645 \u0631\u0627\u0633\u062a\u06d2 \u0627\u0648\u0631 \u0645\u06a9\u0645\u0644 \u06a9\u0648\u0688 \u0634\u0627\u0645\u0644 \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0644\u0627 \u0645\u0631\u062d\u0644\u06c1 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06cc\u06c1 \u06a9\u06cc\u0633\u0627 \u0644\u06af\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-2-how-to-generate-the-first-ui\">\u0645\u0631\u062d\u0644\u06c1 2: \u0627\u067e\u0646\u0627 \u067e\u06c1\u0644\u0627 UI \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h2>\n<p>\u06cc\u06c1 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0622\u067e\u0634\u0646 2 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0622\u067e \u067e\u0648\u0631\u0627 \u067e\u0631\u0627\u0645\u067e\u0679 \u0633\u06cc\u06a9\u06be \u0633\u06a9\u06cc\u06ba\u06d4 \u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0648 \u0627\u067e\u0646\u06d2 AI \u0679\u0648\u0644 \u0645\u06cc\u06ba \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u067e\u0646\u0627 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0641\u0648\u0644\u0688\u0631 \u06a9\u06be\u0648\u0644\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0679\u0648\u0644 \u0641\u0627\u0626\u0644\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06a9\u0631 \u0633\u06a9\u06d2\u06d4<\/p>\n<pre><code class=\"language-text\">Create a Shadcn block in the codebase.\nThe codebase should support following:\n- Shadcn project structure\n- React ^19\n- Tailwind CSS ^4\n- TypeScript ^5\n\nIf it doesn't, provide instructions on how to setup project via shadcn CLI, install Tailwind CSS v4 or Typescript.\n\nHere are the files for the block:\n\nFile path: app\/hero-03\/page.tsx\n(code for this file)\n\nFile path: components\/shadcn-space\/blocks\/hero-03\/hero.tsx\n(code for this file)\n\nFile path: components\/shadcn-space\/blocks\/hero-03\/navbar.tsx\n(code for this file)\n\nFile path: components\/shadcn-space\/blocks\/hero-03\/navlink.tsx\n(code for this file)\n\nFile path: components\/shadcn-space\/blocks\/hero-03\/index.tsx\n(code for this file)\n\n## Implementation Steps\n1. Inspect components.json. Determine the correct aliased paths for components, utils, ui, lib, and hooks. Update all import statements and file paths in the code above to match before creating any files.\n2. Install dependencies. Using the project's package manager (npm \/ yarn \/ pnpm \/ bun), install any dependencies and devDependencies listed in the block files.\n3. Install shadcn\/ui components. Using the appropriate shadcn CLI runner for the project (npx \/ pnpm dlx \/ bunx --bun), add any required shadcn\/ui components.\n4. Add global styles. Append only the CSS variables and custom styles referenced by this block to globals.css. Do not add unrelated styles.\n5. Create block files. Write each file to the exact target path shown above. Do not rename or restructure files.\n6. Verify imports. Ensure every import resolves correctly against the project's alias configuration. Fix any broken paths before finishing.\n\nThe component must be fully functional and visually match the provided code. Once all steps are complete, the block is ready to use in the project.\n<\/code><\/pre>\n<p>\u0627\u0635\u0644 \u067e\u0631\u0627\u0645\u067e\u0679 \u0645\u06cc\u06ba\u060c \u06c1\u0631 \u0641\u0627\u0626\u0644 \u06a9\u0627 \u0645\u06a9\u0645\u0644 \u06a9\u0648\u0688 \u0627\u0633 \u06a9\u06d2 \u0641\u0627\u0626\u0644 \u067e\u0627\u062a\u06be \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u06c1\u0648\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u0645\u0627\u0645 \u067e\u0627\u0646\u0686 \u0641\u0627\u0626\u0644\u06cc\u06ba \u0646\u06cc\u0686\u06d2 \u062f\u06a9\u06be\u0627\u0626\u06d2 \u06af\u0626\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0627\u0634\u0627\u0631\u06c1 \u0686\u0627\u0631 \u0648\u062c\u0648\u06c1\u0627\u062a \u06a9\u06cc \u0628\u0646\u0627\u0621 \u067e\u0631 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<ul>\n<li>\n<p>\u0622\u067e \u0639\u06cc\u0646 \u0627\u0633\u0679\u06cc\u06a9 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0679\u0648\u0644 \u0648\u0631\u0698\u0646 \u06a9\u0627 \u0627\u0646\u062f\u0627\u0632\u06c1 \u0646\u06c1\u06cc\u06ba \u0644\u06af\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062f\u0631\u0633\u062a \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0631\u0627\u0633\u062a\u06d2 \u062f\u0631\u062c \u06c1\u06cc\u06ba \u0644\u06c1\u0630\u0627 \u0679\u0648\u0644 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0646\u06c1\u06cc\u06ba \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u062a\u0631\u062a\u06cc\u0628 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u06a9\u06d2\u060c \u0679\u0648\u0644 \u0622\u067e \u06a9\u06cc \u0645\u062f\u062f \u06a9\u0631\u06d2 \u06af\u0627\u06d4 <code>components.json<\/code> \u0641\u0627\u0626\u0644 \u0644\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p>\u06cc\u06c1 \u0622\u062e\u0631\u06cc \u0644\u0627\u0626\u0646 \u0645\u06cc\u06ba &quot;Done&#8221; \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0627\u06a9\u06c1 \u0679\u0648\u0644 \u06a9\u0648 \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648 \u06a9\u06c1 \u06a9\u0628 \u0631\u06a9\u0646\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0622\u067e \u0627\u0633 \u067e\u06cc\u0679\u0631\u0646 \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0627\u0634\u0627\u0631\u06d2 \u0645\u06cc\u06ba \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-the-generated-files\">\u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u0641\u0627\u0626\u0644<\/h3>\n<p>\u0679\u0648\u0644 \u0645\u06a9\u0645\u0644 \u06c1\u0648\u0646\u06d2 \u067e\u0631\u060c \u06cc\u06c1 \u067e\u0627\u0646\u0686 \u0641\u0627\u0626\u0644\u06cc\u06ba \u062a\u06cc\u0627\u0631 \u06a9\u0631\u06d2 \u06af\u0627\u06d4 \u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u0635\u0641\u062d\u06c1 \u0686\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06c1\u0631 \u0628\u06cc\u0627\u0646 \u06a9\u0648 \u067e\u0691\u06be\u06cc\u06ba\u06d4<\/p>\n<p><code>app\/hero-03\/page.tsx<\/code><\/p>\n<pre><code class=\"language-tsx\">import HeroPage from \"@\/components\/shadcn-space\/blocks\/hero-03\/index\";\n\nconst Page = () => {\n  return (\n    <heropage\/>\n  );\n};\n\nexport default Page;\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0641\u0627\u0626\u0644 \u06c1\u06d2\u06d4 <code>\/hero-03<\/code> \u0631\u0648\u0679 \u0627\u0648\u0631 \u0631\u06cc\u0646\u0688\u0631 \u0628\u0644\u0627\u06a9\u0633\u06d4<\/p>\n<p><code>components\/shadcn-space\/blocks\/hero-03\/hero.tsx<\/code><\/p>\n<pre><code class=\"language-tsx\">\"use client\";\n\nimport { useRef } from \"react\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { motion, useInView } from \"motion\/react\";\n\nconst HeroSection: React.FC = () => {\n  const sectionRef = useRef<htmlelement>(null);\n  const isInView = useInView(sectionRef, { once: true, amount: 0.1 });\n\n  return (\n    <section ref=\"{sectionRef}\" classname=\"relative flex items-end text-white bg-black h-full min-h-screen overflow-hidden\">\n      {\/* Background Video *\/}\n      <video classname=\"absolute top-0 left-0 w-full h-full object-cover\" loop=\"\" autoplay=\"\" muted=\"\" playsinline=\"\">\n        <source src=\"https:\/\/images.shadcnspace.com\/assets\/video\/hero05-banner-video.mp4\" type=\"video\/mp4\"\/>\n      <\/video>\n\n      {\/* Overlay to improve text readability *\/}\n      \n\n      {\/* Content *\/}\n      <div classname=\"relative z-10 mx-auto max-w-7xl px-4 xl:px-16\">\n        <div classname=\"flex flex-col gap-4 sm:gap-6 py-10 sm:py-16\">\n          <div classname=\"flex items-start gap-2.5 md:gap-4\">\n            \n            <p classname=\"sm:text-base text-sm sm:leading-6 leading-5 font-normal text-white sm:max-w-sm\">\n              We create <span classname=\"text-teal-400\">high-performing<\/span>{\" \"}\n              digital designs that elevate brands and enhance conversions.\n            <\/p>\n          <\/div>\n          <motion.div initial=\"{{\" opacity:=\"\" y:=\"\" animate=\"{isInView\" :=\"\" transition=\"{{\" duration:=\"\" ease:=\"\" delay:=\"\" classname=\"flex sm:flex-row flex-col items-start lg:items-baseline gap-4\">\n            \n            \n          <\/motion.div>\n        <\/div>\n      <\/div>\n    <\/section>\n  );\n};\n\nexport default HeroSection;\n<\/htmlelement><\/code><\/pre>\n<p>\u06c1\u06cc\u0631\u0648 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<p><strong>1. \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0627 \u067e\u0633 \u0645\u0646\u0638\u0631:<\/strong> \u06a9\u06c1 <code>video<\/code> \u0639\u0646\u0635\u0631 \u06a9\u0627 \u0645\u0642\u0635\u062f <code>loop<\/code>, <code>autoPlay<\/code>, <code>muted<\/code>\u0627\u0648\u0631 <code>playsInline<\/code>. \u0628\u0631\u0627\u0624\u0632\u0631 \u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0648 \u0635\u0631\u0641 \u0627\u0633 \u0648\u0642\u062a \u0622\u0679\u0648 \u067e\u0644\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0628 \u0648\u06c1 \u062e\u0627\u0645\u0648\u0634 \u06c1\u0648\u06ba\u06d4 <code>playsInline<\/code> \u0627\u067e\u0646\u06d2 \u0622\u0626\u06cc \u0641\u0648\u0646 \u067e\u0631 \u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0648 \u0641\u0644 \u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u06a9\u06be\u0644\u0646\u06d2 \u0633\u06d2 \u0631\u0648\u06a9\u06cc\u06ba\u06d4 \u06a9\u06c1 <code>object-cover<\/code> \u06a9\u0644\u0627\u0633 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u0648 \u0628\u063a\u06cc\u0631 \u06a9\u06be\u06cc\u0646\u0686\u06d2 \u0627\u06cc\u06a9 \u062d\u0635\u06d2 \u06a9\u0648 \u0628\u06be\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p><strong>2. \u0627\u0648\u0648\u0631\u0644\u06d2:<\/strong> \u06a9\u06c1 <code>bg-black\/50<\/code> \u067e\u0631\u062a \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u0627\u0648\u067e\u0631 \u0628\u06cc\u0679\u06be\u06cc \u06c1\u06d2\u06d4 \u06cc\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u06a9\u06d2 \u06c1\u0631 \u0641\u0631\u06cc\u0645 \u0645\u06cc\u06ba \u0633\u0641\u06cc\u062f \u0645\u062a\u0646 \u06a9\u0648 \u067e\u0691\u06be\u0646\u06d2 \u06a9\u06d2 \u0642\u0627\u0628\u0644 \u0628\u0646\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><strong>3. \u0645\u0646\u0638\u0631 \u0645\u06cc\u06ba \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc:<\/strong> \u06a9\u06c1 <code>useInView<\/code> \u06c1\u06a9 \u0648\u0627\u067e\u0633\u06cc <code>true<\/code> \u062c\u0628 10% \u062d\u0635\u06c1 \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2 (<code>amount: 0.1<\/code>)\u06d4 \u0627\u062e\u062a\u06cc\u0627\u0631\u0627\u062a <code>once: true<\/code> \u0627\u06af\u0631 \u0622\u067e \u0627\u0633\u06d2 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u0686\u0644\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06c1\u0631 \u0628\u0627\u0631 \u062c\u0628 \u0622\u067e \u067e\u06cc\u0686\u06be\u06d2 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648 \u0633\u0631\u062e\u06cc \u062f\u0648\u0628\u0627\u0631\u06c1 \u062e\u062a\u0645 \u0646\u06c1\u06cc\u06ba \u06c1\u0648\u06af\u06cc\u06d4<\/p>\n<p><strong>4. \u062c\u0648\u0627\u0628\u06cc \u0633\u0631\u062e\u06cc:<\/strong> \u0628\u0631\u06cc\u06a9 \u067e\u0648\u0627\u0626\u0646\u0679 \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0633\u0631\u062e\u06cc \u06a9\u0627 \u0633\u0627\u0626\u0632 \u0628\u0691\u06be\u062a\u0627 \u06c1\u06d2\u06d4 <code>text-4xl<\/code> \u0622\u067e \u06a9\u06d2 \u0641\u0648\u0646 \u067e\u0631 <code>xl:text-9xl<\/code> \u0628\u0691\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631\u06d4 \u0686\u06be\u0648\u0679\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646\u0648\u06ba \u067e\u0631\u060c \u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0631 \u062a\u06cc\u0631 \u0627\u06cc\u06a9 \u06a9\u0627\u0644\u0645 \u0645\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba (<code>flex-col<\/code>)\u060c \u0627\u0648\u0631 <code>sm<\/code> \u0627\u0648\u067e\u0631 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u06cc\u06a9 \u0642\u0637\u0627\u0631 \u0645\u06cc\u06ba \u0628\u06cc\u0679\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>5. \u06a9\u06cc\u0648\u06ba<\/strong> <code>\"use client\"<\/code> <strong>\u0622\u067e \u06a9\u0648 \u0636\u0631\u0648\u0631\u062a \u06c1\u0648 \u06af\u06cc:<\/strong> \u0641\u0627\u0626\u0644 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u06c1\u06a9 \u06c1\u06d2 (<code>useRef<\/code>, <code>useInView<\/code>) \u0627\u0648\u0631 \u0645\u0648\u0634\u0646 \u062f\u0648\u0646\u0648\u06ba \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 Next.js \u0627\u06cc\u067e \u0631\u0648\u0679\u0631 \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2: <code>\"use client\"<\/code> \u0633\u0628 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u062f\u0627\u06cc\u0627\u062a \u06c1\u06cc\u06ba.<\/p>\n<p><code>components\/shadcn-space\/blocks\/hero-03\/navbar.tsx<\/code><\/p>\n<pre><code class=\"language-tsx\">\"\ud074\ub77c\uc774\uc5b8\ud2b8 \uc0ac\uc6a9\"; import { useEffect, useState, useRef } \uc5d0\uc11c \"\ubc18\uc751\ud558\ub2e4\"; NavLink \uac00\uc838\uc624\uae30 \"@\/\uad6c\uc131 \uc694\uc18c\/shadcn-space\/blocks\/hero-03\/navlink\"; \uc5d0\uc11c \uac00\uc838\uc624\uae30 { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, } \"@\/\ucef4\ud3ec\ub10c\ud2b8\/ui\/\ub4dc\ub86d\ub2e4\uc6b4 \uba54\ub274\"; \uc5d0\uc11c { \uac19\uc74c, X } \uac00\uc838\uc624\uae30 \"\uc790\uac01\ubc18\uc751\"; \ub2e4\uc74c\uc5d0\uc11c {CN } \uac00\uc838\uc624\uae30 \"@\/lib\/\uc720\ud2f8\"; \uc5d0\uc11c { \ubaa8\uc158, useInView, AnimatePresence } \uac00\uc838\uc624\uae30 \"\ubaa8\uc158\/\ubc18\uc751\"; navData = { \uc81c\ubaa9: \ubb38\uc790\uc5f4; href: \ubb38\uc790\uc5f4; }; NavbarProps \uc720\ud615 = { NavigationData: navData[]; }; const \ud5e4\ub354 = ({ NavigationData }: NavbarProps) => { const [menuOpen, setMenuOpen] = useState(false); const [sticky, setSticky] = useState(false); const headerRef = useRef<htmlelement>(\ub110); const isInView = useInView(headerRef, { \ud55c \ubc88: true, \uae08\uc561: 0.1 }); const handlerScroll = () => { setSticky(window.scrollY >= 80); }; useEffect(() => { window.addEventListener(\"\uc2a4\ud06c\ub864\"\ud578\ub4e4\uc2a4\ud06c\ub864); return () => { window.removeEventListener(\"\uc2a4\ud06c\ub864\"\ud578\ub4e4\uc2a4\ud06c\ub864); }; }, []); \ubc18\ud488 (\n    <header ref=\"{headerRef}\" classname=\"{cn(\" top-0=\"\" z-50=\"\" w-full=\"\" border-t-4=\"\" border-teal-400=\"\" transition-all=\"\" duration-500=\"\" ease-in-out=\"\" h-20=\"\" flex=\"\" items-center=\"\" before:absolute=\"\" before:top-0=\"\" before:left-0=\"\" before:w-full=\"\" before:h-0=\"\" before:bg-teal-400=\"\" before:transition-all=\"\" before:duration-500=\"\" before:ease-in-out=\"\" sticky=\"\">\n      <motion.nav initial=\"{{\" opacity:=\"\" y:=\"\" animate=\"{isInView\" :=\"\" transition=\"{{\" duration:=\"\" ease:=\"\" classname=\"{cn(\" mx-auto=\"\" max-w-7xl=\"\" px-4=\"\" xl:px-16=\"\" flex=\"\" item-center=\"\" justify-between=\"\" w-full=\"\">\n        \n          \n        \n        <div>\n          <animatepresence>\n            {menuOpen && (\n              <motion.div initial=\"{{\" opacity:=\"\" animate=\"{{\" exit=\"{{\" onclick=\"{()\"> setMenuOpen(false)}\n                className=\"fixed inset-0 z-40 bg-black\/40 backdrop-blur-sm\"\n              \/>\n            )}\n          <\/motion.div><\/animatepresence>\n            <dropdownmenu open=\"{menuOpen}\" onopenchange=\"{setMenuOpen}\">\n              {\/* Trigger *\/}\n              <dropdownmenutrigger classname=\"bg-white text-black flex items-center justify-center rounded-full sm:h-12 sm:w-12 h-10 w-10 p-2.5 sm:p-4 outline-none cursor-pointer\">\n                <equal size=\"{16}\"\/>\n              <\/dropdownmenutrigger>\n              {\/* Content *\/}\n              <dropdownmenucontent align=\"end\" sideoffset=\"{20}\" classname=\"min-w-xs sm:min-w-sm bg-background py-8 px-6 shadow-lg rounded-3xl border-none -mt-16\">\n                <div classname=\"flex flex-col gap-6\">\n                  {\/* Header *\/}\n                  <div classname=\"flex items-center justify-between\">\n                    <p classname=\"text-lg font-medium text-foreground\">Menu<\/p>\n                    <button onclick=\"{()\"> setMenuOpen(false)}\n                      className=\"text-muted-foreground hover:text-foreground cursor-pointer\"\n                    >\n                      <x size=\"{20}\"\/>\n                    <\/button>\n                  <\/div>\n                  <hr classname=\"border-border\"\/>\n                  {\/* Navigation *\/}\n                  <ul classname=\"flex flex-col gap-4 pb-4\">\n                    {navigationData.map((menuItem, index) => (\n                      <navlink key=\"{index}\" item=\"{menuItem}\"\/>\n                    ))}\n                  <\/ul>\n                  {\/* Contact *\/}\n                  \n                <\/div>\n              <\/dropdownmenucontent>\n            <\/dropdownmenu>\n        <\/div>\n      <\/motion.nav>\n    <\/header>\n  );\n};\n\nexport default Header;\n<\/htmlelement><\/code><\/pre>\n<p>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2:<\/p>\n<p><strong>1. \u0628\u0691\u06be\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0633 \u0645\u0646\u0638\u0631 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0641\u06a9\u0633\u0688 \u06c1\u06cc\u0688\u0631:<\/strong> \u06c1\u06cc\u0688\u0631 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>sticky top-0<\/code>. \u06a9\u0648\u0626\u06cc \u0631\u0627\u0633\u062a\u06c1 \u0646\u06c1\u06cc\u06ba <code>before:<\/code> \u0686\u06be\u062f\u0645 \u0639\u0646\u0627\u0635\u0631 \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba: <code>before:h-0<\/code> \u0627\u0648\u0631 \u0628\u0691\u06be\u0648 <code>before:h-full<\/code> \u062c\u0628 <code>sticky<\/code> \u06cc\u06c1 \u0633\u0686 \u06c1\u06d2\u06d4 \u0627\u0633 \u0633\u06d2 \u0679\u06cc\u0644 \u06a9\u0627 \u067e\u0633 \u0645\u0646\u0638\u0631 \u0641\u0648\u0631\u06cc \u0637\u0648\u0631 \u067e\u0631 \u0633\u0648\u0626\u0686 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u0646\u06cc\u0686\u06d2 \u067e\u06be\u0633\u0644 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p><strong>2. \u0635\u0641\u0627\u0626\u06cc \u06a9\u06d2 \u0630\u0631\u06cc\u0639\u06d2 \u0627\u0633\u06a9\u0631\u0648\u0644 \u06a9\u0627 \u067e\u062a\u06c1 \u0644\u06af\u0627\u0646\u0627:<\/strong> \u06a9\u06c1 <code>handleScroll<\/code> \u0641\u06cc\u0686\u0631 \u0633\u06cc\u0679 <code>sticky<\/code> \u06a9\u0648 <code>true<\/code> 80px \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u06d4 \u06a9\u06c1 <code>useEffect<\/code> \u0627\u06cc\u06a9 \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633\u06d2 \u06a9\u0644\u06cc\u0646 \u0627\u067e \u0641\u0646\u06a9\u0634\u0646 \u0645\u06cc\u06ba \u06c1\u0679\u0627 \u062f\u06cc\u06ba\u06d4 \u06a9\u0644\u06cc\u0646 \u0627\u067e \u06a9\u06d2 \u0628\u063a\u06cc\u0631\u060c \u0633\u0646\u0646\u06d2 \u0648\u0627\u0644\u0627 \u062c\u0632\u0648 \u06a9\u06d2 \u0627\u0646 \u0645\u0627\u0624\u0646\u0679 \u06c1\u0648\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0628\u06be\u06cc \u0645\u062a\u062d\u0631\u06a9 \u0631\u06c1\u06d2 \u06af\u0627\u06d4<\/p>\n<p><strong>3. \u06a9\u0646\u0679\u0631\u0648\u0644 \u0634\u062f\u06c1 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646:<\/strong> \u06a9\u06c1 <code>open<\/code> \u0627\u0648\u0631 <code>onOpenChange<\/code> \u067e\u0631\u067e\u0633 \u0645\u06cc\u0646\u0648 \u06c1\u06cc\u06ba\u06d4 <code>menuOpen<\/code> \u0635\u0648\u0631\u062a \u062d\u0627\u0644 \u0644\u06c1\u0630\u0627\u060c \u0622\u067e \u06a9\u0644\u0648\u0632 \u0628\u0679\u0646 \u0627\u0648\u0631 \u0627\u0648\u0648\u0631\u0644\u06d2 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0645\u06cc\u0646\u0648 \u06a9\u0648 \u0628\u0627\u06c1\u0631 \u0633\u06d2 \u0628\u0646\u062f \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>4. \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0627\u0648\u0648\u0631\u0644\u06d2:<\/strong> <code>AnimatePresence<\/code>    \u0635\u0641\u062d\u06c1 \u0686\u06be\u0648\u0691\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0633\u06cc\u0627\u06c1 \u0627\u0648\u0648\u0631\u0644\u06d2 \u06a9\u0648 \u062e\u062a\u0645 \u06a9\u0631 \u062f\u06cc\u06ba\u06d4 \u0628\u0635\u0648\u0631\u062a \u062f\u06cc\u06af\u0631\u060c \u0627\u0648\u0648\u0631\u0644\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u06cc\u06af\u0632\u0679 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u06a9\u06d2 \u063a\u0627\u0626\u0628 \u06c1\u0648 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<p><strong>5. \u0645\u06cc\u0646\u0648 \u0645\u06cc\u06ba \u062a\u06be\u06cc\u0645 \u0679\u0648\u06a9\u0646:<\/strong> \u0645\u06cc\u0646\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2: <code>bg-background<\/code>, <code>text-foreground<\/code>, <code>text-muted-foreground<\/code>\u0627\u0648\u0631 <code>border-border<\/code>. \u06cc\u06c1 \u0622\u067e \u06a9\u06cc \u0637\u0631\u0641 \u0633\u06d2 \u06c1\u06cc\u06ba <strong>shadcn\/ui<\/strong> \u0686\u0648\u0646\u06a9\u06c1 \u0627\u06cc\u06a9 \u062a\u06be\u06cc\u0645 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0645\u06cc\u0646\u0648 \u06c1\u0644\u06a9\u06d2 \u0627\u0648\u0631 \u06af\u06c1\u0631\u06d2 \u0631\u0646\u06af\u0648\u06ba \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p><code>components\/shadcn-space\/blocks\/hero-03\/navlink.tsx<\/code><\/p>\n<pre><code class=\"language-tsx\">\ub2e4\uc74c\uc5d0\uc11c {CN } \uac00\uc838\uc624\uae30 \"@\/lib\/\uc720\ud2f8\"; \ub0b4\ubcf4\ub0b4\uae30 \uc720\ud615 NavLinkItem = { \uc81c\ubaa9: \ubb38\uc790\uc5f4; href: \ubb38\uc790\uc5f4; isActive?: \ubd80\uc6b8; }; \ub0b4\ubcf4\ub0b4\uae30 \uc778\ud130\ud398\uc774\uc2a4 NavLinkProps { \ud56d\ubaa9: NavLinkItem; onClick?: () => \ubb34\ud6a8; } const NavLink: React.FC<navlinkprops> = ({ \ud56d\ubaa9, }) => { const { \uc81c\ubaa9, href, isActive } = \ud56d\ubaa9; \ubc18\ud488 (\n    <li classname=\"{cn(`group\" flex=\"\" items-center=\"\" transition-all=\"\" duration-500=\"\" ease-in-out=\"\" w-fit=\"\" isactive=\"\" :=\"\" hover:gap-3=\"\">\n      <div classname=\"{cn(\" transition-all=\"\" duration-500=\"\" ease-in-out=\"\" isactive=\"\" opacity-100=\"\" :=\"\" opacity-0=\"\" group-hover:max-w-6=\"\" group-hover:opacity-100=\"\">\n        <img decoding=\"async\" src=\"https:\/\/images.shadcnspace.com\/assets\/svgs\/primary-leaf.svg\" alt=\"\u0627\u06cc\u0648\u0627\u0631\u0688\" height=\"{20}\" width=\"{20}\" classname=\"animate-spin\" title=\"\">\n      <\/div>\n      \n        {title}\n      \n    <\/li>\n  );\n};\n\nexport default NavLink;\n<\/navlinkprops><\/code><\/pre>\n<p>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0644\u0646\u06a9\u0633 \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<p><strong>1. \u06af\u0631\u0648\u067e \u06c1\u0648\u0648\u0631:<\/strong> \u06a9\u06c1 <code>group<\/code> \u06a9\u0644\u0627\u0633 <code>li<\/code> \u0622\u0626\u06cc\u06a9\u0646 \u0631\u06cc\u067e\u0631 \u06a9\u0648 \u0631\u06cc\u0633\u067e\u0627\u0646\u0633\u06cc\u0648 \u0628\u0646\u0627\u0626\u06cc\u06ba \u062c\u0628 \u0622\u067e \u06cc\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u067e\u0648\u0631\u06cc \u0622\u0626\u0679\u0645 \u067e\u0631 \u06c1\u0648\u0648\u0631 \u06a9\u0631\u06cc\u06ba: <code>group-hover:<\/code> \u06a9\u0644\u0627\u0633<\/p>\n<p><strong>2. \u0644\u06d2 \u0622\u0624\u0679 \u062c\u0645\u067e \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0627\u0634\u0627\u0639\u062a:<\/strong> \u0622\u0626\u06cc\u06a9\u0646 \u0631\u06cc\u067e\u0631 \u0627\u0633 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06c1\u0648\u062a\u0627 \u06c1\u06d2: <code>max-w-0<\/code> \u06a9\u0648 <code>max-w-6<\/code>\u0627\u0648\u0631 <code>gap<\/code> \u0645\u06cc\u06ba \u0628\u0691\u06be\u0646\u0627 <code>gap-0<\/code> \u06a9\u0648 <code>gap-3<\/code>. \u06a9\u06c1 <code>overflow-hidden<\/code> \u06a9\u0644\u0627\u0633 \u0627\u0633 \u0648\u0642\u062a \u062a\u06a9 \u0622\u0626\u06cc\u06a9\u0646 \u06a9\u0648 \u0686\u06be\u067e\u0627 \u062f\u06cc\u062a\u06cc \u06c1\u06d2 \u062c\u0628 \u062a\u06a9 \u06a9\u06c1 \u062c\u06af\u06c1 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0646\u06c1 \u06c1\u0648 \u062c\u0627\u0626\u06d2\u06d4 \u0641\u0639\u0627\u0644 \u0644\u0646\u06a9\u0633 \u06c1\u0645\u06cc\u0634\u06c1 \u0627\u06cc\u06a9 \u0622\u0626\u06cc\u06a9\u0646 \u062f\u06a9\u06be\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>3. \u062f\u0631\u062c \u06a9\u0631\u062f\u06c1 \u0627\u0634\u06cc\u0627\u0621:<\/strong> \u06a9\u06c1 <code>NavLinkItem<\/code> \u0642\u0633\u0645\u06cc\u06ba \u0628\u0631\u0622\u0645\u062f \u06a9\u06cc \u062c\u0627\u062a\u06cc \u06c1\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0648\u0627\u0644\u062f\u06cc\u0646 \u0627\u0646 \u06a9\u0648 \u0627\u067e\u0646\u0627 \u0688\u06cc\u0679\u0627 \u062f\u0627\u062e\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u06cc\u06ba\u06d4<\/p>\n<p><code>components\/shadcn-space\/blocks\/hero-03\/index.tsx<\/code><\/p>\n<pre><code class=\"language-tsx\">import Navbar from \"@\/components\/shadcn-space\/blocks\/hero-03\/navbar\";\nimport { NavLinkItem } from \"@\/components\/shadcn-space\/blocks\/hero-03\/navlink\";\nimport HeroSection from \"@\/components\/shadcn-space\/blocks\/hero-03\/hero\";\n\nconst HeroPage = () => {\n  const navigationData: NavLinkItem[] = [\n    { title: \"Home\", href: \"#\", isActive: true },\n    { title: \"Properties\", href: \"#\", isActive: false },\n    { title: \"Blog\", href: \"#\", isActive: false },\n    { title: \"Contact\", href: \"#\", isActive: false },\n    { title: \"Docs\", href: \"#\", isActive: false },\n  ];\n  return (\n    <>\n      <navbar navigationdata=\"{navigationData}\"\/>\n      <main classname=\"-mt-20\">\n        <herosection\/>\n      <\/main>\n    >\n  );\n};\n\nexport default HeroPage;\n<\/code><\/pre>\n<p>\u0627\u0646\u0688\u06cc\u06a9\u0633 \u0641\u0627\u0626\u0644\u06cc\u06ba \u06a9\u06cc\u0633\u06d2 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba:<\/p>\n<p><strong>1. \u0688\u06cc\u0679\u0627 \u0627\u06cc\u06a9 \u062c\u06af\u06c1 \u067e\u0631 \u0631\u06a9\u06be\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/strong> \u06a9\u06c1 <code>navigationData<\/code> \u0635\u0641\u0648\u06ba \u0645\u06cc\u06ba \u0631\u0648\u0627\u0628\u0637 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0635\u0631\u0641 \u0648\u06c1\u06cc \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0622\u067e \u06a9\u0648 \u0645\u0648\u0635\u0648\u0644 \u06c1\u0648\u0627 \u06c1\u06d2\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u06a9\u0648 \u0686\u06be\u0648\u0626\u06d2 \u0628\u063a\u06cc\u0631 \u0644\u0646\u06a9\u0633 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p><strong>2. \u0645\u0646\u0641\u06cc \u0645\u0627\u0631\u062c\u0646 \u06c1\u06cc\u0631\u0648 \u06a9\u0648 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u06a9\u06d2 \u0646\u06cc\u0686\u06d2 \u06af\u06be\u0633\u06cc\u0679\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/strong> \u0646\u0648\u06cc\u0648\u0627 \u06c1\u06d2\u06d4 <code>h-20<\/code> (80px)\u06d4 \u06a9\u06c1 <code>-mt-20<\/code> \u06a9\u0644\u0627\u0633 \u0645\u06cc\u06ba <code>main<\/code> \u06c1\u06cc\u0631\u0648 \u06a9\u0648 \u0627\u0633\u06cc \u0645\u0642\u062f\u0627\u0631 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u0644\u06d2 \u062c\u0627\u0626\u06cc\u06ba \u062a\u0627\u06a9\u06c1 \u0648\u06cc\u0688\u06cc\u0648 \u0641\u06a9\u0633\u0688 \u06c1\u06cc\u0688\u0631 \u06a9\u06d2 \u067e\u06cc\u0686\u06be\u06d2 \u067e\u0648\u0631\u06cc \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u0648 \u0628\u06be\u0631 \u062f\u06d2\u06d4<\/p>\n<h3 id=\"heading-what-to-check-before-you-run-it\">\u062f\u0648\u0691\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0686\u06cc\u0632\u06cc\u06ba<\/h3>\n<p>\u0635\u0641\u062d\u06c1 \u06a9\u06be\u0648\u0644\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u06a9\u0648\u0688 \u06a9\u0648 \u067e\u0691\u06be\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0631\u062c \u0630\u06cc\u0644 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba:<\/p>\n<ul>\n<li>\n<p><strong>\u062f\u0631\u0622\u0645\u062f \u06a9\u0631\u06cc\u06ba:<\/strong> \u06c1\u0631 \u062f\u0631\u0622\u0645\u062f\u06cc \u0631\u0627\u0633\u062a\u06c1 \u06c1\u06d2\u06d4 <code>components.json<\/code> \u0639\u0631\u0641\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0627\u0646\u062d\u0635\u0627\u0631:<\/strong> \u0622\u067e \u06a9\u06d2 \u067e\u0627\u0633 \u0679\u0648\u0644 \u0627\u0646\u0633\u0679\u0627\u0644 \u06c1\u0648\u0646\u0627 \u0636\u0631\u0648\u0631\u06cc \u06c1\u06d2\u06d4 <code>motion<\/code> \u0627\u0648\u0631 <code>lucide-react<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>shadcn\/ui \u0627\u062c\u0632\u0627\u0621:<\/strong> \u06a9\u06c1 <code>dropdown-menu<\/code> \u062c\u0632\u0648 \u0645\u0648\u062c\u0648\u062f \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4 <code>components\/ui<\/code>. \u0627\u06af\u0631 \u0646\u06c1\u06cc\u06ba \u062a\u0648 \u0686\u0644\u0627\u0626\u06cc\u06ba: <code>npx shadcn@latest add dropdown-menu<\/code>.<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u0644\u0627\u0633 \u06a9\u0627 \u0646\u0627\u0645:<\/strong> Tailwind \u0627\u0646 \u06a9\u0644\u0627\u0633\u0648\u06ba \u06a9\u0648 \u0646\u0638\u0631 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062c\u0648 \u0627\u0633\u06d2 \u0646\u06c1\u06cc\u06ba \u062c\u0627\u0646\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0622\u067e \u06a9\u0648 \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u0679\u0627\u0626\u067e\u0646\u06af \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0627\u06ba \u0645\u0644\u06cc\u06ba \u06af\u06cc\u06d4 \u0645\u06cc\u06ba <code>navbar.tsx<\/code>, <code>nav<\/code> \u0639\u0646\u0635\u0631 \u0645\u06cc\u06ba <code>item-center<\/code>\u0635\u062d\u06cc\u062d \u06a9\u0644\u0627\u0633 \u06c1\u06d2: <code>items-center<\/code>. \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u0645\u0631\u062d\u0644\u06c1 4 \u0645\u06cc\u06ba \u062d\u0644 \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<\/ul>\n<p>\u0627\u0633\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0635\u0631\u0641 \u0686\u0646\u062f \u0645\u0646\u0679 \u0644\u06cc\u0646\u06d2 \u0633\u06d2 \u0628\u0639\u062f \u0645\u06cc\u06ba \u0622\u067e \u06a9\u0627 \u06a9\u0627\u0641\u06cc \u0648\u0642\u062a \u0628\u0686 \u062c\u0627\u0626\u06d2 \u06af\u0627\u06d4<\/p>\n<h2 id=\"heading-step-3-how-to-build-with-reusable-shadcnui-components\">\u0645\u0631\u062d\u0644\u06c1 3: \u062f\u0648\u0628\u0627\u0631\u06c1 \u0642\u0627\u0628\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 shadcn\/ui \u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/h2>\n<p>AI \u0679\u0648\u0644\u0632 \u0627\u06a9\u062b\u0631 \u0627\u06cc\u06a9 \u06c1\u06cc \u0645\u0627\u0631\u06a9 \u0627\u067e \u06a9\u0648 \u062f\u06c1\u0631\u0627\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0645\u06cc\u0646\u0648\u060c \u0628\u0679\u0646\u060c \u0627\u0648\u0631 \u06a9\u0627\u0631\u0688 \u06c1\u0631 \u0627\u06cc\u06a9 \u06a9\u0627 \u0627\u067e\u0646\u0627 \u06c1\u06cc\u0646\u0688 \u0631\u0627\u0626\u0679\u0646\u06af \u0627\u0633\u0679\u0627\u0626\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0648\u06c1 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u06d2 \u0646\u06c1\u06cc\u06ba \u0644\u06af\u062a\u06d2\u06d4 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0627\u062c\u0632\u0627\u0621 \u0627\u0633 \u0645\u0633\u0626\u0644\u06d2 \u06a9\u0648 \u062d\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06cc\u06c1 \u0628\u0644\u0627\u06a9 \u062a\u06cc\u0646 \u0639\u0627\u062f\u0627\u062a \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u062c\u0646\u06c1\u06cc\u06ba \u0622\u067e \u06a9\u0627\u067e\u06cc \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-use-one-component-for-each-job\">\u06c1\u0631 \u06a9\u0627\u0645 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u062c\u0632\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0645\u06cc\u0646\u0648 shadcn\/ui \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 <code>DropdownMenu<\/code> \u06c1\u0627\u062a\u06be \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0645\u06cc\u0646\u0648 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2\u060c \u0622\u067e \u06a9\u0648 \u0627\u06cc\u06a9 \u0679\u06cc\u0633\u0679 \u0634\u062f\u06c1 \u062c\u0632\u0648 \u0633\u06d2 \u06a9\u06cc \u0628\u0648\u0631\u0688 \u0633\u067e\u0648\u0631\u0679\u060c \u0641\u0648\u06a9\u0633 \u06c1\u06cc\u0646\u0688\u0644\u0646\u06af\u060c \u0627\u0648\u0631 \u062f\u0631\u0633\u062a \u0642\u0627\u0628\u0644 \u0631\u0633\u0627\u0626\u06cc \u062e\u0635\u0648\u0635\u06cc\u0627\u062a \u0645\u0644\u062a\u06cc \u06c1\u06cc\u06ba\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u0633\u06cc \u062f\u0648\u0633\u0631\u06d2 \u0635\u0641\u062d\u06c1 \u067e\u0631 \u062f\u0648\u0633\u0631\u0627 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0634\u0627\u0645\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u062a\u0648 \u06cc\u06c1 \u0627\u06cc\u06a9 \u062c\u06cc\u0633\u0627 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u06af\u0627 \u0627\u0648\u0631 \u0628\u0631\u062a\u0627\u0624 \u06a9\u0631\u06d2 \u06af\u0627\u06d4<\/p>\n<h3 id=\"heading-use-cn-for-conditional-classes\">\u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>cn()<\/code> \u0645\u0634\u0631\u0648\u0637 \u06a9\u0644\u0627\u0633\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2<\/h3>\n<p>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0627\u0648\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0644\u0646\u06a9\u0633 \u062f\u0648\u0646\u0648\u06ba \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba: <code>cn()<\/code> \u0633\u06d2 <code>@\/lib\/utils<\/code>. \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0648 \u0636\u0645 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062d\u0627\u0644\u0627\u062a \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u06cc\u06ba \u062c\u06cc\u0633\u06d2: <code>sticky && \"before:h-full\"<\/code>. \u06cc\u06c1 \u0645\u062a\u0636\u0627\u062f \u0679\u06cc\u0644 \u0648\u0646\u0688 \u06a9\u0644\u0627\u0633\u0632 \u06a9\u0648 \u0628\u06be\u06cc \u06c1\u0679\u0627\u062a\u0627 \u06c1\u06d2\u060c \u062c\u0648 \u06a9\u06c1 \u0631\u06cc\u06af\u0648\u0644\u0631 \u0679\u06cc\u0645\u067e\u0644\u06cc\u0679 \u0633\u0679\u0631\u0646\u06af\u0632 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-keep-data-apart-from-markup\">\u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0645\u0627\u0631\u06a9 \u0627\u067e \u0633\u06d2 \u0627\u0644\u06af \u0631\u06a9\u06be\u06cc\u06ba<\/h3>\n<p>\u0644\u0646\u06a9 \u06cc\u06c1\u0627\u06ba \u0645\u0648\u062c\u0648\u062f \u06c1\u06d2: <code>navigationData<\/code> \u0635\u0641 \u0627\u0648\u0631 <code>NavLink<\/code> \u062c\u0632\u0648 \u0631\u06cc\u0646\u0688\u0631 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0635\u0641\u062d\u06c1 \u0634\u0627\u0645\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u0635\u0641 \u0645\u06cc\u06ba \u0627\u06cc\u06a9 \u0622\u0628\u062c\u06cc\u06a9\u0679 \u0634\u0627\u0645\u0644 \u06a9\u0631\u06cc\u06ba\u06d4 \u0646\u06cc\u0627 JSX \u0646\u06c1 \u0644\u06a9\u06be\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-when-to-start-from-a-block\">\u0628\u0644\u0627\u06a9 \u0633\u06d2 \u06a9\u0628 \u0634\u0631\u0648\u0639 \u06a9\u0631\u0646\u0627 \u06c1\u06d2\u06d4<\/h3>\n<p>\u06c1\u06cc\u0631\u0648 \u0627\u0648\u0631 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0635\u0631\u0641 \u0634\u0631\u0648\u0639\u0627\u062a \u06c1\u06cc\u06ba\u06d4 \u0627\u0635\u0644 \u067e\u0631\u0648\u0688\u06a9\u0679 \u06a9\u0648 \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u0632\u060c \u0679\u06cc\u0628\u0644\u0632 \u0627\u0648\u0631 \u0686\u0627\u0631\u0679\u0633 \u06a9\u06cc \u0628\u06be\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u0648\u062a\u06cc \u06c1\u06d2\u06d4 \u0627\u0646 \u062a\u0645\u0627\u0645 \u06a9\u0627\u0645\u0648\u06ba \u06a9\u0648 \u067e\u0631\u0627\u0645\u067e\u0679 \u0633\u06d2 \u0644\u06a9\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u0648\u0642\u062a \u0644\u06af\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u0624\u0679 \u067e\u0679 \u0627\u06a9\u062b\u0631 \u0635\u0641\u062d\u06c1 \u0628\u06c1 \u0635\u0641\u062d\u06c1 \u0645\u062e\u062a\u0644\u0641 \u0646\u0638\u0631 \u0622\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0628\u0644\u0627\u06a9\u0633 \u0627\u06cc\u06a9 \u0622\u0632\u0645\u0627\u0626\u0634\u06cc \u0646\u0642\u0637\u06c1 \u0622\u063a\u0627\u0632 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u0627 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0627\u0646\u062a\u0638\u0627\u0645\u06cc \u0639\u0644\u0627\u0642\u06d2 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0631\u062a\u06d2 \u0648\u0642\u062a <strong>shadcn \u0688\u06cc\u0634 \u0628\u0648\u0631\u0688<\/strong> \u0628\u0644\u0627\u06a9 \u0633\u0627\u0626\u0688\u0628\u0627\u0631\u0632\u060c \u06c1\u06cc\u0688\u0631\u0632 \u0627\u0648\u0631 \u0645\u0648\u0627\u062f \u06a9\u06d2 \u0639\u0644\u0627\u0642\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u0631\u062a\u06cc\u0628 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u06a9\u0627 \u0645\u0631\u06a9\u0632\u06cc \u06a9\u0631\u062f\u0627\u0631 \u062f\u06be\u0646\u062f\u0644\u0627\u06c1\u0679\u060c \u0622\u0626\u06cc\u06a9\u0646\u0632 \u06a9\u0648 \u06af\u06be\u0648\u0645\u0646\u06d2 \u0627\u0648\u0631 \u0627\u0633\u06a9\u0631\u0648\u0644 \u067e\u0631 \u0645\u0628\u0646\u06cc \u0688\u0633\u067e\u0644\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062d\u0631\u06a9\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0645\u0632\u06cc\u062f \u062d\u0631\u06a9\u062a \u06a9\u06cc \u0636\u0631\u0648\u0631\u062a \u06c1\u06d2\u06d4 <strong>shadcn \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0634\u0646 \u0628\u0644\u0627\u06a9<\/strong> \u0645\u062c\u0645\u0648\u0639\u06c1 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u06a9\u0633 \u0637\u0631\u062d \u0645\u062a\u062d\u0631\u06a9 \u062a\u0635\u0627\u0648\u06cc\u0631 \u0627\u0633 \u0637\u0631\u062d \u06a9\u06d2 \u0628\u0644\u0627\u06a9\u0633 \u0633\u06d2 \u0628\u0646\u062a\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u06a9\u0633\u06cc \u0628\u0644\u0627\u06a9 \u06a9\u0648 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0627\u0633 \u06a9\u0627 \u06a9\u0648\u0688 \u067e\u0691\u06be\u06cc\u06ba \u0627\u0648\u0631 \u0627\u0633 \u06a9\u0627 \u0644\u0627\u0626\u0633\u0646\u0633 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u060c \u0628\u0627\u0644\u06a9\u0644 \u0627\u0633\u06cc \u0637\u0631\u062d \u062c\u06cc\u0633\u06d2 \u0622\u067e \u06a9\u0633\u06cc \u067e\u06cc\u06a9\u062c \u06a9\u0648 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-4-how-to-improve-the-result-with-follow-up-prompts\">\u0645\u0631\u062d\u0644\u06c1 4: \u0641\u0627\u0644\u0648 \u0627\u067e \u067e\u0631\u0627\u0645\u0679\u0633 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0646\u062a\u0627\u0626\u062c \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0628\u06c1\u062a\u0631 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4<\/h2>\n<p>\u0688\u0631\u0627\u0641\u0679 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631 \u067e\u06c1\u0644\u06d2 \u0646\u062a\u06cc\u062c\u06c1 \u067e\u0631 \u06a9\u0627\u0631\u0631\u0648\u0627\u0626\u06cc \u06a9\u0631\u06cc\u06ba\u06d4 \u0641\u06cc \u067e\u0631\u0627\u0645\u067e\u0679 \u0635\u0631\u0641 \u0627\u06cc\u06a9 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0622\u067e \u062f\u06cc\u06a9\u06be \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u06a9\u06c1 \u06c1\u0631 \u067e\u0631\u0627\u0645\u067e\u0679 \u0646\u06d2 \u06a9\u06cc\u0627 \u06a9\u06cc\u0627\u06d4 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u0645\u0633\u0627\u0626\u0644 \u06a9\u0627 \u0628\u0627\u0639\u062b \u0628\u0646\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u062a\u0648 Git \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06a9\u0627\u0644\u0639\u062f\u0645 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06af\u0644\u06d2 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0648 \u062a\u0646\u06af \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-fix-a-typo\">\u0679\u0627\u0626\u067e\u0646\u06af \u06a9\u06cc \u063a\u0644\u0637\u06cc \u06a9\u0648 \u0679\u06be\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba<\/h3>\n<p>\u0645\u0631\u062d\u0644\u06c1 2 \u0633\u06d2 \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u0633\u06d2 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-text\">In components\/shadcn-space\/blocks\/hero-03\/navbar.tsx, change the class \"item-center\" to \"items-center\" on the motion.nav element.\nDo not change anything else.\n<\/code><\/pre>\n<h3 id=\"heading-make-colors-consistent\">\u0631\u0646\u06af\u0648\u06ba \u06a9\u0648 \u0645\u0633\u062a\u0642\u0644 \u0631\u06a9\u06be\u06cc\u06ba<\/h3>\n<p>\u0628\u0644\u0627\u06a9\u0633 \u0627\u06cc\u0646\u06a9\u0631\u0646\u06af \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 <code>teal-400<\/code> \u06a9\u0626\u06cc \u062c\u06af\u06c1\u0648\u06ba \u067e\u0631 \u06a9\u0644\u0627\u0633\u0632 \u06a9\u0627 \u0627\u0646\u0639\u0642\u0627\u062f \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u062a\u06be\u06cc\u0645 \u0679\u0648\u06a9\u0646 \u06a9\u0648 \u0628\u0639\u062f \u0645\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u0627 \u0622\u0633\u0627\u0646 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-text\">Replace every teal-400 class in the hero-03 block files with the primary theme token. If needed, add the color to the CSS variables in globals.css. Do not change anything else.\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u0622\u067e \u0627\u06cc\u06a9 \u0633\u06cc \u0627\u06cc\u0633 \u0627\u06cc\u0633 \u0645\u062a\u063a\u06cc\u0631 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06a9\u06d2 \u067e\u0648\u0631\u06d2 \u0628\u0644\u0627\u06a9 \u06a9\u0627 \u0627\u0646\u062f\u0627\u0632 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-improve-responsive-behavior\">\u0628\u06c1\u062a\u0631 \u0631\u062f \u0639\u0645\u0644 \u0648\u0627\u0644\u0627 \u0633\u0644\u0648\u06a9<\/h3>\n<pre><code class=\"language-text\">In hero.tsx, make the headline wrap on screens narrower than 640px and keep the arrow button below the headline. Keep desktop styles unchanged.\n<\/code><\/pre>\n<h3 id=\"heading-handle-a-slow-video\">\u0633\u0633\u062a \u0648\u06cc\u0688\u06cc\u0648 \u067e\u0631\u0648\u0633\u06cc\u0633\u0646\u06af<\/h3>\n<p>\u0648\u06cc\u0688\u06cc\u0648\u0632 \u06a9\u0648 \u0631\u06cc\u0645\u0648\u0679 \u06cc\u0648 \u0622\u0631 \u0627\u06cc\u0644 \u0633\u06d2 \u0644\u0648\u0688 \u06a9\u06cc\u0627 \u062c\u0627\u062a\u0627 \u06c1\u06d2\u06d4 \u0635\u0627\u0631\u0641\u06cc\u0646 \u0627\u0633 \u06a9\u06d2 \u0644\u0648\u0688 \u06c1\u0648\u0646\u06d2 \u062a\u06a9 \u0633\u06cc\u06a9\u0634\u0646 \u06a9\u0627 \u067e\u0633 \u0645\u0646\u0638\u0631 \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u06d4 \u0648\u0627\u0636\u062d \u0645\u062a\u0628\u0627\u062f\u0644 \u06a9\u06d2 \u0644\u06cc\u06d2 \u067e\u0648\u0686\u06be\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-text\">In hero.tsx, add a poster attribute to the video element. Keep the\nbg-black background on the section so the text stays readable while the video loads or if it fails.\n<\/code><\/pre>\n<h3 id=\"heading-handle-an-empty-menu\">\u062e\u0627\u0644\u06cc \u0645\u06cc\u0646\u0648 \u06c1\u06cc\u0646\u0688\u0644\u0646\u06af<\/h3>\n<p>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u06a9\u0627 \u0646\u0642\u0634\u06c1 \u062e\u062a\u0645 \u06c1\u0648 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 <code>navigationData<\/code>. \u0627\u06af\u0631 \u0635\u0641 \u062e\u0627\u0644\u06cc \u06c1\u06d2 \u062a\u0648\u060c \u0645\u06cc\u0646\u0648 \u0644\u0646\u06a9\u0633 \u06a9\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u06be\u0644\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u067e\u0646\u06d2 \u06a9\u06cc\u0633 \u06a9\u0648 \u0633\u0646\u0628\u06be\u0627\u0644\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0679\u0648\u0644 \u0633\u06d2 \u067e\u0648\u0686\u06be\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-text\">In navbar.tsx, if navigationData is empty, do not render the menu button.\n<\/code><\/pre>\n<p>\u0679\u0648\u0644 \u06a9\u0648 \u0627\u0633 \u0637\u0631\u062d \u06a9\u06d2 \u0686\u06cc\u06a9 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u0648 \u0644\u067e\u06cc\u0679\u0646\u0627 \u0686\u0627\u06c1\u0626\u06d2:<\/p>\n<pre><code class=\"language-tsx\">{navigationData.length > 0 && (\n  <dropdownmenu open=\"{menuOpen}\" onopenchange=\"{setMenuOpen}\">\n    {\/* trigger and content stay the same *\/}\n  <\/dropdownmenu>\n)}\n<\/code><\/pre>\n<h3 id=\"heading-move-fixed-content-into-props\">\u0637\u06d2 \u0634\u062f\u06c1 \u0645\u0648\u0627\u062f \u06a9\u0648 \u0633\u06c1\u0627\u0631\u0627 \u062f\u06cc\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0645\u0646\u062a\u0642\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0645\u06cc\u06ba \u0641\u0648\u0646 \u0646\u0645\u0628\u0631\u0632 \u0627\u0648\u0631 \u0627\u06cc \u0645\u06cc\u0644 \u0627\u06cc\u0688\u0631\u06cc\u0633 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u062c\u0632\u0648 \u06a9\u06d2 \u0627\u0646\u062f\u0631 \u0644\u06a9\u06be\u06d2 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u067e\u0631\u067e\u0633 \u0622\u067e \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u06a9\u0648 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-text\">In navbar.tsx, add two props: phone and email. Use them in place of the hard-coded phone number and email address. Update index.tsx to pass the values. Keep all styles unchanged.\n<\/code><\/pre>\n<p>\u06c1\u0631 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u06d2 \u0628\u0639\u062f\u060c \u06cc\u06c1 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u06c1 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u0635\u0641\u062d\u06c1 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0627\u06af\u0631 \u06cc\u06c1 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u06a9\u0645\u0679 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h2 id=\"heading-step-5-how-to-run-and-customize-the-final-ui\">\u0645\u0631\u062d\u0644\u06c1 5: \u062d\u062a\u0645\u06cc UI \u06a9\u0648 \u06a9\u06cc\u0633\u06d2 \u0644\u0627\u0646\u0686 \u0627\u0648\u0631 \u06a9\u0633\u0679\u0645\u0627\u0626\u0632 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>\u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npm run dev\n<\/code><\/pre>\n<p>\u06a9\u06be\u0644\u0627 <code>http:\/\/localhost:3000\/hero-03<\/code> \u0622\u067e \u06a9\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0631\u0627\u0633\u062a\u06c1 \u06c1\u06d2\u06d4 <code>app\/hero-03\/page.tsx<\/code> \u0628\u0646\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-run-these-checks\">\u062f\u0631\u062c \u0630\u06cc\u0644 \u0679\u06cc\u0633\u0679 \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4<\/h3>\n<ul>\n<li>\n<p><strong>\u0648\u0646\u0688\u0648 \u06a9\u0627 \u0633\u0627\u0626\u0632 \u062a\u0642\u0631\u06cc\u0628\u0627\u064b 375px \u0686\u0648\u0691\u0627 \u06a9\u0631 \u062f\u06cc\u06ba\u06d4<\/strong>: \u0633\u0631\u062e\u06cc\u0627\u06ba \u0686\u06be\u0648\u0679\u06cc \u06c1\u0648\u0646\u06cc \u0686\u0627\u06c1\u0626\u06cc\u06ba \u0627\u0648\u0631 \u0645\u0648\u0627\u062f \u0627\u0633\u06a9\u0631\u06cc\u0646 \u067e\u0631 \u0631\u06c1\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0645\u06cc\u0646\u0648 \u06a9\u06be\u0648\u0644\u06cc\u06ba:<\/strong> \u06a9\u0644\u0648\u0632 \u0628\u0679\u0646\u060c \u0627\u0648\u0648\u0631\u0644\u06d2\u060c \u06cc\u0627 Escape \u06a9\u0644\u06cc\u062f \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0628\u0646\u062f \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u06a9\u06cc \u0628\u0648\u0631\u0688 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2:<\/strong> Tab \u06a9\u0644\u06cc\u062f \u06a9\u0648 \u062f\u0628\u0627\u0626\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0645\u06cc\u0646\u0648 \u0628\u0679\u0646 \u0627\u06cc\u06a9 \u0641\u0648\u06a9\u0633 \u0627\u0633\u0679\u06cc\u0679 \u062f\u06a9\u06be\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0646\u06cc\u0686\u06d2 \u0633\u06a9\u0631\u0648\u0644 \u06a9\u0631\u06cc\u06ba:<\/strong> \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0633\u0628 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2 \u0627\u0648\u0631 \u0679\u06cc\u0644 \u0628\u06cc\u06a9 \u06af\u0631\u0627\u0624\u0646\u0688 80px \u06a9\u06d2 \u0628\u0639\u062f \u0633\u0644\u0627\u0626\u06cc\u0688 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0644\u0646\u06a9 \u067e\u0631 \u06c1\u0648\u0648\u0631 \u06a9\u0631\u06cc\u06ba:<\/strong> \u0627\u0633 \u06a9\u06d2 \u0622\u06af\u06d2 \u0627\u06cc\u06a9 \u06af\u06be\u0648\u0645\u0646\u06d2 \u0648\u0627\u0644\u0627 \u0622\u0626\u06cc\u06a9\u0646 \u0638\u0627\u06c1\u0631 \u06c1\u0648\u0646\u0627 \u0686\u0627\u06c1\u06cc\u06d2\u06d4<\/p>\n<\/li>\n<li>\n<p><strong>\u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/strong> \u062f\u0631\u062c \u0630\u06cc\u0644 \u062f\u0648 \u06a9\u0645\u0627\u0646\u0688\u0632 \u0686\u0644\u0627\u0626\u06cc\u06ba:<\/p>\n<\/li>\n<\/ul>\n<pre><code class=\"language-bash\">npx tsc --noEmit\nnpm run lint\n<\/code><\/pre>\n<h3 id=\"heading-customize-the-page\">\u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u0622\u067e \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646\u060c \u0645\u0648\u0627\u062f\u060c \u0627\u062b\u0627\u062b\u06d2\u060c \u0631\u0627\u0628\u0637\u06d2 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u0627\u0648\u0631 \u062a\u06be\u06cc\u0645 \u06a9\u06d2 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631 \u06a9\u06d2 \u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0628\u0646\u0627 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-1-update-navigation-links\">1. \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u062f\u06c1 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0644\u0646\u06a9\u0633<\/h3>\n<p>\u06a9\u06be\u0644\u0627 <code>index.tsx<\/code> \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 <code>navigationData<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0635\u0641 \u06c1\u06d2 \u062c\u0648 \u0645\u06cc\u0646\u0648 \u0644\u06cc\u0628\u0644 \u0627\u0648\u0631 URL \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-tsx\">const navigationData = [\n  { title: \"Home\", href: \"\/\" },\n  { title: \"Features\", href: \"\/features\" },\n  { title: \"Pricing\", href: \"\/pricing\" },\n  { title: \"Contact\", href: \"\/contact\" },\n];\n<\/code><\/pre>\n<p>\u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u06c1\u0631 \u0644\u0646\u06a9 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06d2 \u062f\u0631\u0633\u062a \u0631\u0627\u0633\u062a\u06d2 \u06a9\u06cc \u0637\u0631\u0641 \u0627\u0634\u0627\u0631\u06c1 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-2-change-the-headline-and-text\">2. \u0639\u0646\u0648\u0627\u0646 \u0627\u0648\u0631 \u0645\u062a\u0646 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u06a9\u06be\u0644\u0627 <code>hero.tsx<\/code> \u0645\u0648\u062c\u0648\u062f\u06c1 \u0639\u0646\u0648\u0627\u0646\u0627\u062a\u060c \u062a\u0641\u0635\u06cc\u0644\u060c \u0627\u0648\u0631 \u0628\u0679\u0646 \u0644\u06cc\u0628\u0644\u0632 \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0645\u0648\u0627\u062f \u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-tsx\">\n<p>Explore reusable UI components for your next web application.<\/p>\n<\/code><\/pre>\n<p>\u0645\u0648\u062c\u0648\u062f\u06c1 \u062a\u0631\u062a\u06cc\u0628 \u0627\u0648\u0631 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc \u0633\u0627\u062e\u062a \u06a9\u0648 \u0645\u062d\u0641\u0648\u0638 \u0631\u06a9\u06be\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-3-replace-images-videos-and-icons\">3\u06d4 \u062a\u0635\u0627\u0648\u06cc\u0631\u060c \u0648\u06cc\u0688\u06cc\u0648\u0632 \u0627\u0648\u0631 \u0634\u0628\u06cc\u06c1\u06cc\u06ba \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0622\u067e \u06a9\u06d2 \u0627\u062b\u0627\u062b\u06d2 <code>public<\/code> \u0688\u0627\u0626\u0631\u06cc\u06a9\u0679\u0631\u06cc \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0645\u062a\u0639\u0644\u0642\u06c1 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06d2 \u0631\u0627\u0633\u062a\u0648\u06ba \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-tsx\"><img decoding=\"async\" src=\"https:\/\/www.freecodecamp.org\/images\/logo.svg\" alt=\"\u06a9\u0645\u067e\u0646\u06cc \u06a9\u0627 \u0644\u0648\u06af\u0648\" title=\"\">\n\n<video autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\">\n  <source src=\"\/videos\/hero-video.mp4\" type=\"video\/mp4\"\/>\n<\/video>\n<\/code><\/pre>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c <code>public\/images\/logo.svg<\/code> \u0622\u067e \u0627\u0633 \u062a\u06a9 \u0631\u0633\u0627\u0626\u06cc \u062d\u0627\u0635\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba: <code>\/images\/logo.svg<\/code>.<\/p>\n<h3 id=\"heading-4-update-contact-details\">4. \u0627\u067e\u0646\u06cc \u0631\u0627\u0628\u0637\u06c1 \u06a9\u06cc \u0645\u0639\u0644\u0648\u0645\u0627\u062a \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u06a9\u06be\u0644\u0627 <code>navbar.tsx<\/code> \u0627\u067e\u0646\u0627 \u0645\u0648\u062c\u0648\u062f\u06c1 \u0641\u0648\u0646 \u0646\u0645\u0628\u0631 \u0627\u0648\u0631 \u0627\u06cc \u0645\u06cc\u0644 \u0627\u06cc\u0688\u0631\u06cc\u0633 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-tsx\">+1 (555) 123-4567\nhello@example.com\n<\/code><\/pre>\n<p>\u062d\u0642\u06cc\u0642\u06cc \u0631\u0627\u0628\u0637\u06d2 \u06a9\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062f\u0648\u0633\u0631\u06d2 \u0627\u062c\u0632\u0627\u0621 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba \u062c\u0648 \u0627\u0646 \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u06a9\u0648 \u0638\u0627\u06c1\u0631 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-5-change-theme-colors\">5. \u062a\u06be\u06cc\u0645 \u06a9\u0627 \u0631\u0646\u06af \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>CSS \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 <code>globals.css<\/code> \u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u06d2 \u0631\u0646\u06af\u0648\u06ba \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-css\">:root {\n  --primary: #2563eb;\n  --background: #ffffff;\n  --foreground: #111827;\n}\n<\/code><\/pre>\n<p>\u0627\u067e\u0646\u06d2 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u0645\u06cc\u06ba \u067e\u06c1\u0644\u06d2 \u0633\u06d2 \u0628\u06cc\u0627\u0646 \u06a9\u0631\u062f\u06c1 \u0645\u062a\u063a\u06cc\u0631 \u0646\u0627\u0645\u0648\u06ba \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0627\u06af\u0631 \u0622\u067e \u06a9\u06cc \u0627\u06cc\u067e\u0644\u06cc \u06a9\u06cc\u0634\u0646 \u0688\u0627\u0631\u06a9 \u0645\u0648\u0688 \u06a9\u0648 \u0633\u067e\u0648\u0631\u0679 \u06a9\u0631\u062a\u06cc \u06c1\u06d2 \u062a\u0648 \u0688\u0627\u0631\u06a9 \u062a\u06be\u06cc\u0645 \u06a9\u06d2 \u0645\u062a\u063a\u06cc\u0631\u0627\u062a \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-6-customize-dropdown-styles\">6. \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0627\u0633\u0679\u0627\u0626\u0644 \u06a9\u0648 \u062d\u0633\u0628 \u0636\u0631\u0648\u0631\u062a \u0628\u0646\u0627\u0626\u06cc\u06ba<\/h3>\n<p>\u06a9\u06be\u0644\u0627 <code>components\/ui\/dropdown-menu.tsx<\/code> \u0645\u062a\u0639\u0644\u0642\u06c1 Tailwind CSS \u06a9\u0644\u0627\u0633\u0632 \u06a9\u0648 \u0627\u067e \u0688\u06cc\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u062a\u0628\u062f\u06cc\u0644\u06cc <code>rounded-sm px-2 py-1.5<\/code> \u06a9\u0648 <code>rounded-md px-3 py-2<\/code> \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0622\u0626\u0679\u0645\u0632 \u06a9\u06d2 \u06a9\u0648\u0646\u0648\u06ba \u0627\u0648\u0631 \u0641\u0627\u0635\u0644\u0648\u06ba \u06a9\u0648 \u0627\u06cc\u0688\u062c\u0633\u0679 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0633 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u062c\u0632\u0648 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u0648\u06c1 \u062a\u0645\u0627\u0645 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0645\u062a\u0627\u062b\u0631 \u06c1\u0648 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0627\u0633\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06c1\u0630\u0627 \u0627\u067e\u0646\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u06a9\u06d2 \u062f\u0648\u0631\u0627\u0646 \u0627\u067e\u0646\u06d2 \u0645\u06cc\u0646\u0648 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-7-run-and-test-your-changes\">7. \u062a\u0628\u062f\u06cc\u0644\u06cc\u0627\u06ba \u0644\u0627\u06af\u0648 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u062c\u0627\u0646\u0686\u06cc\u06ba\u06d4<\/h3>\n<p>\u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0622\u06cc\u0627 \u0633\u0628 \u06a9\u0686\u06be \u062a\u0648\u0642\u0639 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<pre><code class=\"language-bash\">npm run dev\nnpm run lint\nnpm run build\n<\/code><\/pre>\n<p>\u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba <code>package.json<\/code> \u0644\u0646\u0679 \u0627\u0648\u0631 \u0628\u0644\u0688 \u06a9\u0645\u0627\u0646\u0688 \u0686\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u0633\u06a9\u0631\u067e\u0679\u0633 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06d2 AI \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688 \u06a9\u0648 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06c1\u0645\u06cc\u0634\u06c1 \u0627\u0633 \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba\u06d4 \u06a9\u0648\u0688 \u062c\u0648 \u062f\u0631\u0633\u062a \u0645\u0639\u0644\u0648\u0645 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u0648\u06c1 \u0628\u0646\u0627\u0646\u06d2 \u0645\u06cc\u06ba \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u062b\u0627\u062b\u0648\u06ba \u06a9\u0648 \u063a\u0644\u0637 \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0644\u0648\u0688 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u06cc\u0627 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u063a\u06cc\u0631 \u0645\u062a\u0648\u0642\u0639 \u0637\u0648\u0631 \u067e\u0631 \u0628\u0631\u062a\u0627\u0624 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 (\u0630\u06cc\u0644 \u0645\u06cc\u06ba \u0645\u0632\u06cc\u062f \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u062f\u06cc\u06a9\u06be\u06cc\u06ba)\u06d4<\/p>\n<h3 id=\"heading-live-preview\">\u0644\u0627\u0626\u06cc\u0648 \u067e\u06cc\u0634 \u0646\u0638\u0627\u0631\u06c1:<\/h3>\n<p><img decoding=\"async\" src=\"https:\/\/umang.pk\/wp-content\/uploads\/2026\/10\/\u0627\u06d2-\u0622\u0626\u06cc-\u067e\u0631\u0627\u0645\u067e\u0679\u0633-\u06a9\u06d2-\u0633\u0627\u062a\u06be-\u0648\u06cc\u0628-\u0633\u0627\u0626\u0679-\u06cc\u0648\u0632\u0631-\u0627\u0646\u0679\u0631\u0641\u06cc\u0633-\u06a9\u0648.gif\" alt=\"\u0688\u06cc\u062c\u06cc\u0679\u0644 \u0627\u06cc\u062c\u0646\u0633\u06cc \u06c1\u06cc\u0631\u0648 \u0633\u06cc\u06a9\u0634\u0646\" style=\"display: block;\" width=\"600\" height=\"400\" loading=\"lazy\" title=\"\"><\/p>\n<h2 id=\"heading-how-i-check-ai-generated-code-before-deployment\">\u062a\u0639\u06cc\u0646\u0627\u062a\u06cc \u0633\u06d2 \u067e\u06c1\u0644\u06d2 AI \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u06cc\u0633\u06d2 \u06a9\u0631\u06cc\u06ba\u06d4<\/h2>\n<p>AI \u06a9\u0648\u0688\u0646\u06af \u0627\u06cc\u062c\u0646\u0679 \u0645\u062a\u0639\u062f\u062f \u0641\u0627\u0626\u0644\u06cc\u06ba \u0628\u0646\u0627 \u06cc\u0627 \u0627\u0646 \u0645\u06cc\u06ba \u062a\u0631\u0645\u06cc\u0645 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0646\u062d\u0635\u0627\u0631 \u0627\u0646\u0633\u0679\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u0627 \u06c1\u06d2 \u0627\u0648\u0631 \u0679\u0631\u0645\u06cc\u0646\u0644 \u06a9\u0645\u0627\u0646\u0688 \u0686\u0644\u0627 \u0633\u06a9\u062a\u0627 \u06c1\u06d2\u06d4 \u0645\u06cc\u06ba \u0627\u06cc\u062c\u0646\u0679 \u06a9\u06d2 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0648 \u0627\u06cc\u06a9 \u0646\u0642\u0637\u06c1 \u0622\u063a\u0627\u0632 \u0633\u0645\u062c\u06be\u062a\u0627 \u06c1\u0648\u06ba\u060c \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0648\u0688 \u0646\u06c1\u06cc\u06ba\u06d4 \u0627\u067e\u0646\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0648 \u062a\u0639\u06cc\u0646\u0627\u062a \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0646 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba \u0627\u0648\u0631 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a \u062a\u0648\u0642\u0639 \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4<\/p>\n<p>\u0622\u067e \u06a9\u06d2 AI \u0633\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688 \u06a9\u0648 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u06cc\u06c1\u0627\u06ba \u06a9\u0686\u06be \u062a\u062c\u0648\u06cc\u0632 \u06a9\u0631\u062f\u06c1 \u0686\u06cc\u06a9\u0633 \u06c1\u06cc\u06ba:<\/p>\n<h3 id=\"heading-1-review-the-changes\">1. \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u06d4<\/h3>\n<p>\u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba \u06a9\u06c1 \u0627\u06cc\u062c\u0646\u0679 \u0646\u06d2 \u06a9\u0648\u0646 \u0633\u06cc \u0641\u0627\u0626\u0644\u06cc\u06ba \u0628\u0646\u0627\u0626\u06cc \u06cc\u0627 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0633\u0645\u062c\u06be\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u067e\u0646\u06d2 \u06a9\u0648\u0688 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba \u06a9\u06c1 \u06a9\u06cc\u0627 \u062a\u0628\u062f\u06cc\u0644\u06cc \u0622\u0626\u06cc \u06c1\u06d2\u060c \u0622\u06cc\u0627 \u06cc\u06c1 \u0622\u067e \u06a9\u06d2 \u0645\u0648\u062c\u0648\u062f\u06c1 \u067e\u0631\u0648\u062c\u06cc\u06a9\u0679 \u06a9\u06d2 \u0688\u06be\u0627\u0646\u0686\u06d2 \u06a9\u06cc \u067e\u06cc\u0631\u0648\u06cc \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u0622\u06cc\u0627 \u0627\u0633 \u0645\u06cc\u06ba \u063a\u06cc\u0631 \u0636\u0631\u0648\u0631\u06cc \u0627\u0646\u062d\u0635\u0627\u0631 \u06cc\u0627 \u063a\u06cc\u0631 \u0645\u062a\u0639\u0644\u0642\u06c1 \u062a\u0631\u0645\u06cc\u0645\u0627\u062a \u0645\u062a\u0639\u0627\u0631\u0641 \u06a9\u0631\u0627\u0626\u06cc \u06af\u0626\u06cc \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>Git \u0645\u06cc\u06ba\u060c \u0622\u067e \u0627\u0633 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0627 \u0645\u0639\u0627\u0626\u0646\u06c1 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba:<\/p>\n<pre><code class=\"language-bash\">git diff\ngit status\n<\/code><\/pre>\n<p>\u0627\u06af\u0631 \u0622\u067e \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u0646\u06c1\u06cc\u06ba \u0633\u0645\u062c\u06be\u062a\u06d2 \u06c1\u06cc\u06ba \u062a\u0648\u060c \u06a9\u0633\u06cc \u0627\u06cc\u062c\u0646\u0679 \u0633\u06d2 \u062a\u0628\u062f\u06cc\u0644\u06cc \u06a9\u0648 \u0642\u0628\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u0633 \u06a9\u06d2 \u0645\u0642\u0635\u062f \u0627\u0648\u0631 \u0645\u0645\u06a9\u0646\u06c1 \u0636\u0645\u0646\u06cc \u0627\u062b\u0631\u0627\u062a \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u0646\u06d2 \u06a9\u0648 \u06a9\u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-2-run-the-application-and-test-key-interactions\">2. \u0679\u06cc\u0633\u0679 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u067e\u0631 \u0639\u0645\u0644 \u062f\u0631\u0622\u0645\u062f \u0627\u0648\u0631 \u06a9\u0644\u06cc\u062f\u06cc \u062a\u0639\u0627\u0645\u0644\u0627\u062a<\/h3>\n<p>\u0688\u0648\u06cc\u0644\u067e\u0645\u0646\u0679 \u0633\u0631\u0648\u0631 \u0634\u0631\u0648\u0639 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646 \u06a9\u0648 \u0628\u0631\u0627\u0624\u0632\u0631 \u0645\u06cc\u06ba \u06a9\u06be\u0648\u0644\u06cc\u06ba\u06d4 \u0635\u0631\u0641 \u06cc\u06c1 \u062f\u06cc\u06a9\u06be\u0646\u06d2 \u06a9\u06d2 \u0628\u062c\u0627\u0626\u06d2 \u06a9\u06c1 \u0635\u0641\u062d\u06c1 \u0644\u0648\u0688 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u06cc\u0627 \u0646\u06c1\u06cc\u06ba\u060c \u0627\u0633 \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u06cc \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba \u062c\u0633\u06d2 \u0622\u067e \u0646\u06d2 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u06cc\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0645\u062b\u0627\u0644 \u06a9\u06d2 \u0637\u0648\u0631 \u067e\u0631\u060c \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0644\u0646\u06a9\u0633 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u06a9\u06be\u0644\u062a\u06d2 \u0627\u0648\u0631 \u0628\u0646\u062f \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0628\u0679\u0646 \u0648\u06c1\u06cc \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba \u062c\u0648 \u0648\u06c1 \u06a9\u0631\u0646\u0627 \u0686\u0627\u06c1\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0641\u0627\u0631\u0645 \u0627\u0646 \u067e\u0679 \u06a9\u06cc \u062a\u0648\u062b\u06cc\u0642 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062a\u0635\u0627\u0648\u06cc\u0631 \u06cc\u0627 \u0648\u06cc\u0688\u06cc\u0648\u0632 \u0635\u062d\u06cc\u062d \u0637\u0631\u06cc\u0642\u06d2 \u0633\u06d2 \u0644\u0648\u0688 \u06c1\u0648\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u0646\u06cc\u0632\u060c \u062f\u06cc\u06a9\u06be\u06cc\u06ba \u06a9\u06c1 \u0622\u067e \u06a9\u0627 \u0635\u0641\u062d\u06c1 \u0645\u0648\u0628\u0627\u0626\u0644 \u0627\u0648\u0631 \u0688\u06cc\u0633\u06a9 \u0679\u0627\u067e \u0627\u0633\u06a9\u0631\u06cc\u0646 \u06a9\u06d2 \u0633\u0627\u0626\u0632 \u067e\u0631 \u06a9\u06cc\u0633\u0627 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<p>\u0627\u067e\u0646\u06d2 \u0628\u0631\u0627\u0624\u0632\u0631 \u06a9\u0627 \u0688\u0648\u06cc\u0644\u067e\u0631 \u06a9\u0646\u0633\u0648\u0644 \u06a9\u06be\u0648\u0644\u06cc\u06ba \u0627\u0648\u0631 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u06cc \u062e\u0631\u0627\u0628\u06cc\u0627\u06ba\u060c \u0646\u0627\u06a9\u0627\u0645 \u0646\u06cc\u0679 \u0648\u0631\u06a9 \u06a9\u06cc \u062f\u0631\u062e\u0648\u0627\u0633\u062a\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06af\u0645\u0634\u062f\u06c1 \u0627\u062b\u0627\u062b\u06d2 \u062a\u0644\u0627\u0634 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-3-run-automated-checks\">3. \u062e\u0648\u062f\u06a9\u0627\u0631 \u0627\u0633\u06a9\u06cc\u0646 \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4<\/h3>\n<p>\u06cc\u06c1\u0627\u06ba \u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba: <code>package.json<\/code> \u06a9\u0648\u0688 \u06a9\u06d2 \u0645\u0639\u06cc\u0627\u0631 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u06cc\u06ba\u060c \u0679\u06cc\u0633\u0679 \u0686\u0644\u0627\u0626\u06cc\u06ba\u060c \u0627\u0648\u0631 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631 \u06a9\u06cc \u062a\u0635\u062f\u06cc\u0642 \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<pre><code class=\"language-bash\">npm run lint\nnpm test\nnpm run build\n<\/code><\/pre>\n<p>\u06cc\u06c1 \u0627\u06cc\u06a9 \u0639\u0627\u0645 \u0645\u062b\u0627\u0644 \u06c1\u06d2\u060c \u0646\u06c1 \u06a9\u06c1 \u0639\u0627\u0644\u0645\u06af\u06cc\u0631 \u062d\u06a9\u0645\u06d4 \u0622\u067e \u06a9\u0627 \u0645\u0646\u0635\u0648\u0628\u06c1 \u06c1\u06d2 <code>test<\/code> \u06cc\u06c1 \u0627\u06cc\u06a9 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u067e\u06c1\u0644\u06d2 \u062f\u0633\u062a\u06cc\u0627\u0628 \u0627\u0633\u06a9\u0631\u067e\u0679 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 \u0628\u0631\u0627\u06c1 \u06a9\u0631\u0645 \u062c\u0627\u0631\u06cc \u0631\u06a9\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0645\u062a\u0639\u0644\u0642\u06c1 \u063a\u0644\u0637\u06cc\u0648\u06ba \u06a9\u0648 \u062f\u0631\u0633\u062a \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-4-check-security-and-configuration\">4. \u0633\u06cc\u06a9\u06cc\u0648\u0631\u0679\u06cc \u0627\u0648\u0631 \u06a9\u0646\u0641\u06cc\u06af\u0631\u06cc\u0634\u0646 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u0646\u0626\u06cc \u0627\u0646\u062d\u0635\u0627\u0631\u060c API \u06a9\u0627\u0644\u0632\u060c \u0645\u0627\u062d\u0648\u0644\u06cc\u0627\u062a\u06cc \u0645\u062a\u063a\u06cc\u0631\u0627\u062a\u060c \u0627\u0648\u0631 \u06a9\u0633\u06cc \u0628\u06be\u06cc \u06a9\u0648\u0688 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba \u062c\u0648 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0627\u0646 \u067e\u0679 \u06cc\u0627 \u062d\u0633\u0627\u0633 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u06d4 API \u06a9\u06cc\u0632 \u06cc\u0627 \u0631\u0627\u0632\u0648\u06ba \u06a9\u0648 \u06a9\u0644\u0627\u0626\u0646\u0679 \u0633\u0627\u0626\u0688 \u06a9\u0648\u0688 \u0645\u06cc\u06ba \u0628\u06d2 \u0646\u0642\u0627\u0628 \u0646\u06c1 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u0633\u0645\u062c\u06be\u06d2 \u0628\u063a\u06cc\u0631 \u06a9\u06c1 AI \u0627\u06cc\u062c\u0646\u0679 \u06a9\u06cc\u0627 \u06a9\u0631 \u0631\u06c1\u0627 \u06c1\u06d2 \u063a\u06cc\u0631 \u0645\u0627\u0646\u0648\u0633 \u06a9\u0645\u0627\u0646\u0688\u0632 \u0646\u06c1 \u0686\u0644\u0627\u0626\u06cc\u06ba\u06d4<\/p>\n<p>\u0627\u0646 \u0627\u06cc\u067e\u0644\u06cc\u06a9\u06cc\u0634\u0646\u0632 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062c\u0648 \u062a\u0635\u062f\u06cc\u0642\u060c \u0627\u062f\u0627\u0626\u06cc\u06af\u06cc\u0648\u06ba\u060c \u06cc\u0627 \u0635\u0627\u0631\u0641 \u06a9\u06d2 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u06c1\u06cc\u0646\u0688\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06cc\u06ba\u060c \u06c1\u0645 \u0627\u0646 \u06a9\u06cc \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u06d2 \u0645\u0637\u0627\u0628\u0642 \u0627\u0636\u0627\u0641\u06cc \u0633\u06cc\u06a9\u06cc\u0648\u0631\u0679\u06cc \u0686\u06cc\u06a9 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-5-verify-before-deploying\">5. \u062a\u0639\u06cc\u0646\u0627\u062a\u06cc \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4<\/h3>\n<p>\u062c\u0627\u0631\u06cc \u06a9\u0631\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2\u060c \u0627\u0633 \u0628\u0627\u062a \u06a9\u0648 \u06cc\u0642\u06cc\u0646\u06cc \u0628\u0646\u0627\u0626\u06cc\u06ba \u06a9\u06c1 \u067e\u0631\u0648\u0688\u06a9\u0634\u0646 \u06a9\u06cc \u062a\u0639\u0645\u06cc\u0631\u0627\u062a \u06a9\u0627\u0645\u06cc\u0627\u0628 \u06c1\u06cc\u06ba\u060c \u0628\u0646\u06cc\u0627\u062f\u06cc \u0635\u0627\u0631\u0641 \u06a9\u0627 \u0628\u06c1\u0627\u0624 \u06a9\u0627\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 \u06cc\u06c1 \u06a9\u06c1 \u0627\u06c1\u0645 \u0641\u0639\u0627\u0644\u06cc\u062a \u06a9\u0648 \u06a9\u0645 \u0646\u06c1\u06cc\u06ba \u06a9\u06cc\u0627 \u06af\u06cc\u0627 \u06c1\u06d2\u06d4 \u0627\u067e\u0646\u06cc \u062d\u062a\u0645\u06cc \u062a\u0628\u062f\u06cc\u0644\u06cc\u0648\u06ba \u06a9\u0627 \u062f\u0648\u0628\u0627\u0631\u06c1 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba \u0627\u0648\u0631 \u062c\u0628 \u06cc\u06c1 \u062f\u0633\u062a\u06cc\u0627\u0628 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u062a\u0648 \u067e\u06c1\u0644\u06d2 \u0627\u0646\u06c1\u06cc\u06ba \u0633\u0679\u06cc\u062c\u0646\u06af \u0645\u0627\u062d\u0648\u0644 \u0645\u06cc\u06ba \u062a\u0639\u06cc\u0646\u0627\u062a \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<p><strong>\u0645\u06cc\u0631\u06d2 \u0627\u0635\u0648\u0644 \u0633\u0627\u062f\u06c1 \u06c1\u06cc\u06ba\u06d4<\/strong> \u0627\u06af\u0631 \u0622\u067e \u06cc\u06c1 \u0646\u06c1\u06cc\u06ba \u0628\u062a\u0627 \u0633\u06a9\u062a\u06d2 \u06a9\u06c1 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688 \u06a9\u06cc\u0627 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0648 \u06cc\u06c1 \u0628\u06be\u06cc\u062c\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u0646\u06c1\u06cc\u06ba \u06c1\u06d2\u06d4 AI \u0627\u06cc\u062c\u0646\u0679\u0633 \u062a\u0631\u0642\u06cc \u06a9\u0648 \u062a\u06cc\u0632 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0644\u06cc\u06a9\u0646 \u06cc\u06c1 \u0627\u0628 \u0628\u06be\u06cc \u0688\u0648\u06cc\u0644\u067e\u0631\u0632 \u067e\u0631 \u067e\u0691\u062a\u0627 \u06c1\u06d2 \u06a9\u06c1 \u0648\u06c1 \u062d\u062a\u0645\u06cc \u06a9\u0648\u0688 \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u060c \u062c\u0627\u0646\u0686 \u06a9\u0631\u06cc\u06ba \u0627\u0648\u0631 \u0630\u0645\u06c1 \u062f\u0627\u0631\u06cc \u0644\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-key-concepts-recap\">\u06a9\u0644\u06cc\u062f\u06cc \u062a\u0635\u0648\u0631\u0627\u062a \u06a9\u0627 \u062e\u0644\u0627\u0635\u06c1<\/h2>\n<h3 id=\"heading-a-prompt-is-a-spec\">\u067e\u0631\u0627\u0645\u067e\u0679 \u0627\u06cc\u06a9 \u062a\u0635\u0631\u06cc\u062d \u06c1\u06d2\u06d4<\/h3>\n<p>\u0627\u0686\u06be\u06d2 UI \u0627\u0634\u0627\u0631\u06d2 \u0644\u06d2 \u0622\u0624\u0679\u060c \u0627\u062c\u0632\u0627\u0621\u060c \u0631\u0646\u06af\u060c \u0648\u0642\u0641\u06c1 \u06a9\u0627\u0631\u06cc\u060c \u0627\u0648\u0631 \u062c\u0648\u0627\u0628\u06cc \u0631\u0648\u06cc\u06d2 \u06a9\u06cc \u0648\u0636\u0627\u062d\u062a \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4 \u06cc\u06c1 \u0627\u0633\u0679\u06cc\u06a9 \u06a9\u0627 \u0646\u0627\u0645 \u0628\u06be\u06cc \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2\u060c \u0641\u0627\u0626\u0644 \u06a9\u06d2 \u0631\u0627\u0633\u062a\u0648\u06ba \u06a9\u06cc \u0641\u06c1\u0631\u0633\u062a \u062f\u06cc\u062a\u0627 \u06c1\u06d2\u060c \u062a\u0631\u062a\u06cc\u0628 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0645\u0627\u062a \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0648\u0631 &quot;\u062e\u062a\u0645&#8221; \u06a9\u0627 \u0645\u0637\u0644\u0628 \u0628\u06be\u06cc \u0628\u062a\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-two-ways-to-get-a-prompt\">\u0627\u0634\u0627\u0631\u06d2 \u0648\u0635\u0648\u0644 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u062f\u0648 \u0637\u0631\u06cc\u0642\u06d2<\/h3>\n<p>\u0622\u067e \u0627\u067e\u0646\u0627 \u067e\u0631\u0627\u0645\u067e\u0679 \u0628\u0646\u0627\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 AI \u0679\u0648\u0644 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u06cc\u0627 \u0641\u0631\u06cc \u06cc\u0627 \u067e\u0631\u0648 \u0628\u0644\u0627\u06a9\u0633 \u067e\u06cc\u062c \u0633\u06d2 \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0648 \u06a9\u0627\u067e\u06cc \u06a9\u0631 \u06a9\u06d2 AI \u0679\u0648\u0644 \u0645\u06cc\u06ba \u0686\u0633\u067e\u0627\u06ba \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-read-before-you-run\">\u0686\u0644\u0627\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u067e\u0691\u06be\u06cc\u06ba<\/h3>\n<p>\u063a\u0644\u0637 \u062f\u0631\u0622\u0645\u062f\u0627\u062a\u060c \u06af\u0645\u0634\u062f\u06c1 \u0627\u0646\u062d\u0635\u0627\u0631\u060c \u06a9\u0644\u0627\u0633 \u06a9\u06d2 \u0646\u0627\u0645 \u06a9\u06cc \u0679\u0627\u0626\u067e\u0648\u0632\u060c \u0627\u0648\u0631 \u062a\u0628\u062f\u06cc\u0644 \u0634\u062f\u06c1 \u0627\u0642\u062f\u0627\u0631 \u06a9\u06d2 \u0644\u06cc\u06d2 \u062a\u06cc\u0627\u0631 \u06a9\u0631\u062f\u06c1 \u06a9\u0648\u0688 \u06a9\u0648 \u0686\u06cc\u06a9 \u06a9\u0631\u06cc\u06ba\u06d4 Tailwind \u0646\u0627\u0645\u0639\u0644\u0648\u0645 \u06a9\u0644\u0627\u0633\u0632 \u06a9\u0648 \u0646\u0638\u0631 \u0627\u0646\u062f\u0627\u0632 \u06a9\u0631\u062a\u0627 \u06c1\u06d2\u060c \u0627\u0633 \u0644\u06cc\u06d2 \u0679\u0627\u0626\u067e \u06a9\u06cc \u063a\u0644\u0637\u06cc\u0627\u06ba \u062e\u0648\u062f \u0628\u062e\u0648\u062f \u0646\u0627\u06a9\u0627\u0645 \u06c1\u0648 \u062c\u0627\u0626\u06cc\u06ba \u06af\u06cc\u06d4<\/p>\n<h3 id=\"heading-reuse-components\">\u0627\u062c\u0632\u0627\u0621 \u06a9\u0627 \u062f\u0648\u0628\u0627\u0631\u06c1 \u0627\u0633\u062a\u0639\u0645\u0627\u0644<\/h3>\n<p>\u0645\u0634\u062a\u0631\u06a9\u06c1 <strong>shadcn\/ui \u062c\u0632\u0648<\/strong> \u0645\u0633\u062a\u0642\u0644 \u0631\u0648\u06cc\u06c1 \u0627\u0648\u0631 \u0627\u0646\u062f\u0627\u0632 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u06cc\u06ba\u06d4 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u06cc\u06ba <code>cn()<\/code> \u0645\u0634\u0631\u0648\u0637 \u06a9\u0644\u0627\u0633\u0648\u06ba \u06a9\u06d2 \u0644\u06cc\u06d2\u060c \u06c1\u0645 \u0688\u06cc\u0679\u0627 \u06a9\u0648 \u0645\u0627\u0631\u06a9 \u0627\u067e \u0633\u06d2 \u0627\u0644\u06af \u0627\u06cc\u06a9 \u0635\u0641 \u0645\u06cc\u06ba \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-group-hover-and-logical-layout\">\u06af\u0631\u0648\u067e \u06c1\u0648\u0648\u0631 \u0627\u0648\u0631 \u0645\u0646\u0637\u0642\u06cc \u062a\u0631\u062a\u06cc\u0628<\/h3>\n<p>\u06a9\u06c1 <code>group<\/code> \u06a9\u0644\u0627\u0633 \u0627\u06cc\u06a9 \u0628\u0686\u06d2 \u06a9\u0648 \u0627\u067e\u0646\u06d2 \u0648\u0627\u0644\u062f\u06cc\u0646 \u06a9\u06cc \u06c1\u0648\u0648\u0631 \u062d\u0627\u0644\u062a \u06a9\u0627 \u062c\u0648\u0627\u0628 \u062f\u06cc\u0646\u06d2 \u06a9\u06cc \u0627\u062c\u0627\u0632\u062a \u062f\u06cc\u062a\u06cc \u06c1\u06d2\u06d4 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0644\u0646\u06a9\u0633 \u0627\u0633\u06d2 \u0644\u06d2 \u0622\u0624\u0679 \u06a9\u0648 \u0645\u0646\u062a\u0642\u0644 \u06a9\u06cc\u06d2 \u0628\u063a\u06cc\u0631 \u0634\u0628\u06cc\u06c1\u06cc\u06ba \u0638\u0627\u06c1\u0631 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<h3 id=\"heading-scroll-based-animation\">\u0627\u0633\u06a9\u0631\u0648\u0644 \u067e\u0631 \u0645\u0628\u0646\u06cc \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc\u06d4<\/h3>\n<p><code>useInView<\/code>    \u06a9\u06d2 \u0633\u0627\u062a\u06be <code>once: true<\/code> \u062c\u0628 \u0639\u0646\u0635\u0631 \u0627\u0633\u06a9\u0631\u06cc\u0646 \u0645\u06cc\u06ba \u062f\u0627\u062e\u0644 \u06c1\u0648\u062a\u0627 \u06c1\u06d2 \u062a\u0648 \u0627\u06cc\u06a9 \u0628\u0627\u0631 \u062d\u0631\u06a9\u062a \u067e\u0630\u06cc\u0631\u06cc \u06a9\u0648 \u0686\u0644\u0627\u062a\u0627 \u06c1\u06d2\u06d4<\/p>\n<h3 id=\"heading-use-client-in-nextjs\"><code>\"use client\"<\/code>    Next.js \u0645\u06cc\u06ba<\/h3>\n<p>\u06a9\u0648\u0626\u06cc \u0628\u06be\u06cc \u0641\u0627\u0626\u0644 \u062c\u0648 \u06c1\u06a9\u0633\u060c \u0628\u0631\u0627\u0624\u0632\u0631 \u0627\u06cc\u0648\u0646\u0679\u0633\u060c \u06cc\u0627 \u062d\u0631\u06a9\u0627\u062a \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06cc \u06c1\u06d2\u06d4 <code>\"use client\"<\/code> \u0633\u0628 \u0633\u06d2 \u0627\u0648\u067e\u0631 \u06c1\u062f\u0627\u06cc\u0627\u062a \u06c1\u06cc\u06ba.<\/p>\n<h3 id=\"heading-small-follow-up-prompts\">\u0686\u06be\u0648\u0679\u0627 \u0641\u0627\u0644\u0648 \u0627\u067e \u067e\u0631\u0627\u0645\u067e\u0679<\/h3>\n<p>\u06c1\u0631 \u0627\u06cc\u06a9 \u0645\u0648\u0642\u0639 \u067e\u0631 \u0627\u06cc\u06a9 \u0686\u06cc\u0632 \u06a9\u0648 \u062a\u0628\u062f\u06cc\u0644 \u06a9\u0631\u06cc\u06ba\u060c \u0627\u062e\u062a\u0644\u0627\u0641\u0627\u062a \u06a9\u0627 \u062c\u0627\u0626\u0632\u06c1 \u0644\u06cc\u06ba\u060c \u0627\u0648\u0631 \u062c\u0628 \u0628\u06be\u06cc \u0622\u067e \u06a9\u0648 \u06a9\u0648\u0626\u06cc \u0627\u0686\u06be\u0627 \u0646\u062a\u06cc\u062c\u06c1 \u0646\u0638\u0631 \u0622\u0626\u06d2 \u062a\u0648 \u0639\u06c1\u062f \u06a9\u0631\u06cc\u06ba\u06d4<\/p>\n<h2 id=\"heading-conclusion\">\u0646\u062a\u06cc\u062c\u06c1<\/h2>\n<p>\u0627\u0633 \u0679\u06cc\u0648\u0679\u0648\u0631\u06cc\u0644 \u0645\u06cc\u06ba\u060c \u0622\u067e \u0646\u06d2 \u0633\u06cc\u06a9\u06be\u0627 \u06a9\u06c1 AI \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u0627 \u0627\u0633\u062a\u0639\u0645\u0627\u0644 \u06a9\u0631\u062a\u06d2 \u06c1\u0648\u0626\u06d2 \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u06a9\u0627 \u0635\u0627\u0631\u0641 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 \u06a9\u06cc\u0633\u06d2 \u0628\u0646\u0627\u06cc\u0627 \u062c\u0627\u0626\u06d2\u06d4 \u062a\u0631\u062a\u06cc\u0628\u060c \u0627\u062c\u0632\u0627\u0621\u060c \u0631\u0646\u06af\u060c \u0648\u0642\u0641\u06c1 \u06a9\u0627\u0631\u06cc\u060c \u0627\u0648\u0631 \u062c\u0648\u0627\u0628\u06cc \u0631\u0648\u06cc\u06d2 \u06a9\u0627 \u0627\u062d\u0627\u0637\u06c1 \u06a9\u0631\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0627\u0634\u0627\u0631\u06d2 \u0628\u0646\u0627\u0626\u06d2 \u06af\u0626\u06d2\u06d4 \u06c1\u0645 \u0646\u06d2 \u062a\u0645\u0627\u0645 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0627\u0633\u06a9\u06cc\u0646 \u06a9\u0631\u0646\u06d2 \u06a9\u06d2 \u0628\u0639\u062f \u0627\u06cc\u06a9 \u0627\u06cc\u0646\u06cc\u0645\u06cc\u0679\u0688 \u0646\u06cc\u0648\u06cc\u06af\u06cc\u0634\u0646 \u0628\u0627\u0631 \u0627\u0648\u0631 \u0627\u06cc\u06a9 \u0686\u06be\u0648\u0679\u0627 \u0641\u0627\u0644\u0648 \u0627\u067e \u067e\u0631\u0627\u0645\u067e\u0679 \u06a9\u06d2 \u0633\u0627\u062a\u06be \u06c1\u06cc\u0631\u0648 \u0633\u06cc\u06a9\u0634\u0646 \u0628\u0646\u0627 \u06a9\u0631 \u0646\u062a\u0627\u0626\u062c \u06a9\u0648 \u0628\u06c1\u062a\u0631 \u06a9\u06cc\u0627\u06d4<\/p>\n<p>\u06c1\u0645 \u0646\u06d2 \u06cc\u06c1 \u0628\u06be\u06cc \u062f\u06cc\u06a9\u06be\u0627 \u06a9\u06c1 \u0645\u0634\u062a\u0631\u06a9\u06c1 \u0627\u062c\u0632\u0627\u0621 \u06a9\u06cc\u0648\u06ba \u0627\u06c1\u0645 \u06c1\u06cc\u06ba\u06d4 \u0688\u0631\u0627\u067e \u0688\u0627\u0624\u0646 \u0645\u06cc\u0646\u0648 \u06c1\u06d2\u06d4 <code>cn()<\/code> \u0645\u062f\u062f\u06af\u0627\u0631 \u0627\u0648\u0631 \u0688\u06cc\u0679\u0627 \u0633\u06d2 \u0686\u0644\u0646\u06d2 \u0648\u0627\u0644\u06d2 \u0644\u0646\u06a9\u0633 \u0622\u067e \u06a9\u06d2 \u06a9\u0648\u0688 \u06a9\u0648 \u0645\u0633\u062a\u0642\u0644 \u0631\u06a9\u06be\u062a\u06d2 \u06c1\u06cc\u06ba\u060c \u0627\u0648\u0631 \u0628\u0644\u0627\u06a9\u0633 \u0628\u0691\u06d2 \u0635\u0641\u062d\u0627\u062a \u06a9\u06d2 \u0644\u06cc\u06d2 \u0627\u06cc\u06a9 \u0637\u0627\u0642\u062a\u0648\u0631 \u0646\u0642\u0637\u06c1 \u0622\u063a\u0627\u0632 \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u062a\u06d2 \u06c1\u06cc\u06ba\u06d4<\/p>\n<p>\u0645\u0646\u062f\u0631\u062c\u06c1 \u0630\u06cc\u0644 \u0635\u0641\u062d\u0627\u062a \u067e\u0631\u060c \u0622\u067e \u0633\u0628 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0627\u067e\u0646\u06cc \u062a\u0641\u0635\u06cc\u0644\u0627\u062a \u0644\u06a9\u06be\u06cc\u06ba \u06af\u06d2\u060c \u0627\u067e\u0646\u06d2 \u0627\u0633\u0679\u06cc\u06a9 \u0627\u0648\u0631 \u0641\u0627\u0626\u0644\u0648\u06ba \u06a9\u0648 \u0646\u0627\u0645 \u062f\u06cc\u06ba \u06af\u06d2\u060c \u0627\u0648\u0631 \u0622\u06af\u06d2 \u0628\u0691\u06be\u0646\u06d2 \u0633\u06d2 \u067e\u06c1\u0644\u06d2 \u0622\u0624\u0679 \u067e\u0679 \u06a9\u0648 \u067e\u0691\u06be\u06cc\u06ba \u06af\u06d2\u06d4 \u06cc\u06c1 \u0639\u0627\u062f\u062a \u06a9\u0633\u06cc \u0628\u06be\u06cc AI \u06a9\u0648\u0688\u0646\u06af \u0679\u0648\u0644 \u0645\u06cc\u06ba \u0628\u06c1\u062a\u0631 \u0646\u062a\u0627\u0626\u062c \u0641\u0631\u0627\u06c1\u0645 \u06a9\u0631\u06d2 \u06af\u06cc\u06d4<\/p>\n<h2 id=\"heading-resources\"><strong>\u0648\u0633\u0627\u0626\u0644<\/strong><\/h2>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0627\u06cc\u06a9 \u0648\u06cc\u0628 \u0633\u0627\u0626\u0679 \u06cc\u0648\u0632\u0631 \u0627\u0646\u0679\u0631\u0641\u06cc\u0633 (UI) \u062c\u0648 HTML\u060c CSS\u060c \u0627\u0648\u0631 \u062c\u0632\u0648 \u06a9\u0648\u0688 \u062e\u0648\u062f \u0644\u06a9\u06be\u0646\u06d2 \u0645\u06cc\u06ba \u06af\u06be\u0646\u0679\u06d2 \u0644\u06cc\u062a\u0627 \u06c1\u06d2\u06d4 \u0627\u0628 \u0622\u067e \u0627\u067e\u0646\u06d2 \u0635\u0641\u062d\u06c1 \u06a9\u0648 \u0633\u0627\u062f\u06c1 \u0627\u0644\u0641\u0627\u0638 \u0645\u06cc\u06ba \u0628\u06cc\u0627\u0646 \u06a9\u0631 \u0633\u06a9\u062a\u06d2 \u06c1\u06cc\u06ba \u0627\u0648\u0631 AI \u06a9\u0648\u0688\u0646\u06af \u0679\u0648\u0644 \u06a9\u0648 \u067e\u06c1\u0644\u0627 \u0648\u0631\u0698\u0646 \u0644\u06a9\u06be\u0646\u06d2 \u062f\u06cc\u06ba\u06d4 \u062a\u0627\u06c1\u0645\u060c \u0646\u062a\u0627\u0626\u062c \u0622\u067e \u06a9\u06d2 \u0627\u0634\u0627\u0631\u06d2 \u067e\u0631 \u0645\u0646\u062d\u0635\u0631 \u06c1\u0648\u06ba \u06af\u06d2\u06d4 \u0645\u062e\u062a\u0635\u0631\u060c \u0645\u0628\u06c1\u0645 \u0627\u0634\u0627\u0631\u06d2 \u0622\u067e \u06a9\u0648 \u0628\u06d2 \u062a\u0631\u062a\u06cc\u0628 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":31117,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-31116","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"_links":{"self":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/31116","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/comments?post=31116"}],"version-history":[{"count":1,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/31116\/revisions"}],"predecessor-version":[{"id":31118,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/posts\/31116\/revisions\/31118"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media\/31117"}],"wp:attachment":[{"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/media?parent=31116"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/categories?post=31116"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/umang.pk\/en_us\/wp-json\/wp\/v2\/tags?post=31116"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}