Real Estate Referral Network - Copy this React, Tailwind Component to your project

'use client'; import { useState } from 'react'; import styles from './pricing.module.css'; // Ensure path is correct import React from 'react'; // Frequencies are now specified for each tier individually export const frequencies = [ { id: '1', value: '1', label: '3-Months', priceSuffix: '/onetime' }, { id: '3', value: '3', label: 'One-Time', priceSuffix: '/onetime' }, ]; export const tiers = [ { name: 'Vista Prime', id: '0', href: '/basicplan', price: { '1': '$350' }, discountPrice: { '1': '$350' }, description: `Subscribe to Explore Services!`, features: [ `20% at Closing`, `2-3 Leads / Month`, `3 Zip Codes`, `10 to 15 miles`, `ISA Verified`, `Get Leads on SMS/Email`, `Live Support`, `3 Months Money-Back Guarantee`, ], featured: false, highlighted: false, soldOut: false, cta: `Pay Now`, availableFrequencies: ['1', '3'], // ✅ Allow both 3-Months and One-Time }, { name: 'Vista Platinum', id: '2', href: '/proplan', price: { '3': '$850' }, discountPrice: { '3': '$850' }, description: `Premium Leads at the Best Price!`, features: [ `15% at Closing`, `5 zip codes / 2 cities`, `3-5 Leads / Month`, `ISA Verified Scheduled Appoitments`, `Get Leads on Dashboard/SMS/Email`, `SEO Profile and Marketing`, `4 Months Money-Back Guarantee`, ], featured: true, highlighted: true, soldOut: false, cta: `Pay Now`, availableFrequencies: ['3'], // ✅ Only One-Time allowed }, { name: 'Vista Elite', id: '3', href: '/teamplan', price: { '3': '$1250' }, discountPrice: { '3': '$1250' }, description: `Premium service for Premium Agents`, features: [ `10% at Closing`, `4-5 Guaranteed Leads / Month`, `7 Zip Codes / 2 Counties`, `10 to 35 miles`, `Live Verified Transfers`, `Dedicated VA `, `Live Support and GHL CRM`, `5 Months Money-Back Guarantee`, `Premium SEO Google Ranking`, `Meta Paid Listings and Ads`, ], featured: true, highlighted: false, soldOut: false, cta: `Pay Now`, availableFrequencies: ['3'], // ✅ Only One-Time allowed }, ]; const CheckIcon = ({ className }) => ( <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className={`w-6 h-6 ${className}`} > <path fillRule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" /> </svg> ); const cn = (...args) => args.filter(Boolean).join(' '); export default function PricingPage() { // Initialize frequency with the first available frequency for the first tier const [frequency, setFrequency] = useState(frequencies.find(f => tiers[0].availableFrequencies.includes(f.value))); const bannerText = 'To Meet All Your Real Estate Needs! '; return ( <div className={cn('flex flex-col w-full items-center pt-20', styles.fancyOverlay)}> {/* Page background remains as default */} <div className="w-full flex flex-col items-center"> <div className="mx-auto max-w-7xl px-6 lg:px-8 flex flex-col items-center"> <h1 className="text-white text-4xl font-semibold max-w-xs sm:max-w-none md:text-6xl !leading-tight"> Pricing </h1> {bannerText && ( <div className="w-full lg:w-auto flex justify-center my-4"> <p className="w-full px-4 py-3 text-xs bg-slate-100 text-black dark:bg-slate-300/30 dark:text-white/80 rounded-xl"> {bannerText} </p> </div> )} <div className={cn( 'isolate mx-auto mt-4 mb-28 grid max-w-md grid-cols-1 gap-8 lg:mx-0 lg:max-w-none select-none', tiers.length === 2 ? 'lg:grid-cols-2' : '', tiers.length === 3 ? 'lg:grid-cols-3' : '', )} > {tiers.map((tier) => { const availableFrequency = frequencies.find(f => tier.availableFrequencies.includes(f.value)); return ( <div key={tier.id} className={cn( tier.featured ? '!bg-green-800 ring-green-900 dark:!bg-green-100 dark:ring-green-700' : 'bg-green-100 dark:bg-green-900/80 ring-green-300/70 dark:ring-green-700', 'max-w-xs ring-1 rounded-3xl p-8 xl:p-10', tier.highlighted ? `${styles.fancyGlassContrast} highlighted` : styles.fancyGlass, )} > <h3 className={cn(tier.featured ? 'text-white dark:text-black' : 'text-black dark:text-white', 'text-2xl font-bold tracking-tight')}> {tier.name} </h3> <p className={cn(tier.featured ? 'text-gray-300 dark:text-gray-500' : 'text-gray-600 dark:text-gray-400', 'mt-4 text-sm leading-6')}> {tier.description} </p> <p className="mt-6 flex items-baseline gap-x-1"> <span className={cn(tier.featured ? 'text-white dark:text-black' : 'text-black dark:text-white', 'text-4xl font-bold tracking-tight')}> {tier.discountPrice[availableFrequency.value]} </span> <span className={cn(tier.featured ? 'text-gray-300 dark:text-gray-500' : 'text-gray-600 dark:text-gray-400', 'text-sm font-semibold leading-6')}> {availableFrequency.priceSuffix} </span> </p> {/* ✅ Pay Now Button Added Back */} <a href={tier.href} aria-describedby={tier.id} className={cn( tier.featured ? 'bg-white text-black hover:bg-gray-50 dark:bg-green-800 dark:text-white dark:hover:bg-green-700' : 'bg-green-600 text-white hover:bg-green-700 dark:bg-green-700 dark:text-white dark:hover:bg-green-600', 'mt-8 block rounded-lg px-3 py-2 text-center text-sm font-semibold leading-6', tier.soldOut ? 'opacity-50 cursor-not-allowed' : '' )} > {tier.soldOut ? 'Sold Out' : tier.cta} </a> {/* ✅ Features List Added Back */} <ul role="list" className={cn( tier.featured ? 'text-white dark:text-gray-600' : 'text-gray-600 dark:text-gray-400', 'mt-8 space-y-3 text-sm leading-6 xl:mt-10' )} > {tier.features.map((feature) => ( <li key={feature} className="flex gap-x-3"> <CheckIcon className="w-5 h-5 shrink-0" /> {feature} </li> ))} </ul> </div> ); })} </div> </div> </div> </div> ); }