Skip to content

Commit 74ad80c

Browse files
author
apex-ai-net
committed
feat(react-bits): Phase 2 - Landing page professional UI enhancements
1 parent 46ef830 commit 74ad80c

File tree

3 files changed

+71
-42
lines changed

3 files changed

+71
-42
lines changed

‎app/(landing)/call-to-action.tsx‎

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Button } from '@/components/ui/button'
22
import Link from 'next/link'
33
import MentoLoopBackground from '@/components/mentoloop-background'
4+
import PixelCard from '@/components/react-bits/pixel-card'
45

56
export default function CallToAction() {
67
return (
@@ -15,26 +16,30 @@ export default function CallToAction() {
1516
<p className="text-white/90 text-lg max-w-2xl mx-auto">Join thousands of NP students who&apos;ve found their perfect preceptor match through MentoLoop.</p>
1617

1718
<div className="flex flex-wrap justify-center gap-4 pt-6">
18-
<Button
19-
asChild
20-
size="xl"
21-
className="bg-card text-primary hover:bg-card/90 shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 border border-primary/20 font-semibold touch-friendly"
22-
aria-label="Find my preceptor - Start student application">
23-
<Link href="/student-intake">
24-
<span>Find My Preceptor</span>
25-
</Link>
26-
</Button>
19+
<PixelCard variant="blue" speed={18} gap={8} noFocus={false}>
20+
<Button
21+
asChild
22+
size="xl"
23+
className="bg-card text-primary hover:bg-card/90 shadow-lg transition-all duration-300 hover:shadow-xl hover:scale-105 border border-primary/20 font-semibold touch-friendly"
24+
aria-label="Find my preceptor - Start student application">
25+
<Link href="/student-intake">
26+
<span>Find My Preceptor</span>
27+
</Link>
28+
</Button>
29+
</PixelCard>
2730

28-
<Button
29-
asChild
30-
size="xl"
31-
variant="outline"
32-
className="border-2 border-accent/50 text-white bg-accent/10 hover:bg-accent/20 hover:text-white backdrop-blur-sm hover:border-accent/70 transition-all duration-300 hover:shadow-xl hover:scale-105 font-semibold touch-friendly"
33-
aria-label="Become a preceptor - Start preceptor application">
34-
<Link href="/preceptor-intake">
35-
<span>Become a Preceptor</span>
36-
</Link>
37-
</Button>
31+
<PixelCard variant="pink" speed={15} gap={10} noFocus={false}>
32+
<Button
33+
asChild
34+
size="xl"
35+
variant="outline"
36+
className="border-2 border-accent/50 text-white bg-accent/10 hover:bg-accent/20 hover:text-white backdrop-blur-sm hover:border-accent/70 transition-all duration-300 hover:shadow-xl hover:scale-105 font-semibold touch-friendly"
37+
aria-label="Become a preceptor - Start preceptor application">
38+
<Link href="/preceptor-intake">
39+
<span>Become a Preceptor</span>
40+
</Link>
41+
</Button>
42+
</PixelCard>
3843
</div>
3944
</div>
4045
</MentoLoopBackground>

‎app/(landing)/hero-section.tsx‎

Lines changed: 27 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { Shield, Sparkles, ArrowRight } from 'lucide-react'
77
import MentoLoopBackground from '@/components/mentoloop-background'
88
import { AnimatedText, GradientText, GlowingText } from '@/components/ui/animated-text'
99
import { motion } from 'motion/react'
10+
import PixelCard from '@/components/react-bits/pixel-card'
1011

1112
export default function HeroSection() {
1213
return (
@@ -111,28 +112,32 @@ export default function HeroSection() {
111112
transition={{ delay: 1.2, duration: 0.6 }}
112113
className="flex flex-wrap items-center justify-center gap-4 mt-8"
113114
>
114-
<Button
115-
asChild
116-
size="xl"
117-
className="group relative bg-card text-primary hover:bg-card/90 shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-105 overflow-hidden font-semibold touch-friendly"
118-
aria-label="Find my preceptor - Sign up as student">
119-
<Link href="/sign-up/student">
120-
<div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-secondary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
121-
<Sparkles className="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform text-primary" aria-hidden="true" />
122-
<span className="relative text-nowrap">Find My Preceptor</span>
123-
</Link>
124-
</Button>
125-
<Button
126-
asChild
127-
size="xl"
128-
variant="outline"
129-
className="group border-2 border-foreground/30 text-white bg-foreground/10 hover:bg-foreground/20 hover:text-white backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:border-foreground/50 font-semibold touch-friendly"
130-
aria-label="Become a preceptor - Sign up as preceptor">
131-
<Link href="/sign-up/preceptor">
132-
<Shield className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" aria-hidden="true" />
133-
<span className="text-nowrap">Become a Preceptor</span>
134-
</Link>
135-
</Button>
115+
<PixelCard variant="blue" speed={18} gap={10} noFocus={false}>
116+
<Button
117+
asChild
118+
size="xl"
119+
className="group relative bg-card text-primary hover:bg-card/90 shadow-lg transition-all duration-300 hover:shadow-2xl hover:scale-105 overflow-hidden font-semibold touch-friendly"
120+
aria-label="Find my preceptor - Sign up as student">
121+
<Link href="/sign-up/student">
122+
<div className="absolute inset-0 bg-gradient-to-r from-primary/20 to-secondary/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
123+
<Sparkles className="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform text-primary" aria-hidden="true" />
124+
<span className="relative text-nowrap">Find My Preceptor</span>
125+
</Link>
126+
</Button>
127+
</PixelCard>
128+
<PixelCard variant="default" speed={15} gap={12} noFocus={false}>
129+
<Button
130+
asChild
131+
size="xl"
132+
variant="outline"
133+
className="group border-2 border-foreground/30 text-white bg-foreground/10 hover:bg-foreground/20 hover:text-white backdrop-blur-sm transition-all duration-300 hover:scale-105 hover:border-foreground/50 font-semibold touch-friendly"
134+
aria-label="Become a preceptor - Sign up as preceptor">
135+
<Link href="/sign-up/preceptor">
136+
<Shield className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" aria-hidden="true" />
137+
<span className="text-nowrap">Become a Preceptor</span>
138+
</Link>
139+
</Button>
140+
</PixelCard>
136141
</motion.div>
137142
</motion.div>
138143
</div>

‎app/(landing)/who-its-for.tsx‎

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
22
import { Button } from '@/components/ui/button'
33
import { GraduationCap, Stethoscope, Building2 } from 'lucide-react'
44
import Link from 'next/link'
5+
import PixelCard from '@/components/react-bits/pixel-card'
56

67
export default function WhoItsFor() {
78
const audiences = [
@@ -111,8 +112,25 @@ export default function WhoItsFor() {
111112

112113
const iconStyles = getIconStyles(audience.iconColor)
113114

115+
// Map iconColor to PixelCard variant (using available variants only)
116+
const getPixelVariant = (color: string): 'default' | 'blue' | 'yellow' | 'pink' => {
117+
switch(color) {
118+
case 'blue': return 'blue'
119+
case 'purple': return 'pink' // Purple → pink (closest available)
120+
case 'green': return 'yellow' // Green → yellow (closest available)
121+
default: return 'default'
122+
}
123+
}
124+
114125
return (
115-
<Card key={index} surface={iconStyles.cardSurface} className="text-center h-full flex flex-col hover:scale-[1.02] transition-all duration-300">
126+
<PixelCard
127+
key={index}
128+
variant={getPixelVariant(audience.iconColor)}
129+
speed={16}
130+
gap={10}
131+
noFocus={false}
132+
>
133+
<Card surface={iconStyles.cardSurface} className="text-center h-full flex flex-col hover:scale-[1.02] transition-all duration-300">
116134
<CardHeader className="space-y-4">
117135
<div className="flex justify-center">
118136
<div className="relative flex items-center justify-center w-16 h-16">
@@ -145,6 +163,7 @@ export default function WhoItsFor() {
145163
</Button>
146164
</CardContent>
147165
</Card>
166+
</PixelCard>
148167
)
149168
})}
150169
</div>

0 commit comments

Comments
 (0)