Component 0 - Copy this React, Tailwind Component to your project

<template> <div> <! Banner Header > <div class="surface overlay p 6 text center"> <h1 class="text 5xl font bold mb 3">EventSync Pro</h1> <p class="text xl mb 4">Streamline your event management with our powerful SaaS solution.</p> <Button label="Explore Plans" icon="pi pi arrow down" class="p button rounded p button lg" @click="scrollToPricing" /> </div> <! Pricing Section > <div class="p 8" id="pricing"> <h2 class="text 3xl font bold text center mb 8">Choose Your Plan</h2> <div class="grid"> <! One Event Pack > <div class="col 12 md:col 4"> <Card> <template #header> <div class="text center p 4"> <h3 class="text 2xl font semibold text primary">One Event</h3> </div> </template> <template #content> <div class="text center"> <p class="text 4xl font bold mb 3">$99</p> <p class="text base text color secondary mb 5">Ideal for single event organizers</p> <ul class="list none p 0 mb 5 text left"> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Single event registration</li> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Badge & Email Builder</li> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>24/7 Basic Support</li> </ul> </div> </template> <template #footer> <Button label="Select Plan" class="w full" @click="selectPlan('One Event')" /> </template> </Card> </div> <! Unlimited Events Pack > <div class="col 12 md:col 4"> <Card> <template #header> <div class="text center p 4"> <h3 class="text 2xl font semibold text primary">Unlimited Events</h3> <Tag value="Most Popular" severity="success" /> </div> </template> <template #content> <div class="text center"> <p class="text 4xl font bold mb 3">$499</p> <p class="text base text color secondary mb 5">Perfect for frequent organizers</p> <ul class="list none p 0 mb 5 text left"> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Unlimited event registrations</li> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>All modules included</li> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Priority Support</li> </ul> </div> </template> <template #footer> <Button label="Select Plan" class="w full p button success" @click="selectPlan('Unlimited Events')" /> </template> </Card> </div> <! Custom Pack > <div class="col 12 md:col 4"> <Card> <template #header> <div class="text center p 4"> <h3 class="text 2xl font semibold text primary">Custom</h3> </div> </template> <template #content> <div class="text center"> <p class="text 4xl font bold mb 3">Contact Us</p> <p class="text base text color secondary mb 5">Tailored for your unique needs</p> <ul class="list none p 0 mb 5 text left"> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Customized features</li> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Dedicated support</li> <li class="mb 3 flex align items center"><i class="pi pi check circle mr 2"></i>Scalable solutions</li> </ul> </div> </template> <template #footer> <Button label="Contact Us" class="w full p button info" @click="selectPlan('Custom')" /> </template> </Card> </div> </div> </div> <! Registration Form Dialog > <Dialog v model:visible="showForm" header="Complete Your Registration" :modal="true" :style="{ width: '50rem' }"> <Stepper linear> <! Step 1: Personal Information > <StepperPanel header="Personal Information"> <template #content="{ nextCallback }"> <div class="p 5"> <h2 class="text 2xl font bold mb 4">Personal Information</h2> <div class="grid"> <div class="col 12 md:col 6"> <div class="field mb 4"> <label for="name" class="block mb 2 font medium">Full Name</label> <InputText id="name" v model="form.personal.name" class="w full" placeholder="Enter your name" /> <small v if="errors.name" class="text error">{{ errors.name }}</small> </div> </div> <div class="col 12 md:col 6"> <div class="field mb 4"> <label for="email" class="block mb 2 font medium">Email</label> <InputText id="email" v model="form.personal.email" class="w full" placeholder="Enter your email" /> <small v if="errors.email" class="text error">{{ errors.email }}</small> </div> </div> <div class="col 12 md:col 6"> <div class="field mb 4"> <label for="password" class="block mb 2 font medium">Password</label> <Password id="password" v model="form.personal.password" class="w full" placeholder="Enter your password" toggleMask :feedback="true" /> <small v if="errors.password" class="text error">{{ errors.password }}</small> </div> </div> </div> <div class="flex justify content end mt 4"> <Button label="Next" icon="pi pi arrow right" iconPos="right" @click="validateAndNext(nextCallback, 0)" /> </div> </div> </template> </StepperPanel> <! Step 2: Company Information > <StepperPanel header="Company Information"> <template #content="{ prevCallback, nextCallback }"> <div class="p 5"> <h2 class="text 2xl font bold mb 4">Company Information</h2> <div class="grid"> <div class="col 12 md:col 6"> <div class="field mb 4"> <label for="company_name" class="block mb 2 font medium">Company Name</label> <InputText id="company_name" v model="form.company.name" class="w full" placeholder="Enter company name" /> <small v if="errors.company_name" class="text error">{{ errors.company_name }}</small> </div> </div> <div class="col 12 md:col 6"> <div class="field mb 4"> <label for="industry" class="block mb 2 font medium">Industry</label> <Dropdown id="industry" v model="form.company.industry" :options="industries" optionLabel="label" optionValue="value" class="w full" placeholder="Select industry" /> </div> </div> <div class="col 12 md:col 6"> <div class="field mb 4"> <label for="company_size" class="block mb 2 font medium">Company Size</label> <Dropdown id="company_size" v model="form.company.size" :options="companySizes" optionLabel="label" optionValue="value" class="w full" placeholder="Select size" /> </div> </div> </div> <div class="flex justify content between mt 4"> <Button label="Back" severity="secondary" icon="pi pi arrow left" @click="prevCallback" /> <Button label="Next" icon="pi pi arrow right" iconPos="right" @click="validateAndNext(nextCallback, 1)" /> </div> </div> </template> </StepperPanel> <! Step 3: Module Configuration > <StepperPanel header="Module Configuration"> <template #content="{ prevCallback }"> <div class="p 5"> <h2 class="text 2xl font bold mb 4">Module Configuration</h2> <div class="grid"> <div class="col 12"> <div class="field checkbox mb 3" v for="module in availableModules" :key="module"> <Checkbox :inputId="module" v model="form.modules" :value="module" /> <label :for="module" class="ml 2 font medium">{{ module }}</label> </div> </div> </div> <div class="flex justify content between mt 4"> <Button label="Back" severity="secondary" icon="pi pi arrow left" @click="prevCallback" /> <Button label="Submit" icon="pi pi check" @click="submitForm" :loading="submitting" /> </div> </div> </template> </StepperPanel> </Stepper> </Dialog> </div> </template> <script> import Stepper from 'primevue/stepper'; import StepperPanel from 'primevue/stepperpanel'; import InputText from 'primevue/inputtext'; import Password from 'primevue/password'; import Button from 'primevue/button'; import Checkbox from 'primevue/checkbox'; import Dialog from 'primevue/dialog'; import Dropdown from 'primevue/dropdown'; import Card from 'primevue/card'; import Tag from 'primevue/tag'; import axios from 'axios'; export default { name: 'EventPricing', components: { Stepper, StepperPanel, InputText, Password, Button, Checkbox, Dialog, Dropdown, Card, Tag }, data() { return { showForm: false, submitting: false, errors: {}, selectedPlan: '', allModules: [ 'Badge Builder', 'Email Builder', 'Tickets', 'Library', 'Seating Plan', 'Workshop', 'Online Registration', 'Analytics Dashboard' ], availableModules: [], form: { personal: { name: '', email: '', password: '' }, company: { name: '', industry: '', size: '' }, modules: [], plan: '' }, industries: [ { label: 'Technology', value: 'Technology' }, { label: 'Education', value: 'Education' }, { label: 'Healthcare', value: 'Healthcare' }, { label: 'Events', value: 'Events' }, { label: 'Other', value: 'Other' } ], companySizes: [ { label: '1 10', value: '1 10' }, { label: '11 50', value: '11 50' }, { label: '51 200', value: '51 200' }, { label: '201+', value: '201+' } ] }; }, methods: { scrollToPricing() { document.getElementById('pricing').scrollIntoView({ behavior: 'smooth' }); }, selectPlan(plan) { this.selectedPlan = plan; this.form.plan = plan; if (plan === 'Custom') { window.location.href = '/contact'; } else { if (plan === 'One Event') { this.availableModules = ['Badge Builder', 'Email Builder', 'Online Registration']; } else { this.availableModules = [...this.allModules]; } this.showForm = true; } }, validateStep(step) { this.errors = {}; let isValid = true; if (step === 0) { if (!this.form.personal.name) { this.errors.name = 'Name is required'; isValid = false; } if (!this.form.personal.email) { this.errors.email = 'Email is required'; isValid = false; } else if (!/\S+@\S+\.\S+/.test(this.form.personal.email)) { this.errors.email = 'Invalid email format'; isValid = false; } if (!this.form.personal.password) { this.errors.password = 'Password is required'; isValid = false; } else if (this.form.personal.password.length < 8) { this.errors.password = 'Password must be at least 8 characters'; isValid = false; } } else if (step === 1) { if (!this.form.company.name) { this.errors.company_name = 'Company name is required'; isValid = false; } } return isValid; }, validateAndNext(nextCallback, step) { if (this.validateStep(step)) { nextCallback(); } }, async submitForm() { if (this.validateStep(2)) { this.submitting = true; try { const response = await axios.post('/api/register', { name: this.form.personal.name, email: this.form.personal.email, password: this.form.personal.password, company: this.form.company, modules: this.form.modules, plan: this.form.plan }); if (response.data.success) { this.$router.push('/login'); this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Registration completed!', life: 3000 }); } } catch (error) { this.errors = error.response?.data?.errors || { general: 'Registration failed' }; this.$toast.add({ severity: 'error', summary: 'Error', detail: this.errors.general || 'Something went wrong', life: 3000 }); } finally { this.submitting = false; this.showForm = false; } } } } }; </script>