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..646826a0 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 { 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/components/HowItWorks.tsx b/src/components/HowItWorks.tsx index 86224f9d..ffe06ecd 100644 --- a/src/components/HowItWorks.tsx +++ b/src/components/HowItWorks.tsx @@ -1,107 +1,92 @@ -import { useContext } from 'react'; -import { ArrowDown, ArrowRight, BarChart3, Activity, Search } from 'lucide-react'; -import { ThemeContext } from '../context/ThemeContext'; -import type { ThemeContextType } from '../context/ThemeContext'; +import { BarChart3, Activity, Search } from 'lucide-react'; const HowItWorks = () => { - const themeContext = useContext(ThemeContext) as ThemeContextType | null; - const mode = themeContext?.mode ?? 'light'; - const steps = [ { number: 1, title: 'Search Users', + label: 'Discover', description: 'Enter GitHub usernames or search for users by name. Add them to your tracking dashboard.', icon: Search, }, { number: 2, title: 'Monitor Activity', + label: 'Observe', description: 'Watch insights of commits, pull requests, issues, and other GitHub activities.', icon: Activity, }, { number: 3, title: 'Analyze Insights', + label: 'Review', description: 'Review detailed analytics, export reports, and gain valuable insights into development patterns.', icon: BarChart3, } ]; - const sectionBgClass = mode === 'dark' - ? 'bg-[#1e2130] text-white' - : 'bg-gradient-to-b from-gray-50 via-white to-slate-100 text-gray-900'; - const cardSurfaceClass = mode === 'dark' ? 'bg-white/[0.04]' : 'bg-white'; - const cardBorderClass = mode === 'dark' ? 'border-white/10' : 'border-gray-200'; - const titleTextClass = mode === 'dark' ? 'text-white' : 'text-gray-900'; - const bodyTextClass = mode === 'dark' ? 'text-gray-300' : 'text-gray-600'; - const connectorBubbleClass = mode === 'dark' - ? 'rounded-full border border-blue-400/25 bg-[#1e2130] p-2 text-blue-300 shadow-[0_0_20px_rgba(59,130,246,0.28)]' - : 'rounded-full border border-blue-200 bg-white p-2 text-blue-600 shadow-[0_0_18px_rgba(59,130,246,0.14)]'; - const connectorLineClass = mode === 'dark' - ? 'how-it-works-flow-line' - : 'how-it-works-flow-line light'; - return ( -
-
-
-

How It Works

-

- Get started in minutes with our simple three-step process -

-
+
+
diff --git a/src/index.css b/src/index.css index 3f5943c5..4c365439 100644 --- a/src/index.css +++ b/src/index.css @@ -2,40 +2,196 @@ @tailwind components; @tailwind utilities; -@keyframes how-it-works-dash-flow { +@keyframes terminal-blink { + 0%, + 49% { + opacity: 1; + } + + 50%, + 100% { + opacity: 0; + } +} + +@keyframes terminal-typewriter { from { - background-position: 0 0; + max-width: 0; } to { - background-position: 72px 0; + max-width: calc(var(--terminal-chars, 18) * 1ch); } } -@keyframes how-it-works-dash-flow-vertical { +.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-drift { + 0%, + 100% { + transform: translate3d(0, 0, 0) scale(1); + } + + 50% { + transform: translate3d(0, -10px, 0) scale(1.04); + } +} + +@keyframes how-it-works-connector-flow { from { background-position: 0 0; } - to { - background-position: 0 72px; + background-position: 120px 0; } } -.how-it-works-flow-line { +@keyframes how-it-works-badge-pulse { + 0%, + 100% { + box-shadow: + 0 0 0 0 rgba(79, 124, 255, 0.08), + 0 12px 24px rgba(79, 124, 255, 0.12); + } + + 50% { + box-shadow: + 0 0 0 10px rgba(79, 124, 255, 0), + 0 14px 28px rgba(79, 124, 255, 0.16); + } +} + +.how-it-works-section { + position: relative; + isolation: isolate; + background: + radial-gradient(circle at top left, rgba(79, 124, 255, 0.12), transparent 42%), + radial-gradient(circle at 82% 18%, rgba(96, 165, 250, 0.08), transparent 36%), + linear-gradient(180deg, #f8fafc 0%, #eef4ff 100%); +} + +.how-it-works-grid-overlay { + background-image: + linear-gradient(rgba(148, 163, 184, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(148, 163, 184, 0.05) 1px, transparent 1px); + background-size: 32px 32px; + mask-image: radial-gradient(circle at center, black 55%, transparent 100%); + opacity: 0.45; +} + +.how-it-works-ambient { + position: absolute; + width: 22rem; + height: 22rem; + border-radius: 9999px; + filter: blur(32px); + pointer-events: none; +} + +.how-it-works-ambient-left { + top: -6rem; + left: -5rem; + background: radial-gradient(circle, rgba(79, 124, 255, 0.16), transparent 72%); + opacity: 0.8; +} + +.how-it-works-ambient-right { + right: -6rem; + bottom: -7rem; + background: radial-gradient(circle, rgba(96, 165, 250, 0.14), transparent 72%); + opacity: 0.75; +} + +.how-it-works-timeline-line { + height: 2px; + border-radius: 9999px; + background-image: linear-gradient(90deg, rgba(79, 124, 255, 0.06), rgba(79, 124, 255, 0.48), rgba(79, 124, 255, 0.06)); + background-size: 120px 2px; + animation: how-it-works-connector-flow 10s linear infinite; + box-shadow: 0 0 14px rgba(79, 124, 255, 0.12); +} + +.how-it-works-step-link { + position: relative; display: block; height: 2px; border-radius: 9999px; - background-image: repeating-linear-gradient( - 90deg, - rgba(96, 165, 250, 0.78) 0, - rgba(96, 165, 250, 0.78) 14px, - rgba(96, 165, 250, 0.08) 14px, - rgba(96, 165, 250, 0.08) 26px - ); - background-size: 28px 2px; - animation: how-it-works-dash-flow 10s linear infinite; - box-shadow: 0 0 18px rgba(59, 130, 246, 0.24); + background-image: linear-gradient(90deg, rgba(79, 124, 255, 0.08), rgba(79, 124, 255, 0.46), rgba(79, 124, 255, 0.08)); + background-size: 96px 2px; + animation: how-it-works-connector-flow 10s linear infinite; + box-shadow: 0 0 12px rgba(79, 124, 255, 0.12); +} + +.workflow-step-marker { + isolation: isolate; + position: relative; + animation: how-it-works-badge-pulse 6s ease-in-out infinite; + transition: transform 300ms ease, box-shadow 300ms ease, opacity 300ms ease; +} + +.workflow-step-marker::before { + content: ''; + position: absolute; + inset: -0.5rem; + border-radius: inherit; + background: radial-gradient(circle, rgba(79, 124, 255, 0.14), transparent 68%); + opacity: 0.9; + z-index: -1; +} + +.workflow-step-marker::after { + content: ''; + position: absolute; + inset: 0.35rem; + border-radius: 0.9rem; + border: 1px solid rgba(255, 255, 255, 0.75); + pointer-events: none; +} + +.workflow-step-marker:hover { + transform: translateY(-2px); +} + +.workflow-step-marker:hover::before { + opacity: 1; +} + +.workflow-step-icon { + transform: translateZ(0); + transition: transform 300ms ease, box-shadow 300ms ease, opacity 300ms ease; +} + +.workflow-step-icon svg { + stroke-width: 2; +} + +.workflow-step-icon:hover { + transform: scale(1.05); +} + +@media (max-width: 767px) { + .how-it-works-grid-overlay { + background-size: 48px 48px; + } + + .how-it-works-ambient-left, + .how-it-works-ambient-right { + opacity: 0.7; + } + + .how-it-works-step-link, + .how-it-works-timeline-line { + opacity: 0.85; + } } .how-it-works-flow-line.light {