I notice you've shared a Stripe test secret key. Important security note: API keys should never be hardcoded in code - they should only be stored as environment variables.
Your project already has Stripe environment variables configured:
STRIPE_SECRET_KEYSTRIPE_PUBLISHABLE_KEYNEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
What would you like to do with Stripe?
- Set up payments - Add subscription/payment features to SierraVault
- Document verification fees - Charge for document verification services
- Premium tier - Create paid tiers for citizens/government
- Something else - Please describe your use case
Please let me know your goal and I'll create an implementation plan for your approval. Also, if you need to update the Stripe secret key, you can do so in the Vars section of the v0 sidebar (not in code).
You are an expert UI/UX engineer with 20+ years experience in production-grade interfaces. Apply the following corrections and rebuild the SierraVault UI with precision. I will upload screenshots showing the incorrect pages. FIX THEM EXACTLY AS FOLLOWS:===========================================================1. REMOVE THE WRONG REGISTRATION PAGE===========================================================The registration page shown in the screenshot must be COMPLETELY removed from the project. It should no longer load when clicking “Get Started.”Replace it with the NEW registration page (the one I originally built), and connect it properly.REQUIREMENTS:- “Get Started” button must link to the NEW, correct registration page.- Remove or delete the OLD registration page entirely.- Ensure routing consistency: • GET STARTED → /register • LOGIN → /login • NO PAGE SHOULD SHOW THE OLD REGISTER SCREEN===========================================================2. FIX SETTINGS PAGE SPACING===========================================================On the settings/dashboard page:- Add proper LEFT padding so labels, text, and input fields do NOT touch the sidebar.- Center the content more cleanly within the main panel.- Maintain the same color theme and UI style, but improve spacing, readability, and alignment.===========================================================3. UPDATE LOGIN REQUIREMENTS===========================================================Modify the login screen to include:PRIMARY LOGIN FIELDS:- Email (required)- Phone Number (required)- PasswordOPTIONAL FIELD:- NIN (optional unless connecting government documents)USER LOGIC:- Email or Phone Number can be used to sign in.- NIN is OPTIONAL at login.- NIN matters ONLY when the user wants to receive government-issued documents.UI CHANGES:- Add text: “Don’t have an account? Register”- Add text: “Forgot password? Retrieve using email or phone”===========================================================4. FORGOT PASSWORD FLOW===========================================================Forgot Password must:- Accept Email OR Phone Number- Send OTP- Allow password reset- No NIN required for password retrieval===========================================================5. REGISTRATION PAGE (THE GOOD ONE)===========================================================Ensure the NEW registration page includes:REQUIRED FIELDS:- Email- Phone Number- Full Name- PasswordOPTIONAL FIELDS:- NIN- Date of Birth- Government ID NumberNOTES:- NIN is OPTIONAL.- If NIN is left blank, users can still create an account and upload personal documents.- If NIN is later added, government documents will sync automatically.===========================================================6. DASHBOARD FIXES===========================================================In user dashboard settings:- Add a section titled “Government Identity”- Allow the user to ADD or EDIT their NIN later.- Show a note: “Adding your NIN connects your profile with government-verified records.”===========================================================7. PLACEHOLDERS & AI BUTTONS===========================================================Add placeholder components for:- Email field- Phone Number field- A button labeled: “AI Voice (Krio/English)” This button will later connect to a text-to-speech model.===========================================================8. UI ASSETS===========================================================Create AND apply:- A unique SierraVault icon/graphic- Use it as the website favicon (.ico)- Generate an XML version for Android web-app manifest- Include these assets in the project branding===========================================================TECHNICAL STYLE REQUIREMENTS===========================================================- Keep the SierraVault theme (navy, green, white)- Maintain glassmorphism, soft shadows, rounded corners- Maintain responsiveness on mobile- Keep all pages clean, centered, aligned properly- Use consistent spacing tokens, padding, and margins===========================================================OUTPUT FORMAT===========================================================Generate:- Updated React components- Corrected layout for Settings page- Updated Login UI- New routing for Get Started button- Placeholder components- Favicon + XML asset- Cleanly structured code ready for Next.js===========================================================END OF PROMPT===========================================================
Image Analysis:
- Screenshot 1: Shows the OLD registration page (simple white card with Full Name, Email, Phone, Password fields) that needs to be REMOVED
- Screenshot 2: Shows the Settings page with content touching the sidebar - needs proper left padding and spacing fixes
Let me find and fix all these issues:
Now let me also check the signup page and forgot-password page to see their current state:
Now I have all the context. Let me implement all the requested changes:
I've completed all the requested changes:
- Removed old registration page - Deleted
/app/signup/page.tsxand/app/signup-otp/page.tsx, replaced with the new/app/register/page.tsxwith Email, Phone, Full Name, Password (required) and NIN, DOB, Gov ID (optional) - Fixed Settings page spacing - Added proper left padding (
lg:pl-12), increased max-width tomax-w-3xl, and improved card padding for better readability away from the sidebar - Updated Login - Now uses Email OR Phone toggle with optional NIN field, includes "Forgot password? Retrieve using email or phone" and "Don't have an account? Register" links
- Fixed Forgot Password - Now accepts Email OR Phone (no NIN required), with toggle selector and proper OTP flow
- Added Government Identity section - New card in Settings allowing users to add/edit their NIN with explanation note
- Added AI Voice button placeholder - Present on Login, Register, and Settings pages
- Created favicon and manifest - SVG icon, PNG icons for Android/iOS, and web app manifest for installability
You are a senior UI/UX designer + full-stack engineer with 20+ years experience building secure authentication systems for governments and large enterprises. Redesign and rebuild the complete authentication UI for SierraVault, including both User Login and Government Login, using only MOCK DATA (no Supabase, no external DB).Use the SierraVault UI style:- Deep navy (#0A2A43)- Sierra Leone green (#2DC5A0)- White + glassmorphism- Smooth animations, rounded edges, floating cards- Professional, trustworthy, calm aesthetic (Netflix-style simplicity)Make all pages fully responsive, mobile-first, and clean.-----------------------------------------AUTH SYSTEMS TO BUILD-----------------------------------------## 1. USER LOGIN PAGE (PRIMARY UI)Route: /login### Inputs:- Email or Phone (required)- Password (required)- NIN (optional — placed under password as “optional extra field”)### Buttons:- Login- Forgot Password- Don’t have an account? Register### Behavior:- Validate email/phone format using mock validation- If login attempts > 3 → show toast: “Too many attempts. Try again in 5 minutes.”- If repeated invalid attempts → 24-hour lock message### On success:- Show success toast: “Login successful”- Redirect to /dashboard### UI Requirements:- New layout: center card with adequate left & right padding- Remove the old register page (the one in the screenshot)- Replace it with the NEW login UI- Include SierraVault logo + slogan “Your Life Documents. Always Safe. Always Verifiable.”-----------------------------------------## 2. USER REGISTER PAGE (NEW ONE ONLY)Route: /register### Inputs:- Email (required)- Phone (required)- Password (required)- Confirm Password- Optional NIN field at bottom- First Name, Last Name, DOB (optional basics)- Show small note: “Users without NIN can still upload personal documents. Government documents require NIN verification.”### Behavior:- Replace the old “Get Started” registration page completely- Clicking “Get Started” from landing page MUST redirect here- Remove the old register page shown in the screenshot-----------------------------------------## 3. USER PASSWORD RESET FLOWRoutes:- /forgot-password- /forgot-password-otp- /reset-password### Requirements:- Reset via Email OR Phone- OTP mock: always returns success after 5 seconds delay- 5-minute resend timer UI-----------------------------------------## 4. GOVERNMENT LOGIN PAGE (STRICT)Route: /gov/login### Inputs:- Government NIN (required)- Government Access Code (required)- Password### Behavior:- All fields required- Show government-grade UI: darker, more formal, “Government Portal” badge- On success → redirect to /gov/dashboard-----------------------------------------## 5. UI FIX: SETTINGS PAGE SPACINGOn the dashboard Settings page:- Move ALL text, fields, and labels away from the left sidebar- Add at least 32px left margin/padding- Fix alignment so text does not touch the sidebar edge- Use a centered content container with max-width-----------------------------------------## 6. LOGIN PAGE REDESIGN REQUIREMENTS- Use the colors and layout from the image style the user provided- Apply visual style as inspiration ONLY (do not display the image)- Use gradients, glass panels, and padding consistent with SierraVault- Add small vault icon animation above the login form (mock animated SVG placeholder)-----------------------------------------## 7. MOCK DATA (NO SUPABASE)Create a file /mock/authMock.js or inline mock module with:```jsexport const mockUsers = [ { id: "user_001", email: "david@example.com", phone: "+232761234567", nin: "SL-19900101-001", password: "password123" }];export const mockGovUsers = [ { id: "gov_001", govNIN: "GOV-202511-445", accessCode: "SV-GOV-2025", password: "securepass" }];Use these mocks for login validation.---8. SIERRA TRANSFER PLACEHOLDER INTEGRATIONAdd a small placeholder widget on dashboard: Card title: “Sierra Transfer (Coming Soon)” Caption: “Send documents securely to other users. 7-day claim window. Blockchain-verified.” Include disabled button: “Open Sierra Transfer”(This is temporary until full module is merged.)---9. COMPONENTS TO GENERATELoginCardGovLoginCardRegisterCardForgotPasswordCardOTPCardResetPasswordCardTextInput, PhoneInput, EmailInputNINInput (optional)PrimaryButton, SecondaryButtonAuthLayoutToastSystemAnimatedVaultIcon (SVG placeholder)mock/authMock.js---10. RESPONSIVENESS REQUIREMENTSAll cards centered with max-width 420pxFull-screen mobile layout with clean paddingSidebar spacing fixedLarge touch-friendly buttons---OUTPUT FORMATReturn:All components and pagesTailwind CSS stylingComplete routing structureMock data usageValidation logic (mock-level)Comments for backend TODOs---# 🔥 NEXT STEPS I can now generate either:✅ The Cursor backend-starter for all auth logic (mock only) ✅ The full landing page redesign ✅ The Sierra Transfer UI module ✅ The Anchor/Solana contract stub ✅ The Invite email HTML template Choose:A. Cursor backend mock B. Landing page rebuild C. Sierra Transfer UI generation D. Solana contract E. All of the above Which one do you want next?
