From 96616a54922631d4fd70865eb06b1e17ef90d405 Mon Sep 17 00:00:00 2001 From: Lalitya31 Date: Fri, 22 May 2026 18:27:43 +0530 Subject: [PATCH 1/3] introudce terminal like section for features section --- index.html | 3 + src/components/Features.tsx | 151 ++++++++++++++++++++++++++++++++---- src/index.css | 34 ++++++++ 3 files changed, 173 insertions(+), 15 deletions(-) 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..992405cb 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,62 @@ const Features = () => { ]; return ( -
-
-
-

Powerful Features

-

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

+
+
+
+ +

+ 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; From aa7d89a5f6abbd6c5f32882670c3d3b8257fa35f Mon Sep 17 00:00:00 2001 From: Lalitya31 Date: Fri, 22 May 2026 18:32:24 +0530 Subject: [PATCH 2/3] Make headline black and background light for visibility. --- src/components/Features.tsx | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/src/components/Features.tsx b/src/components/Features.tsx index 992405cb..646826a0 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -148,17 +148,22 @@ const Features = () => { return (
-
+
+
+
- +

+ > initialize tracking capabilities +

+

+ Powerful Features +

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

From bd99a6116a0dfce8aaca915d106c24939ae2b397 Mon Sep 17 00:00:00 2001 From: Lalitya31 Date: Fri, 22 May 2026 19:58:03 +0530 Subject: [PATCH 3/3] fix valid feature.tsx for react import --- src/components/Features.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Features.tsx b/src/components/Features.tsx index 646826a0..d8a52028 100644 --- a/src/components/Features.tsx +++ b/src/components/Features.tsx @@ -1,5 +1,5 @@ import { BarChart3, Users, Search, Zap, Shield, Globe } from 'lucide-react'; -import type { ReactNode } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; type TerminalHeadingProps = { title: string; @@ -37,7 +37,7 @@ const TerminalHeading = ({ return (