(null);
+
+ useEffect(() => {
+ if (videoRef.current && prefersReducedMotion) {
+ videoRef.current.pause();
+ }
+ }, [prefersReducedMotion]);
+
+ return (
+
+
+
+ {eyebrow && (
+
+ {eyebrow}
+
+ )}
+
+
+ {title}
+
+
+ {subtitle && (
+
+ {subtitle}
+
+ )}
+
+ {buttons && (
+
+
+ {buttons?.map((button, index) => (
+
+ ))}
+
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default VideoBgHero;
diff --git a/src/components/solutions/blinks-and-actions/BlinksHero.jsx b/src/components/solutions/blinks-and-actions/BlinksHero.jsx
new file mode 100644
index 00000000..2e40bbbb
--- /dev/null
+++ b/src/components/solutions/blinks-and-actions/BlinksHero.jsx
@@ -0,0 +1,83 @@
+import { useEffect, useRef } from "react";
+import { useTranslation } from "next-i18next";
+import classNames from "classnames";
+import Image from "next/image";
+
+import useReducedMotion from "@/hooks/useReducedMotion";
+
+import Button from "@/components/solutions/Button";
+import { OpacityInText } from "@/components/shared/Text";
+import { MotionSlideIn } from "@/components/shared/Motions";
+
+import styles from "./BlinksHero.module.scss";
+
+const BlinksHero = () => {
+ const { t } = useTranslation();
+
+ const videoRef = useRef(null);
+ const [prefersReducedMotion] = useReducedMotion();
+
+ useEffect(() => {
+ prefersReducedMotion && videoRef.current.pause();
+ }, [prefersReducedMotion]);
+
+ return (
+
+
+
+ {t("solutions-blinks-and-actions.hero.kicker")}
+
+
+
+ {t("solutions-blinks-and-actions.hero.title")}
+
+
+
+ {t("solutions-blinks-and-actions.hero.subtitle")}
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BlinksHero;
diff --git a/src/components/solutions/blinks-and-actions/BlinksHero.module.scss b/src/components/solutions/blinks-and-actions/BlinksHero.module.scss
new file mode 100644
index 00000000..c8b9c057
--- /dev/null
+++ b/src/components/solutions/blinks-and-actions/BlinksHero.module.scss
@@ -0,0 +1,124 @@
+@import "../../../scss/solutions/_variables.scss";
+
+.BlinksHero {
+ padding: 64px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ .ContentWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ p,
+ h1 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ .Kicker {
+ font-size: 16px;
+ font-weight: 800;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ text-align: center;
+ color: var(--blue);
+ }
+
+ .Title {
+ font-size: 36px;
+ font-weight: 700;
+ line-height: 1.14;
+ letter-spacing: -0.01em;
+ text-align: center;
+ }
+
+ .Subtitle {
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 1.2;
+ text-align: center;
+ color: var(--grey-250);
+ }
+
+ .Buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ width: max-content;
+ margin: 0 auto;
+ }
+
+ .ImageWrapper {
+ display: flex;
+ justify-content: center;
+ }
+}
+
+@include breakpoint(md) {
+ .BlinksHero {
+ padding: 80px 24px;
+
+ .ContentWrapper {
+ @include max-width(650px);
+ }
+
+ .Title {
+ font-size: 64px;
+ }
+
+ .Subtitle {
+ font-size: 24px;
+ }
+ }
+}
+
+@include breakpoint(xl) {
+ .BlinksHero {
+ padding: 92px 24px;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 128px;
+
+ .ContentWrapper {
+ max-width: 520px;
+ justify-content: center;
+ flex: 1;
+
+ * {
+ text-align: left;
+ }
+ }
+
+ .Kicker {
+ margin-left: 0;
+ font-size: 22px;
+ }
+
+ .Title {
+ font-size: 64px;
+ line-height: 1;
+ letter-spacing: -0.02em;
+ max-width: 422px;
+ }
+
+ .Subtitle {
+ font-size: 32px;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ max-width: 100%;
+ }
+
+ .Buttons {
+ margin-left: 0;
+ min-width: 328px;
+
+ a {
+ padding: 12px;
+ width: 100%;
+ }
+ }
+ }
+}
diff --git a/src/components/solutions/gaming/GamesKit.jsx b/src/components/solutions/gaming/GamesKit.jsx
new file mode 100644
index 00000000..04ae56d6
--- /dev/null
+++ b/src/components/solutions/gaming/GamesKit.jsx
@@ -0,0 +1,89 @@
+import Link from "next/link";
+import classNames from "classnames";
+import { useTranslation, Trans } from "next-i18next";
+
+import Button from "@/components/solutions/Button";
+import CaretIcon from "@/components/icons/Caret";
+import { AnimatedText, GradientText } from "@/components/shared/Text";
+import { MotionSlideIn } from "@/components/shared/Motions";
+
+import styles from "./GamesKit.module.scss";
+
+const GamesKit = () => {
+ const { t } = useTranslation();
+
+ const ListItem = ({ title, text, url }) => (
+
+
+
+ {title}
+
+
+
+
{text}
+
+
+
+
+
+ Start with the
+
+ Solana Games Kit
+
+
+
+
+
+
+ {t("solutions-gaming.games-kit.subtitle")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {cards.map((card, index) => (
+ handleMouseEnter(card)}
+ onMouseLeave={handleMouseLeave}
+ >
+
+
+
+
+
+
+ {card.title}
+
+
+
{card.content}
+
+
+
+ {tooltip && tooltip.title === card.title && (
+
+
+
+
+
+
+ {tooltip.title}
+
+
+
{tooltip.content}
+
+
+ )}
+
+
+
+
+
+
+ {t("solutions-gaming.hero.kicker")}
+
+
+ {t("solutions-gaming.hero.title")}
+
+
+ {t("solutions-gaming.hero.subtitle")}
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ {children}
+
+
+ );
+};
+export default Layout;
diff --git a/src/components/solutions/loyalty/LoyaltyHero.jsx b/src/components/solutions/loyalty/LoyaltyHero.jsx
new file mode 100644
index 00000000..e7a81283
--- /dev/null
+++ b/src/components/solutions/loyalty/LoyaltyHero.jsx
@@ -0,0 +1,53 @@
+import Lottie from "react-lottie";
+import { useTranslation } from "next-i18next";
+
+import Text from "@/components/shared/Text";
+import Button from "@/components/solutions/Button";
+import { MotionSlideIn } from "@/components/shared/Motions";
+
+import styles from "./LoyaltyHero.module.scss";
+
+const LoyaltyHero = ({ heroLottie }) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+ {t("solutions-loyalty.hero.eyebrow")}
+
+
+ {t("solutions-loyalty.hero.title")}
+
+
+ {t("solutions-loyalty.hero.subtitle")}
+
+
+
+
+
+
+
+
+ {titleKey && (
+
+
+ ),
+ }}
+ />
+
+ )}
+
+ {textKey && (
+
+
+
+ )}
+
+
+
+
+
+ {items.slice(0, 3).map((item: EcosystemItem, index: number) => (
+
+
+
+ ))}
+
+ }
+ >
+ {items
+ .slice(3)
+ .map(
+ (
+ item: { label: string; content?: ReactNode },
+ index: number,
+ ) => (
+
+
+
+ ),
+ )}
+ {/* {items
+ .slice(3)
+ .map(
+ (
+ item: { label: string; content?: ReactNode },
+ index: number,
+ ) => (
+
+
+
+ ),
+ )} */}
+
+
+
+
+ {label}
+
+
+
+
+
+
+
+
+
+
+
+ {t("solutions-wallets-explorer.filters")}
+
+
+
+
+
+
+
+
+ {beginnerFilters.length &&
+ beginnerFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+
+
+
+ {walletTypeFilters.length &&
+ walletTypeFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ {financialTransactionFilters.length &&
+ financialTransactionFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ {assetManagementFilters.length &&
+ assetManagementFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ {securityRecoveryFilters.length &&
+ securityRecoveryFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ {toolingFilters.length &&
+ toolingFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {beginnerFilters.length &&
+ beginnerFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+
+
+
+ }
+ classes={styles.FirstChild}
+ >
+ {walletTypeFilters.length &&
+ walletTypeFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ }
+ classes={styles.Child}
+ >
+ {financialTransactionFilters.length &&
+ financialTransactionFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ }
+ classes={styles.Child}
+ >
+ {assetManagementFilters.length &&
+ assetManagementFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ }
+ classes={styles.Child}
+ >
+ {securityRecoveryFilters.length &&
+ securityRecoveryFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+ }
+ classes={styles.Child}
+ >
+ {toolingFilters.length &&
+ toolingFilters.map((filter, index) => (
+ toggleFilterActiveState(filter.id)}
+ />
+ ))}
+
+
+
+
+
+
+
+ {text}
+
+);
+
+const Dot = () => •;
+
+const WalletCard = ({
+ index,
+ walletImage,
+ name,
+ websiteUrl,
+ newToCrypto,
+ developer,
+ content,
+}) => {
+ const { t } = useTranslation();
+ const [open, setOpen] = useState(true);
+
+ const tags = [];
+ if (newToCrypto) tags.push(t("solutions-wallets-explorer.tags.beginner"));
+ if (developer) tags.push(t("solutions-wallets-explorer.tags.developer"));
+
+ const groupedContent = groupWalletData(content);
+
+ const localize = (value) =>
+ t(`solutions-wallets-explorer.wallet-filters.${value}`);
+
+ // Map of group names to their corresponding icons
+ const groupIcons = {
+ "Wallet Type": (
+
+ ),
+ "Financial Transactions": (
+
+ ),
+ "Asset Management": (
+
+ ),
+ "Security and Recovery": (
+
+ ),
+ "Solana Tooling": (
+
+ ),
+ };
+
+ const MobileCollapsibleContentRow = ({
+ groupName,
+ values,
+ maxValuesShown,
+ }) => {
+ if (values.length === 0) return null;
+
+ if (values.length === maxValuesShown) {
+ return (
+
+ {groupIcons[groupName]}
+
+ {values.map((value, index) => (
+
+ {localize(value)}
+ {index === values.length - 1 ? null : }
+
+ ))}
+
+
+ {groupIcons[groupName]}
+
+ {values.slice(0, maxValuesShown).map((value, index) => (
+
+ {localize(value)}
+
+
+ ))}
+ +{values.length - maxValuesShown}
+
+
+ {groupIcons[groupName]}
+
{localize(values[0])}
+
+ {tags.length > 0 && (
+
+
+ {tags.length > 1 && (
+ +{tags.length - 1}
+ )}
+
+ )}
+
+ {tags.length > 0 && (
+
+ {tags.map((tag, index) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
+
+
+
+ {name}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {groupedContent.map((group, index) => {
+ if (group.values.length === 0) return null;
+ return (
+
+ {groupIcons[group.groupName]}
+
+ {group.values.map((value, index) => (
+
+ {localize(value)}
+ {index === group.values.length - 1 ? null : }
+
+ ))}
+
+
+ );
+ })}
+
+
+
+ {t("solutions-wallets-explorer.visit-website")}
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WalletFilters;
diff --git a/src/components/solutions/wallets-explorer/WalletFilters.module.scss b/src/components/solutions/wallets-explorer/WalletFilters.module.scss
new file mode 100644
index 00000000..7bd6538b
--- /dev/null
+++ b/src/components/solutions/wallets-explorer/WalletFilters.module.scss
@@ -0,0 +1,65 @@
+@import "~@/scss/solutions/_variables.scss";
+
+.WalletFilters {
+ padding: 0 24px 64px;
+ max-width: 1068px;
+ margin: 0 auto;
+
+ @include breakpoint(lg) {
+ display: grid;
+ grid-template-columns: 330px 1fr;
+ gap: 40px;
+ }
+}
+
+.wallet-filter-section {
+ display: flex;
+ flex-flow: row wrap;
+ justify-content: flex-start;
+ align-items: center;
+ gap: 5px;
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 0 20px;
+ position: relative;
+ z-index: 10;
+}
+
+.wallet-filter {
+ display: inline-block;
+ background-color: #504d61;
+ color: #fff;
+ transition: all 0.3s ease;
+ border-radius: 30px;
+ padding: 7px 12px;
+ font-size: 12px;
+ text-transform: uppercase;
+ min-width: 50px;
+ text-align: center;
+ font-family: "Diatype", monotype;
+ line-height: 13px;
+ border: 1px solid #504d61;
+
+ &:hover {
+ background-color: #1d1a23;
+ cursor: pointer;
+ }
+}
+
+.wallet-filter--active {
+ background-color: #1d1a23;
+ color: #fff;
+}
+
+.wallet-filter + .wallet-filter-input:checked {
+ background-color: #1d1a23;
+}
+
+.wallet-filter.active {
+ background-color: #1d1a23;
+ color: #fff;
+}
+
+.wallet-filter-input {
+ appearance: none;
+}
diff --git a/src/components/solutions/wallets-explorer/Wallets.jsx b/src/components/solutions/wallets-explorer/Wallets.jsx
new file mode 100644
index 00000000..63c89bbd
--- /dev/null
+++ b/src/components/solutions/wallets-explorer/Wallets.jsx
@@ -0,0 +1,61 @@
+import { useTranslation } from "next-i18next";
+
+import { walletData } from "../../../data/wallets/wallet-data";
+
+import WalletCard from "./WalletCard";
+import { MotionSlideIn } from "@/components/shared/Motions";
+
+import styles from "./Wallets.module.scss";
+
+const Wallets = ({ filteredWalletData }) => {
+ const { t } = useTranslation();
+
+ return (
+ <>
+
+
+
+ {t("solutions-wallets-explorer.showing")}{" "}
+
+ {filteredWalletData.length} / {walletData.length}
+ {" "}
+ {t("solutions-wallets-explorer.wallets")}
+
+
+
+
+ {filteredWalletData.length ? (
+ filteredWalletData.map((wallet, key) => {
+ const { ...walletDataContent } = wallet;
+
+ return (
+
+
+
+ );
+ })
+ ) : (
+
+
+ {t("solutions-wallets-explorer.no-results")}
+
+
+ )}
+
+
+
+
+
+ {t("solutions-wallets-explorer.hero.title")}
+
+
+
+ {t("solutions-wallets-explorer.hero.text")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WalletTitle;
diff --git a/src/components/solutions/wallets/WalletsDetails.jsx b/src/components/solutions/wallets/WalletsDetails.jsx
new file mode 100644
index 00000000..8b28458b
--- /dev/null
+++ b/src/components/solutions/wallets/WalletsDetails.jsx
@@ -0,0 +1,65 @@
+import classNames from "classnames";
+import DetailsSection, { Detail } from "@/components/solutions/DetailsSection";
+import { useTranslation, Trans } from "next-i18next";
+import { useInView } from "react-intersection-observer";
+import { MotionSlideIn } from "@/components/shared/Motions";
+
+const WalletsDetails = ({ styles }) => {
+ const { t } = useTranslation();
+ const { ref: inViewRef, inView } = useInView({
+ triggerOnce: true,
+ threshold: 0.5,
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WalletsDetails;
diff --git a/src/components/solutions/wallets/WalletsExploreSolutions.jsx b/src/components/solutions/wallets/WalletsExploreSolutions.jsx
new file mode 100644
index 00000000..444df853
--- /dev/null
+++ b/src/components/solutions/wallets/WalletsExploreSolutions.jsx
@@ -0,0 +1,62 @@
+import classNames from "classnames";
+import { useTranslation, Trans } from "next-i18next";
+import Button from "@/components/solutions/Button";
+import { MotionSlideIn } from "@/components/shared/Motions";
+import Text, { AnimatedText, GradientText } from "@/components/shared/Text";
+
+const WalletsExploreSolutions = ({ styles }) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+ ),
+ }}
+ />
+
+
+
+ {t("solutions-wallets.explore.subtitle")}
+
+
+
+
+ {t("solutions-wallets.explore.cards.new.title")}
+ {t("solutions-wallets.explore.cards.new.subtitle")}
+
+
+
+
+ {t("solutions-wallets.explore.cards.embed.title")}
+
+
+ {t("solutions-wallets.explore.cards.embed.subtitle")}
+
+
+
+
+
+
+
+
+
+ {t("solutions-wallets.hero.kicker")}
+
+
+
+ {t("solutions-wallets.hero.title")}
+
+
+
+ {t("solutions-wallets.hero.subtitle")}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default WalletsHero;
diff --git a/src/components/solutions/wallets/WalletsHero.module.scss b/src/components/solutions/wallets/WalletsHero.module.scss
new file mode 100644
index 00000000..56bceb42
--- /dev/null
+++ b/src/components/solutions/wallets/WalletsHero.module.scss
@@ -0,0 +1,147 @@
+@import "~@/scss/solutions/_variables.scss";
+
+.WalletsHero {
+ padding: 64px 24px;
+ display: flex;
+ flex-direction: column;
+ gap: 40px;
+
+ .ContentWrapper {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+
+ p,
+ h1 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ }
+
+ .Kicker {
+ font-size: 16px;
+ font-weight: 800;
+ line-height: 1.25;
+ letter-spacing: -0.02em;
+ text-align: center;
+ color: var(--blue);
+ }
+
+ .Title {
+ font-size: 36px;
+ font-weight: 700;
+ line-height: 1.14;
+ letter-spacing: -0.01em;
+ text-align: center;
+ }
+
+ .Subtitle {
+ font-size: 20px;
+ font-weight: 700;
+ line-height: 1.2;
+ text-align: center;
+ color: var(--grey-250);
+ }
+
+ .Buttons {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ width: max-content;
+ margin: 0 auto;
+ }
+}
+
+.VideoWrapper {
+ display: flex;
+ align-items: center;
+ opacity: 0;
+ transition: opacity $duration-standard $easeInQuart;
+ transition-delay: 300ms;
+
+ &.Active {
+ opacity: 1;
+ }
+
+ video {
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+ max-width: 600px;
+ margin: 0 auto;
+ }
+}
+
+@include breakpoint(md) {
+ .WalletsHero {
+ padding: 80px 24px;
+
+ .ContentWrapper {
+ @include max-width(650px);
+ }
+
+ .Title {
+ font-size: 64px;
+ }
+
+ .Subtitle {
+ font-size: 24px;
+ }
+
+ .Buttons {
+ flex-direction: row;
+ }
+ }
+}
+
+@include breakpoint(xl) {
+ .WalletsHero {
+ padding: 92px 24px;
+ flex-direction: row;
+ justify-content: space-between;
+ gap: 128px;
+
+ .ContentWrapper {
+ max-width: 520px;
+ justify-content: center;
+ flex: 1;
+
+ * {
+ text-align: left;
+ }
+ }
+
+ .VideoWrapper {
+ flex: 2;
+ height: 670px;
+ max-width: 500px;
+ }
+
+ .Kicker {
+ margin-left: 0;
+ font-size: 22px;
+ }
+
+ .Title {
+ line-height: 1;
+ letter-spacing: -0.02em;
+ max-width: 422px;
+ }
+
+ .Subtitle {
+ font-size: 28px;
+ line-height: 1.15;
+ letter-spacing: -0.02em;
+ max-width: 100%;
+ }
+
+ .Buttons {
+ flex-direction: row;
+ margin-left: 0;
+
+ a {
+ padding: 12px;
+ }
+ }
+ }
+}