Skip to content

Commit 088834e

Browse files
tsutomitsutomi
committed
feat: update homepage layout and styles with new hero banner and feature section
1 parent b91a30c commit 088834e

6 files changed

Lines changed: 265 additions & 8 deletions

File tree

‎docs/README.md‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,3 @@
1-
---
2-
slug: /
3-
---
4-
51
[![NuGet](https://img.shields.io/nuget/v/Ratatosk.Abstractions.svg?label=NuGet)](https://www.nuget.org/packages/Ratatosk.Abstractions/)
62
[![codecov](https://codecov.io/gh/deveel/ratatosk/graph/badge.svg)](https://codecov.io/gh/deveel/ratatosk)
73
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://github.com/deveel/ratatosk/blob/main/LICENSE)

‎website/docusaurus.config.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ const config: Config = {
7676
docs: {
7777
path: '../docs',
7878
sidebarPath: './sidebars.ts',
79-
routeBasePath: '/',
8079
editUrl: 'https://github.com/deveel/ratatosk/edit/main/docs/',
8180
},
8281
blog: false,
@@ -136,15 +135,15 @@ const config: Config = {
136135
items: [
137136
{
138137
label: 'Getting Started',
139-
to: '/',
138+
to: '/docs/',
140139
},
141140
{
142141
label: 'Framework Overview',
143-
to: '/framework-overview',
142+
to: '/docs/framework-overview',
144143
},
145144
{
146145
label: 'Roadmap',
147-
to: '/roadmap',
146+
to: '/docs/roadmap',
148147
},
149148
],
150149
},

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

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import styles from './styles.module.css';
4+
5+
function MessageIcon() {
6+
return (
7+
<svg
8+
className={styles.featureSvg}
9+
viewBox="0 0 24 24"
10+
fill="none"
11+
stroke="currentColor"
12+
strokeWidth="1.5"
13+
strokeLinecap="round"
14+
strokeLinejoin="round"
15+
>
16+
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
17+
<line x1="8" y1="9" x2="16" y2="9" />
18+
<line x1="8" y1="13" x2="14" y2="13" />
19+
</svg>
20+
);
21+
}
22+
23+
function ShieldCheckIcon() {
24+
return (
25+
<svg
26+
className={styles.featureSvg}
27+
viewBox="0 0 24 24"
28+
fill="none"
29+
stroke="currentColor"
30+
strokeWidth="1.5"
31+
strokeLinecap="round"
32+
strokeLinejoin="round"
33+
>
34+
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
35+
<polyline points="9 12 11 14 15 10" />
36+
</svg>
37+
);
38+
}
39+
40+
function ShareIcon() {
41+
return (
42+
<svg
43+
className={styles.featureSvg}
44+
viewBox="0 0 24 24"
45+
fill="none"
46+
stroke="currentColor"
47+
strokeWidth="1.5"
48+
strokeLinecap="round"
49+
strokeLinejoin="round"
50+
>
51+
<circle cx="18" cy="5" r="3" />
52+
<circle cx="6" cy="12" r="3" />
53+
<circle cx="18" cy="19" r="3" />
54+
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49" />
55+
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49" />
56+
</svg>
57+
);
58+
}
59+
60+
type FeatureItem = {
61+
title: string;
62+
Icon: React.ComponentType;
63+
description: React.JSX.Element;
64+
};
65+
66+
const FeatureList: FeatureItem[] = [
67+
{
68+
title: 'Unified Message Model',
69+
Icon: MessageIcon,
70+
description: (
71+
<>
72+
One <code>IMessage</code>, one <code>IChannelConnector</code>, one
73+
consistent programming model &mdash; the same abstractions for SMS,
74+
email, push notifications, and chat. No provider lock-in, no SDK
75+
fragmentation.
76+
</>
77+
),
78+
},
79+
{
80+
title: 'Schema-Driven Validation',
81+
Icon: ShieldCheckIcon,
82+
description: (
83+
<>
84+
Every connector declares its capabilities and constraints via{' '}
85+
<code>IChannelSchema</code>. Validate messages before they reach the
86+
provider &mdash; catch invalid payloads at build time, not at send
87+
time.
88+
</>
89+
),
90+
},
91+
{
92+
title: 'Extensible by Design',
93+
Icon: ShareIcon,
94+
description: (
95+
<>
96+
Extend the framework with custom connectors for any provider &mdash;
97+
social messaging (Slack, Teams, WhatsApp), protocol-level channels
98+
(SMPP, SMTP, APNs), or proprietary gateways. One base class, any
99+
transport.
100+
</>
101+
),
102+
},
103+
];
104+
105+
function Feature({ title, Icon, description }: FeatureItem) {
106+
return (
107+
<div className={clsx('col col--4')}>
108+
<div className="text--center">
109+
<Icon />
110+
</div>
111+
<div className="text--center padding-horiz--md">
112+
<h3>{title}</h3>
113+
<p>{description}</p>
114+
</div>
115+
</div>
116+
);
117+
}
118+
119+
export default function HomepageFeatures(): React.JSX.Element {
120+
return (
121+
<section className={styles.features}>
122+
<div className="container">
123+
<div className="row">
124+
{FeatureList.map((props, idx) => (
125+
<Feature key={idx} {...props} />
126+
))}
127+
</div>
128+
</div>
129+
</section>
130+
);
131+
}

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.features {
2+
display: flex;
3+
align-items: center;
4+
padding: 3rem 0;
5+
width: 100%;
6+
}
7+
8+
.featureSvg {
9+
height: 72px;
10+
width: 72px;
11+
color: var(--ifm-color-primary);
12+
}
13+
14+
[data-theme='dark'] .featureSvg {
15+
color: var(--ifm-color-primary-light);
16+
}

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

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.heroBanner {
2+
padding: 2.5rem 0;
3+
text-align: center;
4+
position: relative;
5+
overflow: hidden;
6+
background: linear-gradient(135deg, var(--ifm-color-primary) 0%, var(--ifm-color-primary-dark) 100%);
7+
}
8+
9+
.heroBanner::before {
10+
content: '';
11+
position: absolute;
12+
top: 0;
13+
left: 0;
14+
right: 0;
15+
bottom: 0;
16+
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
17+
pointer-events: none;
18+
}
19+
20+
.heroLogo {
21+
max-width: 300px;
22+
width: 80%;
23+
margin-bottom: 1rem;
24+
}
25+
26+
.heroTagline {
27+
font-size: 1.2rem;
28+
color: #FFFFFF;
29+
margin-bottom: 1.25rem;
30+
opacity: 0.9;
31+
}
32+
33+
.buttons {
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
gap: 1rem;
38+
}
39+
40+
.buttons .button {
41+
min-width: 180px;
42+
}
43+
44+
@media screen and (max-width: 996px) {
45+
.heroBanner {
46+
padding: 1.5rem 0;
47+
}
48+
49+
.heroLogo {
50+
max-width: 250px;
51+
}
52+
53+
.heroTagline {
54+
font-size: 1.2rem;
55+
}
56+
57+
.buttons {
58+
flex-direction: column;
59+
gap: 0.5rem;
60+
}
61+
}

‎website/src/pages/index.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import clsx from 'clsx';
3+
import Link from '@docusaurus/Link';
4+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
5+
import useBaseUrl from '@docusaurus/useBaseUrl';
6+
import Layout from '@theme/Layout';
7+
import HomepageFeatures from '@site/src/components/HomepageFeatures';
8+
import Heading from '@theme/Heading';
9+
10+
import styles from './index.module.css';
11+
12+
function HeroBanner() {
13+
const { siteConfig } = useDocusaurusContext();
14+
return (
15+
<header className={clsx('hero hero--primary', styles.heroBanner)}>
16+
<div className="container">
17+
<img
18+
src={useBaseUrl('/img/ratatosk-full-logo.png')}
19+
alt="Ratatosk"
20+
className={styles.heroLogo}
21+
/>
22+
<p className={styles.heroTagline}>
23+
{siteConfig.tagline}
24+
</p>
25+
<div className={styles.buttons}>
26+
<Link
27+
className="button button--secondary button--lg"
28+
to="/docs/">
29+
Get Started &rarr;
30+
</Link>
31+
<Link
32+
className="button button--secondary button--lg"
33+
to="https://github.com/deveel/ratatosk">
34+
GitHub
35+
</Link>
36+
</div>
37+
</div>
38+
</header>
39+
);
40+
}
41+
42+
export default function Home(): React.JSX.Element {
43+
const { siteConfig } = useDocusaurusContext();
44+
return (
45+
<Layout
46+
title="Home"
47+
description={siteConfig.tagline}>
48+
<main>
49+
<HeroBanner />
50+
<HomepageFeatures />
51+
</main>
52+
</Layout>
53+
);
54+
}

0 commit comments

Comments
 (0)