@jeetkhinde/stardawn-ui 1.0.5

package/cli/index.js

@@ -0,0 +1,142 @@
+#!/usr/bin/env node
+
+import {Command} from 'commander';
+import {readFileSync, writeFileSync, mkdirSync, existsSync} from 'fs';
+import {join, resolve, dirname} from 'path';
+import {fileURLToPath} from 'url';
+
+const program = new Command();
+
+// When installed via npm/npx, components are bundled next to this file.
+// cli/index.js → root is one level up → root/components/ and root/registry.json
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const BUNDLED_ROOT = resolve(__dirname, '..');
+
+// ─── ANSI colors (no external deps) ─────────────────────────────────────────
+const g = (s) => `\x1b[32m${s}\x1b[0m`;   // green
+const y = (s) => `\x1b[33m${s}\x1b[0m`;   // yellow
+const c = (s) => `\x1b[36m${s}\x1b[0m`;   // cyan
+const b = (s) => `\x1b[1m${s}\x1b[0m`;    // bold
+const d = (s) => `\x1b[2m${s}\x1b[0m`;    // dim
+const r = (s) => `\x1b[31m${s}\x1b[0m`;   // red
+
+// ─── Registry helpers ────────────────────────────────────────────────────────
+function getRegistry(localPath) {
+  const root = localPath ? resolve(localPath) : BUNDLED_ROOT;
+  const file = join(root, 'registry.json');
+  if (!existsSync(file)) {
+    console.error(r(`✗ registry.json not found at: ${file}`));
+    process.exit(1);
+  }
+  return JSON.parse(readFileSync(file, 'utf-8'));
+}
+
+function getComponentSource(filename, localPath) {
+  const root = localPath ? resolve(localPath) : BUNDLED_ROOT;
+  return readFileSync(join(root, 'components', filename), 'utf-8');
+}
+
+// ─── Core install logic ───────────────────────────────────────────────────────
+function installComponent(name, registry, outputDir, localPath, installed) {
+  if (installed.has(name)) return;
+
+  const component = registry.components.find((c) => c.name === name);
+  if (!component) {
+    console.error(r(`✗ Unknown component: "${name}"`));
+    console.log(d(`  Run ${c('stardawn-ui list')} to see available components.`));
+    process.exit(1);
+  }
+
+  // Install component dependencies first (recursive)
+  for (const dep of component.componentDeps) {
+    installComponent(dep, registry, outputDir, localPath, installed);
+  }
+
+  const source = getComponentSource(component.file, localPath);
+
+  if (!existsSync(outputDir)) {
+    mkdirSync(outputDir, {recursive: true});
+  }
+
+  const outPath = join(outputDir, component.file);
+  const isUpdate = existsSync(outPath);
+
+  writeFileSync(outPath, source, 'utf-8');
+  installed.add(name);
+
+  const status = isUpdate ? y('↻ updated') : g('✓ added');
+  const npmNote = component.npmDeps.length
+    ? d(`  [needs: ${component.npmDeps.join(', ')}]`)
+    : '';
+  console.log(`  ${status}  ${b(component.file)}${npmNote}`);
+}
+
+// ─── Commands ─────────────────────────────────────────────────────────────────
+program
+  .name('stardawn-ui')
+  .description('StarDawn UI — component installer for Astro + Tailwind projects')
+  .version('1.0.0');
+
+// LIST -------------------------------------------------------------------------
+program
+  .command('list')
+  .description('Show all available components')
+  .option('--local <path>', 'Use a local registry path instead of GitHub')
+  .action((opts) => {
+    const registry = getRegistry(opts.local);
+
+    // Group by category
+    const grouped = {};
+    for (const comp of registry.components) {
+      if (!grouped[comp.category]) grouped[comp.category] = [];
+      grouped[comp.category].push(comp);
+    }
+
+    console.log(b('\nStarDawn UI  —  available components\n'));
+    for (const [cat, comps] of Object.entries(grouped)) {
+      console.log(c(`  ${cat.toUpperCase()}`));
+      for (const comp of comps) {
+        const deps = comp.componentDeps.length
+          ? d(` (needs: ${comp.componentDeps.join(', ')})`)
+          : '';
+        console.log(`    ${b(comp.name.padEnd(22))}${d(comp.description)}${deps}`);
+      }
+      console.log();
+    }
+  });
+
+// ADD --------------------------------------------------------------------------
+program
+  .command('add <components...>')
+  .description('Add one or more components to your project')
+  .option('--local <path>', 'Use a local registry path instead of GitHub')
+  .option('--output <dir>', 'Output directory', 'src/components')
+  .action((components, opts) => {
+    const outputDir = resolve(process.cwd(), opts.output);
+    const registry = getRegistry(opts.local);
+    const installed = new Set();
+
+    console.log(b(`\nInstalling to ${d(outputDir)}\n`));
+
+    for (const name of components) {
+      installComponent(name, registry, outputDir, opts.local, installed);
+    }
+
+    // Collect all npm deps across everything installed
+    const allNpmDeps = new Set();
+    for (const name of installed) {
+      const comp = registry.components.find((c) => c.name === name);
+      comp?.npmDeps.forEach((dep) => allNpmDeps.add(dep));
+    }
+
+    if (allNpmDeps.size > 0) {
+      console.log(`\n${y('⚠')}  Install required npm packages:`);
+      console.log(`   ${c(`npm install ${[...allNpmDeps].join(' ')}`)}\n`);
+    } else {
+      console.log();
+    }
+
+    console.log(g('Done!'));
+  });
+
+program.parse();

package/components/BackgroundGlow.astro

@@ -0,0 +1,54 @@
+---
+export interface Props {
+  color1?: string;
+  color2?: string;
+}
+
+const { 
+  color1 = 'rgba(255,231,146,0.05)', 
+  color2 = 'rgba(129,151,255,0.05)' 
+} = Astro.props;
+---
+
+<!-- Background Accent Glows -->
+<div class="glow-orb-1 fixed top-[-10%] right-[-10%] w-[50vw] h-[50vw] pointer-events-none z-0" style={`background: radial-gradient(circle at center, ${color1} 0%, rgba(14,14,14,0) 70%)`}></div>
+<div class="glow-orb-2 fixed bottom-[-10%] left-[-10%] w-[40vw] h-[40vw] pointer-events-none z-0" style={`background: radial-gradient(circle at center, ${color2} 0%, rgba(14,14,14,0) 70%)`}></div>
+
+<script>
+  // @ts-nocheck
+  if (typeof window !== 'undefined' && window.gsap) {
+    const orbs1 = document.querySelectorAll('.glow-orb-1');
+    const orbs2 = document.querySelectorAll('.glow-orb-2');
+    
+    // Create performant quickTo setters for physics rendering
+    const movers = [];
+    
+    orbs1.forEach(orb => {
+      movers.push({
+        x: window.gsap.quickTo(orb, "x", {duration: 1.5, ease: "power3"}),
+        y: window.gsap.quickTo(orb, "y", {duration: 1.5, ease: "power3"}),
+        factor: -80
+      });
+    });
+    
+    orbs2.forEach(orb => {
+      movers.push({
+        x: window.gsap.quickTo(orb, "x", {duration: 2.5, ease: "power3.out"}),
+        y: window.gsap.quickTo(orb, "y", {duration: 2.5, ease: "power3.out"}),
+        factor: -140
+      });
+    });
+
+    window.addEventListener("mousemove", (e) => {
+      // Normalize mouse coordinates from -0.5 to 0.5
+      const xOffset = (e.clientX / window.innerWidth) - 0.5;
+      const yOffset = (e.clientY / window.innerHeight) - 0.5;
+      
+      // Perform parallax shift
+      movers.forEach(mover => {
+        mover.x(xOffset * mover.factor);
+        mover.y(yOffset * mover.factor);
+      });
+    });
+  }
+</script>

package/components/BentoCard.astro

@@ -0,0 +1,36 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  title: string;
+  icon: string;
+  accentColor: 'yellow' | 'blue';
+}
+
+const { title, icon, accentColor } = Astro.props;
+
+const shadowClass = accentColor === 'yellow' 
+  ? 'hover:shadow-[8px_8px_0px_0px_rgba(255,231,146,0.2)]' 
+  : 'hover:shadow-[8px_8px_0px_0px_rgba(129,151,255,0.2)]';
+
+const textAccentClass = accentColor === 'yellow' ? 'text-[#ffe792]' : 'text-[#8197ff]';
+---
+
+<div class={`group relative bg-[#141414] rounded-[2.5rem] p-8 md:p-10 outline outline-1 outline-white/10 transition-all duration-300 ease-out hover:-translate-y-1 ${shadowClass} flex flex-col h-full overflow-hidden`}>
+  <!-- Subtle glass highlight -->
+  <div class="absolute inset-0 bg-gradient-to-br from-white/[0.03] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+  
+  <div class="relative z-10 flex flex-col h-full">
+    <div class={`mb-6 inline-flex items-center justify-center w-14 h-14 rounded-2xl bg-[#0e0e0e] outline outline-1 outline-white/10 group-hover:scale-110 transition-transform duration-300 ${textAccentClass}`}>
+      <Icon name={icon} class="w-7 h-7" />
+    </div>
+    
+    <h3 class="font-display font-bold text-2xl uppercase tracking-tighter mb-4 text-white group-hover:text-white/90 transition-colors">
+      {title}
+    </h3>
+    
+    <div class="font-sans text-white/70 leading-relaxed flex-grow">
+      <slot />
+    </div>
+  </div>
+</div>

package/components/Button.astro

@@ -0,0 +1,20 @@
+---
+interface Props {
+  href?: string;
+  variant?: 'primary' | 'secondary';
+  class?: string;
+}
+
+const { href, variant = 'primary', class: className = '' } = Astro.props;
+
+const baseStyles = "gsap-magnetic inline-flex items-center justify-center px-6 py-3 font-display font-bold uppercase tracking-wider text-sm transition-colors duration-300 outline outline-1";
+const primaryStyles = "bg-[#ffe792] text-[#0e0e0e] outline-[#ffe792] hover:shadow-[6px_6px_0px_0px_rgba(255,231,146,0.4)]";
+const secondaryStyles = "bg-transparent text-white outline-white/20 hover:bg-white/5 hover:shadow-[6px_6px_0px_0px_rgba(255,255,255,0.1)]";
+
+const appliedStyles = `${baseStyles} ${variant === 'primary' ? primaryStyles : secondaryStyles} ${className}`;
+const Tag = href ? 'a' : 'button';
+---
+
+<Tag href={href} class={appliedStyles}>
+  <slot />
+</Tag>

package/components/FeatureListItem.astro

@@ -0,0 +1,56 @@
+---
+import { Icon } from 'astro-icon/components';
+
+export interface Props {
+  variant?: 'list' | 'bento' | 'detail' | 'simple';
+  icon?: string;
+  title?: string;
+  text?: string;
+  color?: string; // 'ffe792' or '8197ff'
+  class?: string;
+}
+
+const { 
+  variant = 'list',
+  icon = 'mdi:chevron-right', 
+  title, 
+  text, 
+  color = 'ffe792', 
+  class: className = '' 
+} = Astro.props;
+---
+
+{variant === 'bento' && (
+  <div class={`bg-white/5 p-4 rounded-2xl flex items-center gap-4 outline outline-1 outline-white/5 group-hover:bg-white/10 transition-colors ${className}`}>
+    {icon && <Icon name={icon} class={`text-[#${color}] w-5 h-5 shrink-0`} />}
+    <span class="font-display font-bold text-sm tracking-tight text-white">{title || text}</span>
+  </div>
+)}
+
+{variant === 'list' && (
+  <li class={`flex items-center gap-3 bg-white/5 p-4 rounded-2xl outline outline-1 outline-white/5 group-hover:bg-white/10 transition-colors ${className}`}>
+    {icon && <Icon name={icon} class={`text-[#${color}] w-5 h-5 shrink-0`} />}
+    <span class="font-display font-medium text-white/90">{text || title}</span>
+  </li>
+)}
+
+{variant === 'simple' && (
+  <li class={`flex items-start gap-4 text-white/70 ${className}`}>
+    {icon && <Icon name={icon} class={`text-[#${color}] mt-1 shrink-0 w-5 h-5`} />}
+    <span>{text || title}</span>
+  </li>
+)}
+
+{variant === 'detail' && (
+  <li class={`flex items-start gap-5 ${className}`}>
+    {icon && (
+      <div class={`bg-[#${color}]/10 p-3 rounded-2xl outline outline-1 outline-[#${color}]/20 shrink-0 group-hover:bg-[#${color}]/20 transition-colors`}>
+        <Icon name={icon} class={`w-7 h-7 text-[#${color}]`} />
+      </div>
+    )}
+    <div>
+      {title && <strong class="text-white block font-display text-lg uppercase tracking-tight mb-1">{title}</strong>}
+      <span class="text-white/60 text-sm leading-relaxed">{text}</span>
+    </div>
+  </li>
+)}

package/components/Footer.astro

@@ -0,0 +1,58 @@
+---
+import { Icon } from 'astro-icon/components';
+import FooterLink from './FooterLink.astro';
+---
+
+<footer class="w-full bg-[#0e0e0e] border-t border-white/10 relative z-10 mt-24 overflow-hidden">
+  <!-- Massive CTA Section -->
+  <a href="/#contact" class="group block w-full border-b border-white/10 relative overflow-hidden bg-[#0e0e0e] hover:bg-[#ffe792] transition-colors duration-700 ease-[cubic-bezier(0.76,0,0.24,1)]">
+    <div class="max-w-7xl mx-auto px-6 py-24 md:py-32 relative z-10 flex flex-col md:flex-row items-center justify-between gap-10">
+      <h2 class="text-5xl md:text-7xl lg:text-9xl font-display font-black tracking-tighter uppercase text-white group-hover:text-[#0e0e0e] transition-colors duration-700">
+        Schedule <br/> Free Call.
+      </h2>
+      <div class="w-24 h-24 md:w-32 md:h-32 rounded-full border-2 border-white/20 group-hover:border-[#0e0e0e]/20 flex items-center justify-center group-hover:scale-110 transition-all duration-700 group-hover:bg-[#0e0e0e]">
+        <Icon name="mdi:arrow-top-right" class="w-12 h-12 md:w-16 md:h-16 text-white group-hover:text-[#ffe792] transition-colors duration-700 group-hover:rotate-45" />
+      </div>
+    </div>
+  </a>
+
+  <div class="max-w-7xl mx-auto px-6 py-24 flex flex-col md:flex-row justify-between items-start gap-16">
+    <div class="flex flex-col max-w-md">
+      <div class="text-5xl font-black mb-10 font-display tracking-tighter uppercase flex items-center gap-3 text-transparent bg-clip-text bg-gradient-to-r from-[#ffe792] to-[#8197ff]">
+        STARDAWN IT
+      </div>
+      <p class="text-white/60 font-sans text-xl leading-relaxed mb-10">
+        The leading edge of technical architecture and system engineering. We provide the kinetic foundation for the world's most innovative enterprises.
+      </p>
+      <p class="text-white/40 text-xs font-display uppercase tracking-widest">© {new Date().getFullYear()} STARDAWN IT. KINETIC ARCHITECTURE UI.</p>
+    </div>
+    <div class="grid grid-cols-2 lg:grid-cols-3 gap-x-12 md:gap-x-24 gap-y-16">
+      <div class="flex flex-col gap-5">
+        <span class="font-display uppercase tracking-widest text-sm text-white font-bold mb-6">Company</span>
+        <FooterLink href="/">Home</FooterLink>
+        <FooterLink href="/about">About</FooterLink>
+        <FooterLink href="/blog">Blog</FooterLink>
+        <FooterLink href="/holiday">Holiday</FooterLink>
+      </div>
+      
+      <div class="flex flex-col gap-5">
+        <span class="font-display uppercase tracking-widest text-sm text-white font-bold mb-6">Services</span>
+        <FooterLink href="/services/connectwise-automate-consulting">ConnectWise Consult</FooterLink>
+        <FooterLink href="/services/rmm-admin">RMM Admin</FooterLink>
+        <FooterLink href="/services/noc-services">NOC Services</FooterLink>
+        <FooterLink href="/services/backup">Backup Management</FooterLink>
+        <a class="text-[#8197ff]/80 hover:text-[#8197ff] font-display uppercase tracking-widest text-sm hover:translate-x-2 transition-transform duration-200 flex items-center gap-2 group mt-2" href="/services">
+          View All Services <Icon name="mdi:arrow-right" class="w-4 h-4" />
+        </a>
+      </div>
+
+      <div class="flex flex-col gap-5">
+        <span class="font-display uppercase tracking-widest text-sm text-white font-bold mb-6">Support & Legal</span>
+        <FooterLink href="/contact">Contact</FooterLink>
+        <FooterLink href="/faq">FAQ</FooterLink>
+        <FooterLink href="/privacy-policy">Privacy Policy</FooterLink>
+        <FooterLink href="/terms-of-service">Terms of Service</FooterLink>
+      </div>
+    </div>
+  </div>
+</footer>

package/components/FooterLink.astro

@@ -0,0 +1,14 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  href: string;
+}
+
+const { href } = Astro.props;
+---
+
+<a class="text-white/60 hover:text-[#ffe792] font-display uppercase tracking-widest text-sm hover:translate-x-2 transition-transform duration-200 flex items-center gap-2 group" href={href}>
+  <Icon name="mdi:chevron-right" class="w-4 h-4 opacity-0 -ml-6 group-hover:opacity-100 group-hover:ml-0 transition-all duration-200" />
+  <slot />
+</a>

package/components/Navbar.astro

@@ -0,0 +1,223 @@
+---
+import Button from './Button.astro';
+import { Icon } from 'astro-icon/components';
+---
+
+<nav class="sticky top-0 z-50 w-full bg-[#0e0e0e]/90 backdrop-blur-md border-b border-white/10">
+  <div class="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
+    <a href="/" class="flex items-center gap-2 group">
+      <Icon name="mdi:star-four-points" class="w-6 h-6 text-[#ffe792] group-hover:rotate-90 transition-transform duration-500" />
+      <span class="font-display font-black text-xl tracking-tighter uppercase text-transparent bg-clip-text bg-gradient-to-r from-[#ffe792] to-[#8197ff]">StarDawn IT</span>
+    </a>
+    
+    <div class="hidden lg:flex items-center gap-6 h-full">
+      <a href="/" class="font-sans text-sm font-medium text-white/70 hover:text-white transition-colors h-full flex items-center">Home</a>
+      <div class="services-nav-group relative h-full flex items-center">
+        <a href="/services" class="font-sans text-sm font-medium text-white/70 hover:text-white transition-colors flex items-center gap-1 py-8">
+          Services
+          <Icon name="mdi:chevron-down" class="service-chevron w-4 h-4 opacity-70 transition-transform duration-300" />
+        </a>
+        
+        <!-- Dropdown Panel (Professional / Brutalist) -->
+        <div class="mega-menu-panel absolute top-[calc(100%-1rem)] md:left-0 lg:left-1/2 md:-translate-x-[20px] lg:-translate-x-1/2 w-[700px] lg:w-[1000px] bg-[#0e0e0e] border border-white/10 shadow-[8px_8px_0px_0px_rgba(255,231,146,0.1)] opacity-0 invisible translate-y-4 z-50">
+          <div class="grid grid-cols-4">
+            
+            <!-- Left Info Pane -->
+            <div class="col-span-1 p-8 bg-[#141414] border-r border-white/10 flex flex-col justify-between">
+              <div>
+                <Icon name="mdi:star-four-points" class="w-8 h-8 text-[#ffe792] mb-6" />
+                <h3 class="font-display font-black text-2xl uppercase tracking-tighter text-white mb-4">Engineering<br/>Excellence</h3>
+                <p class="text-white/50 text-sm leading-relaxed font-light mb-8">
+                  Comprehensive infrastructure management, automation, and growth solutions for elite MSPs.
+                </p>
+              </div>
+              <a href="/services" class="inline-flex items-center gap-2 text-xs font-display font-bold uppercase tracking-widest text-white hover:text-[#ffe792] transition-colors group/link w-max">
+                View All Services
+                <Icon name="mdi:arrow-right" class="w-4 h-4 group-hover/link:translate-x-1 transition-transform" />
+              </a>
+            </div>
+
+            <!-- Right Links Pane -->
+            <div class="col-span-3 p-8 grid grid-cols-3 gap-x-8">
+              
+              <!-- Column 1 -->
+              <div class="flex flex-col gap-6">
+                <div>
+                  <h4 class="text-[10px] font-display font-bold text-white/30 uppercase tracking-[0.2em] mb-4 border-b border-white/10 pb-2">RMM & MDM</h4>
+                  <ul class="space-y-3">
+                    <li>
+                      <a href="/services/connectwise-automate-consulting" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
+                          ConnectWise <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#ffe792]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/ninja-rmm-consulting" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          NinjaRMM <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/datto-rmm-consulting" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
+                          Datto RMM <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#ffe792]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/mac-mdm-consulting" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
+                          Mac MDM <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#ffe792]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/other-rmm-consulting" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          Other RMM Tools <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <!-- Column 2 -->
+              <div class="flex flex-col gap-6">
+                <div>
+                  <h4 class="text-[10px] font-display font-bold text-white/30 uppercase tracking-[0.2em] mb-4 border-b border-white/10 pb-2">Managed Operations</h4>
+                  <ul class="space-y-3">
+                    <li>
+                      <a href="/services/rmm-admin" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          RMM Admin <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/noc-services" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
+                          NOC Services <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#ffe792]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/backup" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          Backup Management <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+              <!-- Column 3 -->
+              <div class="flex flex-col gap-6">
+                <div>
+                  <h4 class="text-[10px] font-display font-bold text-white/30 uppercase tracking-[0.2em] mb-4 border-b border-white/10 pb-2">Growth & Talent</h4>
+                  <ul class="space-y-3">
+                    <li>
+                      <a href="/services/msp-dedicated-technicians" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
+                          Dedicated Techs <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#ffe792]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/msp-website-development" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
+                          MSP Websites <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#ffe792]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/custom-it-tools" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          Custom IT Tools <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/llm-training" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          LLM Training <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a href="/services/seo" class="mega-menu-link group/navlink block w-max">
+                        <span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
+                          SEO Campaigns <Icon name="mdi:arrow-top-right" class="w-3 h-3 opacity-0 -translate-x-2 group-hover/navlink:opacity-100 group-hover/navlink:translate-x-0 transition-all text-[#8197ff]" />
+                        </span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <a href="/#solutions" class="font-sans text-sm font-medium text-white/70 hover:text-white transition-colors h-full flex items-center">Solutions</a>
+      <a href="/about" class="font-sans text-sm font-medium text-white/70 hover:text-white transition-colors h-full flex items-center">About</a>
+      <a href="/blog" class="font-sans text-sm font-medium text-white/70 hover:text-white transition-colors h-full flex items-center">Blog</a>
+      <a href="/contact" class="font-sans text-sm font-medium text-white/70 hover:text-white transition-colors h-full flex items-center">Contact</a>
+    </div>
+    
+    <div class="flex items-center gap-4">
+      <Button href="/#contact" variant="primary" class="hidden lg:inline-flex">Client Portal</Button>
+      <button class="lg:hidden text-white/70 hover:text-white">
+        <Icon name="mdi:menu" class="w-6 h-6" />
+      </button>
+    </div>
+  </div>
+</nav>
+
+<script>
+  // @ts-nocheck
+  if (typeof window !== 'undefined' && window.gsap) {
+    const servicesNav = document.querySelector('.services-nav-group');
+    const panel = document.querySelector('.mega-menu-panel');
+    const links = document.querySelectorAll('.mega-menu-link');
+    const chevron = document.querySelector('.service-chevron');
+
+    if (servicesNav && panel) {
+      // Setup GSAP Menu Timeline
+      const menuTl = window.gsap.timeline({ paused: true, defaults: { ease: "power3.out" } });
+      
+      menuTl.to(panel, { autoAlpha: 1, y: 0, duration: 0.3 })
+            .to(chevron, { rotation: 180, duration: 0.3 }, "<")
+            .fromTo(links, 
+              { y: 15, opacity: 0 }, 
+              { y: 0, opacity: 1, duration: 0.4, stagger: 0.04 }, 
+              "-=0.15"
+            );
+
+      let timeoutId;
+      servicesNav.addEventListener('mouseenter', () => {
+        clearTimeout(timeoutId);
+        menuTl.play();
+      });
+      
+      servicesNav.addEventListener('mouseleave', () => {
+        // Add a tiny delay before closing to make it feel less jerky
+        timeoutId = setTimeout(() => menuTl.reverse(), 100);
+      });
+      
+      // Accessibility: Also open on focus
+      servicesNav.addEventListener('focusin', () => menuTl.play());
+      servicesNav.addEventListener('focusout', () => {
+        setTimeout(() => {
+          if (!servicesNav.contains(document.activeElement)) {
+            menuTl.reverse();
+          }
+        }, 10);
+      });
+    }
+  }
+</script>

package/components/OffsetCard.astro

@@ -0,0 +1,27 @@
+---
+interface Props {
+  color?: 'yellow' | 'blue';
+  class?: string;
+  as?: any;
+  noTranslate?: boolean;
+  rounded?: string;
+}
+
+const { 
+  color = 'yellow', 
+  class: className = '', 
+  as: Component = 'div', 
+  noTranslate = false,
+  rounded = 'rounded-[2.5rem]'
+} = Astro.props;
+
+const shadowClass = color === 'yellow'
+  ? 'hover:shadow-[8px_8px_0px_0px_rgba(255,231,146,0.2)]'
+  : 'hover:shadow-[8px_8px_0px_0px_rgba(129,151,255,0.2)]';
+
+const translateClass = noTranslate ? '' : 'hover:-translate-y-1';
+---
+
+<Component class={`group bg-[#141414] ${rounded} overflow-hidden outline outline-1 outline-white/10 hover:bg-[#1a1a1a] transition-all duration-500 ${shadowClass} ${translateClass} ${className}`}>
+  <slot />
+</Component>

package/components/PillTag.astro

@@ -0,0 +1,16 @@
+---
+export interface Props {
+  text: string;
+  href?: string;
+  class?: string;
+  hoverColor?: string; // 'ffe792' or '8197ff'
+}
+const { text, href, class: className = '', hoverColor } = Astro.props;
+const Element = href ? 'a' : 'span';
+
+const defaultHover = href ? 'hover:bg-white/10 hover:outline-white/20 hover:scale-[1.05] transition-all duration-300 cursor-pointer' 
+  : hoverColor ? `group-hover:outline-[#${hoverColor}]/40 transition-all` : 'transition-all group-hover:outline-white/40';
+---
+<Element href={href} class={`inline-flex items-center gap-2 bg-white/5 px-6 py-3 rounded-full text-xs font-display font-bold uppercase tracking-widest outline outline-1 outline-white/10 text-white ${defaultHover} ${className}`}>
+  {text}
+</Element>

package/components/SectionHeader.astro

@@ -0,0 +1,45 @@
+---
+export interface Props {
+  eyebrow: string;
+  eyebrowColor?: string; // 'ffe792' or '8197ff' or gradient 'from-[#ffe792] to-[#8197ff]'
+  titlePlain: string;
+  titleGradient?: string;
+  gradientColors?: string;
+  description?: string;
+  class?: string;
+  reveal?: boolean;
+}
+
+const {
+  eyebrow,
+  eyebrowColor = 'from-[#ffe792] to-[#8197ff]',
+  titlePlain,
+  titleGradient,
+  gradientColors = 'from-[#ffe792] to-[#8197ff]',
+  description,
+  class: className = 'mb-24',
+  reveal = true
+} = Astro.props;
+
+// If eyebrowColor doesn't contain 'from-', assume it's a solid hex
+const eyebrowClass = eyebrowColor.includes('from-') 
+  ? `text-transparent bg-clip-text bg-gradient-to-r ${eyebrowColor}`
+  : `text-[#${eyebrowColor}]`;
+---
+
+<div class={`${reveal ? 'gsap-reveal ' : ''}flex flex-col items-start gap-6 ${className}`}>
+  <span class={`font-display tracking-[0.2em] uppercase text-sm font-bold block ${eyebrowClass}`}>
+    {eyebrow}
+  </span>
+  <h2 class="text-white font-display text-5xl md:text-7xl lg:text-8xl font-black tracking-tighter leading-[0.9] uppercase">
+    {titlePlain}{titleGradient && (
+      <span> <span class={`text-transparent bg-clip-text bg-gradient-to-r ${gradientColors}`}>{titleGradient}</span>.</span>
+    )}
+    {!titleGradient && '.'}
+  </h2>
+  {description && (
+    <p class="text-white/70 text-xl md:text-2xl max-w-3xl mt-10 font-light leading-relaxed">
+      {description}
+    </p>
+  )}
+</div>

package/components/ServiceHero.astro

@@ -0,0 +1,41 @@
+---
+import Button from './Button.astro';
+
+export interface Props {
+  badgeText: string;
+  badgeColor?: string; // e.g., 'ffe792' or '8197ff'
+  titlePlain: string;
+  titleGradient: string;
+  gradientColors?: string; // e.g., 'from-[#ffe792] to-[#8197ff]'
+  description: string;
+  buttonText?: string;
+  buttonHref?: string;
+}
+
+const {
+  badgeText,
+  badgeColor = 'ffe792',
+  titlePlain,
+  titleGradient,
+  gradientColors = 'from-[#ffe792] to-[#8197ff]',
+  description,
+  buttonText = 'Get Detailed Pricing',
+  buttonHref = '/contact'
+} = Astro.props;
+---
+
+<section class="pt-16 lg:pt-24 pb-16 lg:pb-24 px-6 max-w-7xl mx-auto flex flex-col items-center text-center justify-center min-h-[calc(60vh-5rem)]">
+  <div class={`inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#${badgeColor}]/10 text-[#${badgeColor}] text-xs font-bold tracking-widest uppercase mb-8 outline outline-1 outline-[#${badgeColor}]/20`}>
+    <span class={`w-2 h-2 rounded-full bg-[#${badgeColor}] animate-pulse`}></span>
+    {badgeText}
+  </div>
+  <h1 class="font-display text-5xl md:text-7xl lg:text-8xl font-black uppercase tracking-tighter leading-[0.9] text-white mb-8">
+    {titlePlain} <span class={`text-transparent bg-clip-text bg-gradient-to-r ${gradientColors}`}>{titleGradient}</span>.
+  </h1>
+  <p class="text-white/70 text-xl md:text-2xl max-w-3xl mb-14 leading-relaxed font-light">
+    {description}
+  </p>
+  <div class="flex flex-col sm:flex-row gap-6 justify-center">
+    <Button href={buttonHref} variant="primary">{buttonText}</Button>
+  </div>
+</section>

package/components/SideNav.astro

@@ -0,0 +1,50 @@
+---
+import { Icon } from 'astro-icon/components';
+---
+
+<aside class="flex flex-col h-full p-6 border-r border-white/10 fixed left-0 top-0 z-40 bg-[#0e0e0e] w-72 hidden lg:flex">
+  <div class="mb-12">
+    <a href="/">
+      <h2 class="text-2xl font-black tracking-widest text-[#ffe792] font-display uppercase">STARDAWN IT</h2>
+      <p class="text-[10px] text-white/60 tracking-[0.2em] font-medium opacity-60">Technician Portal v2.0</p>
+    </a>
+  </div>
+  <nav class="flex-1 space-y-2">
+    <a class="text-white/60 hover:text-[#ffe792] px-4 py-3 flex items-center gap-3 transition-colors hover:bg-[#1a1a1a] hover:rounded-xl" href="#">
+      <Icon name="mdi:console" class="w-6 h-6" />
+      <span class="font-display uppercase tracking-tighter font-semibold">Dashboard</span>
+    </a>
+    <a class="bg-[#ffe792] text-[#0e0e0e] rounded-xl px-4 py-3 font-bold flex items-center gap-3 transition-all duration-300 scale-105 shadow-[0_0_20px_rgba(255,231,146,0.2)]" href="/services/msp-dedicated-technicians">
+      <Icon name="mdi:earth" class="w-6 h-6" />
+      <span class="font-display uppercase tracking-tighter font-bold">Offshore Talent</span>
+    </a>
+    <a class="text-white/60 hover:text-[#ffe792] px-4 py-3 flex items-center gap-3 transition-colors hover:bg-[#1a1a1a] hover:rounded-xl" href="#">
+      <Icon name="mdi:brain" class="w-6 h-6" />
+      <span class="font-display uppercase tracking-tighter font-semibold">Skill Bridge</span>
+    </a>
+    <a class="text-white/60 hover:text-[#ffe792] px-4 py-3 flex items-center gap-3 transition-colors hover:bg-[#1a1a1a] hover:rounded-xl" href="#">
+      <Icon name="mdi:hub" class="w-6 h-6" />
+      <span class="font-display uppercase tracking-tighter font-semibold">Integration</span>
+    </a>
+    <a class="text-white/60 hover:text-[#ffe792] px-4 py-3 flex items-center gap-3 transition-colors hover:bg-[#1a1a1a] hover:rounded-xl" href="#">
+      <Icon name="mdi:connection" class="w-6 h-6" />
+      <span class="font-display uppercase tracking-tighter font-semibold">Systems</span>
+    </a>
+  </nav>
+  <div class="mt-auto pt-6 border-t border-white/10 space-y-4">
+    <button class="w-full bg-[#ffe792] text-[#0e0e0e] font-bold py-4 rounded-xl flex items-center justify-center gap-2 hover:scale-[1.02] active:scale-95 transition-all">
+      <Icon name="mdi:rocket-launch" class="w-6 h-6" />
+      Deploy Resource
+    </button>
+    <div class="flex flex-col gap-1">
+      <a class="text-white/60 hover:text-white px-4 py-2 flex items-center gap-3 text-sm transition-colors" href="#">
+        <Icon name="mdi:book-open-page-variant" class="w-5 h-5" />
+        Docs
+      </a>
+      <a class="text-white/60 hover:text-white px-4 py-2 flex items-center gap-3 text-sm transition-colors" href="#">
+        <Icon name="mdi:help-circle-outline" class="w-5 h-5" />
+        Support
+      </a>
+    </div>
+  </div>
+</aside>

package/components/StatusBadge.astro

@@ -0,0 +1,14 @@
+---
+export interface Props {
+  text: string;
+  color?: string; // e.g. 'ffe792' or '8197ff'
+  dotColor?: string;
+  class?: string;
+}
+const { text, color = 'ffe792', dotColor, class: className = '' } = Astro.props;
+const finalDotColor = dotColor || color;
+---
+<div class={`inline-flex items-center gap-2 px-3 py-1 rounded-full bg-[#${color}]/10 text-[#${color}] text-xs font-bold tracking-widest uppercase mb-8 outline outline-1 outline-[#${color}]/20 ${className}`}>
+  <span class={`w-2 h-2 rounded-full bg-[#${finalDotColor}] animate-pulse`}></span>
+  {text}
+</div>

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@jeetkhinde/stardawn-ui",
+  "version": "1.0.5",
+  "description": "StarDawn UI — component installer for Astro + Tailwind MSP template sites",
+  "type": "module",
+  "bin": {
+    "stardawn-ui": "cli/index.js"
+  },
+  "files": [
+    "cli/index.js",
+    "components/**",
+    "registry.json"
+  ],
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [
+    "astro",
+    "tailwind",
+    "msp",
+    "ui",
+    "components",
+    "cli"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "commander": "^12.0.0"
+  }
+}

package/registry.json

@@ -0,0 +1,110 @@
+{
+  "version": "1.0.0",
+  "baseUrl": "https://raw.githubusercontent.com/stardawn-it/stardawn-registry/main",
+  "components": [
+    {
+      "name": "button",
+      "file": "Button.astro",
+      "description": "Primary and secondary button with GSAP magnetic effect",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": []
+    },
+    {
+      "name": "pill-tag",
+      "file": "PillTag.astro",
+      "description": "Pill-shaped tag, optionally a link, with hover color support",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": []
+    },
+    {
+      "name": "status-badge",
+      "file": "StatusBadge.astro",
+      "description": "Animated pulsing status badge with custom color",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": []
+    },
+    {
+      "name": "section-header",
+      "file": "SectionHeader.astro",
+      "description": "Section heading with eyebrow label, gradient title, and description",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": []
+    },
+    {
+      "name": "background-glow",
+      "file": "BackgroundGlow.astro",
+      "description": "Parallax radial glow orbs that follow mouse cursor via GSAP",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": []
+    },
+    {
+      "name": "offset-card",
+      "file": "OffsetCard.astro",
+      "description": "Dark card container with offset hover shadow, yellow or blue accent",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": []
+    },
+    {
+      "name": "bento-card",
+      "file": "BentoCard.astro",
+      "description": "Bento-style card with icon, title, and slot content",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": ["astro-icon", "@iconify-json/mdi"]
+    },
+    {
+      "name": "feature-list-item",
+      "file": "FeatureListItem.astro",
+      "description": "Feature list item in four variants: list, bento, detail, simple",
+      "category": "ui",
+      "componentDeps": [],
+      "npmDeps": ["astro-icon", "@iconify-json/mdi"]
+    },
+    {
+      "name": "footer-link",
+      "file": "FooterLink.astro",
+      "description": "Animated footer nav link with sliding chevron icon",
+      "category": "navigation",
+      "componentDeps": [],
+      "npmDeps": ["astro-icon", "@iconify-json/mdi"]
+    },
+    {
+      "name": "service-hero",
+      "file": "ServiceHero.astro",
+      "description": "Full-width hero section for service pages with badge, gradient title, and CTA",
+      "category": "sections",
+      "componentDeps": ["button"],
+      "npmDeps": []
+    },
+    {
+      "name": "navbar",
+      "file": "Navbar.astro",
+      "description": "Sticky top navbar with mega-menu dropdown and GSAP animations",
+      "category": "navigation",
+      "componentDeps": ["button"],
+      "npmDeps": ["astro-icon", "@iconify-json/mdi"]
+    },
+    {
+      "name": "footer",
+      "file": "Footer.astro",
+      "description": "Full-width footer with CTA strip, nav columns, and company info",
+      "category": "navigation",
+      "componentDeps": ["footer-link"],
+      "npmDeps": ["astro-icon", "@iconify-json/mdi"]
+    },
+    {
+      "name": "side-nav",
+      "file": "SideNav.astro",
+      "description": "Fixed left sidebar navigation for portal/dashboard layouts",
+      "category": "navigation",
+      "componentDeps": [],
+      "npmDeps": ["astro-icon", "@iconify-json/mdi"]
+    }
+  ]
+}