Grand Membership Constellation

import React, { useState, useEffect, useRef } from ‘react’; import { Users, Globe, Feather, CreditCard, Check, Download, ChevronRight, Star, Shield, Landmark, BookOpen, Briefcase, Heart, Building, Award, Mail, Printer, X } from ‘lucide-react’; // — Typography & Theme Configuration — const THEME = { colors: { gold: ‘#D4AF37’, goldLight: ‘#F3E5AB’, goldDark: ‘#AA8C2C’, royalBlue: ‘#0A192F’, midnight: ‘#020c1b’, ivory: ‘#FDFBF7’, text: ‘#333333’, textLight: ‘#8892b0’ }, fonts: { heading: ‘”Playfair Display”, serif’, body: ‘”Montserrat”, sans-serif’ } }; // — Content Data (Extracted from Uploaded Doc) — const SEGMENTS = [ { id: ‘I’, title: ‘Founding & Governance Circle’, icon: , description: ‘The apex supporters, advisors, and directors shaping the vision.’, subcategories: [ ‘Patronage Members (Royal families, Industrialists)’, ‘Advisory Council (Trade experts, Curators)’, ‘Board of Directors (Export veterans, CSR heads)’, ‘Executive Members (Project directors, Managers)’ ] }, { id: ‘II’, title: ‘Heritage & Cultural Custodians’, icon: , description: ‘Guardians of history, collectors, and promoters of the arts.’, subcategories: [ ‘Heritage Arts Collectors’, ‘Art Promoters’, ‘Ornamental Art Ambassadors (72)’ ] }, { id: ‘III’, title: ‘Creator & Practitioner’, icon: , description: ‘The hands that carve the legacy. Masters and artisans.’, subcategories: [ ‘Master Trainer Artists’, ‘Artisan Members’, ‘Traditional Artist Categories’ ] }, { id: ‘IV’, title: ‘Knowledge & Research Guild’, icon: , description: ‘Scholars, historians, and institutions preserving wisdom.’, subcategories: [ ‘Historians’, ‘Researchers’, ‘Learned Scholars’, ‘Universities & Institutions’, ‘Certification Partners’ ] }, { id: ‘V’, title: ‘Commercial & Trade’, icon: , description: ‘The economic engine: Miners, manufacturers, and exporters.’, subcategories: [ ‘Mining Sector’, ‘Processing & Manufacturing’, ‘Importers & Buyers’, ‘Exporters’, ‘Trade Fair Stakeholders’ ] }, { id: ‘VI’, title: ‘Brand & Corporate Universe’, icon: , description: ‘Luxury brands and corporate entities aligned with art.’, subcategories: [ ‘National Corporate Brands’, ‘International Brands’, ‘MSME Branding Segments’ ] }, { id: ‘VII’, title: ‘Donors & Sponsors’, icon: , description: ‘Philanthropists and corporations fueling the ecosystem.’, subcategories: [ ‘Individual Donors’, ‘Corporate Sponsors’, ‘CSR Partners’, ‘Global Foundations’ ] }, { id: ‘VIII’, title: ‘Campus Development Partners’, icon: , description: ‘Partners in building the 72 Acres Art Ecosystem.’, subcategories: [ ‘Infrastructure Partners’, ‘Pavilion Sponsors’, ‘PPP Partners’ ] }, { id: ‘IX’, title: ‘International Community’, icon: , description: ‘Connecting global governments and trade bodies.’, subcategories: [ ‘Foreign Governments’, ‘Global Trade Bodies’, ‘Overseas Indian Networks’ ] }, { id: ‘X’, title: ‘Open Membership’, icon: , description: ‘Inclusive categories for mass reach and student engagement.’, subcategories: [ ‘Student Members’, ‘Volunteer Members’, ‘Associate Members’, ‘Digital Members’, ‘International Online Members’, ‘Family Members’, ‘Life Members’, ‘Institutional Members’, ‘Honorary Members’, ‘Corporate Members’, ‘NGO Members’, ‘Government Officers’, ‘Retired Armed Forces’, ‘Women Entrepreneurs’, ‘Tribal Artisans’, ‘Differently Abled Artists’, ‘Youth Members’ ] } ]; const BENEFITS = [ { label: ‘Global Directory Listing’, icon: }, { label: ‘Exhibition Priority’, icon: }, { label: ‘Export Buyer Access’, icon: }, { label: ‘Training Certifications’, icon: }, { label: ‘Museum Recognition’, icon: }, { label: ‘Government Scheme Access’, icon: }, ]; // — Components — const Button = ({ children, onClick, variant = ‘primary’, className = ”, type = ‘button’, disabled = false }) => { const baseStyle = “px-6 py-3 font-semibold tracking-wide transition-all duration-300 ease-out transform hover:-translate-y-0.5 disabled:opacity-50 disabled:cursor-not-allowed”; const variants = { primary: `bg-[#D4AF37] text-[#0A192F] hover:bg-white hover:text-[#0A192F] shadow-lg`, outline: `border-2 border-[#D4AF37] text-[#D4AF37] hover:bg-[#D4AF37] hover:text-[#0A192F]`, ghost: “text-gray-600 hover:text-gray-900”, dark: `bg-[#0A192F] text-white hover:bg-[#020c1b]` }; return ( ); }; const SectionHeading = ({ title, subtitle }) => (

{title}

{subtitle}

); // — Registration Form Components — const StepIndicator = ({ currentStep, steps }) => (
{steps.map((step, index) => (
{index + 1 < currentStep ? : index + 1}
{step}
))} {/* Progress Bar Background */}
{/* Active Progress */}
); // — Simulation Components for Certificate/Receipt — const GeneratedCertificate = ({ data, refId }) => (
{/* Decorative Watermark */}
{/* Decorative Corners */}

Certificate of Membership

ORNAMENTAL ART SOCIETY

This is to certify that

{data.firstName} {data.lastName}

has been admitted as a distinguished

{data.subcategory}

Segment: {data.category}

Date of Issue

{new Date().toLocaleDateString()}

OFFICIAL
SEAL

Director Signature

Membership ID: OAS-{refId} | Generated via Secure Portal
); const GeneratedReceipt = ({ data, refId, amount }) => (

Payment Receipt

Global Ornamental Art Ecosystem

Date

{new Date().toLocaleDateString()}

Transaction ID TXN-{refId}
Billed To {data.firstName} {data.lastName}
Membership {data.membershipType}
TOTAL PAID {amount}

Thank you for your contribution to the arts.

Auth: {Date.now()}.Secure
); const EmailPreview = ({ data, onClose }) => (
Automated System Email

To: {data.email}

Subject: Welcome to the Grand Constellation – Membership Confirmed

Dear {data.firstName} {data.lastName},

It is with great honor that we welcome you to the Global Ornamental Art Ecosystem.

You have been successfully registered as a member of the {data.subcategory} circle. Your participation strengthens our shared vision of preserving heritage and fostering artistic prosperity.

Membership Details

  • Type: {data.membershipType}
  • Valid From: {new Date().toLocaleDateString()}

Attached to this email, please find:

  • Your Official Membership Certificate (PDF)
  • Payment Receipt (PDF)
  • The Society Bylaws & Benefits Guide

We look forward to your presence at our upcoming inauguration of the 72 Acres Campus.

With Cosmic Symmetry,

The Secretariat

Ornamental Art Society

); // — Main Application Component — export default function App() { const [activeTab, setActiveTab] = useState(‘home’); const [selectedCategory, setSelectedCategory] = useState(null); const [registrationStep, setRegistrationStep] = useState(1); const [showEmailPreview, setShowEmailPreview] = useState(false); const [formData, setFormData] = useState({ category: ”, subcategory: ”, firstName: ”, lastName: ”, email: ”, phone: ”, orgName: ”, membershipType: ‘Annual’ }); const [processingPayment, setProcessingPayment] = useState(false); const [paymentSuccess, setPaymentSuccess] = useState(false); const [refId, setRefId] = useState(”); const [downloading, setDownloading] = useState({ receipt: false, certificate: false }); // Scroll to top when tab changes useEffect(() => { window.scrollTo(0, 0); }, [activeTab, registrationStep]); const handleApplyNow = () => { setActiveTab(‘register’); setRegistrationStep(1); setPaymentSuccess(false); }; const handleCategorySelect = (category, subcategory) => { setFormData({ …formData, category: category.title, subcategory }); setRegistrationStep(2); }; const handleDetailsSubmit = (e) => { e.preventDefault(); setRegistrationStep(3); }; const handlePayment = () => { setProcessingPayment(true); // Simulate API call setTimeout(() => { setProcessingPayment(false); setPaymentSuccess(true); setRefId(Math.random().toString(36).substr(2, 9).toUpperCase()); setRegistrationStep(4); }, 2000); }; const simulateDownload = (type) => { setDownloading(prev => ({ …prev, [type]: true })); setTimeout(() => { setDownloading(prev => ({ …prev, [type]: false })); alert(`${type === ‘receipt’ ? ‘Receipt’ : ‘Certificate’} downloaded successfully.`); }, 1500); }; // — Views — const HomeView = () => ( <> {/* Hero Section */}
{/* Abstract Background Shapes */}
The Grand Constellation

Global Ornamental
Art Ecosystem

A living mandala where artists, traders, scholars, and benefactors orbit a shared vision of global heritage.

{/* Benefits Strip */}
{BENEFITS.map((b, i) => (
{b.icon}
{b.label}
))}
{/* Segments Grid */}
{SEGMENTS.map((segment) => (
{ if (selectedCategory === segment.id) { setSelectedCategory(null); } else { setSelectedCategory(segment.id); } }} className={`group cursor-pointer bg-white p-8 rounded-sm shadow-sm hover:shadow-xl transition-all duration-300 border-t-4 relative overflow-hidden ${selectedCategory === segment.id ? ‘border-[#D4AF37] shadow-xl transform -translate-y-1’ : ‘border-transparent hover:border-[#D4AF37]’}`} >
{segment.icon}
{segment.id}

{segment.title}

{segment.description}

{/* Subcategories – Expandable */}
{segment.subcategories.map((sub, idx) => ( ))}
View Categories
))}
{/* Numerology Section */}

Cosmic Symmetry

Every aspect of our ecosystem is aligned with numerological harmony to ensure prosperity, stability, and global outreach. Your membership ID will carry these sacred vibrations.

{[ { num: ‘108’, label: ‘Founders Society’, desc: ‘Completion & Divine Cycle’ }, { num: ’96’, label: ‘Museum Society’, desc: ‘Prosperity’ }, { num: ’72’, label: ‘Ambassadors’, desc: ‘Knowledge Guardians’ }, { num: ’94’, label: ‘Heritage Centre’, desc: ‘Stability’ } ].map((item, i) => (
{item.num} {item.label} {item.desc}
))}
{/* Abstract Mandala representation */}
); const RegistrationView = () => (
{/* Step 1: Segment Selection (If not already selected via home) */} {registrationStep === 1 && (

Select your Membership Category

{SEGMENTS.map(seg => (
{seg.icon}
{seg.title}
{seg.subcategories.slice(0, 3).map((sub, i) => ( ))} {seg.subcategories.length > 3 && +{seg.subcategories.length – 3} more options}
))}
)} {/* Step 2: Form Details */} {registrationStep === 2 && (

Applying For

{formData.subcategory}

{formData.category}

setFormData({…formData, firstName: e.target.value})} />
setFormData({…formData, lastName: e.target.value})} />
setFormData({…formData, orgName: e.target.value})} placeholder=”Optional” />
setFormData({…formData, email: e.target.value})} />
setFormData({…formData, phone: e.target.value})} />
)} {/* Step 3: Payment */} {registrationStep === 3 && (
{/* Order Summary */}

Order Summary

Category {formData.subcategory}
Type {formData.membershipType}
Total {formData.membershipType === ‘Annual’ ? ‘$150.00’ : ‘$1500.00’}
256-bit Secure SSL Encryption
{/* Payment Gateway Mock */}

Secure Payment

{/* Gateway Tabs */}

By processing this payment, you agree to the Membership Terms & Bylaws.

)} {/* Step 4: Confirmation & Assets */} {registrationStep === 4 && paymentSuccess && (

Welcome to the Circle.

Your membership has been confirmed.

Automated email dispatched to {formData.email}
{/* Downloadable Assets Section */}
{/* Receipt Preview */}

Official Receipt

{/* Certificate Preview */}

Membership Certificate

{/* Simulated Zoom for Preview */}
)} {/* Email Preview Modal */} {showEmailPreview && ( setShowEmailPreview(false)} /> )}
); return (
{/* Global Header */} {/* Main Content Switcher */} {activeTab === ‘home’ ? : } {/* Global Footer */}
O.A.S.

A global ecosystem dedicated to the preservation, promotion, and prosperity of Ornamental Art.

Contact

  • membership@ornamentalart.org
  • 72 Heritage Blvd, Arts District

Newsletter

© 2024 Global Ornamental Art Society. All Rights Reserved.
{/* Global Styles for Animations/Fonts */}
); }