wip

56kcloud · Dec 26, 2023 · ae1523e · ae1523e
1 parent 5f04db4
commit ae1523e
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 4 deletions.
diff --git a/apps/cms/src/api/service/content-types/service/schema.json b/apps/cms/src/api/service/content-types/service/schema.json
@@ -71,7 +71,8 @@
         "content-section.content-markdown",
         "contact-sections.contact-split-with-pattern",
         "service-sections.service-alternate-position-icon",
-        "content-section.content-alternate-position-image-left"
+        "content-section.content-alternate-position-image-left",
+        "content-section.content-alternate-position-image-right"
       ]
     },
     "icon": {

diff --git a/apps/cms/src/components/content-section/content-alternate-position-image-right.json b/apps/cms/src/components/content-section/content-alternate-position-image-right.json
@@ -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
+      }
+    }
+  }
+
diff --git a/apps/cms/types/generated/components.d.ts b/apps/cms/types/generated/components.d.ts
@@ -87,6 +87,19 @@ export interface ContentSectionContentAlternatePositionImageLeft
   };
 }
 
+export interface ContentSectionContentAlternatePositionImageRight
+  extends Schema.Component {
+  collectionName: 'content_alternate_position_image_right';
+  info: {
+    displayName: 'content-alternate-position-image-right';
+  };
+  attributes: {
+    title: Attribute.String & Attribute.Required;
+    description: Attribute.Text & Attribute.Required;
+    image: Attribute.Media & Attribute.Required;
+  };
+}
+
 export interface ContentSectionContentMarkdown extends Schema.Component {
   collectionName: 'components_content_section_content_markdowns';
   info: {
@@ -709,6 +722,7 @@ declare module '@strapi/types' {
       'cards.card-with-icon': CardsCardWithIcon;
       'contact-sections.contact-split-with-pattern': ContactSectionsContactSplitWithPattern;
       'content-section.content-alternate-position-image-left': ContentSectionContentAlternatePositionImageLeft;
+      'content-section.content-alternate-position-image-right': ContentSectionContentAlternatePositionImageRight;
       'content-section.content-markdown': ContentSectionContentMarkdown;
       'content-section.content-two-column': ContentSectionContentTwoColumn;
       'content-section.introduction-with-logo': ContentSectionIntroductionWithLogo;

diff --git a/apps/cms/types/generated/contentTypes.d.ts b/apps/cms/types/generated/contentTypes.d.ts
@@ -1295,7 +1295,8 @@ export interface ApiServiceService extends Schema.CollectionType {
         'content-section.content-markdown',
         'contact-sections.contact-split-with-pattern',
         'service-sections.service-alternate-position-icon',
-        'content-section.content-alternate-position-image-left'
+        'content-section.content-alternate-position-image-left',
+        'content-section.content-alternate-position-image-right'
       ]
     > &
       Attribute.SetPluginOptions<{

diff --git a/.../components/ui/organisms/content-sections/content-alternate-position-image-left/index.tsx b/.../components/ui/organisms/content-sections/content-alternate-position-image-left/index.tsx
@@ -37,7 +37,7 @@ export default function ContentAlternatePositionImageLeft(props: ContentAlternat
                 asChild
                 size='medium'
                 shape='circle'
-                className='px-5 mt-4 text-red-900 text-md bg-sky-300 hover:bg-violet-300'
+                className='px-5 mt-4 text-md bg-sky-300 text-slate-900 hover:bg-violet-300'
               >
                 <Link href=''>
                   Learn more

diff --git a/...components/ui/organisms/content-sections/content-alternate-position-image-right/index.tsx b/...components/ui/organisms/content-sections/content-alternate-position-image-right/index.tsx
@@ -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-col items-start lg:flex-row 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-full'>
+              <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>
+  )
+}
diff --git a/apps/www/src/utils/cms/renderer/components.tsx b/apps/www/src/utils/cms/renderer/components.tsx
@@ -6,6 +6,8 @@ import BlogThreeColumn from '@/components/ui/organisms/blog-sections/blog-three-
 import ContactSplitWithPattern from '@/components/ui/organisms/contact-sections/contact-split-with-pattern'
 import ContentAlternatePositionImageLeft from 
   '@/components/ui/organisms/content-sections/content-alternate-position-image-left'
+import ContentAlternatePositionImageRight from 
+  '@/components/ui/organisms/content-sections/content-alternate-position-image-right'
 import ContentMarkdown from '@/components/ui/organisms/content-sections/content-markdown'
 import ContentTwoColumn from '@/components/ui/organisms/content-sections/content-two-column'
 import CustomerLogosSimpleWithTitle from '@/components/ui/organisms/customer-sections/customer-logos-simple-with-title'
@@ -62,7 +64,8 @@ export const componentBlueprints: ComponentBlueprints = {
   'header-with-cards': HeaderWithCards,
   'content-markdown': ContentMarkdown,
   'introduction-with-logo': IntroductionWithLogo,
-  'content-alternate-position-image-left': ContentAlternatePositionImageLeft
+  'content-alternate-position-image-left': ContentAlternatePositionImageLeft,
+  'content-alternate-position-image-right': ContentAlternatePositionImageRight
 }
 export type ComponentBlueprint = {
   component: keyof ComponentBlueprints