Skip to content

Commit d78a2a0

Browse files
jan-jagodajan-jagoda
committed
docs: more ui fixes
1 parent a91b9b2 commit d78a2a0

File tree

6 files changed

+130
-82
lines changed

6 files changed

+130
-82
lines changed

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import React from 'react';
2+
3+
interface CardProps {
4+
children: React.ReactNode;
5+
borderColor?: 'gradient' | 'blue' | 'green';
6+
className?: string;
7+
gap?: string;
8+
}
9+
10+
const Card: React.FC<CardProps> = ({ children, borderColor = 'blue', className = '', gap = 'gap-[30px]' }) => {
11+
const getBorderClass = () => {
12+
if (borderColor === 'gradient') return 'card-gradient-border';
13+
if (borderColor === 'blue') return 'card-base card-solid-border card-border-blue';
14+
if (borderColor === 'green') return 'card-base card-solid-border card-border-green';
15+
return 'card-base card-solid-border card-border-blue';
16+
};
17+
18+
return (
19+
<div className={`rounded-lg relative flex-1 min-w-0 ${className} ${getBorderClass()}`}>
20+
<div className={`flex flex-col ${gap} items-start p-6 w-full h-full`}>{children}</div>
21+
</div>
22+
);
23+
};
24+
25+
export default Card;

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

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,49 +4,43 @@ import CodeIcon from '@site/src/assets/icons/code.svg';
44
import NetworkIcon from '@site/src/assets/icons/network.svg';
55
import PenToolIcon from '@site/src/assets/icons/pentool.svg';
66

7+
import Card from '../Card';
78
import { Body, H2, H3 } from '../Typography';
89

910
interface BenefitCardProps {
1011
team: string;
1112
icon: React.ReactNode;
1213
title: string;
13-
borderColor?: string;
14+
borderColor?: 'gradient' | 'blue' | 'green';
1415
}
1516

16-
const BenefitCard: React.FC<BenefitCardProps> = ({ team, icon, title, borderColor = '#4c5ce5' }) => {
17+
const BenefitCard: React.FC<BenefitCardProps> = ({ team, icon, title, borderColor = 'blue' }) => {
1718
return (
18-
<div
19-
className={`rounded-lg relative flex-1 min-w-0 ${borderColor === 'gradient' ? 'card-gradient-border' : ''}`}
20-
>
21-
<div
22-
className={`flex flex-col gap-2 items-start justify-start p-6 w-full h-full ${borderColor === 'gradient' ? 'card-benefits-bg-gradient' : 'card-benefits-bg'}`}
23-
>
24-
{/* Header */}
25-
<div className="flex items-start justify-between w-full">
26-
<Body className="flex-1 text-sm text-white font-medium">{team}</Body>
27-
<div className="w-4 h-4 flex-shrink-0">{icon}</div>
28-
</div>
29-
30-
{/* Title */}
31-
<H3 className="text-2xl font-bold leading-8 text-white w-full">{title}</H3>
19+
<Card borderColor={borderColor} gap="gap-2">
20+
{/* Header */}
21+
<div className="flex items-start w-full">
22+
<Body className="flex-1 text-sm text-white font-medium">{team}</Body>
23+
<div className="w-4 h-4 flex-shrink-0">{icon}</div>
3224
</div>
3325

34-
{borderColor !== 'gradient' && (
35-
<div
36-
className="absolute border inset-0 pointer-events-none rounded-lg shadow-sm"
37-
style={{ borderColor }}
38-
/>
39-
)}
40-
</div>
26+
{/* Title */}
27+
<H3 className="text-2xl font-bold leading-8 text-white w-full mt-auto">{title}</H3>
28+
</Card>
4129
);
4230
};
4331

4432
export function DXPBenefitsSection() {
45-
const benefits = [
33+
const benefits: Array<{
34+
team: string;
35+
icon: React.ReactNode;
36+
title: string;
37+
borderColor?: 'gradient' | 'blue' | 'green';
38+
}> = [
4639
{
4740
team: 'Frontend Developers',
4841
icon: <CodeIcon className="w-4 h-4 text-[#21d99a]" />,
4942
title: 'Quick start with zero boilerplate',
43+
borderColor: 'blue',
5044
},
5145
{
5246
team: 'Content Teams',
@@ -58,7 +52,7 @@ export function DXPBenefitsSection() {
5852
team: 'Solution Architects',
5953
icon: <NetworkIcon className="w-4 h-4 text-[#21d99a]" />,
6054
title: 'Flexible, composable stack as a base for future scaling',
61-
borderColor: '#21d99a',
55+
borderColor: 'green',
6256
},
6357
];
6458

@@ -70,7 +64,13 @@ export function DXPBenefitsSection() {
7064

7165
<div className="flex flex-col lg:flex-row gap-8 items-stretch justify-start w-full">
7266
{benefits.map((benefit, index) => (
73-
<BenefitCard key={index} {...benefit} />
67+
<BenefitCard
68+
key={index}
69+
team={benefit.team}
70+
icon={benefit.icon}
71+
title={benefit.title}
72+
borderColor={benefit.borderColor}
73+
/>
7474
))}
7575
</div>
7676
</div>

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

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import CodepenIcon from '@site/src/assets/icons/codepen.svg';
55
import GitcompareIcon from '@site/src/assets/icons/gitcompare.svg';
66
import LightbulbIcon from '@site/src/assets/icons/lightbulb.svg';
77

8+
import Card from '../Card';
89
import { Body, H2, H3 } from '../Typography';
910

1011
interface FeatureCardProps {
@@ -13,7 +14,7 @@ interface FeatureCardProps {
1314
features: string[];
1415
buttonText: string;
1516
buttonUrl: string;
16-
borderColor?: string;
17+
borderColor?: 'gradient' | 'blue' | 'green';
1718
}
1819

1920
const FeatureCard: React.FC<FeatureCardProps> = ({
@@ -22,56 +23,50 @@ const FeatureCard: React.FC<FeatureCardProps> = ({
2223
features,
2324
buttonText,
2425
buttonUrl,
25-
borderColor = '#4c5ce5',
26+
borderColor = 'blue',
2627
}) => {
2728
return (
28-
<div
29-
className={`rounded-lg relative flex-1 min-w-0 ${borderColor === 'gradient' ? 'card-gradient-border' : ''}`}
30-
>
31-
<div
32-
className={`flex flex-col gap-[30px] items-start justify-between p-6 w-full h-full ${borderColor === 'gradient' ? 'card-gradient-bg' : 'card-features-bg'}`}
33-
>
34-
{/* Header */}
35-
<div className="flex items-start justify-between w-full">
36-
<div className="flex flex-col items-start justify-start self-stretch w-full">
37-
<H3 className="text-2xl font-semibold leading-[1.5] text-white w-full">{title}</H3>
38-
</div>
39-
<div className="h-[26.533px] w-11 flex-shrink-0 relative">{icon}</div>
29+
<Card borderColor={borderColor}>
30+
{/* Header */}
31+
<div className="flex items-start justify-between w-full">
32+
<div className="flex flex-col items-start justify-start self-stretch w-full">
33+
<H3 className="text-2xl font-semibold leading-[1.5] text-white w-full">{title}</H3>
4034
</div>
35+
<div className="h-[26.533px] w-11 flex-shrink-0 relative">{icon}</div>
36+
</div>
4137

42-
{/* Features List */}
43-
<div className="flex flex-col items-start justify-start w-full flex-1">
44-
{features.map((feature, index) => (
45-
<div key={index} className="flex flex-col items-start justify-start w-full relative">
46-
<div className="absolute border-b border-zinc-400 inset-0 pointer-events-none" />
47-
<div className="flex items-center justify-between px-0 py-4 w-full">
48-
<div className="flex-1 font-bold leading-6 text-base text-white">{feature}</div>
49-
<div className="relative w-4 h-4 flex-shrink-0">
50-
{/* <LightbulbIcon className="w-4 h-4 text-[#21d99a]" /> */}
51-
</div>
38+
{/* Features List */}
39+
<div className="flex flex-col items-start justify-start w-full flex-1">
40+
{features.map((feature, index) => (
41+
<div key={index} className="flex flex-col items-start justify-start w-full relative">
42+
<div className="absolute border-b border-zinc-400 inset-0 pointer-events-none" />
43+
<div className="flex items-center justify-between px-0 py-4 w-full">
44+
<div className="flex-1 font-bold leading-6 text-base text-white">{feature}</div>
45+
<div className="relative w-4 h-4 flex-shrink-0">
46+
{/* <LightbulbIcon className="w-4 h-4 text-[#21d99a]" /> */}
5247
</div>
5348
</div>
54-
))}
55-
</div>
56-
57-
{/* Button */}
58-
<a href={buttonUrl} className="button">
59-
{buttonText}
60-
</a>
49+
</div>
50+
))}
6151
</div>
6252

63-
{borderColor !== 'gradient' && (
64-
<div
65-
className="absolute border inset-0 pointer-events-none rounded-lg shadow-sm"
66-
style={{ borderColor }}
67-
/>
68-
)}
69-
</div>
53+
{/* Button */}
54+
<a href={buttonUrl} className="button">
55+
{buttonText}
56+
</a>
57+
</Card>
7058
);
7159
};
7260

7361
export function DXPFeaturesSection() {
74-
const features = [
62+
const features: Array<{
63+
title: string;
64+
icon: React.ReactNode;
65+
features: string[];
66+
buttonText: string;
67+
buttonUrl: string;
68+
borderColor?: 'gradient' | 'blue' | 'green';
69+
}> = [
7570
{
7671
title: 'Modern Frontend Foundation',
7772
icon: (
@@ -105,7 +100,7 @@ export function DXPFeaturesSection() {
105100
features: ['Headless CMS integration', 'Powerful content management', 'Multilingual support'],
106101
buttonText: 'Learn more',
107102
buttonUrl: '/docs/integrations/cms/strapi/overview',
108-
borderColor: '#21d99a',
103+
borderColor: 'green',
109104
},
110105
];
111106

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

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1090,25 +1090,52 @@ footer a {
10901090

10911091
.card-gradient-border {
10921092
position: relative;
1093+
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")
1094+
8 / 8px stretch;
1095+
background-clip: padding-box;
1096+
padding: 1px;
1097+
background-color: rgba(255, 255, 255, 0.1);
1098+
border-radius: 0.375rem;
10931099
}
10941100

1095-
.card-gradient-border::before {
1096-
content: '';
1097-
position: absolute;
1098-
top: -1px;
1099-
left: -1px;
1100-
right: -1px;
1101-
bottom: -1px;
1102-
z-index: 1;
1103-
border-radius: 0.5rem;
1104-
background-image: linear-gradient(96deg, #4c5ce5 4.78%, #2563eb 37.76%, #34d399 100%);
1101+
/* Base card class for all feature cards */
1102+
.card-base {
1103+
position: relative;
1104+
background-clip: padding-box;
1105+
padding: 1px;
1106+
}
1107+
1108+
/* Card with solid border color */
1109+
.card-solid-border {
1110+
position: relative;
1111+
background-clip: padding-box;
1112+
border: 1px solid;
1113+
background-color: rgba(255, 255, 255, 0.1);
1114+
border-radius: 0.375rem;
1115+
}
1116+
1117+
/* Specific border color classes */
1118+
.card-border-blue {
1119+
border-color: #4c5ce5;
1120+
}
1121+
1122+
.card-border-green {
1123+
border-color: #21d99a;
1124+
}
1125+
1126+
/* Base background for all feature cards */
1127+
.card-base-bg {
1128+
background-color: rgba(255, 255, 255, 0.1);
1129+
z-index: 2;
1130+
position: relative;
1131+
border-radius: 0.375rem;
11051132
}
11061133

11071134
.card-gradient-bg {
1108-
background-color: #203074;
1135+
background-color: rgba(255, 255, 255, 0.1);
11091136
z-index: 2;
11101137
position: relative;
1111-
border-radius: 0.5rem;
1138+
border-radius: 0.375rem;
11121139
}
11131140

11141141
.card-benefits-bg {
@@ -1179,6 +1206,9 @@ footer a {
11791206
border-image: linear-gradient(45deg, #2563eb, #21d99a) 1;
11801207
background: var(--page--background-color);
11811208
}
1209+
.section-gradient {
1210+
background: linear-gradient(153deg, #001a85 0%, #16182b 65.1%);
1211+
}
11821212

11831213
.dxp-page .button-copy {
11841214
max-width: 394px !important;

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -81,11 +81,9 @@ export default function DXPStarter(): ReactNode {
8181
</div>
8282
</div>
8383
</div>
84-
<div className="section-border pr-4 pl-4 mb-0! pb-10">
84+
<div className="section-gradient px-4 py-40 mb-0!">
8585
<section className="mb-0!">
86-
<div className="mt-20! mb-20!">
87-
<DXPFooterSection />
88-
</div>
86+
<DXPFooterSection />
8987
</section>
9088
</div>
9189
</div>

‎apps/docs/static/img/logos/SurveyJS-logo.svg‎ renamed to ‎apps/docs/static/img/logos/surveyjs-logo.svg‎

File renamed without changes.

0 commit comments

Comments
 (0)