+
+ );
+ }
+
+ if (!stats) {
+ return null;
+ }
+
+ return (
+
+ ...
+ Stars
+
+
+
+ );
+}
diff --git a/src/components/GitHubStats/styles.module.css b/src/components/GitHubStats/styles.module.css
new file mode 100644
index 0000000..7415797
--- /dev/null
+++ b/src/components/GitHubStats/styles.module.css
@@ -0,0 +1,46 @@
+.statsContainer {
+ display: flex;
+ gap: 2rem;
+ justify-content: center;
+ align-items: center;
+ margin: 1.5rem 0;
+ flex-wrap: wrap;
+}
+
+.statItem {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 0.25rem;
+}
+
+.statValue {
+ font-size: 1.75rem;
+ font-weight: bold;
+ color: var(--ifm-color-primary);
+}
+
+[data-theme='dark'] .statValue {
+ color: var(--ifm-color-primary-lighter);
+}
+
+.statLabel {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-600);
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+}
+
+@media screen and (max-width: 768px) {
+ .statsContainer {
+ gap: 1rem;
+ }
+
+ .statValue {
+ font-size: 1.5rem;
+ }
+
+ .statLabel {
+ font-size: 0.75rem;
+ }
+}
diff --git a/src/components/HeroCodePreview/index.tsx b/src/components/HeroCodePreview/index.tsx
new file mode 100644
index 0000000..b847660
--- /dev/null
+++ b/src/components/HeroCodePreview/index.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import styles from './styles.module.css';
+
+const sampleCode = `# psakeFile.ps1
+Task Default -Depends Test, Build
+
+Task Build -Depends Clean {
+ Write-Host "Building project..." -ForegroundColor Green
+ dotnet build -c Release
+}
+
+Task Test {
+ Write-Host "Running tests..." -ForegroundColor Cyan
+ dotnet test --no-build
+}
+
+Task Clean {
+ Write-Host "Cleaning output..." -ForegroundColor Yellow
+ Remove-Item ./bin -Recurse -Force -ErrorAction Ignore
+}
+
+Task Deploy -Depends Build {
+ Write-Host "Deploying to production..." -ForegroundColor Magenta
+ # Your deployment logic here
+}`;
+
+export default function HeroCodePreview(): JSX.Element {
+ return (
+
+ {stats.stars.toLocaleString()}
+ ⭐ Stars
+
+
+ {stats.forks.toLocaleString()}
+ 🍴 Forks
+
+
+ {stats.watchers.toLocaleString()}
+ 👁️ Watchers
+
+
+
+ );
+}
diff --git a/src/components/HeroCodePreview/styles.module.css b/src/components/HeroCodePreview/styles.module.css
new file mode 100644
index 0000000..cfc88d1
--- /dev/null
+++ b/src/components/HeroCodePreview/styles.module.css
@@ -0,0 +1,96 @@
+.codePreview {
+ background: var(--ifm-background-surface-color);
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+ border: 1px solid var(--ifm-color-emphasis-200);
+ max-width: 600px;
+ animation: fadeInUp 0.6s ease-out;
+}
+
+[data-theme='dark'] .codePreview {
+ background: #1e1e1e;
+ border-color: var(--ifm-color-emphasis-300);
+ box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
+}
+
+.terminalHeader {
+ display: flex;
+ align-items: center;
+ padding: 0.75rem 1rem;
+ background: var(--ifm-color-emphasis-100);
+ border-bottom: 1px solid var(--ifm-color-emphasis-200);
+ gap: 1rem;
+}
+
+[data-theme='dark'] .terminalHeader {
+ background: #2d2d2d;
+ border-bottom-color: var(--ifm-color-emphasis-300);
+}
+
+.terminalButtons {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.terminalButton {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ background: var(--ifm-color-emphasis-400);
+}
+
+.terminalButton:nth-child(1) {
+ background: #ff5f56;
+}
+
+.terminalButton:nth-child(2) {
+ background: #ffbd2e;
+}
+
+.terminalButton:nth-child(3) {
+ background: #27c93f;
+}
+
+.terminalTitle {
+ font-size: 0.875rem;
+ color: var(--ifm-color-emphasis-700);
+ font-family: var(--ifm-font-family-monospace);
+ flex: 1;
+ text-align: center;
+ margin-right: 4rem;
+}
+
+.codeWrapper {
+ padding: 0;
+ max-height: 400px;
+ overflow-y: auto;
+}
+
+.codeWrapper pre {
+ margin: 0 !important;
+ padding: 1.5rem !important;
+ background: transparent !important;
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@media screen and (max-width: 996px) {
+ .codePreview {
+ max-width: 100%;
+ margin: 2rem 0;
+ }
+
+ .codeWrapper {
+ max-height: 300px;
+ }
+}
diff --git a/src/components/QuickStartSteps/index.tsx b/src/components/QuickStartSteps/index.tsx
new file mode 100644
index 0000000..cdbf81c
--- /dev/null
+++ b/src/components/QuickStartSteps/index.tsx
@@ -0,0 +1,120 @@
+import React, { useState } from 'react';
+import CodeBlock from '@theme/CodeBlock';
+import Heading from '@theme/Heading';
+import styles from './styles.module.css';
+
+interface Step {
+ number: number;
+ title: string;
+ description: string;
+ code: string;
+ language?: string;
+}
+
+const steps: Step[] = [
+ {
+ number: 1,
+ title: 'Install psake',
+ description: 'Install psake from the PowerShell Gallery',
+ code: 'Install-Module -Name psake -Scope CurrentUser',
+ language: 'powershell'
+ },
+ {
+ number: 2,
+ title: 'Create psakeFile.ps1',
+ description: 'Define your build tasks in a psakeFile.ps1',
+ code: `Task Default -Depends Build
+
+Task Build {
+ Write-Host "Building project..." -ForegroundColor Green
+ # Your build logic here
+}`,
+ language: 'powershell'
+ },
+ {
+ number: 3,
+ title: 'Run Your Build',
+ description: 'Execute psake to run your tasks',
+ code: 'Invoke-psake',
+ language: 'powershell'
+ }
+];
+
+export default function QuickStartSteps(): JSX.Element {
+ const [copiedIndex, setCopiedIndex] = useState
+
+
+
+
+
+
+ psakeFile.ps1
+
+
+ {sampleCode}
+
+
+
+
+
+ Get Started in 3 Steps
+
+
+ + Start automating your builds in minutes +
+
+ {steps.map((step, index) => (
+
+
+
+
+
+ ))}
+ {step.number}
+
+
+ {step.title}
+
+
+ {index < steps.length - 1 && (
+ {step.description}
+
+
+
+ {step.code}
+
+
+
+
+
+ )}
+
-
- {siteConfig.title}
-
-
-
);
{siteConfig.tagline}
-
-
- psake Tutorial - 5min ⏱️
-
+
@@ -36,7 +69,9 @@ export default function Home(): JSX.Element {
description="A build automation tool written in PowerShell">
+ 
+ 
+