Skip to content

Commit 2f9e77d

Browse files
claudeclaude
committed
Redesign landing page with modern, visually engaging layout
This comprehensive redesign transforms the landing page from a basic layout to a modern, feature-rich experience: New Components: - GitHubStats: Displays real-time repository statistics - HeroCodePreview: Animated code snippet showcase in hero section - CodeShowcase: Tabbed interface showing real-world psake examples - QuickStartSteps: Interactive 3-step getting started guide - FeatureGrid: Enhanced feature cards with code examples Hero Section Updates: - Split layout with content on left and code preview on right - Multiple CTAs (Get Started, View on GitHub) - GitHub stats and PowerShell Gallery badges - Gradient background with subtle animation - Responsive design for all screen sizes Visual Enhancements: - Smooth animations and transitions - Dark mode optimization - Terminal-style code previews - Improved button styles with hover effects - Better scrollbar styling - Accessibility improvements (reduced motion support) The new design draws inspiration from modern developer tool sites, showcasing psake in action with real code examples while maintaining excellent usability and performance.
1 parent 5a361f8 commit 2f9e77d

File tree

13 files changed

+1439
-20
lines changed

13 files changed

+1439
-20
lines changed

‎src/components/CodeShowcase/index.tsx‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
import React, { useState } from 'react';
2+
import CodeBlock from '@theme/CodeBlock';
3+
import Heading from '@theme/Heading';
4+
import styles from './styles.module.css';
5+
6+
interface CodeExample {
7+
title: string;
8+
description: string;
9+
code: string;
10+
output?: string;
11+
}
12+
13+
const examples: CodeExample[] = [
14+
{
15+
title: 'Simple Build',
16+
description: 'A basic build workflow with dependencies',
17+
code: `# Simple psakeFile.ps1
18+
Task Default -Depends Build
19+
20+
Task Build -Depends Clean, Compile {
21+
Write-Host "Build completed!" -ForegroundColor Green
22+
}
23+
24+
Task Clean {
25+
Remove-Item ./bin -Recurse -Force -ErrorAction Ignore
26+
}
27+
28+
Task Compile {
29+
dotnet build -c Release
30+
}`,
31+
output: `psake version 4.9.0
32+
Copyright (c) 2010-2024 James Kovacs & Contributors
33+
34+
Executing Clean
35+
Executing Compile
36+
Executing Build
37+
Build completed!
38+
39+
Build Succeeded!`
40+
},
41+
{
42+
title: 'CI/CD Pipeline',
43+
description: 'Automated testing and deployment pipeline',
44+
code: `# CI/CD psakeFile.ps1
45+
Task Default -Depends Test
46+
47+
Task CI -Depends Clean, Build, Test, Deploy
48+
49+
Task Build {
50+
dotnet build -c Release
51+
}
52+
53+
Task Test -Depends Build {
54+
dotnet test --no-build --logger "trx"
55+
}
56+
57+
Task Deploy -Depends Test -RequiredVariables Environment {
58+
Write-Host "Deploying to $Environment" -ForegroundColor Cyan
59+
# Deployment logic
60+
}
61+
62+
Task Clean {
63+
Remove-Item ./bin, ./TestResults -Recurse -Force -ErrorAction Ignore
64+
}`,
65+
output: `Executing CI
66+
Executing Clean
67+
Executing Build
68+
Executing Test
69+
Test run for MyProject.Tests.dll (.NETCoreApp,Version=v8.0)
70+
Passed! - Tests: 42 (42 passed, 0 failed, 0 skipped)
71+
Executing Deploy
72+
Deploying to Production
73+
74+
Build Succeeded!`
75+
},
76+
{
77+
title: 'Multi-Environment',
78+
description: 'Deploy to different environments with configurations',
79+
code: `# Environment-aware psakeFile.ps1
80+
Properties {
81+
$Environment = "Dev"
82+
$Version = "1.0.0"
83+
}
84+
85+
Task Default -Depends Deploy
86+
87+
Task Deploy -Depends Build {
88+
switch ($Environment) {
89+
"Dev" {
90+
Write-Host "Deploying to Dev..." -ForegroundColor Yellow
91+
Invoke-Expression "./scripts/deploy-dev.ps1"
92+
}
93+
"Staging" {
94+
Write-Host "Deploying to Staging..." -ForegroundColor Cyan
95+
Invoke-Expression "./scripts/deploy-staging.ps1"
96+
}
97+
"Production" {
98+
Write-Host "Deploying to Production..." -ForegroundColor Magenta
99+
Invoke-Expression "./scripts/deploy-prod.ps1"
100+
}
101+
}
102+
}
103+
104+
Task Build {
105+
dotnet publish -c Release -p:Version=$Version
106+
}`,
107+
output: `Properties:
108+
Environment = Dev
109+
Version = 1.0.0
110+
111+
Executing Deploy
112+
Executing Build
113+
Deploying to Dev...
114+
115+
Build Succeeded!`
116+
}
117+
];
118+
119+
export default function CodeShowcase(): JSX.Element {
120+
const [activeTab, setActiveTab] = useState(0);
121+
const activeExample = examples[activeTab];
122+
123+
return (
124+
<section className={styles.showcaseSection}>
125+
<div className="container">
126+
<div className={styles.showcaseHeader}>
127+
<Heading as="h2">See psake in Action</Heading>
128+
<p className={styles.showcaseSubtitle}>
129+
Real-world examples showing how psake simplifies build automation
130+
</p>
131+
</div>
132+
133+
<div className={styles.tabContainer}>
134+
<div className={styles.tabs}>
135+
{examples.map((example, index) => (
136+
<button
137+
key={index}
138+
className={`${styles.tab} ${activeTab === index ? styles.tabActive : ''}`}
139+
onClick={() => setActiveTab(index)}
140+
>
141+
{example.title}
142+
</button>
143+
))}
144+
</div>
145+
146+
<div className={styles.tabContent}>
147+
<p className={styles.exampleDescription}>{activeExample.description}</p>
148+
149+
<div className={styles.codeOutputGrid}>
150+
<div className={styles.codeBlock}>
151+
<div className={styles.codeBlockHeader}>
152+
<span>psakeFile.ps1</span>
153+
</div>
154+
<CodeBlock language="powershell" showLineNumbers>
155+
{activeExample.code}
156+
</CodeBlock>
157+
</div>
158+
159+
{activeExample.output && (
160+
<div className={styles.outputBlock}>
161+
<div className={styles.codeBlockHeader}>
162+
<span>Terminal Output</span>
163+
</div>
164+
<CodeBlock language="bash">
165+
{activeExample.output}
166+
</CodeBlock>
167+
</div>
168+
)}
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
</section>
174+
);
175+
}

‎src/components/CodeShowcase/styles.module.css‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
.showcaseSection {
2+
padding: 4rem 0;
3+
background: var(--ifm-background-surface-color);
4+
}
5+
6+
[data-theme='dark'] .showcaseSection {
7+
background: var(--ifm-background-color);
8+
}
9+
10+
.showcaseHeader {
11+
text-align: center;
12+
margin-bottom: 3rem;
13+
}
14+
15+
.showcaseHeader h2 {
16+
font-size: 2.5rem;
17+
margin-bottom: 1rem;
18+
}
19+
20+
.showcaseSubtitle {
21+
font-size: 1.25rem;
22+
color: var(--ifm-color-emphasis-700);
23+
max-width: 600px;
24+
margin: 0 auto;
25+
}
26+
27+
.tabContainer {
28+
max-width: 1200px;
29+
margin: 0 auto;
30+
}
31+
32+
.tabs {
33+
display: flex;
34+
gap: 0.5rem;
35+
margin-bottom: 2rem;
36+
border-bottom: 2px solid var(--ifm-color-emphasis-200);
37+
overflow-x: auto;
38+
flex-wrap: wrap;
39+
}
40+
41+
.tab {
42+
background: transparent;
43+
border: none;
44+
padding: 1rem 1.5rem;
45+
font-size: 1rem;
46+
font-weight: 500;
47+
color: var(--ifm-color-emphasis-600);
48+
cursor: pointer;
49+
border-bottom: 3px solid transparent;
50+
transition: all 0.2s ease;
51+
white-space: nowrap;
52+
}
53+
54+
.tab:hover {
55+
color: var(--ifm-color-primary);
56+
background: var(--ifm-color-emphasis-100);
57+
}
58+
59+
.tabActive {
60+
color: var(--ifm-color-primary) !important;
61+
border-bottom-color: var(--ifm-color-primary) !important;
62+
font-weight: 600;
63+
}
64+
65+
[data-theme='dark'] .tab:hover {
66+
background: var(--ifm-color-emphasis-200);
67+
}
68+
69+
.tabContent {
70+
animation: fadeIn 0.3s ease;
71+
}
72+
73+
.exampleDescription {
74+
font-size: 1.125rem;
75+
color: var(--ifm-color-emphasis-700);
76+
margin-bottom: 1.5rem;
77+
text-align: center;
78+
}
79+
80+
.codeOutputGrid {
81+
display: grid;
82+
grid-template-columns: 1fr 1fr;
83+
gap: 1.5rem;
84+
}
85+
86+
@media screen and (max-width: 996px) {
87+
.codeOutputGrid {
88+
grid-template-columns: 1fr;
89+
}
90+
}
91+
92+
.codeBlock,
93+
.outputBlock {
94+
background: var(--ifm-background-color);
95+
border-radius: 8px;
96+
overflow: hidden;
97+
border: 1px solid var(--ifm-color-emphasis-200);
98+
}
99+
100+
[data-theme='dark'] .codeBlock,
101+
[data-theme='dark'] .outputBlock {
102+
background: #1e1e1e;
103+
border-color: var(--ifm-color-emphasis-300);
104+
}
105+
106+
.codeBlockHeader {
107+
background: var(--ifm-color-emphasis-100);
108+
padding: 0.75rem 1rem;
109+
font-family: var(--ifm-font-family-monospace);
110+
font-size: 0.875rem;
111+
color: var(--ifm-color-emphasis-800);
112+
border-bottom: 1px solid var(--ifm-color-emphasis-200);
113+
font-weight: 500;
114+
}
115+
116+
[data-theme='dark'] .codeBlockHeader {
117+
background: #2d2d2d;
118+
color: var(--ifm-color-emphasis-600);
119+
border-bottom-color: var(--ifm-color-emphasis-300);
120+
}
121+
122+
.codeBlock pre,
123+
.outputBlock pre {
124+
margin: 0 !important;
125+
border-radius: 0 !important;
126+
}
127+
128+
@keyframes fadeIn {
129+
from {
130+
opacity: 0;
131+
transform: translateY(10px);
132+
}
133+
to {
134+
opacity: 1;
135+
transform: translateY(0);
136+
}
137+
}
138+
139+
@media screen and (max-width: 768px) {
140+
.showcaseHeader h2 {
141+
font-size: 2rem;
142+
}
143+
144+
.showcaseSubtitle {
145+
font-size: 1rem;
146+
}
147+
148+
.tabs {
149+
gap: 0.25rem;
150+
}
151+
152+
.tab {
153+
padding: 0.75rem 1rem;
154+
font-size: 0.875rem;
155+
}
156+
}

0 commit comments

Comments
 (0)