Skip to content

KTL-3869: kmp landing: case studies #5220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
zoobestik merged 12 commits into from
Dec 10, 2025
Merged

KTL-3869: kmp landing: case studies #5220

zoobestik merged 12 commits into from
Dec 10, 2025

Conversation

@zoobestik
Copy link
Collaborator

@zoobestik zoobestik commented Dec 8, 2025

This pull request refactors the case studies and customer logo marquee features to improve reusability and composability across multiple landing pages.

It introduces context-based filtering for case studies, modularizes the customer logo marquee component, and updates usage in relevant landing pages.

Case Studies Filtering and Context Refactor

  • Introduced a React context (CaseStudiesContext) and provider components (FilteredCasesProvider, RouterCasesProvider) for filtered case studies, enabling flexible filtering and preprocessing of case study data via context instead of direct hooks.
  • Updated the main case studies landing page to use RouterCasesProvider for context-based filtering, simplifying data flow and enabling easier composition.
  • Added a specialized case studies grid for the multiplatform landing page, with highlighted and sorted items using the new provider and preprocessing pattern.
  • Integrated the new case studies grid into the multiplatform landing page.

Customer Logo Marquee Modularization

  • Refactored the customer logo marquee into a reusable component (components/customer-logo-marquee), now accepting a list of logo items as a prop rather than using internal static data.
  • Moved logo data to a separate file (server-side-logos.ts), typed with the new LogoItem interface, and updated imports accordingly.
  • Updated the server-side and multiplatform landing pages to use the modularized logo marquee component and shared logo data.

@zoobestik zoobestik force-pushed the ktl-3869-kmp-landing-case-studies branch from 6f6e6c0 to 17d467e Compare December 8, 2025 19:04
nikpachoo
nikpachoo reviewed Dec 8, 2025
View reviewed changes
data/case-studies/case-studies.yml Outdated
Comment on lines 15 to 17
carousel:
logo: /images/case-studies/duolingo-logo.svg
link: 'https://youtu.be/RJtiFt5pbfs'
Copy link
Collaborator

@nikpachoo nikpachoo Dec 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that the carousel's logo is often the same as the main one.
What do you think making it optional? Use the main one if there's no special one for carousel.

Copy link
Collaborator Author

@zoobestik zoobestik Dec 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ fixed

See data/case-studies/case-studies.yml

Examples

  1. If case doesn't have carousel it will not be shown in carousel. (not all logos are ready)
  2. Custom logo only: 
    carousel:
  logo: /images/case-studies/carousel/google.svg
  3. All default settings ready for carusel: 
    carousel: true
  4. With custom link AND/OR: 
     carousel:
   logo: /images/case-studies/carousel/aws.svg
   link: https://www.youtube.com/live/Ar73Axsz2YA?si=E2qlkuznF9B2MXou&t=2766

Also

I've add alternateLogo as logo for dark background.
It has a special logic for carousel logo: customer-logo-marquee/multiplatform-logos.ts

But i'm not sure it will be clear for operators of yaml

@zoobestik zoobestik force-pushed the ktl-3875-kmp-landing-page-choose branch from 5c9977f to dae3587 Compare December 9, 2025 13:45
Base automatically changed from ktl-3875-kmp-landing-page-choose to ktl-3875-kmp-landing-page December 9, 2025 13:49
@zoobestik zoobestik force-pushed the ktl-3869-kmp-landing-case-studies branch from 17d467e to b9c97b7 Compare December 9, 2025 19:02
@zoobestik zoobestik marked this pull request as ready for review December 9, 2025 19:03
@zoobestik zoobestik force-pushed the ktl-3869-kmp-landing-case-studies branch from b9c97b7 to 8aaaea8 Compare December 9, 2025 19:04
zoobestik
zoobestik commented Dec 9, 2025
View reviewed changes
Copy link
Collaborator Author

@zoobestik zoobestik left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done, i wait your response.

data/case-studies/case-studies.yml Outdated
Comment on lines 15 to 17
carousel:
logo: /images/case-studies/duolingo-logo.svg
link: 'https://youtu.be/RJtiFt5pbfs'
Copy link
Collaborator Author

@zoobestik zoobestik Dec 9, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

✅ fixed

See data/case-studies/case-studies.yml

Examples

  1. If case doesn't have carousel it will not be shown in carousel. (not all logos are ready)
  2. Custom logo only: 
    carousel:
  logo: /images/case-studies/carousel/google.svg
  3. All default settings ready for carusel: 
    carousel: true
  4. With custom link AND/OR: 
     carousel:
   logo: /images/case-studies/carousel/aws.svg
   link: https://www.youtube.com/live/Ar73Axsz2YA?si=E2qlkuznF9B2MXou&t=2766

Also

I've add alternateLogo as logo for dark background.
It has a special logic for carousel logo: customer-logo-marquee/multiplatform-logos.ts

But i'm not sure it will be clear for operators of yaml

nikpachoo
nikpachoo approved these changes Dec 9, 2025
View reviewed changes
Copy link
Collaborator

@nikpachoo nikpachoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏👏👏

@zoobestik zoobestik force-pushed the ktl-3869-kmp-landing-case-studies branch 2 times, most recently from 5275b6c to 09a83cb Compare December 10, 2025 14:18
@zoobestik
feat(multiplatform): add filtered case studies section and improve ca…
5a3e9a5 
…se studies provider functionality

- Introduce `MultiplatformCaseStudies` component and integrate with the `FilteredCasesProvider`.
- Implement new filtering logic with customizable `FilterOptions` for case studies.
- Add `RouterCasesProvider` for dynamic filters from router query parameters.
- Update `multiplatform/index.tsx` to include the new filtered case studies section.
- Refactor `case-studies/index.tsx` to utilize `RouterCasesProvider` for better data handling and maintainability.

# Conflicts:
#	pages/multiplatform/index.tsx
@zoobestik
feat(components): migrate and enhance CustomerLogoMarqueeSection
65c865e 
- Move `CustomerLogoMarqueeSection` and related assets to `components` for improved modularity.
- Refactor `CustomerLogoMarqueeSection` to accept dynamic `items` prop instead of hardcoded data.
- Update `server-side` and `multiplatform` page implementations to use the updated component.
- Enhance maintainability by restructuring logo data into `server-side-logos` with proper typings.
@zoobestik
feat(multiplatform): improve filtering and highlight logic in case st…
0472c47 
…udies

- Refactor `use-filtered-cases.tsx` to adjust preprocessing and filtering order for better data handling.
- Enhance `grid.tsx` with immutable types (`as const` and `Object.freeze`) for stricter typing.
- Update `CASES_HIGHLIGHTED` logic to reverse order and limit the number of highlighted items dynamically.
@zoobestik
feat(components): reorganize customer logo data for cleanup
89fdf49
@zoobestik
feat(multiplatform): enhance styling and improve CustomerLogoMarqueeS…
e6b5c10 
…ection integration

- Add responsive styles for customer logo block using new CSS module.
- Update `CustomerLogoMarqueeSection` to support `className` prop for flexibility.
- Integrate updated `className` prop in `CustomerLogos` module.
@zoobestik
feat(multiplatform): add dark mode support for case studies with alte…
98585e1 
…rnate logos

- Introduce `mode` prop for `CaseStudyCard` to enable dark mode styling.
- Add support for `alternateLogo` in `case-studies.yml` to provide dark mode assets.
- Update `CaseStudiesGrid` and `CaseStudies` components to handle `rock` mode display.
- Implement centralized logo logic in `CaseStudyCardText` for better asset selection.
- Enhance CSS for dark and light themes in `case-studies-card.module.css`.
- Add `Explore more customer stories` button with navigation logic in `CaseStudies`.
@zoobestik
feat(multiplatform): enhance multiplatform logos processing and updat…
1c80573 
…e case studies data

- Refactor `multiplatform-logos.ts` to improve link and logo selection logic with support for alternate assets and YouTube links.
- Simplify and standardize `carousel` field usage in `case-studies.yml` by consolidating properties and reducing redundancy.
- Ensure consistent handling of logos and links for multiplatform case studies.
@zoobestik
feat(case-studies): improve grid structure and add responsive section…
d40461c 
… layout

- Refactor `CaseStudiesGrid` to support `className` prop and improve composability.
- Introduce `CaseStudiesSection` for wrapping grid layout in a semantic section.
- Update `grid.module.css` with new responsive styles for section and grid containers.
- Add responsive button sizing in `CaseStudies` using `useMS` hook.
@zoobestik
feat(multiplatform): update containers to semantic tags and enhance s…
e508c59 
…tyling

- Replace `<div>` with semantic tags like `<section>` and `<article>` for better accessibility and structure across multiplatform components.
- Add responsive styling to FAQ and customer logo sections for consistency.
- Integrate `faq-block.module.css` for improved layout and maintainability of FAQ component.

# Conflicts:
#	blocks/multiplatform/choose-share/blocks/where/index.tsx
@zoobestik
feat(case-studies): add responsive font styling for titles in grids
b34faf7
@zoobestik
feat(case-studies): add responsive font styling for titles in grids
0317200
@zoobestik
feat(case-studies): add alternate logos and carousel configuration
e518350 
- Introduce `alternateLogo` field for dark background assets in `case-studies.json`.
- Add `carousel` field with support for enabling or customizing homepage carousel visuals.
- Update YAML documentation with examples and guidelines for new fields.
@zoobestik zoobestik force-pushed the ktl-3869-kmp-landing-case-studies branch from caa25c7 to e518350 Compare December 10, 2025 22:04
@zoobestik zoobestik merged commit 7f82148 into ktl-3875-kmp-landing-page Dec 10, 2025
@zoobestik zoobestik deleted the ktl-3869-kmp-landing-case-studies branch December 10, 2025 22:05
zoobestik added a commit that referenced this pull request Dec 10, 2025
@zoobestik
Merge pull request #5220 from JetBrains/ktl-3869-kmp-landing-case-stu…
009b8d7 
…dies

KTL-3869: kmp landing: case studies
zoobestik added a commit that referenced this pull request Dec 17, 2025
@zoobestik
Merge pull request #5220 from JetBrains/ktl-3869-kmp-landing-case-stu…
254ef88 
…dies

KTL-3869: kmp landing: case studies
zoobestik added a commit that referenced this pull request Dec 18, 2025
@zoobestik
Merge pull request #5220 from JetBrains/ktl-3869-kmp-landing-case-stu…
3edbade 
…dies

KTL-3869: kmp landing: case studies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nikpachoo nikpachoo nikpachoo approved these changes

@krutilov krutilov Awaiting requested review from krutilov

@berezinant berezinant Awaiting requested review from berezinant

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@zoobestik @nikpachoo