diff --git a/cypress/e2e/features/link-cards.cy.ts b/cypress/e2e/features/link-cards.cy.ts
new file mode 100644
index 0000000..2c0b4f1
--- /dev/null
+++ b/cypress/e2e/features/link-cards.cy.ts
@@ -0,0 +1,29 @@
+describe('LinkCards', () => {
+ beforeEach(() => {
+ cy.visit('/quickstart');
+ });
+
+ it('should render cards with icon, title, and description', () => {
+ cy.get('.grid a.no-underline')
+ .first()
+ .within(() => {
+ cy.get('svg').should('exist');
+ cy.get('h3').should('exist').and('not.be.empty');
+ cy.get('p').should('exist').and('not.be.empty');
+ });
+ });
+
+ it('should have valid navigation links', () => {
+ cy.get('.grid a.no-underline')
+ .first()
+ .then(($link) => {
+ const href = $link.attr('href');
+ // Verify href exists and is an internal link
+ expect(href).to.match(/^\//);
+ // Verify linked page exists (returns 200)
+ cy.request(href as string)
+ .its('status')
+ .should('eq', 200);
+ });
+ });
+});
diff --git a/src/components/CardGrid.astro b/src/components/CardGrid.astro
new file mode 100644
index 0000000..2639bc7
--- /dev/null
+++ b/src/components/CardGrid.astro
@@ -0,0 +1,12 @@
+---
+interface Props {
+ cols?: 2 | 3;
+}
+
+const { cols = 2 } = Astro.props;
+const gridCols = cols === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2';
+---
+
+
+
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
index db287e1..0ac3d99 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -14,7 +14,7 @@ import Default from '@astrojs/starlight/components/Header.astro';
link.className = 'dashboard-link';
link.target = '_blank';
link.rel = 'noopener noreferrer';
- link.innerHTML = `Dashboard `;
+ link.innerHTML = `Dashboard `;
rightGroup.appendChild(link);
}
}
@@ -64,17 +64,26 @@ import Default from '@astrojs/starlight/components/Header.astro';
letter-spacing: -0.01em;
color: white;
text-decoration: none;
- background-color: #16a34a;
- border-radius: 0.25rem;
+ background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
+ border: 1px solid rgba(255, 255, 255, 0.15);
+ border-radius: 0.375rem;
+ box-shadow:
+ 0 1px 2px rgba(0, 0, 0, 0.1),
+ inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.dashboard-link:hover {
- background-color: #22c55e;
+ background: linear-gradient(180deg, #2dd464 0%, #1eb854 100%);
}
- .dashboard-link .external-icon {
- width: 0.875rem;
- height: 0.875rem;
- opacity: 0.8;
+ .dashboard-link .pixel-arrow {
+ width: 0.625rem;
+ height: 0.625rem;
+ opacity: 0.6;
+ transition: opacity 0.15s ease;
+ }
+
+ .dashboard-link:hover .pixel-arrow {
+ opacity: 1;
}
diff --git a/src/components/LinkCard.astro b/src/components/LinkCard.astro
new file mode 100644
index 0000000..23a3c0f
--- /dev/null
+++ b/src/components/LinkCard.astro
@@ -0,0 +1,15 @@
+---
+import { LinkCard as LinkCardReact } from './react';
+
+interface Props {
+ href: string;
+ title: string;
+ description: string;
+ icon?: string;
+ external?: boolean;
+}
+
+const props = Astro.props;
+---
+
+
diff --git a/src/components/SpotlightCard.tsx b/src/components/SpotlightCard.tsx
new file mode 100644
index 0000000..fa6f9a0
--- /dev/null
+++ b/src/components/SpotlightCard.tsx
@@ -0,0 +1,71 @@
+import type React from 'react';
+import { useRef, useState } from 'react';
+
+interface Position {
+ x: number;
+ y: number;
+}
+
+interface SpotlightCardProps extends React.PropsWithChildren {
+ className?: string;
+ spotlightColor?: string;
+}
+
+const SpotlightCard: React.FC = ({
+ children,
+ className = '',
+ spotlightColor = 'rgba(255, 255, 255, 0.25)',
+}) => {
+ const divRef = useRef(null);
+ const [isFocused, setIsFocused] = useState(false);
+ const [position, setPosition] = useState({ x: 0, y: 0 });
+ const [opacity, setOpacity] = useState(0);
+
+ const handleMouseMove: React.MouseEventHandler = (e) => {
+ if (!divRef.current || isFocused) return;
+
+ const rect = divRef.current.getBoundingClientRect();
+ setPosition({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+ };
+
+ const handleFocus = () => {
+ setIsFocused(true);
+ setOpacity(0.6);
+ };
+
+ const handleBlur = () => {
+ setIsFocused(false);
+ setOpacity(0);
+ };
+
+ const handleMouseEnter = () => {
+ setOpacity(0.6);
+ };
+
+ const handleMouseLeave = () => {
+ setOpacity(0);
+ };
+
+ return (
+
+ );
+};
+
+export default SpotlightCard;
diff --git a/src/components/react/CardGrid.tsx b/src/components/react/CardGrid.tsx
new file mode 100644
index 0000000..8ccddad
--- /dev/null
+++ b/src/components/react/CardGrid.tsx
@@ -0,0 +1,18 @@
+import type React from 'react';
+
+interface CardGridProps {
+ children: React.ReactNode;
+ cols?: 2 | 3;
+}
+
+const CardGrid: React.FC = ({ children, cols = 2 }) => {
+ const gridCols = cols === 3 ? 'md:grid-cols-3' : 'md:grid-cols-2';
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default CardGrid;
diff --git a/src/components/react/LinkCard.tsx b/src/components/react/LinkCard.tsx
new file mode 100644
index 0000000..69b58b5
--- /dev/null
+++ b/src/components/react/LinkCard.tsx
@@ -0,0 +1,95 @@
+import {
+ ArrowUpRight,
+ BookOpen,
+ Code,
+ Cog,
+ FileText,
+ Folder,
+ HelpCircle,
+ Layers,
+ LifeBuoy,
+ type LucideIcon,
+ Play,
+ Rocket,
+ Settings,
+ Terminal,
+ Wrench,
+ Zap,
+} from 'lucide-react';
+import type React from 'react';
+import SpotlightCard from '../SpotlightCard';
+
+const iconMap: Record = {
+ 'arrow-up-right': ArrowUpRight,
+ 'book-open': BookOpen,
+ code: Code,
+ cog: Cog,
+ 'file-text': FileText,
+ folder: Folder,
+ 'help-circle': HelpCircle,
+ layers: Layers,
+ 'life-buoy': LifeBuoy,
+ play: Play,
+ rocket: Rocket,
+ settings: Settings,
+ terminal: Terminal,
+ wrench: Wrench,
+ zap: Zap,
+};
+
+interface LinkCardProps {
+ href: string;
+ title: string;
+ description: string;
+ icon?: keyof typeof iconMap;
+ external?: boolean;
+}
+
+const LinkCard: React.FC = ({
+ href,
+ title,
+ description,
+ icon,
+ external = false,
+}) => {
+ const isExternal = external || href.startsWith('http');
+ const IconComponent = icon ? iconMap[icon] : null;
+
+ return (
+
+
+
+ {IconComponent && (
+
+
+
+ )}
+
+
+ {title}
+
+ {isExternal && (
+
+ )}
+
+
+ {description}
+
+