-
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 8e4d781
Showing
14 changed files
with
327 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
54 changes: 54 additions & 0 deletions
54
.../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,54 @@ | ||
| 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='py-20 lg:py-[104px]'> | ||
| <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-col items-center lg:flex-row gap-y-10 lg:gap-x-16'> | ||
| <div className='w-full lg:w-1/3 h-72'> | ||
| <Image | ||
| className='object-cover w-full 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-full lg:w-2/3 gap-y-2'> | ||
| {/* Is 'dt' useful? */} | ||
| <dt className='text-2xl font-medium text-white sm:text-3xl'> | ||
| {props.title} | ||
| </dt> | ||
| {/* Is 'dd' useful? */} | ||
| <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> | ||
| ) | ||
| } |
54 changes: 54 additions & 0 deletions
54
...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,54 @@ | ||
| 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='py-20 lg:py-[104px]'> | ||
| <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-col items-center lg:flex-row gap-y-10 lg:gap-x-16'> | ||
| <div className='flex flex-col order-2 w-full lg:w-2/3 gap-y-2 lg:order-1'> | ||
| {/* Is 'dt' useful? */} | ||
| <dt className='text-2xl font-medium text-white sm:text-3xl'> | ||
| {props.title} | ||
| </dt> | ||
| {/* Is 'dd' useful? */} | ||
| <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='order-1 w-full lg:w-1/3 h-72 lg:order-2'> | ||
| <Image | ||
| className='object-cover w-full 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
Oops, something went wrong.