Fixed the card image and header layout, added a new headersize

Kuzuri247 · Kuzuri247 · commit 9e5de7d14725 · 2026-01-15T01:05:00.000+05:30
diff --git a/components/Card.tsx b/components/Card.tsx
@@ -5,6 +5,7 @@ import Image from 'next/image';
 import { Card as ShadcnCard } from '@/components/ui/card';
 import { Separator } from '@/components/ui/separator';
 import { cn } from '@/lib/utils';
+import { LucideArrowDownRight } from 'lucide-react';
 
 export interface CardProps {
   title: string;
@@ -13,7 +14,7 @@ export interface CardProps {
   link?: string;
   image?: string;
   extended?: boolean;
-  headerSize?: 'small' | 'medium' | 'large';
+  headerSize?: 'small' | 'base' | 'medium' | 'large';
   bodyTextSize?: 'small' | 'medium' | 'large';
 }
 
@@ -29,7 +30,8 @@ const CardBody = ({
 }: CardProps) => {
   const headerSizeClasses = {
     small: 'text-[0.9rem]',
-    medium: 'text-[1.3rem]',
+    base: 'text-[1rem]',
+    medium: 'text-[1.2rem]',
     large: 'text-[2rem]',
   };
 
@@ -54,28 +56,32 @@ const CardBody = ({
         </div>
       )}
 
-      <div className='flex flex-row items-start '>
-        {icon && (
-          <span className='mr-6 flex h-14 w-14 flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
-            <Image
-              src={icon}
-              alt={title}
-              width={56}
-              height={56}
-              className='h-full w-full'
-              data-test='card-icon'
-            />
-          </span>
-        )}
-        <p
-          className={cn(
-            'mb-1 mt-1 items-center font-bold text-gray-900 dark:text-white',
-            headerSizeClasses[headerSize],
+      <div className='flex flex-row items-start'>
+        <div className='flex flex-col h-full w-fit items-center justify-center'>
+          {icon && (
+            <span className='mr-6 flex size-[52px] flex-shrink-0 items-center justify-center rounded-lg border bg-blue-200 px-3 text-gray-900 dark:text-white'>
+              <Image
+                src={icon}
+                alt={title}
+                width={56}
+                height={56}
+                className='h-full w-full'
+                data-test='card-icon'
+              />
+            </span>
           )}
-          data-test='card-title'
-        >
-          {title}
-        </p>
+        </div>
+        <div className='flex flex-col h-full w-fit items-center justify-center'>
+          <p
+            className={cn(
+              'flex items-center my-1 font-bold text-gray-900 dark:text-white',
+              headerSizeClasses[headerSize],
+            )}
+            data-test='card-title'
+          >
+            {title}
+          </p>
+        </div>
       </div>
 
       <Separator className='bg-gray-400' />
@@ -96,10 +102,11 @@ const CardBody = ({
 
       {link && (
         <p
-          className='absolute bottom-3 right-5 font-medium opacity-0 transition-opacity delay-150 ease-in-out group-hover:opacity-100 text-black dark:text-white'
+          className='absolute flex bottom-3 right-5 font-medium opacity-0 transition-opacity delay-100 ease-in-out group-hover:opacity-100 text-black dark:text-white'
           data-test='card-read-more'
         >
-          Read More
+          Read More{' '}
+          <LucideArrowDownRight className='ml-2 group-hover:-rotate-90 duration-500' />
         </p>
       )}
     </ShadcnCard>
@@ -108,8 +115,10 @@ const CardBody = ({
 
 const Card: React.FC<CardProps> = ({ link, ...props }) => {
   return link ? (
-    <Link href={link} data-test='card-link'>
-      <CardBody link={link} {...props} />
+    <Link href={link} passHref legacyBehavior>
+      <a data-test='card-link'>
+        <CardBody link={link} {...props} />
+      </a>
     </Link>
   ) : (
     <CardBody {...props} />
diff --git a/cypress/components/Card.cy.tsx b/cypress/components/Card.cy.tsx
@@ -17,14 +17,12 @@ describe('Card Component', () => {
   it('should render Roadmap Card correctly', () => {
     cy.mount(<Card {...RoadmapProps} />);
     cy.get('[data-test="card-image"]').should('not.exist');
-    cy.get('[data-test="card-icon"]').should(
-      'have.attr',
-      'src',
-      RoadmapProps.icon,
-    );
+    cy.get('[data-test="card-icon"]')
+      .should('have.attr', 'src')
+      .and('include', RoadmapProps.icon);
     cy.get('[data-test="card-title"]').should('have.text', RoadmapProps.title);
     cy.get('[data-test="card-body"]').should('have.text', RoadmapProps.body);
-    cy.get('[data-test="card-read-more"]').should('have.text', 'Read More');
+    cy.get('[data-test="card-read-more"]').should('contain.text', 'Read More');
     cy.get('[data-test="card-link"]').should(
       'have.attr',
       'href',
@@ -42,10 +40,19 @@ describe('Card Component', () => {
       bodyTextSize: undefined,
     };
     cy.mount(<Card {...missingSizes} />);
-    cy.get('[data-test="card-title"]').should('have.class', 'text-[1.3rem]');
+    cy.get('[data-test="card-title"]').should('have.class', 'text-[1.2rem]');
     cy.get('[data-test="card-body"]').should('have.class', 'text-[1rem]');
   });
 
+  it('should render Roadmap card with base header size', () => {
+    const baseHeaderProps: CardProps = {
+      ...RoadmapProps,
+      headerSize: 'base',
+    };
+    cy.mount(<Card {...baseHeaderProps} />);
+    cy.get('[data-test="card-title"]').should('have.class', 'text-[1rem]');
+  });
+
   // Render the Roadmap card with extended body text
   it('should render Roadmap card with extended body text', () => {
     const extendedBody = { ...RoadmapProps, extended: true };
@@ -57,11 +64,9 @@ describe('Card Component', () => {
   it('should render Roadmap card with image', () => {
     const imageProps = { ...RoadmapProps, image: '/icons/roadmap.svg' };
     cy.mount(<Card {...imageProps} />);
-    cy.get('[data-test="card-image"]').should(
-      'have.attr',
-      'src',
-      imageProps.image,
-    );
+    cy.get('[data-test="card-image"]')
+      .should('have.attr', 'src')
+      .and('include', imageProps.image);
   });
 
   // Render the Roadmap Card with some missing props
@@ -76,7 +81,7 @@ describe('Card Component', () => {
   it('should show "Read More" text when link is provided', () => {
     cy.mount(<Card {...RoadmapProps} />);
     cy.get('[data-test="card-read-more"]').should('exist');
-    cy.get('[data-test="card-read-more"]').should('have.text', 'Read More');
+    cy.get('[data-test="card-read-more"]').should('contain.text', 'Read More');
   });
 
   // Test different text size combinations
diff --git a/pages/implementers/index.page.tsx b/pages/implementers/index.page.tsx
@@ -29,13 +29,13 @@ export default function ContentExample({
     <SectionContext.Provider value='docs'>
       <StyledMarkdown markdown={blocks[0]} />
       <section className='my-10'>
-        <div className='grid grid-cols-1 md:grid-cols-2 gap-4 w-12/12 md:w-11/12 lg:w-10/12 xl:w-10/12 m-auto'>
+        <div className='grid grid-cols-1 md:grid-cols-2 gap-4 w-12/12 md:w-11/12 lg:w-10/12 mx-auto'>
           <Card
             key='common-interfaces'
             icon='/icons/list.svg'
             title='Understand common interfaces'
             body='Build interoperable JSON Schema tools using shared interfaces.'
-            headerSize='small'
+            headerSize='base'
             bodyTextSize='small'
             link='./implementers/interfaces'
           />
@@ -44,7 +44,7 @@ export default function ContentExample({
             icon='/img/logos/bowtie.svg'
             title='Validate with Bowtie'
             body='Validate your JSON Schema tools with the Bowtie meta-validator.'
-            headerSize='medium'
+            headerSize='base'
             bodyTextSize='small'
             link='https://docs.bowtie.report/en/stable/'
           />
