Feature

app/bills/pay/[billerId]/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import { use } from 'react'
-import { useRouter } from 'next/navigation'
 import { motion } from 'framer-motion'
 import { ArrowLeft, ShieldCheck, Zap } from 'lucide-react'
 import { Button } from '@/components/ui/button'
@@ -14,7 +13,6 @@ interface PageProps {
 }
 
 export default function BillerPaymentPage({ params }: PageProps) {
-    const router = useRouter()
     const { billerId } = use(params)
     const schema = BILLER_SCHEMAS[billerId]
 

app/feature-highlights/page.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { FeatureHighlightsCarousel } from '@/components/onboarding/feature-highlights-carousel'
+
+export default function FeatureHighlightsPage() {
+  const router = useRouter()
+
+  return (
+    <FeatureHighlightsCarousel
+      onBack={() => router.push('/welcome')}
+      onComplete={() => router.push('/wallet-setup')}
+      onSkip={() => router.push('/wallet-setup')}
+    />
+  )
+}

app/wallet-setup/page.tsx

@@ -0,0 +1,45 @@
+import Link from 'next/link'
+import { ArrowLeft, Shield } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function WalletSetupPage() {
+  return (
+    <main className="mx-auto flex min-h-screen w-full max-w-sm flex-col justify-between bg-[radial-gradient(circle_at_top,rgba(16,185,129,0.16),rgba(3,14,9,0.98)_35%,#010805_75%)] px-6 py-8 text-emerald-50">
+      <header className="flex items-center">
+        <Button
+          asChild
+          variant="ghost"
+          size="icon-sm"
+          className="rounded-full text-emerald-100 hover:bg-emerald-500/10 hover:text-emerald-50"
+        >
+          <Link href="/feature-highlights" aria-label="Back to feature highlights">
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
+        </Button>
+      </header>
+
+      <section className="space-y-6">
+        <div className="inline-flex items-center gap-2 rounded-full border border-emerald-500/25 bg-emerald-500/12 px-3 py-1 text-xs font-medium text-emerald-200">
+          <Shield className="h-4 w-4" />
+          Wallet Setup
+        </div>
+        <h1 className="text-3xl font-semibold leading-tight">
+          Secure your wallet in 3 quick steps
+        </h1>
+        <p className="text-sm leading-7 text-emerald-100/75">
+          Your feature highlights are complete. Next, we will generate and verify your recovery
+          phrase so your funds stay protected.
+        </p>
+      </section>
+
+      <div className="space-y-3">
+        <Button
+          asChild
+          className="h-12 w-full rounded-xl bg-emerald-500 text-emerald-950 hover:bg-emerald-400"
+        >
+          <Link href="/dashboard">Continue</Link>
+        </Button>
+      </div>
+    </main>
+  )
+}

app/welcome/page.tsx

@@ -0,0 +1,55 @@
+import Link from 'next/link'
+import { ArrowRight, ShieldCheck } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+export default function WelcomePage() {
+  return (
+    <main className="relative mx-auto flex min-h-screen w-full max-w-sm flex-col overflow-hidden bg-[radial-gradient(circle_at_50%_20%,rgba(16,185,129,0.2),rgba(4,14,10,0.98)_35%,#010805_75%)] px-6 pt-10 pb-8 text-emerald-50">
+      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_center,rgba(16,185,129,0.12),transparent_55%)]" />
+
+      <section className="relative flex flex-1 flex-col">
+        <div className="mb-5 inline-flex w-fit items-center rounded-full border border-emerald-400/30 bg-emerald-500/15 px-3 py-1 text-[11px] font-semibold tracking-wide text-emerald-200">
+          FINANCE REDEFINED
+        </div>
+
+        <div className="mb-8 flex flex-1 items-center justify-center">
+          <div className="relative flex h-64 w-64 items-center justify-center rounded-full border border-emerald-500/35 bg-[radial-gradient(circle,rgba(16,185,129,0.26),rgba(0,0,0,0.25)_45%,transparent_75%)]">
+            <div className="absolute inset-6 rounded-full border border-emerald-400/25" />
+            <div className="absolute inset-12 rounded-full border border-emerald-400/15" />
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl border border-emerald-300/35 bg-emerald-400/20 shadow-[0_0_28px_rgba(16,185,129,0.7)]">
+              <ShieldCheck className="h-10 w-10 text-emerald-200" />
+            </div>
+          </div>
+        </div>
+
+        <h1 className="text-center text-4xl font-bold leading-tight">Aframp</h1>
+        <p className="mt-2 text-center text-3xl font-semibold leading-tight text-emerald-100">
+          Welcome to the future of finance
+        </p>
+        <p className="mt-6 text-center text-sm leading-7 text-emerald-100/75">
+          Securely manage your digital assets, trade with confidence, and build your wealth with
+          Aframp.
+        </p>
+
+        <div className="mt-10 space-y-3">
+          <Button
+            asChild
+            className="h-12 w-full rounded-xl bg-emerald-500 text-emerald-950 hover:bg-emerald-400"
+          >
+            <Link href="/feature-highlights">
+              Get Started
+              <ArrowRight className="h-4 w-4" />
+            </Link>
+          </Button>
+          <Button
+            asChild
+            variant="outline"
+            className="h-12 w-full rounded-xl border-emerald-500/35 bg-transparent text-emerald-50 hover:bg-emerald-500/10 hover:text-emerald-50"
+          >
+            <Link href="/dashboard">Log In</Link>
+          </Button>
+        </div>
+      </section>
+    </main>
+  )
+}

components/bills/payment-form.tsx

@@ -35,9 +35,9 @@
     const [showSchedule, setShowSchedule] = useState(false)
 
     // Generate dynamic Zod schema
     const formSchemaObject: any = {}
     schema.fields.forEach((field) => {
         let validator: any = z.string()
 
         if (field.validation.required) {
             validator = validator.min(1, field.validation.message || `${field.label} is required`)
@@ -72,7 +72,7 @@
         mode: 'onChange',
     })
 
     const amountValue = watch('amount' as any) || (schema.fields.find(f => f.name === 'package') ?
         schema.fields.find(f => f.name === 'package')?.options?.find(o => o.value === watch('package' as any))?.label.split('₦')[1]?.replace(',', '') : 0) || 0
 
     const parsedAmount = typeof amountValue === 'string' ? parseFloat(amountValue.replace(/[^0-9.]/g, '')) : amountValue
@@ -82,15 +82,15 @@
     useEffect(() => {
         if (accountValue && accountValue.length >= 10 && !errors[schema.fields[0].name]) {
             const delayDebounceFn = setTimeout(() => {
-                validateAccount(accountValue)
+                validateAccount()
             }, 1000)
             return () => clearTimeout(delayDebounceFn)
         } else {
             setValidatedAccount(null)
         }
     }, [accountValue, errors[schema.fields[0].name]])
 
-    const validateAccount = async (value: string) => {
+    const validateAccount = async () => {
         setIsValidating(true)
         // Simulate API call
         await new Promise((resolve) => setTimeout(resolve, 1500))
@@ -101,7 +101,7 @@
         setValidatedAccount(mockNames[Math.floor(Math.random() * mockNames.length)])
     }
 
-    const onSubmit = async (data: FormValues) => {
+    const onSubmit = async (_data: FormValues) => {
         setIsProcessing(true)
         // Simulate payment processing
         await new Promise((resolve) => setTimeout(resolve, 3000))
@@ -255,7 +255,7 @@
             </Button>
 
             <p className="text-[10px] text-center text-muted-foreground px-6">
-                By clicking "Pay Now", you agree to our Terms of Service and acknowledge that this transaction is final.
+                By clicking &quot;Pay Now&quot;, you agree to our Terms of Service and acknowledge that this transaction is final.
             </p>
         </form>
     )

components/bills/recent-billers.tsx

@@ -5,7 +5,6 @@ import { motion } from 'framer-motion'
 import Link from 'next/link'
 import { Card, CardContent } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'
-import { Button } from '@/components/ui/button'
 import { Clock, Star } from 'lucide-react'
 
 interface Biller {