frogdr-com-slash-grow

import React from 'react';
import { Check, Rocket, Shield, RefreshCw, ArrowRight } from 'lucide-react';

const DRPricingCard = () => {
  return (
    <div className="max-w-lg mx-auto p-6">
      <h1 className="text-3xl font-bold text-center mb-8 flex items-center justify-center gap-2">
        <Rocket className="text-orange-500" />
        Supercharge Your DR Score
      </h1>
      
      <div className="bg-gradient-to-br from-white to-orange-50 rounded-xl shadow-lg overflow-hidden border border-orange-100">
        {/* Price Header */}
        <div className="p-6 text-center border-b border-orange-100">
          <div className="text-5xl font-bold mb-2 text-orange-600">$95</div>
          <div className="text-gray-600 font-medium">PAY ONLY FOR RESULTS</div>
        </div>
        
        {/* Main Offer */}
        <div className="bg-orange-500 text-white p-4 text-center text-xl font-semibold flex items-center justify-center gap-2">
          <Shield className="w-5 h-5" />
          I'll Personally Grow Your DR to 20+
        </div>
        
        {/* Features List */}
        <div className="p-6 space-y-6">
          <div className="flex items-start gap-3">
            <div className="bg-orange-100 p-2 rounded-full">
              <Check className="w-5 h-5 text-orange-500" />
            </div>
            <p className="text-gray-800">I'll <span className="font-bold">personally submit</span> your website to <span className="font-bold">premium directories</span> and <span className="font-bold">high-DR platforms</span> until you reach DR20+</p>
          </div>
          
          <div className="flex items-start gap-3">
            <div className="bg-orange-100 p-2 rounded-full">
              <RefreshCw className="w-5 h-5 text-orange-500" />
            </div>
            <p className="text-gray-800"><span className="font-bold">White hat methods only</span> - build <span className="font-bold">genuine authority</span> with quality backlinks</p>
          </div>
          
          <div className="flex items-start gap-3">
            <div className="bg-orange-100 p-2 rounded-full">
              <Shield className="w-5 h-5 text-orange-500" />
            </div>
            <p className="text-gray-800"><span className="font-bold">Full refund</span> if we don't hit DR20+ within <span className="font-bold">90 days</span></p>
          </div>
        </div>
        
        {/* CTA Button */}
        <div className="p-6 pt-2">
          <button className="w-full bg-orange-500 text-white rounded-lg py-4 text-lg font-semibold hover:bg-orange-600 transition-colors flex items-center justify-center gap-2">
            Let's Try It!
            <ArrowRight className="w-5 h-5" />
          </button>
        </div>
      </div>
    </div>
  );
};

export default DRPricingCard;