bender/75a7912b-03d1-4b48-88fb-10021b13e0a1

Fork 0

Files

kudinDmitriyUp 0823a5dec7 Initial commit

2026-05-31 20:08:17 +00:00

8.2 KiB

Raw Permalink Blame History

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:

<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:

Larger card padding - More breathing room inside cards
Larger gaps - More space between card elements
Bolder titles - Semibold instead of medium weight for better hierarchy

Verification

Run npm run build to verify all changes compile correctly.

8.2 KiB Raw Permalink Blame History