Skip to content

Commit e5aff16

Browse files
madjinmadjin
authoredNov 13, 2024
Merge pull request #280 from mrpspring/docs-rework
docs homepage rework
2 parents 29c64cc + 1b469b7 commit e5aff16

File tree

7 files changed

+299
-52
lines changed

7 files changed

+299
-52
lines changed
 

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

+38-25
Original file line numberDiff line numberDiff line change
@@ -4,48 +4,59 @@ import styles from "./styles.module.css";
44

55
const FeatureList = [
66
{
7-
title: "🤖 Multi-Agent Framework",
7+
icon: "🤖",
8+
title: "Multi-Agent Framework",
89
description: (
910
<>
10-
Build and deploy autonomous AI agents with consistent personalities across Discord,
11-
Twitter, and Telegram. Full support for voice, text, and media interactions.
11+
Build and deploy <strong>autonomous AI agents</strong> with consistent
12+
personalities across Discord, Twitter, and Telegram. Full support for
13+
voice, text, and media interactions.
1214
</>
1315
),
1416
},
1517
{
16-
title: "🧠 Advanced Capabilities",
18+
icon: "🧠",
19+
title: "Advanced Capabilities",
1720
description: (
1821
<>
19-
Built-in RAG memory system, document processing, media analysis, and autonomous
20-
trading capabilities. Supports multiple AI models including Llama, GPT-4, and Claude.
22+
Built-in RAG memory system, document processing, media analysis, and
23+
autonomous trading capabilities. Supports multiple AI models including
24+
Llama, GPT-4, and Claude.
2125
</>
2226
),
2327
},
2428
{
25-
title: "🔌 Extensible Design",
29+
icon: "🔌",
30+
title: "Extensible Design",
2631
description: (
2732
<>
28-
Create custom actions, add new platform integrations, and extend functionality
29-
through a modular plugin system. Full TypeScript support.
33+
Create custom actions, add new platform integrations, and extend
34+
functionality through a <b>modular plugin system</b>. Full TypeScript
35+
support.
3036
</>
3137
),
3238
},
3339
];
3440

35-
function Feature({ title, description }) {
41+
function Feature({ icon, title, description }) {
3642
return (
37-
<div className={clsx("col col--4")}>
38-
<div className="card margin--md" style={{
39-
height: "100%",
40-
backgroundColor: "var(--ifm-card-background-color)",
41-
backdropFilter: "blur(10px)",
42-
borderRadius: "12px",
43-
color: "var(--ifm-font-color-base)",
44-
}}>
45-
<div className="card__body text--center padding--md">
46-
<Heading as="h3" style={{
47-
color: "var(--ifm-heading-color)"
48-
}}>{title}</Heading>
43+
<div className={clsx("col")}>
44+
<div
45+
className="margin--md"
46+
style={{
47+
height: "100%",
48+
}}
49+
>
50+
<div className="card__body text--left padding--md">
51+
<icon className={styles.featureIcon}>{icon}</icon>
52+
<Heading
53+
as="h3"
54+
style={{
55+
color: "var(--ifm-heading-color)",
56+
}}
57+
>
58+
{title}
59+
</Heading>
4960
<p>{description}</p>
5061
</div>
5162
</div>
@@ -58,9 +69,11 @@ export default function HomepageFeatures() {
5869
<section className={styles.features}>
5970
<div className="container">
6071
<div className="row">
61-
{FeatureList.map((props, idx) => (
62-
<Feature key={idx} {...props} />
63-
))}
72+
<div className={styles.featureGrid}>
73+
{FeatureList.map((props, idx) => (
74+
<Feature key={idx} {...props} />
75+
))}
76+
</div>
6477
</div>
6578
</div>
6679
</section>

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

+48
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,57 @@
33
align-items: center;
44
padding: 2rem 0;
55
width: 100%;
6+
flex-wrap: wrap;
67
}
78

89
.featureSvg {
910
height: 200px;
1011
width: 200px;
1112
}
13+
14+
.featureIcon {
15+
height: 100px;
16+
width: 100px;
17+
font-size: 2rem;
18+
}
19+
20+
.featureGrid {
21+
display: grid;
22+
grid-template-columns: repeat(3, 1fr);
23+
gap: 1rem;
24+
}
25+
26+
@media (max-width: 768px) {
27+
.featureGrid {
28+
grid-template-columns: repeat(2, 1fr);
29+
gap: 0rem;
30+
}
31+
32+
.featureSvg {
33+
height: 150px;
34+
width: 150px;
35+
}
36+
37+
.featureIcon {
38+
height: 80px;
39+
width: 80px;
40+
font-size: 1.5rem;
41+
}
42+
}
43+
44+
@media (max-width: 480px) {
45+
.featureGrid {
46+
grid-template-columns: 1fr;
47+
}
48+
49+
.featureSvg {
50+
height: 100px;
51+
width: 100px;
52+
}
53+
54+
.featureIcon {
55+
height: 60px;
56+
width: 60px;
57+
font-size: 1.2rem;
58+
}
59+
}

‎docs/src/components/HomepageHeader/index.js

+56
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
2+
import Heading from "@theme/Heading";
3+
4+
import styles from "./styles.module.css";
5+
6+
function HomepageHeader() {
7+
const { siteConfig } = useDocusaurusContext();
8+
return (
9+
<header className={styles.heroBanner}>
10+
<div className="container">
11+
<div className={styles.heroSection}>
12+
<div>
13+
<h1 className={styles.heroTitle}>
14+
eliza is a simple, fast, and{" "}
15+
<span className={styles.headerTextGradient}>
16+
lightweight chatbot
17+
</span>{" "}
18+
framework
19+
</h1>
20+
<p className={styles.heroSubtitle}>{siteConfig.tagline}</p>
21+
<div className={styles.buttonGroup}>
22+
<a
23+
className="button button--primary button--lg"
24+
href="/docs/introduction"
25+
>
26+
Get Started
27+
</a>
28+
<div className={styles.githubButton}>
29+
<iframe
30+
src="https://ghbtns.com/github-btn.html?user=ai16z&repo=eliza&type=star&count=true&size=large"
31+
frameborder="0"
32+
scrolling="0"
33+
width="135"
34+
height="30"
35+
title="GitHub"
36+
></iframe>
37+
</div>
38+
</div>
39+
</div>
40+
<div className={styles.heroRight}>
41+
<img
42+
src="/eliza/img/blurback.png"
43+
className={styles.blurPhoto}
44+
alt="blurred"
45+
/>
46+
<pre className={styles.codeBlock}>
47+
<code className="language-bash">{`npm install eliza`}</code>
48+
</pre>
49+
</div>
50+
</div>
51+
</div>
52+
</header>
53+
);
54+
}
55+
56+
export default HomepageHeader;

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

+132
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
.heroTitle {
2+
font-size: 3.2rem;
3+
font-weight: 700;
4+
margin-bottom: 1rem;
5+
line-height: 1.4;
6+
}
7+
8+
.heroSubtitle {
9+
font-size: 1.5rem;
10+
opacity: 0.8;
11+
}
12+
13+
.heroSection {
14+
padding: 6rem 2rem 0rem;
15+
display: grid;
16+
grid-template-columns: 1fr 1fr;
17+
margin: 0 auto;
18+
max-width: 100%;
19+
}
20+
21+
.reg-button {
22+
background-color: pink;
23+
}
24+
25+
.buttonGroup {
26+
display: flex;
27+
gap: 1rem;
28+
}
29+
30+
.githubButton {
31+
margin-top: 1rem;
32+
}
33+
34+
.heroRight {
35+
display: flex;
36+
flex-direction: column;
37+
justify-content: center;
38+
align-items: center;
39+
position: relative;
40+
}
41+
42+
.codeBlock {
43+
display: flex;
44+
background: #242736;
45+
color: white;
46+
padding-left: 1.5rem;
47+
padding-right: 1.5rem;
48+
position: relative;
49+
z-index: 1;
50+
opacity: 0.9;
51+
}
52+
53+
.headerTextGradient {
54+
background: linear-gradient(180deg, #ffa600 0%, #ff6f00 100%);
55+
-webkit-background-clip: text;
56+
-webkit-text-fill-color: transparent;
57+
}
58+
59+
.blurPhoto {
60+
filter: blur(15px);
61+
border-radius: 45%;
62+
position: absolute;
63+
top: 50%;
64+
left: 50%;
65+
transform: translate(-50%, -50%);
66+
}
67+
68+
/* Media Queries for Responsiveness */
69+
@media (max-width: 1024px) {
70+
.heroSection {
71+
grid-template-columns: 1fr;
72+
padding: 4rem 1rem 0rem;
73+
text-align: center;
74+
gap: 2rem;
75+
}
76+
77+
.buttonGroup {
78+
justify-content: center;
79+
position: relative;
80+
z-index: 1;
81+
}
82+
83+
.heroTitle {
84+
font-size: 3rem;
85+
}
86+
87+
.heroSubtitle {
88+
font-size: 1.3rem;
89+
}
90+
}
91+
92+
@media (max-width: 768px) {
93+
.heroSection {
94+
padding: 3rem 1rem 0rem;
95+
}
96+
97+
.heroTitle {
98+
font-size: 2rem;
99+
}
100+
101+
.heroSubtitle {
102+
font-size: 1rem;
103+
}
104+
105+
.codeBlock {
106+
padding-left: 1rem;
107+
padding-right: 1rem;
108+
}
109+
}
110+
111+
@media (max-width: 480px) {
112+
.heroSection {
113+
padding: 2rem 1rem 0rem;
114+
}
115+
116+
.heroTitle {
117+
font-size: 1.5rem;
118+
}
119+
120+
.heroSubtitle {
121+
font-size: 0.9rem;
122+
}
123+
124+
.buttonGroup {
125+
flex-direction: column;
126+
gap: 0.5rem;
127+
}
128+
129+
.githubButton {
130+
margin-top: 0.5rem;
131+
}
132+
}

‎docs/src/css/custom.css

+24-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
/* You can override the default Infima variables here. */
88
:root {
9-
--ifm-color-primary: darkblue;
9+
--ifm-color-primary: #ffa600;
1010
--ifm-color-primary-dark: #29784c;
1111
--ifm-color-primary-darker: #277148;
1212
--ifm-color-primary-darkest: #205d3b;
@@ -27,4 +27,27 @@
2727
--ifm-color-primary-lighter: #32d8b4;
2828
--ifm-color-primary-lightest: #4fddbf;
2929
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
30+
--ifm-footer-background-color: #ffa600;
31+
}
32+
33+
.footer {
34+
background-color: #242736;
35+
}
36+
37+
.button--primary {
38+
background: linear-gradient(
39+
180deg,
40+
var(--token-e94f1f99-3833-4c15-8d11-a67e80285705, rgb(249, 140, 19))
41+
/* {"name":"Orange"} */ 0%,
42+
rgb(255, 166, 0) 100%
43+
);
44+
border: none;
45+
padding: 1rem 2rem;
46+
font-size: 1.2rem;
47+
transition: background 0.3s;
48+
color: white;
49+
}
50+
51+
.button--primary:hover {
52+
background: linear-gradient(rgb(255, 156, 43) 0%, rgb(255, 166, 0) 100%);
3053
}

0 commit comments

Comments
 (0)