Expandable Card Carousel

"use client";
import { ExpandableCardCarousel } from "./expandable-card-carousel";
import data from "./data.json";

export default function Page() {
  return <ExpandableCardCarousel data={data} />;
}

"use client";
import { Carousel } from "../../ui/carousel/carousel";
import { ExpandableCard, type ExpandableCardItem } from "../../ui/expandable-card/expandable-card";
import styles from "./expandable-card-carousel.module.css";

type CardData = {
  id: number;
  imageSrc: string;
  cardHeading: string;
  alt: string;
  paragraphs: string[];
};

type ExpandableCardCarouselProps = {
  data: {
    cards: CardData[];
  };
};

export function ExpandableCardCarousel({ data }: ExpandableCardCarouselProps) {
  const items: ExpandableCardItem[] = data.cards.map((card) => ({
    id: card.id,
    imageSrc: card.imageSrc,
    cardHeading: card.cardHeading,
    alt: card.alt,
    content: (
      <div className={styles.content}>
        {card.paragraphs.map((paragraph) => (
          <p key={paragraph}>{paragraph}</p>
        ))}
      </div>
    ),
  }));

  return (
    <div className={styles.wrapper}>
      <header className={styles.header}>
        <h2 className={styles.heading}>
          Our Three Core
          <br />
          Philosophies
        </h2>
        <p className={styles.description}>
          The principles that guide everything we create, from design decisions to the experiences we craft for our
          users.
        </p>
      </header>
      <Carousel.Bleed className={styles.bleed}>
        <Carousel.Root align="start" className={styles.carouselRoot} gap={24} totalItems={items.length} variant="inset">
          <Carousel.Viewport>
            <Carousel.Content className={styles.content}>
              {items.map((item, index) => (
                <Carousel.Item index={index} key={item.id}>
                  <ExpandableCard item={item} />
                </Carousel.Item>
              ))}
            </Carousel.Content>
          </Carousel.Viewport>
        </Carousel.Root>
      </Carousel.Bleed>
    </div>
  );
}

.wrapper {
  width: 100%;
  max-width: 100%;
  padding: 24px 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
  padding-inline: 1rem;
}

.heading {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  color: var(--foreground);
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.description {
  font-size: var(--font-size-sm);
  color: var(--muted-foreground);
  margin: 0;
  max-width: 360px;
  text-align: left;
}

@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }

  .heading {
    font-size: clamp(1.875rem, 5vw, 2.75rem);
  }
}

.bleed {
}

.carouselRoot {
}

.content {
  height: 50vh;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1100px) {
  .header {
    max-width: 1008px;
    margin-left: auto;
    margin-right: auto;
    padding-inline: 0;
  }

  .bleed {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    left: auto;
    right: auto;
    display: flex;
    justify-content: center;
  }

  .carouselRoot {
    width: auto;
  }
}

.content p {
  margin: 0 0 1rem 0;
}

.content p:last-child {
  margin-bottom: 0;
}

{
  "cards": [
    {
      "id": 1,
      "imageSrc": "/p-01.svg",
      "cardHeading": "Eudaimonia",
      "alt": "Figure contemplating under an archway at dusk",
      "paragraphs": [
        "Aristotle taught that eudaimonia, or human flourishing, is not found in fleeting pleasures or material wealth, but in living a life of virtue and purpose. It is the highest good, achieved through the cultivation of character and the exercise of reason.",
        "We build not for momentary delight, but for lasting excellence. Every interface, every interaction is an opportunity to help users flourish in their work and creative pursuits.",
        "This philosophy shapes how we approach every decision. When faced with a choice between what is easy and what is meaningful, we choose meaning. When tempted by trends, we return to timeless principles.",
        "The pursuit of eudaimonia reminds us that software is not merely functional -it is formative. The tools we create shape how people think, work, and ultimately, how they live."
      ]
    },
    {
      "id": 2,
      "imageSrc": "/p-02.svg",
      "cardHeading": "Ataraxia",
      "alt": "Serene figure amidst classical columns at night",
      "paragraphs": [
        "The Stoics and Epicureans alike sought ataraxia: a state of serene calmness, undisturbed by the chaos of the world. It emerges not from avoidance, but from clarity of mind and freedom from unnecessary complexity.",
        "Our designs embrace this tranquility. We strip away the superfluous, leaving only what serves. In simplicity, we find peace; in clarity, we find power.",
        "Every element earns its place. We question each line, each shadow, each interaction. Does it serve the user? Does it bring clarity? If not, it does not belong.",
        "This restraint is not minimalism for its own sake -it is respect for attention. In a world that constantly demands more, we offer less, so that what remains matters more."
      ]
    },
    {
      "id": 3,
      "imageSrc": "/p-03.svg",
      "cardHeading": "Arete",
      "alt": "Wanderer on a path toward distant pillars",
      "paragraphs": [
        "Arete speaks to excellence: the fulfillment of purpose, the realization of potential. For the ancient Greeks, it meant living up to one's highest nature, whether as an athlete, a philosopher, or an artisan.",
        "We pursue arete in every pixel and every line of code. Not perfection for its own sake, but excellence in service of those who use what we create.",
        "Excellence is not a destination but a practice. It lives in the details others overlook, in the edge cases others ignore, in the refinements that users feel but never see.",
        "Through arete, craft becomes art. What begins as function transforms into something that inspires -not through excess, but through the relentless pursuit of doing one thing exceptionally well."
      ]
    }
  ]
}