| 1 |
<div class="ai-tutorial-container ai-fade-in"> |
| 2 |
<!-- Header --> |
| 3 |
<div class="ai-tutorial-header"> |
| 4 |
<h1>AI Builder Tutorial</h1> |
| 5 |
<p>Learn how to create amazing content with AI-powered WordPress blocks</p> |
| 6 |
</div> |
| 7 |
|
| 8 |
<!-- Video Section --> |
| 9 |
<div class="ai-video-section"> |
| 10 |
<div class="ai-video-container"> |
| 11 |
<div class="ai-video-wrapper"> |
| 12 |
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/5lsACR1LdV0" frameborder="0" |
| 13 |
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" |
| 14 |
allowfullscreen> |
| 15 |
</iframe> |
| 16 |
</div> |
| 17 |
</div> |
| 18 |
<div class="ai-video-info"> |
| 19 |
<h3>Complete AI Builder Walkthrough</h3> |
| 20 |
<p>Watch this comprehensive tutorial to master all AI Builder features</p> |
| 21 |
</div> |
| 22 |
</div> |
| 23 |
|
| 24 |
<!-- Features Overview --> |
| 25 |
<div class="ai-features-overview"> |
| 26 |
<div class="ai-section-header"> |
| 27 |
<h2>Key Features</h2> |
| 28 |
<p>Discover the powerful AI capabilities integrated into WordPress</p> |
| 29 |
</div> |
| 30 |
|
| 31 |
<div class="ai-features-grid"> |
| 32 |
<div class="ai-feature-card"> |
| 33 |
<div class="ai-feature-icon"> |
| 34 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 35 |
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" |
| 36 |
stroke-linejoin="round" /> |
| 37 |
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 38 |
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 39 |
</svg> |
| 40 |
</div> |
| 41 |
<h3>AI-Powered Pages</h3> |
| 42 |
<p>Generate complete WordPress pages with AI using simple prompts</p> |
| 43 |
</div> |
| 44 |
|
| 45 |
<div class="ai-feature-card"> |
| 46 |
<div class="ai-feature-icon"> |
| 47 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 48 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 49 |
<line x1="9" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" /> |
| 50 |
<line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" /> |
| 51 |
<line x1="9" y1="15" x2="13" y2="15" stroke="currentColor" stroke-width="2" /> |
| 52 |
</svg> |
| 53 |
</div> |
| 54 |
<h3>Smart Blocks</h3> |
| 55 |
<p>Create custom Gutenberg blocks with AI-generated content</p> |
| 56 |
</div> |
| 57 |
|
| 58 |
<div class="ai-feature-card"> |
| 59 |
<div class="ai-feature-icon"> |
| 60 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 61 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 62 |
<circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2" /> |
| 63 |
<path d="M21 15L16 10L5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 64 |
stroke-linejoin="round" /> |
| 65 |
</svg> |
| 66 |
</div> |
| 67 |
<h3>AI Image Generation</h3> |
| 68 |
<p>Generate stunning images from text descriptions</p> |
| 69 |
</div> |
| 70 |
|
| 71 |
<div class="ai-feature-card"> |
| 72 |
<div class="ai-feature-icon"> |
| 73 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 74 |
<path |
| 75 |
d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" |
| 76 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 77 |
<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 78 |
stroke-linejoin="round" /> |
| 79 |
<path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 80 |
stroke-linejoin="round" /> |
| 81 |
<path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 82 |
stroke-linejoin="round" /> |
| 83 |
<path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 84 |
stroke-linejoin="round" /> |
| 85 |
</svg> |
| 86 |
</div> |
| 87 |
<h3>AI Text Generation</h3> |
| 88 |
<p>Create compelling text content with AI assistance</p> |
| 89 |
</div> |
| 90 |
|
| 91 |
<div class="ai-feature-card"> |
| 92 |
<div class="ai-feature-icon"> |
| 93 |
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 94 |
<path d="M5 8L12 3L19 8V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 95 |
<path d="M9 21V12H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 96 |
<path d="M3 10L12 15L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 97 |
<path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 98 |
<path d="M8 7L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 99 |
</svg> |
| 100 |
</div> |
| 101 |
<h3>AI Translation</h3> |
| 102 |
<p>Translate your pages and posts into multiple languages with AI</p> |
| 103 |
</div> |
| 104 |
</div> |
| 105 |
</div> |
| 106 |
|
| 107 |
<!-- Detailed Instructions --> |
| 108 |
<div class="ai-instructions-section"> |
| 109 |
<div class="ai-section-header"> |
| 110 |
<h2>How to Use AI Builder</h2> |
| 111 |
<p>Step-by-step guide to master each feature</p> |
| 112 |
</div> |
| 113 |
|
| 114 |
<!-- AI Pages --> |
| 115 |
<div class="ai-instruction-card"> |
| 116 |
<div class="ai-instruction-header"> |
| 117 |
<div class="ai-instruction-icon"> |
| 118 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 119 |
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" |
| 120 |
stroke-linejoin="round" /> |
| 121 |
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 122 |
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round" /> |
| 123 |
</svg> |
| 124 |
</div> |
| 125 |
<div class="ai-instruction-title"> |
| 126 |
<h3>1. Creating AI-Powered Pages</h3> |
| 127 |
<p>Generate complete WordPress pages with AI</p> |
| 128 |
</div> |
| 129 |
</div> |
| 130 |
<div class="ai-instruction-content"> |
| 131 |
<div class="ai-step"> |
| 132 |
<div class="ai-step-number">1</div> |
| 133 |
<div class="ai-step-content"> |
| 134 |
<h4>Access the Chat Widget</h4> |
| 135 |
<p>Look for the chat widget in the bottom-left corner of your WordPress editor</p> |
| 136 |
</div> |
| 137 |
</div> |
| 138 |
<div class="ai-step"> |
| 139 |
<div class="ai-step-number">2</div> |
| 140 |
<div class="ai-step-content"> |
| 141 |
<h4>Describe Your Page</h4> |
| 142 |
<p>Enter a detailed prompt describing the page you want to create. Be specific about the |
| 143 |
content, style, and purpose</p> |
| 144 |
</div> |
| 145 |
</div> |
| 146 |
<div class="ai-step"> |
| 147 |
<div class="ai-step-number">3</div> |
| 148 |
<div class="ai-step-content"> |
| 149 |
<h4>Generate Content</h4> |
| 150 |
<p>Click generate and watch as AI generates complete page content with appropriate Gutenberg |
| 151 |
blocks |
| 152 |
</p> |
| 153 |
</div> |
| 154 |
</div> |
| 155 |
<div class="ai-tip"> |
| 156 |
<div class="ai-tip-icon">💡</div> |
| 157 |
<div class="ai-tip-content"> |
| 158 |
<strong>Pro Tip:</strong> The more detailed your prompt, the better the AI-generated content |
| 159 |
will be. Include information about your target audience, tone, and specific sections you want. |
| 160 |
</div> |
| 161 |
</div> |
| 162 |
</div> |
| 163 |
</div> |
| 164 |
|
| 165 |
<!-- AI Blocks --> |
| 166 |
<div class="ai-instruction-card"> |
| 167 |
<div class="ai-instruction-header"> |
| 168 |
<div class="ai-instruction-icon"> |
| 169 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 170 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 171 |
<line x1="9" y1="9" x2="15" y2="9" stroke="currentColor" stroke-width="2" /> |
| 172 |
<line x1="9" y1="12" x2="15" y2="12" stroke="currentColor" stroke-width="2" /> |
| 173 |
<line x1="9" y1="15" x2="13" y2="15" stroke="currentColor" stroke-width="2" /> |
| 174 |
</svg> |
| 175 |
</div> |
| 176 |
<div class="ai-instruction-title"> |
| 177 |
<h3>2. Creating AI Blocks</h3> |
| 178 |
<p>Generate custom Gutenberg blocks with AI</p> |
| 179 |
</div> |
| 180 |
</div> |
| 181 |
<div class="ai-instruction-content"> |
| 182 |
<div class="ai-step"> |
| 183 |
<div class="ai-step-number">1</div> |
| 184 |
<div class="ai-step-content"> |
| 185 |
<h4>Add AI Block</h4> |
| 186 |
<p>In the Gutenberg editor, click the "+" button and search for "AI Block"</p> |
| 187 |
</div> |
| 188 |
</div> |
| 189 |
<div class="ai-step"> |
| 190 |
<div class="ai-step-number">2</div> |
| 191 |
<div class="ai-step-content"> |
| 192 |
<h4>Configure the Block</h4> |
| 193 |
<p>In the block settings panel, find the "AI Description" field</p> |
| 194 |
</div> |
| 195 |
</div> |
| 196 |
<div class="ai-step"> |
| 197 |
<div class="ai-step-number">3</div> |
| 198 |
<div class="ai-step-content"> |
| 199 |
<h4>Describe Your Content</h4> |
| 200 |
<p>Enter a detailed description of the content you want the AI to generate for this block</p> |
| 201 |
</div> |
| 202 |
</div> |
| 203 |
<div class="ai-tip"> |
| 204 |
<div class="ai-tip-icon">💡</div> |
| 205 |
<div class="ai-tip-content"> |
| 206 |
<strong>Pro Tip:</strong> AI Blocks are perfect for creating testimonials, product descriptions, |
| 207 |
FAQ sections, and any other content that needs to be generated dynamically. |
| 208 |
</div> |
| 209 |
</div> |
| 210 |
</div> |
| 211 |
</div> |
| 212 |
|
| 213 |
<!-- AI Images --> |
| 214 |
<div class="ai-instruction-card"> |
| 215 |
<div class="ai-instruction-header"> |
| 216 |
<div class="ai-instruction-icon"> |
| 217 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 218 |
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" stroke="currentColor" stroke-width="2" /> |
| 219 |
<circle cx="8.5" cy="8.5" r="1.5" stroke="currentColor" stroke-width="2" /> |
| 220 |
<path d="M21 15L16 10L5 21" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 221 |
stroke-linejoin="round" /> |
| 222 |
</svg> |
| 223 |
</div> |
| 224 |
<div class="ai-instruction-title"> |
| 225 |
<h3>3. Generating AI Images</h3> |
| 226 |
<p>Create stunning visuals from text descriptions</p> |
| 227 |
</div> |
| 228 |
</div> |
| 229 |
<div class="ai-instruction-content"> |
| 230 |
<div class="ai-step"> |
| 231 |
<div class="ai-step-number">1</div> |
| 232 |
<div class="ai-step-content"> |
| 233 |
<h4>Add AI Image Block</h4> |
| 234 |
<p>Search for "AI Image" in the Gutenberg block library</p> |
| 235 |
</div> |
| 236 |
</div> |
| 237 |
<div class="ai-step"> |
| 238 |
<div class="ai-step-number">2</div> |
| 239 |
<div class="ai-step-content"> |
| 240 |
<h4>Describe Your Image</h4> |
| 241 |
<p>In the block settings, enter a detailed description of the image you want to generate</p> |
| 242 |
</div> |
| 243 |
</div> |
| 244 |
<div class="ai-tip"> |
| 245 |
<div class="ai-tip-icon">💡</div> |
| 246 |
<div class="ai-tip-content"> |
| 247 |
<strong>Pro Tip:</strong> Be specific about style, mood, colors, and composition. Include |
| 248 |
details like "professional", "vintage", "minimalist", or "colorful" to get better results. |
| 249 |
</div> |
| 250 |
</div> |
| 251 |
</div> |
| 252 |
</div> |
| 253 |
|
| 254 |
<!-- AI Text --> |
| 255 |
<div class="ai-instruction-card"> |
| 256 |
<div class="ai-instruction-header"> |
| 257 |
<div class="ai-instruction-icon"> |
| 258 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 259 |
<path |
| 260 |
d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" |
| 261 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 262 |
<path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 263 |
stroke-linejoin="round" /> |
| 264 |
<path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 265 |
stroke-linejoin="round" /> |
| 266 |
<path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 267 |
stroke-linejoin="round" /> |
| 268 |
<path d="M10 9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 269 |
stroke-linejoin="round" /> |
| 270 |
</svg> |
| 271 |
</div> |
| 272 |
<div class="ai-instruction-title"> |
| 273 |
<h3>4. Creating AI Text Content</h3> |
| 274 |
<p>Generate compelling text with AI assistance</p> |
| 275 |
</div> |
| 276 |
</div> |
| 277 |
<div class="ai-instruction-content"> |
| 278 |
<div class="ai-step"> |
| 279 |
<div class="ai-step-number">1</div> |
| 280 |
<div class="ai-step-content"> |
| 281 |
<h4>Add AI Text Block</h4> |
| 282 |
<p>Search for "AI Text" in the Gutenberg block library</p> |
| 283 |
</div> |
| 284 |
</div> |
| 285 |
<div class="ai-step"> |
| 286 |
<div class="ai-step-number">2</div> |
| 287 |
<div class="ai-step-content"> |
| 288 |
<h4>Define Your Text</h4> |
| 289 |
<p>In the block settings, describe the type of text you want to generate (blog post, product |
| 290 |
description, etc.)</p> |
| 291 |
</div> |
| 292 |
</div> |
| 293 |
<div class="ai-step"> |
| 294 |
<div class="ai-step-number">3</div> |
| 295 |
<div class="ai-step-content"> |
| 296 |
<h4>Generate and Edit</h4> |
| 297 |
<p>Click generate and edit the AI-created text to match your exact needs</p> |
| 298 |
</div> |
| 299 |
</div> |
| 300 |
<div class="ai-tip"> |
| 301 |
<div class="ai-tip-icon">💡</div> |
| 302 |
<div class="ai-tip-content"> |
| 303 |
<strong>Pro Tip:</strong> Specify the tone (professional, casual, friendly), length, and target |
| 304 |
audience in your description for better results. |
| 305 |
</div> |
| 306 |
</div> |
| 307 |
</div> |
| 308 |
</div> |
| 309 |
|
| 310 |
<!-- AI Translation --> |
| 311 |
<div class="ai-instruction-card"> |
| 312 |
<div class="ai-instruction-header"> |
| 313 |
<div class="ai-instruction-icon"> |
| 314 |
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 315 |
<path d="M5 8L12 3L19 8V19C19 19.5304 18.7893 20.0391 18.4142 20.4142C18.0391 20.7893 17.5304 21 17 21H7C6.46957 21 5.96086 20.7893 5.58579 20.4142C5.21071 20.0391 5 19.5304 5 19V8Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 316 |
<path d="M9 21V12H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 317 |
<path d="M3 10L12 15L21 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 318 |
<path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 319 |
<path d="M8 7L16 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 320 |
</svg> |
| 321 |
</div> |
| 322 |
<div class="ai-instruction-title"> |
| 323 |
<h3>5. Translating Pages with AI</h3> |
| 324 |
<p>Automatically translate your content into multiple languages</p> |
| 325 |
</div> |
| 326 |
</div> |
| 327 |
<div class="ai-instruction-content"> |
| 328 |
<div class="ai-step"> |
| 329 |
<div class="ai-step-number">1</div> |
| 330 |
<div class="ai-step-content"> |
| 331 |
<h4>Access Translation Feature</h4> |
| 332 |
<p>In the WordPress admin, go to your posts or pages list. You'll find a "✨ Translate with AI" link in the row actions for each post or page</p> |
| 333 |
</div> |
| 334 |
</div> |
| 335 |
<div class="ai-step"> |
| 336 |
<div class="ai-step-number">2</div> |
| 337 |
<div class="ai-step-content"> |
| 338 |
<h4>Select Target Language</h4> |
| 339 |
<p>Click "Translate with AI" and a modal will appear. Choose the target language from the dropdown (English, French, Spanish, German, Italian, and more)</p> |
| 340 |
</div> |
| 341 |
</div> |
| 342 |
<div class="ai-step"> |
| 343 |
<div class="ai-step-number">3</div> |
| 344 |
<div class="ai-step-content"> |
| 345 |
<h4>AI Translation Process</h4> |
| 346 |
<p>Click "Translate" and AI will automatically translate the page title, meta description, and all content blocks while preserving the structure and formatting</p> |
| 347 |
</div> |
| 348 |
</div> |
| 349 |
<div class="ai-step"> |
| 350 |
<div class="ai-step-number">4</div> |
| 351 |
<div class="ai-step-content"> |
| 352 |
<h4>Review and Publish</h4> |
| 353 |
<p>A new draft page will be created with the translated content. Review it, make any necessary edits, and publish when ready</p> |
| 354 |
</div> |
| 355 |
</div> |
| 356 |
<div class="ai-tip"> |
| 357 |
<div class="ai-tip-icon">💡</div> |
| 358 |
<div class="ai-tip-content"> |
| 359 |
<strong>Pro Tip:</strong> Translated pages are automatically linked together. Use the Language Switcher block on your frontend to let visitors switch between languages. You can also translate headers and footers from the Site Editor by clicking the "Translate with AI" button in the bottom-right corner. |
| 360 |
</div> |
| 361 |
</div> |
| 362 |
</div> |
| 363 |
</div> |
| 364 |
</div> |
| 365 |
|
| 366 |
<!-- Getting Started CTA --> |
| 367 |
<div class="ai-cta-section"> |
| 368 |
<div class="ai-cta-content"> |
| 369 |
<h2 style="color: #fff;">Ready to Get Started?</h2> |
| 370 |
<p>Start creating amazing content with AI Builder today</p> |
| 371 |
<div class="ai-cta-buttons"> |
| 372 |
<button type="button" class="ai-primary-btn" |
| 373 |
onclick="window.location.href='<?php echo esc_url(admin_url('post-new.php')); ?>'"> |
| 374 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 375 |
<path d="M12 5V19" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 376 |
stroke-linejoin="round" /> |
| 377 |
<path d="M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 378 |
stroke-linejoin="round" /> |
| 379 |
</svg> |
| 380 |
Create New Page |
| 381 |
</button> |
| 382 |
<button type="button" class="ai-secondary-btn" |
| 383 |
onclick="window.location.href='<?php echo esc_url(admin_url('admin.php?page=aibui-credits')); ?>'"> |
| 384 |
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> |
| 385 |
<path |
| 386 |
d="M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21" |
| 387 |
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> |
| 388 |
<circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" |
| 389 |
stroke-linejoin="round" /> |
| 390 |
</svg> |
| 391 |
Manage Credits |
| 392 |
</button> |
| 393 |
</div> |
| 394 |
</div> |
| 395 |
</div> |
| 396 |
</div> |
