Example working with variant

ShopPageMainSection.tsx

import { EExperimentVersion } from '@/types'

import ProductCardA, { type IProductCardAProps } from './ProductCardA'
import ProductCardC, { type IProductCardCProps } from './ProductCardC'

type PropsVariantA = {
  variant?: Extract<keyof typeof EExperimentVersion, 'a'>
} & IProductCardAProps

type PropsVariantC = {
  variant?: Extract<keyof typeof EExperimentVersion, 'c'>
} & IProductCardCProps

type PropsVariants = PropsVariantA | PropsVariantC

const ProductCard = ({ variant = 'a', ...props }: PropsVariants) => {
  switch (variant) {
    case 'c':
      return <ProductCardC {...(props as PropsVariantC)} />
    default:
      return <ProductCardA {...(props as PropsVariantA)} />
  }
}

export default ProductCard

// ---------------------------------------
// Usage:
//

export const HomeTemplate = () => (
  <>
    <Experiment variant='a'>
      <FeaturesBanner />
      <HomeHeroSection version='c' />
      <React.Suspense fallback={null}>
        <HomeHowItWorkSection />
        <HomeLessTimeCookingSection />
        <HomeSaveTimeSection />
        <HomeReviewSection />
        <HomeSuvieMealSection />
        <FinalCallToActionSection />
      </React.Suspense>
    </Experiment>

    <Experiment version='b'>
      <FeaturesBanner />
      <HomeHeroMealCentricSection />
      <React.Suspense fallback={null}>
        <HomeMealCentricSealsSection />
        <HomeMeetMealKitSystemSection />
        <HomeMealKitSelfCookSection />
        <HomeTrialMealCentricSection />
        <HomeMealCentricSection />
        <HomeReviewSection />
        <HomeCookingMethodsSection />        
        <FinalCallToActionSection />
      </React.Suspense>
    </Experiment>
  </>
)