Skip to content

Commit b705108

Browse files
mhnpdmhnpd
committed
feat: enhance homepage with spinner showcase, installation instructions, and improved styling
1 parent 6c57813 commit b705108

5 files changed

Lines changed: 742 additions & 40 deletions

File tree

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

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,39 +5,46 @@ import styles from './styles.module.css'
55
type FeatureItem = {
66
title: string
77
Svg: React.ComponentType<React.ComponentProps<'svg'>>
8-
description?: string
8+
description: string
9+
highlight?: string
910
}
1011

1112
const FeatureList: FeatureItem[] = [
1213
{
13-
title: 'TypeScript Compatibility',
14+
title: 'TypeScript Ready',
1415
Svg: require('@site/static/img/typescript-support.svg').default,
1516
description:
16-
'Our library is meticulously crafted in TypeScript, ensuring seamless compatibility with all contemporary web browsers."',
17+
'Built with TypeScript from the ground up. Get full type safety and IntelliSense support in your IDE.',
18+
highlight: 'Full Type Safety'
1719
},
1820
{
1921
title: 'Highly Customizable',
2022
Svg: require('@site/static/img/customizable.svg').default,
2123
description:
22-
'ou can effortlessly personalize the loader by supplying custom properties to the loader component',
24+
'Every spinner is fully customizable with props for colors, sizes, animation speed, and styling.',
25+
highlight: 'Endless Possibilities'
2326
},
2427
{
25-
title: 'Light Weight',
28+
title: 'Zero Dependencies',
2629
Svg: require('@site/static/img/light-weight.svg').default,
2730
description:
28-
'This library is featherweight, devoid of any additional dependencies.',
31+
'Lightweight library with no external dependencies. Tree-shakable imports for optimal bundle size.',
32+
highlight: 'Bundle Optimized'
2933
},
3034
]
3135

32-
function Feature({ title, Svg, description }: FeatureItem) {
36+
function Feature({ title, Svg, description, highlight }: FeatureItem) {
3337
return (
3438
<div className={clsx('col col--4')}>
35-
<div className="text--center">
36-
<Svg className={styles.featureSvg} role="img" />
37-
</div>
38-
<div className="text--center padding-horiz--md">
39-
<h3>{title}</h3>
40-
<p>{description}</p>
39+
<div className={styles.featureCard}>
40+
<div className={styles.featureIcon}>
41+
<Svg className={styles.featureSvg} role="img" />
42+
</div>
43+
<div className={styles.featureContent}>
44+
<h3 className={styles.featureTitle}>{title}</h3>
45+
{highlight && <span className={styles.featureHighlight}>{highlight}</span>}
46+
<p className={styles.featureDescription}>{description}</p>
47+
</div>
4148
</div>
4249
</div>
4350
)
@@ -47,6 +54,10 @@ export default function HomepageFeatures() {
4754
return (
4855
<section className={styles.features}>
4956
<div className="container">
57+
<div className={styles.featuresHeader}>
58+
<h2>Why Choose React Loader Spinner?</h2>
59+
<p>Built for modern React applications with developer experience in mind</p>
60+
</div>
5061
<div className="row">
5162
{FeatureList.map((props, idx) => (
5263
<Feature key={idx} {...props} />

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

Lines changed: 112 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,122 @@
11
.features {
2+
padding: 5rem 0;
3+
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
4+
}
5+
6+
.featuresHeader {
7+
text-align: center;
8+
margin-bottom: 4rem;
9+
}
10+
11+
.featuresHeader h2 {
12+
font-size: 2.5rem;
13+
color: #2e8555;
14+
margin-bottom: 1rem;
15+
font-weight: 700;
16+
}
17+
18+
.featuresHeader p {
19+
font-size: 1.2rem;
20+
color: #666;
21+
max-width: 600px;
22+
margin: 0 auto;
23+
}
24+
25+
.featureCard {
26+
background: white;
27+
border-radius: 16px;
28+
padding: 3rem 2rem;
29+
height: 100%;
30+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
31+
transition: transform 0.3s ease, box-shadow 0.3s ease;
32+
border: 1px solid rgba(255, 255, 255, 0.2);
33+
position: relative;
34+
overflow: hidden;
35+
}
36+
37+
.featureCard::before {
38+
content: '';
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
right: 0;
43+
height: 4px;
44+
background: linear-gradient(90deg, #2e8555, #4fa94d);
45+
}
46+
47+
.featureCard:hover {
48+
transform: translateY(-8px);
49+
box-shadow: 0 12px 40px rgba(46, 133, 85, 0.15);
50+
}
51+
52+
.featureIcon {
253
display: flex;
3-
align-items: center;
4-
padding: 2rem 0;
5-
width: 100%;
54+
justify-content: center;
55+
margin-bottom: 2rem;
656
}
757

858
.featureSvg {
9-
height: 200px;
10-
width: 200px;
59+
height: 120px;
60+
width: 120px;
61+
filter: drop-shadow(0 4px 8px rgba(46, 133, 85, 0.2));
62+
transition: transform 0.3s ease;
63+
}
64+
65+
.featureCard:hover .featureSvg {
66+
transform: scale(1.1);
67+
}
68+
69+
.featureContent {
70+
text-align: center;
71+
}
72+
73+
.featureTitle {
74+
font-size: 1.5rem;
75+
font-weight: 700;
76+
color: #2e8555;
77+
margin-bottom: 0.5rem;
78+
}
79+
80+
.featureHighlight {
81+
display: inline-block;
82+
background: linear-gradient(135deg, #4fa94d, #2e8555);
83+
color: white;
84+
padding: 0.25rem 0.75rem;
85+
border-radius: 20px;
86+
font-size: 0.8rem;
87+
font-weight: 600;
88+
margin-bottom: 1rem;
89+
text-transform: uppercase;
90+
letter-spacing: 0.5px;
91+
}
92+
93+
.featureDescription {
94+
color: #666;
95+
line-height: 1.6;
96+
font-size: 1rem;
97+
margin: 0;
1198
}
1299

13100
.table {
14101
width: 100%;
15102
}
103+
104+
@media screen and (max-width: 996px) {
105+
.features {
106+
padding: 3rem 0;
107+
}
108+
109+
.featuresHeader h2 {
110+
font-size: 2rem;
111+
}
112+
113+
.featureCard {
114+
padding: 2rem 1.5rem;
115+
margin-bottom: 2rem;
116+
}
117+
118+
.featureSvg {
119+
height: 100px;
120+
width: 100px;
121+
}
122+
}

‎docs/src/css/custom.css‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
--ifm-color-primary-lightest: #3cad6e;
1616
--ifm-code-font-size: 95%;
1717
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
18+
--ifm-font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
19+
--ifm-heading-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
1820
}
1921

2022
/* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -28,3 +30,98 @@
2830
--ifm-color-primary-lightest: #4fddbf;
2931
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
3032
}
33+
34+
/* Import Inter font for better typography */
35+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
36+
37+
/* Global improvements */
38+
html {
39+
scroll-behavior: smooth;
40+
}
41+
42+
/* Enhanced button styles */
43+
.button {
44+
font-weight: 600;
45+
border-radius: 8px;
46+
transition: all 0.3s ease;
47+
letter-spacing: 0.5px;
48+
}
49+
50+
.button--primary {
51+
background: linear-gradient(135deg, #2e8555 0%, #4fa94d 100%);
52+
border: none;
53+
box-shadow: 0 4px 15px rgba(46, 133, 85, 0.3);
54+
}
55+
56+
.button--primary:hover {
57+
background: linear-gradient(135deg, #277148 0%, #359962 100%);
58+
box-shadow: 0 6px 20px rgba(46, 133, 85, 0.4);
59+
transform: translateY(-2px);
60+
}
61+
62+
.button--secondary {
63+
background: rgba(255, 255, 255, 0.1);
64+
border: 2px solid rgba(255, 255, 255, 0.3);
65+
color: white;
66+
backdrop-filter: blur(10px);
67+
}
68+
69+
.button--secondary:hover {
70+
background: rgba(255, 255, 255, 0.2);
71+
border-color: rgba(255, 255, 255, 0.5);
72+
color: white;
73+
transform: translateY(-2px);
74+
}
75+
76+
.button--outline {
77+
border: 2px solid var(--ifm-color-primary);
78+
background: transparent;
79+
}
80+
81+
.button--outline:hover {
82+
background: var(--ifm-color-primary);
83+
transform: translateY(-2px);
84+
box-shadow: 0 4px 15px rgba(46, 133, 85, 0.3);
85+
}
86+
87+
/* Improved navbar */
88+
.navbar {
89+
backdrop-filter: blur(10px);
90+
background: rgba(255, 255, 255, 0.95);
91+
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
92+
}
93+
94+
.navbar__brand {
95+
font-weight: 700;
96+
font-size: 1.2rem;
97+
}
98+
99+
/* Enhanced code blocks */
100+
.prism-code {
101+
border-radius: 12px;
102+
}
103+
104+
/* Smooth animations */
105+
* {
106+
transition: color 0.3s ease, background-color 0.3s ease;
107+
}
108+
109+
/* Enhanced footer */
110+
.footer {
111+
background: linear-gradient(135deg, #2e8555 0%, #1a8870 100%);
112+
}
113+
114+
/* Dark theme adjustments */
115+
[data-theme='dark'] .navbar {
116+
background: rgba(24, 25, 26, 0.95);
117+
}
118+
119+
[data-theme='dark'] .button--secondary {
120+
background: rgba(255, 255, 255, 0.05);
121+
border-color: rgba(255, 255, 255, 0.2);
122+
}
123+
124+
[data-theme='dark'] .button--secondary:hover {
125+
background: rgba(255, 255, 255, 0.1);
126+
border-color: rgba(255, 255, 255, 0.3);
127+
}

0 commit comments

Comments
 (0)