[website] Migrate Product-Templates page to use CSS theme variables

[EduardoSCosta]

Migrate product-templates page from #34880

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34913--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against e242efe

[EduardoSCosta]

I'm getting the following error:

caused by in the IconImage component inside TemplateHero.tsx.

<IconImage name="product-templates" />

It happens after change to BrandingCssVarsProvider.

Another problem, StoreTemplateImage in StoreTemplatesBanner.tsx gives me the following warning:
Warning: Prop `src` did not match. Server: "/static/branding/store-templates/template-light5.jpeg" Client: "/static/branding/store-templates/template-dark5.jpeg"

[siriwatknp]

IconImage

@EduardoSCosta This PR should fix the problem: #34914.

[siriwatknp]

For the StoreTemplateBanner.tsx, please try this:

5. img switch between color modes

From StoreTemplatesBanner.tsx.

Example code:

const globalTheme = useTheme();
  const mode = globalTheme.palette.mode;
  return (
    <Image
      ref={ref}
      src={`/static/branding/store-templates/template-${mode}${Object.keys(linkMapping).indexOf(brand) + 1}.jpeg`}
      alt=""
      {...props}
    />
  );

Migrated code: use CSS content: url(...):

<Image
  ref={ref}
  src={`/static/branding/store-templates/template-light${Object.keys(linkMapping).indexOf(brand) + 1}.jpeg`}
  alt=""
  sx={(theme) =>
    theme.applyDarkStyles({
      content: `url(/static/branding/store-templates/template-dark${Object.keys(linkMapping).indexOf(brand) + 1}.jpeg)`,
    })
  }
  {...props}
/>

[siriwatknp]

👍 Thanks for your contribution! looks good to me.