From d46738c4bdd51aa82cebb7e0239159a841a2ebfd Mon Sep 17 00:00:00 2001
From: raj-khan <meherullah97@gmail.com>
Date: Mon, 13 Apr 2026 19:37:35 +0800
Subject: [PATCH] add npm package link to footer and install section

---
 components/Footer.tsx       | 10 ++++++++--
 components/InstallGuide.tsx | 23 +++++++++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 8577032..889ef71 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -23,12 +23,18 @@ export function Footer() {
                             {t("description")}
                         </p>
                         <div className="flex items-center gap-4">
-                            {/* Social Icons Placeholder */}
-                            <a href="https://github.com/aiagentflow/aiagentflow" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors">
+                            {/* GitHub */}
+                            <a href="https://github.com/aiagentflow/aiagentflow" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors" aria-label="GitHub">
                                 <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                                     <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
                                 </svg>
                             </a>
+                            {/* npm */}
+                            <a href="https://www.npmjs.com/package/@aiagentflow/cli" target="_blank" rel="noreferrer" className="text-slate-400 hover:text-red-500 transition-colors" aria-label="npm">
+                                <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z" />
+                                </svg>
+                            </a>
                         </div>
                     </div>
 
diff --git a/components/InstallGuide.tsx b/components/InstallGuide.tsx
index 3677b68..0bd18db 100644
--- a/components/InstallGuide.tsx
+++ b/components/InstallGuide.tsx
@@ -91,6 +91,29 @@ export function InstallGuide() {
                                 </button>
                             </div>
                         </motion.div>
+
+                        <motion.div
+                            initial={{ opacity: 0 }}
+                            whileInView={{ opacity: 1 }}
+                            viewport={{ once: true }}
+                            transition={{ duration: 0.5, delay: 0.4 }}
+                            className="mt-4 flex items-center gap-2"
+                        >
+                            <a
+                                href="https://www.npmjs.com/package/@aiagentflow/cli"
+                                target="_blank"
+                                rel="noreferrer"
+                                className="inline-flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400 hover:text-brand-primary dark:hover:text-brand-secondary transition-colors"
+                            >
+                                <svg className="w-4 h-4 text-red-500 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z" />
+                                </svg>
+                                View on npm
+                                <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                                </svg>
+                            </a>
+                        </motion.div>
                     </div>
 
                     {/* Right Column: Model Providers Grid */}