Core Value Stats

Installation

Usage

import CoreValueStats from "@/components/ruixen/core-value-stats";
 
export default function App() {
  const stats = [
    {
      value: "99.9%",
      label: "Uptime",
      description: "Reliable service you can count on",
      image: "/stats-uptime.jpg",
    },
    {
      value: "50K+",
      label: "Users",
      description: "Trusted by developers worldwide",
    },
    {
      value: "24/7",
      label: "Support",
      description: "Always here to help you succeed",
    },
  ];
 
  return (
    <CoreValueStats
      title="Building Scalable Digital Foundations"
      subtitle="Core Values"
      description="From design systems to digital ecosystems"
      stats={stats}
    />
  );
}

Props

CoreValueStats Props

CoreStat Props

Features

• Responsive Layout: Horizontal scroll on mobile, grid on desktop
• Image Backgrounds: Optional images with overlay effects
• 3D Hover Effects: Cards tilt and scale on hover (image cards only)
• Smooth Animations: Staggered entrance animations with Framer Motion
• Flexible Content: Works with or without images
• Dark Mode Support: Adapts to theme automatically
• Call-to-Action: Built-in "Learn more" links for each stat

Animation Details

Card Entrance

• Staggered Timing: 0.1s delay between each card
• Fade In: Opacity 0 → 1
• Slide Up: 20px vertical movement
• Duration: 0.5 seconds
• Viewport Trigger: Animates when scrolled into view

Hover Effects (Image Cards)

• 3D Rotation: 5° tilt on X and Y axes
• Scale: 5% size increase
• Spring Physics: Stiffness 200, Damping 10
• Shadow: Enhanced shadow on hover
• Smooth Transition: Natural spring animation

Customization

Custom Header

<CoreValueStats
  title="Why Choose Us"
  subtitle="Our Strengths"
  description="Discover what makes us different from the competition"
  stats={stats}
/>

Stats Without Images

const stats = [
  {
    value: "10+",
    label: "Years",
    description: "Industry experience",
  },
  {
    value: "500+",
    label: "Projects",
    description: "Successfully delivered",
  },
];

Stats With Images

const stats = [
  {
    value: "Award Winning",
    label: "Design",
    description: "Recognized globally for excellence",
    image: "/award.jpg",
  },
];

Mixed Content

const stats = [
  {
    value: "99.9%",
    label: "Uptime",
    description: "Reliable service",
    image: "/uptime.jpg", // With image
  },
  {
    value: "24/7",
    label: "Support",
    description: "Always available", // Without image
  },
];

Styling

Card Dimensions

• Mobile: 280px width (horizontal scroll)
• Tablet: 45% width (2 columns)
• Desktop: 280px width (auto grid)
• Height: Fixed 256px (h-64)

Text Styling

• Value: 4xl font, bold, drop shadow
• Label: Small, semibold, uppercase, tracking wide
• Description: Small, leading relaxed
• Button: Link variant with arrow

Image Cards

• Overlay: Black with 50% opacity
• Text Color: White for high contrast
• Border Radius: 24px (rounded-3xl)
• Image: Object cover, full card

Use Cases

• Company Stats: Showcase key metrics and achievements
• Product Features: Highlight core product benefits
• Team Values: Display organizational principles
• Performance Metrics: Show system reliability stats
• Customer Success: Display user satisfaction data
• Service Offerings: Present key service features

Examples

Company Metrics

const companyStats = [
  {
    value: "Founded 2020",
    label: "Established",
    description: "Building the future since day one",
    image: "/company-founding.jpg",
  },
  {
    value: "100+",
    label: "Team Members",
    description: "Talented professionals worldwide",
  },
  {
    value: "$50M+",
    label: "Funding",
    description: "Backed by leading investors",
  },
];

Product Features

const features = [
  {
    value: "Lightning Fast",
    label: "Performance",
    description: "Optimized for speed and efficiency",
    image: "/fast-performance.jpg",
  },
  {
    value: "Secure",
    label: "Enterprise Grade",
    description: "Bank-level security standards",
  },
];

Performance

• Optimized Images: Use Next.js Image component for optimization
• Hardware Acceleration: Transform-based animations
• Viewport Detection: Animations trigger only when visible
• Efficient Rendering: Minimal re-renders with Framer Motion

Accessibility

• Semantic HTML: Proper heading hierarchy
• Keyboard Navigation: All interactive elements accessible
• Screen Readers: Descriptive text for all content
• Focus Indicators: Clear focus states on buttons
• Color Contrast: High contrast text on backgrounds