feat: improve home page consistency using card layouts and hover

src/components/content/BlogArticlesList/index.tsx

@@ -34,12 +34,13 @@ const BlogArticlesList: React.FC<BlogArticlesListProps> = ({
   }
 
   const containerClasses =
-    containerLayout === 'vertical' ? 'flex flex-col gap-4' : 'flex flex-wrap justify-center gap-4';
+    containerLayout === 'vertical' ? 'flex flex-col gap-4' : 'mx-auto grid max-w-6xl grid-cols-1 gap-8 md:grid-cols-2';
 
   return (
     <section className={sectionClassName}>
       <SectionHeader title={title} textColor={titleColor} />
-      <div className={containerClasses}>
+      <div className="container px-4 md:px-8">
+        <div className={containerClasses}>
         {data.slice(0, actualDisplayCount).map((card, index) => (
           <ArticleCard
             key={card.id}
@@ -54,6 +55,7 @@ const BlogArticlesList: React.FC<BlogArticlesListProps> = ({
             index={index}
           />
         ))}
+        </div>
       </div>
       {showFooter && footerText && (
         <p className="ml-2l text-center 2xl:text-start">

src/components/content/TestimonialSection/index.tsx

@@ -33,7 +33,7 @@ function TestimonialSection() {
         </button>
         <div
           id="slider"
-          className="mx-auto flex h-full w-full justify-center overflow-x-scroll scroll-smooth whitespace-nowrap scrollbar">
+          className="mx-auto flex h-full w-full justify-start gap-4 overflow-x-scroll scroll-smooth px-4 py-4 scrollbar xl:justify-center">
           {testimonials.map((testimonial, index) => {
             return <Testimonial key={index} {...testimonial} />;
           })}

src/components/layout/CommunityMeetingsCardGrid/index.tsx

@@ -94,7 +94,7 @@ function CommunityMeetingsCardGrid({ cards }) {
       let mdReader = mdFile?.default(useRef());
       mdReader?.props?.children?.forEach(child => {
         let field1: string = child?.props?.children?.[0];
-        let field2: object = child?.props?.children?.[1];
+        let field2: any = child?.props?.children?.[1];
         if (typeof field1 == 'string' && (field1.includes('BlueJeans') || field1.includes('Video'))) {
           if (mdFile?.contentTitle?.includes('Cabal')) {
             cabalDropdownOptions.unshift({

src/components/ui/ArticleCard/index.tsx

@@ -77,20 +77,23 @@ function ArticleCard(props: ArticleCardProps) {
   // Normal Layout
   else
     return (
-      <article className="my-4 max-w-sm p-4">
-        <div className="grid">
-          <h3 className="w-10/12 rounded-sm bg-gradient-radial from-purple-700 to-purple-900 px-2 py-1 text-white shadow-sm">
-            <a
-              href={props.path}
-              target="_blank"
-              className="text-white no-underline hover:text-blue-100 hover:no-underline dark:text-white dark:hover:text-blue-50">
-              {sanitizeHtml(props.title)}
-            </a>
-          </h3>
+      <article className="flex flex-col overflow-hidden rounded-2xl border border-gray-100 bg-gray-50 shadow-sm transition-all duration-300 ease-in-out hover:-translate-y-2 hover:border-purple-500/40 hover:shadow-xl hover:shadow-purple-500/5 dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-purple-500/40 dark:hover:shadow-purple-500/10">
+        <div className="relative h-56 w-full overflow-hidden bg-gray-100 dark:bg-gray-950/40">
+          <img src={props.imgSrc || fallbackImage} alt={sanitizeHtml(props.title)} className="h-full w-full object-contain p-2" />
+          <div className="absolute bottom-0 left-0 z-10 w-10/12">
+            <h3 className="rounded-sm bg-gradient-radial from-purple-700 to-purple-900 px-2 py-1 text-white shadow-sm">
+              <a
+                href={props.path}
+                target="_blank"
+                className="text-white no-underline hover:text-blue-100 hover:no-underline dark:text-white dark:hover:text-blue-50">
+                {sanitizeHtml(props.title)}
+              </a>
+            </h3>
+          </div>
+        </div>
+        <div className="flex flex-1 flex-col p-4">
           {parse(abbrSubtitle)}
-          <PublishDate date={props.date} styles="row-start-1 col-start-1 z-10 my-2" />
-          <img src={props.imgSrc || fallbackImage} className="object-fit col-start-1 row-start-1 rounded-sm" />
-          <p className="text-purple-700">
+          <p className="mt-auto text-purple-700">
             By: <a href={props.author_link}>{props.display_name}</a>
           </p>
         </div>

src/components/ui/Testimonial/index.tsx

@@ -14,7 +14,7 @@ type TestimonialProps = {
 
 function Testimonial(props: TestimonialProps) {
   return (
-    <article className="flex flex-col mx-2 my-4 max-w-sm rounded-sm bg-white p-4 shadow-lg dark:bg-gray-900">
+    <article className="flex flex-col mx-2 my-4 min-w-[280px] max-w-sm rounded-2xl border border-gray-100 bg-gray-50 p-4 shadow-sm transition-all duration-300 ease-in-out hover:-translate-y-2 hover:border-purple-500/40 hover:shadow-xl hover:shadow-purple-500/5 dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-purple-500/40 dark:hover:shadow-purple-500/10">
       <div className="flex items-center gap-3 mb-4">
         <div className="m-2">
           <div className="flex items-center gap-2">

src/components/ui/ThumbCard/index.tsx

@@ -6,7 +6,7 @@ type ThumbCardProps = Card & {
 
 function ThumbCard({ title, subtitle, image }: ThumbCardProps): JSX.Element {
   return (
-    <article className="flex max-w-xs flex-col items-center justify-center rounded-md p-6 shadow-md lg:m-4">
+    <article className="flex max-w-xs flex-col items-center justify-center rounded-2xl border border-gray-100 bg-gray-50 p-6 shadow-sm transition-all duration-300 ease-in-out hover:-translate-y-2 hover:border-purple-500/40 hover:shadow-xl hover:shadow-purple-500/5 dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-purple-500/40 dark:hover:shadow-purple-500/10 lg:m-4">
       <h3 className="hidden">{title}</h3>
       <p className="w-48 text-center">{subtitle}</p>
       <img src={image.path} alt={image.alt} className="order-first my-8 h-20" />

src/components/utilities/PlayOnScroll/index.tsx

@@ -7,7 +7,7 @@ interface VideoProps {
     posterImg?: string;
   }
 
-const PlayOnScroll: React.FC = (props: VideoProps) => {
+const PlayOnScroll: React.FC<VideoProps> = (props) => {
     const videoRef = useRef<HTMLVideoElement>(null);
 
     useEffect(() => {

src/pages/get-started.tsx

@@ -99,7 +99,7 @@ const RunListContainersSection = () => {
           <CodeBlock language="bash" showLineNumbers className="sm:bg-gray-100 text-left mx-4 overflow-scroll xl:max-w-6xl max-w-xs sm:max-w-md md:max-w-lg lg:max-w-4xl">
             $ podman ps{'\n'}
             CONTAINER ID  IMAGE                           COMMAND           CREATED       STATUS      PORTS                 NAMES{'\n'}
-            01c44968199f  docker.io/library/httpd:latest  httpd-foreground  1 minute ago  Up 1 minute 0.0.0.0:8080->80/tcp  laughing_bob{'\n'}
+            01c44968199f  docker.io/library/httpd:latest  httpd-foreground  1 minute ago  Up 1 minute 0.0.0.0:8080-&gt;80/tcp  laughing_bob{'\n'}
           </CodeBlock>
           <div className="mx-auto max-w-lg rounded-md bg-white/50 px-6 py-6 shadow-lg dark:bg-gray-900/50">
             <h5 className="text-gray-700">Note:</h5>

src/pages/index.tsx

@@ -15,21 +15,21 @@ import { header, featureList, kubernetesBanner, compatibleTools } from '@site/st
 /* PAGE COMPONENTS */
 const FeatureItem = ({ title, description }) => {
   return (
-    <li className="m-6 rounded-md bg-gray-50 p-12 text-center dark:bg-gray-900 lg:w-1/3">
-      <h3 className="mx-auto mb-4 text-3xl font-bold text-purple-700 dark:text-purple-500">{title}</h3>
-      <Markdown text={description} styles="mx-auto max-w-md leading-relaxed text-gray-700" />
-    </li>
+    <div className="flex flex-col justify-start rounded-2xl border border-gray-100 bg-gray-50 p-8 shadow-sm transition-all duration-300 ease-in-out hover:-translate-y-2 hover:border-purple-500/40 hover:shadow-xl hover:shadow-purple-500/5 dark:border-gray-800 dark:bg-gray-900/50 dark:hover:border-purple-500/40 dark:hover:shadow-purple-500/10">
+      <h3 className="mb-4 text-2xl font-bold text-purple-700 dark:text-purple-500">{title}</h3>
+      <Markdown text={description} styles="leading-relaxed text-gray-700 dark:text-gray-300" />
+    </div>
   );
 };
 
 const FeatureSection = () => {
   return (
-    <section className="mb-12">
-      <ul className="flex flex-wrap justify-center gap-4">
+    <section className="container mb-20 px-4 md:px-8">
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
         {featureList.map(feature => {
           return <FeatureItem key={feature.title} title={feature.title} description={feature.description} />;
         })}
-      </ul>
+      </div>
     </section>
   );
 };