207 lines
8.2 KiB
Markdown
207 lines
8.2 KiB
Markdown
# Card Pattern Consistency Update
|
|
|
|
This document outlines the card padding, gap, and font-weight consistency changes made across all section components.
|
|
|
|
---
|
|
|
|
## Changes Summary
|
|
|
|
### 1. Container Gap Changes
|
|
```
|
|
OLD: gap-3 xl:gap-4 2xl:gap-5
|
|
NEW: gap-4 xl:gap-5 2xl:gap-6
|
|
```
|
|
|
|
### 2. Container Padding Changes
|
|
```
|
|
OLD: p-3 xl:p-4 2xl:p-5
|
|
NEW: p-6 xl:p-7 2xl:p-8
|
|
|
|
OLD: p-4 xl:p-5 2xl:p-6
|
|
NEW: p-6 xl:p-7 2xl:p-8
|
|
```
|
|
|
|
### 3. Font Weight Changes
|
|
```
|
|
OLD: font-medium
|
|
NEW: font-semibold
|
|
```
|
|
|
|
### 4. Margin Changes
|
|
```
|
|
OLD: mb-3 xl:mb-4 2xl:mb-5
|
|
NEW: mb-4 xl:mb-5 2xl:mb-6
|
|
```
|
|
|
|
### 5. Horizontal Padding Changes
|
|
```
|
|
OLD: px-3 xl:px-4 2xl:px-5
|
|
NEW: px-6 xl:px-7 2xl:px-8
|
|
```
|
|
|
|
---
|
|
|
|
## Reference Pattern
|
|
|
|
The canonical reference is `AboutFeaturesSplit.tsx`:
|
|
|
|
```tsx
|
|
<div className="flex flex-col md:flex-row md:items-stretch gap-5">
|
|
<div className="flex flex-col justify-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 w-full md:w-4/10 2xl:w-35/100 card rounded">
|
|
{items.map((item, index) => {
|
|
const ItemIcon = resolveIcon(item.icon);
|
|
return (
|
|
<div key={item.title}>
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center justify-center shrink-0 mb-1 size-10 primary-button rounded">
|
|
<ItemIcon className="h-2/5 w-2/5 text-primary-cta-text" strokeWidth={1.5} />
|
|
</div>
|
|
<h3 className="text-2xl font-semibold">{item.title}</h3>
|
|
<p className="text-base leading-snug">{item.description}</p>
|
|
</div>
|
|
{index < items.length - 1 && (
|
|
<div className="mt-4 xl:mt-5 2xl:mt-6 border-b border-accent/40" />
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="p-px w-full md:w-6/10 2xl:w-7/10 h-80 md:h-auto card rounded overflow-hidden">
|
|
<div className="relative size-full">
|
|
<ImageOrVideo imageSrc={imageSrc} videoSrc={videoSrc} className="absolute inset-0 object-cover rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
```
|
|
|
|
---
|
|
|
|
## Files Updated
|
|
|
|
### Gap Pattern (32 files)
|
|
- `src/components/sections/metrics/MetricsMediaCards.tsx`
|
|
- `src/components/sections/product/ProductVariantCards.tsx`
|
|
- `src/components/sections/product/ProductRatingCards.tsx`
|
|
- `src/components/sections/product/ProductQuantityCards.tsx`
|
|
- `src/components/sections/product/ProductMediaCards.tsx`
|
|
- `src/components/sections/team/TeamOverlayCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialQuoteCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialRatingCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialColumnMarqueeCards.tsx`
|
|
- `src/components/sections/features/FeaturesTimelineCards.tsx`
|
|
- `src/components/sections/features/FeaturesTaggedCards.tsx`
|
|
- `src/components/sections/features/FeaturesMediaGrid.tsx`
|
|
- `src/components/sections/features/FeaturesMediaCards.tsx`
|
|
- `src/components/sections/features/FeaturesGridSplit.tsx`
|
|
- `src/components/sections/features/FeaturesFlipCards.tsx`
|
|
- `src/components/sections/features/FeaturesComparison.tsx`
|
|
- `src/components/sections/features/FeaturesBorderGlow.tsx`
|
|
- `src/components/sections/features/FeaturesBentoGrid.tsx`
|
|
- `src/components/sections/features/FeaturesBento.tsx`
|
|
- `src/components/sections/features/FeaturesArrowCards.tsx`
|
|
- `src/components/sections/features/FeaturesIconCards.tsx`
|
|
- `src/components/sections/blog/BlogTagCards.tsx`
|
|
- `src/components/sections/blog/BlogSimpleCards.tsx`
|
|
- `src/components/sections/metrics/MetricsFeatureCards.tsx`
|
|
- `src/components/sections/metrics/MetricsSimpleCards.tsx`
|
|
- `src/components/sections/pricing/PricingHighlightedCards.tsx`
|
|
- `src/components/sections/pricing/PricingSimpleCards.tsx`
|
|
- `src/components/sections/pricing/PricingCenteredCards.tsx`
|
|
- `src/components/sections/hero/HeroWorkScrollStack.tsx`
|
|
- `src/components/sections/hero/HeroBillboardTestimonial.tsx`
|
|
- `src/components/sections/hero/HeroOverlayTestimonial.tsx`
|
|
- `src/components/sections/hero/HeroSplitTestimonial.tsx`
|
|
|
|
### Padding Pattern (44 files)
|
|
- `src/components/sections/about/AboutTestimonialParallax.tsx`
|
|
- `src/components/sections/about/AboutFeaturesSplit.tsx`
|
|
- `src/components/sections/metrics/MetricsMediaCards.tsx`
|
|
- `src/components/sections/metrics/MetricsIconCards.tsx`
|
|
- `src/components/sections/metrics/MetricsFeatureCards.tsx`
|
|
- `src/components/sections/metrics/MetricsGradientCards.tsx`
|
|
- `src/components/sections/metrics/MetricsSimpleCards.tsx`
|
|
- `src/components/sections/product/ProductVariantCards.tsx`
|
|
- `src/components/sections/product/ProductRatingCards.tsx`
|
|
- `src/components/sections/product/ProductQuantityCards.tsx`
|
|
- `src/components/sections/product/ProductMediaCards.tsx`
|
|
- `src/components/sections/faq/FaqTwoColumn.tsx`
|
|
- `src/components/sections/team/TeamOverlayCards.tsx`
|
|
- `src/components/sections/team/TeamListCards.tsx`
|
|
- `src/components/sections/team/TeamDetailedCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialQuoteCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialOverlayCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialRatingCards.tsx`
|
|
- `src/components/sections/testimonial/TestimonialColumnMarqueeCards.tsx`
|
|
- `src/components/sections/features/FeaturesTimelineCards.tsx`
|
|
- `src/components/sections/features/FeaturesTaggedCards.tsx`
|
|
- `src/components/sections/features/FeaturesRevealCardsBento.tsx`
|
|
- `src/components/sections/features/FeaturesResultsComparison.tsx`
|
|
- `src/components/sections/features/FeaturesMediaCards.tsx`
|
|
- `src/components/sections/features/FeaturesFlipCards.tsx`
|
|
- `src/components/sections/features/FeaturesComparison.tsx`
|
|
- `src/components/sections/features/FeaturesBorderGlow.tsx`
|
|
- `src/components/sections/features/FeaturesBentoGrid.tsx`
|
|
- `src/components/sections/features/FeaturesBento.tsx`
|
|
- `src/components/sections/features/FeaturesArrowCards.tsx`
|
|
- `src/components/sections/features/FeaturesIconCards.tsx`
|
|
- `src/components/sections/features/FeaturesGridSplit.tsx`
|
|
- `src/components/sections/blog/BlogTagCards.tsx`
|
|
- `src/components/sections/blog/BlogSimpleCards.tsx`
|
|
- `src/components/sections/blog/BlogArticle.tsx`
|
|
- `src/components/sections/pricing/PricingMediaCards.tsx`
|
|
- `src/components/sections/pricing/PricingHighlightedCards.tsx`
|
|
- `src/components/sections/pricing/PricingSimpleCards.tsx`
|
|
- `src/components/sections/pricing/PricingCenteredCards.tsx`
|
|
- `src/components/sections/hero/HeroBillboardTestimonial.tsx`
|
|
- `src/components/sections/hero/HeroOverlayTestimonial.tsx`
|
|
- `src/components/sections/hero/HeroSplitTestimonial.tsx`
|
|
- `src/components/sections/hero/HeroSplitKpi.tsx`
|
|
- `src/components/sections/contact/ContactSplitFormParallax.tsx`
|
|
|
|
### Font Weight (106+ files)
|
|
All section components with `font-medium` class were updated to `font-semibold`.
|
|
|
|
### UI Components Updated (Phase 2)
|
|
- `src/components/ui/Card.tsx` - padding
|
|
- `src/components/ui/Modal.tsx` - padding, gap, margin, font-weight
|
|
- `src/components/ui/Sheet.tsx` - padding, gap, margin, font-weight
|
|
- `src/components/ui/NavbarFloating.tsx` - padding, gap, horizontal padding, font-weight
|
|
- `src/components/ui/NavbarFloatingLogo.tsx` - padding, gap, horizontal padding, font-weight
|
|
- `src/components/ui/Accordion.tsx` - font-weight
|
|
- `src/components/ui/ActiveBadge.tsx` - font-weight
|
|
- `src/components/ui/AvatarGroup.tsx` - font-weight
|
|
- `src/components/ui/Calendar.tsx` - font-weight
|
|
- `src/components/ui/DropdownMenu.tsx` - font-weight
|
|
- `src/components/ui/Label.tsx` - font-weight
|
|
- `src/components/ui/LoaderReveal.tsx` - font-weight
|
|
- `src/components/ui/NavbarCentered.tsx` - font-weight
|
|
- `src/components/ui/NavbarDropdown.tsx` - font-weight
|
|
- `src/components/ui/NavbarFullscreen.tsx` - font-weight
|
|
- `src/components/ui/NavbarInline.tsx` - font-weight
|
|
- `src/components/ui/SectionErrorBoundary.tsx` - font-weight
|
|
- `src/components/ui/SelectorButton.tsx` - font-weight
|
|
|
|
### E-commerce Components Updated (Phase 2)
|
|
- `src/components/ecommerce/ProductCart.tsx` - font-weight
|
|
- `src/components/ecommerce/ProductCatalog.tsx` - font-weight
|
|
- `src/components/ecommerce/ProductDetailCard.tsx` - font-weight
|
|
|
|
### Pages Updated (Phase 2)
|
|
All 72 preview/demo pages in `src/pages/` were updated with `font-semibold`.
|
|
|
|
---
|
|
|
|
## Visual Impact
|
|
|
|
These changes result in:
|
|
1. **Larger card padding** - More breathing room inside cards
|
|
2. **Larger gaps** - More space between card elements
|
|
3. **Bolder titles** - Semibold instead of medium weight for better hierarchy
|
|
|
|
---
|
|
|
|
## Verification
|
|
|
|
Run `npm run build` to verify all changes compile correctly.
|