Compare commits
No commits in common. "519be23ea6130c1113c93be6a3a7be6407254994" and "d15d761f1ab5ab6f8168d3b2f3fa93accae9dc5c" have entirely different histories.
519be23ea6
...
d15d761f1a
88
package-lock.json
generated
88
package-lock.json
generated
@ -34,7 +34,6 @@
|
|||||||
"eslint-plugin-react": "^7.37.2",
|
"eslint-plugin-react": "^7.37.2",
|
||||||
"globals": "^15.11.0",
|
"globals": "^15.11.0",
|
||||||
"prettier": "3.3.3",
|
"prettier": "3.3.3",
|
||||||
"ts-json-as-const": "^1.0.7",
|
|
||||||
"typescript-eslint": "^8.12.2"
|
"typescript-eslint": "^8.12.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -2864,13 +2863,6 @@
|
|||||||
"react": ">=18"
|
"react": ">=18"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@dfoverdx/tocamelcase": {
|
|
||||||
"version": "1.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@dfoverdx/tocamelcase/-/tocamelcase-1.0.7.tgz",
|
|
||||||
"integrity": "sha512-QDlMJqwcE4eVCvxxQXp8nh7Nw9m5VQHPCAiyTD+W86Tl89VGhVJRb//RJRZKpn5A/Bq3EQNYDYlepurQ805MOQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC"
|
|
||||||
},
|
|
||||||
"node_modules/@emotion/babel-plugin": {
|
"node_modules/@emotion/babel-plugin": {
|
||||||
"version": "11.12.0",
|
"version": "11.12.0",
|
||||||
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
|
"resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz",
|
||||||
@ -6785,13 +6777,6 @@
|
|||||||
"node": ">=6"
|
"node": ">=6"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/get-own-enumerable-property-symbols": {
|
|
||||||
"version": "3.0.2",
|
|
||||||
"resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
|
|
||||||
"integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC"
|
|
||||||
},
|
|
||||||
"node_modules/get-symbol-description": {
|
"node_modules/get-symbol-description": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.2.tgz",
|
||||||
@ -7588,19 +7573,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/is-obj": {
|
|
||||||
"version": "3.0.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-3.0.0.tgz",
|
|
||||||
"integrity": "sha512-IlsXEHOjtKhpN8r/tRFj2nDyTmHvcfNeu/nrRIcXE17ROeatXchkojffa1SpdqW4cr/Fj6QkEf/Gn4zf6KKvEQ==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/is-path-cwd": {
|
"node_modules/is-path-cwd": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
|
||||||
@ -7663,19 +7635,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/is-regexp": {
|
|
||||||
"version": "3.1.0",
|
|
||||||
"resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-3.1.0.tgz",
|
|
||||||
"integrity": "sha512-rbku49cWloU5bSMI+zaRaXdQHXnthP6DZ/vLnfdSKyL4zUzuWnomtOEiZZOd+ioQ+avFo/qau3KPTc7Fjy1uPA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">=12"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/sindresorhus"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/is-root": {
|
"node_modules/is-root": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
|
||||||
@ -7824,19 +7783,6 @@
|
|||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT"
|
"license": "MIT"
|
||||||
},
|
},
|
||||||
"node_modules/isbinaryfile": {
|
|
||||||
"version": "4.0.10",
|
|
||||||
"resolved": "https://registry.npmjs.org/isbinaryfile/-/isbinaryfile-4.0.10.tgz",
|
|
||||||
"integrity": "sha512-iHrqe5shvBUcFbmZq9zOQHBoeOhZJu6RQGrDpBgenUm/Am+F3JM2MgQj+rK3Z601fzrL5gLZWtAPH2OBaSVcyw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"engines": {
|
|
||||||
"node": ">= 8.0.0"
|
|
||||||
},
|
|
||||||
"funding": {
|
|
||||||
"url": "https://github.com/sponsors/gjtorikian/"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/isexe": {
|
"node_modules/isexe": {
|
||||||
"version": "2.0.0",
|
"version": "2.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
|
||||||
@ -10177,21 +10123,6 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/stringify-object": {
|
|
||||||
"version": "4.0.1",
|
|
||||||
"resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-4.0.1.tgz",
|
|
||||||
"integrity": "sha512-qpV1FBpN0R1gDAhCHIU71SYGZb35Te+gOQbQ6lYRmVJT7pF1NB8mkHeEJvyYNiHXw+fB4KIbeIjQl1rgiIijiA==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "BSD-2-Clause",
|
|
||||||
"dependencies": {
|
|
||||||
"get-own-enumerable-property-symbols": "^3.0.2",
|
|
||||||
"is-obj": "^3.0.0",
|
|
||||||
"is-regexp": "^3.0.0"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/strip-ansi": {
|
"node_modules/strip-ansi": {
|
||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
|
||||||
@ -10482,25 +10413,6 @@
|
|||||||
"typescript": ">=4.2.0"
|
"typescript": ">=4.2.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/ts-json-as-const": {
|
|
||||||
"version": "1.0.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/ts-json-as-const/-/ts-json-as-const-1.0.7.tgz",
|
|
||||||
"integrity": "sha512-UMM24g4uBevqBuEqeMUNm2yBEd6VrpJt2hhGWSpmr3nGuhQYwYcLpmxUjsAh5qxJbafF+ICrHvOvHn16zh9Ojg==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "ISC",
|
|
||||||
"dependencies": {
|
|
||||||
"@dfoverdx/tocamelcase": "^1.0.7",
|
|
||||||
"isbinaryfile": "^4.0.8",
|
|
||||||
"json5": "^2.2.0",
|
|
||||||
"stringify-object": "^4.0.0"
|
|
||||||
},
|
|
||||||
"bin": {
|
|
||||||
"ts-json-as-const": "index.js"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
|
||||||
"typescript": ">=3"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/tslib": {
|
"node_modules/tslib": {
|
||||||
"version": "2.8.0",
|
"version": "2.8.0",
|
||||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
|
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
|
||||||
|
@ -42,7 +42,6 @@
|
|||||||
"eslint-plugin-react": "^7.37.2",
|
"eslint-plugin-react": "^7.37.2",
|
||||||
"globals": "^15.11.0",
|
"globals": "^15.11.0",
|
||||||
"prettier": "3.3.3",
|
"prettier": "3.3.3",
|
||||||
"ts-json-as-const": "^1.0.7",
|
|
||||||
"typescript-eslint": "^8.12.2"
|
"typescript-eslint": "^8.12.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,27 +1,50 @@
|
|||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import {
|
||||||
|
MdEco,
|
||||||
|
MdMiscellaneousServices,
|
||||||
|
MdPlace,
|
||||||
|
MdHandshake,
|
||||||
|
} from 'react-icons/md';
|
||||||
import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
|
import { Heading, HStack, List, Text, VStack } from '@chakra-ui/react';
|
||||||
import { CtaButton, PageSection } from '../';
|
import { CtaButton, PageSection } from '../';
|
||||||
import { ListItem } from './ListItem';
|
import { ListItem } from './ListItem';
|
||||||
import { BenefitsSectionProps } from './types';
|
|
||||||
import { iconsMap } from './helper';
|
|
||||||
|
|
||||||
export const BenefitsSection: FC<BenefitsSectionProps> = ({
|
export const BenefitsSection: FC = () => {
|
||||||
data: { heading, description, list },
|
const { t } = useTranslation('~', {
|
||||||
}) => {
|
keyPrefix: 'dry-wash.landing.benefits-section',
|
||||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
});
|
||||||
|
|
||||||
|
const listData = [
|
||||||
|
{
|
||||||
|
Icon: MdEco,
|
||||||
|
children: t('list.0'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Icon: MdMiscellaneousServices,
|
||||||
|
children: t('list.1'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Icon: MdPlace,
|
||||||
|
children: t('list.2'),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
Icon: MdHandshake,
|
||||||
|
children: t('list.3'),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageSection>
|
<PageSection>
|
||||||
<VStack w='full' spacing={2}>
|
<VStack w='full' spacing={2}>
|
||||||
<Heading as='h2'>{t(heading)}</Heading>
|
<Heading as='h2'>{t('heading')}</Heading>
|
||||||
<Text>{t(description)}</Text>
|
<Text>
|
||||||
|
{t('description')}
|
||||||
|
</Text>
|
||||||
</VStack>
|
</VStack>
|
||||||
<List display='flex' flexDirection='column' spacing={3}>
|
<List display='flex' flexDirection='column' spacing={3}>
|
||||||
{list.map((itemKey, i) => (
|
{listData.map((props, i) => (
|
||||||
<ListItem key={i} Icon={iconsMap[itemKey]}>
|
<ListItem key={i} {...props} />
|
||||||
{t(itemKey)}
|
|
||||||
</ListItem>
|
|
||||||
))}
|
))}
|
||||||
</List>
|
</List>
|
||||||
<HStack w='full' justify='flex-end'>
|
<HStack w='full' justify='flex-end'>
|
||||||
|
@ -1,11 +0,0 @@
|
|||||||
import { IconType } from "react-icons";
|
|
||||||
import { MdEco, MdMiscellaneousServices, MdPlace, MdHandshake } from "react-icons/md";
|
|
||||||
import { ArrElement } from "../../../lib";
|
|
||||||
import { BenefitsList } from "./types";
|
|
||||||
|
|
||||||
export const iconsMap: Record<ArrElement<BenefitsList>, IconType> = {
|
|
||||||
"benefits-section.list.0": MdEco,
|
|
||||||
"benefits-section.list.1": MdMiscellaneousServices,
|
|
||||||
"benefits-section.list.2": MdPlace,
|
|
||||||
"benefits-section.list.3": MdHandshake,
|
|
||||||
};
|
|
@ -1,2 +1 @@
|
|||||||
export type { BenefitsSectionProps } from './types';
|
|
||||||
export { BenefitsSection } from './BenefitsSection';
|
export { BenefitsSection } from './BenefitsSection';
|
@ -1,14 +0,0 @@
|
|||||||
export type BenefitsList = [
|
|
||||||
'benefits-section.list.0',
|
|
||||||
'benefits-section.list.1',
|
|
||||||
'benefits-section.list.2',
|
|
||||||
'benefits-section.list.3',
|
|
||||||
];
|
|
||||||
|
|
||||||
export type BenefitsSectionProps = {
|
|
||||||
data: {
|
|
||||||
heading: 'benefits-section.heading';
|
|
||||||
description: 'benefits-section.description';
|
|
||||||
list: BenefitsList;
|
|
||||||
};
|
|
||||||
};
|
|
@ -5,7 +5,7 @@ import { ButtonProps, Button } from '@chakra-ui/react';
|
|||||||
import { URLs } from '../../../__data__/urls';
|
import { URLs } from '../../../__data__/urls';
|
||||||
|
|
||||||
export const CtaButton: FC<ButtonProps> = (props) => {
|
export const CtaButton: FC<ButtonProps> = (props) => {
|
||||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Button
|
||||||
@ -14,7 +14,7 @@ export const CtaButton: FC<ButtonProps> = (props) => {
|
|||||||
colorScheme='primary'
|
colorScheme='primary'
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{t('make-order-button')}
|
{t('dry-wash.landing.make-order-button')}
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,21 +1,21 @@
|
|||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { Box, Heading, Text, Center, VStack } from '@chakra-ui/react';
|
import { Box, Heading, Text, Center, VStack, BoxProps } from '@chakra-ui/react';
|
||||||
import { DemoVideoPosterImg } from '../../../assets/images';
|
import { DemoVideoPosterImg } from '../../../assets/images';
|
||||||
import { CtaButton, SiteLogo, PageSection } from '../';
|
import { CtaButton, SiteLogo, PageSection } from '../';
|
||||||
import { HeroSectionProps } from './types';
|
|
||||||
|
|
||||||
export const HeroSection: FC<HeroSectionProps> = ({
|
type HeroSectionProps = Pick<BoxProps, 'flexShrink'>;
|
||||||
data: { headline, description, video },
|
|
||||||
flexShrink,
|
export const HeroSection: FC<HeroSectionProps> = ({ flexShrink }) => {
|
||||||
}) => {
|
const { t } = useTranslation('~', {
|
||||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
keyPrefix: 'dry-wash.landing.hero-section',
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
|
<Box flexShrink={flexShrink} as='header' pos='relative' zIndex={0}>
|
||||||
<Box
|
<Box
|
||||||
as='video'
|
as='video'
|
||||||
src={`${__webpack_public_path__}/remote-assets/${video}`}
|
src={`${__webpack_public_path__}/remote-assets/demo.mp4`}
|
||||||
poster={DemoVideoPosterImg}
|
poster={DemoVideoPosterImg}
|
||||||
autoPlay
|
autoPlay
|
||||||
loop
|
loop
|
||||||
@ -46,14 +46,14 @@ export const HeroSection: FC<HeroSectionProps> = ({
|
|||||||
color='white'
|
color='white'
|
||||||
__css={{ textWrap: 'balance' }}
|
__css={{ textWrap: 'balance' }}
|
||||||
>
|
>
|
||||||
{t(headline)}
|
{t('headline')}
|
||||||
</Heading>
|
</Heading>
|
||||||
<Text
|
<Text
|
||||||
textAlign='center'
|
textAlign='center'
|
||||||
__css={{ textWrap: 'balance' }}
|
__css={{ textWrap: 'balance' }}
|
||||||
color='white'
|
color='white'
|
||||||
>
|
>
|
||||||
{t(description)}
|
{t('description')}
|
||||||
</Text>
|
</Text>
|
||||||
</VStack>
|
</VStack>
|
||||||
<CtaButton size='lg' />
|
<CtaButton size='lg' />
|
||||||
|
@ -1,9 +0,0 @@
|
|||||||
import { BoxProps } from "@chakra-ui/react";
|
|
||||||
|
|
||||||
export type HeroSectionProps = {
|
|
||||||
data: {
|
|
||||||
headline: 'hero-section.headline';
|
|
||||||
description: 'hero-section.description';
|
|
||||||
video: string;
|
|
||||||
};
|
|
||||||
} & Pick<BoxProps, 'flexShrink'>;
|
|
@ -3,16 +3,15 @@ import { useTranslation } from 'react-i18next';
|
|||||||
import { Heading, HStack } from '@chakra-ui/react';
|
import { Heading, HStack } from '@chakra-ui/react';
|
||||||
import { CtaButton, PageSection } from '../';
|
import { CtaButton, PageSection } from '../';
|
||||||
import { ReviewsSlider } from './ReviewsSlider';
|
import { ReviewsSlider } from './ReviewsSlider';
|
||||||
import { SocialProofSectionProps } from './types';
|
|
||||||
|
|
||||||
export const SocialProofSection: FC<SocialProofSectionProps> = ({
|
export const SocialProofSection: FC = () => {
|
||||||
data: { heading },
|
const { t } = useTranslation('~', {
|
||||||
}) => {
|
keyPrefix: 'dry-wash.landing.social-proof-section',
|
||||||
const { t } = useTranslation('~', { keyPrefix: 'dry-wash.landing' });
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageSection>
|
<PageSection>
|
||||||
<Heading as='h2'>{t(heading)}</Heading>
|
<Heading as='h2'>{t('heading')}</Heading>
|
||||||
<ReviewsSlider />
|
<ReviewsSlider />
|
||||||
<HStack w='full' justify='flex-end'>
|
<HStack w='full' justify='flex-end'>
|
||||||
<CtaButton />
|
<CtaButton />
|
||||||
|
@ -1,2 +1 @@
|
|||||||
export type { SocialProofSectionProps } from './types';
|
|
||||||
export { SocialProofSection } from './SocialProofSection';
|
export { SocialProofSection } from './SocialProofSection';
|
@ -1,5 +0,0 @@
|
|||||||
export type SocialProofSectionProps = {
|
|
||||||
data: {
|
|
||||||
heading: 'social-proof-section.heading';
|
|
||||||
};
|
|
||||||
};
|
|
@ -1 +0,0 @@
|
|||||||
export * from './types';
|
|
@ -1,41 +0,0 @@
|
|||||||
/**
|
|
||||||
* @example type Output = ArrElement<['a', 'b', 'c']>;
|
|
||||||
* // "a" | "b" | "c"
|
|
||||||
*/
|
|
||||||
export type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[]
|
|
||||||
? ElementType
|
|
||||||
: never;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @example type Output = Split<'a.b1' | 'a.b2', '.'>;
|
|
||||||
* // ["a", "b1"] | ["a", "b2"]
|
|
||||||
*/
|
|
||||||
type Split<S extends string, D extends string> =
|
|
||||||
S extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [S];
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @example type Output = NestedObject<["a", "b1"] | ["a", "b2"]>;
|
|
||||||
* // { a: { b1: string; }; } | { a: { b2: string; }; }
|
|
||||||
*/
|
|
||||||
type NestedObject<T extends string[]> =
|
|
||||||
T extends [infer Head, ...infer Tail] ?
|
|
||||||
Head extends string ?
|
|
||||||
{ [key in Head]: NestedObject<Tail extends string[] ? Tail : []> } : never :
|
|
||||||
string;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @example type Output = UnionToIntersection<{ a: { b1: string; }; } | { a: { b2: string; }; }>;
|
|
||||||
* // { a: { b1: string; }; } & { a: { b2: string; }; }
|
|
||||||
*/
|
|
||||||
type UnionToIntersection<U> =
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
(U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @example type Output = CreateTree<'a.b1' | 'a.b2', '.'>;
|
|
||||||
* // { a: { b1: string; }; } & { a: { b2: string; }; }
|
|
||||||
*/
|
|
||||||
export type CreateTree<T> =
|
|
||||||
UnionToIntersection<T extends infer U ?
|
|
||||||
U extends string ?
|
|
||||||
NestedObject<Split<U, '.'>> : never : never>;
|
|
23
src/models/i18next.d.ts
vendored
23
src/models/i18next.d.ts
vendored
@ -1,5 +1,24 @@
|
|||||||
import defaultLocale from '../../locales/ru.json';
|
import defaultLocale from '../../locales/ru.json';
|
||||||
import { CreateTree } from '../lib';
|
|
||||||
|
type Split<S extends string, D extends string> =
|
||||||
|
S extends `${infer A}${D}${infer B}` ? [A, ...Split<B, D>] : [S];
|
||||||
|
|
||||||
|
type NestedObject<T extends string[]> =
|
||||||
|
T extends [infer Head, ...infer Tail] ?
|
||||||
|
Head extends string ?
|
||||||
|
{ [key in Head]: NestedObject<Tail extends string[] ? Tail : []> } : never :
|
||||||
|
string;
|
||||||
|
|
||||||
|
// Основная утилита для обработки union type
|
||||||
|
type CreateTree<T> =
|
||||||
|
UnionToIntersection<T extends infer U ?
|
||||||
|
U extends string ?
|
||||||
|
NestedObject<Split<U, '.'>> : never : never>;
|
||||||
|
|
||||||
|
// Утилита для объединения типов
|
||||||
|
type UnionToIntersection<U> =
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
|
(U extends any ? (k: U) => void : never) extends (k: infer I) => void ? I : never;
|
||||||
|
|
||||||
type LanguageResource = CreateTree<keyof typeof defaultLocale>;
|
type LanguageResource = CreateTree<keyof typeof defaultLocale>;
|
||||||
|
|
||||||
@ -7,6 +26,6 @@ declare module "i18next" {
|
|||||||
interface CustomTypeOptions {
|
interface CustomTypeOptions {
|
||||||
resources: {
|
resources: {
|
||||||
'~': LanguageResource
|
'~': LanguageResource
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -1,9 +1,12 @@
|
|||||||
import React, { FC } from 'react';
|
import React, { FC } from 'react';
|
||||||
import { Container, VStack } from '@chakra-ui/react';
|
import { Container, VStack } from '@chakra-ui/react';
|
||||||
import LandingSuccess from '../../../stubs/json/landing/landing-success.json';
|
import {
|
||||||
import { BenefitsSection, Footer, HeroSection, SocialProofSection } from '../../components/landing';
|
BenefitsSection,
|
||||||
|
Footer,
|
||||||
|
HeroSection,
|
||||||
|
SocialProofSection,
|
||||||
|
} from '../../components/landing';
|
||||||
import { LandingThemeProvider } from '../../containers';
|
import { LandingThemeProvider } from '../../containers';
|
||||||
import { isBenefitsSectionData, isSocialProofSectionData } from './types';
|
|
||||||
|
|
||||||
const Page: FC = () => {
|
const Page: FC = () => {
|
||||||
return (
|
return (
|
||||||
@ -17,19 +20,10 @@ const Page: FC = () => {
|
|||||||
centerContent
|
centerContent
|
||||||
>
|
>
|
||||||
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
<VStack w='full' h='full' alignItems='stretch' flexGrow={1}>
|
||||||
<HeroSection
|
<HeroSection flexShrink={0} />
|
||||||
data={LandingSuccess.body['hero-section']}
|
|
||||||
flexShrink={0}
|
|
||||||
/>
|
|
||||||
<VStack as='main' flexGrow={1}>
|
<VStack as='main' flexGrow={1}>
|
||||||
{LandingSuccess.body.sections.map(({ type, ...data }, i) => {
|
<BenefitsSection />
|
||||||
if (isBenefitsSectionData(type, data)) {
|
<SocialProofSection />
|
||||||
return <BenefitsSection key={i} data={data} />;
|
|
||||||
}
|
|
||||||
if (isSocialProofSectionData(type, data)) {
|
|
||||||
return <SocialProofSection key={i} data={data} />;
|
|
||||||
}
|
|
||||||
})}
|
|
||||||
</VStack>
|
</VStack>
|
||||||
<Footer />
|
<Footer />
|
||||||
</VStack>
|
</VStack>
|
||||||
|
@ -1,15 +0,0 @@
|
|||||||
import LandingSuccess from "../../../stubs/json/landing/landing-success.json";
|
|
||||||
import { BenefitsSectionProps, SocialProofSectionProps } from "../../components/landing";
|
|
||||||
import { ArrElement } from "../../lib";
|
|
||||||
|
|
||||||
type SectionsItemData = ArrElement<LandingSuccess['body']['sections']>;
|
|
||||||
type SectionType = SectionsItemData['type'];
|
|
||||||
type SectionData = Omit<SectionsItemData, 'type'>;
|
|
||||||
|
|
||||||
export const isBenefitsSectionData = (type: SectionType, data: SectionData): data is BenefitsSectionProps['data'] => {
|
|
||||||
return type === 'benefits-section';
|
|
||||||
};
|
|
||||||
|
|
||||||
export const isSocialProofSectionData = (type: SectionType, data: SectionData): data is SocialProofSectionProps['data'] => {
|
|
||||||
return type === 'social-proof-section';
|
|
||||||
};
|
|
@ -1,27 +0,0 @@
|
|||||||
{
|
|
||||||
"success": true,
|
|
||||||
"body": {
|
|
||||||
"hero-section": {
|
|
||||||
"headline": "hero-section.headline",
|
|
||||||
"description": "hero-section.description",
|
|
||||||
"video": "demo.mp4"
|
|
||||||
},
|
|
||||||
"sections": [
|
|
||||||
{
|
|
||||||
"type": "benefits-section",
|
|
||||||
"heading": "benefits-section.heading",
|
|
||||||
"description": "benefits-section.description",
|
|
||||||
"list": [
|
|
||||||
"benefits-section.list.0",
|
|
||||||
"benefits-section.list.1",
|
|
||||||
"benefits-section.list.2",
|
|
||||||
"benefits-section.list.3"
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"type": "social-proof-section",
|
|
||||||
"heading": "social-proof-section.heading"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
28
stubs/json/landing/landing-success.json.d.ts
vendored
28
stubs/json/landing/landing-success.json.d.ts
vendored
@ -1,28 +0,0 @@
|
|||||||
interface LandingSuccess {
|
|
||||||
success: true,
|
|
||||||
body: {
|
|
||||||
'hero-section': {
|
|
||||||
headline: 'hero-section.headline',
|
|
||||||
description: 'hero-section.description',
|
|
||||||
video: 'demo.mp4'
|
|
||||||
},
|
|
||||||
sections: [
|
|
||||||
{
|
|
||||||
type: 'benefits-section',
|
|
||||||
heading: 'benefits-section.heading',
|
|
||||||
description: 'benefits-section.description',
|
|
||||||
list: [
|
|
||||||
'benefits-section.list.0',
|
|
||||||
'benefits-section.list.1',
|
|
||||||
'benefits-section.list.2',
|
|
||||||
'benefits-section.list.3'
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{type: 'social-proof-section', heading: 'social-proof-section.heading'}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
declare const LandingSuccess: LandingSuccess;
|
|
||||||
|
|
||||||
export = LandingSuccess;
|
|
Loading…
Reference in New Issue
Block a user