Skip to content

Commit 370a3e6

Browse files
jan-jagodajan-jagoda
authored
docs(website): use cases section on the homepage (#101)
1 parent 84b9002 commit 370a3e6

File tree

15 files changed

+212
-14
lines changed

15 files changed

+212
-14
lines changed

‎apps/docs/src/components/HomepageAboutSection/index.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ const slides = [
1010
{
1111
title: 'Composable',
1212
description:
13-
'Based on MACH and composable architecture to deliver flexibility, extendibility and make your Customer Portal future-proof.',
13+
'Solution based on MACH and composable architecture to deliver flexibility, extendibility and make your Customer Portal future-proof.',
1414
badges: [
1515
{ title: 'M.A.C.H.', icon: null },
1616
{ title: 'Headless', icon: null },
@@ -159,10 +159,9 @@ export function HomepageAboutSection() {
159159
<section ref={sectionRef} className="container relative mb-16 pt-20 md:py-[50px]">
160160
<div className="md:hidden">
161161
<H2>
162-
What's{' '}
163-
<span className="text-highlighted block md:inline">
164-
{siteConfig.customFields.brandName as ReactNode}
165-
</span>
162+
What{' '}
163+
<span className="text-highlighted md:inline">{siteConfig.customFields.brandName as ReactNode}</span>{' '}
164+
is?
166165
</H2>
167166
<div className="flex flex-col gap-20">
168167
{slides.map((slide, index) => (
@@ -181,8 +180,9 @@ export function HomepageAboutSection() {
181180
<motion.div ref={headerRef} className="sticky top-[100px] z-10">
182181
<div className="">
183182
<H2>
184-
What's{' '}
185-
<span className="text-highlighted">{siteConfig.customFields.brandName as ReactNode}</span>
183+
What{' '}
184+
<span className="text-highlighted">{siteConfig.customFields.brandName as ReactNode}</span>{' '}
185+
is?
186186
</H2>
187187
</div>
188188
</motion.div>

‎apps/docs/src/components/HomepageArchitectureSection/index.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ export function HomepageArchitectureSection() {
2929
<div className="mt-14 md:mt-24 w-full flex justify-center">
3030
<img
3131
src="/img/homepage/architecture.svg"
32-
alt="Archotecture illustration"
32+
alt="Architecture illustration"
3333
className="w-full hidden md:block"
3434
/>
3535
<img
3636
src="/img/homepage/architecture-mobile.svg"
37-
alt="Archotecture illustration"
37+
alt="Architecture illustration"
3838
className="block md:hidden"
3939
/>
4040
</div>

‎apps/docs/src/components/HomepageBenefitsSection/index.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,10 @@ const Benefit: React.FC<BenefitProps> = ({ title, description, image }) => (
2424
export function HomepageBenefitsSection() {
2525
const { siteConfig } = useDocusaurusContext();
2626
return (
27-
<section className="container my-16 md:mb-32">
27+
<section className="container my-16 md:mb-32 lg:mb-32">
2828
<H2>
29-
Why{' '}
30-
<span className="text-highlighted block md:inline">
31-
{siteConfig.customFields.brandName as ReactNode}
32-
</span>
29+
Why <span className="text-highlighted md:inline">{siteConfig.customFields.brandName as ReactNode}</span>
30+
?
3331
</H2>
3432

3533
<div className="flex flex-col">

‎apps/docs/src/components/HomepageUseCases/Card.module.css

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
.card {
2+
display: flex;
3+
flex-direction: row;
4+
align-items: center;
5+
background: #e5e9fd;
6+
border-radius: 2rem;
7+
padding: 1.5rem 2.2rem;
8+
gap: 6rem;
9+
margin: 2rem 0;
10+
position: relative;
11+
overflow: hidden;
12+
}
13+
14+
.cardContent {
15+
flex: 1 1 0;
16+
display: flex;
17+
flex-direction: column;
18+
justify-content: center;
19+
text-align: left;
20+
z-index: 1;
21+
width: 40%;
22+
max-width: 40%;
23+
min-width: 0;
24+
}
25+
26+
.cardContent h3 {
27+
font-size: var(--ifm-h2-font-size);
28+
font-weight: 700;
29+
line-height: 1.2;
30+
margin-bottom: 2rem;
31+
color: #001360;
32+
}
33+
34+
.cardContent p {
35+
font-size: var(--ifm-font-size-base);
36+
color: #001360;
37+
margin: 0;
38+
}
39+
40+
.cardImageWrapper {
41+
flex: 1 1 0;
42+
display: flex;
43+
align-items: flex-end;
44+
justify-content: flex-end;
45+
min-width: 0;
46+
height: 100%;
47+
margin-bottom: -48px;
48+
margin-right: -36px;
49+
}
50+
51+
.cardImage {
52+
max-width: 100%;
53+
max-height: 80%;
54+
55+
object-fit: contain;
56+
align-self: flex-end;
57+
}
58+
59+
@media (max-width: 996px) {
60+
.card {
61+
flex-direction: column;
62+
padding: 2rem;
63+
align-items: stretch;
64+
gap: 1rem;
65+
}
66+
.cardContent {
67+
width: 100%;
68+
max-width: 100%;
69+
}
70+
.cardContent h3 {
71+
font-size: var(--ifm-h3-font-size);
72+
}
73+
.cardContent p {
74+
margin-bottom: 0;
75+
font-size: var(--ifm-h6-font-size);
76+
}
77+
.cardImageWrapper {
78+
height: auto;
79+
/* justify-content: center; */
80+
align-items: center;
81+
margin-right: -32px;
82+
margin-bottom: -32px;
83+
}
84+
.cardImage {
85+
max-height: 200px;
86+
border-radius: 0 0 0 0;
87+
}
88+
}

‎apps/docs/src/components/HomepageUseCases/Card.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { H3 } from '../Typography';
2+
3+
import styles from './Card.module.css';
4+
5+
interface CardProps {
6+
title: string;
7+
description: string;
8+
imageSrc: string;
9+
imageAlt?: string;
10+
}
11+
12+
export function Card({ title, description, imageSrc, imageAlt }: CardProps) {
13+
return (
14+
<div className={styles.card}>
15+
<div className={styles.cardContent}>
16+
<H3>{title}</H3>
17+
<p>{description}</p>
18+
</div>
19+
<div className={styles.cardImageWrapper}>
20+
<img src={imageSrc} alt={imageAlt || title} className={styles.cardImage} />
21+
</div>
22+
</div>
23+
);
24+
}

‎apps/docs/src/components/HomepageUseCases/index.tsx

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import type { ReactNode } from 'react';
2+
3+
import { H2 } from '../Typography';
4+
5+
import { Card } from './Card';
6+
import styles from './styles.module.css';
7+
8+
export function HomepageUseCases(): ReactNode {
9+
return (
10+
<section className={`${styles.useCasesSection} container`}>
11+
<H2>
12+
What can you build with
13+
<span className="text-highlighted block md:inline"> Open Self Service?</span>
14+
</H2>
15+
<p>
16+
Open Self Service helps you build fast, flexible frontends for apps that serve your customers — not
17+
admin panels or SPAs, <br />
18+
but client-facing portals connected to the APIs your business runs on.
19+
</p>
20+
<Card
21+
title="Knowledge base portals"
22+
description="Allow customers to search, browse and find answers without contacting support – fully customizable and searchable, integrated with CMSs, your dedicated backend or AI-based tools."
23+
imageSrc="/img/homepage/case-1-img.png"
24+
imageAlt="Product marketing website preview"
25+
/>
26+
27+
<Card
28+
title="Product marketing websites"
29+
description="Help your users find key information about your products, services, processes, or policies – powered by headless CMS, easy to manage by support and marketing teams."
30+
imageSrc="/img/homepage/case-2-img.png"
31+
imageAlt="Product marketing website preview"
32+
/>
33+
34+
<Card
35+
title="Asset service management apps"
36+
description="Let users report product issues, follow ticket resolution, and receive status updates — customizable, scalable, and API-ready."
37+
imageSrc="/img/homepage/case-3-img.png"
38+
imageAlt="Product marketing website preview"
39+
/>
40+
41+
<Card
42+
title="Complex customer service platforms"
43+
description="Allow users to view and submit tickets, track their requests, manage orders, reorder products or spare parts, monitor & configure services – integrated with CRMs, ERPs, CMSs, commerce or custom APIs."
44+
imageSrc="/img/homepage/case-4-img.png"
45+
imageAlt="Product marketing website preview"
46+
/>
47+
48+
<Card
49+
title="B2B after-sales support portals"
50+
description="Empower customers to handle product servicing, warranty tracking, and returns — solutions integrated with ERP, CRM, and other backend systems."
51+
imageSrc="/img/homepage/case-5-img.png"
52+
imageAlt="Product marketing website preview"
53+
/>
54+
</section>
55+
);
56+
}

‎apps/docs/src/components/HomepageUseCases/styles.module.css

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.useCasesSection {
2+
margin-bottom: 5rem;
3+
}
4+
5+
.useCasesSection h2 {
6+
margin-bottom: 24px;
7+
}
8+
.useCasesSection h2 + p {
9+
margin-bottom: 80px;
10+
}
11+
12+
@media (max-width: 996px) {
13+
.useCasesSection {
14+
margin-bottom: 2rem;
15+
}
16+
.useCasesSection h2 + p {
17+
margin-bottom: 2rem;
18+
}
19+
}

‎apps/docs/src/css/custom.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -484,6 +484,16 @@ aside:not(.theme-doc-sidebar-container) {
484484
margin: 0 auto;
485485
padding: 0 1rem;
486486
}
487+
@media (max-width: 996px) {
488+
.container {
489+
margin-bottom: 4rem;
490+
}
491+
}
492+
@media (min-width: 1440px) {
493+
.container {
494+
max-width: var(--ifm-container-width-xl) !important;
495+
}
496+
}
487497

488498
/* --------------------------
489499
STOPKA

‎apps/docs/src/pages/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { HomepageArchitectureSection } from '@site/src/components/HomepageArchit
77
import { HomepageBannerSection } from '@site/src/components/HomepageBannerSection';
88
import { HomepageBenefitsSection } from '@site/src/components/HomepageBenefitsSection';
99
import HomepageJoinTheWaitlistSection from '@site/src/components/HomepageJoinTheWaitlistSection';
10+
import { HomepageUseCases } from '@site/src/components/HomepageUseCases';
1011

1112
import Layout from '@theme/Layout';
1213

@@ -25,9 +26,11 @@ export default function Home(): ReactNode {
2526
<div className={`${styles.mainContentWrapper}`}>
2627
<HomepageBannerSection />
2728
<HomepageArchitectureSection />
29+
<HomepageUseCases />
2830
</div>
2931
</div>
3032
</div>
33+
3134
<HomepageAboutSection />
3235
<HomepageBenefitsSection />
3336
</div>

‎apps/docs/static/img/homepage/banner.png

-48.8 KB
Loading

0 commit comments

Comments
 (0)