Marketing Geospatial Website

A sophisticated, direct marketing website for Marketing Geospatial featuring MAPSCAPING podcast sponsorship opportunities and personal branding services for geospatial professionals.

🌟 Features

• Sophisticated Design - Elegant serif headlines (Cormorant Garamond) with clean sans-serif body (DM Sans)
• Direct, Conversational Tone - Problem-Agitate-Solution sales framework
• Static HTML Site - No build process required, easy to deploy and maintain
• Responsive Design - Mobile-first approach that works beautifully on all devices
• Strategic Sales Pages - PAS framework for podcast sponsorship and personal branding
• Google Calendar Integration - Embedded appointment scheduling (requires setup)
• SEO Optimized - Meta tags and Open Graph tags on all pages
• Modular Structure - Shared header/footer via JavaScript partials

📁 Site Structure

Marketing Geospatial Website/
├── index.html                  # Home page / Landing page
├── work-with-me/
│   └── index.html             # Hub page linking to services
├── sponsorship/
│   └── index.html             # Podcast sponsorship sales page
├── personal-branding/
│   └── index.html             # Personal branding sales page
├── about/
│   └── index.html             # About the podcast and host
├── testimonials/
│   └── index.html             # Social proof and testimonials
├── blog/
│   └── index.html             # Blog listing (placeholder)
├── contact/
│   └── index.html             # Contact page with booking embed
├── partials/
│   ├── header.html            # Shared header with navigation
│   └── footer.html            # Shared footer
├── assets/
│   ├── css/
│   │   └── styles.css         # Main stylesheet
│   └── js/
│       └── partials.js        # Header/footer loader & utilities
└── README.md                  # This file

🎨 Navigation

• Home - Landing page with podcast overview and CTAs
• Work with Me - Hub page featuring both offerings
  • Podcast Sponsorship
  • Personal Branding
• About - Host bio, podcast mission, and stats
• Testimonials - Success stories and social proof
• Blog - Industry insights (placeholder for now)
• Contact - Booking calendar and email options

🚀 Local Development

Since this is a static site, you can run it locally with any web server:

Option 1: Python (if installed)

# Python 3
python -m http.server 8000

# Then visit http://localhost:8000

Option 2: PHP (since you have it on Cloudways)

php -S localhost:8000

# Then visit http://localhost:8000

Option 3: VS Code Live Server

• Install the "Live Server" extension in VS Code
• Right-click index.html and select "Open with Live Server"

📅 Google Calendar Setup

The booking functionality requires Google Workspace appointment scheduling. Here's how to set it up:

1. Go to Google Calendar (sign in with your Google Workspace account)
2. Click the gear icon (Settings) in the top right
3. Select Appointment schedules from the left menu
4. Click + Create to create a new appointment schedule
5. Configure your:
   • Appointment duration (e.g., 30 or 60 minutes)
   • Availability (days/times you're available)
   • Buffer times between appointments
   • Booking form fields
6. Save your appointment schedule
7. Click on the appointment schedule name, then click Share
8. Copy the embed code (starts with <iframe>)
9. Replace the .calendar-placeholder div in these files:
   • contact/index.html
   • sponsorship/index.html
   • personal-branding/index.html

Example embed code:

<iframe src="https://calendar.google.com/calendar/appointments/schedules/YOUR-SCHEDULE-ID" 
        width="100%" 
        height="600" 
        frameborder="0">
</iframe>

Note: Embedding requires a Google Workspace account. Personal Gmail accounts should use a booking link instead.

🌐 Deployment to Cloudways via GitHub

Step 1: Push to GitHub

1. Initialize Git (if not already done):

   git init
   git add .
   git commit -m "Initial commit - Marketing Geospatial website"

2. Create a GitHub repository:

   • Go to GitHub
   • Create a new repository (e.g., mapscaping-marketing)
   • Don't initialize with README (you already have one)

3. Push your code:

   git remote add origin https://github.com/YOUR-USERNAME/mapscaping-marketing.git
   git branch -M main
   git push -u origin main

Step 2: Set Up Cloudways

1. Log into your Cloudways account
2. Create or select your application
3. Note your server details:
   • Server IP address
   • SSH username
   • Application path (usually something like /home/master/applications/YOUR-APP/public_html)

Step 3: Deploy from GitHub to Cloudways

You have two deployment options:

Option A: Manual Git Pull (Simple)

1. SSH into your Cloudways server:

   ssh YOUR-SSH-USER@YOUR-SERVER-IP

2. Navigate to your application directory:

   cd /home/master/applications/YOUR-APP/public_html

3. Clone your repository (first time only):

   # Clear the directory first (backup if needed)
   rm -rf *
   rm -rf .htaccess
   
   # Clone your repo
   git clone https://github.com/YOUR-USERNAME/mapscaping-marketing.git .

4. For subsequent updates, just pull:

   cd /home/master/applications/YOUR-APP/public_html
   git pull origin main

Option B: Automated Deployment with Git Webhook

1. Create a deployment script on your Cloudways server at /home/master/applications/YOUR-APP/deploy.php:

   <?php
   $secret = 'YOUR-SECRET-KEY'; // Change this to a random string
   
   $headers = getallheaders();
   $signature = isset($headers['X-Hub-Signature']) ? $headers['X-Hub-Signature'] : '';
   
   $payload = file_get_contents('php://input');
   
   // Verify signature (optional but recommended)
   if ($signature) {
       $hash = 'sha1=' . hash_hmac('sha1', $payload, $secret);
       if (!hash_equals($hash, $signature)) {
           http_response_code(403);
           die('Invalid signature');
       }
   }
   
   // Execute git pull
   $output = shell_exec('cd /home/master/applications/YOUR-APP/public_html && git pull origin main 2>&1');
   
   echo "Deployment completed:\n";
   echo $output;
   ?>

2. Set up GitHub webhook:

   • Go to your GitHub repo → Settings → Webhooks
   • Add webhook: https://yourdomain.com/deploy.php
   • Content type: application/json
   • Secret: (your secret key from above)
   • Events: Just the push event

Now every time you push to GitHub, it automatically deploys to Cloudways!

Step 4: Configure Web Root

Ensure your Cloudways application web root points to the correct directory:

• If you cloned directly into public_html, you're all set
• If you cloned into a subdirectory, update the web root in Cloudways settings

Step 5: Set Up Domain (Optional)

1. In Cloudways, go to Domain Management
2. Add your custom domain
3. Update DNS records at your domain registrar to point to Cloudways

📝 Content Customization

Update Branding & Contact

• Update email address from daniel@mapscaping.com to your actual email
• The site correctly brands "Marketing Geospatial" as the company and "MAPSCAPING" as a separate podcast brand
• Update Daniel O'Donohue's name if needed throughout the site

Update Social Links

In partials/footer.html, update:

• Podcast link
• LinkedIn URL
• Twitter URL

Add Stats & Numbers

Replace placeholder values (marked with [XXX] or [X,XXX]) with real data:

• Monthly downloads
• Countries reached
• Number of episodes
• Years on air

Add Testimonials

In testimonials/index.html, replace placeholder testimonials with real quotes from:

• Sponsors
• Podcast guests
• Listeners

Add Company Logos

In testimonials/index.html, replace .logo-placeholder divs with actual company logos.

Update Pricing

Add real pricing information in:

• sponsorship/index.html (package prices)
• personal-branding/index.html (investment range)

🎨 Design Customization

All styling is in assets/css/styles.css. Key variables at the top:

:root {
    --primary-color: #2563eb;        /* Main brand color */
    --primary-dark: #1e40af;         /* Hover states */
    --accent-color: #10b981;         /* Success/check marks */
    /* ... more variables */
}

📱 Browser Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile responsive (tested on iOS and Android)
• Progressive enhancement for older browsers

🔒 Security Notes

• No sensitive data stored on the site
• Contact form uses Google Calendar (secure, third-party)
• Static site = minimal attack surface
• Update links in footer to include rel="noopener" for external links (already done)

📊 Analytics (Optional)

To add Google Analytics or similar:

1. Add your tracking code before </head> in all HTML files, or
2. Add it to partials/header.html for automatic inclusion everywhere

🛠️ Maintenance

Adding New Pages

1. Create a new directory with index.html
2. Copy structure from existing pages
3. Add link to navigation in partials/header.html
4. Add link to footer in partials/footer.html

Adding Blog Posts

For now, blog posts are static HTML. To add one:

1. Create blog/post-slug/index.html
2. Copy structure from existing pages
3. Add card to blog/index.html

Consider adding a static site generator (like Eleventy or Hugo) if you plan many blog posts.

🐛 Troubleshooting

Header/Footer Not Loading

• Check browser console for JavaScript errors
• Ensure partials/header.html and partials/footer.html exist
• Verify paths in assets/js/partials.js

Styles Not Applying

• Clear browser cache
• Check assets/css/styles.css path in HTML files
• Verify CSS file was uploaded correctly

Google Calendar Embed Not Showing

• Verify you're using a Google Workspace account (not personal Gmail)
• Check iframe embed code is correct
• Ensure no ad blockers are interfering

📞 Support

For questions or issues, contact:

• Email: daniel@mapscaping.com
• Website: mapscaping.com

📄 License

© 2026 Marketing Geospatial. All rights reserved.

---

Built with ❤️ for the geospatial community