Rebrand the website

modules/blog/post-body/post-body.module.scss

@@ -83,10 +83,12 @@
   }
 
   p code {
-    background-color: $color-white-500;
+    background-color: $color-white-300;
+    border-radius: 4px;
     color: $color-grey-900;
+    font-size: 90%;
     font-weight: 500;
-    padding: 4px 8px 6px;
+    padding: 3px 4px;
   }
 
   ol > li p {

modules/blog/post-snippet/post-snippet.module.scss

@@ -56,7 +56,6 @@ $gap-mobile-version: 1rem;
     @include display-2xl;
 
     color: $color-font;
-    font-weight: 500;
     margin-top: $gap;
     text-decoration-thickness: 3px;
 

modules/index/case-studies-card/case-studies-card.module.scss

@@ -4,28 +4,24 @@
 .container {
   display: flex;
   flex-direction: column;
+  max-width: 386px;
 
   @include breakpoint(medium-only) {
     margin: 0 3.5rem;
   }
 
   @include breakpoint(small) {
     align-items: center;
-    margin: 2rem 0 3rem;
+    margin: 2.5rem 0 3rem;
     max-width: 100%;
     width: 100%;
   }
 }
 
 .logo {
-  height: 100px;
+  height: 70px;
   position: relative;
-  width: 360px;
-
-  @include breakpoint(medium-only) {
-    height: 80px;
-    width: 280px;
-  }
+  width: 250px;
 
   @include breakpoint(small) {
     height: 60px;
@@ -35,7 +31,7 @@
 
 .textContainer {
   line-height: 1.5rem;
-  padding: 3.5rem 0;
+  padding: 2rem 0;
 
   @include breakpoint(small) {
     padding: 0.5rem 0 0;
@@ -44,19 +40,25 @@
 }
 
 .title {
-  font-size: 1.125rem;
-  margin: 0 0 1.25rem;
+  @include text-sm;
+
+  color: $color-grey-500;
+  font-weight: 500;
+  margin: 0 0 2rem;
 
   @include breakpoint(small) {
-    margin: 0 0 2.5rem;
+    margin: 0 0 1rem;
   }
 }
 
 .text {
-  @include h3;
+  @include text-xl;
 
   margin: 0 0 2.5rem;
-  max-width: 550px;
+
+  @include breakpoint(small) {
+    margin: 0 0 1.5rem;
+  }
 }
 
 .button {

modules/index/case-studies-card/case-studies-card.tsx

@@ -22,12 +22,11 @@ export default function CaseStudiesCard({
 }: Props) {
   return (
     <div className={style.container}>
+      <h4 className={style.title}>{title}</h4>
       <div className={style.logo} style={logoStyleAdjustments}>
         <Image alt="Case study logo" layout="fill" src={logo} />
       </div>
-
       <div className={style.textContainer}>
-        <h4 className={style.title}>{title}</h4>
         <p className={style.text}>{text}</p>
         <a href={linkUrl} rel="noopener noreferrer" target="_blank">
           <button className={style.button} role="button">

modules/index/case-studies/case-studies-content.tsx

@@ -3,9 +3,9 @@ export const content = [
     linkText: 'View on Medium',
     linkUrl:
       'https://www.medium.com/life-at-telkomsel/how-we-build-a-production-grade-data-pipeline-7004e56c8c98',
-    logo: '/images/telkomsel.svg',
+    logo: '/images/telkomsel-white.svg',
     text: "Learn how Kedro is used in production at Telkomsel, Indonesia's largest telecommunications company. Kedro is used to help consume tens of TBs of data, run hundreds of feature engineering tasks, and serve dozens of ML models.",
-    title: 'Kedro in Production at Telksomsel',
+    title: 'Kedro in production at',
   },
   {
     linkText: 'View on Medium',
@@ -16,6 +16,6 @@ export const content = [
       marginLeft: '-10px',
     },
     text: 'Data scientists at Beamery, a fast-growing talent lifecycle management company, explain how Kedro helps them write "production-code". They talk about a workflow that involves Kedro when they want to progress their POCs.',
-    title: 'Creating Robust ML Products at Beamery',
+    title: 'Kedro in production at',
   },
 ];

modules/index/case-studies/case-studies.module.scss

@@ -2,11 +2,12 @@
 @import '../../../styles/mixins';
 
 .outer {
-  background-color: $color-dark;
-  padding: 5rem 0 8rem;
+  background-color: $color-bg-grey;
+  padding: 7.5rem 0;
 
   @include breakpoint(medium-up) {
     margin: 0 -3.5rem;
+    padding: 7.5rem 3.5rem;
   }
 
   @include breakpoint(small) {
@@ -15,27 +16,40 @@
 }
 
 .inner {
-  align-items: center;
+  align-items: baseline;
   display: flex;
-  flex-direction: column;
   justify-content: space-between;
   margin: 0 auto;
   max-width: $max-content;
 
+  @media (max-width: 1000px) {
+    flex-wrap: wrap;
+  }
+
   @include breakpoint(small) {
     flex-direction: column;
   }
 }
 
 .sectionTitle {
-  @include h1;
+  @include display-md;
 
-  margin-bottom: 8rem;
-  text-align: center;
+  font-weight: 500;
+  margin: 0;
+  margin-right: 4rem;
+  width: 30%;
+
+  @media (max-width: 1000px) {
+    margin-bottom: 2.5rem;
+    text-align: center;
+    width: 100%;
+  }
 
   @include breakpoint(small) {
     margin-bottom: 2.5rem;
     padding: 0;
+    text-align: center;
+    width: 100%;
   }
 }
 

modules/index/case-studies/case-studies.tsx

@@ -7,7 +7,7 @@ export default function CaseStudies() {
   return (
     <section className={style.outer}>
       <div className={style.inner}>
-        <h3 className={style.sectionTitle}>Case Studies</h3>
+        <h3 className={style.sectionTitle}>Case studies</h3>
         <div className={style.cards}>
           {content.map((cardContent, i) => (
             <CaseStudiesCard key={i} {...cardContent} />

modules/index/companies-using-kedro/companies-using-kedro.module.scss

@@ -2,12 +2,11 @@
 @import '../../../styles/mixins';
 
 .outer {
-  background: $color-bg-grey;
-  padding: 7rem 0;
+  background: $color-dark;
 
   @include breakpoint(medium-up) {
     margin: 0 -3.5rem;
-    padding: 7rem 5rem;
+    padding: 7.5rem 7rem;
   }
 
   @include breakpoint(small) {
@@ -16,57 +15,63 @@
 }
 
 .inner {
-  background: $color-bg-grey;
-  flex-direction: column;
-  font-weight: 700;
-  line-height: 6rem;
   display: flex;
+  flex-direction: column;
   margin: 0 auto;
   max-width: $max-content;
 
   @include breakpoint(small) {
-    font-size: 1.5rem;
-    line-height: 3rem;
+    align-items: center;
   }
 }
 
-.title {
-  @include h1;
-
-  margin-bottom: 6rem;
-  text-align: center;
+.titleContainer {
+  margin-bottom: 2.75rem;
+  white-space: nowrap;
 
   @include breakpoint(small) {
-    margin-bottom: 2.5rem;
-
-    padding: 0;
+    margin-bottom: 1rem;
   }
-}
 
-.list {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr 1fr 1fr;
-  justify-items: start;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+  .title {
+    @include display-md;
 
-  @include breakpoint(small) {
-    grid-template-columns: 1fr 1fr;
+    font-weight: 500;
+    line-height: 2.75rem;
   }
 }
 
-.company {
-  align-items: center;
+.carouselWrapper {
   display: flex;
-  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  @include carousel-gradient(
+    $gradient-color: rgba(0, 0, 0, 0),
+    $actual-color: rgba(0, 0, 0, 1),
+    $direction: to right
+  );
 }
 
-.link {
+.carouselAnimate {
   align-items: center;
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  width: 100%;
+  animation: slide 50s linear infinite;
+  display: grid;
+  flex-shrink: 0;
+  gap: 0.5rem;
+  grid-auto-flow: column;
+  grid-template-rows: repeat(1, minmax(0, 1fr));
+  justify-items: center;
+  min-width: 100%;
+  position: relative;
+}
+
+@keyframes slide {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
 }

modules/index/companies-using-kedro/companies-using-kedro.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+import CompaniesUsingKedro from './index';
+
+describe('CompaniesUsingKedro', () => {
+  it('renders without crashing', () => {
+    render(<CompaniesUsingKedro />);
+  });
+
+  it('displays the correct title text', () => {
+    render(<CompaniesUsingKedro />);
+
+    expect(screen.getByRole('titleText')).toHaveTextContent('Our community');
+  });
+});

modules/index/companies-using-kedro/companies-using-kedro.tsx

@@ -8,19 +8,40 @@ export default function CompaniesUsingKedro() {
   return (
     <section className={style.outer}>
       <div className={style.inner}>
-        <span className={style.title}>Our community</span>
-        <ul className={style.list}>
-          {companies.map((company) => (
-            <li className={style.company} key={company.name}>
+        <div className={style.titleContainer}>
+          <span role="titleText" className={style.title}>
+            Our community
+          </span>
+        </div>
+        <div className={style.carouselWrapper}>
+          <div className={style.carouselAnimate}>
+            {companies.map((company) => (
               <Image
+                loading="eager" // for Safari
+                className={style.company}
+                key={company.name}
                 alt={`${company.name} logo`}
                 height="120px"
                 src={company.logo}
                 width="308px"
               />
-            </li>
-          ))}
-        </ul>
+            ))}
+          </div>
+          {/* Repeating the companies block to create a circular animation */}
+          <div className={style.carouselAnimate}>
+            {companies.map((company) => (
+              <Image
+                loading="eager" // for Safari
+                className={style.company}
+                key={company.name}
+                alt={`${company.name} logo`}
+                height="120px"
+                src={company.logo}
+                width="308px"
+              />
+            ))}
+          </div>
+        </div>
       </div>
     </section>
   );