My Furnished Finds

import React, { useState } from ‘react’;
import { Sparkles, Calendar, Users, Star, CheckCircle, Award, Hourglass, CreditCard } from ‘lucide-react’;

// Main App Component
function App() {
const [selectedTier, setSelectedTier] = useState(null);
const [showCheckoutForm, setShowCheckoutForm] = useState(false);
const [purchaseConfirmed, setPurchaseConfirmed] = useState(false);

const handleEnrollClick = (tier) => {
setSelectedTier(tier);
setShowCheckoutForm(true);
setPurchaseConfirmed(false); // Reset confirmation if re-selecting
window.scrollTo({ top: document.body.scrollHeight, behavior: ‘smooth’ }); // Scroll to bottom
};

const handleFormSubmit = (e) => {
e.preventDefault();
// In a real application, you would process payment here.
// For this demo, we just simulate a successful purchase.
setTimeout(() => {
setPurchaseConfirmed(true);
setShowCheckoutForm(false); // Hide form after “purchase”
setSelectedTier(null); // Reset selected tier
}, 1000);
};

return (
<div className=”min-h-screen bg-gradient-to-br from-pink-50 to-purple-100 font-inter text-gray-800 p-4 sm:p-6 lg:p-8 flex flex-col items-center”>
{/* Header and Introduction */}
<header className=”text-center mb-10 w-full max-w-4xl”>
<h1 className=”text-4xl sm:text-5xl lg:text-6xl font-extrabold text-pink-600 mb-4 drop-shadow-lg”>
The Confident Glow-Up for Busy Moms
</h1>
<p className=”text-lg sm:text-xl text-purple-700 max-w-2xl mx-auto”>
Transform your beauty routine, master self-care, optimize your time, and cultivate an unshakeable mindset – all designed for your busy life!
</p>
<p className=”mt-4 text-md sm:text-lg text-gray-600 max-w-3xl mx-auto”>
This program is your holistic guide to feeling radiant, confident, and empowered, inside and out, without sacrificing precious family time.
</p>
</header>

{/* Core Benefits Section */}
<section className=”bg-white p-6 sm:p-8 rounded-2xl shadow-xl mb-12 w-full max-w-4xl ring-4 ring-pink-200″>
<h2 className=”text-3xl font-bold text-center text-purple-700 mb-6 flex items-center justify-center”>
<Sparkles className=”mr-3 text-pink-500″ size={30} />
What You’ll Achieve
</h2>
<div className=”grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6″>
<div className=”flex items-start bg-gray-50 p-4 rounded-xl shadow-md”>
<CheckCircle className=”text-pink-500 mr-3 mt-1 flex-shrink-0″ size={24} />
<div>
<h3 className=”font-semibold text-lg text-gray-900″>Effortless Beauty Routines</h3>
<p className=”text-gray-600 text-sm”>Master quick lash, brow, and makeup techniques that save you time.</p>
</div>
</div>
<div className=”flex items-start bg-gray-50 p-4 rounded-xl shadow-md”>
<Award className=”text-pink-500 mr-3 mt-1 flex-shrink-0″ size={24} />
<div>
<h3 className=”font-semibold text-lg text-gray-900″>Prioritized Self-Care</h3>
<p className=”text-gray-600 text-sm”>Integrate essential self-care practices into your daily schedule.</p>
</div>
</div>
<div className=”flex items-start bg-gray-50 p-4 rounded-xl shadow-md”>
<Hourglass className=”text-pink-500 mr-3 mt-1 flex-shrink-0″ size={24} />
<div>
<h3 className=”font-semibold text-lg text-gray-900″>Optimized Time Management</h3>
<p className=”text-gray-600 text-sm”>Learn strategies to maximize your time for personal growth and productivity.</p>
</div>
</div>
<div className=”flex items-start bg-gray-50 p-4 rounded-xl shadow-md”>
<Star className=”text-pink-500 mr-3 mt-1 flex-shrink-0″ size={24} />
<div>
<h3 className=”font-semibold text-lg text-gray-900″>Empowered Mindset Shifts</h3>
<p className=”text-gray-600 text-sm”>Cultivate resilience, confidence, and a positive outlook.</p>
</div>
</div>
<div className=”flex items-start bg-gray-50 p-4 rounded-xl shadow-md”>
<Users className=”text-pink-500 mr-3 mt-1 flex-shrink-0″ size={24} />
<div>
<h3 className=”font-semibold text-lg text-gray-900″>Community Support</h3>
<p className=”text-gray-600 text-sm”>Connect with a supportive network of like-minded busy moms.</p>
</div>
</div>
<div className=”flex items-start bg-gray-50 p-4 rounded-xl shadow-md”>
<Calendar className=”text-pink-500 mr-3 mt-1 flex-shrink-0″ size={24} />
<div>
<h3 className=”font-semibold text-lg text-gray-900″>Flexible Learning</h3>
<p className=”text-gray-600 text-sm”>Access modules at your own pace, anytime, anywhere.</p>
</div>
</div>
</div>
</section>

{/* Pricing Tiers Section */}
<section className=”w-full max-w-5xl mb-12″>
<h2 className=”text-3xl sm:text-4xl font-bold text-center text-purple-700 mb-8 drop-shadow”>
Choose Your Path to Radiance
</h2>
<div className=”grid grid-cols-1 lg:grid-cols-2 gap-8″>
{/* Standard Tier */}
<CourseTierCard
tierName=”Standard Glow-Up”
price=”$297″
features={[
“Full access to all course modules”,
“High-definition video lessons”,
“Downloadable worksheets & guides”,
“Quick beauty routine hacks”,
“Self-care integration strategies”,
“Time management templates”,
“Mindset shift exercises”,
“Lifetime access to course content”
]}
buttonText=”Enroll Now – $297″
onEnroll={() => handleEnrollClick(‘standard’)}
isPopular={false}
/>

{/* Premium Tier */}
<CourseTierCard
tierName=”Premium Radiance Pro”
price=”$497″
features={[
“Everything in the Standard Glow-Up, PLUS:”,
“Monthly LIVE Q&A sessions with [Your Name/Instructor]”,
“Exclusive access to Private Community Forum”,
“Bonus module: Advanced Makeup for Special Occasions”,
“Bonus module: Building a Home Spa Experience”,
“Priority email support”,
“Early access to future content updates”
]}
buttonText=”Go Premium – $497″
onEnroll={() => handleEnrollClick(‘premium’)}
isPopular={true}
/>
</div>
</section>

{/* Checkout Form Section */}
{showCheckoutForm && (
<CheckoutForm
tier={selectedTier}
onSubmit={handleFormSubmit}
/>
)}

{/* Purchase Confirmation Message */}
{purchaseConfirmed && (
<div className=”bg-green-100 border border-green-400 text-green-700 px-6 py-4 rounded-xl shadow-lg mt-8 w-full max-w-md text-center animate-fadeIn”>
<CheckCircle className=”inline-block mr-2″ size={24} />
<h3 className=”font-semibold text-xl mb-2″>Enrollment Confirmed!</h3>
<p>Thank you for enrolling in “The Confident Glow-Up for Busy Moms”! Check your email for access details. We can’t wait to see you shine!</p>
</div>
)}
</div>
);
}

// CourseTierCard Component
function CourseTierCard({ tierName, price, features, buttonText, onEnroll, isPopular }) {
return (
<div className={`bg-white rounded-2xl shadow-xl p-6 sm:p-8 flex flex-col h-full transform transition-all duration-300 hover:scale-[1.02] ${isPopular ? ‘ring-4 ring-pink-500’ : ‘ring-2 ring-purple-200’}`}>
{isPopular && (
<div className=”absolute -top-3 left-1/2 -translate-x-1/2 bg-pink-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg”>
MOST POPULAR
</div>
)}
<h3 className=”text-2xl font-bold text-center text-purple-800 mb-4″>{tierName}</h3>
<div className=”text-5xl font-extrabold text-center text-pink-600 mb-6″>
{price}
</div>
<ul className=”list-none space-y-3 mb-8 flex-grow”>
{features.map((feature, index) => (
<li key={index} className=”flex items-start text-gray-700″>
<CheckCircle className=”text-green-500 mr-2 mt-1 flex-shrink-0″ size={18} />
<span className=”text-md sm:text-base”>{feature}</span>
</li>
))}
</ul>
<button
onClick={onEnroll}
className=”mt-auto w-full bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform transition-all duration-300 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300″
>
{buttonText}
</button>
</div>
);
}

// CheckoutForm Component
function CheckoutForm({ tier, onSubmit }) {
const tierPrice = tier === ‘standard’ ? ‘$297’ : ‘$497’;

return (
<div className=”bg-white p-6 sm:p-8 rounded-2xl shadow-xl w-full max-w-md mt-12 ring-4 ring-purple-300 animate-fadeIn”>
<h2 className=”text-3xl font-bold text-center text-purple-700 mb-6 flex items-center justify-center”>
<CreditCard className=”mr-3 text-pink-500″ size={30} />
Complete Your Enrollment
</h2>
<p className=”text-center text-lg text-gray-700 mb-6″>
You’ve selected the <span className=”font-semibold text-pink-600″>{tier === ‘standard’ ? ‘Standard Glow-Up’ : ‘Premium Radiance Pro’}</span> for <span className=”font-semibold text-pink-600″>{tierPrice}</span>.
</p>
<form onSubmit={onSubmit} className=”space-y-5″>
<div>
<label htmlFor=”fullName” className=”block text-gray-700 text-sm font-bold mb-2″>
Full Name
</label>
<input
type=”text”
id=”fullName”
className=”shadow-sm appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-pink-300 transition-all duration-200″
placeholder=”Jane Doe”
required
/>
</div>
<div>
<label htmlFor=”email” className=”block text-gray-700 text-sm font-bold mb-2″>
Email Address
</label>
<input
type=”email”
id=”email”
className=”shadow-sm appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-pink-300 transition-all duration-200″
placeholder=”jane.doe@example.com“
required
/>
</div>
{/* Mock Payment Section */}
<div className=”bg-gray-50 p-4 rounded-xl shadow-inner border border-gray-200″>
<h3 className=”text-lg font-semibold text-gray-800 mb-3″>Payment Details (Mock Up)</h3>
<div className=”mb-4″>
<label htmlFor=”cardNumber” className=”block text-gray-700 text-sm font-bold mb-2″>
Card Number
</label>
<input
type=”text”
id=”cardNumber”
className=”shadow-sm appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-pink-300 transition-all duration-200″
placeholder=”XXXX XXXX XXXX XXXX”
readOnly // Make read-only to emphasize it’s a mock
value=”1234 5678 9012 3456″
/>
</div>
<div className=”grid grid-cols-2 gap-4″>
<div>
<label htmlFor=”expiryDate” className=”block text-gray-700 text-sm font-bold mb-2″>
Expiry Date
</label>
<input
type=”text”
id=”expiryDate”
className=”shadow-sm appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-pink-300 transition-all duration-200″
placeholder=”MM/YY”
readOnly
value=”12/26″
/>
</div>
<div>
<label htmlFor=”cvc” className=”block text-gray-700 text-sm font-bold mb-2″>
CVC
</label>
<input
type=”text”
id=”cvc”
className=”shadow-sm appearance-none border rounded-lg w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-2 focus:ring-pink-300 transition-all duration-200″
placeholder=”XXX”
readOnly
value=”123″
/>
</div>
</div>
<p className=”text-xs text-gray-500 mt-3 text-center”>
*This is a mock payment section for demonstration purposes. No real payment will be processed.
</p>
</div>

<div className=”flex items-center mt-6″>
<input type=”checkbox” id=”terms” className=”form-checkbox h-5 w-5 text-pink-600 rounded focus:ring-pink-500″ required />
<label htmlFor=”terms” className=”ml-2 text-gray-700 text-sm”>
I agree to the <a href=”#” className=”text-pink-600 hover:underline”>Terms & Conditions</a>
</label>
</div>

<button
type=”submit”
className=”w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform transition-all duration-300 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 flex items-center justify-center”
>
Complete Purchase
<Sparkles className=”ml-2″ size={20} />
</button>
</form>
</div>
);
}

// Tailwind CSS import (must be at the top of the HTML file in a real scenario, but included here for completeness)
// This script tag needs to be included in the <head> of the HTML page for Tailwind to work
/*
http://a%20href=
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
inter: [‘Inter’, ‘sans-serif’],
},
keyframes: {
fadeIn: {
‘0%’: { opacity: 0, transform: ‘translateY(20px)’ },
‘100%’: { opacity: 1, transform: ‘translateY(0)’ },
},
},
animation: {
fadeIn: ‘fadeIn 0.5s ease-out forwards’,
},
}
}
}
</script>
*/
// The font ‘Inter’ is assumed to be available.

export default App;