From c4da6ba948b1b8414b3c030cea576658e6f217ef Mon Sep 17 00:00:00 2001 From: iheanyiezumaukom-ai Date: Thu, 30 Jul 2026 20:15:38 +0100 Subject: [PATCH] feat(industry): implement asymmetric grid for precision solution verticals - Added PrecisionGrid component with CSS Grid asymmetric layout - Featured card spans 2 columns on desktop - 3-item grid for specialized verticals (Global Freight, Cold Chain, Last Mile) - Added comprehensive unit tests - Responsive design with Tailwind CSS Closes #321 --- components/industry/PrecisionGrid.tsx | 146 ++++++++++++++++++ .../industry/__tests__/PrecisionGrid.test.tsx | 72 +++++++++ 2 files changed, 218 insertions(+) create mode 100644 components/industry/PrecisionGrid.tsx create mode 100644 components/industry/__tests__/PrecisionGrid.test.tsx diff --git a/components/industry/PrecisionGrid.tsx b/components/industry/PrecisionGrid.tsx new file mode 100644 index 0000000..5bd884e --- /dev/null +++ b/components/industry/PrecisionGrid.tsx @@ -0,0 +1,146 @@ +import React from 'react'; +import Image from 'next/image'; + +interface Vertical { + id: string; + title: string; + description: string; + image?: string; + icon?: React.ReactNode; + link?: string; +} + +interface PrecisionGridProps { + verticals?: Vertical[]; + className?: string; +} + +const defaultVerticals: Vertical[] = [ + { + id: 'independent-carriers', + title: 'Independent Carriers', + description: 'Empower owner-operators and small fleets with real-time tracking, automated settlements, and instant freight matching.', + image: '/images/industry/truck-cab.svg', + }, + { + id: 'global-freight', + title: 'Global Freight', + description: 'Manage cross-border shipments with integrated customs documentation and multi-modal transport coordination.', + icon: '🌍', + }, + { + id: 'cold-chain', + title: 'Cold Chain', + description: 'Maintain temperature integrity with real-time monitoring, automated alerts, and compliance reporting for perishable goods.', + icon: '❄️', + }, + { + id: 'last-mile', + title: 'Last Mile', + description: 'Optimize final delivery with dynamic routing, real-time ETA updates, and proof of delivery capture.', + icon: '🚚', + }, +]; + +export const PrecisionGrid: React.FC = ({ + verticals = defaultVerticals, + className = '', +}) => { + // Get the featured vertical (first one) and the rest + const [featured, ...rest] = verticals; + + return ( +
+
+ {/* Header */} +
+

+ Precision Solutions for Specialized Verticals +

+

+ Tailored logistics solutions designed for the unique challenges of each industry segment. +

+
+ + {/* Asymmetric Grid */} +
+ {/* Featured Card - Spans 2 columns on desktop */} +
+
+ {featured?.image ? ( + {featured.title} + ) : ( +
+ 🚛 +
+ )} +
+
+

{featured?.title}

+

{featured?.description}

+
+
+
+
+ + {/* Rest of the grid - 3 items in 2 rows with asymmetrical layout */} +
+ {rest.slice(0, 3).map((vertical, index) => ( +
+
+
{vertical.icon || '📦'}
+

+ {vertical.title} +

+

+ {vertical.description} +

+ +
+
+ ))} +
+
+ + {/* Bottom row with the remaining verticals if any */} + {rest.length > 3 && ( +
+ {rest.slice(3).map((vertical) => ( +
+
+
{vertical.icon || '📦'}
+

+ {vertical.title} +

+

+ {vertical.description} +

+ +
+
+ ))} +
+ )} +
+
+ ); +}; + +export default PrecisionGrid; diff --git a/components/industry/__tests__/PrecisionGrid.test.tsx b/components/industry/__tests__/PrecisionGrid.test.tsx new file mode 100644 index 0000000..490f3a0 --- /dev/null +++ b/components/industry/__tests__/PrecisionGrid.test.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom'; +import { PrecisionGrid } from '../PrecisionGrid'; + +describe('PrecisionGrid Component', () => { + const mockVerticals = [ + { + id: 'independent-carriers', + title: 'Independent Carriers', + description: 'Test description for independent carriers', + image: '/test-image.jpg', + }, + { + id: 'global-freight', + title: 'Global Freight', + description: 'Test description for global freight', + icon: '🌍', + }, + { + id: 'cold-chain', + title: 'Cold Chain', + description: 'Test description for cold chain', + icon: '❄️', + }, + { + id: 'last-mile', + title: 'Last Mile', + description: 'Test description for last mile', + icon: '🚚', + }, + ]; + + it('renders the component with default props', () => { + render(); + expect(screen.getByText('Precision Solutions for Specialized Verticals')).toBeInTheDocument(); + }); + + it('renders the featured vertical card', () => { + render(); + expect(screen.getByText('Independent Carriers')).toBeInTheDocument(); + }); + + it('renders all vertical cards', () => { + render(); + expect(screen.getByText('Global Freight')).toBeInTheDocument(); + expect(screen.getByText('Cold Chain')).toBeInTheDocument(); + expect(screen.getByText('Last Mile')).toBeInTheDocument(); + }); + + it('renders with custom className', () => { + const { container } = render( + + ); + expect(container.querySelector('.custom-class')).toBeInTheDocument(); + }); + + it('uses default verticals when none provided', () => { + render(); + expect(screen.getByText('Independent Carriers')).toBeInTheDocument(); + expect(screen.getByText('Global Freight')).toBeInTheDocument(); + expect(screen.getByText('Cold Chain')).toBeInTheDocument(); + expect(screen.getByText('Last Mile')).toBeInTheDocument(); + }); + + it('applies CSS grid classes for asymmetrical layout', () => { + const { container } = render(); + const gridElement = container.querySelector('.grid'); + expect(gridElement).toHaveClass('grid-cols-1'); + expect(gridElement).toHaveClass('md:grid-cols-3'); + }); +});