@jeetkhinde/stardawn-ui 1.0.6 → 1.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +137 -0
- package/cli/index.js +68 -0
- package/components/MegaMenuPanel.astro +146 -0
- package/components/Navbar.astro +2 -143
- package/package.json +7 -1
- package/registry.json +9 -1
package/README.md
ADDED
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
# StarDawn UI
|
|
2
|
+
|
|
3
|
+
A component registry for Astro + Tailwind CSS sites — inspired by shadcn/ui. Components are **copied into your project**, not imported from a package. You own the code.
|
|
4
|
+
|
|
5
|
+
Built for [StarDawn IT](https://stardawnit.com) MSP template sites. Dark theme, gold/purple accents, GSAP animations.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
npx @jeetkhinde/stardawn-ui init
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
This creates `src/styles/global.css` with the Tailwind theme and prints all remaining setup steps.
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## Setup (what `init` walks you through)
|
|
20
|
+
|
|
21
|
+
### 1. Install Tailwind CSS
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install tailwindcss @tailwindcss/vite
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### 2. Update `astro.config.mjs`
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import { defineConfig } from 'astro/config';
|
|
31
|
+
import tailwindcss from '@tailwindcss/vite';
|
|
32
|
+
|
|
33
|
+
export default defineConfig({
|
|
34
|
+
vite: {
|
|
35
|
+
plugins: [tailwindcss()],
|
|
36
|
+
},
|
|
37
|
+
});
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
### 3. Import global.css in your layout
|
|
41
|
+
|
|
42
|
+
```astro
|
|
43
|
+
---
|
|
44
|
+
import '../styles/global.css';
|
|
45
|
+
---
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### 4. Add fonts + GSAP to your layout `<head>`
|
|
49
|
+
|
|
50
|
+
```html
|
|
51
|
+
<!-- Fonts -->
|
|
52
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
53
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
54
|
+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet">
|
|
55
|
+
|
|
56
|
+
<!-- GSAP (required by Button, BackgroundGlow, Navbar) -->
|
|
57
|
+
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
58
|
+
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Adding Components
|
|
64
|
+
|
|
65
|
+
```bash
|
|
66
|
+
# See all available components
|
|
67
|
+
npx @jeetkhinde/stardawn-ui list
|
|
68
|
+
|
|
69
|
+
# Add a component (dependencies are installed automatically)
|
|
70
|
+
npx @jeetkhinde/stardawn-ui add button
|
|
71
|
+
npx @jeetkhinde/stardawn-ui add navbar footer
|
|
72
|
+
npx @jeetkhinde/stardawn-ui add navbar footer bento-card section-header
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Components are written to `src/components/` by default.
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
# Custom output directory
|
|
79
|
+
npx @jeetkhinde/stardawn-ui add button --output src/components/ui
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
---
|
|
83
|
+
|
|
84
|
+
## Available Components
|
|
85
|
+
|
|
86
|
+
| Component | Category | Description |
|
|
87
|
+
|---|---|---|
|
|
88
|
+
| `button` | ui | Primary/secondary button with GSAP magnetic effect |
|
|
89
|
+
| `pill-tag` | ui | Pill-shaped tag, optionally a link |
|
|
90
|
+
| `status-badge` | ui | Animated pulsing status badge |
|
|
91
|
+
| `section-header` | ui | Section heading with eyebrow, gradient title, description |
|
|
92
|
+
| `background-glow` | ui | Parallax radial glow orbs (mouse-follow via GSAP) |
|
|
93
|
+
| `offset-card` | ui | Dark card with offset hover shadow, yellow/blue accent |
|
|
94
|
+
| `bento-card` | ui | Bento-style card with icon, title, and slot |
|
|
95
|
+
| `feature-list-item` | ui | Feature item in four variants: list, bento, detail, simple |
|
|
96
|
+
| `footer-link` | navigation | Animated footer nav link with sliding chevron |
|
|
97
|
+
| `navbar` | navigation | Sticky navbar with mega-menu and GSAP animations |
|
|
98
|
+
| `footer` | navigation | Full-width footer with CTA strip and nav columns |
|
|
99
|
+
| `side-nav` | navigation | Fixed left sidebar for portal/dashboard layouts |
|
|
100
|
+
| `service-hero` | sections | Full-width hero for service pages with badge + CTA |
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## Design System
|
|
105
|
+
|
|
106
|
+
**Fonts**
|
|
107
|
+
- `font-display` — Outfit (headings, labels, uppercase text)
|
|
108
|
+
- `font-sans` — DM Sans (body text, nav links)
|
|
109
|
+
|
|
110
|
+
**Brand Colors**
|
|
111
|
+
- Gold: `#ffe792`
|
|
112
|
+
- Purple: `#8197ff`
|
|
113
|
+
- Background: `#0e0e0e`
|
|
114
|
+
|
|
115
|
+
**Animations**
|
|
116
|
+
- GSAP 3 + ScrollTrigger for scroll animations
|
|
117
|
+
- Components check `window.gsap` — load GSAP globally via CDN before using animated components
|
|
118
|
+
|
|
119
|
+
---
|
|
120
|
+
|
|
121
|
+
## How It Works
|
|
122
|
+
|
|
123
|
+
stardawn-ui is a CLI that reads `registry.json` and copies `.astro` component files directly into your project. No runtime dependency. No bundled CSS. No imports. The components use Tailwind utility classes — as long as Tailwind is set up in your project, they work.
|
|
124
|
+
|
|
125
|
+
This is the same model as [shadcn/ui](https://ui.shadcn.com).
|
|
126
|
+
|
|
127
|
+
---
|
|
128
|
+
|
|
129
|
+
## Local Development
|
|
130
|
+
|
|
131
|
+
```bash
|
|
132
|
+
# Test the CLI against local components (skip npm)
|
|
133
|
+
node cli/index.js add button --local .
|
|
134
|
+
|
|
135
|
+
# Run the sandbox
|
|
136
|
+
cd sandbox && npm run dev
|
|
137
|
+
```
|
package/cli/index.js
CHANGED
|
@@ -71,12 +71,80 @@ function installComponent(name, registry, outputDir, localPath, installed) {
|
|
|
71
71
|
console.log(` ${status} ${b(component.file)}${npmNote}`);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
+
// ─── Init helpers ────────────────────────────────────────────────────────────
|
|
75
|
+
const GLOBAL_CSS = `@import "tailwindcss";
|
|
76
|
+
|
|
77
|
+
@theme {
|
|
78
|
+
--font-display: "Outfit", sans-serif;
|
|
79
|
+
--font-sans: "DM Sans", sans-serif;
|
|
80
|
+
}
|
|
81
|
+
`;
|
|
82
|
+
|
|
83
|
+
const FONT_SNIPPET = ` <!-- Fonts (StarDawn UI) -->
|
|
84
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
85
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
86
|
+
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Outfit:wght@500;700;900&display=swap" rel="stylesheet">`;
|
|
87
|
+
|
|
88
|
+
const GSAP_SNIPPET = ` <!-- GSAP (required by Button, BackgroundGlow, Navbar) -->
|
|
89
|
+
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|
90
|
+
<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>`;
|
|
91
|
+
|
|
92
|
+
const CSS_IMPORT_SNIPPET = `import '../styles/global.css';`;
|
|
93
|
+
|
|
94
|
+
const VITE_SNIPPET = `import tailwindcss from '@tailwindcss/vite';
|
|
95
|
+
|
|
96
|
+
// Inside defineConfig:
|
|
97
|
+
vite: {
|
|
98
|
+
plugins: [tailwindcss()],
|
|
99
|
+
},`;
|
|
100
|
+
|
|
74
101
|
// ─── Commands ─────────────────────────────────────────────────────────────────
|
|
75
102
|
program
|
|
76
103
|
.name('stardawn-ui')
|
|
77
104
|
.description('StarDawn UI — component installer for Astro + Tailwind projects')
|
|
78
105
|
.version('1.0.0');
|
|
79
106
|
|
|
107
|
+
// INIT -------------------------------------------------------------------------
|
|
108
|
+
program
|
|
109
|
+
.command('init')
|
|
110
|
+
.description('Set up StarDawn UI in your Astro project')
|
|
111
|
+
.option('--styles <dir>', 'Directory to write global.css', 'src/styles')
|
|
112
|
+
.action((opts) => {
|
|
113
|
+
const stylesDir = resolve(process.cwd(), opts.styles);
|
|
114
|
+
const cssPath = join(stylesDir, 'global.css');
|
|
115
|
+
|
|
116
|
+
console.log(b('\nStarDawn UI — init\n'));
|
|
117
|
+
|
|
118
|
+
// 1. Write global.css
|
|
119
|
+
if (!existsSync(stylesDir)) mkdirSync(stylesDir, { recursive: true });
|
|
120
|
+
const isUpdate = existsSync(cssPath);
|
|
121
|
+
writeFileSync(cssPath, GLOBAL_CSS, 'utf-8');
|
|
122
|
+
console.log(` ${isUpdate ? y('↻ updated') : g('✓ created')} ${b(cssPath)}\n`);
|
|
123
|
+
|
|
124
|
+
// 2. Install instructions
|
|
125
|
+
console.log(b('Next steps:\n'));
|
|
126
|
+
|
|
127
|
+
console.log(`${c('1.')} Install Tailwind CSS:\n`);
|
|
128
|
+
console.log(` ${c('npm install tailwindcss @tailwindcss/vite')}\n`);
|
|
129
|
+
|
|
130
|
+
console.log(`${c('2.')} Add the Vite plugin to ${b('astro.config.mjs')}:\n`);
|
|
131
|
+
console.log(d(VITE_SNIPPET.split('\n').map(l => ' ' + l).join('\n')));
|
|
132
|
+
console.log();
|
|
133
|
+
|
|
134
|
+
console.log(`${c('3.')} Import global.css in your layout / page ${b('<head>')}:\n`);
|
|
135
|
+
console.log(d(' ' + CSS_IMPORT_SNIPPET));
|
|
136
|
+
console.log();
|
|
137
|
+
|
|
138
|
+
console.log(`${c('4.')} Add to your layout ${b('<head>')}:\n`);
|
|
139
|
+
console.log(d(FONT_SNIPPET.split('\n').map(l => ' ' + l).join('\n')));
|
|
140
|
+
console.log();
|
|
141
|
+
console.log(d(GSAP_SNIPPET.split('\n').map(l => ' ' + l).join('\n')));
|
|
142
|
+
console.log();
|
|
143
|
+
|
|
144
|
+
console.log(g('Ready! Run `stardawn-ui add <component>` to install components.'));
|
|
145
|
+
console.log(d('Run `stardawn-ui list` to see all available components.\n'));
|
|
146
|
+
});
|
|
147
|
+
|
|
80
148
|
// LIST -------------------------------------------------------------------------
|
|
81
149
|
program
|
|
82
150
|
.command('list')
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
---
|
|
2
|
+
import { Icon } from 'astro-icon/components';
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
<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">
|
|
6
|
+
<div class="grid grid-cols-4">
|
|
7
|
+
|
|
8
|
+
<!-- Left Info Pane -->
|
|
9
|
+
<div class="col-span-1 p-8 bg-[#141414] border-r border-white/10 flex flex-col justify-between">
|
|
10
|
+
<div>
|
|
11
|
+
<Icon name="mdi:star-four-points" class="w-8 h-8 text-[#ffe792] mb-6" />
|
|
12
|
+
<h3 class="font-display font-black text-2xl uppercase tracking-tighter text-white mb-4">Engineering<br/>Excellence</h3>
|
|
13
|
+
<p class="text-white/50 text-sm leading-relaxed font-light mb-8">
|
|
14
|
+
Comprehensive infrastructure management, automation, and growth solutions for elite MSPs.
|
|
15
|
+
</p>
|
|
16
|
+
</div>
|
|
17
|
+
<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">
|
|
18
|
+
View All Services
|
|
19
|
+
<Icon name="mdi:arrow-right" class="w-4 h-4 group-hover/link:translate-x-1 transition-transform" />
|
|
20
|
+
</a>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
23
|
+
<!-- Right Links Pane -->
|
|
24
|
+
<div class="col-span-3 p-8 grid grid-cols-3 gap-x-8">
|
|
25
|
+
|
|
26
|
+
<!-- Column 1: RMM & MDM -->
|
|
27
|
+
<div class="flex flex-col gap-6">
|
|
28
|
+
<div>
|
|
29
|
+
<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>
|
|
30
|
+
<ul class="space-y-3">
|
|
31
|
+
<li>
|
|
32
|
+
<a href="/services/connectwise-automate-consulting" class="mega-menu-link group/navlink block w-max">
|
|
33
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
34
|
+
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]" />
|
|
35
|
+
</span>
|
|
36
|
+
</a>
|
|
37
|
+
</li>
|
|
38
|
+
<li>
|
|
39
|
+
<a href="/services/ninja-rmm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
40
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
41
|
+
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]" />
|
|
42
|
+
</span>
|
|
43
|
+
</a>
|
|
44
|
+
</li>
|
|
45
|
+
<li>
|
|
46
|
+
<a href="/services/datto-rmm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
47
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
48
|
+
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]" />
|
|
49
|
+
</span>
|
|
50
|
+
</a>
|
|
51
|
+
</li>
|
|
52
|
+
<li>
|
|
53
|
+
<a href="/services/mac-mdm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
54
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
55
|
+
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]" />
|
|
56
|
+
</span>
|
|
57
|
+
</a>
|
|
58
|
+
</li>
|
|
59
|
+
<li>
|
|
60
|
+
<a href="/services/other-rmm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
61
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
62
|
+
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]" />
|
|
63
|
+
</span>
|
|
64
|
+
</a>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<!-- Column 2: Managed Operations -->
|
|
71
|
+
<div class="flex flex-col gap-6">
|
|
72
|
+
<div>
|
|
73
|
+
<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>
|
|
74
|
+
<ul class="space-y-3">
|
|
75
|
+
<li>
|
|
76
|
+
<a href="/services/rmm-admin" class="mega-menu-link group/navlink block w-max">
|
|
77
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
78
|
+
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]" />
|
|
79
|
+
</span>
|
|
80
|
+
</a>
|
|
81
|
+
</li>
|
|
82
|
+
<li>
|
|
83
|
+
<a href="/services/noc-services" class="mega-menu-link group/navlink block w-max">
|
|
84
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
85
|
+
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]" />
|
|
86
|
+
</span>
|
|
87
|
+
</a>
|
|
88
|
+
</li>
|
|
89
|
+
<li>
|
|
90
|
+
<a href="/services/backup" class="mega-menu-link group/navlink block w-max">
|
|
91
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
92
|
+
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]" />
|
|
93
|
+
</span>
|
|
94
|
+
</a>
|
|
95
|
+
</li>
|
|
96
|
+
</ul>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Column 3: Growth & Talent -->
|
|
101
|
+
<div class="flex flex-col gap-6">
|
|
102
|
+
<div>
|
|
103
|
+
<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>
|
|
104
|
+
<ul class="space-y-3">
|
|
105
|
+
<li>
|
|
106
|
+
<a href="/services/msp-dedicated-technicians" class="mega-menu-link group/navlink block w-max">
|
|
107
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
108
|
+
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]" />
|
|
109
|
+
</span>
|
|
110
|
+
</a>
|
|
111
|
+
</li>
|
|
112
|
+
<li>
|
|
113
|
+
<a href="/services/msp-website-development" class="mega-menu-link group/navlink block w-max">
|
|
114
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
115
|
+
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]" />
|
|
116
|
+
</span>
|
|
117
|
+
</a>
|
|
118
|
+
</li>
|
|
119
|
+
<li>
|
|
120
|
+
<a href="/services/custom-it-tools" class="mega-menu-link group/navlink block w-max">
|
|
121
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
122
|
+
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]" />
|
|
123
|
+
</span>
|
|
124
|
+
</a>
|
|
125
|
+
</li>
|
|
126
|
+
<li>
|
|
127
|
+
<a href="/services/llm-training" class="mega-menu-link group/navlink block w-max">
|
|
128
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
129
|
+
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]" />
|
|
130
|
+
</span>
|
|
131
|
+
</a>
|
|
132
|
+
</li>
|
|
133
|
+
<li>
|
|
134
|
+
<a href="/services/seo" class="mega-menu-link group/navlink block w-max">
|
|
135
|
+
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
136
|
+
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]" />
|
|
137
|
+
</span>
|
|
138
|
+
</a>
|
|
139
|
+
</li>
|
|
140
|
+
</ul>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
package/components/Navbar.astro
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
import Button from './Button.astro';
|
|
3
|
+
import MegaMenuPanel from './MegaMenuPanel.astro';
|
|
3
4
|
import { Icon } from 'astro-icon/components';
|
|
4
5
|
---
|
|
5
6
|
|
|
@@ -18,149 +19,7 @@ import { Icon } from 'astro-icon/components';
|
|
|
18
19
|
<Icon name="mdi:chevron-down" class="service-chevron w-4 h-4 opacity-70 transition-transform duration-300" />
|
|
19
20
|
</a>
|
|
20
21
|
|
|
21
|
-
|
|
22
|
-
<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">
|
|
23
|
-
<div class="grid grid-cols-4">
|
|
24
|
-
|
|
25
|
-
<!-- Left Info Pane -->
|
|
26
|
-
<div class="col-span-1 p-8 bg-[#141414] border-r border-white/10 flex flex-col justify-between">
|
|
27
|
-
<div>
|
|
28
|
-
<Icon name="mdi:star-four-points" class="w-8 h-8 text-[#ffe792] mb-6" />
|
|
29
|
-
<h3 class="font-display font-black text-2xl uppercase tracking-tighter text-white mb-4">Engineering<br/>Excellence</h3>
|
|
30
|
-
<p class="text-white/50 text-sm leading-relaxed font-light mb-8">
|
|
31
|
-
Comprehensive infrastructure management, automation, and growth solutions for elite MSPs.
|
|
32
|
-
</p>
|
|
33
|
-
</div>
|
|
34
|
-
<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">
|
|
35
|
-
View All Services
|
|
36
|
-
<Icon name="mdi:arrow-right" class="w-4 h-4 group-hover/link:translate-x-1 transition-transform" />
|
|
37
|
-
</a>
|
|
38
|
-
</div>
|
|
39
|
-
|
|
40
|
-
<!-- Right Links Pane -->
|
|
41
|
-
<div class="col-span-3 p-8 grid grid-cols-3 gap-x-8">
|
|
42
|
-
|
|
43
|
-
<!-- Column 1 -->
|
|
44
|
-
<div class="flex flex-col gap-6">
|
|
45
|
-
<div>
|
|
46
|
-
<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>
|
|
47
|
-
<ul class="space-y-3">
|
|
48
|
-
<li>
|
|
49
|
-
<a href="/services/connectwise-automate-consulting" class="mega-menu-link group/navlink block w-max">
|
|
50
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
51
|
-
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]" />
|
|
52
|
-
</span>
|
|
53
|
-
</a>
|
|
54
|
-
</li>
|
|
55
|
-
<li>
|
|
56
|
-
<a href="/services/ninja-rmm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
57
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
58
|
-
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]" />
|
|
59
|
-
</span>
|
|
60
|
-
</a>
|
|
61
|
-
</li>
|
|
62
|
-
<li>
|
|
63
|
-
<a href="/services/datto-rmm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
64
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
65
|
-
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]" />
|
|
66
|
-
</span>
|
|
67
|
-
</a>
|
|
68
|
-
</li>
|
|
69
|
-
<li>
|
|
70
|
-
<a href="/services/mac-mdm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
71
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
72
|
-
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]" />
|
|
73
|
-
</span>
|
|
74
|
-
</a>
|
|
75
|
-
</li>
|
|
76
|
-
<li>
|
|
77
|
-
<a href="/services/other-rmm-consulting" class="mega-menu-link group/navlink block w-max">
|
|
78
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
79
|
-
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]" />
|
|
80
|
-
</span>
|
|
81
|
-
</a>
|
|
82
|
-
</li>
|
|
83
|
-
</ul>
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- Column 2 -->
|
|
88
|
-
<div class="flex flex-col gap-6">
|
|
89
|
-
<div>
|
|
90
|
-
<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>
|
|
91
|
-
<ul class="space-y-3">
|
|
92
|
-
<li>
|
|
93
|
-
<a href="/services/rmm-admin" class="mega-menu-link group/navlink block w-max">
|
|
94
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
95
|
-
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]" />
|
|
96
|
-
</span>
|
|
97
|
-
</a>
|
|
98
|
-
</li>
|
|
99
|
-
<li>
|
|
100
|
-
<a href="/services/noc-services" class="mega-menu-link group/navlink block w-max">
|
|
101
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
102
|
-
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]" />
|
|
103
|
-
</span>
|
|
104
|
-
</a>
|
|
105
|
-
</li>
|
|
106
|
-
<li>
|
|
107
|
-
<a href="/services/backup" class="mega-menu-link group/navlink block w-max">
|
|
108
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
109
|
-
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]" />
|
|
110
|
-
</span>
|
|
111
|
-
</a>
|
|
112
|
-
</li>
|
|
113
|
-
</ul>
|
|
114
|
-
</div>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<!-- Column 3 -->
|
|
118
|
-
<div class="flex flex-col gap-6">
|
|
119
|
-
<div>
|
|
120
|
-
<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>
|
|
121
|
-
<ul class="space-y-3">
|
|
122
|
-
<li>
|
|
123
|
-
<a href="/services/msp-dedicated-technicians" class="mega-menu-link group/navlink block w-max">
|
|
124
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
125
|
-
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]" />
|
|
126
|
-
</span>
|
|
127
|
-
</a>
|
|
128
|
-
</li>
|
|
129
|
-
<li>
|
|
130
|
-
<a href="/services/msp-website-development" class="mega-menu-link group/navlink block w-max">
|
|
131
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#ffe792] transition-colors gap-2 flex items-center">
|
|
132
|
-
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]" />
|
|
133
|
-
</span>
|
|
134
|
-
</a>
|
|
135
|
-
</li>
|
|
136
|
-
<li>
|
|
137
|
-
<a href="/services/custom-it-tools" class="mega-menu-link group/navlink block w-max">
|
|
138
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
139
|
-
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]" />
|
|
140
|
-
</span>
|
|
141
|
-
</a>
|
|
142
|
-
</li>
|
|
143
|
-
<li>
|
|
144
|
-
<a href="/services/llm-training" class="mega-menu-link group/navlink block w-max">
|
|
145
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
146
|
-
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]" />
|
|
147
|
-
</span>
|
|
148
|
-
</a>
|
|
149
|
-
</li>
|
|
150
|
-
<li>
|
|
151
|
-
<a href="/services/seo" class="mega-menu-link group/navlink block w-max">
|
|
152
|
-
<span class="font-display text-sm font-bold uppercase text-white group-hover/navlink:text-[#8197ff] transition-colors gap-2 flex items-center">
|
|
153
|
-
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]" />
|
|
154
|
-
</span>
|
|
155
|
-
</a>
|
|
156
|
-
</li>
|
|
157
|
-
</ul>
|
|
158
|
-
</div>
|
|
159
|
-
</div>
|
|
160
|
-
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
</div>
|
|
22
|
+
<MegaMenuPanel />
|
|
164
23
|
</div>
|
|
165
24
|
|
|
166
25
|
<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>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jeetkhinde/stardawn-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
4
4
|
"description": "StarDawn UI — component installer for Astro + Tailwind MSP template sites",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -22,6 +22,12 @@
|
|
|
22
22
|
"components",
|
|
23
23
|
"cli"
|
|
24
24
|
],
|
|
25
|
+
"publishConfig": {
|
|
26
|
+
"access": "public"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"publish": "npm publish"
|
|
30
|
+
},
|
|
25
31
|
"license": "MIT",
|
|
26
32
|
"dependencies": {
|
|
27
33
|
"commander": "^12.0.0"
|
package/registry.json
CHANGED
|
@@ -82,12 +82,20 @@
|
|
|
82
82
|
"componentDeps": ["button"],
|
|
83
83
|
"npmDeps": []
|
|
84
84
|
},
|
|
85
|
+
{
|
|
86
|
+
"name": "mega-menu-panel",
|
|
87
|
+
"file": "MegaMenuPanel.astro",
|
|
88
|
+
"description": "Services mega-menu dropdown panel used inside Navbar",
|
|
89
|
+
"category": "navigation",
|
|
90
|
+
"componentDeps": [],
|
|
91
|
+
"npmDeps": ["astro-icon", "@iconify-json/mdi"]
|
|
92
|
+
},
|
|
85
93
|
{
|
|
86
94
|
"name": "navbar",
|
|
87
95
|
"file": "Navbar.astro",
|
|
88
96
|
"description": "Sticky top navbar with mega-menu dropdown and GSAP animations",
|
|
89
97
|
"category": "navigation",
|
|
90
|
-
"componentDeps": ["button"],
|
|
98
|
+
"componentDeps": ["button", "mega-menu-panel"],
|
|
91
99
|
"npmDeps": ["astro-icon", "@iconify-json/mdi"]
|
|
92
100
|
},
|
|
93
101
|
{
|