diff --git a/index.html b/index.html index b6d940d0..57ad94cb 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,9 @@ + + + Github Tracker diff --git a/src/components/Features.tsx b/src/components/Features.tsx index 8125cb42..d8a52028 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -1,4 +1,91 @@ import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react'; +import type { CSSProperties, ReactNode } from 'react'; + +type TerminalHeadingProps = { + title: string; + as?: 'h2' | 'h3' | 'h4'; + className?: string; + promptClassName?: string; + titleClassName?: string; + animated?: boolean; +}; + +type TerminalCardProps = { + label: string; + children: ReactNode; + className?: string; + contentClassName?: string; + accent?: 'blue' | 'green'; +}; + +const headingSizes: Record, string> = { + h2: 'text-3xl md:text-4xl', + h3: 'text-xl md:text-2xl', + h4: 'text-lg md:text-xl', +}; + +const TerminalHeading = ({ + title, + as: HeadingTag = 'h2', + className = '', + promptClassName = '', + titleClassName = '', + animated = false, +}: TerminalHeadingProps) => { + const chars = title.length + 2; + + return ( + + + > + + + {title} + + + ); +}; + +const TerminalCard = ({ + label, + children, + className = '', + contentClassName = '', + accent = 'blue', +}: TerminalCardProps) => { + const accentClasses = accent === 'green' ? 'text-[#3fb950] border-[#3fb950]/30' : 'text-[#58a6ff] border-[#58a6ff]/30'; + + return ( +
+
+ + +
+ {label} + _ +
+
+ +
+
+ {children} +
+
+ ); +}; const Features = () => { const features = [ @@ -59,28 +146,67 @@ const Features = () => { ]; return ( -
-
-
-

Powerful Features

-

- Everything you need to track, analyze, and understand GitHub activity patterns +

+
+
+
+
+
+

+ > initialize tracking capabilities +

+

+ Powerful Features +

+

+ Everything you need to track, analyze, and understand GitHub activity patterns.

-
+
{features.map((feature, index) => { const IconComponent = feature.icon; + const promptLabel = `feature-${String(index + 1).padStart(2, '0')}`; + const titleTone = index % 2 === 0 ? 'blue' : 'green'; return ( -
-
- + +
+
+
+ +
+
+ +
+ + cmd + + gh tracker --feature +
+
+
+ +

+ {feature.description} +

+ +
+ ready + {feature.title.toLowerCase().replace(/\s+/g, '-')} +
-

{feature.title}

-

- {feature.description} -

-
+ ); })}
diff --git a/src/index.css b/src/index.css index 3f5943c5..f18f2273 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,40 @@ @tailwind components; @tailwind utilities; +@keyframes terminal-blink { + 0%, + 49% { + opacity: 1; + } + + 50%, + 100% { + opacity: 0; + } +} + +@keyframes terminal-typewriter { + from { + max-width: 0; + } + + to { + max-width: calc(var(--terminal-chars, 18) * 1ch); + } +} + +.terminal-typewriter { + overflow: hidden; + white-space: nowrap; + vertical-align: bottom; + animation: terminal-typewriter 1.2s steps(var(--terminal-chars, 18), end) both; +} + +.terminal-card-cursor { + animation: terminal-blink 1s steps(1, end) infinite; +} + + @keyframes how-it-works-dash-flow { from { background-position: 0 0;