Custom Image Upload Guide

Learn how to customize images and visuals on your NoLimitVal website

Method 1: Using Image URLs

Step 1: Upload to Image Host

Upload your images to a free image hosting service:

• Imgur.com - Free, no account needed
• Imgbb.com - Simple and reliable
• Unsplash.com - High-quality free photos

Step 2: Get the Direct Image Link

After uploading, copy the direct image URL (ending in .jpg, .png, etc.)

Example: https://i.imgur.com/abc123.png

Step 3: Update Component Code

Ask me to update specific images by providing the URL. For example:

"Update the hero background to use this image: https://i.imgur.com/xyz789.png"

Method 2: Base44 File Upload (Advanced)

For files uploaded through the Base44 platform, use the Core.UploadFile integration.

// Example: Upload file and get URL
const { file_url } = await base44.integrations.Core.UploadFile({
  file: uploadedFile
});

// Use the file_url in your image components

Image Locations in Your Site

🏠 Hero Background

File: components/home/Hero.jsx

Full-width background on homepage

💼 Service Cards

File: components/home/ServicesOverview.jsx

Image headers for each service card

🎯 Results Carousel

File: components/home/ResultsCarousel.jsx

Testimonial and achievement images in slider

🏆 Rewards Section

File: components/home/MonthlyRewards.jsx

Prize card headers and loyalty badges

💡 Quick Tips

Image Size: Use high-resolution images (at least 1920x1080 for backgrounds)
Format: Use .jpg for photos, .png for logos/graphics with transparency
Optimization: Compress images before uploading (use tinypng.com)
Branding: Use the NoLimitVal colors - Primary: #FF4655 (red), Dark: #0F1923, Surface: #1F2937
Just Ask: Tell me what you want to update and provide the image URL - I'll handle the code!

Need help customizing images? Just let me know what you want to change!