-
-
- Solutions for
-
- {visibleItems.map((item, idx) => {
- const isActive = item.displayIndex === 0;
- const offset = item.displayIndex;
-
- // Calculate translateX based on size differences
- let translateX = 0;
- if (offset === 0) {
- translateX = 0;
- } else if (offset === 1) {
- // Position after the active text + arrow + some gap
- translateX = 550; // Adjust based on active text width
- } else if (offset === 2) {
- translateX = 900;
- } else if (offset === 3) {
- translateX = 1200;
- }
-
- const opacity = offset === 0 ? 1 : offset <= 3 ? 1 : 0;
-
- return (
-
- );
- })}
-
- {industries[activeIndex].description}
- -
- {visibleItems.map((item, idx) => {
- const isActive = item.displayIndex === 0;
- const offset = item.displayIndex;
-
- // Position items: active at 0, others spaced to the right
- const translateX = offset * 650;
- const scale = isActive ? 1 : 0.6;
- // Show active (1.0), next 2 items (0.3), third item fading (0.15)
- const opacity =
- offset === 0
- ? 1
- : offset === 1
- ? 0.3
- : offset === 2
- ? 0.3
- : offset === 3
- ? 0.15
- : 0;
- const zIndex = isActive
- ? 10
- : offset === 1
- ? 5
- : offset === 2
- ? 4
- : 1;
-
- return (
-
-
- );
-}
diff --git a/src/app/home/solutions-carousel/TextContentSection.tsx b/src/app/home/solutions-carousel/TextContentSection.tsx
new file mode 100644
index 0000000..15515cf
--- /dev/null
+++ b/src/app/home/solutions-carousel/TextContentSection.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import { ChevronRightIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+type ActiveIndustry = {
+ name: string;
+ description: string;
+};
+
+export default function TextContentSection({
+ activeIndustry,
+}: {
+ activeIndustry: ActiveIndustry;
+}) {
+ return (
+ // dont want to hardcode pixels here. just want this text width to remain the same
+
-
- );
- })}
-
- 
-
- {isActive && (
-
- )}
-
+
+ );
+}
diff --git a/src/app/home/solutions-carousel/data.ts b/src/app/home/solutions-carousel/data.ts
new file mode 100644
index 0000000..15b3834
--- /dev/null
+++ b/src/app/home/solutions-carousel/data.ts
@@ -0,0 +1,82 @@
+export const industries = [
+ {
+ name: "Banking and Finance",
+ description:
+ "Transform your company's financial solutions. Improve AML and KYC compliance and reduce operating costs while increasing customer satisfaction.",
+ image: "https://picsum.photos/600/350?v=4",
+ },
+ {
+ name: "Education and Universities",
+ description:
+ "Streamline tuition payments, campus services, and student billing with automated workflows designed for educational institutions.",
+ image: "https://picsum.photos/600/350?v=3",
+ },
+ {
+ name: "Insurance",
+ description:
+ "Simplify premium collections, claims processing, and policy management with intelligent automation built for insurance providers.",
+ image: "https://picsum.photos/600/350?v=2",
+ },
+ {
+ name: "Utilities",
+ description:
+ "Modernize utility billing, meter-to-cash workflows, and customer payments with real-time tracking and automated reminders.",
+ image: "https://picsum.photos/600/350?v=1",
+ },
+ {
+ name: "Banking and Finance",
+ description:
+ "Transform your company's financial solutions. Improve AML and KYC compliance and reduce operating costs while increasing customer satisfaction.",
+ image: "https://picsum.photos/600/350?v=4",
+ },
+ {
+ name: "Education and Universities",
+ description:
+ "Streamline tuition payments, campus services, and student billing with automated workflows designed for educational institutions.",
+ image: "https://picsum.photos/600/350?v=3",
+ },
+ {
+ name: "Insurance",
+ description:
+ "Simplify premium collections, claims processing, and policy management with intelligent automation built for insurance providers.",
+ image: "https://picsum.photos/600/350?v=2",
+ },
+ {
+ name: "Utilities",
+ description:
+ "Modernize utility billing, meter-to-cash workflows, and customer payments with real-time tracking and automated reminders.",
+ image: "https://picsum.photos/600/350?v=1",
+ },
+];
+
+// TODO: delete above and uncomment this
+// const industries = [
+// {
+// name: "Banking and Finance",
+// description:
+// "Transform your company's financial solutions. Improve AML and KYC compliance and reduce operating costs while increasing customer satisfaction.",
+// image:
+// "https://www.figma.com/api/mcp/asset/d48da3a6-7db6-4d57-8d1c-8bd157cf220c",
+// },
+// {
+// name: "Education and Universities",
+// description:
+// "Streamline tuition payments, campus services, and student billing with automated workflows designed for educational institutions.",
+// image:
+// "https://www.figma.com/api/mcp/asset/f6cc94b0-8742-4fc3-8476-965bdae60183",
+// },
+// {
+// name: "Insurance",
+// description:
+// "Simplify premium collections, claims processing, and policy management with intelligent automation built for insurance providers.",
+// image:
+// "https://www.figma.com/api/mcp/asset/3204408a-bf6c-48d3-a62d-64e82699389f",
+// },
+// {
+// name: "Utilities",
+// description:
+// "Modernize utility billing, meter-to-cash workflows, and customer payments with real-time tracking and automated reminders.",
+// image:
+// "https://www.figma.com/api/mcp/asset/ae6da2ac-178b-49bb-881f-a6098a7710d9",
+// },
+// ];
diff --git a/src/app/home/solutions-carousel/index.tsx b/src/app/home/solutions-carousel/index.tsx
new file mode 100644
index 0000000..1a390c4
--- /dev/null
+++ b/src/app/home/solutions-carousel/index.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import type {
+ EmblaCarouselType,
+ EmblaEventListType,
+ EmblaEventModelType,
+ EmblaOptionsType,
+} from "embla-carousel";
+import Autoplay from "embla-carousel-autoplay";
+import ClassNames from "embla-carousel-class-names";
+import useEmblaCarousel from "embla-carousel-react";
+import Image from "next/image";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { industries } from "./data";
+import TextContentSection from "./TextContentSection";
+import { useUnidirectionalEmbla } from "./useUnidirectionalEmbla";
+
+const TWEEN_FACTOR_BASE = 0.4;
+
+const clamp = (number: number, min: number, max: number): number =>
+ Math.min(Math.max(number, min), max);
+
+export function SolutionsCarousel() {
+ const [selectedIdx, setSelectedIdx] = useState(0);
+
+ const options: Partial
+
+
+ + Solutions for +
+ + ++ {activeIndustry.description} +
+
+
+
+
+ );
+}
diff --git a/src/app/home/solutions-carousel/useUnidirectionalEmbla.ts b/src/app/home/solutions-carousel/useUnidirectionalEmbla.ts
new file mode 100644
index 0000000..636a100
--- /dev/null
+++ b/src/app/home/solutions-carousel/useUnidirectionalEmbla.ts
@@ -0,0 +1,55 @@
+import type { EmblaCarouselType } from "embla-carousel";
+import { useEffect, useRef } from "react";
+
+export function useUnidirectionalEmbla(
+ emblaApi: EmblaCarouselType | undefined,
+) {
+ const startXRef = useRef
+
+
+ {industries.map((industry, idx) => (
+
+
+
+ ))}
+ {industry.name}
+