@@ -15,24 +15,28 @@ public/images/
1515### Required Images for Demos:
1616
1717#### 1. Baby Steps to Riches 🍼💰
18+
1819- ** File** : ` demos/baby-steps.svg ` or ` demos/baby-steps.png `
1920- ** Style** : Baby footprint, money symbols, or simple growth icon
2021- ** Colors** : Blue to cyan gradient theme
2122- ** Size** : 64x64px (SVG preferred for scalability)
2223
2324#### 2. Democracy in Action 🗳️🎪
25+
2426- ** File** : ` demos/democracy.svg ` or ` demos/democracy.png `
2527- ** Style** : Voting ballot, multiple people, or consensus symbols
2628- ** Colors** : Green to emerald gradient theme
2729- ** Size** : 64x64px (SVG preferred for scalability)
2830
2931#### 3. Drama Queen Escrow 👑🎭
32+
3033- ** File** : ` demos/drama-queen.svg ` or ` demos/drama-queen.png `
3134- ** Style** : Crown, theater masks, or dramatic symbols
3235- ** Colors** : Orange to red gradient theme
3336- ** Size** : 64x64px (SVG preferred for scalability)
3437
3538#### 4. Gig Economy Madness 🛒🎪
39+
3640- ** File** : ` demos/gig-economy.svg ` or ` demos/gig-economy.png `
3741- ** Style** : Task list, marketplace, or gig work symbols
3842- ** Colors** : Purple to pink gradient theme
@@ -43,12 +47,14 @@ public/images/
4347### Character Assets:
4448
4549#### Main Character
50+
4651- ** File** : ` character/nexus-prime.svg ` or ` character/nexus-prime.png `
4752- ** Style** : Futuristic holographic entity with Stellar network patterns
4853- ** Colors** : Deep space black, cyan, purple with glowing effects
4954- ** Size** : 128x128px for main avatar, 256x256px for detailed view
5055
5156#### Character States
57+
5258- ** File** : ` character/nexus-prime-connected.svg `
5359- ** Style** : Character with active Stellar network connections
5460- ** Use** : When wallet is connected
@@ -58,19 +64,22 @@ public/images/
5864- ** Use** : When wallet is disconnected
5965
6066#### Character Elements
67+
6168- ** File** : ` character/network-pattern.svg `
6269- ** Style** : Stellar network connection patterns
6370- ** Use** : Background patterns and effects
6471
6572## 🏷️ Logo & Branding
6673
6774### Main Logo
75+
6876- ** File** : ` logo/stellar-nexus.svg ` or ` logo/stellar-nexus.png `
6977- ** Style** : STELLAR NEXUS text with Stellar blockchain elements
7078- ** Colors** : Cyan to purple gradient
7179- ** Size** : 200x80px (SVG preferred)
7280
7381### Logo Variations
82+
7483- ** File** : ` logo/stellar-nexus-white.svg `
7584- ** Style** : White version for dark backgrounds
7685- ** Use** : Header and main navigation
@@ -83,6 +92,7 @@ public/images/
8392## 🔧 General Icons
8493
8594### UI Icons
95+
8696- ** File** : ` icons/wallet.svg `
8797- ** Style** : Wallet or key icon
8898- ** Use** : Wallet connection buttons
@@ -106,17 +116,20 @@ public/images/
106116## 🎨 Design Guidelines
107117
108118### Image Formats
119+
109120- ** SVG** : Preferred for icons and logos (scalable, small file size)
110121- ** PNG** : Use for complex images with transparency
111122- ** WebP** : Modern format for photos and complex graphics
112123
113124### Color Schemes
125+
114126- ** Primary** : Cyan (#06b6d4) to Purple (#8b5cf6)
115127- ** Secondary** : Green (#10b981) to Emerald (#059669 )
116128- ** Accent** : Orange (#f97316) to Red (#ef4444)
117129- ** Neutral** : Slate (#0f172a) to Gray (#6b7280)
118130
119131### Style Guidelines
132+
120133- ** Futuristic** : Use sharp edges, glowing effects, and modern shapes
121134- ** Stellar Theme** : Incorporate network patterns, nodes, and connection lines
122135- ** Professional** : Clean, readable, and consistent with the project theme
@@ -125,12 +138,14 @@ public/images/
125138## 📱 Responsive Considerations
126139
127140### Icon Sizes
141+
128142- ** Mobile** : 32x32px minimum
129143- ** Tablet** : 48x48px
130144- ** Desktop** : 64x64px
131145- ** High DPI** : Provide 2x versions for retina displays
132146
133147### File Naming Convention
148+
134149```
135150{category}/{name}-{variant}.{format}
136151Examples:
@@ -143,11 +158,13 @@ Examples:
143158## 🚀 Implementation Notes
144159
145160### Next.js Image Optimization
161+
146162- Use ` next/image ` component for automatic optimization
147163- Place images in ` public/images/ ` for static serving
148164- Consider using ` next/image ` with ` loader: 'default' ` for dynamic images
149165
150166### Performance Tips
167+
151168- Optimize SVG files (remove unnecessary metadata)
152169- Compress PNG files using tools like TinyPNG
153170- Use WebP format for modern browsers
@@ -163,5 +180,5 @@ Examples:
163180
164181---
165182
166- ** Note** : This guide should be updated as new image assets are added to the project.
167-
183+ ** Note** : This guide should be updated as new image assets are added to the
184+ project.
0 commit comments