remove channel cta

packages/atlas/src/components/_buttons/CallToActionButton/CallToActionButton.stories.tsx

@@ -11,7 +11,7 @@ export default {
 
 const Template: StoryFn<CallToActionButtonProps> = (args) => {
   return (
-    <CallToActionWrapper>
+    <CallToActionWrapper itemsCount={1}>
       <CallToActionButton {...args} />
     </CallToActionWrapper>
   )

packages/atlas/src/components/_buttons/CallToActionButton/CallToActionButton.styles.ts

@@ -15,13 +15,19 @@ const mappedColors = {
   white: cVar('colorCoreNeutral50'),
 }
 
-export const CallToActionWrapper = styled.div`
-  margin-top: ${sizes(32)};
+export const CallToActionWrapper = styled.div<{ itemsCount: number }>`
+  display: grid;
+  gap: ${sizes(4)};
+  padding-bottom: ${sizes(16)};
+  justify-items: center;
 
   ${media.md} {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-column-gap: ${sizes(6)};
+    margin: 0 auto;
+    justify-content: center;
+    grid-template-columns: repeat(auto-fit, minmax(219px, 1fr));
+    max-width: ${({ itemsCount }) => `calc(${itemsCount - 1} * ${sizes(6)} + 419px * ${itemsCount}) `};
+    gap: ${sizes(6)};
+    padding-bottom: ${sizes(24)};
   }
 `
 type IconWrapperProps = {

packages/atlas/src/components/_buttons/CallToActionButton/CallToActionButton.tsx

@@ -4,7 +4,6 @@ import { FC, MouseEvent, ReactNode } from 'react'
 import {
   SvgActionChevronR,
   SvgActionNewTab,
-  SvgSidebarChannels,
   SvgSidebarExplore,
   SvgSidebarHome,
   SvgSidebarNew,
@@ -64,13 +63,6 @@ export const CTA_MAP: Record<string, CallToActionButtonProps> = {
     colorVariant: 'green',
     icon: <SvgSidebarNew />,
   },
-  channels: {
-    label: 'Browse channels',
-    to: absoluteRoutes.viewer.channels(),
-    colorVariant: 'blue',
-    iconColorVariant: 'lightBlue',
-    icon: <SvgSidebarChannels />,
-  },
   popular: {
     label: `Popular on ${atlasConfig.general.appName}`,
     to: absoluteRoutes.viewer.popular(),

packages/atlas/src/components/_templates/VideoContentTemplate.tsx

@@ -28,7 +28,7 @@ export const VideoContentTemplate: FC<VideoContentTemplateProps> = ({ children,
         </Text>
       )}
       {children}
-      {cta && <CallToActionWrapper>{ctaContent}</CallToActionWrapper>}
+      {cta && <CallToActionWrapper itemsCount={cta.length}>{ctaContent}</CallToActionWrapper>}
     </StyledViewWrapper>
   )
 }

packages/atlas/src/views/global/YppLandingView/YppFooter.styles.ts

@@ -39,19 +39,3 @@ export const StyledButton = styled(Button)`
   margin-top: ${sizes(8)};
   background-color: ${cVar('colorCoreBaseBlack')};
 `
-
-export const CtaCardRow = styled.div<{ itemsCount: number }>`
-  display: grid;
-  gap: ${sizes(4)};
-  padding-bottom: ${sizes(16)};
-  justify-items: center;
-
-  ${media.md} {
-    margin: 0 auto;
-    justify-content: center;
-    grid-template-columns: repeat(auto-fit, minmax(219px, 1fr));
-    max-width: ${({ itemsCount }) => `calc(${itemsCount - 1} * ${sizes(6)} + 419px * ${itemsCount}) `};
-    gap: ${sizes(6)};
-    padding-bottom: ${sizes(24)};
-  }
-`

packages/atlas/src/views/global/YppLandingView/YppFooter.tsx

@@ -3,12 +3,12 @@ import { FC, ReactElement } from 'react'
 import { SvgActionChevronR, SvgActionInfo, SvgActionSpeech, SvgActionTokensStack } from '@/assets/icons'
 import { GridItem, LayoutGrid } from '@/components/LayoutGrid'
 import { Text } from '@/components/Text'
-import { CallToActionButton } from '@/components/_buttons/CallToActionButton'
+import { CallToActionButton, CallToActionWrapper } from '@/components/_buttons/CallToActionButton'
 import { atlasConfig } from '@/config'
 import { YppWidgetIcons } from '@/config/configSchema'
 import { useMediaMatch } from '@/hooks/useMediaMatch'
 
-import { CtaBanner, CtaCardRow, StyledBannerText, StyledButton } from './YppFooter.styles'
+import { CtaBanner, StyledBannerText, StyledButton } from './YppFooter.styles'
 import { StyledLimitedWidthContainer } from './YppLandingView.styles'
 
 export const configYppIconMapper: Record<YppWidgetIcons, ReactElement> = {
@@ -55,7 +55,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
         </LayoutGrid>
       </StyledLimitedWidthContainer>
       {atlasConfig.features.ypp.widgets && (
-        <CtaCardRow itemsCount={atlasConfig.features.ypp.widgets.length}>
+        <CallToActionWrapper itemsCount={atlasConfig.features.ypp.widgets.length}>
           {atlasConfig.features.ypp.widgets.map((widget) => (
             <CallToActionButton
               icon={widget.icon && configYppIconMapper[widget.icon]}
@@ -66,7 +66,7 @@ export const YppFooter: FC<YppFooterSectionProps> = ({ onSignUpClick }) => {
               to={widget.link}
             />
           ))}
-        </CtaCardRow>
+        </CallToActionWrapper>
       )}
     </>
   )

packages/atlas/src/views/viewer/HomeView.tsx

@@ -53,7 +53,7 @@ export const HomeView: FC = () => {
   }
 
   return (
-    <VideoContentTemplate cta={['popular', 'new', 'channels']}>
+    <VideoContentTemplate cta={['popular', 'new']}>
       {headTags}
       <VideoHero videoHeroData={videoHero} withMuteButton loading={loading} />
       <Container className={transitions.names.slide}>

packages/atlas/src/views/viewer/NewView/NewView.tsx

@@ -10,7 +10,7 @@ export const NewView: FC = () => {
   const headTags = useHeadTags('New & Noteworthy')
 
   return (
-    <VideoContentTemplate title="New & Noteworthy" cta={['home', 'channels', 'popular']}>
+    <VideoContentTemplate title="New & Noteworthy" cta={['home', 'popular']}>
       {headTags}
       <InfiniteVideoGrid title="Recently uploaded" onDemand />
       <ExpandableChannelsList

packages/atlas/src/views/viewer/PopularView/PopularView.tsx

@@ -10,7 +10,7 @@ import { absoluteRoutes } from '@/config/routes'
 import { useHeadTags } from '@/hooks/useHeadTags'
 import { CtaData } from '@/types/cta'
 
-const CTA: CtaData[] = ['new', 'home', 'channels']
+const CTA: CtaData[] = ['new', 'home']
 const ADDITIONAL_LINK = { name: 'Browse channels', url: absoluteRoutes.viewer.channels() }
 
 export const PopularView: FC = () => {

packages/atlas/src/views/viewer/VideoView/VideoView.tsx

@@ -434,7 +434,7 @@ export const VideoView: FC = () => {
             {sideItems}
           </LayoutGrid>
         )}
-        <StyledCallToActionWrapper>
+        <StyledCallToActionWrapper itemsCount={3}>
           {['popular', 'new', 'discover'].map((item, idx) => (
             <CallToActionButton key={`cta-${idx}`} {...CTA_MAP[item]} />
           ))}