Skip to content

Commit 16ff2cd

Browse files
josegomez-devjosegomez-dev
committed
refactor(tutorial): remove images and improve layout
- Remove all image properties and Image components from InteractiveTutorialModal.tsx - Remove all image properties and Image components from OnboardingOverlay.tsx - Replace images with emoji icons for lighter platform - Remove step content box from InteractiveTutorialModal to give more space to main content - Keep left sidebar navigation intact - Maintain all tutorial functionality while reducing bundle size
1 parent fabfca0 commit 16ff2cd

File tree

19 files changed

+37
-477
lines changed

19 files changed

+37
-477
lines changed

‎components/OnboardingOverlay.tsx‎

Lines changed: 11 additions & 154 deletions
Large diffs are not rendered by default.

‎components/ui/modals/InteractiveTutorialModal.tsx‎

Lines changed: 25 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
'use client';
22

33
import React, { useState, useEffect, useRef } from 'react';
4-
import Image from 'next/image';
54

65
interface TutorialStep {
76
id: string;
87
title: string;
98
description: string;
10-
image?: string;
11-
imageAlt?: string;
129
icon?: string;
1310
completed?: boolean;
1411
}
@@ -74,24 +71,18 @@ export const InteractiveTutorialModal: React.FC<InteractiveTutorialModalProps> =
7471
title: 'Install Freighter Wallet 🦎',
7572
description: 'First, install the Freighter browser extension from freighter.app. It\'s your gateway to the Stellar network.',
7673
icon: '📥',
77-
image: '/images/tutorial/freighter-install.png',
78-
imageAlt: 'Freighter wallet installation',
7974
},
8075
{
8176
id: 'wallet-2',
8277
title: 'Create Your Wallet 🔑',
8378
description: 'Create a new wallet with a strong password. Write down your 24-word recovery phrase and store it safely.',
8479
icon: '🔐',
85-
image: '/images/tutorial/wallet-creation.png',
86-
imageAlt: 'Wallet creation process',
8780
},
8881
{
8982
id: 'wallet-3',
9083
title: 'Connect to Testnet 🧪',
9184
description: 'Switch to Stellar Testnet for safe testing. You can get free test XLM from the Stellar Laboratory.',
9285
icon: '🔗',
93-
image: '/images/tutorial/testnet-setup.png',
94-
imageAlt: 'Testnet configuration',
9586
},
9687
],
9788
},
@@ -106,24 +97,18 @@ export const InteractiveTutorialModal: React.FC<InteractiveTutorialModalProps> =
10697
title: 'Baby Steps Demo 🍼',
10798
description: 'Start with our simplest escrow demo. Learn the basics of creating escrows and managing milestones.',
10899
icon: '👶',
109-
image: '/images/tutorial/baby-steps-demo.png',
110-
imageAlt: 'Baby Steps demo interface',
111100
},
112101
{
113102
id: 'demo-2',
114103
title: 'Drama Queen Escrow 👑',
115104
description: 'Experience dispute resolution in action. Learn how arbitration works in trustless systems.',
116105
icon: '⚖️',
117-
image: '/images/tutorial/dispute-resolution.png',
118-
imageAlt: 'Dispute resolution demo',
119106
},
120107
{
121108
id: 'demo-3',
122109
title: 'Gig Economy Marketplace 🛒',
123110
description: 'Explore a complete marketplace with task posting, worker matching, and automated payments.',
124111
icon: '🏪',
125-
image: '/images/tutorial/marketplace-demo.png',
126-
imageAlt: 'Marketplace demo interface',
127112
},
128113
],
129114
},
@@ -138,24 +123,18 @@ export const InteractiveTutorialModal: React.FC<InteractiveTutorialModalProps> =
138123
title: 'Quest System 🎯',
139124
description: 'Complete quests to earn XP, badges, and unlock new features. Each quest teaches you something new.',
140125
icon: '🏆',
141-
image: '/images/tutorial/quest-system.png',
142-
imageAlt: 'Quest system interface',
143126
},
144127
{
145128
id: 'advanced-2',
146129
title: 'Referral Program 👥',
147130
description: 'Invite friends and earn rewards. Build your network and help grow the trustless work community.',
148131
icon: '🎁',
149-
image: '/images/tutorial/referral-system.png',
150-
imageAlt: 'Referral system dashboard',
151132
},
152133
{
153134
id: 'advanced-3',
154135
title: 'Leaderboard Competition 🏅',
155136
description: 'Compete with other users on the global leaderboard. Climb the ranks and earn exclusive rewards.',
156137
icon: '🌍',
157-
image: '/images/tutorial/leaderboard.png',
158-
imageAlt: 'Global leaderboard',
159138
},
160139
],
161140
},
@@ -233,14 +212,8 @@ export const InteractiveTutorialModal: React.FC<InteractiveTutorialModalProps> =
233212
<div className="bg-gradient-to-r from-brand-500/20 to-accent-500/20 p-6 border-b border-white/20">
234213
<div className="flex items-center justify-between">
235214
<div className="flex items-center space-x-3">
236-
<div className="w-12 h-12 bg-gradient-to-r from-cyan-400/20 to-purple-400/20 rounded-full flex items-center justify-center">
237-
<Image
238-
src="/images/character/nexus-prime-chat.png"
239-
alt="NEXUS PRIME"
240-
width={32}
241-
height={32}
242-
className="rounded-full"
243-
/>
215+
<div className="w-12 h-12 bg-gradient-to-r from-cyan-400/20 to-purple-400/20 rounded-full flex items-center justify-center text-2xl">
216+
🤖
244217
</div>
245218
<div>
246219
<h2 className="text-2xl font-bold text-white">Interactive Tutorial</h2>
@@ -351,66 +324,33 @@ export const InteractiveTutorialModal: React.FC<InteractiveTutorialModalProps> =
351324
<div className="flex-1 p-6 overflow-y-auto">
352325
{currentStepData && (
353326
<div className="max-w-4xl mx-auto">
354-
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-start">
355-
{/* Text Content */}
356-
<div className="space-y-6">
357-
<div>
358-
<div className="flex items-center space-x-3 mb-4">
359-
<div className="w-12 h-12 bg-gradient-to-r from-cyan-500/20 to-purple-500/20 rounded-full flex items-center justify-center text-2xl">
360-
{currentStepData.icon || '📚'}
361-
</div>
362-
<div>
363-
<h3 className="text-2xl font-bold text-white">{currentStepData.title}</h3>
364-
<p className="text-white/60 text-sm">
365-
{tutorialSections[currentSection].title}
366-
</p>
367-
</div>
368-
</div>
369-
<p className="text-white/90 text-lg leading-relaxed">
370-
{currentStepData.description}
371-
</p>
372-
</div>
373-
374-
{/* Action Items */}
375-
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
376-
<h4 className="text-white font-semibold mb-2">💡 What to do next:</h4>
377-
<ul className="text-white/80 space-y-1 text-sm">
378-
<li>• Follow the step instructions carefully</li>
379-
<li>• Use the navigation buttons or keyboard arrows</li>
380-
<li>• Take your time to understand each concept</li>
381-
<li>• Complete each step before moving to the next</li>
382-
</ul>
383-
</div>
384-
</div>
385-
386-
{/* Image Content */}
387-
<div className="flex-shrink-0">
388-
{currentStepData.image ? (
389-
<div className="relative bg-white/5 rounded-lg p-4 border border-white/10">
390-
<Image
391-
src={currentStepData.image}
392-
alt={currentStepData.imageAlt || currentStepData.title}
393-
width={400}
394-
height={300}
395-
className="w-full h-auto rounded-lg shadow-lg"
396-
onError={(e) => {
397-
e.currentTarget.src = '/images/tutorial/placeholder.svg';
398-
}}
399-
/>
400-
<div className="absolute top-4 right-4 bg-black/50 text-white text-xs px-2 py-1 rounded">
401-
Step {currentStep + 1}
402-
</div>
327+
<div className="space-y-6">
328+
<div>
329+
<div className="flex items-center space-x-3 mb-4">
330+
<div className="w-12 h-12 bg-gradient-to-r from-cyan-500/20 to-purple-500/20 rounded-full flex items-center justify-center text-2xl">
331+
{currentStepData.icon || '📚'}
403332
</div>
404-
) : (
405-
<div className="bg-white/5 rounded-lg p-8 border border-white/10 text-center">
406-
<div className="text-6xl mb-4 opacity-50">
407-
{currentStepData.icon || '📚'}
408-
</div>
333+
<div>
334+
<h3 className="text-2xl font-bold text-white">{currentStepData.title}</h3>
409335
<p className="text-white/60 text-sm">
410-
Visual guide coming soon
336+
{tutorialSections[currentSection].title}
411337
</p>
412338
</div>
413-
)}
339+
</div>
340+
<p className="text-white/90 text-lg leading-relaxed">
341+
{currentStepData.description}
342+
</p>
343+
</div>
344+
345+
{/* Action Items */}
346+
<div className="bg-white/5 rounded-lg p-4 border border-white/10">
347+
<h4 className="text-white font-semibold mb-2">💡 What to do next:</h4>
348+
<ul className="text-white/80 space-y-1 text-sm">
349+
<li>• Follow the step instructions carefully</li>
350+
<li>• Use the navigation buttons or keyboard arrows</li>
351+
<li>• Take your time to understand each concept</li>
352+
<li>• Complete each step before moving to the next</li>
353+
</ul>
414354
</div>
415355
</div>
416356
</div>

‎components/ui/quest/AnimatedGiftBox.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ export const AnimatedGiftBox: React.FC<AnimatedGiftBoxProps> = ({
131131
{/* Rewards Text */}
132132
<div className="text-xs font-bold text-white text-center leading-tight">
133133
<div className="text-yellow-300">XP</div>
134-
<div className="text-purple-300">NFTs</div>
134+
<div className="text-purple-300">Starter Pack</div>
135135
<div className="text-cyan-300">Tokens</div>
136136
</div>
137137

‎public/gif.worker.js‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎public/images/tutorial/README.md‎

Lines changed: 0 additions & 97 deletions
This file was deleted.

‎public/images/tutorial/blank.png‎

-1010 KB
Binary file not shown.

‎public/images/tutorial/placeholder.svg‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎public/robots.txt‎

Lines changed: 0 additions & 40 deletions
This file was deleted.

0 commit comments

Comments
 (0)