Fix Parashield Frontend Issues (#580, #581, #582, #583)

src/app/page.tsx

@@ -40,6 +40,7 @@ export default function HomePage() {
   const [category, setCategory]         = useState<CategoryFilterValue>('all');
   const [compareIds, setCompareIds]     = useState<Set<string>>(new Set());
   const [compareOpen, setCompareOpen]   = useState(false);
+  const handleCloseCompare = useCallback(() => setCompareOpen(false), []);
 
   const toggleCompare = useCallback((product: Product) => {
     setCompareIds((prev) => {
@@ -264,7 +265,7 @@ export default function HomePage() {
         {compareOpen && compareProducts.length >= 2 && (
           <CompareModal
             products={compareProducts}
-            onClose={() => setCompareOpen(false)}
+            onClose={handleCloseCompare}
           />
         )}
       </section>

src/components/CategoryFilter.tsx

@@ -52,6 +52,7 @@ export function CategoryFilter({ value, onChange, className }: CategoryFilterPro
           ref={(el) => { tabRefs.current[i] = el; }}
           role="tab"
           aria-selected={value === cat}
+          aria-pressed={value === cat}
           tabIndex={value === cat ? 0 : -1}
           onClick={() => onChange(cat)}
           onKeyDown={(e) => handleKeyDown(e, i)}

src/components/CompareModal.tsx

@@ -1,6 +1,7 @@
 import type { Product } from '@/types';
 import { basisPointsToPercent, formatUSDC } from '@/lib/format';
 import { CATEGORY_ICONS } from '@/lib/constants';
+import { memo } from 'react';
 import { Modal } from './Modal';
 
 interface Props {
@@ -18,7 +19,7 @@ const FIELDS = [
   { label: 'Status',       getValue: (p: Product) => p.status },
 ];
 
-export function CompareModal({ products, onClose }: Props) {
+function CompareModalComponent({ products, onClose }: Props) {
   return (
     <Modal open={true} onClose={onClose} title="Compare Products" maxWidth="max-w-3xl">
       <div className="overflow-x-auto">
@@ -52,3 +53,5 @@ export function CompareModal({ products, onClose }: Props) {
     </Modal>
   );
 }
+
+export const CompareModal = memo(CompareModalComponent);

src/components/ProductCard.tsx

@@ -76,13 +76,17 @@ function ProductCardComponent({ product, compareSelected, onCompareToggle }: Pro
           <TriggerConditionBadge product={product} />
         </div>
 
-        <dl className="mt-4 grid grid-cols-2 gap-3 text-sm">
+        <dl className="mt-4 grid grid-cols-3 gap-3 text-sm">
           <div className="rounded-xl bg-gray-100 dark:bg-white/5 p-3">
             <dt className="text-[10px] uppercase tracking-widest text-gray-500 dark:text-gray-400">Premium</dt>
             <dd className="mt-0.5 font-semibold text-teal-400">
               {basisPointsToPercent(product.premiumRate)}
             </dd>
           </div>
+          <div className="rounded-xl bg-gray-100 dark:bg-white/5 p-3">
+            <dt className="text-[10px] uppercase tracking-widest text-gray-500 dark:text-gray-400">Min Coverage</dt>
+            <dd className="mt-0.5 font-semibold text-gray-950 dark:text-white">{formatUSDC(product.coverageMin)}</dd>
+          </div>
           <div className="rounded-xl bg-gray-100 dark:bg-white/5 p-3">
             <dt className="text-[10px] uppercase tracking-widest text-gray-500 dark:text-gray-400">Max Coverage</dt>
             <dd className="mt-0.5 font-semibold text-gray-950 dark:text-white">{formatUSDC(product.coverageMax)}</dd>

src/components/SearchBar.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import { usePathname } from 'next/navigation';
 import { useDebounce } from '@/hooks/useDebounce';
 
 interface SearchBarProps {
@@ -19,6 +20,14 @@ export function SearchBar({
 }: SearchBarProps) {
   const [query, setQuery] = useState('');
   const debouncedQuery   = useDebounce(query, debounceMs);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (pathname === '/') {
+      setQuery('');
+      onSearch('');
+    }
+  }, [pathname, onSearch]);
 
   useEffect(() => {
     onSearch(debouncedQuery);