fix(#2526): create highlights page with form and price information

src/config/lexics/highlightsPageLexic.tsx

@@ -0,0 +1,15 @@
+export const highlightsPageLexic = {
+  add_summary: 18360,
+  background_music: 18359,
+  choose_player: 18362,
+  get_highlights: 18355,
+  highlight_will_be_generated: 18364,
+  matches_highlight: 419,
+  maximal_duration: 18358,
+  player_highlight: 630,
+  price: 18356,
+  purchase_auto_generated: 18363,
+  sport_highlight: 15115,
+  team_highlight: 657,
+  watch_demo: 18357,
+}

src/config/lexics/indexLexics.tsx

@@ -1,6 +1,7 @@
 import { paymentLexics } from './payment'
 import { proceduresLexics } from './procedures'
 import { publicLexics } from './public'
+import { highlightsPageLexic } from './highlightsPageLexic'
 
 const matchPopupLexics = {
   actions: 1020,
@@ -154,6 +155,7 @@ export const indexLexics = {
   watch_now: 13020,
 
   ...confirmPopup,
+  ...highlightsPageLexic,
   ...preferencesPopupLexics,
   ...proceduresLexics,
   ...matchPopupLexics,

src/config/pages.tsx

@@ -1,5 +1,6 @@
 export const PAGES = {
   about_the_project: 'https://instatsport.com/InStatTV/ott_platform',
+  highlights: '/highlights',
   home: '/',
   match: '/matches',
   matomoInstatBaseUrl: 'https://matomo.instat.tv/',

src/features/App/AuthenticatedApp.tsx

@@ -33,6 +33,7 @@ const MatchPage = lazy(() => import('features/MatchPage'))
 const PlayerPage = lazy(() => import('features/PlayerPage'))
 const TournamentPage = lazy(() => import('features/TournamentPage'))
 const SystemSettings = lazy(() => import('features/SystemSettings'))
+const HighlightsPage = lazy(() => import('pages/HighlightsPage'))
 
 export const AuthenticatedApp = () => {
   useLexicsConfig(indexLexics)
@@ -73,6 +74,9 @@ export const AuthenticatedApp = () => {
                           <Route path={`/:sportName${PAGES.match}/:pageId`}>
                             <MatchPage />
                           </Route>
+                          <Route path={`${PAGES.highlights}`}>
+                            <HighlightsPage />
+                          </Route>
                           <Redirect to={PAGES.home} />
                         </Switch>
                         {!isProduction && <SystemSettings />}

src/features/AuthServiceApp/components/Login/index.tsx

@@ -5,7 +5,7 @@ import { RecoveryPopup } from 'features/AuthServiceApp/components/RecoveryPopup'
 import { PAGES } from '../../config/pages'
 import { LanguageSelect } from '../LanguageSelect'
 import { PasswordInput } from '../PasswordInput'
-import { Input } from '../Input'
+import { Input } from '../../../../components/Input'
 import { Logo } from '../Logo'
 import { useLoginForm } from './hooks'
 import {

src/features/AuthServiceApp/components/PasswordInput/index.tsx

@@ -6,7 +6,7 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { useToggle } from 'hooks/useToggle'
 
-import { Input } from '../Input'
+import { Input } from '../../../../components/Input'
 
 const VisibilityButton = styled.button`
   border: none;

src/features/AuthServiceApp/components/RecoveryPopup/index.tsx

@@ -17,7 +17,7 @@ import {
   Body,
 } from './styled'
 
-import { Input } from '../Input'
+import { Input } from '../../../../components/Input'
 import { InputGroup, Error } from '../../styled'
 
 type Props = {

src/features/AuthServiceApp/components/Registration/index.tsx

@@ -8,7 +8,7 @@ import { client } from 'features/AuthServiceApp/config/clients'
 
 import { LanguageSelect } from '../LanguageSelect'
 import { PasswordInput } from '../PasswordInput'
-import { Input } from '../Input'
+import { Input } from '../../../../components/Input'
 import { Logo } from '../Logo'
 import { useRegistrationForm } from './hooks'
 import {

src/features/Combobox/index.tsx

@@ -38,6 +38,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     noSearch,
     title,
     withError,
+    wrapperHeight,
   } = props
 
   const {
@@ -62,6 +63,7 @@ export const Combobox = <T extends Option>(props: Props<T>) => {
     <Column isUserAccountPage={isUserAccountPage} className={className}>
       <InputWrapper
         error={error}
+        wrapperHeight={wrapperHeight}
       >
         <Label>
           <LabelTitle

src/features/Combobox/types.tsx

@@ -30,4 +30,6 @@ export type Props<T> = Pick<InputHTMLAttributes<HTMLInputElement>, (
   selected?: boolean,
   value: string,
   withError?: boolean,
+  wrapperHeight?: number,
+
 }

src/features/Common/Input/index.tsx

@@ -3,16 +3,18 @@ import { useRouteMatch } from 'react-router-dom'
 
 import { T9n } from 'features/T9n'
 import { useLexicsStore } from 'features/LexicsStore'
+import { Icon } from 'features/Icon'
+
 import { PAGES } from 'config'
 
 import {
   WrapperProps,
   InputWrapper,
   InputStyled,
+  LabelAfter,
   Label,
   LabelTitle,
   Error,
-  Icon,
   Column,
 } from './styled'
 
@@ -22,8 +24,11 @@ type Props = {
   defaultValue?: string,
   disabled?: boolean,
   editIcon?: boolean,
+  iconName?: string,
   inputWidth?: number,
   label?: string,
+  labelAfter?: string,
+  labelAfterLexic?: string,
   labelLexic?: string,
   labelWidth?: number,
   maxLength?: number,
@@ -45,8 +50,11 @@ export const Input = ({
   disabled,
   editIcon = false,
   error,
+  iconName,
   inputWidth,
   label,
+  labelAfter,
+  labelAfterLexic,
   labelLexic,
   labelWidth,
   maxLength,
@@ -59,6 +67,7 @@ export const Input = ({
   type,
   value,
   withError = true,
+  wrapperHeight,
   wrapperWidth,
 }: Props) => {
   const { translate } = useLexicsStore()
@@ -68,6 +77,7 @@ export const Input = ({
     <Column isUserAccountPage={isUserAccountPage} className={className}>
       <InputWrapper
         wrapperWidth={wrapperWidth}
+        wrapperHeight={wrapperHeight}
         hasRightIcon={editIcon}
         error={error}
       >
@@ -92,7 +102,13 @@ export const Input = ({
             placeholder={translate(labelLexic || '')}
             isUserAccountPage={isUserAccountPage}
           />
-          {editIcon && <Icon image='edit-icon' />}
+          {value && (
+            <LabelAfter>
+              {labelAfterLexic ? <T9n t={labelAfterLexic} /> : labelAfter}
+            </LabelAfter>
+          )}
+          {iconName
+            && <Icon size={15} color='white' refIcon={iconName} className={`${iconName}__input`} />}
         </Label>
       </InputWrapper>
       {withError && <Error t={error || ''} />}

src/features/Common/Input/styled.tsx

@@ -9,12 +9,13 @@ import { isMobileDevice } from 'config/userAgent'
 export type WrapperProps = {
   error?: string | null,
   hasRightIcon?: boolean,
+  wrapperHeight?: number,
   wrapperWidth?: number,
 }
 
 export const wrapperStyles = css<WrapperProps>`
   width: ${({ wrapperWidth }) => (wrapperWidth ? `${wrapperWidth}px` : '100%')};
-  height: 2.2rem;
+  height: ${({ wrapperHeight }) => (wrapperHeight ? `${wrapperHeight}px` : '2.2rem')};
   margin-top: 20px;
   padding-left: 24px;
   padding-right: ${({ hasRightIcon = 24 }) => (hasRightIcon ? '62px' : '24px')};
@@ -23,7 +24,7 @@ export const wrapperStyles = css<WrapperProps>`
   display: flex;
   align-items: center;
   background-color: #3F3F3F;
-  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
+  box-shadow: 0px 1px 1px rgba(43, 30, 30, 0.3);
   border-radius: 2px;
   border: 1px solid ${(({ error }) => (isNil(error) ? 'transparent' : '#E64646'))};
   border-width: 1px;
@@ -183,23 +184,30 @@ export const Error = styled(T9n)<ErrorProps>`
       : ''
   )}
 `
+export const LabelAfter = styled.p<TitleProps>`
+  font-style: normal;
+  font-weight: normal;
+  white-space: nowrap;
+  font-size: 0.8rem;
+  line-height: 24px;
+  letter-spacing: -0.01em;
+  padding-top: 2px;
+  color: ${({ theme: { colors } }) => colors.secondary};
+  width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
+  min-width: ${({ labelWidth }) => (labelWidth ? `${labelWidth}px` : '')};
 
-export const Icon = styled.div<{ image: string }>`
+  @media ${devices.tablet} {
-  position: absolute;
+    font-size: 1.6rem;
-  right: 22px;
+    width: 9rem;
-  top: 50%;
+  }
-  width: 24px;
-  height: 24px;
-  transform: translateY(-50%);
-  background-image: url(/images/${({ image }) => `${image}.svg`});
-  background-size: 100%;
-  background-repeat: no-repeat;
-  cursor: pointer;
   ${isMobileDevice
     ? css`
-      width: 18px;
+      @media (max-width: 650px){
-      height: 18px;
+        display: block;
-      right: 11px;
+        padding-left: 10px;
+        font-size: 12px;
+        width: auto;
+      }
     `
-    : ''}
+    : ''};
 `

src/features/ProfileCard/hooks.tsx

@@ -9,7 +9,12 @@ import { usePageParams } from 'hooks/usePageParams'
 import { useUserFavoritesStore } from 'features/UserFavorites/store'
 
 export const useProfileCard = () => {
-  const { addRemoveFavorite, userFavorites } = useUserFavoritesStore()
+  const {
+    addRemoveFavorite,
+    setPlayerHighlight,
+    userFavorites,
+  } = useUserFavoritesStore()
+
   const {
     profileId,
     profileType,
@@ -44,6 +49,7 @@ export const useProfileCard = () => {
     isFavorite,
     profileId,
     profileType,
+    setPlayerHighlight,
     sportType,
     toggleFavorites,
   }

src/features/ProfileCard/index.tsx

@@ -1,6 +1,8 @@
+import { Link } from 'react-router-dom'
+
 import type { ObjectWithName } from 'features/Name'
 
-import { ProfileTypes } from 'config'
+import { PAGES, ProfileTypes } from 'config'
 
 import { T9n } from 'features/T9n'
 import { useName } from 'features/Name'
@@ -16,10 +18,12 @@ import {
   ProfileName,
   InfoFlag,
   StyledLink,
+  SсBtnWrapper,
+  SсGetHighlightBtn,
 } from './styled'
 import { useProfileCard } from './hooks'
 
-type Props = {
+export type ProfileType = {
   profile: ObjectWithName & {
     additionalInfo: ObjectWithName & {
       id: number,
@@ -28,13 +32,14 @@ type Props = {
   },
 }
 
-export const ProfileCard = ({ profile }: Props) => {
+export const ProfileCard = ({ profile }: ProfileType) => {
   const name = useName(profile || {})
 
   const {
     isFavorite,
     profileId,
     profileType,
+    setPlayerHighlight,
     sportType,
     toggleFavorites,
   } = useProfileCard()
@@ -65,10 +70,17 @@ export const ProfileCard = ({ profile }: Props) => {
             )
             : <InfoName nameObj={profile.additionalInfo} />}
         </InfoItems>
-        <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
+        <SсBtnWrapper>
-          <StarIcon isFavorite={isFavorite} />
+          <FavoriteButton isFavorite={isFavorite} onClick={toggleFavorites}>
-          <T9n t='add_to_favorites' />
+            <StarIcon isFavorite={isFavorite} />
-        </FavoriteButton>
+            <T9n t='add_to_favorites' />
+          </FavoriteButton>
+          <Link to={PAGES.highlights}>
+            <SсGetHighlightBtn onClick={() => setPlayerHighlight(profile)}>
+              <T9n t='get_highlights' />
+            </SсGetHighlightBtn>
+          </Link>
+        </SсBtnWrapper>
       </Details>
     </Wrapper>
   )

src/features/ProfileCard/styled.tsx

@@ -5,6 +5,7 @@ import { isMobileDevice } from 'config/userAgent'
 
 import { ProfileLogo } from 'features/ProfileLogo'
 import { ProfileLink } from 'features/ProfileLink'
+import { ButtonSolid } from 'features/Common'
 import { Name } from 'features/Name'
 
 export const Wrapper = styled.div`
@@ -167,3 +168,22 @@ export const StyledLink = styled(ProfileLink)`
     text-decoration: underline;
   }
 `
+
+export const SсBtnWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+`
+
+export const SсGetHighlightBtn = styled(ButtonSolid)`
+  background-color: white;
+  color: #000000;
+  display: flex;
+  align-items: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  width: fit-content;
+  height: 1.95rem;
+  border-radius: 13px;
+  margin-left: 5px;
+`

src/features/UserAccount/components/PersonalInfoForm/index.tsx

@@ -51,7 +51,7 @@ export const PersonalInfoForm = (props: Props) => {
         autoComplete='given-name'
         labelWidth={labelWidth}
         onChange={updateFormValue(firstname)}
-        editIcon
+        iconName='Edit'
         maxLength={500}
         withError={false}
       />
@@ -61,7 +61,7 @@ export const PersonalInfoForm = (props: Props) => {
         autoComplete='family-name'
         labelWidth={labelWidth}
         onChange={updateFormValue(lastname)}
-        editIcon
+        iconName='Edit'
         maxLength={500}
         withError={false}
       />
@@ -73,7 +73,7 @@ export const PersonalInfoForm = (props: Props) => {
         labelWidth={labelWidth}
         onChange={updateFormValue(phone)}
         error={readFormError(phone)}
-        editIcon
+        iconName='Edit'
         maxLength={100}
         withError={false}
       />

src/features/UserAccount/index.tsx

@@ -1,4 +1,4 @@
-import { Route } from 'react-router-dom'
+import { Route, Link } from 'react-router-dom'
 
 import { PAGES } from 'config'
 import { isProduction } from 'config/env'
@@ -24,6 +24,7 @@ import {
   Navigations,
   StyledLink,
   UserAccountWrapper,
+  ScButtonGetHighlight,
 } from './styled'
 import { CompanyInfo } from '../CompanyInfo'
 import { PoweredByInstat } from './components/PoweredByInstat/PoweredByInstat'
@@ -70,6 +71,11 @@ const UserAccount = () => {
             </StyledLink>
 
             <ScoreSwitch />
+            <Link to={`${PAGES.highlights}`}>
+              <ScButtonGetHighlight>
+                <T9n t='get_highlights' />
+              </ScButtonGetHighlight>
+            </Link>
           </Navigations>
         </Aside>
         <ContentWrapper>

src/features/UserAccount/styled.tsx

@@ -258,3 +258,12 @@ export const InlineButton = styled.button<InlineButtonProps>`
     opacity: 0.5;
   }
 `
+
+export const ScButtonGetHighlight = styled(ButtonOutline)`
+  max-width: 130px;
+  max-height: 50px;
+  margin: 15px 0;
+  border: 1px solid #FFFFFF;
+  border-radius: 5px;
+  filter: drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.3));
+`

src/features/UserFavorites/hooks/index.tsx

@@ -2,16 +2,26 @@ import { useCallback, useState } from 'react'
 
 import find from 'lodash/find'
 
+import type { ObjectWithName } from 'features/Name'
+
 import type { UserFavorites } from 'requests'
 import { modifyUserFavorites, getUserFavorites } from 'requests'
 
 import { useToggle } from 'hooks/useToggle'
 import { ProfileTypes } from 'config'
 
+type ProfileType = ObjectWithName & {
+  additionalInfo: ObjectWithName & {
+    id: number,
+    tournamentId?: number,
+  },
+}
+
 type Args = Parameters<typeof modifyUserFavorites>[0]
 
 export const useUserFavorites = () => {
   const [userFavorites, setUserFavorites] = useState<UserFavorites>([])
+  const [playerHighlight, setPlayerHighlight] = useState<ProfileType>({} as ProfileType)
 
   const {
     close,
@@ -42,6 +52,8 @@ export const useUserFavorites = () => {
     isInFavorites,
     isOpen,
     open,
+    playerHighlight,
+    setPlayerHighlight,
     userFavorites,
   }
 }

src/libs/index.ts

@@ -7,6 +7,7 @@ export { Football } from './objects/Football'
 export { Hockey } from './objects/Hockey'
 export { Handball } from './objects/Handball'
 export { Volleyball } from './objects/Volleyball'
+export { Search } from './objects/Search'
 export { Star } from './objects/Star'
 export { Dollar } from './objects/Dollar'
 export { Close } from './objects/Close'

src/libs/objects/Search.tsx

@@ -0,0 +1,20 @@
+export const Search = () => (
+  <svg
+    width='100%'
+    height='100%'
+    viewBox='0 0 25 25'
+    fill='none'
+    xmlns='http://www.w3.org/2000/svg'
+  >
+    <circle cx='10.5' cy='10.5' r='9' stroke='#999999' strokeWidth='3' />
+    <rect
+      x='18.0607'
+      y='15.9393'
+      width='9.01471'
+      height='3'
+      rx='1.5'
+      transform='rotate(45 18.0607 15.9393)'
+      fill='#999999'
+    />
+  </svg>
+)

src/pages/HighlightsPage/components/FormHighlights/hooks.tsx

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+import { getSportList } from 'requests/getSportList'
+
+export const useHighlightsForm = () => {
+  const [sports, setSports] = useState<any>()
+  const players: any = []
+
+  console.log('sports', sports)
+  useEffect(() => {
+    getSportList().then(setSports)
+    // getTeams().then(teams)
+  }, [])
+  return {
+    players,
+    sports,
+    // teams,
+  }
+}

src/pages/HighlightsPage/components/FormHighlights/index.tsx

@@ -0,0 +1,114 @@
+import { Combobox } from 'features/Combobox'
+import { Input } from 'features/Common'
+import { T9n } from 'features/T9n'
+import { useUserFavoritesStore } from 'features/UserFavorites/store'
+
+import { useHighlightsForm } from './hooks'
+
+import {
+  ScWrapper,
+  ScTitle,
+  ScText,
+  ScInputGroup,
+  ScForm,
+  ScInfoBlock,
+} from './styled'
+
+const labelWidth = 180
+const wrapperHeight = 50
+
+export const FormHighlights = () => {
+  const { sports } = useHighlightsForm()
+  const { playerHighlight } = useUserFavoritesStore()
+
+  return (
+    <ScWrapper>
+      <ScInfoBlock>
+        <ScTitle>
+          <T9n t='choose_player' />
+        </ScTitle>
+        <ScText>
+          <T9n t='purchase_auto_generated' /><br />
+          <T9n
+            t='highlight_will_be_generated'
+            className='highlight_will_be_generated'
+          />
+        </ScText>
+      </ScInfoBlock>
+      <ScForm>
+        <ScInputGroup>
+          <Combobox
+            noSearch
+            selected
+            labelLexic='sport_highlight'
+            labelWidth={labelWidth}
+            value='123'
+            onSelect={() => console.log(123)}
+            options={sports}
+            maxLength={500}
+            withError={false}
+            wrapperHeight={wrapperHeight}
+          />
+          <Input
+            value='Team'
+            labelLexic='team_highlight'
+            autoComplete='family-name'
+            labelWidth={labelWidth}
+            onChange={() => console.log('lkdsmfkl')}
+            iconName='Search'
+            maxLength={500}
+            withError={false}
+            wrapperHeight={wrapperHeight}
+          />
+          <Input
+            value='Player'
+            labelLexic='player_highlight'
+            autoComplete='family-name'
+            labelWidth={labelWidth}
+            onChange={() => console.log('lkdsmfkl')}
+            iconName='Search'
+            maxLength={500}
+            withError={false}
+            wrapperHeight={wrapperHeight}
+          />
+          <Input
+            value='Player'
+            labelLexic='maximal_duration'
+            autoComplete='family-name'
+            labelWidth={labelWidth}
+            onChange={() => console.log('lkdsmfkl')}
+            maxLength={500}
+            withError={false}
+            wrapperHeight={wrapperHeight}
+            // pattern={'1'}
+            labelAfter='min'
+          />
+          <Combobox
+            noSearch
+            selected
+            labelLexic='background_music'
+            labelWidth={labelWidth}
+            value='123'
+            onSelect={() => console.log(123)}
+            options={[]}
+            maxLength={500}
+            withError={false}
+            wrapperHeight={wrapperHeight}
+          />
+          <Combobox
+            noSearch
+            selected
+            labelLexic='add_summary'
+            labelWidth={labelWidth}
+            value='123'
+            onSelect={() => console.log(123)}
+            options={[]}
+            maxLength={500}
+            withError={false}
+            wrapperHeight={wrapperHeight}
+          />
+        </ScInputGroup>
+      </ScForm>
+    </ScWrapper>
+  )
+}

src/pages/HighlightsPage/components/FormHighlights/styled.tsx

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components/macro'
+
+import { isMobileDevice } from 'config/userAgent'
+
+export const ScWrapper = styled.div`
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  color: #FFFFFF;
+  padding: 0 40px;
+`
+export const ScInfoBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 186px;
+`
+
+export const ScTitle = styled.span`
+  font-weight: 700;
+  font-size: 34px;
+  line-height: 40px;
+  /* margin-bottom: 15px; */
+`
+
+export const ScText = styled.div`
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 28px;
+`
+
+export const ScInputGroup = styled.div`
+
+  .Search__input {
+    transform: translateY(50%);
+  }
+`
+export const ScForm = styled.form`
+  width: 100%;
+  max-width: 560px;
+  display: flex;
+  flex-direction: column;
+  ${isMobileDevice
+    ? css`
+      `
+    : ''};
+`

src/pages/HighlightsPage/components/PriceInfo/index.tsx

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react'
+
+import { T9n } from 'features/T9n'
+
+import {
+  ScCurrency,
+  ScPriceInfo,
+  ScTitle,
+  ScPrice,
+  ScWatchDemo,
+} from './styled'
+
+type PriceInfoType = {
+  currency?: number,
+  price?: number,
+}
+
+export const PriceInfo = ({ currency, price }: PriceInfoType) => (
+  <ScPriceInfo>
+    <ScTitle>
+      <T9n t='price' />
+    </ScTitle>
+    <ScPrice>
+      <ScCurrency>
+        {currency || '$'}
+      </ScCurrency>
+      {price}
+    </ScPrice>
+    <ScWatchDemo>
+      <T9n t='watch_demo' />
+    </ScWatchDemo>
+  </ScPriceInfo>
+)

src/pages/HighlightsPage/components/PriceInfo/styled.tsx

@@ -0,0 +1,43 @@
+import styled, { css } from 'styled-components/macro'
+
+export const ScPriceInfo = styled.div`
+  width: 188px;
+  height: 186px;
+  border: 1px solid #FFFFFF;
+  border-radius: 34px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-content: center;
+  color: #FFFFFF;
+  padding: 21px;
+
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+
+  > * {
+    margin: 10px 0;
+  }
+`
+
+export const ScTitle = styled.span`
+  text-align: center;
+`
+
+export const ScPrice = styled.span`
+  font-size: 80px;
+  text-align: center;
+`
+
+export const ScCurrency = styled.span`
+  font-size: 40px;
+`
+
+export const ScWatchDemo = styled.span`
+  font-weight: 400;
+  text-align: center;
+  text-decoration: underline;
+  cursor: pointer;
+  flex-direction: row;
+`

src/pages/HighlightsPage/index.tsx

@@ -0,0 +1,27 @@
+import { PriceInfo } from './components/PriceInfo'
+import { FormHighlights } from './components/FormHighlights'
+
+import {
+  ScHeader,
+  ScHeaderLogo,
+  ScWrapper,
+  ScWrapperContent,
+} from './styled'
+
+const HighlightsPage = () => {
+  console.log(123)
+
+  return (
+    <ScWrapper>
+      <ScHeader>
+        <ScHeaderLogo />
+      </ScHeader>
+      <ScWrapperContent>
+        <PriceInfo price={0} />
+        <FormHighlights />
+      </ScWrapperContent>
+    </ScWrapper>
+  )
+}
+
+export default HighlightsPage

src/pages/HighlightsPage/styled.tsx

@@ -0,0 +1,27 @@
+import styled, { css } from 'styled-components/macro'
+
+import { Logo } from 'features/Logo'
+
+export const ScHeader = styled.div`
+  width: 100%;
+  max-height: 95px;
+  padding: 32px 36px;
+  background: linear-gradient(236.13deg, rgba(53, 96, 225, 0.56) -4.49%, rgba(0, 0, 0, 0) 98.29%), #000000;
+`
+
+export const ScHeaderLogo = styled(Logo)`
+`
+
+export const ScWrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+`
+
+export const ScWrapperContent = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 100px 170px 0px 170px;
+`