Skip to content

Commit 3ebab02

Browse files
antosubashantosubash
committed
chore(docs): enhance homepage and feature presentation
- Updated the homepage layout to include a more engaging hero section with improved styling and content. - Enhanced the feature list with new items highlighting Next.js 14 readiness, TypeScript support, and responsive design. - Added links and descriptions for each feature to improve user navigation and understanding. - Refined CSS styles for better visual appeal and responsiveness across devices. - Updated Docusaurus configuration to reflect the new tagline and improved content structure.
1 parent bb814c9 commit 3ebab02

11 files changed

Lines changed: 980 additions & 47 deletions

File tree

‎docs/docusaurus.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ const darkCodeTheme = themes.dracula;
88
/** @type {import('@docusaurus/types').Config} */
99
const config = {
1010
title: 'ABP React',
11-
tagline: 'Modern React frontend for ABP Framework',
11+
tagline: 'Modern React frontend for ABP Framework - Build powerful web applications with Next.js, TypeScript, and Tailwind CSS',
1212
favicon: 'img/favicon.ico',
1313

1414
// Set the production url of your site here

‎docs/src/components/HomepageCTA/index.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react';
2+
import Link from '@docusaurus/Link';
3+
import styles from './styles.module.css';
4+
5+
export default function HomepageCTA(): React.ReactElement {
6+
return (
7+
<section className={styles.cta}>
8+
<div className="container">
9+
<div className={styles.ctaContent}>
10+
<div className={styles.ctaText}>
11+
<h2 className={styles.ctaTitle}>Ready to Get Started?</h2>
12+
<p className={styles.ctaDescription}>
13+
Start building modern web applications with ABP React today.
14+
Get up and running quickly with our comprehensive documentation and examples.
15+
</p>
16+
<div className={styles.ctaButtons}>
17+
<Link
18+
className="button button--primary button--lg"
19+
to="/docs/intro">
20+
📚 Read Documentation
21+
</Link>
22+
<Link
23+
className="button button--outline button--lg"
24+
to="https://github.com/antosubash/abp-react">
25+
⭐ Star on GitHub
26+
</Link>
27+
</div>
28+
<div className={styles.ctaFeatures}>
29+
<div className={styles.ctaFeature}>
30+
<span className={styles.ctaFeatureIcon}>🚀</span>
31+
<span>Quick Setup</span>
32+
</div>
33+
<div className={styles.ctaFeature}>
34+
<span className={styles.ctaFeatureIcon}>📖</span>
35+
<span>Comprehensive Docs</span>
36+
</div>
37+
<div className={styles.ctaFeature}>
38+
<span className={styles.ctaFeatureIcon}>💬</span>
39+
<span>Community Support</span>
40+
</div>
41+
</div>
42+
</div>
43+
<div className={styles.ctaImage}>
44+
<div className={styles.codeBlock}>
45+
<div className={styles.codeHeader}>
46+
<span className={styles.codeDot}></span>
47+
<span className={styles.codeDot}></span>
48+
<span className={styles.codeDot}></span>
49+
<span className={styles.codeTitle}>terminal</span>
50+
</div>
51+
<div className={styles.codeContent}>
52+
<span className={styles.codeLine}>
53+
<span className={styles.codePrompt}>$</span> git clone https://github.com/antosubash/abp-react.git
54+
</span>
55+
<span className={styles.codeLine}>
56+
<span className={styles.codePrompt}>$</span> cd abp-react
57+
</span>
58+
<span className={styles.codeLine}>
59+
<span className={styles.codePrompt}>$</span> pnpm install
60+
</span>
61+
<span className={styles.codeLine}>
62+
<span className={styles.codePrompt}>$</span> pnpm dev
63+
</span>
64+
<span className={styles.codeComment}># 🎉 Your app is running!</span>
65+
</div>
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</section>
71+
);
72+
}

‎docs/src/components/HomepageCTA/styles.module.css‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
.cta {
2+
padding: 4rem 0;
3+
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
4+
}
5+
6+
.ctaContent {
7+
display: grid;
8+
grid-template-columns: 1fr 1fr;
9+
gap: 4rem;
10+
align-items: center;
11+
max-width: 1200px;
12+
margin: 0 auto;
13+
}
14+
15+
.ctaTitle {
16+
font-size: 2.5rem;
17+
font-weight: 700;
18+
margin-bottom: 1.5rem;
19+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
20+
-webkit-background-clip: text;
21+
-webkit-text-fill-color: transparent;
22+
background-clip: text;
23+
}
24+
25+
.ctaDescription {
26+
font-size: 1.25rem;
27+
color: #64748b;
28+
line-height: 1.6;
29+
margin-bottom: 2rem;
30+
}
31+
32+
.ctaButtons {
33+
display: flex;
34+
gap: 1rem;
35+
margin-bottom: 2rem;
36+
flex-wrap: wrap;
37+
}
38+
39+
.ctaFeatures {
40+
display: flex;
41+
gap: 2rem;
42+
flex-wrap: wrap;
43+
}
44+
45+
.ctaFeature {
46+
display: flex;
47+
align-items: center;
48+
gap: 0.5rem;
49+
font-size: 0.875rem;
50+
color: #64748b;
51+
font-weight: 500;
52+
}
53+
54+
.ctaFeatureIcon {
55+
font-size: 1.25rem;
56+
}
57+
58+
.ctaImage {
59+
display: flex;
60+
justify-content: center;
61+
align-items: center;
62+
}
63+
64+
.codeBlock {
65+
background: #1e293b;
66+
border-radius: 12px;
67+
overflow: hidden;
68+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
69+
width: 100%;
70+
max-width: 500px;
71+
}
72+
73+
.codeHeader {
74+
background: #334155;
75+
padding: 0.75rem 1rem;
76+
display: flex;
77+
align-items: center;
78+
gap: 0.5rem;
79+
}
80+
81+
.codeDot {
82+
width: 12px;
83+
height: 12px;
84+
border-radius: 50%;
85+
background: #ef4444;
86+
}
87+
88+
.codeDot:nth-child(2) {
89+
background: #f59e0b;
90+
}
91+
92+
.codeDot:nth-child(3) {
93+
background: #10b981;
94+
}
95+
96+
.codeTitle {
97+
color: #94a3b8;
98+
font-size: 0.875rem;
99+
font-weight: 500;
100+
margin-left: 0.5rem;
101+
}
102+
103+
.codeContent {
104+
padding: 1.5rem;
105+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
106+
font-size: 0.875rem;
107+
line-height: 1.6;
108+
}
109+
110+
.codeLine {
111+
display: block;
112+
margin-bottom: 0.5rem;
113+
color: #e2e8f0;
114+
}
115+
116+
.codeLine:last-child {
117+
margin-bottom: 0;
118+
}
119+
120+
.codePrompt {
121+
color: #10b981;
122+
margin-right: 0.5rem;
123+
}
124+
125+
.codeComment {
126+
color: #64748b;
127+
font-style: italic;
128+
}
129+
130+
@media screen and (max-width: 996px) {
131+
.cta {
132+
padding: 2rem 0;
133+
}
134+
135+
.ctaContent {
136+
grid-template-columns: 1fr;
137+
gap: 2rem;
138+
}
139+
140+
.ctaTitle {
141+
font-size: 2rem;
142+
}
143+
144+
.ctaDescription {
145+
font-size: 1.1rem;
146+
}
147+
148+
.ctaButtons {
149+
justify-content: center;
150+
}
151+
152+
.ctaFeatures {
153+
justify-content: center;
154+
}
155+
156+
.ctaImage {
157+
order: -1;
158+
}
159+
}
160+
161+
@media screen and (max-width: 768px) {
162+
.ctaButtons {
163+
flex-direction: column;
164+
align-items: center;
165+
}
166+
167+
.ctaButtons .button {
168+
width: 100%;
169+
max-width: 300px;
170+
}
171+
172+
.ctaFeatures {
173+
flex-direction: column;
174+
align-items: center;
175+
gap: 1rem;
176+
}
177+
178+
.codeBlock {
179+
max-width: 100%;
180+
}
181+
}

0 commit comments

Comments
 (0)