Skip to content

Commit d63cb3c

Browse files
davila7davila7
committed
feat: Enhance homepage and styles with terminal theme and new feature cards
1 parent 350b11d commit d63cb3c

File tree

6 files changed

+746
-58
lines changed

6 files changed

+746
-58
lines changed

‎docu/docusaurus.config.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,11 @@ const config: Config = {
7272
themeConfig: {
7373
// Replace with your project's social card
7474
image: 'img/docusaurus-social-card.jpg',
75+
colorMode: {
76+
defaultMode: 'dark',
77+
disableSwitch: true,
78+
respectPrefersColorScheme: false,
79+
},
7580
navbar: {
7681
title: 'Claude Code Templates',
7782
logo: {

‎docu/src/components/HomepageFeatures/index.tsx‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,63 @@ import styles from './styles.module.css';
55

66
type FeatureItem = {
77
title: string;
8-
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
8+
icon: string;
99
description: ReactNode;
10+
command?: string;
1011
};
1112

1213
const FeatureList: FeatureItem[] = [
1314
{
14-
title: 'Easy to Use',
15-
Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
15+
title: 'Quick Setup',
16+
icon: '⚡',
17+
command: 'npm install -g claude-code-templates',
1618
description: (
1719
<>
18-
Docusaurus was designed from the ground up to be easily installed and
19-
used to get your website up and running quickly.
20+
Install the CLI tool globally and get started with Claude Code templates
21+
in seconds. No complex configuration required.
2022
</>
2123
),
2224
},
2325
{
24-
title: 'Focus on What Matters',
25-
Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
26+
title: 'Multi-Framework Support',
27+
icon: '🔧',
2628
description: (
2729
<>
28-
Docusaurus lets you focus on your docs, and we&apos;ll do the chores. Go
29-
ahead and move your docs into the <code>docs</code> directory.
30+
Templates for React, Vue, Angular, Django, FastAPI, Rails, and more.
31+
Each includes optimized <code>CLAUDE.md</code> configurations and best practices.
3032
</>
3133
),
3234
},
3335
{
34-
title: 'Powered by React',
35-
Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
36+
title: 'Real-time Analytics',
37+
icon: '📊',
38+
command: 'claude-code-templates --analytics',
3639
description: (
3740
<>
38-
Extend or customize your website layout by reusing React. Docusaurus can
39-
be extended while reusing the same header and footer.
41+
Monitor your Claude Code usage with our comprehensive analytics dashboard.
42+
Track sessions, token usage, and performance metrics in real-time.
4043
</>
4144
),
4245
},
4346
];
4447

45-
function Feature({title, Svg, description}: FeatureItem) {
48+
function Feature({title, icon, description, command}: FeatureItem) {
4649
return (
4750
<div className={clsx('col col--4')}>
48-
<div className="text--center">
49-
<Svg className={styles.featureSvg} role="img" />
50-
</div>
51-
<div className="text--center padding-horiz--md">
52-
<Heading as="h3">{title}</Heading>
53-
<p>{description}</p>
51+
<div className={styles.featureCard}>
52+
<div className={styles.featureIcon}>
53+
{icon}
54+
</div>
55+
<div className={styles.featureContent}>
56+
<Heading as="h3" className={styles.featureTitle}>{title}</Heading>
57+
<p className={styles.featureDescription}>{description}</p>
58+
{command && (
59+
<div className={styles.terminalCommand}>
60+
<span className={styles.prompt}>$</span>
61+
<code className={styles.command}>{command}</code>
62+
</div>
63+
)}
64+
</div>
5465
</div>
5566
</div>
5667
);

‎docu/src/components/HomepageFeatures/styles.module.css‎

Lines changed: 124 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,131 @@
11
.features {
22
display: flex;
33
align-items: center;
4-
padding: 2rem 0;
4+
padding: 4rem 0;
55
width: 100%;
6+
background: var(--bg-primary);
67
}
78

8-
.featureSvg {
9-
height: 200px;
10-
width: 200px;
9+
.featureCard {
10+
background: var(--bg-secondary);
11+
border: 1px solid var(--border-primary);
12+
border-radius: 8px;
13+
padding: 2rem;
14+
height: 100%;
15+
transition: all 0.3s ease;
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
text-align: center;
20+
}
21+
22+
.featureCard:hover {
23+
border-color: var(--text-accent);
24+
box-shadow: 0 4px 12px var(--shadow-primary);
25+
transform: translateY(-2px);
26+
}
27+
28+
.featureIcon {
29+
font-size: 3rem;
30+
margin-bottom: 1.5rem;
31+
width: 80px;
32+
height: 80px;
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
background: var(--bg-tertiary);
37+
border: 1px solid var(--border-primary);
38+
border-radius: 50%;
39+
}
40+
41+
.featureContent {
42+
flex: 1;
43+
display: flex;
44+
flex-direction: column;
45+
justify-content: space-between;
46+
width: 100%;
47+
}
48+
49+
.featureTitle {
50+
color: var(--text-primary) !important;
51+
font-family: inherit !important;
52+
font-size: 1.25rem !important;
53+
margin-bottom: 1rem !important;
54+
font-weight: 500 !important;
55+
}
56+
57+
.featureDescription {
58+
color: var(--text-secondary) !important;
59+
font-size: 0.9rem !important;
60+
line-height: 1.5 !important;
61+
margin-bottom: 1.5rem !important;
62+
flex: 1;
63+
}
64+
65+
.terminalCommand {
66+
background: var(--bg-tertiary);
67+
border: 1px solid var(--border-secondary);
68+
border-radius: 6px;
69+
padding: 12px;
70+
margin-top: auto;
71+
display: flex;
72+
align-items: center;
73+
gap: 0.5rem;
74+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
75+
}
76+
77+
.prompt {
78+
color: var(--text-success);
79+
font-weight: bold;
80+
flex-shrink: 0;
81+
}
82+
83+
.command {
84+
color: var(--text-primary) !important;
85+
background: none !important;
86+
border: none !important;
87+
padding: 0 !important;
88+
font-family: inherit !important;
89+
font-size: 0.85rem !important;
90+
flex: 1;
91+
text-align: left;
92+
}
93+
94+
@media screen and (max-width: 996px) {
95+
.features {
96+
padding: 2rem 0;
97+
}
98+
99+
.featureCard {
100+
margin-bottom: 2rem;
101+
padding: 1.5rem;
102+
}
103+
104+
.featureIcon {
105+
font-size: 2.5rem;
106+
width: 70px;
107+
height: 70px;
108+
margin-bottom: 1rem;
109+
}
110+
111+
.featureTitle {
112+
font-size: 1.1rem !important;
113+
}
114+
115+
.featureDescription {
116+
font-size: 0.85rem !important;
117+
margin-bottom: 1rem !important;
118+
}
119+
120+
.terminalCommand {
121+
padding: 10px;
122+
flex-direction: column;
123+
align-items: stretch;
124+
gap: 0.25rem;
125+
}
126+
127+
.command {
128+
text-align: center !important;
129+
word-break: break-all;
130+
}
11131
}

0 commit comments

Comments
 (0)