wip

56kcloud · Dec 26, 2023 · f2b5f07 · f2b5f07
1 parent da4d70a
commit f2b5f07
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 3 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
@@ -70,7 +70,8 @@
         "solution-sections.solution-three-column-with-large-icons",
         "content-section.content-markdown",
         "contact-sections.contact-split-with-pattern",
-        "service-sections.service-alternate-position-icon"
+        "service-sections.service-alternate-position-icon",
+        "content-section.content-alternate-position-image-left"
       ]
     },
     "icon": {

diff --git a/apps/cms/src/components/content-section/content-alternate-position-image-left.json b/apps/cms/src/components/content-section/content-alternate-position-image-left.json
@@ -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
+      }
+    }
+  }
+
diff --git a/apps/cms/types/generated/components.d.ts b/apps/cms/types/generated/components.d.ts
@@ -74,6 +74,19 @@ export interface ContactSectionsContactSplitWithPattern
   };
 }
 
+export interface ContentSectionContentAlternatePositionImageLeft
+  extends Schema.Component {
+  collectionName: 'content_alternate_position_image_left';
+  info: {
+    displayName: 'content-alternate-position-image-left';
+  };
+  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: {
@@ -695,6 +708,7 @@ declare module '@strapi/types' {
       'blog-sections.blog-three-column': BlogSectionsBlogThreeColumn;
       'cards.card-with-icon': CardsCardWithIcon;
       'contact-sections.contact-split-with-pattern': ContactSectionsContactSplitWithPattern;
+      'content-section.content-alternate-position-image-left': ContentSectionContentAlternatePositionImageLeft;
       '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
@@ -1294,7 +1294,8 @@ export interface ApiServiceService extends Schema.CollectionType {
         'solution-sections.solution-three-column-with-large-icons',
         'content-section.content-markdown',
         'contact-sections.contact-split-with-pattern',
-        'service-sections.service-alternate-position-icon'
+        'service-sections.service-alternate-position-icon',
+        'content-section.content-alternate-position-image-left'
       ]
     > &
       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
@@ -0,0 +1,53 @@
+import {ArrowLongRightIcon} from '@heroicons/react/24/solid'
+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-col items-start lg:flex-row gap-x-16'>
+            <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 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>
+  )
+}
diff --git a/apps/www/src/utils/cms/renderer/components.tsx b/apps/www/src/utils/cms/renderer/components.tsx
@@ -4,6 +4,8 @@ import ArticleContentSection from '@/components/ui/molecules/article/content-sec
 import BlogMasonry from '@/components/ui/organisms/blog-sections/blog-masonry'
 import BlogThreeColumn from '@/components/ui/organisms/blog-sections/blog-three-column'
 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 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'
@@ -59,7 +61,8 @@ export const componentBlueprints: ComponentBlueprints = {
   'team-member-card': TeamMemberCard,
   'header-with-cards': HeaderWithCards,
   'content-markdown': ContentMarkdown,
-  'introduction-with-logo': IntroductionWithLogo
+  'introduction-with-logo': IntroductionWithLogo,
+  'content-alternate-position-image-left': ContentAlternatePositionImageLeft
 }
 export type ComponentBlueprint = {
   component: keyof ComponentBlueprints