Skip to content

Commit c3f87b1

Browse files
codevoid048codevoid048
committed
feat: add welcome step and registration options to RegisterPage
1 parent 12d8d27 commit c3f87b1

File tree

1 file changed

+117
-7
lines changed

1 file changed

+117
-7
lines changed

‎src/components/Register.tsx‎

Lines changed: 117 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default function RegisterPage() {
3737
const currentDate = new Date()
3838
const isRegistrationOpen = currentDate >= registrationStartDate && currentDate < registrationDeadline
3939

40-
const [currentStep, setCurrentStep] = useState(1)
40+
const [currentStep, setCurrentStep] = useState(0)
4141
const [submitting, setSubmitting] = useState(false)
4242
const [error, setError] = useState<string | null>(null)
4343

@@ -203,6 +203,104 @@ export default function RegisterPage() {
203203
setCurrentStep((prev) => prev + 1)
204204
}
205205

206+
function renderStep0() {
207+
return (
208+
<div className="bg-card/80 border border-border/50 rounded-2xl p-8 shadow-2xl backdrop-blur-sm max-w-4xl mx-auto">
209+
<div className="text-center mb-10">
210+
<h1 className="text-4xl lg:text-5xl font-bold mb-4">
211+
<span className="bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">
212+
Welcome to
213+
</span>
214+
<span className="text-foreground"> HACKOVERFLOW-2K25</span>
215+
</h1>
216+
<div className="w-24 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mb-6 rounded-full"></div>
217+
<p className="text-xl text-muted-foreground font-medium">
218+
Choose your registration path
219+
</p>
220+
</div>
221+
222+
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
223+
{/* New Registration */}
224+
<div className="bg-gradient-to-br from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 rounded-2xl p-8 border border-blue-200 dark:border-blue-800 hover:shadow-lg transition-all duration-300 cursor-pointer group"
225+
onClick={() => setCurrentStep(1)}>
226+
<div className="text-center">
227+
<div className="w-16 h-16 bg-blue-100 dark:bg-blue-900/40 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
228+
<Users className="h-8 w-8 text-blue-600 dark:text-blue-400" />
229+
</div>
230+
<h3 className="text-2xl font-bold text-blue-800 dark:text-blue-200 mb-4">
231+
New Registration
232+
</h3>
233+
<p className="text-blue-700 dark:text-blue-300 mb-6 leading-relaxed">
234+
First time participating? Create a new team registration with member details and problem statement selection.
235+
</p>
236+
<div className="space-y-2 text-sm text-blue-600 dark:text-blue-400">
237+
<div className="flex items-center justify-center gap-2">
238+
<CheckCircle className="h-4 w-4" />
239+
<span>Team formation & details</span>
240+
</div>
241+
<div className="flex items-center justify-center gap-2">
242+
<CheckCircle className="h-4 w-4" />
243+
<span>Problem statement selection</span>
244+
</div>
245+
<div className="flex items-center justify-center gap-2">
246+
<CheckCircle className="h-4 w-4" />
247+
<span>Payment processing</span>
248+
</div>
249+
</div>
250+
<Button className="mt-6 w-full bg-blue-600 hover:bg-blue-700 text-white rounded-xl py-3 font-semibold transition-all duration-300 group-hover:scale-105">
251+
Start New Registration
252+
<ArrowRight className="h-4 w-4 ml-2" />
253+
</Button>
254+
</div>
255+
</div>
256+
257+
{/* Existing Team Payment */}
258+
<div className="bg-gradient-to-br from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-8 border border-orange-200 dark:border-orange-800 hover:shadow-lg transition-all duration-300 cursor-pointer group"
259+
onClick={() => {
260+
const paymentUrl = `https://onlinesbi.sbi.bank.in/sbicollect/icollecthome.htm?saralID=-924485972&categoryName=SRKREC-CODING%20CLUB`
261+
window.location.href = paymentUrl
262+
}}>
263+
<div className="text-center">
264+
<div className="w-16 h-16 bg-orange-100 dark:bg-orange-900/40 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
265+
<CreditCard className="h-8 w-8 text-orange-600 dark:text-orange-400" />
266+
</div>
267+
<h3 className="text-2xl font-bold text-orange-800 dark:text-orange-200 mb-4">
268+
Complete Payment
269+
</h3>
270+
<p className="text-orange-700 dark:text-orange-300 mb-6 leading-relaxed">
271+
Already registered but payment is pending? Complete your payment to confirm your team's participation.
272+
</p>
273+
<div className="space-y-2 text-sm text-orange-600 dark:text-orange-400">
274+
<div className="flex items-center justify-center gap-2">
275+
<Clock className="h-4 w-4" />
276+
<span>Quick payment process</span>
277+
</div>
278+
<div className="flex items-center justify-center gap-2">
279+
<CheckCircle className="h-4 w-4" />
280+
<span>Secure SBI Collect gateway</span>
281+
</div>
282+
<div className="flex items-center justify-center gap-2">
283+
<CheckCircle className="h-4 w-4" />
284+
<span>Instant confirmation</span>
285+
</div>
286+
</div>
287+
<Button className="mt-6 w-full bg-orange-600 hover:bg-orange-700 text-white rounded-xl py-3 font-semibold transition-all duration-300 group-hover:scale-105">
288+
Go to Payment
289+
<CreditCard className="h-4 w-4 ml-2" />
290+
</Button>
291+
</div>
292+
</div>
293+
</div>
294+
295+
<div className="mt-10 text-center">
296+
<p className="text-muted-foreground text-sm">
297+
Need help? Contact us at <a href="mailto:srkrcodingclubofficial@gmail.com" className="text-primary hover:underline">srkrcodingclubofficial@gmail.com</a>
298+
</p>
299+
</div>
300+
</div>
301+
)
302+
}
303+
206304
function handlePrevStep() {
207305
setError(null)
208306
setCurrentStep((prev) => prev - 1)
@@ -1107,7 +1205,8 @@ export default function RegisterPage() {
11071205
<div className="mb-12">
11081206
<div className="flex items-center justify-center space-x-4 mb-6">
11091207
{[
1110-
{ step: 1, icon: Sparkles, label: "Welcome" },
1208+
{ step: 0, icon: Home, label: "Welcome" },
1209+
{ step: 1, icon: Sparkles, label: "Overview" },
11111210
{ step: 2, icon: Users, label: "Team Details" },
11121211
{ step: 3, icon: CreditCard, label: "Payment" },
11131212
].map(({ step, icon: Icon }) => (
@@ -1135,21 +1234,24 @@ export default function RegisterPage() {
11351234
<p className="text-muted-foreground">
11361235
Step {currentStep} of 3:{" "}
11371236
<span className="font-medium text-foreground">
1138-
{currentStep === 1
1237+
{currentStep === 0
11391238
? "Welcome"
1140-
: currentStep === 2
1141-
? "Team Details"
1142-
: "Payment"}
1239+
: currentStep === 1
1240+
? "Overview"
1241+
: currentStep === 2
1242+
? "Team Details"
1243+
: "Payment"}
11431244
</span>
11441245
</p>
11451246
</div>
11461247
</div>
11471248

1249+
{currentStep === 0 && renderStep0()}
11481250
{currentStep === 1 && renderStep1()}
11491251
{currentStep === 2 && renderStep2()}
11501252
{currentStep === 3 && renderStep4()}
11511253

1152-
{currentStep > 1 && currentStep < 3 && (
1254+
{currentStep > 0 && currentStep < 3 && (
11531255
<div className="mt-10 flex items-center justify-between gap-4">
11541256
<Button
11551257
onClick={handlePrevStep}
@@ -1187,6 +1289,14 @@ export default function RegisterPage() {
11871289
</div>
11881290
)}
11891291

1292+
{currentStep === 0 && (
1293+
<div className="mt-8 text-center">
1294+
<Link to="/" className="text-sm text-primary hover:text-primary/80 transition-colors font-medium">
1295+
Back to Home
1296+
</Link>
1297+
</div>
1298+
)}
1299+
11901300
{currentStep === 1 && (
11911301
<div className="mt-8 text-center">
11921302
<Link to="/" className="text-sm text-primary hover:text-primary/80 transition-colors font-medium">

0 commit comments

Comments
 (0)