Feat/repositioning roles (#1425)

* presenting roles in the home page

* revisited home page

* landing pages for each role and home page redefined with new purpose

* lint and format fixes

Author: alexanmtz

frontend/src/components/areas/public/features/welcome/pages/open-source-page.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import OpenSourcePublicPage from 'design-library/pages/public-pages/open-source-public-page/open-source-public-page'
+
+const OpenSourcePage = () => {
+  return <OpenSourcePublicPage />
+}
+
+export default OpenSourcePage

frontend/src/components/areas/public/features/welcome/pages/private-projects-page.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import PrivateProjectsPublicPage from 'design-library/pages/public-pages/private-projects-public-page/private-projects-public-page'
+
+const PrivateProjectsPage = () => {
+  return <PrivateProjectsPublicPage />
+}
+
+export default PrivateProjectsPage

frontend/src/components/areas/public/features/welcome/pages/service-payments-page.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import ServicePaymentsPublicPage from 'design-library/pages/public-pages/service-payments-public-page/service-payments-public-page'
+
+const ServicePaymentsPage = () => {
+  return <ServicePaymentsPublicPage />
+}
+
+export default ServicePaymentsPage

frontend/src/components/areas/public/pages/public-page.tsx

@@ -11,6 +11,9 @@ import TaskListUser from '../../../../containers/tasks/task-list-user'
 import useCommonActions from '../../../../hooks/use-common-actions'
 import ExplorePage from '../features/explore/pages/explore-page'
 import PricingPage from '../features/pricing/pages/pricing-page'
+import OpenSourcePage from '../features/welcome/pages/open-source-page'
+import PrivateProjectsPage from '../features/welcome/pages/private-projects-page'
+import ServicePaymentsPage from '../features/welcome/pages/service-payments-page'
 
 const PublicPage = ({
   user,
@@ -43,6 +46,9 @@ const PublicPage = ({
         <Switch>
           <Route exact path="/" component={HomePage} />
           <Route exact path="/welcome" component={WelcomeContainer} />
+          <Route exact path="/use-cases/open-source" component={OpenSourcePage} />
+          <Route exact path="/use-cases/private-projects" component={PrivateProjectsPage} />
+          <Route exact path="/use-cases/service-payments" component={ServicePaymentsPage} />
           <Route path="/pricing" component={PricingPage} />
           {/* Team page removed - unused legacy route */}
           <Route exact path="/task/:id" component={TaskContainer} />

frontend/src/components/design-library/molecules/heroes/call-to-action-hero/call-to-action-hero.styles.ts

@@ -4,7 +4,14 @@ import Button, { ButtonProps } from '@mui/material/Button'
 import ListItem from '@mui/material/ListItem'
 import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 
-export const CallToActionHeroStyled = styled('div')(({ theme }) => ({
+type CallToActionHeroStyledProps = {
+  $withContrast?: boolean
+}
+
+export const CallToActionHeroStyled = styled('div', {
+  shouldForwardProp: (prop) => prop !== '$withContrast'
+})<CallToActionHeroStyledProps>(({ theme, $withContrast }) => ({
+  backgroundColor: $withContrast ? theme.palette.primary.contrastText : 'transparent',
   position: 'relative',
   width: '100%',
   height: 500,

frontend/src/components/design-library/molecules/heroes/call-to-action-hero/call-to-action-hero.tsx

@@ -7,9 +7,21 @@ import {
   GutterTopButton
 } from './call-to-action-hero.styles'
 
-const CallToActionHero = ({ title, actions }) => {
+type CallToActionHeroProps = {
+  title: React.ReactNode
+  actions: {
+    label: React.ReactNode
+    link: string
+    variant?: 'text' | 'outlined' | 'contained'
+    color?: 'primary' | 'secondary' | 'inherit' | 'success' | 'error' | 'info' | 'warning'
+    size?: 'small' | 'medium' | 'large'
+  }[]
+  withContrast?: boolean
+}
+
+const CallToActionHero = ({ title, actions, withContrast = true }: CallToActionHeroProps) => {
   return (
-    <CallToActionHeroStyled>
+    <CallToActionHeroStyled $withContrast={withContrast}>
       <DotLottieReactStyled src={'/lottie/developer-team.lottie'} loop autoplay />
       <BottomCTASection>
         <BottomCopy variant="h6" gutterBottom>

frontend/src/components/design-library/molecules/heroes/cards-hero/cards-hero.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+import CardsHero from './cards-hero'
+import bountyImage from 'images/roles/bounty.png'
+import notificationsImage from 'images/roles/notifications.png'
+import paymentCycleImage from 'images/roles/payment-cycle.png'
+import sharingImage from 'images/roles/sharing.png'
+
+const meta: Meta<typeof CardsHero> = {
+  title: 'Design Library/Molecules/Heroes/CardsHero',
+  component: CardsHero,
+  argTypes: {
+    title: { control: 'text' },
+    description: { control: 'text' },
+    cards: { control: 'object' }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof CardsHero>
+
+export const Default: Story = {
+  args: {
+    title: 'Choose your role',
+    description: 'Pick how you want to use Gitpay and start now.',
+    cards: [
+      {
+        type: 'maintainer',
+        title: 'Maintainer',
+        description: 'Import issues, manage bounties, and grow your open-source project.',
+        image: notificationsImage,
+        actionLabel: 'Signup as maintainer',
+        onAction: action('signup-maintainer')
+      },
+      {
+        type: 'contributor',
+        title: 'Contributor',
+        description: 'Solve issues, submit pull requests, and receive payouts for your work.',
+        image: bountyImage,
+        actionLabel: 'Signup as contributor',
+        onAction: action('signup-contributor')
+      },
+      {
+        type: 'sponsor',
+        title: 'Sponsor',
+        description: 'Fund bounties and accelerate development in projects you care about.',
+        image: sharingImage,
+        actionLabel: 'Signup as sponsor',
+        onAction: action('signup-sponsor')
+      },
+      {
+        type: 'service-provider',
+        title: 'Service Provider',
+        description: 'Request and receive payments for delivered services through Gitpay.',
+        image: paymentCycleImage,
+        actionLabel: 'Signup as service provider',
+        onAction: action('signup-service-provider')
+      }
+    ]
+  }
+}

frontend/src/components/design-library/molecules/heroes/cards-hero/cards-hero.styles.ts

@@ -0,0 +1,71 @@
+import { Button, Card, CardContent } from '@mui/material'
+import { styled } from '@mui/material/styles'
+
+type SectionProps = {
+  $withContrast?: boolean
+}
+
+export const Section = styled('section', {
+  shouldForwardProp: (prop) => prop !== '$withContrast'
+})<SectionProps>(({ theme, $withContrast }) => ({
+  padding: '1rem',
+  marginTop: 20,
+  marginBottom: 20,
+  backgroundColor: $withContrast ? theme.palette.primary.contrastText : 'transparent'
+}))
+
+export const Header = styled('div')({
+  textAlign: 'center',
+  marginBottom: 28
+})
+
+export const RoleCard = styled(Card)({
+  height: '100%'
+})
+
+export const RoleCardContent = styled(CardContent)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  textAlign: 'center',
+  height: '100%'
+})
+
+export const RoleImage = styled('img')(({ theme }) => ({
+  width: 112,
+  height: 112,
+  objectFit: 'contain',
+  marginBottom: 14,
+  [theme.breakpoints.down('sm')]: {
+    width: 92,
+    height: 92
+  }
+}))
+
+export const ActionButton = styled(Button)({
+  marginTop: 'auto'
+})
+
+export const DescriptionList = styled('ul')(({ theme }) => ({
+  listStyle: 'none',
+  margin: '20px 0 32px',
+  padding: 0,
+  width: '100%',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacing(1)
+}))
+
+export const DescriptionListItem = styled('li')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'flex-start',
+  gap: theme.spacing(1)
+}))
+
+export const DescriptionListIcon = styled('span')(({ theme }) => ({
+  color: theme.palette.primary.main,
+  display: 'inline-flex',
+  lineHeight: 1,
+  marginTop: 2
+}))

frontend/src/components/design-library/molecules/heroes/cards-hero/cards-hero.tsx

@@ -0,0 +1,100 @@
+import React from 'react'
+import { Typography } from '@mui/material'
+import { Grid } from '@mui/system'
+import { FormattedMessage } from 'react-intl'
+import {
+  Section,
+  Header,
+  RoleCard,
+  RoleCardContent,
+  RoleImage,
+  ActionButton,
+  DescriptionList,
+  DescriptionListItem,
+  DescriptionListIcon
+} from './cards-hero.styles'
+
+type CardDescriptionItem = {
+  id: string
+  defaultMessage: string
+  icon?: React.ReactNode
+}
+
+type RoleCardItem = {
+  type: string
+  title: React.ReactNode
+  description?: React.ReactNode
+  descriptionList?: CardDescriptionItem[]
+  descriptionListIcon?: React.ReactNode
+  image: string
+  actionLabel: React.ReactNode
+  onAction?: () => void
+}
+
+type CardsHeroProps = {
+  title: React.ReactNode
+  description?: React.ReactNode
+  cards: RoleCardItem[]
+  withContrast?: boolean
+}
+
+const CardsHero = ({ title, description, cards, withContrast = false }: CardsHeroProps) => {
+  return (
+    <Section $withContrast={withContrast}>
+      <Header>
+        <Typography variant="h4" gutterBottom>
+          {title}
+        </Typography>
+        {description && (
+          <Typography variant="h6" color="textSecondary">
+            {description}
+          </Typography>
+        )}
+      </Header>
+      <Grid container spacing={3} justifyContent="center">
+        {cards.map((card) => (
+          <Grid key={card.type} size={{ xs: 12, sm: 6, md: 3 }}>
+            <RoleCard>
+              <RoleCardContent>
+                <RoleImage src={card.image} alt={card.type} />
+                <Typography variant="h6" gutterBottom>
+                  {card.title}
+                </Typography>
+                {card.descriptionList?.length ? (
+                  <DescriptionList>
+                    {card.descriptionList.map((item) => (
+                      <DescriptionListItem key={item.id}>
+                        {(item.icon || card.descriptionListIcon) && (
+                          <DescriptionListIcon>
+                            {item.icon || card.descriptionListIcon}
+                          </DescriptionListIcon>
+                        )}
+                        <Typography variant="body2" color="textSecondary">
+                          <FormattedMessage id={item.id} defaultMessage={item.defaultMessage} />
+                        </Typography>
+                      </DescriptionListItem>
+                    ))}
+                  </DescriptionList>
+                ) : (
+                  <Typography variant="body2" color="textSecondary" paragraph>
+                    {card.description}
+                  </Typography>
+                )}
+                <ActionButton
+                  size="small"
+                  variant="outlined"
+                  color="primary"
+                  onClick={card.onAction}
+                >
+                  {card.actionLabel}
+                </ActionButton>
+              </RoleCardContent>
+            </RoleCard>
+          </Grid>
+        ))}
+      </Grid>
+    </Section>
+  )
+}
+
+export default CardsHero

frontend/src/components/design-library/molecules/heroes/main-hero/main-hero.tsx

@@ -35,7 +35,7 @@ const MainHero = ({ mainTitle, description, actions, image, animation }: MainHer
           </Grid>
           <Grid size={{ xs: 12, sm: 7 }}>
             <HeroTitle>
-              <Typography variant="h3" gutterBottom align="left">
+              <Typography variant="h4" gutterBottom align="left">
                 {mainTitle}
               </Typography>
             </HeroTitle>