Website/app/pricing/page.js

import Layout from "@/components/layout/Layout";
import { Check, Star, Zap, Crown } from "lucide-react";
import Image from "next/image";

export const metadata = {
  title:
    "Pricing | RankRunners - SEO, Web Design & Digital Marketing Agency",
  description:
    "Learn how RankRunners LLC collects, uses, and protects your information.",
};


export default function PricingPage() {
  const pricingPlans = [
    {
      id: 1,
      name: "Starter Care",
      price: "$175",
      description: "Great for getting started or low-maintenance needs.",
      buttonText: "Buy Now",
      isPopular: false,
      features: [
        "Custom onboarding",
        "Business grade website hosting",
        "24/7 website protection",
        "Code & speed optimization",
        "Google product integrations",
        "On-Demand monthly revisions",
        "Free SSL certificate",
        "50GB of storage",
        "Weekly Backups",
      ],
      stars: 1,
    },
    {
      id: 2,
      name: "Steady Support",
      price: "$250",
      description: "Ideal for businesses needing regular updates.",
      buttonText: "Buy Now",
      isPopular: true,
      features: [
        "Custom onboarding",
        "Business grade website hosting",
        "24/7 website protection",
        "Code & speed optimization",
        "Google product integrations",
        "On-Demand bi-weekly revisions",
        "Free SSL certificate",
        "100GB of additional storage",
        "Daily Backups",
        "Site performance investigations",
        "Form submission monitoring",
        "Proprietary CMS Integration",
      ],
      stars: 2,
    },
    {
      id: 3,
      name: "Total Coverage",
      price: "$400",
      description: "Perfect for hands-off clients who want it all handled.",
      buttonText: "Buy Now",
      isPopular: false,
      features: [
        "Custom onboarding",
        "Business grade website hosting",
        "24/7 website protection",
        "Code & speed optimization",
        "Google product integrations",
        "Unlimited revisions",
        "Free SSL certificate",
        "100GB of additional storage",
        "Daily Backups + Off-site Backups",
        "Site performance investigations",
        "Form submission monitoring",
        "Proprietary CMS Integration",
        "Dedicated senior account manager",
      ],
      stars: 3,
    },
  ];

  const renderStars = (count) => {
    const stars = [];
    for (let i = 0; i < 3; i++) {
      stars.push(
        <Image
          key={i}
          src={`/assets/img/icon/icon-rank${i < count ? "" : "-gradient"}.webp`}
          width={60}
          height={60}
          alt="Star"
        />
      );
    }
    return stars;
  };

  return (
    <Layout headerStyle={4} footerStyle={3} breadcrumbTitle="Pricing">
      <div className="row justify-content-center mt-5">
        <div className="section-title text-center mb-50 tg-heading-subheading animation-style3">
          <span className="sub-title">
            PLANS <span className="title-color"> AND PRICING</span>
          </span>
          <h2 className="title tg-element-title">
            Full-service web management built to outrun the competition.
          </h2>
        </div>
      </div>
      <div className="container mx-auto px-4 pb-12">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
          {pricingPlans.map((plan) => (
            <div
              key={plan.id}
              className={`relative bg-white border ${
                plan.isPopular ? "border-2 border-blue-200" : "border-gray-200"
              } rounded-lg shadow-sm`}
            >
              {plan.isPopular && (
                <div className="absolute -top-5 left-1/2 transform -translate-x-1/2 bg-orange-500 text-white text-md px-3 py-1 rounded-full">
                  Best Value
                </div>
              )}
              <div className="text-center p-6 pb-4">
                <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
                <div className="flex justify-center my-4">
                  {renderStars(plan.stars)}
                </div>
                <p className="text-sm text-gray-600 mb-4">{plan.description}</p>
                <div className="mb-4">
                  <div className="text-4xl font-bold">{plan.price}</div>
                  <div className="text-sm text-gray-600">USD /mo</div>
                </div>
                <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-md transition-colors">
                  {plan.buttonText}
                </button>
              </div>
              <div className="p-6 pt-0 space-y-4">
                <div className="space-y-5">
                  {plan.features.map((feature, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <Check className="w-4 h-4 text-green-500" />
                      <span className="text-md">{feature}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
}