-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create content alternative position image left and right
- Loading branch information
1 parent
0a59a5d
commit fff2b29
Showing
14 changed files
with
323 additions
and
7 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
apps/cms/src/components/content-section/content-alternate-position-image-left.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "collectionName": "content_alternate_position_image_left", | ||
| "info": { | ||
| "displayName": "content-alternate-position-image-left" | ||
| }, | ||
| "options": {}, | ||
| "attributes": { | ||
| "title": { | ||
| "type": "string", | ||
| "required": true | ||
| }, | ||
| "description": { | ||
| "type": "text", | ||
| "required": true | ||
| }, | ||
| "image": { | ||
| "allowedTypes": [ | ||
| "images" | ||
| ], | ||
| "type": "media", | ||
| "multiple": false, | ||
| "required": true | ||
| } | ||
| } | ||
| } | ||
|
|
26 changes: 26 additions & 0 deletions
26
apps/cms/src/components/content-section/content-alternate-position-image-right.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "collectionName": "content_alternate_position_image_right", | ||
| "info": { | ||
| "displayName": "content-alternate-position-image-right" | ||
| }, | ||
| "options": {}, | ||
| "attributes": { | ||
| "title": { | ||
| "type": "string", | ||
| "required": true | ||
| }, | ||
| "description": { | ||
| "type": "text", | ||
| "required": true | ||
| }, | ||
| "image": { | ||
| "allowedTypes": [ | ||
| "images" | ||
| ], | ||
| "type": "media", | ||
| "multiple": false, | ||
| "required": true | ||
| } | ||
| } | ||
| } | ||
|
|
14 changes: 14 additions & 0 deletions
14
apps/cms/src/components/solution-sections/solution-alternate-position-image.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "collectionName": "solution_alternate_position_image", | ||
| "info": { | ||
| "displayName": "solution-alternate-position-image" | ||
| }, | ||
| "options": {}, | ||
| "attributes": { | ||
| "solutions": { | ||
| "type": "relation", | ||
| "relation": "oneToMany", | ||
| "target": "api::solution.solution" | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
52 changes: 52 additions & 0 deletions
52
.../components/ui/organisms/content-sections/content-alternate-position-image-left/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import {ImageProps} from '@/models/image.model' | ||
| import Button from '@/components/ui/atoms/button' | ||
| import Image from 'next/image' | ||
| import Link from 'next/link' | ||
|
|
||
| export type ContentAlternatePositionImageLeftProps = { | ||
| title: string | ||
| description: string | ||
| image: ImageProps | ||
| } | ||
|
|
||
| export default function ContentAlternatePositionImageLeft(props: ContentAlternatePositionImageLeftProps) { | ||
| return ( | ||
| <div className='pb-20 pt-12 lg:pb-[104px] lg:pt-[120px]'> | ||
| <div className='relative px-6 mx-auto max-w-7xl lg:px-8'> | ||
| <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'> | ||
| <div | ||
| className='flex flex-row items-center gap-x-16'> | ||
| <div className='w-1/3 h-72'> | ||
| <Image | ||
| className='object-cover h-full rounded-xl' | ||
| src={props.image.url} | ||
| width={props.image.width} | ||
| height={props.image.height} | ||
| alt={props.image.alternateText || props.image.name} | ||
| > | ||
| </Image> | ||
| </div> | ||
| <div className='flex flex-col w-2/3 gap-y-2'> | ||
| <dt className='text-2xl font-medium text-white sm:text-3xl'> | ||
| {props.title} | ||
| </dt> | ||
| <dd className='text-[18px] leading-8 text-slate-400 font-light'> | ||
| <p>{props.description}</p> | ||
| </dd> | ||
| <Button | ||
| asChild | ||
| size='medium' | ||
| shape='circle' | ||
| className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300' | ||
| > | ||
| <Link href=''> | ||
| Learn more | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
52 changes: 52 additions & 0 deletions
52
...components/ui/organisms/content-sections/content-alternate-position-image-right/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import {ImageProps} from '@/models/image.model' | ||
| import Button from '@/components/ui/atoms/button' | ||
| import Image from 'next/image' | ||
| import Link from 'next/link' | ||
|
|
||
| export type ContentAlternatePositionImageRightProps = { | ||
| title: string | ||
| description: string | ||
| image: ImageProps | ||
| } | ||
|
|
||
| export default function ContentAlternatePositionImageRight(props: ContentAlternatePositionImageRightProps) { | ||
| return ( | ||
| <div className='pb-20 pt-12 lg:pb-[104px] lg:pt-[120px]'> | ||
| <div className='relative px-6 mx-auto max-w-7xl lg:px-8'> | ||
| <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'> | ||
| <div | ||
| className='flex flex-row items-center gap-x-16'> | ||
| <div className='flex flex-col w-2/3 gap-y-2'> | ||
| <dt className='text-2xl font-medium text-white sm:text-3xl'> | ||
| {props.title} | ||
| </dt> | ||
| <dd className='text-[18px] leading-8 text-slate-400 font-light'> | ||
| <p>{props.description}</p> | ||
| </dd> | ||
| <Button | ||
| asChild | ||
| size='medium' | ||
| shape='circle' | ||
| className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300' | ||
| > | ||
| <Link href=''> | ||
| Learn more | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| <div className='w-1/3 h-72'> | ||
| <Image | ||
| className='object-cover h-full rounded-xl' | ||
| src={props.image.url} | ||
| width={props.image.width} | ||
| height={props.image.height} | ||
| alt={props.image.alternateText || props.image.name} | ||
| > | ||
| </Image> | ||
| </div> | ||
| </div> | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
60 changes: 60 additions & 0 deletions
60
...w/src/components/ui/organisms/feature-sections/feature-alternate-position-image/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| import {ArrowLongRightIcon} from '@heroicons/react/24/solid' | ||
| import {Feature} from '@/models/feature.model' | ||
| import {cn} from '@/utils/toolbox' | ||
| import Button from '@/components/ui/atoms/button' | ||
| import Icon from '@/components/ui/atoms/icon' | ||
| import Link from 'next/link' | ||
|
|
||
| export type FeatureAlternatePositionImageProps = { | ||
| title: string | ||
| subtitle: string | ||
| features: Array<Feature> | ||
| } | ||
|
|
||
| export default function FeatureAlternatePositionImage(props: FeatureAlternatePositionImageProps) { | ||
| return ( | ||
| <div className='pb-20 pt-12 lg:pb-[104px] lg:pt-[120px]'> | ||
| <div className='relative px-6 mx-auto max-w-7xl lg:px-8'> | ||
| <dl className='grid grid-cols-1 gap-x-6 gap-y-14 lg:gap-y-36'> | ||
| {props.features?.map((feature, index) => ( | ||
| <div | ||
| key={index} | ||
| className='max-w-5xl mx-auto'> | ||
| <div | ||
| className={cn('flex flex-col items-start lg:flex-row gap-x-10', | ||
| index % 2 !== 0 ? 'lg:flex-row-reverse' : '')}> | ||
| <div> | ||
| <Icon | ||
| {...feature.icon} | ||
| className='w-auto mb-4 sm:mb-6 h-14 sm:h-24 lg:h-52 lg:mb-0' | ||
| strokeWidth={0.75} | ||
| > | ||
| </Icon> | ||
| </div> | ||
| <div className='flex flex-col gap-y-2'> | ||
| <dt className='text-2xl font-medium text-white sm:text-3xl'> | ||
| {feature.title} | ||
| </dt> | ||
| <dd className='text-[18px] leading-8 text-slate-400 font-light'> | ||
| <p>{feature.description}</p> | ||
| </dd> | ||
| <Button | ||
| asChild | ||
| size='large' | ||
| variant='link' | ||
| className='mt-1 text-lg text-sky-300 hover:text-violet-300' | ||
| leading={<ArrowLongRightIcon className='w-8 h-8'/>} | ||
| > | ||
| <Link href={feature.link}> | ||
| Learn more | ||
| </Link> | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ))} | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
27 changes: 27 additions & 0 deletions
27
...src/components/ui/organisms/solution-sections/solution-alternate-position-image/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import {Solution} from '@/models/solution.model' | ||
| import FeatureAlternatePositionImage from '@/components/ui/organisms/feature-sections/feature-alternate-position-image' | ||
|
|
||
| export type SolutionAlternatePositionImageProps = { | ||
| title: string | ||
| subtitle: string | ||
| solutions: Array<Solution> | ||
| } | ||
|
|
||
| export default function SolutionAlternatePositionImage(props: SolutionAlternatePositionImageProps) { | ||
| const features = props.solutions.map((solution) => { | ||
| return { | ||
| icon: solution.icon, | ||
| title: solution.title, | ||
| description: solution.description, | ||
| link: `/solutions/${solution.slug}` | ||
| } | ||
| }) | ||
|
|
||
| return ( | ||
| <FeatureAlternatePositionImage | ||
| title={props.title} | ||
| subtitle={props.subtitle} | ||
| features={features} | ||
| /> | ||
| ) | ||
| } |
Oops, something went wrong.