[apps/www] Add introduction with aws partner logo (#83)

56kcloud · Dec 5, 2023 · c6ec093 · c6ec093
1 parent eec8ef9
commit c6ec093
Show file tree

Hide file tree

Showing 9 changed files with 2,810 additions and 234 deletions.
diff --git a/apps/cms/package.json b/apps/cms/package.json
@@ -15,10 +15,10 @@
     "strapi": "strapi"
   },
   "dependencies": {
-    "@strapi/plugin-i18n": "^4.15.4",
-    "@strapi/plugin-users-permissions": "4.15.4",
-    "@strapi/provider-upload-aws-s3": "^4.15.4",
-    "@strapi/strapi": "4.15.4",
+    "@strapi/plugin-i18n": "^4.14.5",
+    "@strapi/plugin-users-permissions": "4.14.5",
+    "@strapi/provider-upload-aws-s3": "^4.14.5",
+    "@strapi/strapi": "4.14.5",
     "better-sqlite3": "9.1.1",
     "pg": "^8.11.3",
     "react": "^18.2.0",

diff --git a/apps/cms/src/api/home-page/content-types/home-page/schema.json b/apps/cms/src/api/home-page/content-types/home-page/schema.json
@@ -30,7 +30,8 @@
         "partner-sections.partner-logo-simple-with-title",
         "customer-sections.customer-logo-simple-with-title",
         "blog-sections.blog-three-column",
-        "contact-sections.contact-split-with-pattern"
+        "contact-sections.contact-split-with-pattern",
+        "content-section.introduction-with-logo"
       ],
       "required": true
     },

diff --git a/apps/cms/src/components/content-section/introduction-with-logo.json b/apps/cms/src/components/content-section/introduction-with-logo.json
@@ -0,0 +1,25 @@
+{
+  "collectionName": "components_content_section_introduction_with_logos",
+  "info": {
+    "displayName": "introduction-with-logo"
+  },
+  "options": {},
+  "attributes": {
+    "title": {
+      "type": "string",
+      "required": true
+    },
+    "description": {
+      "type": "text",
+      "required": true
+    },
+    "logo": {
+      "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
@@ -95,6 +95,18 @@ export interface ContentSectionContentTwoColumn extends Schema.Component {
   };
 }
 
+export interface ContentSectionIntroductionWithLogo extends Schema.Component {
+  collectionName: 'components_content_section_introduction_with_logos';
+  info: {
+    displayName: 'introduction-with-logo';
+  };
+  attributes: {
+    title: Attribute.String & Attribute.Required;
+    description: Attribute.Text & Attribute.Required;
+    logo: Attribute.Media & Attribute.Required;
+  };
+}
+
 export interface CtaSectionsJoinOurTeam extends Schema.Component {
   collectionName: 'components_cta_sections_join_our_teams';
   info: {
@@ -637,6 +649,7 @@ declare module '@strapi/types' {
       'contact-sections.contact-split-with-pattern': ContactSectionsContactSplitWithPattern;
       'content-section.content-markdown': ContentSectionContentMarkdown;
       'content-section.content-two-column': ContentSectionContentTwoColumn;
+      'content-section.introduction-with-logo': ContentSectionIntroductionWithLogo;
       'cta-sections.join-our-team': CtaSectionsJoinOurTeam;
       'cta.button': CtaButton;
       'customer-sections.customer-logo-simple-with-title': CustomerSectionsCustomerLogoSimpleWithTitle;

diff --git a/apps/cms/types/generated/contentTypes.d.ts b/apps/cms/types/generated/contentTypes.d.ts
@@ -931,7 +931,8 @@ export interface ApiHomePageHomePage extends Schema.SingleType {
         'partner-sections.partner-logo-simple-with-title',
         'customer-sections.customer-logo-simple-with-title',
         'blog-sections.blog-three-column',
-        'contact-sections.contact-split-with-pattern'
+        'contact-sections.contact-split-with-pattern',
+        'content-section.introduction-with-logo'
       ]
     > &
       Attribute.Required &

diff --git a/apps/www/src/components/ui/organisms/content-sections/introduction-with-logo/index.tsx b/apps/www/src/components/ui/organisms/content-sections/introduction-with-logo/index.tsx
@@ -0,0 +1,34 @@
+import {ImageProps} from '@/models/image.model'
+import Image from 'next/image'
+
+export type IntroductionWithLogoProps = {
+    title: string
+    description: string
+    logo: ImageProps
+}
+
+const IntroductionWithLogo = (props: IntroductionWithLogoProps) => {
+  return (
+    <div className='py-20 lg:py-[104px]'>
+      <div className='px-6 mx-auto max-w-7xl lg:px-8'>
+        <div
+          className='flex flex-col gap-10 px-6 py-8 md:flex-row lg:px-12 rounded-xl bg-slate-800 lg:py-14'>
+          <div className='order-2 w-full md:w-3/4 md:order-1'>
+            <div className='text-2xl font-medium text-white sm:text-3xl'>{props.title}</div>
+            <div className='mt-2 text-[18px] leading-8 text-slate-400 font-light'>{props.description}</div>
+          </div>
+          <div className='flex items-center justify-start order-1 w-full md:justify-center md:w-1/4 md:order-2'>
+            <Image
+              src={props.logo.url} 
+              width={props.logo.width}
+              height={props.logo.height}
+              alt={props.logo.alternateText || props.logo.name}
+              className='w-24 h-auto md:w-32'
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default IntroductionWithLogo
diff --git a/apps/www/src/components/ui/organisms/team-sections/team-three-column/index.tsx b/apps/www/src/components/ui/organisms/team-sections/team-three-column/index.tsx
@@ -21,19 +21,19 @@ export default function TeamThreeColumn(props: TeamThreeColumnProps) {
         className='grid max-w-2xl grid-cols-1 mx-auto mt-20 gap-x-8 gap-y-14 sm:grid-cols-2 lg:mx-0 lg:max-w-none \
                    lg:grid-cols-3 xl:grid-cols-4'
       >
-        {props.teamMembers.map((TeamMember) => (
-          <li key={TeamMember.name}>
+        {props.teamMembers.map((teamMember) => (
+          <li key={teamMember.name}>
             <Image
-              src={TeamMember.avatar.url}
-              width={TeamMember.avatar.width}
-              height={TeamMember.avatar.height}
+              src={teamMember.avatar.url}
+              width={teamMember.avatar.width}
+              height={teamMember.avatar.height}
               placeholder='blur'
-              blurDataURL={TeamMember.avatar.placeholder}
-              alt={TeamMember.name}
+              blurDataURL={teamMember.avatar.placeholder}
+              alt={teamMember.name}
               className='aspect-[14/13] w-full rounded-2xl object-cover'
             />
-            <h3 className='mt-6 text-lg font-semibold leading-8 tracking-tight text-white'>{TeamMember.name}</h3>
-            <p className='text-base leading-7 text-gray-300'>{TeamMember.role}</p>
+            <h3 className='mt-6 text-lg font-semibold leading-8 tracking-tight text-white'>{teamMember.name}</h3>
+            <p className='text-base leading-7 text-gray-300'>{teamMember.role}</p>
           </li>
         ))}
       </ul>

diff --git a/apps/www/src/utils/cms/renderer/components.tsx b/apps/www/src/utils/cms/renderer/components.tsx
@@ -13,6 +13,7 @@ import HeaderWithCards from '@/components/ui/organisms/header-sections/header-wi
 import HeroSimpleCenter from '@/components/ui/organisms/hero-sections/hero-simple-center'
 import HeroSimpleCenterWithBackground from '@/components/ui/organisms/hero-sections/hero-simple-center-with-background'
 import ImageSimple from '@/components/ui/organisms/image-sections/image-simple'
+import IntroductionWithLogo from '@/components/ui/organisms/content-sections/introduction-with-logo'
 import JoinOurTeam from '@/components/ui/organisms/cta-sections/join-our-team'
 import PartnerLogosSimpleWithTitle from '@/components/ui/organisms/partner-sections/partner-logos-simple-with-title'
 import ServiceThreeColumnWithLargeIcons from
@@ -50,7 +51,8 @@ export const componentBlueprints: ComponentBlueprints = {
   'tag-filter': TagFilter,
   'team-member-card': TeamMemberCard,
   'header-with-cards': HeaderWithCards,
-  'content-markdown': ContentMarkdown
+  'content-markdown': ContentMarkdown,
+  'introduction-with-logo': IntroductionWithLogo
 }
 export type ComponentBlueprint = {
   component: keyof ComponentBlueprints