Pricing Section

The Pricing Section is a comprehensive component designed to convert visitors into customers. It features pricing plans, key features, customer testimonials, and social proof elements in a premium dark design.

Usage

import { PricingSection } from '@/components/sections';

export default function HomePage() {
  return (
    <div>
      {/* Other sections */}
      <PricingSection />
    </div>
  );
}

The component includes a scroll target ID (#pricing) that can be linked to from other parts of your site.

Features

• Premium Design - Dark gradient background with glass-morphism effects
• Feature Highlights - Key selling points with icons
• Social Proof - Customer avatars and testimonials
• Pricing Display - Clear pricing with call-to-action
• Responsive Layout - Works on all device sizes
• Scroll Target - Can be linked to with #pricing anchor

Structure

The component includes several sections:

1. Header - Title and subtitle
2. Features Grid - Key selling points with icons
3. Pricing Card - Main pricing information
4. Social Proof - Customer avatars and count
5. Testimonials - Customer quotes and ratings
6. Call-to-Action - Purchase/signup button

Default Features

The component highlights these key features:

• All features included - Complete feature set
• Lifetime updates - Ongoing development
• Saves you 120+ hours - Time-saving value proposition
• Exclusive Discord server - Premium support

Customization

Pricing Information

Update the pricing details:

// Edit the main pricing display
<div className="mb-8 text-center">
  <div className="mb-2 text-6xl font-bold text-white">
    $299
    <span className="text-2xl font-normal text-gray-300"> once</span>
  </div>
  <p className="text-gray-300">Get lifetime access</p>
</div>

Features List

Modify the features array:

const features = [
  {
    icon: <YourIcon className="h-4 w-4" />,
    title: 'Your Feature',
    description: 'Feature description',
  },
  // ... other features
];

Social Proof

Update customer avatars and testimonials:

const avatars = [
  'your-customer-avatar-url-1',
  'your-customer-avatar-url-2',
  // ... more avatars
];

Testimonials

Customize customer testimonials:

// Edit testimonial content in the component
<p className="mb-6 text-lg leading-relaxed text-gray-300">"Your customer testimonial here..."</p>

Styling

Key design elements:

• Dark gradient background - From purple to blue
• Glass-morphism cards - Translucent effects
• Premium typography - Large, bold pricing display
• Subtle animations - Hover effects and transitions
• Social proof elements - Customer avatars and ratings

Dependencies

• @/components/ui/button - Button component
• @/components/ui/card - Card component
• lucide-react - Icons (Star, Heart, Zap, Shield)
• next/link - Navigation links
• next/image - Optimized images

Best Practices

1. Clear value proposition - Highlight key benefits prominently
2. Social proof - Include real customer testimonials
3. Urgency/scarcity - Consider adding limited-time offers
4. Single CTA - Focus on one primary action
5. Mobile optimization - Test thoroughly on mobile devices
6. A/B testing - Try different price points and messaging

Scroll Linking

The component includes id="pricing" for deep linking:

// Link to pricing section from other components
<Link href="/#pricing">View Pricing</Link>

Performance Considerations

• Uses next/image for optimized image loading
• Efficient CSS with Tailwind classes
• Minimal JavaScript for interactivity
• Lazy loading for customer avatars

This component is designed to be the final conversion point in your sales funnel, combining pricing information with compelling social proof and feature highlights.