Created
January 5, 2025 17:02
-
-
Save ideabrian/119682032f68e60d91a5b6f6ebb0e4fd to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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