Waylon Perry

package.json

@@ -56,6 +56,7 @@
     "@types/react": "^19.0.2",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^19.0.2",
+    "@types/react-slick": "^0.23.13",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
     "aos": "^2.3.4",
@@ -123,6 +124,8 @@
     "r18gs": "^3.0.1",
     "react-day-picker": "^8.10.1",
     "react-icons": "^5.4.0",
+    "react-slick": "^0.30.3",
+    "slick-carousel": "^1.8.1",
     "tailwindcss-animate": "^1.0.7",
     "tailwindcss-animated": "^2.0.0",
     "tailwindcss-intersect": "^2.1.0",
@@ -141,4 +144,4 @@
       "optional": true
     }
   }
-}
+}

src/components/Cards/FeatureCard.tsx

@@ -19,6 +19,8 @@ interface FeatureCardProps extends Section {
   link?: Section['link'] & {
     label: string
   }
+  imageClassName?: string
+  contentClassName?: string
 }
 
 //   variant?: 'solid' | 'outline' | 'gradient' | 'radial' | 'light'
@@ -48,6 +50,8 @@ export function FeatureCard({
   link,
   // variant = 'outline',
   className,
+  imageClassName = '',
+  contentClassName = '',
   // icon,
   // iconSize = 'large',
   // width = 'auto',
@@ -74,14 +78,15 @@ export function FeatureCard({
     auto: 'w-full',
   }
 
-console.log('image', image)
+  console.log('image', sizes)
 
   return (
     <div
       className={cn(
         'min-w-56 max-w-xl h-full flex flex-col group',
         image ? 'p-0 md:p-0' : 'p-8 md:p-8',
-        settings && !image &&
+        settings &&
+          !image &&
           variants[
             settings?.card === 'default' ? 'solid' : (settings?.card as keyof typeof variants)
           ],
@@ -96,7 +101,7 @@ console.log('image', image)
     >
       {/* Image Section */}
       {image && (
-        <div className="relative h-64 w-full mb-0">
+        <div className={`relative h-64 w-full mb-0 ${imageClassName}`}>
           <Image
             src={image.url || '/placeholder.svg'}
             alt={image.alt || 'card header image'}
@@ -109,7 +114,13 @@ console.log('image', image)
 
       {/* Body */}
 
-      <div className={cn(image ? 'p-4 pb-8 md:px-12' : 'p-0 md:p-0', 'flex flex-col flex-grow')}>
+      <div
+        className={cn(
+          image ? 'p-4 pb-8 md:px-12' : 'p-0 md:p-0',
+          'flex flex-col flex-grow',
+          contentClassName,
+        )}
+      >
         {subtitle && <div className="mb-4 text-primary uppercase font-light">{subtitle}</div>}
 
         {/* Header Section */}
@@ -143,32 +154,28 @@ console.log('image', image)
 
         {/* Content Section */}
         {content && typeof content === 'object' && (
-            <RichText
-              enableGutter={false}
-              content={content}
-              enableProse={false}
-              className={
-                cn(
-                  'space-y-6',
-                  settings?.card === 'outline' || settings?.card === 'light'
-                    ? 'prose prose-headings:text-foreground prose-p:text-foreground'
-                    : 'prose prose-headings:text-white prose-p:text-gray-100',
-                    image && 'prose prose-headings:text-background prose-p:text-background')
-
-              }
-            />
+          <RichText
+            enableGutter={false}
+            content={content}
+            enableProse={false}
+            className={cn(
+              'space-y-6',
+              settings?.card === 'outline' || settings?.card === 'light'
+                ? 'prose prose-headings:text-foreground prose-p:text-foreground'
+                : 'prose prose-headings:text-white prose-p:text-gray-100',
+              image && 'prose prose-headings:text-background prose-p:text-background',
+            )}
+          />
         )}
         {content && typeof content === 'string' && (
           <div
-          className={
-            cn(
+            className={cn(
               'space-y-6',
               settings?.card === 'outline' || settings?.card === 'light'
                 ? 'prose prose-headings:text-foreground prose-p:text-foreground'
                 : 'prose prose-headings:text-white prose-p:text-gray-100',
-                image && 'prose prose-headings:text-background prose-p:text-background')
-
-          }
+              image && 'prose prose-headings:text-background prose-p:text-background',
+            )}
           >
             {content}
           </div>
@@ -225,7 +232,7 @@ const IconLocation = ({
           className={cn(
             'font-semibold',
             variant === 'outline' || variant === 'light' ? 'text-primary' : 'text-white',
-            iconSize === 'small' ? 'text-2xl' : 'text-3xl'
+            iconSize === 'small' ? 'text-2xl' : 'text-3xl',
           )}
         >
           {heading}
@@ -235,7 +242,7 @@ const IconLocation = ({
             className={cn(
               'rounded-full p-0 transform group-hover:scale-110 transition-transform duration-400',
               variant === 'outline' || variant === 'light' ? 'text-primary' : 'text-white',
-              iconSize === 'small' ? 'mt-2' : ''
+              iconSize === 'small' ? 'mt-2' : '',
             )}
           >
             <DynamicIcon type={icon.type} iconName={icon.iconName} size="2x" />

src/components/HeaderFooter/Footer.stories.tsx

@@ -1,7 +1,10 @@
 import React from 'react'
 import { Meta, StoryFn } from '@storybook/react'
 import { Footer, type SectionProps } from './Footer'
-import { FaInstagram, FaLinkedin } from 'react-icons/fa6'
+import { FaInstagram, FaLinkedin, FaLinkedinIn } from 'react-icons/fa6'
+import { GoMail } from 'react-icons/go'
+import { SlLocationPin } from 'react-icons/sl'
+import { CiMobile1 } from 'react-icons/ci'
 import logoLight from '../../../.storybook/public/cortex-reply-light.png'
 import logoDark from '../../../.storybook/public/cortex-reply-dark.png'
 
@@ -27,14 +30,15 @@ const Template: StoryFn<SectionProps> = (args) => <Footer {...args} />
 export const Default = Template.bind({})
 Default.args = {
   className: '',
-  logoLight:logoLight,
-  logoDark:logoDark,
+  logoLight: logoLight,
+  logoDark: logoDark,
   footerData: {
     about: {
-      description: 'This is a sample description for the about section.',
+      description:
+        'we enable organisations to harnesses the power of generative AI and drive operational excellence.',
       socialLinks: [
         {
-          icon: <FaLinkedin />,
+          icon: <FaLinkedinIn />,
           href: 'https://www.linkedin.com/company/cortex-reply/',
         },
         {
@@ -44,50 +48,40 @@ Default.args = {
       ],
     },
     columnOne: {
-      title: 'Column One',
-      links: [
-        { href: '/link1', label: 'Link 1' },
-        { href: '/link2', label: 'Link 2' },
-      ],
+      title: 'Our Services',
+      links: [{ label: 'Ai Enablement' }, { label: 'FinOps' }, { label: 'Digital Colleagues' }],
     },
     columnTwo: {
-      title: 'Contact Us',
-      location: '1234 Street Name, City, Country',
-      mails: ['[email protected]', '[email protected]'],
-    },
-    columnThree: {
-      title: 'Recent Insights',
-      blogs: [
+      contactUs: [
         {
-          image: {
-            src: '/assets/images/blog/blog-sm-1.jpg',
-            alt: 'We provide a range of IT solutions',
-          },
-          title: 'We provide a range of IT solutions',
-          date: '2025-01-02T00:00:00.000Z',
-          slug: './blog-details',
+          icon: <CiMobile1 />,
+          href: '+44 (0) 2077306000',
         },
         {
-          image: {
-            src: '/assets/images/blog/blog-sm-2.jpg',
-            alt: 'IT solutions enhance efficiency',
-          },
-          title: 'IT solutions enhance efficiency',
-          date: '2025-01-02T00:00:00.000Z',
-          slug: './blog-details',
+          icon: <GoMail />,
+          href: '[email protected]',
+        },
+        {
+          icon: <SlLocationPin />,
+          href: '38 Grosvenor Gardens, London, SW1W 0WB, England',
         },
       ],
     },
     footerBottom: {
-      copyrightText: 'copyright',
+      copyrightText: '© Cortex Reply Ltd 2025 | All Rights Reserved',
       links: [
         {
-          label: 'Privacy Policy',
+          label: 'Privacy and Cookie Policy',
           href: '/privacy-policy',
           openNewTab: false,
         },
         {
-          label: 'Contact Us',
+          label: 'Legal & accessibility',
+          href: '/contact',
+          openNewTab: false,
+        },
+        {
+          label: 'Modern slavery act',
           href: '/contact',
           openNewTab: false,
         },
@@ -96,12 +90,11 @@ Default.args = {
   },
 }
 
-
 export const NoBlog = Template.bind({})
 NoBlog.args = {
   className: '',
-  logoLight:logoLight,
-  logoDark:logoDark,
+  logoLight: logoLight,
+  logoDark: logoDark,
   footerData: {
     about: {
       description: 'This is a sample description for the about section.',
@@ -128,7 +121,7 @@ NoBlog.args = {
       location: '1234 Street Name, City, Country',
       mails: ['[email protected]', '[email protected]'],
     },
-    
+
     footerBottom: {
       copyrightText: 'copyright',
       links: [