From fe71c541e9ff4b4076da20c853106239eeedbd40 Mon Sep 17 00:00:00 2001 From: Marcin Krasowski Date: Mon, 22 Sep 2025 17:34:31 +0200 Subject: [PATCH 01/14] docs: partnership and support pages --- apps/docs/docusaurus.config.ts | 2 +- apps/docs/package.json | 2 + apps/docs/src/assets/icons/Discord2.svg | 3 + apps/docs/src/assets/icons/FolderOpenDot.svg | 3 + apps/docs/src/assets/icons/Github2.svg | 3 + apps/docs/src/assets/icons/History.svg | 3 + apps/docs/src/assets/icons/Mail.svg | 3 + apps/docs/src/assets/icons/Map.svg | 3 + apps/docs/src/assets/icons/PencilLine.svg | 3 + .../assets/icons/SquareArrowOutUpRight.svg | 3 + apps/docs/src/assets/icons/icon call.svg | 4 + apps/docs/src/assets/icons/icon handshake.svg | 4 + apps/docs/src/assets/icons/icon text.svg | 4 + .../src/assets/icons/o2s-icon-add_logo.svg | 13 + apps/docs/src/assets/icons/o2s-icon-badge.svg | 13 + .../src/assets/icons/o2s-icon-contact.svg | 15 + apps/docs/src/assets/icons/o2s-icon-loop.svg | 9 + .../src/assets/icons/o2s-icon-roadmap.svg | 5 + .../src/assets/icons/o2s-icon-support.svg | 9 + apps/docs/src/components/Badge/index.tsx | 13 +- .../src/components/BenefitsSection/index.tsx | 92 +++++ apps/docs/src/components/Card/index.tsx | 4 +- .../components/DXPBenefitsSection/index.tsx | 78 ----- .../src/components/DXPFooterSection/index.tsx | 44 --- .../src/components/FooterSection/index.tsx | 61 ++++ .../src/components/GuidesSection/index.tsx | 93 ++++++ .../components/HeroBannerSection/index.tsx | 160 +++++---- apps/docs/src/components/Typography/index.tsx | 8 + apps/docs/src/css/custom.css | 34 +- .../contact.module.scss} | 10 +- .../pages/{contact.tsx => contact/index.tsx} | 16 +- apps/docs/src/pages/dxp/dxp.module.scss | 1 + .../docs/src/pages/{dxp.tsx => dxp/index.tsx} | 68 +++- apps/docs/src/pages/index.tsx | 3 +- .../{index.module.css => main.module.scss} | 0 apps/docs/src/pages/markdown-page.md | 7 - apps/docs/src/pages/partnership/index.tsx | 173 ++++++++++ .../pages/partnership/partnership.module.scss | 1 + apps/docs/src/pages/support/enterprise.tsx | 313 ++++++++++++++++++ apps/docs/src/pages/support/index.tsx | 144 ++++++++ .../src/pages/support/support.module.scss | 1 + apps/docs/tsconfig.json | 14 +- package-lock.json | 88 ++--- 43 files changed, 1251 insertions(+), 279 deletions(-) create mode 100644 apps/docs/src/assets/icons/Discord2.svg create mode 100644 apps/docs/src/assets/icons/FolderOpenDot.svg create mode 100644 apps/docs/src/assets/icons/Github2.svg create mode 100644 apps/docs/src/assets/icons/History.svg create mode 100644 apps/docs/src/assets/icons/Mail.svg create mode 100644 apps/docs/src/assets/icons/Map.svg create mode 100644 apps/docs/src/assets/icons/PencilLine.svg create mode 100644 apps/docs/src/assets/icons/SquareArrowOutUpRight.svg create mode 100644 apps/docs/src/assets/icons/icon call.svg create mode 100644 apps/docs/src/assets/icons/icon handshake.svg create mode 100644 apps/docs/src/assets/icons/icon text.svg create mode 100644 apps/docs/src/assets/icons/o2s-icon-add_logo.svg create mode 100644 apps/docs/src/assets/icons/o2s-icon-badge.svg create mode 100644 apps/docs/src/assets/icons/o2s-icon-contact.svg create mode 100644 apps/docs/src/assets/icons/o2s-icon-loop.svg create mode 100644 apps/docs/src/assets/icons/o2s-icon-roadmap.svg create mode 100644 apps/docs/src/assets/icons/o2s-icon-support.svg create mode 100644 apps/docs/src/components/BenefitsSection/index.tsx delete mode 100644 apps/docs/src/components/DXPBenefitsSection/index.tsx delete mode 100644 apps/docs/src/components/DXPFooterSection/index.tsx create mode 100644 apps/docs/src/components/FooterSection/index.tsx create mode 100644 apps/docs/src/components/GuidesSection/index.tsx rename apps/docs/src/pages/{contact.module.css => contact/contact.module.scss} (79%) rename apps/docs/src/pages/{contact.tsx => contact/index.tsx} (97%) create mode 100644 apps/docs/src/pages/dxp/dxp.module.scss rename apps/docs/src/pages/{dxp.tsx => dxp/index.tsx} (60%) rename apps/docs/src/pages/{index.module.css => main.module.scss} (100%) delete mode 100644 apps/docs/src/pages/markdown-page.md create mode 100644 apps/docs/src/pages/partnership/index.tsx create mode 100644 apps/docs/src/pages/partnership/partnership.module.scss create mode 100644 apps/docs/src/pages/support/enterprise.tsx create mode 100644 apps/docs/src/pages/support/index.tsx create mode 100644 apps/docs/src/pages/support/support.module.scss diff --git a/apps/docs/docusaurus.config.ts b/apps/docs/docusaurus.config.ts index f335d59a..60b26246 100644 --- a/apps/docs/docusaurus.config.ts +++ b/apps/docs/docusaurus.config.ts @@ -253,7 +253,7 @@ const config: Config = { markdown: { mermaid: true, }, - plugins: [tailwindPlugin, '@docusaurus/theme-mermaid', 'docusaurus-plugin-image-zoom'], + plugins: [tailwindPlugin, '@docusaurus/theme-mermaid', 'docusaurus-plugin-image-zoom', 'docusaurus-plugin-sass'], presets: [ [ 'classic', diff --git a/apps/docs/package.json b/apps/docs/package.json index 81c98161..0c81fb79 100644 --- a/apps/docs/package.json +++ b/apps/docs/package.json @@ -26,10 +26,12 @@ "@vercel/speed-insights": "^1.2.0", "clsx": "^2.1.1", "docusaurus-plugin-image-zoom": "^3.0.1", + "docusaurus-plugin-sass": "^0.2.6", "framer-motion": "^12.12.1", "prism-react-renderer": "^2.4.1", "react": "^19.1.0", "react-dom": "^19.1.0", + "sass": "^1.93.0", "vanilla-cookieconsent": "^3.1.0" }, "devDependencies": { diff --git a/apps/docs/src/assets/icons/Discord2.svg b/apps/docs/src/assets/icons/Discord2.svg new file mode 100644 index 00000000..80b05804 --- /dev/null +++ b/apps/docs/src/assets/icons/Discord2.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/FolderOpenDot.svg b/apps/docs/src/assets/icons/FolderOpenDot.svg new file mode 100644 index 00000000..b7ac4a6f --- /dev/null +++ b/apps/docs/src/assets/icons/FolderOpenDot.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/Github2.svg b/apps/docs/src/assets/icons/Github2.svg new file mode 100644 index 00000000..2c9e0311 --- /dev/null +++ b/apps/docs/src/assets/icons/Github2.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/History.svg b/apps/docs/src/assets/icons/History.svg new file mode 100644 index 00000000..ca28c6ac --- /dev/null +++ b/apps/docs/src/assets/icons/History.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/Mail.svg b/apps/docs/src/assets/icons/Mail.svg new file mode 100644 index 00000000..8cb990cd --- /dev/null +++ b/apps/docs/src/assets/icons/Mail.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/Map.svg b/apps/docs/src/assets/icons/Map.svg new file mode 100644 index 00000000..47527d33 --- /dev/null +++ b/apps/docs/src/assets/icons/Map.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/PencilLine.svg b/apps/docs/src/assets/icons/PencilLine.svg new file mode 100644 index 00000000..45b24944 --- /dev/null +++ b/apps/docs/src/assets/icons/PencilLine.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/SquareArrowOutUpRight.svg b/apps/docs/src/assets/icons/SquareArrowOutUpRight.svg new file mode 100644 index 00000000..7cb5833d --- /dev/null +++ b/apps/docs/src/assets/icons/SquareArrowOutUpRight.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/docs/src/assets/icons/icon call.svg b/apps/docs/src/assets/icons/icon call.svg new file mode 100644 index 00000000..25b06765 --- /dev/null +++ b/apps/docs/src/assets/icons/icon call.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/src/assets/icons/icon handshake.svg b/apps/docs/src/assets/icons/icon handshake.svg new file mode 100644 index 00000000..d98a838c --- /dev/null +++ b/apps/docs/src/assets/icons/icon handshake.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/src/assets/icons/icon text.svg b/apps/docs/src/assets/icons/icon text.svg new file mode 100644 index 00000000..8cb10f2a --- /dev/null +++ b/apps/docs/src/assets/icons/icon text.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/docs/src/assets/icons/o2s-icon-add_logo.svg b/apps/docs/src/assets/icons/o2s-icon-add_logo.svg new file mode 100644 index 00000000..d926dd89 --- /dev/null +++ b/apps/docs/src/assets/icons/o2s-icon-add_logo.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/docs/src/assets/icons/o2s-icon-badge.svg b/apps/docs/src/assets/icons/o2s-icon-badge.svg new file mode 100644 index 00000000..d3b0a83d --- /dev/null +++ b/apps/docs/src/assets/icons/o2s-icon-badge.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/apps/docs/src/assets/icons/o2s-icon-contact.svg b/apps/docs/src/assets/icons/o2s-icon-contact.svg new file mode 100644 index 00000000..0cffe9a7 --- /dev/null +++ b/apps/docs/src/assets/icons/o2s-icon-contact.svg @@ -0,0 +1,15 @@ + + + + + + + +
 + + + + + + + diff --git a/apps/docs/src/assets/icons/o2s-icon-loop.svg b/apps/docs/src/assets/icons/o2s-icon-loop.svg new file mode 100644 index 00000000..eeb230f9 --- /dev/null +++ b/apps/docs/src/assets/icons/o2s-icon-loop.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/docs/src/assets/icons/o2s-icon-roadmap.svg b/apps/docs/src/assets/icons/o2s-icon-roadmap.svg new file mode 100644 index 00000000..0e825cb5 --- /dev/null +++ b/apps/docs/src/assets/icons/o2s-icon-roadmap.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/docs/src/assets/icons/o2s-icon-support.svg b/apps/docs/src/assets/icons/o2s-icon-support.svg new file mode 100644 index 00000000..e9c124f6 --- /dev/null +++ b/apps/docs/src/assets/icons/o2s-icon-support.svg @@ -0,0 +1,9 @@ + + + +
 + + + + + diff --git a/apps/docs/src/components/Badge/index.tsx b/apps/docs/src/components/Badge/index.tsx index 403e329b..7d27d4d9 100644 --- a/apps/docs/src/components/Badge/index.tsx +++ b/apps/docs/src/components/Badge/index.tsx @@ -1,14 +1,21 @@ +import clsx from 'clsx'; import React from 'react'; interface BadgeProps { title: string; icon?: string | null; + variant?: 'primary' | 'secondary'; } -const Badge: React.FC = ({ title, icon }) => ( -
+const Badge: React.FC = ({ title, icon, variant = 'primary' }) => ( +
{icon && {title} - {title} + {title}
); diff --git a/apps/docs/src/components/BenefitsSection/index.tsx b/apps/docs/src/components/BenefitsSection/index.tsx new file mode 100644 index 00000000..098a0578 --- /dev/null +++ b/apps/docs/src/components/BenefitsSection/index.tsx @@ -0,0 +1,92 @@ +import clsx from 'clsx'; +import React, { type ReactNode } from 'react'; + +import Card from '../Card'; +import { Body, BodySmall, H2, H3 } from '../Typography'; + +export interface BenefitsSectionProps { + title?: React.ReactNode; + benefits: BenefitCardProps[]; +} + +export interface BenefitCardProps { + team?: string; + icon: React.ReactNode; + iconPosition?: 'left' | 'right'; + title: React.ReactNode; + description?: React.ReactNode; + link?: { + text: string; + url: string; + iconLeft?: ReactNode; + iconRight?: ReactNode; + target?: HTMLAnchorElement['target']; + }; + borderColor?: 'gradient' | 'blue' | 'green' | 'light'; +} + +export const BenefitCard: React.FC = ({ + team, + icon, + iconPosition = 'right', + title, + description, + link, + borderColor = 'blue', +}) => { + return ( + + {team && ( + <> +
+ {team} +
{icon}
+
+

{title}

+ + )} + + {!team && !description && ( + <> +
+
{icon}
+
+

{title}

+ + )} + + {!team && description && ( + <> +
+

{title}

+
{icon}
+
+ + )} + + {description && {description}} + + {link && ( + + {link.iconLeft} + {link.text} + {link.iconRight} + + )} + + ); +}; + +export const BenefitsSection: React.FC = ({ title, benefits }) => { + return ( +
+ {title &&

{title}

} + +
+ {benefits.map((benefit, index) => ( + + ))} +
+
+ ); +}; diff --git a/apps/docs/src/components/Card/index.tsx b/apps/docs/src/components/Card/index.tsx index 5a9b7faf..302c81a1 100644 --- a/apps/docs/src/components/Card/index.tsx +++ b/apps/docs/src/components/Card/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; interface CardProps { children: React.ReactNode; - borderColor?: 'gradient' | 'blue' | 'green'; + borderColor?: 'gradient' | 'blue' | 'green' | 'light'; className?: string; gap?: string; } @@ -12,6 +12,8 @@ const Card: React.FC = ({ children, borderColor = 'blue', className = if (borderColor === 'gradient') return 'card-gradient-border'; if (borderColor === 'blue') return 'card-base card-solid-border card-border-blue'; if (borderColor === 'green') return 'card-base card-solid-border card-border-green'; + if (borderColor === 'light') return 'card-base card-solid-border card-border-light'; + return 'card-base card-solid-border card-border-blue'; }; diff --git a/apps/docs/src/components/DXPBenefitsSection/index.tsx b/apps/docs/src/components/DXPBenefitsSection/index.tsx deleted file mode 100644 index 185c27d3..00000000 --- a/apps/docs/src/components/DXPBenefitsSection/index.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import React from 'react'; - -import CodeIcon from '@site/src/assets/icons/code.svg'; -import NetworkIcon from '@site/src/assets/icons/network.svg'; -import PenToolIcon from '@site/src/assets/icons/pentool.svg'; - -import Card from '../Card'; -import { Body, H2, H3 } from '../Typography'; - -interface BenefitCardProps { - team: string; - icon: React.ReactNode; - title: string; - borderColor?: 'gradient' | 'blue' | 'green'; -} - -const BenefitCard: React.FC = ({ team, icon, title, borderColor = 'blue' }) => { - return ( - - {/* Header */} -
- {team} -
{icon}
-
- - {/* Title */} -

{title}

- - ); -}; - -export function DXPBenefitsSection() { - const benefits: Array<{ - team: string; - icon: React.ReactNode; - title: string; - borderColor?: 'gradient' | 'blue' | 'green'; - }> = [ - { - team: 'Frontend Developers', - icon: , - title: 'Quick start with zero boilerplate', - borderColor: 'blue', - }, - { - team: 'Content Teams', - icon: , - title: 'Structured CMS and ready to use content models', - borderColor: 'gradient', - }, - { - team: 'Solution Architects', - icon: , - title: 'Flexible, composable stack as a base for future scaling', - borderColor: 'green', - }, - ]; - - return ( -
-

- Benefits for every team -

- -
- {benefits.map((benefit, index) => ( - - ))} -
-
- ); -} diff --git a/apps/docs/src/components/DXPFooterSection/index.tsx b/apps/docs/src/components/DXPFooterSection/index.tsx deleted file mode 100644 index b872e96e..00000000 --- a/apps/docs/src/components/DXPFooterSection/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React from 'react'; - -import GithubActiveIcon from '@site/src/assets/icons/github-active.svg'; -import GithubIcon from '@site/src/assets/icons/github.svg'; - -import { Body, H2 } from '../Typography'; - -export function DXPFooterSection() { - return ( -
- {/* Text Content */} -
-

- Ready to - get started? -

- - Build your next digital experience platform with our composable frontend starter kit. - -
- - {/* Buttons */} - -
- ); -} diff --git a/apps/docs/src/components/FooterSection/index.tsx b/apps/docs/src/components/FooterSection/index.tsx new file mode 100644 index 00000000..e63d3594 --- /dev/null +++ b/apps/docs/src/components/FooterSection/index.tsx @@ -0,0 +1,61 @@ +import React from 'react'; + +import { Body, H2 } from '../Typography'; + +export interface FooterSectionProps { + title: React.ReactNode; + description: React.ReactNode; + primaryButton?: { + text: string; + url: string; + iconLeft?: React.ReactNode; + iconRight?: React.ReactNode; + target?: HTMLAnchorElement['target']; + }; + secondaryButton?: { + text: string; + url: string; + iconLeft?: React.ReactNode; + iconRight?: React.ReactNode; + target?: HTMLAnchorElement['target']; + }; +} + +export const FooterSection: React.FC = ({ title, description, primaryButton, secondaryButton }) => { + return ( +
+ {/* Text Content */} +
+

{title}

+ {description} +
+ + {/* Buttons */} + {(primaryButton || secondaryButton) && ( + + )} +
+ ); +}; diff --git a/apps/docs/src/components/GuidesSection/index.tsx b/apps/docs/src/components/GuidesSection/index.tsx new file mode 100644 index 00000000..fcd9a48e --- /dev/null +++ b/apps/docs/src/components/GuidesSection/index.tsx @@ -0,0 +1,93 @@ +import clsx from 'clsx'; +import React, { type ReactNode } from 'react'; + +import HistoryIcon from '../../assets/icons/History.svg'; +import Badge from '../Badge'; +import { Body, BodyBold, BodySmall, H2, H3 } from '../Typography'; + +export interface Guide { + title: string; + description?: string; + icon?: React.ReactNode; + badge?: string; +} + +export interface GuideInfo { + title: string; + description?: React.ReactNode; + link?: { + text: string; + url: string; + iconLeft?: ReactNode; + iconRight?: ReactNode; + target?: HTMLAnchorElement['target']; + }; + subtitle?: string; +} + +export interface GuidesSectionProps { + title: React.ReactNode; + guides: Guide[]; + info: GuideInfo; +} + +export const GuidesSection: React.FC = ({ title, guides, info }) => { + return ( +
+

{title}

+ +
+
    + {guides.map((guide, index) => ( +
  • +
    +
    +
    {guide.icon}
    + +
    + {guide.title} + {guide.description} +
    + +
    + +
    +
    +
    +
    • + ))} +
+ +
+
+
+
+

{info.title}

+ {info.description && {info.description}} + + {info.link && ( + + {info.link.iconLeft} + {info.link.text} + {info.link.iconRight} + + )} +
+
+
+ + {info.subtitle && ( +
+ + {info.subtitle} +
+ )} +
+
+
+ ); +}; diff --git a/apps/docs/src/components/HeroBannerSection/index.tsx b/apps/docs/src/components/HeroBannerSection/index.tsx index 12779911..fb34d87d 100644 --- a/apps/docs/src/components/HeroBannerSection/index.tsx +++ b/apps/docs/src/components/HeroBannerSection/index.tsx @@ -1,26 +1,38 @@ +import clsx from 'clsx'; import React, { type ReactNode, useState } from 'react'; import CircleCheckIcon from '@site/src/assets/icons/circle-check.svg'; import CopyIcon from '@site/src/assets/icons/copy.svg'; -import GithubActiveIcon from '@site/src/assets/icons/github-active.svg'; -import GithubIcon from '@site/src/assets/icons/github.svg'; import TerminalIcon from '@site/src/assets/icons/terminal.svg'; import { Body, H1 } from '../Typography'; interface HeroBannerSectionProps { - heading: ReactNode; + heading?: ReactNode; description: ReactNode | string[]; - cliCommand: string; - mainLink: { + cliCommand?: string; + mainLink?: { text: string; url: string; + iconLeft?: ReactNode; + iconRight?: ReactNode; + target?: HTMLAnchorElement['target']; }; - secondaryLink: { + secondaryLink?: { text: string; url: string; + iconLeft?: ReactNode; + iconRight?: ReactNode; + target?: HTMLAnchorElement['target']; }; - heroImage: { + tertiaryLink?: { + text: string; + url: string; + iconLeft?: ReactNode; + iconRight?: ReactNode; + target?: HTMLAnchorElement['target']; + }; + heroImage?: { url: string; alt: string; }; @@ -33,6 +45,7 @@ export function HeroBannerSection({ cliCommand, mainLink, secondaryLink, + tertiaryLink, heroImage, isDXPage = false, }: HeroBannerSectionProps) { @@ -46,9 +59,9 @@ export function HeroBannerSection({ return (
-
-
-

{heading}

+
+
+ {heading &&

{heading}

} {Array.isArray(description) ? (
); diff --git a/apps/docs/src/components/Typography/index.tsx b/apps/docs/src/components/Typography/index.tsx index 292a3e60..357a1d8d 100644 --- a/apps/docs/src/components/Typography/index.tsx +++ b/apps/docs/src/components/Typography/index.tsx @@ -26,6 +26,14 @@ export function Body({ children, className }: TypographyProps) { return

{children}

; } +export function BodyBold({ children, className }: TypographyProps) { + return

{children}

; +} + +export function BodySmall({ children, className }: TypographyProps) { + return

{children}

; +} + export function InputCaption({ children, className }: TypographyProps) { return {children}; } diff --git a/apps/docs/src/css/custom.css b/apps/docs/src/css/custom.css index 98687cdc..f1312136 100644 --- a/apps/docs/src/css/custom.css +++ b/apps/docs/src/css/custom.css @@ -21,6 +21,9 @@ --color-white: #ffffff; --color-violet: #4c5ce5; --color-celadon: #21d99a; + + --color-secodnary: #c6cfff; + --color-dark-text: #001360; } /* Zmienne Infima – nadpisanie domyślnych wartości. @@ -106,6 +109,11 @@ /*--search-local-modal-background: #fff;*/ } +html, +body { + scroll-behavior: smooth; +} + /* Globalne style */ body { color: var(--ifm-font-color-base) !important; @@ -1088,6 +1096,11 @@ footer a { position: absolute; } +.button-special { + color: var(--color-dark-text); + background: var(--color-white); +} + .card-gradient-border { position: relative; border-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' fill='none'%3e%3cpath stroke='url(%23a)' d='M6 .5h148a5.5 5.5 0 0 1 5.5 5.5v28a5.5 5.5 0 0 1-5.5 5.5H6A5.5 5.5 0 0 1 .5 34V6A5.5 5.5 0 0 1 6 .5Z'/%3e%3cdefs%3e%3clinearGradient id='a' x1='9.57' x2='152.54' y1='-2.661' y2='57.676' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%234C5CE5'/%3e%3cstop offset='.346' stop-color='%232563EB'/%3e%3cstop offset='1' stop-color='%2334D399'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e") @@ -1103,6 +1116,8 @@ footer a { position: relative; background-clip: padding-box; padding: 1px; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 0.375rem; } /* Card with solid border color */ @@ -1110,8 +1125,6 @@ footer a { position: relative; background-clip: padding-box; border: 1px solid; - background-color: rgba(255, 255, 255, 0.1); - border-radius: 0.375rem; } /* Specific border color classes */ @@ -1123,6 +1136,10 @@ footer a { border-color: #21d99a; } +.card-border-light { + border-color: var(--color-secodnary); +} + /* Base background for all feature cards */ .card-base-bg { background-color: rgba(255, 255, 255, 0.1); @@ -1143,6 +1160,15 @@ footer a { border-radius: 0.5rem; } +.card-light-bg { + color: var(--color-dark-text); + background-color: var(--color-white); + + .text-highlighted { + color: var(--color-violet); + } +} + .card-benefits-bg-gradient { background-color: #2c2f44; border-radius: 0.5rem; @@ -1221,3 +1247,7 @@ footer a { min-width: 100% !important; } } + +label { + cursor: pointer; +} diff --git a/apps/docs/src/pages/contact.module.css b/apps/docs/src/pages/contact/contact.module.scss similarity index 79% rename from apps/docs/src/pages/contact.module.css rename to apps/docs/src/pages/contact/contact.module.scss index 23e26e7c..898780c1 100644 --- a/apps/docs/src/pages/contact.module.css +++ b/apps/docs/src/pages/contact/contact.module.scss @@ -1,3 +1,5 @@ +@use '../main.module'; + /* -------------------------- Contact Page -------------------------- */ @@ -18,8 +20,8 @@ .contactFormH2 { color: var(--inverted-foreground-color); font-size: 1.5rem; - margin-bottom: 0; - font-weight: bold; + margin-bottom: 0.25rem; + font-weight: 600; } .text-highlighted { @@ -45,13 +47,13 @@ color: #d61830; } .error:before { - background: url('../../src/assets/icons/circle-alert.svg') no-repeat; + background: url('../../../src/assets/icons/circle-alert.svg') no-repeat; } .success { color: var(--inverted-foreground-color); } .success:before { - background: url('../../src/assets/icons/circle-check.svg') no-repeat; + background: url('../../../src/assets/icons/circle-check.svg') no-repeat; } body:not(.navigation-with-keyboard) *:not(input):focus { outline-width: 2px; diff --git a/apps/docs/src/pages/contact.tsx b/apps/docs/src/pages/contact/index.tsx similarity index 97% rename from apps/docs/src/pages/contact.tsx rename to apps/docs/src/pages/contact/index.tsx index f186039a..36602773 100644 --- a/apps/docs/src/pages/contact.tsx +++ b/apps/docs/src/pages/contact/index.tsx @@ -5,7 +5,7 @@ import { Body } from '@site/src/components/Typography'; import Layout from '@theme/Layout'; -import styles from './contact.module.css'; +import styles from './contact.module.scss'; const Contact = ({ inputId }) => { const [email, setEmail] = useState(''); @@ -147,7 +147,7 @@ const Contact = ({ inputId }) => {

- + + Ready to + get started? + + } + description="Build your next digital experience platform with our composable frontend starter kit." + primaryButton={{ + text: 'See DXP demo app', + url: 'https://demo-dxp.openselfservice.com', + target: '_blank', + }} + secondaryButton={{ + text: 'See on GitHub', + url: '"https://github.com/o2sdev/dxp-starter-kit"', + iconLeft: , + target: 'blank', + }} + />
diff --git a/apps/docs/src/pages/index.tsx b/apps/docs/src/pages/index.tsx index 2220129c..2d30a22f 100644 --- a/apps/docs/src/pages/index.tsx +++ b/apps/docs/src/pages/index.tsx @@ -6,12 +6,11 @@ import { HeroBannerSection } from '@site/src/components/HeroBannerSection'; import { HomepageAboutSection } from '@site/src/components/HomepageAboutSection'; import { HomepageArchitectureSection } from '@site/src/components/HomepageArchitectureSection'; import { HomepageBenefitsSection } from '@site/src/components/HomepageBenefitsSection'; -import HomepageJoinTheWaitlistSection from '@site/src/components/HomepageJoinTheWaitlistSection'; import { HomepageUseCases } from '@site/src/components/HomepageUseCases'; import Layout from '@theme/Layout'; -import styles from './index.module.css'; +import styles from './main.module.scss'; export default function Home(): ReactNode { const { siteConfig } = useDocusaurusContext(); diff --git a/apps/docs/src/pages/index.module.css b/apps/docs/src/pages/main.module.scss similarity index 100% rename from apps/docs/src/pages/index.module.css rename to apps/docs/src/pages/main.module.scss diff --git a/apps/docs/src/pages/markdown-page.md b/apps/docs/src/pages/markdown-page.md deleted file mode 100644 index 9756c5b6..00000000 --- a/apps/docs/src/pages/markdown-page.md +++ /dev/null @@ -1,7 +0,0 @@ ---- -title: Markdown page example ---- - -# Markdown page example - -You don't need React to write simple standalone pages. diff --git a/apps/docs/src/pages/partnership/index.tsx b/apps/docs/src/pages/partnership/index.tsx new file mode 100644 index 00000000..8d322517 --- /dev/null +++ b/apps/docs/src/pages/partnership/index.tsx @@ -0,0 +1,173 @@ +import React, { ReactNode } from 'react'; + +import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; + +import SquareArrowOutUpRight from '@site/src/assets/icons/SquareArrowOutUpRight.svg'; +import Icon_call from '@site/src/assets/icons/icon call.svg'; +import Icon_handshake from '@site/src/assets/icons/icon handshake.svg'; +import Icon_text from '@site/src/assets/icons/icon text.svg'; +import Icon_add_logo from '@site/src/assets/icons/o2s-icon-add_logo.svg'; +import Icon_badge from '@site/src/assets/icons/o2s-icon-badge.svg'; +import Icon_contact from '@site/src/assets/icons/o2s-icon-contact.svg'; +import Icon_loop from '@site/src/assets/icons/o2s-icon-loop.svg'; +import Icon_roadmap from '@site/src/assets/icons/o2s-icon-roadmap.svg'; +import Icon_support from '@site/src/assets/icons/o2s-icon-support.svg'; +import { BenefitCardProps, BenefitsSection } from '@site/src/components/BenefitsSection'; +import { HeroBannerSection } from '@site/src/components/HeroBannerSection'; + +import Layout from '@theme/Layout'; + +import { FooterSection } from '../../components/FooterSection'; +import { Guide, GuidesSection } from '../../components/GuidesSection'; + +import styles from './partnership.module.scss'; + +const whyJoin: Array = [ + { + icon: , + iconPosition: 'left', + title: 'Dedicated technical support & onboarding', + borderColor: 'light', + }, + { + icon: , + iconPosition: 'left', + title: 'Direct contact with our core team', + borderColor: 'light', + }, + { + icon: , + iconPosition: 'left', + title: 'Roadmap feedback loop', + borderColor: 'light', + }, + { + icon: , + iconPosition: 'left', + title: 'Access to early features and roadmap', + borderColor: 'light', + }, + { + icon: , + iconPosition: 'left', + title: 'Implementation Partner badge', + borderColor: 'light', + }, + { + icon: , + iconPosition: 'left', + title: 'Your logo on our website', + borderColor: 'light', + }, +]; + +const guides: Array = [ + { + title: 'Submit your application', + description: 'Tell us about your experience and goals', + icon: , + badge: '2 min', + }, + { + title: 'Short intro call to align on goals', + description: "We'll discuss how we can work together", + icon: , + badge: '20 min', + }, + { + title: 'Get listed & start collaborating', + description: 'Join our partner network and grow together', + icon: , + badge: '24h', + }, +]; + +export default function Partnership(): ReactNode { + const { siteConfig } = useDocusaurusContext(); + + return ( +
+ +
+
+
+
+
+
+ + Build with us. Become an O2S + Implementation Partner + + } + description="Are you working on headless or composable customer support portals, large-scale digital platforms or any composable frontends? Join our network of agencies and integrators building modern digital experiences." + mainLink={{ + text: 'Apply to become a partner', + url: '#how-to-join', + iconRight: , + }} + /> + +
+ + Why join the O2S Partner + Program? + + } + benefits={whyJoin} + /> +
+ +
+ + How it works + + } + guides={guides} + info={{ + title: 'Ready to join?', + description: ( + <> + We’re looking for{' '} + + early partners + {' '} + who want to help shape the future of customer self-service + platforms. + + ), + link: { + text: 'Fill out the application form', + url: '/support/enterprise', + iconRight: , + }, + subtitle: 'Application takes 2 minutes to complete', + }} + /> +
+
+
+
+
+
+
+ + Contact us at{' '} + contact@openselfservice.com + + } + /> +
+
+ +
+ ); +} diff --git a/apps/docs/src/pages/partnership/partnership.module.scss b/apps/docs/src/pages/partnership/partnership.module.scss new file mode 100644 index 00000000..2ede801c --- /dev/null +++ b/apps/docs/src/pages/partnership/partnership.module.scss @@ -0,0 +1 @@ +@use '../main.module'; diff --git a/apps/docs/src/pages/support/enterprise.tsx b/apps/docs/src/pages/support/enterprise.tsx new file mode 100644 index 00000000..5f28721a --- /dev/null +++ b/apps/docs/src/pages/support/enterprise.tsx @@ -0,0 +1,313 @@ +import clsx from 'clsx'; +import React, { useState } from 'react'; + +import { Body } from '@site/src/components/Typography'; + +import Layout from '@theme/Layout'; + +import styles from '../contact/contact.module.scss'; + +const SupportEnterprise = ({ inputId }) => { + const [email, setEmail] = useState(''); + const [name, setName] = useState(''); + const [company, setCompany] = useState(''); + const [message, setMessage] = useState(''); + const [emailContactConsent, setEmailContactConsent] = useState(false); + const [newsletterConsent, setNewsletterConsent] = useState(false); + const [status, setStatus] = useState({ type: null, message: '' }); + const [isSubmitting, setIsSubmitting] = useState(false); + + const portalId = '143969481'; + const formId = '0a05bbf7-cb3c-4a69-bbec-9b6801df31a8'; + + const handleSubmit = async (e) => { + e.preventDefault(); + if (!emailContactConsent) { + setStatus({ + type: 'error', + message: 'You must agree to the privacy policy.', + }); + return; + } + setIsSubmitting(true); + + const payload = { + fields: [ + { + name: 'email', + value: email, + }, + { + name: 'name', + value: name, + }, + { + name: 'company', + value: company, + }, + { + name: 'message', + value: message, + }, + { + name: 'email_contact_consent', + value: emailContactConsent, + }, + { + name: 'newsletter_consent', + value: newsletterConsent, + }, + ], + context: { + pageUri: 'https://openselfservice.com/contact', + pageName: 'Contact - Open Self Service', + }, + legalConsentOptions: { + consent: { + consentToProcess: true, + text: 'I consent to the processing of my personal data by Hycom SA as described in the openselfservice_EN_Information_obligation.pdf information clause to respond to inquiries and provide information about products and services.', + communications: [ + { + value: true, + subscriptionTypeId: '296606641', // id extracted from HS form's input id + text: 'I agree to receive communications that respond to inquiries and provide information about products and services.', + }, + ], + }, + }, + }; + + try { + const response = await fetch( + `https://api.hsforms.com/submissions/v3/integration/submit/${portalId}/${formId}`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(payload), + }, + ); + + if (response.ok) { + const data = await response.json(); + setStatus({ + type: 'success', + message: data.inlineMessage, + }); + setEmail(''); + setEmailContactConsent(false); + } else { + const data = await response.json(); + setStatus({ + type: 'error', + message: data.message, + }); + setIsSubmitting(false); + } + } catch (error) { + setStatus({ + type: 'error', + message: 'An unexpected error occurred. Please try again later.', + }); + setIsSubmitting(false); + } + }; + + return ( + +
+
+
+
+
+
+
+
+
+

+ Enterprise +
support +

+

+ Need more confidence for production? Our Enterprise offering is designed for + teams that require reliability, hands-on support, and architectural + flexibility. +

+
+
+ {status.type !== 'success' && ( +
+

+ Let’s talk Enterprise +

+

+ Interested in using Open Self Service in a production environment? + Tell us about your project and we’ll get in touch with tailored + options. +

+ + setName(e.target.value)} + /> + + + setEmail(e.target.value)} + /> + + + setCompany(e.target.value)} + /> + + +