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.

Revisions

  1. ideabrian created this gist Jan 5, 2025.
    61 changes: 61 additions & 0 deletions frogdr.com-slash-grow
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,61 @@
    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;