<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://www.0801media.com/<!DOCTYPE html> <html lang="en" class="scroll-smooth"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Your Dedicated Visual Partner | Retainer Packages</title>     <script src="https://cdn.tailwindcss.com"></script>     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>     <link rel="preconnect" href="https://fonts.googleapis.com">     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">     <!-- Chosen Palette: Warm Neutrals -->     <!-- Application Structure Plan: A single-page application with a smooth-scrolling navigation bar. The structure guides the user on a persuasive journey: 1. Hero section to grab attention. 2. An interactive "Problem/Solution" section to build empathy. 3. A clear "Who Benefits" section for audience identification. 4. An interactive "Packages" section with selectable cards and a comparison chart to aid decision-making. 5. A "Testimonials" slider for social proof. 6. An "FAQ" accordion to handle objections. 7. A final, strong "Call to Action". This non-linear but guided structure allows users to explore at their own pace while being led toward the consultation booking, making the sales pitch more engaging and effective than a static wall of text. -->     <!-- Visualization & Content Choices: Report Info: Package Tiers -> Goal: Compare options -> Viz/Presentation: Interactive cards + Chart.js Bar Chart. Interaction: Clicking a card highlights it and its corresponding bar on the chart. Justification: Visual comparison is faster and more intuitive than reading lists of features, helping users quickly grasp the value differences. Report Info: FAQs -> Goal: Organize info compactly -> Viz/Presentation: Accordion. Interaction: Click to expand/collapse. Justification: Prevents information overload and keeps the layout clean. Report Info: Pain Points/Solutions -> Goal: Create engagement -> Viz/Presentation: Interactive Toggles. Interaction: Click a pain point to reveal the solution. Justification: Turns passive reading into an active discovery process. -->     <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->     <style>         body {             font-family: 'Inter', sans-serif;         }         .chart-container {             position: relative;             width: 100%;             max-width: 600px;             margin-left: auto;             margin-right: auto;             height: 320px;             max-height: 400px;         }         @media (min-width: 768px) {             .chart-container {                 height: 350px;             }         }         .testimonial-slide {             display: none;             transition: opacity 0.5s ease-in-out;         }         .testimonial-slide.active {             display: block;         }         .nav-link {             transition: color 0.3s;         }         .nav-link:hover {             color: #f59e0b;         }         .cta-button {             transition: transform 0.2s, box-shadow 0.2s;         }         .cta-button:hover {             transform: translateY(-2px);             box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);         }     </style> </head> <body class="bg-stone-50 text-stone-800">      <header id="header" class="bg-white/80 backdrop-blur-lg sticky top-0 z-50 shadow-sm">         <nav class="container mx-auto px-6 py-4 flex justify-between items-center">             <a href="#" class="text-xl font-bold text-stone-900">[Your Business Name]</a>             <div class="hidden md:flex items-center space-x-8">                 <a href="#problems" class="nav-link text-stone-600">Why Retainers?</a>                 <a href="#packages" class="nav-link text-stone-600">Packages</a>                 <a href="#testimonials" class="nav-link text-stone-600">Testimonials</a>                 <a href="#cta" class="cta-button bg-amber-500 text-white font-bold py-2 px-4 rounded-lg shadow-md">Book a Consultation</a>             </div>             <button id="mobile-menu-button" class="md:hidden text-stone-800">                 <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path></svg>             </button>         </nav>         <div id="mobile-menu" class="hidden md:hidden px-6 pt-2 pb-4">             <a href="#problems" class="block py-2 text-stone-600">Why Retainers?</a>             <a href="#packages" class="block py-2 text-stone-600">Packages</a>             <a href="#testimonials" class="block py-2 text-stone-600">Testimonials</a>             <a href="#cta" class="block mt-2 text-center cta-button bg-amber-500 text-white font-bold py-2 px-4 rounded-lg shadow-md">Book a Consultation</a>         </div>     </header>      <main>         <section id="hero" class="relative text-center py-20 md:py-32 bg-white">             <div class="absolute inset-0 bg-stone-100 opacity-50"></div>             <div class="container mx-auto px-6 relative">                 <h1 class="text-4xl md:text-6xl font-bold text-stone-900 leading-tight">Your Dedicated Visual Partner</h1>                 <p class="mt-4 text-xl md:text-2xl text-amber-600 font-semibold">Stop Chasing Content. Start Captivating Your Audience.</p>                 <p class="mt-6 max-w-3xl mx-auto text-stone-600">                     Are you a band, venue, or creator in North Georgia tired of the endless search for a new freelancer for every single gig? Imagine having a visual storyteller who gets your vision and consistently delivers stunning content that makes you stand out.                 </p>                 <a href="#packages" class="mt-8 inline-block cta-button bg-amber-500 text-white font-bold py-3 px-8 rounded-lg text-lg shadow-lg">Explore Retainer Packages</a>             </div>         </section>          <section id="problems" class="py-16 md:py-24 bg-stone-100">             <div class="container mx-auto px-6">                 <div class="text-center mb-12">                     <h2 class="text-3xl md:text-4xl font-bold text-stone-900">End the Content Scramble</h2>                     <p class="mt-4 max-w-2xl mx-auto text-stone-600">This section demonstrates how a retainer partnership directly solves the most common and costly problems you face. Click on a problem to see the solution.</p>                 </div>                 <div class="grid md:grid-cols-2 gap-8 items-start">                     <div>                         <h3 class="text-2xl font-semibold mb-6 text-center">Common Problems You Face</h3>                         <div class="space-y-4">                             <button data-problem="1" class="problem-btn w-full text-left p-4 bg-white rounded-lg shadow-md border-2 border-transparent focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-200">                                 <h4 class="font-bold">Inconsistent Visuals</h4>                                 <p class="text-sm text-stone-500">One shoot looks great, the next falls flat. Your brand message gets diluted.</p>                             </button>                             <button data-problem="2" class="problem-btn w-full text-left p-4 bg-white rounded-lg shadow-md border-2 border-transparent focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-200">                                 <h4 class="font-bold">Missed Opportunities</h4>                                 <p class="text-sm text-stone-500">Key moments from your event go undocumented because you can't find a pro in time.</p>                             </button>                              <button data-problem="3" class="problem-btn w-full text-left p-4 bg-white rounded-lg shadow-md border-2 border-transparent focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-200">                                 <h4 class="font-bold">Wasted Time & Energy</h4>                                 <p class="text-sm text-stone-500">Endless emails, calls, and re-briefings for every single gig. It's exhausting.</p>                             </button>                              <button data-problem="4" class="problem-btn w-full text-left p-4 bg-white rounded-lg shadow-md border-2 border-transparent focus:outline-none focus:border-amber-500 focus:ring-2 focus:ring-amber-200">                                 <h4 class="font-bold">Budget Surprises</h4>                                 <p class="text-sm text-stone-500">One-off bookings add up, making it hard to predict and manage your marketing spend.</p>                             </button>                         </div>                     </div>                     <div class="bg-amber-50 p-8 rounded-lg shadow-inner mt-8 md:mt-0">                         <h3 class="text-2xl font-semibold mb-6 text-center">The Retainer Solution</h3>                         <div id="solution-text" class="text-stone-700 space-y-4">                             <div data-solution="1" class="solution-item hidden">                                 <h4 class="font-bold text-amber-700">Consistent Brand Story</h4>                                 <p>Every photo and video will align perfectly with your unique identity, building a stronger, more recognizable presence.</p>                             </div>                             <div data-solution="2" class="solution-item hidden">                                 <h4 class="font-bold text-amber-700">Peace of Mind & Priority Access</h4>                                 <p>Know that your visual content needs are covered, always. You get first dibs on my calendar for your most important dates and projects.</p>                             </div>                              <div data-solution="3" class="solution-item hidden">                                 <h4 class="font-bold text-amber-700">Seamless Execution</h4>                                 <p>I'll understand your brand and your specific needs from day one, making every shoot efficient and effective. No more re-briefings.</p>                             </div>                              <div data-solution="4" class="solution-item hidden">                                 <h4 class="font-bold text-amber-700">Cost-Effective Value</h4>                                 <p>Long-term commitment often means better rates compared to individual bookings, maximizing your budget with predictable costs.</p>                             </div>                              <div id="solution-default" class="text-center text-stone-500">                                 <p>Click on a problem to the left to see how a strategic partnership solves it.</p>                             </div>                         </div>                     </div>                 </div>             </div>         </section>                  <section id="who-benefits" class="py-16 md:py-24 bg-white">             <div class="container mx-auto px-6">                 <div class="text-center mb-12">                     <h2 class="text-3xl md:text-4xl font-bold text-stone-900">Is a Retainer Right For You?</h2>                     <p class="mt-4 max-w-2xl mx-auto text-stone-600">If you fall into one of these categories, a retainer is your game-changer for building a powerful visual brand.</p>                 </div>                 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">                     <div class="bg-stone-50 p-6 rounded-lg shadow-md text-center">                         <h3 class="font-bold text-lg text-amber-700">Bands & Musicians</h3>                         <p class="text-stone-600 mt-2 text-sm">For regular gigs, new music releases, and building a powerful online presence.</p>                     </div>                     <div class="bg-stone-50 p-6 rounded-lg shadow-md text-center">                         <h3 class="font-bold text-lg text-amber-700">Venues & Promoters</h3>                         <p class="text-stone-600 mt-2 text-sm">For frequent concerts, club nights, and special events needing ongoing documentation.</p>                     </div>                     <div class="bg-stone-50 p-6 rounded-lg shadow-md text-center">                         <h3 class="font-bold text-lg text-amber-700">Vloggers & Creators</h3>                         <p class="text-stone-600 mt-2 text-sm">For weekly or bi-weekly video content that demands consistent, professional quality.</p>                     </div>                      <div class="bg-stone-50 p-6 rounded-lg shadow-md text-center sm:col-start-1 lg:col-start-auto">                         <h3 class="font-bold text-lg text-amber-700">Event Organizers</h3>                         <p class="text-stone-600 mt-2 text-sm">For multiple annual events requiring high-quality candid and promotional coverage.</p>                     </div>                     <div class="bg-stone-50 p-6 rounded-lg shadow-md text-center">                         <h3 class="font-bold text-lg text-amber-700">Brands & Businesses</h3>                         <p class="text-stone-600 mt-2 text-sm">For a steady stream of engaging content for social media, websites, and marketing.</p>                     </div>                 </div>             </div>         </section>          <section id="packages" class="py-16 md:py-24 bg-stone-100">             <div class="container mx-auto px-6">                 <div class="text-center mb-12">                     <h2 class="text-3xl md:text-4xl font-bold text-stone-900">Choose Your Partnership Level</h2>                     <p class="mt-4 max-w-2xl mx-auto text-stone-600">Select a package to see how it compares. These are starting points and can be customized to your exact needs.</p>                 </div>                  <div class="grid lg:grid-cols-3 gap-8 items-stretch mb-12">                     <div class="package-card border-2 bg-white rounded-lg p-6 shadow-lg cursor-pointer hover:shadow-xl transition-shadow" data-package-index="0">                         <h3 class="text-2xl font-bold text-amber-700">Moment Catcher</h3>                         <p class="text-stone-500 mt-2">Ideal for emerging bands, small venues, and creators needing monthly support.</p>                         <p class="text-4xl font-bold my-6 text-stone-900">$450<span class="text-lg font-normal text-stone-500">/mo</span></p>                         <ul class="space-y-3 text-stone-600">                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> 4-6 hours of shooting</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> 50+ edited photos OR 2-min video</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> 1 pre-shoot consultation</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> Priority booking</li>                         </ul>                     </div>                     <div class="package-card border-2 bg-white rounded-lg p-6 shadow-lg cursor-pointer hover:shadow-xl transition-shadow" data-package-index="1">                         <h3 class="text-2xl font-bold text-amber-700">Visual Storyteller</h3>                         <p class="text-stone-500 mt-2">Perfect for established bands, busy venues, and growing content creators.</p>                         <p class="text-4xl font-bold my-6 text-stone-900">$850<span class="text-lg font-normal text-stone-500">/mo</span></p>                         <ul class="space-y-3 text-stone-600">                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> 8-12 hours of shooting</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> 100+ photos AND 5-min video</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> Monthly content strategy session</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> Expedited turnaround</li>                         </ul>                     </div>                     <div class="package-card border-2 bg-white rounded-lg p-6 shadow-lg cursor-pointer hover:shadow-xl transition-shadow" data-package-index="2">                         <h3 class="text-2xl font-bold text-amber-700">Brand Builder</h3>                         <p class="text-stone-500 mt-2">Comprehensive solution for high-volume needs and full brand development.</p>                         <p class="text-4xl font-bold my-6 text-stone-900">Custom<span class="text-lg font-normal text-stone-500">/mo</span></p>                         <ul class="space-y-3 text-stone-600">                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> 15+ hours of shooting</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> Unlimited photos & video</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> Bi-weekly strategy meetings</li>                             <li class="flex items-center"><span class="text-amber-500 mr-2">&#10003;</span> Dedicated asset management</li>                         </ul>                     </div>                 </div>                  <div class="bg-white p-6 rounded-lg shadow-md">                     <h3 class="text-xl font-bold text-center mb-4">Package Value Comparison (Hours/Month)</h3>                     <div class="chart-container">                         <canvas id="packageChart"></canvas>                     </div>                 </div>             </div>         </section>          <section id="testimonials" class="py-16 md:py-24 bg-white">             <div class="container mx-auto px-6">                 <div class="text-center mb-12">                     <h2 class="text-3xl md:text-4xl font-bold text-stone-900">What My Partners Say</h2>                      <p class="mt-4 max-w-2xl mx-auto text-stone-600">Real results from long-term collaborations.</p>                 </div>                 <div class="relative max-w-3xl mx-auto">                     <div id="testimonial-container" class="overflow-hidden">                         <div class="testimonial-slide active">                             <div class="bg-stone-100 p-8 rounded-lg shadow-md text-center">                                 <p class="text-stone-600 italic">"Working with [Your Name] on a monthly retainer has been a game-changer. We always have fresh, dynamic content for our social media, and we never have to worry about finding a photographer last minute. He just *gets* our vibe!"</p>                                 <p class="font-bold text-amber-700 mt-4">— The Howling Pines (Band)</p>                             </div>                         </div>                         <div class="testimonial-slide">                             <div class="bg-stone-100 p-8 rounded-lg shadow-md text-center">                                 <p class="text-stone-600 italic">"As a vlogger, consistency is key. The retainer has allowed me to consistently produce high-quality video content without the stress of managing production myself. It's the best investment I've made in my channel."</p>                                 <p class="font-bold text-amber-700 mt-4">— Georgia On The Go (Vlogger)</p>                             </div>                         </div>                     </div>                     <button id="prev-testimonial" class="absolute top-1/2 left-0 -translate-x-12 -translate-y-1/2 bg-white rounded-full p-2 shadow-md">&lt;</button>                     <button id="next-testimonial" class="absolute top-1/2 right-0 translate-x-12 -translate-y-1/2 bg-white rounded-full p-2 shadow-md">&gt;</button>                 </div>             </div>         </section>                  <section id="faq" class="py-16 md:py-24 bg-stone-100">             <div class="container mx-auto px-6 max-w-3xl">                 <div class="text-center mb-12">                     <h2 class="text-3xl md:text-4xl font-bold text-stone-900">Still Have Questions?</h2>                 </div>                 <div class="space-y-4">                     <div class="faq-item bg-white rounded-lg shadow-md">                         <button class="faq-question w-full flex justify-between items-center text-left p-6">                             <span class="font-semibold text-lg">What if my needs change month-to-month?</span>                             <span class="faq-icon text-2xl font-light text-amber-600">+</span>                         </button>                         <div class="faq-answer hidden p-6 pt-0 text-stone-600">                             <p>Retainer terms are flexible. We build in a process for reviewing your needs and can adjust hours or deliverables with proper notice. We'll outline this clearly during our consultation.</p>                         </div>                     </div>                      <div class="faq-item bg-white rounded-lg shadow-md">                         <button class="faq-question w-full flex justify-between items-center text-left p-6">                             <span class="font-semibold text-lg">Can I get a custom package?</span>                             <span class="faq-icon text-2xl font-light text-amber-600">+</span>                         </button>                         <div class="faq-answer hidden p-6 pt-0 text-stone-600">                             <p>Absolutely! The tiers shown are a starting point. The goal is to create a partnership that perfectly fits your requirements. We can tailor a solution just for you.</p>                         </div>                     </div>                      <div class="faq-item bg-white rounded-lg shadow-md">                         <button class="faq-question w-full flex justify-between items-center text-left p-6">                             <span class="font-semibold text-lg">How far in advance do I need to book my retainer time?</span>                             <span class="faq-icon text-2xl font-light text-amber-600">+</span>                         </button>                         <div class="faq-answer hidden p-6 pt-0 text-stone-600">                             <p>As a retainer partner, you get priority scheduling. While more notice is always better, especially for large events, we'll work together to ensure your key dates are always covered.</p>                         </div>                     </div>                 </div>             </div>         </section>          <section id="cta" class="py-20 md:py-28 bg-amber-500 text-white">             <div class="container mx-auto px-6 text-center">                 <h2 class="text-3xl md:text-5xl font-bold">Ready to Secure Your Visual Future?</h2>                 <p class="mt-6 max-w-2xl mx-auto text-amber-100 text-lg">Stop worrying about your visual content and start focusing on what you do best. Let's build a partnership that ensures your story is always told with impact.</p>                 <a href="#" class="mt-10 inline-block cta-button bg-white text-amber-600 font-bold py-4 px-10 rounded-lg text-xl shadow-lg">Book Your Free Consultation</a>                 <p class="mt-4 text-sm text-amber-200">This no-obligation call is your chance to get a personalized recommendation.</p>             </div>         </section>     </main>      <footer class="bg-stone-800 text-stone-300 py-8">         <div class="container mx-auto px-6 text-center">             <p>&copy; 2025 [Your Business Name]. All Rights Reserved.</p>             <p class="mt-2">North Georgia's Premier Visual Storyteller</p>             <div class="mt-4">                 <a href="#" class="text-stone-400 hover:text-white mx-2">Email</a> |                 <a href="#" class="text-stone-400 hover:text-white mx-2">Instagram</a> |                 <a href="#" class="text-stone-400 hover:text-white mx-2">Facebook</a>             </div>         </div>     </footer>      <script>         document.addEventListener('DOMContentLoaded', function() {             const mobileMenuButton = document.getElementById('mobile-menu-button');             const mobileMenu = document.getElementById('mobile-menu');             mobileMenuButton.addEventListener('click', () => {                 mobileMenu.classList.toggle('hidden');             });              const problemButtons = document.querySelectorAll('.problem-btn');             const solutionItems = document.querySelectorAll('.solution-item');             const solutionDefault = document.getElementById('solution-default');              problemButtons.forEach(button => {                 button.addEventListener('click', () => {                     const problemId = button.dataset.problem;                     solutionItems.forEach(item => {                         if (item.dataset.solution === problemId) {                             item.classList.remove('hidden');                         } else {                             item.classList.add('hidden');                         }                     });                     solutionDefault.classList.add('hidden');                     problemButtons.forEach(btn => btn.classList.remove('bg-amber-100'));                     button.classList.add('bg-amber-100');                 });             });              const packageCards = document.querySelectorAll('.package-card');             const packageChartData = {                 labels: ['Moment Catcher', 'Visual Storyteller', 'Brand Builder'],                 datasets: [{                     label: 'Estimated Hours / Month',                     data: [6, 12, 18],                     backgroundColor: [                         'rgba(245, 158, 11, 0.2)',                         'rgba(245, 158, 11, 0.2)',                         'rgba(245, 158, 11, 0.2)',                     ],                     borderColor: [                         'rgba(245, 158, 11, 1)',                         'rgba(245, 158, 11, 1)',                         'rgba(245, 158, 11, 1)',                     ],                     borderWidth: 2                 }]             };              const packageChartCtx = document.getElementById('packageChart').getContext('2d');             const myPackageChart = new Chart(packageChartCtx, {                 type: 'bar',                 data: packageChartData,                 options: {                     responsive: true,                     maintainAspectRatio: false,                     scales: {                         y: {                             beginAtZero: true,                             title: {                                 display: true,                                 text: 'Hours'                             }                         }                     },                     plugins: {                         legend: {                             display: false                         }                     }                 }             });              function highlightPackage(index) {                 packageCards.forEach((card, i) => {                     if (i === index) {                         card.classList.add('border-amber-500', 'shadow-2xl');                         card.classList.remove('border-transparent');                     } else {                         card.classList.remove('border-amber-500', 'shadow-2xl');                         card.classList.add('border-transparent');                     }                 });                  myPackageChart.data.datasets[0].backgroundColor = packageChartData.datasets[0].backgroundColor.map((color, i) => {                     return i === index ? 'rgba(245, 158, 11, 0.6)' : 'rgba(245, 158, 11, 0.2)';                 });                 myPackageChart.update();             }                          packageCards.forEach((card, index) => {                 card.addEventListener('click', () => {                     highlightPackage(index);                 });             });                          highlightPackage(1);              const testimonialSlides = document.querySelectorAll('.testimonial-slide');             const prevTestimonialBtn = document.getElementById('prev-testimonial');             const nextTestimonialBtn = document.getElementById('next-testimonial');             let currentTestimonial = 0;              function showTestimonial(index) {                 testimonialSlides.forEach((slide, i) => {                     slide.classList.toggle('active', i === index);                 });             }              prevTestimonialBtn.addEventListener('click', () => {                 currentTestimonial = (currentTestimonial - 1 + testimonialSlides.length) % testimonialSlides.length;                 showTestimonial(currentTestimonial);             });              nextTestimonialBtn.addEventListener('click', () => {                 currentTestimonial = (currentTestimonial + 1) % testimonialSlides.length;                 showTestimonial(currentTestimonial);             });              const faqItems = document.querySelectorAll('.faq-item');             faqItems.forEach(item => {                 const question = item.querySelector('.faq-question');                 const answer = item.querySelector('.faq-answer');                 const icon = item.querySelector('.faq-icon');                 question.addEventListener('click', () => {                     const isHidden = answer.classList.contains('hidden');                     answer.classList.toggle('hidden');                     icon.textContent = isHidden ? '-' : '+';                 });             });         });     </script> </body> </html></loc><lastmod>2025-07-28</lastmod></url></urlset>