Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-11-18 03:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update onboarding-carousel.tsx

Browse Source
This commit is contained in:
MacRimi
2025-10-30 23:30:58 +01:00
parent deea0c54d4
commit 688e826e9d
1 changed files with 23 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
AppImage/components/onboarding-carousel.tsx
View File

@@ -160,9 +160,8 @@ export function OnboardingCarousel() {
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</Button> </Button>
{/* Gradient header */}
<div <div
className={`relative h-64 bg-gradient-to-br ${slide.gradient} flex items-center justify-center overflow-hidden`} className={`relative h-48 md:h-64 bg-gradient-to-br ${slide.gradient} flex items-center justify-center overflow-hidden`}
> >
<div className="absolute inset-0 bg-black/10" /> <div className="absolute inset-0 bg-black/10" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(255,255,255,0.1),transparent)]" /> <div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_120%,rgba(255,255,255,0.1),transparent)]" />
@@ -170,13 +169,13 @@ export function OnboardingCarousel() {
{/* Icon or Image */} {/* Icon or Image */}
<div className="relative z-10 text-white"> <div className="relative z-10 text-white">
{slide.image ? ( {slide.image ? (
<div className="relative w-full h-48 flex items-center justify-center"> <div className="relative w-full h-36 md:h-48 flex items-center justify-center px-4">
<Image <Image
src={slide.image || "/placeholder.svg"} src={slide.image || "/placeholder.svg"}
alt={slide.title} alt={slide.title}
width={600} width={600}
height={400} height={400}
className="rounded-lg shadow-2xl object-cover max-h-48" className="rounded-lg shadow-2xl object-cover max-h-36 md:max-h-48"
onError={(e) => { onError={(e) => {
const target = e.target as HTMLImageElement const target = e.target as HTMLImageElement
target.style.display = "none" target.style.display = "none"
@@ -198,43 +197,48 @@ export function OnboardingCarousel() {
<div className="absolute bottom-10 right-10 w-32 h-32 bg-white/10 rounded-full blur-3xl" /> <div className="absolute bottom-10 right-10 w-32 h-32 bg-white/10 rounded-full blur-3xl" />
</div> </div>
{/* Content */} <div className="p-4 md:p-8 space-y-4 md:space-y-6">
<div className="p-8 space-y-6"> <div className="space-y-2 md:space-y-3">
<div className="space-y-3"> <h2 className="text-2xl md:text-3xl font-bold text-foreground text-balance">{slide.title}</h2>
<h2 className="text-3xl font-bold text-foreground text-balance">{slide.title}</h2> <p className="text-base md:text-lg text-muted-foreground leading-relaxed text-pretty">
<p className="text-muted-foreground text-lg leading-relaxed text-pretty">{slide.description}</p> {slide.description}
</p>
</div> </div>
{/* Progress dots */} {/* Progress dots */}
<div className="flex items-center justify-center gap-2 py-4"> <div className="flex items-center justify-center gap-2 py-2 md:py-4">
{slides.map((_, index) => ( {slides.map((_, index) => (
<button <button
key={index} key={index}
onClick={() => handleDotClick(index)} onClick={() => handleDotClick(index)}
className={`transition-all duration-300 rounded-full ${ className={`transition-all duration-300 rounded-full ${
index === currentSlide index === currentSlide
? "w-8 h-2 bg-blue-500" ? "w-8 h-2.5 bg-blue-500 shadow-lg shadow-blue-500/50"
: "w-2 h-2 bg-muted-foreground/30 hover:bg-muted-foreground/50" : "w-2.5 h-2.5 bg-muted-foreground/60 hover:bg-muted-foreground/80 border border-muted-foreground/40"
}`} }`}
aria-label={`Go to slide ${index + 1}`} aria-label={`Go to slide ${index + 1}`}
/> />
))} ))}
</div> </div>
{/* Navigation buttons */} <div className="flex flex-col sm:flex-row items-center justify-between gap-3 md:gap-4">
<div className="flex items-center justify-between gap-4"> <Button
<Button variant="ghost" onClick={handlePrev} disabled={currentSlide === 0} className="gap-2"> variant="ghost"
onClick={handlePrev}
disabled={currentSlide === 0}
className="gap-2 w-full sm:w-auto"
>
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
Previous Previous
</Button> </Button>
<div className="flex gap-2"> <div className="flex gap-2 w-full sm:w-auto">
{currentSlide < slides.length - 1 ? ( {currentSlide < slides.length - 1 ? (
<> <>
<Button variant="outline" onClick={handleSkip}> <Button variant="outline" onClick={handleSkip} className="flex-1 sm:flex-none bg-transparent">
Skip Skip
</Button> </Button>
<Button onClick={handleNext} className="gap-2 bg-blue-500 hover:bg-blue-600"> <Button onClick={handleNext} className="gap-2 bg-blue-500 hover:bg-blue-600 flex-1 sm:flex-none">
Next Next
<ChevronRight className="h-4 w-4" /> <ChevronRight className="h-4 w-4" />
</Button> </Button>
@@ -242,7 +246,7 @@ export function OnboardingCarousel() {
) : ( ) : (
<Button <Button
onClick={handleComplete} onClick={handleComplete}
className="gap-2 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600" className="gap-2 bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 w-full sm:w-auto"
> >
Get Started! Get Started!
<Sparkles className="h-4 w-4" /> <Sparkles className="h-4 w-4" />