Skip to content

Commit 1a30950

Browse files
codeBeltcodeBelt
committed
feat: enhance homepage with new layout and code examples
- Added example and nested reactive code snippets for better demonstration. - Updated hero section with a split layout and new styles. - Introduced "Deep Reactivity" showcase section with descriptive content. - Improved CSS for better responsiveness and visual appeal.
1 parent 1c4ba43 commit 1a30950

File tree

2 files changed

+146
-41
lines changed

2 files changed

+146
-41
lines changed

‎website/src/pages/index.module.css‎

Lines changed: 37 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,28 @@
55

66
.heroBanner {
77
padding: 4rem 0;
8-
text-align: center;
8+
text-align: left;
99
position: relative;
1010
overflow: hidden;
11+
background: linear-gradient(
12+
135deg,
13+
var(--ifm-color-primary) 0%,
14+
var(--ifm-color-primary-dark) 100%
15+
);
16+
color: #fff;
17+
}
18+
19+
.heroContent {
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
}
24+
25+
.heroCode {
26+
text-align: left;
27+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
28+
border-radius: var(--ifm-pre-border-radius);
29+
overflow: hidden;
1130
}
1231

1332
@media screen and (max-width: 996px) {
@@ -21,3 +40,20 @@
2140
align-items: center;
2241
justify-content: center;
2342
}
43+
44+
.showcase {
45+
background-color: var(--ifm-color-emphasis-100);
46+
padding: 4rem 0;
47+
border-top: 1px solid var(--ifm-color-emphasis-200);
48+
}
49+
50+
.checkList {
51+
list-style: none;
52+
padding: 0;
53+
margin: 1rem 0;
54+
}
55+
56+
.checkList li {
57+
margin-bottom: 0.5rem;
58+
font-weight: 500;
59+
}

‎website/src/pages/index.tsx‎

Lines changed: 109 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,129 @@
11
import Link from '@docusaurus/Link';
22
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3+
import CodeBlock from '@theme/CodeBlock';
34
import Heading from '@theme/Heading';
45
import Layout from '@theme/Layout';
56
import clsx from 'clsx';
67
import styles from './index.module.css';
78

9+
const ExampleCode = `import { store, useStore } from '@codebelt/classy-store';
10+
11+
// 1. Define your state and logic in a class
12+
class CounterStore {
13+
count = 0;
14+
increment() {
15+
this.count++;
16+
}
17+
}
18+
19+
// 2. Create a reactive store instance
20+
const counterStore = store(new CounterStore());
21+
22+
// 3. Use it in React with automatic updates
23+
function Counter() {
24+
const count = useStore(counterStore, (s) => s.count);
25+
return (
26+
<button onClick={() => counterStore.increment()}>
27+
Count is {count}
28+
</button>
29+
);
30+
}`;
31+
32+
const NestedCode = `// Works perfectly with nested objects - no spread operators!
33+
class UserStore {
34+
profile = {
35+
name: 'John',
36+
settings: { theme: 'dark' }
37+
};
38+
39+
toggleTheme() {
40+
// Direct mutation - Proxy handles the reactivity
41+
this.profile.settings.theme =
42+
this.profile.settings.theme === 'dark' ? 'light' : 'dark';
43+
}
44+
}
45+
46+
const userStore = store(new UserStore());`;
47+
848
function HomepageHeader() {
949
const {siteConfig} = useDocusaurusContext();
1050
return (
1151
<header className={clsx('hero hero--primary', styles.heroBanner)}>
1252
<div className="container">
13-
<Heading as="h1" className="hero__title">
14-
{siteConfig.title}
15-
</Heading>
16-
<p className="hero__subtitle">{siteConfig.tagline}</p>
17-
<div className={styles.buttons}>
18-
<Link className="button button--secondary button--lg" to="/docs/">
19-
Get Started - 5min ⏱️
20-
</Link>
53+
<div className="row">
54+
<div className={clsx('col col--5', styles.heroContent)}>
55+
<div className="text--left">
56+
<Heading as="h1" className="hero__title">
57+
{siteConfig.title}
58+
</Heading>
59+
<p className="hero__subtitle">{siteConfig.tagline}</p>
60+
<div
61+
className={styles.buttons}
62+
style={{justifyContent: 'flex-start'}}
63+
>
64+
<Link
65+
className="button button--secondary button--lg"
66+
to="/docs/"
67+
>
68+
Get Started - 5min ⏱️
69+
</Link>
70+
</div>
71+
</div>
72+
</div>
73+
<div className="col col--7">
74+
<div className={styles.heroCode}>
75+
<CodeBlock language="typescript" showLineNumbers={true}>
76+
{ExampleCode}
77+
</CodeBlock>
78+
</div>
79+
</div>
2180
</div>
2281
</div>
2382
</header>
2483
);
2584
}
2685

27-
export default function Home(): JSX.Element {
86+
function DeepReactivity() {
87+
return (
88+
<section className={styles.showcase}>
89+
<div className="container">
90+
<div className="row">
91+
<div className="col col--5">
92+
<div className="padding-vert--md">
93+
<Heading as="h3">Deep Reactivity</Heading>
94+
<p>
95+
Mutate nested objects directly. Our Proxy-based system
96+
automatically tracks changes and triggers targeted re-renders.
97+
</p>
98+
<p>
99+
Forget <code>{'{...state, nested: {...state.nested}}'}</code>{' '}
100+
hell.
101+
</p>
102+
<Heading as="h3" className="margin-top--lg">
103+
Simple & Familiar
104+
</Heading>
105+
<p>
106+
Use standard ES6 classes to define your state and business
107+
logic. No complex reducers, actions, or dispatchers. Just
108+
JavaScript.
109+
</p>
110+
<ul className={styles.checkList}>
111+
<li>✅ Zero boilerplate</li>
112+
<li>✅ Type-safe by nature</li>
113+
<li>✅ Framework agnostic core</li>
114+
</ul>
115+
</div>
116+
</div>
117+
<div className="col col--7">
118+
<CodeBlock language="typescript">{NestedCode}</CodeBlock>
119+
</div>
120+
</div>
121+
</div>
122+
</section>
123+
);
124+
}
125+
126+
export default function Home() {
28127
const {siteConfig} = useDocusaurusContext();
29128
return (
30129
<Layout
@@ -33,37 +132,7 @@ export default function Home(): JSX.Element {
33132
>
34133
<HomepageHeader />
35134
<main>
36-
<div className="container padding-vert--xl">
37-
<div className="row">
38-
<div className="col col--4">
39-
<div className="text--center padding-horiz--md">
40-
<Heading as="h3">Class-Based</Heading>
41-
<p>
42-
Define your state and logic using standard ES6 classes. No
43-
boilerplate, just standard JavaScript/TypeScript.
44-
</p>
45-
</div>
46-
</div>
47-
<div className="col col--4">
48-
<div className="text--center padding-horiz--md">
49-
<Heading as="h3">Reactive</Heading>
50-
<p>
51-
Automatic reactivity using Proxies. Mutations verify and
52-
trigger updates only where needed.
53-
</p>
54-
</div>
55-
</div>
56-
<div className="col col--4">
57-
<div className="text--center padding-horiz--md">
58-
<Heading as="h3">React Integration</Heading>
59-
<p>
60-
Seamless integration with React 18+ using
61-
`useSyncExternalStore` for concurrent features support.
62-
</p>
63-
</div>
64-
</div>
65-
</div>
66-
</div>
135+
<DeepReactivity />
67136
</main>
68137
</Layout>
69138
);

0 commit comments

Comments
 (0)