+
+ );
+};
diff --git a/src/shared/components/trailblazer/trailblazer.module.scss b/src/shared/components/trailblazer/trailblazer.module.scss
new file mode 100644
index 0000000..1089c94
--- /dev/null
+++ b/src/shared/components/trailblazer/trailblazer.module.scss
@@ -0,0 +1,154 @@
+.wrapper {
+ padding: 33px 35px;
+ border-radius: 32px;
+ border-width: 3px;
+
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 35px;
+ background-image: url("/img/trailblazer/banner-sm.png");
+ width: 100%;
+ height: 650px;
+ background-size: cover;
+ background-position: center;
+
+ .group {
+ justify-self: center;
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ height: fit-content;
+ text-align: center;
+ align-items: center;
+ max-width: 247px;
+ align-self: flex-end;
+ // margin-top: auto; // This will push the group to the bottom
+ }
+
+ .text {
+ max-width: 350px;
+ font: 500 16px/24px $kFontPublicSans;
+ letter-spacing: -0.01em;
+ color: #f3f3f3;
+ }
+
+ .icon {
+ width: 26px;
+ height: 26px;
+ }
+
+ // Small screens
+ @media screen and (min-width: 350px) {
+ padding: 10px;
+ background-image: url("/img/trailblazer/banner-sm.png");
+ height: 650px;
+ justify-content: center;
+ background-position: center;
+
+ .group {
+ justify-self: center;
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ height: fit-content;
+ text-align: center;
+ align-items: center;
+ max-width: 247px;
+ align-self: flex-end;
+ // margin-top: auto; // This will push the group to the bottom
+ }
+ }
+
+ // Medium screens
+ @media screen and (min-width: 580px) {
+ padding: 15px;
+ padding-right: 72px;
+
+ background-image: url("/img/trailblazer/banner-md.png");
+ height: 427px;
+ justify-content: flex-end;
+
+ .group {
+ padding-top: 20px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ height: fit-content;
+ text-align: left;
+ align-items: flex-start;
+ max-width: 247px;
+ // align-self: flex-end;
+ justify-self: flex-end;
+ align-self: center;
+ }
+ }
+
+ // Large screens
+ @media screen and (min-width: 874px) {
+ padding: 20px;
+ padding-right: 60px;
+
+ background-image: url("/img/trailblazer/banner-lg.png");
+ height: 296px;
+
+ justify-content: flex-end;
+
+ .group {
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ height: fit-content;
+ text-align: left;
+ align-items: flex-start;
+ max-width: 247px;
+ // align-self: flex-end;
+ justify-self: flex-end;
+ align-self: center;
+ }
+ }
+
+ // Extra large screens
+ @media screen and (min-width: 1472px) {
+ padding: 25px;
+ background-image: url("/img/trailblazer/banner-xl.png");
+ height: 250px;
+
+ align-items: center;
+ justify-content: flex-end;
+
+ .group {
+ padding: 0px;
+
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ height: fit-content;
+ max-width: 247px;
+ align-self: center;
+ }
+ }
+
+ // Extra large screens
+ @media screen and (min-width: $kLaptopM) {
+ padding: 25px;
+ padding-right: 89px;
+ background-image: url("/img/trailblazer/banner-xl.png");
+ height: 250px;
+
+ align-items: center;
+ justify-content: flex-end;
+
+ .group {
+ padding: 0px;
+ display: flex;
+ flex-direction: column;
+ gap: 15px;
+ max-width: 247px;
+ align-self: center;
+ }
+ }
+}
diff --git a/src/widgets/01-home-screens/lib/types.ts b/src/widgets/01-home-screens/lib/types.ts
index d5e8594..6416372 100644
--- a/src/widgets/01-home-screens/lib/types.ts
+++ b/src/widgets/01-home-screens/lib/types.ts
@@ -1,40 +1,41 @@
export enum HomeScreensEnum {
- HERO = "hero",
- ADVANTAGES = "advantages",
- ABOUT = "about",
- SOLUTIONS = "solutions",
- ECOSYSTEM = "ecosystem",
- COMMUNITY = "community",
- BLOG = "blog",
+ HERO = "hero",
+ ADVANTAGES = "advantages",
+ ABOUT = "about",
+ SOLUTIONS = "solutions",
+ ECOSYSTEM = "ecosystem",
+ COMMUNITY = "community",
+ BLOG = "blog",
+ TRAILBLAZER = "trailblazer",
}
export enum HomeApiKeys {
- BLOG = "blogs-list"
+ BLOG = "blogs-list",
}
export interface IHomeAdvantage {
- id: string;
+ id: string;
+ icon: string;
+ title: string;
+ text: string;
+ colors: {
icon: string;
- title: string;
text: string;
- colors: {
- icon: string;
- text: string;
- background: string;
- }
+ background: string;
+ };
}
export interface IHomeAbout {
- icon: string;
- title: string;
- text: string;
+ icon: string;
+ title: string;
+ text: string;
}
export interface IHomeSolution {
- title: string;
- extraTitle: string;
- title_short: string;
- text: string;
- icon: string;
- iconLottie: string;
-}
\ No newline at end of file
+ title: string;
+ extraTitle: string;
+ title_short: string;
+ text: string;
+ icon: string;
+ iconLottie: string;
+}
diff --git a/src/widgets/01-home-screens/ui/04-solutions/index.tsx b/src/widgets/01-home-screens/ui/04-solutions/index.tsx
index 536ae85..2c7decf 100644
--- a/src/widgets/01-home-screens/ui/04-solutions/index.tsx
+++ b/src/widgets/01-home-screens/ui/04-solutions/index.tsx
@@ -1,115 +1,112 @@
-import clsx from 'clsx';
-import { useTranslation } from 'next-i18next';
-import React, { useState } from 'react';
-import { Button } from 'shared/components/@buttons/button';
-import { useTranslationObject } from 'shared/lib/hooks/use-translation-object';
-import { MediaQuery } from 'shared/ui/media-query';
-import { HomeScreensEnum, IHomeSolution } from 'widgets/01-home-screens/lib/types';
-import css from './solutions.module.scss';
-import { Player } from '@lottiefiles/react-lottie-player';
+import clsx from "clsx";
+import { useTranslation } from "next-i18next";
+import React, { useState } from "react";
+import { Button } from "shared/components/@buttons/button";
+import { useTranslationObject } from "shared/lib/hooks/use-translation-object";
+import { MediaQuery } from "shared/ui/media-query";
+import {
+ HomeScreensEnum,
+ IHomeSolution,
+} from "widgets/01-home-screens/lib/types";
+import css from "./solutions.module.scss";
+import { Player } from "@lottiefiles/react-lottie-player";
const Solutions: React.FC = () => {
- const solutions = useTranslationObject
+
+
+
+
+ 
+
+ {text}
+{button}
+
-
+
+
+ const solutions = useTranslationObject(
+ "solutions.list",
+ "home"
+ );
+ const { t } = useTranslation("home");
+ const [activeSolution, setActiveSolution] = useState(solutions[0]);
-
-
+
-
- );
-}
+
+ ))}
+
+ - {t('solutions.solutions')} -
+ return ( +
+
+ }
+ />
-
+
+
- }
- />
+ {t("solutions.solutions")}
-- {activeSolution.title_short} – {activeSolution.extraTitle} -
++ {activeSolution.title_short} –{" "} + {activeSolution.extraTitle} +
-
-
+ - {activeSolution.text} -
-
+
- {activeSolution.text}
+
-
-
-
+
+
+ -
- {solutions.map((solution, id) => (
-
- setActiveSolution(solution)}
- key={solution.title}
- >
- ---- - ))} - +
+ -
+ {solutions.map((solution, id) => (
+
- setActiveSolution(solution)}
+ key={solution.title}
+ >
+ +-++
- - {(id + 1).toString().padStart(2, '0')} -
-+ {(id + 1).toString().padStart(2, "0")} +
+-
+{solution.title_short}} - /> - {solution.title_short} – {solution.extraTitle}} - /> - +
- -{solution.title_short}} + /> + + {solution.title_short} –{" "} + {solution.extraTitle} + + } + /> + - {solution.text} - - } - /> -
{solution.text}} + /> - setActiveSolution(solution)}
+ key={solution.title}
+ >
+
+
+