diff --git a/public/onboarding/Banner.svg b/public/onboarding/Banner.svg new file mode 100644 index 0000000..cabed73 --- /dev/null +++ b/public/onboarding/Banner.svg @@ -0,0 +1,328 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/onboarding/argent.svg b/public/onboarding/argent.svg new file mode 100644 index 0000000..12d25bd --- /dev/null +++ b/public/onboarding/argent.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/onboarding/braavoos.svg b/public/onboarding/braavoos.svg new file mode 100644 index 0000000..54bf1bd --- /dev/null +++ b/public/onboarding/braavoos.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/onboarding/logo.svg b/public/onboarding/logo.svg new file mode 100644 index 0000000..cf9e448 --- /dev/null +++ b/public/onboarding/logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/onboarding/qrcode.svg b/public/onboarding/qrcode.svg new file mode 100644 index 0000000..2925425 --- /dev/null +++ b/public/onboarding/qrcode.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx index 7b23e8c..2283960 100644 --- a/src/app/onboarding/page.tsx +++ b/src/app/onboarding/page.tsx @@ -1,5 +1,572 @@ -function Onboarding() { - return

Onboarding page

; +'use client' +import React, { useState, useEffect } from 'react'; +import { ArrowLeft } from 'lucide-react'; +import { motion, AnimatePresence } from 'framer-motion'; +import Image from 'next/image'; + + +interface WalletOptionProps { + icon: string; + name: string; + onConnect: () => void; + isConnecting: boolean; +} + +interface DesktopLeftPanelProps { + step: string; +} + +interface MobileHeaderProps { + onBack: () => void; + showBack?: boolean; +} + +interface AnimatedLoaderProps { + size?: number; +} + +interface SuccessIconProps { + size?: number; +} + +interface ErrorIconProps { + size?: number; } -export default Onboarding; +const mockImages = { + logo: '/onboarding/logo.svg', + backgroundDesktop: '/onboarding/Banner.svg', + qrCode: '/onboarding/qrcode.svg', + bravosWallet: '/onboarding/braavoos.svg', + argentWallet: '/onboarding/argent.svg' +}; + + +const AnimatedLoader: React.FC = ({ size = 60 }) => { + console.log('AnimatedLoader rendering with size:', size); + + + const CSSLoader = () => ( +
+
+
+ ); + + try { + return ( +
+ +
+ ); + } catch (error) { + console.error('Framer Motion error, using CSS fallback:', error); + return ; + } +}; + +const SuccessIcon: React.FC = ({ }) => { + return ( +
+ + + + ✓ + + + +
+ ); +}; + +const ErrorIcon: React.FC = ({ }) => { + return ( +
+
+
+ + ! + +
+
+
+ ); +}; + +const WalletOption: React.FC = ({ icon, name, onConnect, isConnecting }) => { + return ( +
+
+ {name} + {name} +
+ +
+ ); +}; + + +const DesktopLeftPanel: React.FC = ({ step }) => { + const getContent = () => { + switch (step) { + case 'qr-scan': + return { + title: "You Own Your Voice", + subtitle: "No middlemen. No boundaries. With ChainLib, your content stays yours. Publish with purpose and keep the rewards you earn." + }; + case 'connecting': + case 'sign-message': + case 'signing': + case 'connected': + case 'final-success': + return { + title: "Write. Connect. Impact.", + subtitle: "From local readers to global fans, your story matters. We helps you reach more people, build your community, and leave your mark." + }; + default: + return { + title: "It Starts With a Story", + subtitle: "Every great book begins with a single idea. We give that idea a stage, a voice, and the freedom to reach the world." + }; + } + }; + + const getProgressBars = () => { + let currentStepNumber = 1; + + if (['qr-scan'].includes(step)) { + currentStepNumber = 2; + } else if (['connecting', 'sign-message', 'connected', 'final-success', 'connection-error'].includes(step)) { + currentStepNumber = 3; + } + + return ( +
+
= 1 ? 'bg-white' : 'bg-blue-300'}`} /> +
= 2 ? 'bg-white' : 'bg-blue-300'}`} /> +
= 3 ? 'bg-white' : 'bg-blue-300'}`} /> +
+ ); + }; + + const content = getContent(); + + return ( +
+ + +
+
+ ChainLib + ChainLib +
+
+ +
+

+ {content.title} +

+

+ {content.subtitle} +

+ + {getProgressBars()} +
+
+ ); +}; +const MobileHeader: React.FC = ({ onBack, showBack = true }) => { + return ( +
+ {showBack ? ( + + ) : ( +
+ )} +
+ ); +}; +const ChainLibOnboarding: React.FC = () => { + const [currentStep, setCurrentStep] = useState('wallet-selection'); + const [selectedWallet, setSelectedWallet] = useState(null); + const [isConnecting, setIsConnecting] = useState(false); + + + useEffect(() => { + if (currentStep === 'connecting') { + const timer = setTimeout(() => { + setCurrentStep('sign-message'); + }, 2000); + return () => clearTimeout(timer); + } + + if (currentStep === 'sign-message') { + const timer = setTimeout(() => { + setCurrentStep('connected'); + }, 3000); + return () => clearTimeout(timer); + } + }, [currentStep]); + + const handleWalletConnect = (walletName: string) => { + setSelectedWallet(walletName); + setIsConnecting(true); + setCurrentStep('qr-scan'); + }; + + const handleQRConnect = () => { + setCurrentStep('connecting'); + }; + + + const handleProceed = () => { + + const isSuccess = Math.random() > 0.5; + if (isSuccess) { + setCurrentStep('final-success'); + } else { + setCurrentStep('connection-error'); + } + }; + + const handleTryAgain = () => { + setCurrentStep('wallet-selection'); + }; + + const handleBack = () => { + switch (currentStep) { + case 'qr-scan': + setCurrentStep('wallet-selection'); + setIsConnecting(false); + setSelectedWallet(null); + break; + case 'connecting': + setCurrentStep('qr-scan'); + break; + case 'sign-message': + setCurrentStep('connecting'); + break; + case 'connected': + setCurrentStep('sign-message'); + break; + case 'final-success': + setCurrentStep('connected'); + break; + case 'connection-error': + setCurrentStep('connected'); + break; + default: + setCurrentStep('wallet-selection'); + setIsConnecting(false); + setSelectedWallet(null); + } + }; + + const getStepContent = () => { + switch (currentStep) { + case 'wallet-selection': + return ( +
+
+

Sign-up as Reader

+

+ Connect your wallet to unlock powerful reading own your books, collect NFTs, and enjoy instant, secure access to premium content. +

+
+ +
+ handleWalletConnect('Bravos')} + isConnecting={isConnecting} + /> + handleWalletConnect('Argent')} + isConnecting={isConnecting} + /> +
+ +
+ By connecting your wallet, you agree to our{' '} + Terms and Conditions + {' '}and our{' '} + Privacy Policy +
+
+ ); + + case 'qr-scan': + return ( +
+
+
+ {selectedWallet + {selectedWallet} +
+ +
+

+ Scan to connect and Sign Up with {selectedWallet} app +

+ +
+ QR Code +
+ +
+ + +
+
+
+
+ ); + + case 'connecting': + return ( +
+
+
+ {selectedWallet + {selectedWallet} +
+ + + +
+

Connecting to Wallet...

+
+ + +
+
+ ); + + case 'sign-message': + return ( +
+
+ + +
+

+ Sign the message in your wallet to confirm the authentication process +

+
+ + +
+
+ ); + + case 'connected': + return ( +
+
+ + +
+

{selectedWallet} Wallet Connected

+
+ + +
+
+ ); + + case 'final-success': + return ( +
+
+ + +
+

Unable to Connect

+
+ + +
+
+ ); + + case 'connection-error': + return ( +
+
+ + +
+

Unable to Connect

+
+ + +
+
+ ); + + default: + return null; + } + }; + + const renderStep = () => { + return ( + + + {getStepContent()} + + + ); + }; + + return ( +
+ + +
+ + +
+
+ {renderStep()} +
+
+
+
+ ); +}; + +export default ChainLibOnboarding; \ No newline at end of file