Skip to content

Instantly share code, notes, and snippets.

@ideabrian
Created January 5, 2025 17:02
Show Gist options
  • Save ideabrian/119682032f68e60d91a5b6f6ebb0e4fd to your computer and use it in GitHub Desktop.
Save ideabrian/119682032f68e60d91a5b6f6ebb0e4fd to your computer and use it in GitHub Desktop.
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">ONE-TIME BOOST</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 personally submit your website to premium directories and high-DR platforms 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">White hat methods only - build genuine authority 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">Full refund if we don't hit DR20+ within 90 days</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">
Get Started Now
<ArrowRight className="w-5 h-5" />
</button>
</div>
</div>
</div>
);
};
export default DRPricingCard;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment