Skip to content

Commit

Permalink
Add new icons to the solutions menu
Browse files Browse the repository at this point in the history
  • Loading branch information
Breno committed Jan 20, 2025
1 parent 5df0342 commit 38f18d6
Show file tree
Hide file tree
Showing 17 changed files with 139 additions and 166 deletions.
38 changes: 25 additions & 13 deletions src/components/HeaderNavbar/Solutions/items.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
import BookIcon from '../../../svgs/book.svg';
import DocIcon from '../../../svgs/document.svg';
import PieChartIcon from '../../../svgs/pie-chart.svg';
import NoCodeIcon from '../../../svgs/no-code.svg';

const BookHeaderIcon = () => <BookIcon width={11} height={14} />;
const iconSize = 15;

const AdaptedDocIcon = () => (
<DocIcon width={iconSize} height={iconSize} color="#5072EB" />
);
const AdaptedPieChartIcon = () => (
<PieChartIcon width={iconSize} height={iconSize} color="#5072EB" />
);
const AdaptedNoCodeIcon = () => (
<NoCodeIcon width={iconSize} height={iconSize} color="#5072EB" />
);

const urlPrefix = '/solutions';

Expand All @@ -9,25 +21,25 @@ export const useCaseSolutions = [
name: 'DATA MOVEMENT',
to: `${urlPrefix}/use-cases/data-movement/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedDocIcon />,
},
{
name: 'DATA LAKES AND WAREHOUSES',
to: `${urlPrefix}/use-cases/data-lakes-warehouses/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedDocIcon />,
},
{
name: 'AI',
to: `${urlPrefix}/use-cases/ai/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedDocIcon />,
},
{
name: 'REAL-TIME ANALYTICS',
to: `${urlPrefix}/use-cases/real-time-analytics/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedDocIcon />,
},
];

Expand All @@ -36,19 +48,19 @@ export const industrySolutions = [
name: 'FINANCE',
to: `${urlPrefix}/industry/finance/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedPieChartIcon />,
},
{
name: 'SUPPLY CHAIN AND LOGISTICS',
to: `${urlPrefix}/industry/supply-chain/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedPieChartIcon />,
},
{
name: 'MARKETING',
to: `${urlPrefix}/industry/marketing/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedPieChartIcon />,
},
];

Expand All @@ -57,24 +69,24 @@ export const technologySolutions = [
name: 'PRIVATE DEPLOYMENTS',
to: `${urlPrefix}/technology/private-deployments/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedNoCodeIcon />,
},
{
name: 'APACHE ICEBERG',
to: `${urlPrefix}/technology/apache-iceberg/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedNoCodeIcon />,
},
{
name: 'NETSUITE',
to: `${urlPrefix}/technology/netsuite/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedNoCodeIcon />,
},
{
name: 'KAFKA',
to: `${urlPrefix}/technology/kafka/`,
description: '',
Image: () => <BookHeaderIcon />,
Image: () => <AdaptedNoCodeIcon />,
},
];
6 changes: 3 additions & 3 deletions src/components/Homepage/SuccessStories/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import DarkSwoopingLinesLeftDirectionBackground from '../../BackgroundImages/Dar
import Container from '../../Container';
import SlideDeckCarousel from '../../SlideDeckCarousel';
import Card from './Card';
import { sectionTitle } from './styles.module.less';
import { container } from './styles.module.less';

const SuccessStories = () => {
const {
Expand All @@ -31,8 +31,8 @@ const SuccessStories = () => {

return (
<DarkSwoopingLinesLeftDirectionBackground>
<Container isVertical>
<h2 className={sectionTitle}>SUCCESS STORIES</h2>
<Container isVertical className={container}>
<h2>SUCCESS STORIES</h2>
<SlideDeckCarousel
items={allSuccessStories}
itemsPerSlide={3}
Expand Down
20 changes: 11 additions & 9 deletions src/components/Homepage/SuccessStories/styles.module.less
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
.container {
h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 600;
line-height: 72px;
color: var(--blue);
text-transform: uppercase;
}
}

.cardsList {
display: flex;
gap: 32px;
Expand All @@ -12,12 +23,3 @@
flex-direction: column;
}
}

.sectionTitle {
text-align: center;
font-size: 2.5rem;
font-weight: 600;
line-height: 72px;
color: var(--blue);
text-transform: uppercase;
}
92 changes: 22 additions & 70 deletions src/components/ProductPage/KeyFeatures/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@ import clsx from 'clsx';
import { HTMLTooltipProps } from '../../HTMLTooltip';
import Container from '../../Container';
import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
import NoCodeIcon from '../../../svgs/product-page/section-three/no-code.svg';
import CdcIcon from '../../../svgs/cdc.svg';
import KafkaIcon from '../../../svgs/kafka.svg';
import TimeIcon from '../../../svgs/time.svg';
import StorageIcon from '../../../svgs/storage.svg';
import DataOpsIcon from '../../../svgs/data-ops.svg';
import SourceIcon from '../../../svgs/source.svg';
import ReplayIcon from '../../../svgs/replay.svg';
import SchemaIcon from '../../../svgs/schema.svg';
import MultiCloudIcon from '../../../svgs/multi-cloud.svg';
import KeyFeature from './KeyFeature';
import { features } from './features';
import {
Expand Down Expand Up @@ -35,60 +45,32 @@ const tooltipRightProps: Omit<HTMLTooltipProps, 'children' | 'title'> = {
placement: 'right',
};

const iconColor = '#fff';

const KeyFeatures = () => {
const isDesktop = useMediaQuery('(min-width:811px)');

const leftFeatures = useMemo(
() => [
{
feature: features.noCodeConnectors,
icon: (
<StaticImage
placeholder="none"
alt="No-code connectors"
src="../../../svgs/product-page/section-three/no-code.svg"
/>
),
icon: <NoCodeIcon color={iconColor} />,
},
{
feature: features.endToEndCdc,
icon: (
<StaticImage
placeholder="none"
alt="End-to-end CDC"
src="../../../svgs/product-page/section-three/cdc.svg"
/>
),
icon: <CdcIcon color={iconColor} />,
},
{
feature: features.kafkaCompatible,
icon: (
<StaticImage
placeholder="none"
alt="Kafka"
src="../../../svgs/product-page/section-three/kafka.svg"
/>
),
icon: <KafkaIcon color={iconColor} />,
},
{
feature: features.realTimeAndBatch,
icon: (
<StaticImage
placeholder="none"
alt="Real-time and batch"
src="../../../svgs/product-page/section-three/time.svg"
/>
),
icon: <TimeIcon color={iconColor} />,
},
{
feature: features.privateStorage,
icon: (
<StaticImage
placeholder="none"
alt="Private storage"
src="../../../svgs/product-page/section-three/storage.svg"
/>
),
icon: <StorageIcon color={iconColor} />,
},
],
[]
Expand All @@ -98,54 +80,24 @@ const KeyFeatures = () => {
() => [
{
feature: features.eltAndEtl,
icon: (
<StaticImage
placeholder="none"
alt="Data ops"
src="../../../svgs/product-page/section-three/data-ops.svg"
/>
),
icon: <DataOpsIcon color={iconColor} />,
},
{
feature: features.manyToMany,
icon: (
<StaticImage
placeholder="none"
alt="Many to many"
src="../../../svgs/product-page/section-three/source.svg"
/>
),
icon: <SourceIcon color={iconColor} />,
},
{
feature: features.backfillAndReplay,
icon: (
<StaticImage
placeholder="none"
alt="Backfill and replay"
src="../../../svgs/product-page/section-three/replay.svg"
/>
),
icon: <ReplayIcon color={iconColor} />,
},
{
feature: features.schemaEvolution,
icon: (
<StaticImage
placeholder="none"
alt="Schema evolution"
src="../../../svgs/product-page/section-three/schema.svg"
/>
),
icon: <SchemaIcon color={iconColor} />,
props: { ...tooltipRightProps, disableInteractive: false },
},
{
feature: features.multiCloud,
icon: (
<StaticImage
placeholder="none"
alt="Multi Cloud"
src="../../../svgs/product-page/section-three/multi-cloud.svg"
/>
),
icon: <MultiCloudIcon color={iconColor} />,
},
],
[]
Expand Down
27 changes: 9 additions & 18 deletions src/components/ProductPage/TheSameData/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,9 @@ import clsx from 'clsx';
import { defaultWrapperDarkBlue } from '../../../globalStyles/wrappers.module.less';
import Tabs from '../../Tabs';
import Container from '../../Container';
import PieChartIcon from '../../../svgs/pie-chart.svg';
import OpsIcon from '../../../svgs/ops.svg';
import AndroidBrainIcon from '../../../svgs/android-brain.svg';
import LogoAndPath from './LogoAndPath';
import {
amazonRedshiftLogoWrapper,
Expand Down Expand Up @@ -32,25 +35,13 @@ const TheSameData = () => {
<div className={textWrapper}>
<div className={iconsWrapper}>
<div className={iconWrapper}>
<StaticImage
placeholder="none"
alt="Analytics - pie chart"
src="../../../svgs/pie-chart.svg"
/>
<PieChartIcon color="var(--blue)" />
</div>
<div className={iconWrapper}>
<StaticImage
placeholder="none"
alt="Ops"
src="../../../svgs/ops.svg"
/>
<OpsIcon />
</div>
<div className={iconWrapper}>
<StaticImage
placeholder="none"
alt="AI - artificial intelligence"
src="../../../svgs/android-brain.svg"
/>
<AndroidBrainIcon />
</div>
</div>
<h2>
Expand Down Expand Up @@ -78,7 +69,7 @@ const TheSameData = () => {
)}
>
<StaticImage
placeholder="none"
placeholder="blurred"
alt="Analytics Connectors"
src="../../../images/product-page/section-five/analytics-connectors.png"
/>
Expand Down Expand Up @@ -131,7 +122,7 @@ const TheSameData = () => {
<LogoAndPath tab="ops" />
<div className={connectors}>
<StaticImage
placeholder="none"
placeholder="blurred"
alt="Ops Connectors"
src="../../../images/product-page/section-five/ops-connectors.png"
height={128}
Expand Down Expand Up @@ -182,7 +173,7 @@ const TheSameData = () => {
<LogoAndPath tab="ai" />
<div className={connectors}>
<StaticImage
placeholder="none"
placeholder="blurred"
alt="AI Connectors"
src="../../../images/product-page/section-five/ai-connectors.png"
height={128}
Expand Down
Loading

0 comments on commit 38f18d6

Please sign in to comment.